[hidden] { display: none !important; }
.professional-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding-block: 8px; color: var(--amber-light); font-size: 13px; border-bottom: 1px solid #d6ad5570; }
.professional-more svg { width: 18px; height: 18px; }
.contact-page { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,8vw,160px); padding-block: 70px 110px; }
.contact-intro h2 { font-size: clamp(45px,4.5vw,88px); line-height: 1.08; margin: 25px 0; letter-spacing: -.045em; }
.contact-intro h2 span { font-family: Georgia,serif; font-style: italic; color: var(--amber-light); }
.contact-intro>p:last-child { max-width: 34ch; line-height: 1.9; font-size: 17px; }
.contact-form { position: relative; background: #10243b; border: 1px solid #d6ad5545; border-radius: 22px; padding: clamp(25px,3vw,52px); }
.contact-form>label { display: block; font-size: 14px; color: #f3f7fb; margin-bottom: 10px; }
.contact-form .optional { color: #afc0d1; font-size: 12px; }
.contact-form>input, .contact-form>textarea { width: 100%; display: block; font-family: inherit; font-size: 16px; color: #fff; background: #08192e; border: 1px solid #aac3dd55; border-radius: 9px; padding: 14px 16px; margin-bottom: 24px; }
.contact-form>textarea { resize: vertical; min-height: 165px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--amber); outline-offset: 3px; }
.contact-form .contact-consent { display: flex; gap: 12px; font-size: 12px; line-height: 1.7; color: #cbd6e1; margin: 4px 0 25px; align-items: flex-start; }
.contact-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: #d6ad55; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-status { font-size: 14px; line-height: 1.75; color: #f0ce86; margin-top: 20px; }
.contact-status:empty { display: none; }
.contact-status.error { color: #ffc4b6; }
button:disabled { opacity: .65; cursor: wait; }
/* Individual scale leaves existing translate/rotate positioning intact. */
button, .button, .arrow-circle, .floating-lesson, .professional-mark, a svg, button svg, .hero-footnote svg, .brand img { transition: scale .38s cubic-bezier(.2,.7,.2,1), color .3s, background .3s, border-color .3s; }
@media(hover:hover){
 button:not(:disabled):hover, .button:hover, .floating-lesson:hover { scale: 1.025; }
 a:hover svg, button:hover svg, .arrow-link:hover .arrow-circle, .professional-details article:hover .professional-mark, .hero-footnote:hover svg, .brand:hover img { scale: 1.1; }
}
button:active, .button:active { scale: .98; }
.reveal { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; translate: 0 0; }
.brand-ribbon { position: relative; isolation: isolate; overflow: hidden; background: #061632; }
.brand-ribbon:before { content: ''; position: absolute; inset: -6% -8%; z-index: -1; background: url('assets/brand-ribbon.svg') center / cover no-repeat; animation: signature-drift 14s ease-in-out infinite alternate; }
@keyframes signature-drift { from { transform: translate3d(-2.5%,0,0) scale(1.03); } to { transform: translate3d(2.5%,0,0) scale(1.07); } }
@media(max-width:800px){ .contact-page { grid-template-columns: 1fr; gap: 35px; padding-block: 40px 65px; } .contact-form { padding: 25px 22px; } .contact-intro h2 { font-size: 48px; } }
@media(prefers-reduced-motion:reduce){ .reveal { opacity: 1; translate: none; } .brand-ribbon:before { animation: none; } button, .button, .arrow-circle, .floating-lesson, .professional-mark, a svg, button svg, .hero-footnote svg, .brand img { transition: none; scale: 1 !important; } }

/* Keep width in the transition list: the shared icon rule previously replaced it. */
.arrow-link .arrow-circle { transition: width .85s cubic-bezier(.22,.61,.36,1), background .85s ease, border-color .85s ease; }
.arrow-link:hover .arrow-circle, .arrow-link:focus-visible .arrow-circle { scale: 1; }
.arrow-circle i { transition: transform .85s cubic-bezier(.22,.61,.36,1), background .85s ease; }
.portrait-link { display: block; color: inherit; text-decoration: none; }
.portrait-link .portrait { transform-origin: center bottom; transition: scale .9s cubic-bezier(.22,.61,.36,1); }
@media(hover:hover){ .portrait-link:hover .portrait { scale: 1.035; } }
.portrait-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
.portrait-link:focus-visible .portrait { scale: 1.035; }
/* Identical mirrored pairs meet at matching image edges; one mirrored pair is one period. Only the column-filled right half is shown. */
.hero-pillars { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: .8; container-type: size; }
.pillar-track { display: flex; width: 600cqh; height: 100%; animation: pillars-left 60s linear infinite; }
.pillar-track > span { flex: 0 0 calc(100% / 6); height: 100%; background: url('assets/pilares-noche.png') right center / 200% 100% no-repeat; }
.pillar-track > span:nth-child(even) { transform: scaleX(-1); }
.hero:before { background: linear-gradient(90deg,#091d36 5%,#091d36ae 52%,#091d3620); opacity: 1; }
@keyframes pillars-left { to { transform: translate3d(calc(-100% / 3),0,0); } }
#contact-view { scroll-margin-top: 30px; }
@media(prefers-reduced-motion:reduce){ .pillar-track { animation: none; } .portrait-link .portrait { transition: none; scale: 1; } }

/* Fade both the cutout and its blue shade: neither layer leaves a rectangular edge. */
.portrait-link .portrait, .portrait-link .portrait-shade {
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 16%,#000 82%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 8%,#000 48%,#000000b3 66%,#00000040 82%,transparent 96%);
  mask-image: linear-gradient(90deg,transparent 0%,#000 16%,#000 82%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 8%,#000 48%,#000000b3 66%,#00000040 82%,transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.portrait-link .portrait-shade { background: linear-gradient(0deg,#091d36 5%,#091d3699 32%,transparent 64%); pointer-events: none; }
@media(max-width:800px){ .pillar-track { animation-duration: 90s; } }

/* Poster transforms must survive the general button transition rule. */
.feature-poster {
  transition: transform .9s cubic-bezier(.22,.61,.36,1), scale .9s cubic-bezier(.22,.61,.36,1), filter .9s ease, box-shadow .9s ease, border-color .4s ease;
  will-change: transform;
}
.about-pillar-image { display: block; width: 100%; height: clamp(380px,45vw,760px); object-fit: cover; object-position: center; margin-top: 42px; opacity: .1; pointer-events: none; mask-image: linear-gradient(180deg,transparent,#000 14%,#000 85%,transparent); }
@media(max-width:800px){ .about-pillar-image { height: 240px; margin-top: 24px; object-position: center 34%; } }
@media(prefers-reduced-motion:reduce){ .feature-poster { transition: none; will-change: auto; } }

/* Extend the architecture to the section edge and dissolve into the white column. */
.about-section { --about-bleed: max(var(--gutter),calc((100vw - var(--page-max))/2)); padding-inline: var(--about-bleed); }
.about-pillar-image {
  width: calc(100% + var(--about-bleed)); max-width: none;
  margin-left: calc(-1 * var(--about-bleed)); border: 0; border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 38%,#00000099 65%,transparent 100%), linear-gradient(180deg,transparent,#000 14%,#000 85%,transparent);
  mask-image: linear-gradient(90deg,#000 0%,#000 38%,#00000099 65%,transparent 100%), linear-gradient(180deg,transparent,#000 14%,#000 85%,transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}