/* ============================================================
   Oporto · Arch-reveal hero (approved)
   Fully isolated: every class/id is prefixed "ax-" so nothing
   here collides with styles.css. Linked AFTER styles.css.
   ============================================================ */

.ax-arch-hero{
  --ax-blue:#00769F;
  --ax-ink:#0B0B0C;
  position:relative;
  height:170vh;                 /* scroll distance for the scrub (2026-10-22: was 280vh, too long after headline) */
  background:var(--ax-blue);
  margin:0;
}
.ax-arch-hero *{box-sizing:border-box}

.ax-stage{
  position:sticky;top:0;
  height:100vh;width:100%;
  overflow:hidden;
  background:var(--ax-blue);
}
.ax-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1.12);will-change:transform;
}
.ax-cover{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;will-change:opacity;
}
#axArchG{will-change:transform}

/* intro caption over the arch — no z-index so the word can blend with the photo */
.ax-cap{
  position:absolute;left:0;right:0;top:42%;transform:translateY(-50%);
  text-align:center;pointer-events:none;
}
.ax-word,.ax-word-blend{
  display:block;width:clamp(300px,90vw,1520px);height:auto;margin-inline:auto;
}
.ax-word{position:relative;will-change:clip-path,opacity,transform}
.ax-word-blend{
  position:absolute;left:0;right:0;top:0;opacity:.6;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.45));
  will-change:clip-path,opacity,transform;
}
.ax-word path,.ax-word polygon{fill:#fff}
.ax-word-blend path,.ax-word-blend polygon{fill:#fff}

/* end state: headline over the full photo (header/nav come from the real site) */
.ax-final{
  position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  will-change:opacity;
}
.ax-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,11,12,.70),rgba(11,11,12,.30) 42%,rgba(11,11,12,0) 68%),
    linear-gradient(0deg,rgba(11,11,12,.60),rgba(11,11,12,0) 42%);
}
.ax-fh{
  position:absolute;
  left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);
  top:clamp(96px,14vh,150px);bottom:clamp(36px,6vh,72px);
  display:flex;flex-direction:column;justify-content:flex-start;
  max-width:1200px;pointer-events:none;
}
.ax-fh-eyebrow{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  opacity:.92;font-weight:600;margin:0 0 16px;
}
.ax-fh-title{
  font-family:"Inter Tight",Inter,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(38px,7vw,107px);line-height:.9;letter-spacing:-.01em;color:#fff;
  margin:0;text-shadow:0 2px 40px rgba(0,0,0,.4);
}
/* headline line-breaks: 2 lines on desktop, 3 on phones */
.ax-fh-title .ax-br-m{display:none}
@media (max-width:760px){
  .ax-fh-title{font-size:clamp(28px,8.9vw,38px)}
  /* Spanish headline is short (2 lines) so it can run bigger on phones */
  html[lang="es"] .ax-fh-title{font-size:clamp(34px,11.3vw,48px)}
  .ax-fh-title .ax-br-d{display:none}
  .ax-fh-title .ax-br-m{display:inline}
  .ax-arch-hero .ax-fh-price{white-space:normal}
  /* lift the dark fade higher so the paragraph + price under the H1 stay readable */
  .ax-arch-hero .ax-scrim{
    background:linear-gradient(0deg,
      rgba(11,11,12,.82),
      rgba(11,11,12,.55) 70%,
      rgba(11,11,12,0) 90%);
  }
}

/* desktop/tablet only: headline a touch bigger, more for Spanish than English */
@media (min-width:761px){
  html[lang="en"] .ax-fh-title{font-size:clamp(38px,7.14vw,109px)}
  html[lang="es"] .ax-fh-title{font-size:clamp(38px,7.35vw,112px)}
}
.ax-fh-lead{
  font-weight:300;font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:#fff;
  max-width:460px;margin:clamp(20px,3vh,34px) 0 0;
}
.ax-fh-price{
  font-weight:700;font-size:14px;color:#fff;opacity:.9;white-space:nowrap;margin:14px 0 0;
}
.ax-fh-rule{
  border:0;border-top:1px solid rgba(255,255,255,.65);
  width:clamp(260px,34vw,480px);margin:22px 0 0;
}
.ax-fh-cta{display:flex;gap:13px;flex-wrap:wrap;pointer-events:auto;margin:22px 0 0}

/* hero's own button styles (~10% larger than site defaults) — NOT .btn */
.ax-btn{
  display:inline-block;padding:12px 22px;border-radius:999px;
  font-family:Inter,system-ui,sans-serif;font-size:15.4px;font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;background:transparent;
}
.ax-btn-blue{background:var(--ax-blue);border-color:var(--ax-blue);color:#fff}
.ax-btn-outline{border-color:rgba(255,255,255,.85);color:#fff}
.ax-btn-ghost{color:#fff;border-color:transparent;padding-left:6px}

/* partner lockup under the header Oporto logo, centered on it (hero only).
   The SVG itself carries the colors: Mejía Villegas + 40 Años are white, Novus keeps
   its real blue-green gradient — so NO brightness/invert filter here. */
.ax-endorse{
  position:absolute;z-index:3;top:74px;left:calc(var(--gutter, 56px) + 93px + var(--brand-shift, 28px));
  transform:translateX(-50%);width:336px;height:auto;
  pointer-events:none;will-change:opacity;
  filter:drop-shadow(0 1px 7px rgba(0,0,0,.38));
}
@media (max-width:760px){
  .ax-endorse{width:244px}
}

.ax-hint{
  position:absolute;z-index:3;left:50%;bottom:11vh;transform:translateX(-50%);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.8;
  will-change:opacity;pointer-events:none;
}

@media (max-width:760px){
  .ax-btn-outline{display:none}
}

@media (prefers-reduced-motion: reduce){
  .ax-arch-hero{height:100vh}
  .ax-stage{position:relative}
  .ax-hint{display:none}
}

/* Header "Agenda tu visita": thin white outline while over the blue hero */
.site-header:not(.is-scrolled) .header-actions .btn--solid{ border-color:rgba(255,255,255,.8); }