/* ============================================================
   Centro Anma — hoja de estilos
   1. Tipografías        5. Cabecera / navegación
   2. Tokens             6. Bloques de contenido
   3. Reset y base       7. Componentes
   4. Utilidades         8. Pie / responsive
   ============================================================ */

/* ---------- 1. Tipografías ---------- */
@font-face {
  font-family: 'DMSansVar';
  src: url('../fonts/dmsans.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- 2. Tokens ----------
   ÚNICA fuente de verdad del diseño. Cambiar un valor aquí lo cambia en toda
   la web: no hay colores sueltos repartidos por los componentes.
   La paleta está tomada directamente del logotipo de Centro Anma.
   ------------------------------------------------------------------ */
:root {
  /* --- Marca (colores del logotipo) --- */
  --brand:        #0096d7;   /* azul corporativo, el de la palabra «anma» */
  --brand-mid:    #007fbb;   /* azul de apoyo para estados hover */
  --brand-deep:   #1C3157;   /* azul marino del logotipo: titulares y fondos oscuros */
  --brand-tint:   #e7f4fb;   /* azul muy claro para fondos y etiquetas */
  --brand-line:   #b7dff3;   /* bordes y separadores en azul */
  --brand-soft:   #85c9ee;   /* azul claro del logotipo */

  --accent:       #d9411c;   /* rojo del logotipo, para acentos y avisos */
  --accent-tint:  #fdeae4;
  --gold:         #f2b647;   /* amarillo del logotipo */
  --gold-tint:    #fdf3dd;
  --lime:         #c4d987;   /* verde lima del logotipo */
  --lime-tint:    #f1f7e2;

  /* --- LAS CUATRO SUPERFICIES DE SECCIÓN ---
     Aparte del héroe, toda la web alterna solo entre estas cuatro.
     No añadir más: si hace falta contraste, se alterna, no se inventa. */
  --surface-cream: #faf5ec;   /* claro 1 · fondo base de la página */
  --surface-alt:   #eee9e0;   /* claro 2 · superficie alterna, plana */
  --surface-navy:  #1C3157;   /* oscuro 1 · azul marino del logotipo */
  --surface-ocean: #00699b;   /* oscuro 2 · azul intermedio para la llamada */

  /* --- Neutros de componente --- */
  --cream:        #fffdf9;   /* tarjetas y cabecera, sobre los fondos claros */
  --sand:         var(--surface-cream);
  --white:        #ffffff;

  --ink:          #10243a;   /* texto principal */
  --ink-soft:     #4d6376;   /* texto secundario */
  --ink-faint:    #8598a6;   /* texto terciario y etiquetas */

  --bg:           var(--surface-cream);
  --surface:      var(--cream);
  --border:       #e6ddcd;
  --border-soft:  #efe8db;

  /* --- Tipografía --- */
  --font-display: 'DMSansVar', 'Segoe UI', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-body: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.075rem);
  --step-1:  clamp(1.15rem, 1.08rem + .32vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.24rem + .6vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.4rem + 1.1vw, 2.35rem);
  --step-4:  clamp(2rem, 1.55rem + 2vw, 3.1rem);
  --step-5:  clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);

  /* --- Espaciado --- */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Formas --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-xl: 38px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 48, 87, .06), 0 2px 8px rgba(0, 48, 87, .05);
  --shadow-md: 0 2px 6px rgba(0, 48, 87, .06), 0 14px 34px -14px rgba(0, 48, 87, .2);
  --shadow-lg: 0 4px 12px rgba(0, 48, 87, .07), 0 30px 60px -26px rgba(0, 48, 87, .3);

  --ease: cubic-bezier(.22, .68, .36, 1);
  --header-h: 74px;
}

/* ---------- 3. Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  text-wrap: balance;
  /* Sobre fondo claro los titulares van en el azul marino del logotipo. */
  color: var(--brand-deep);
}
/* Sobre fondo oscuro, en crema. Se resuelve por contexto para no repetirlo
   en cada componente: cualquier sección oscura hereda la regla. */
.hero :is(h1, h2, h3, h4),
.section--dark :is(h1, h2, h3, h4),
.prefooter :is(h1, h2, h3, h4),
.site-footer :is(h1, h2, h3, h4),
.price--featured :is(h1, h2, h3, h4) {
  color: var(--cream);
}
h1 { letter-spacing: -.035em; }
h3, h4 { font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--brand-deep); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { padding-left: 1.15em; }

::selection { background: var(--brand); color: var(--cream); }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--brand); color: var(--cream); padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 200; font-weight: 600;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cream); }

/* ---------- 4. Utilidades ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.4rem, 4.5vw, 3.75rem); }

/* Claro 2: superficie alterna, color plano */
.section--alt { background: var(--surface-alt); }

/* Oscuro 1: azul marino */
.section--dark { background: var(--surface-navy); color: color-mix(in srgb, var(--cream) 88%, transparent); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; flex: none;
}
.section--dark .eyebrow { color: var(--gold); }

.lead { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; text-decoration: none;
}
.link-arrow::after {
  content: '→'; transition: transform .25s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 5. Cabecera y navegación ---------- */
.topbar {
  background: var(--brand-deep);
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  font-size: .8rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  align-items: center; justify-content: center;
  padding-block: .5rem;
}
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--gold); }
.topbar__sep { opacity: .4; }
.topbar__item--phone { font-weight: 600; color: var(--cream); }
@media (max-width: 720px) {
  .topbar__item--hours, .topbar__item:not(.topbar__item--phone) { display: none; }
  .topbar__inner { padding-block: .4rem; }
}

/* Fondo sólido a propósito: backdrop-filter convierte la cabecera en bloque
   contenedor de sus hijos con position:fixed y rompe el menú móvil. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); border-bottom-color: var(--border); }
.header-spacer { display: none; }
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--brand-deep); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; }
.brand__claim { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .78rem; border-radius: var(--r-pill);
  font-size: .93rem; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover { background: var(--brand-tint); color: var(--brand-deep); }
.nav__item.is-current > .nav__link { color: var(--brand); font-weight: 600; }
.nav__item.is-current > .nav__link::after {
  content: ''; position: absolute; left: .78rem; right: .78rem; bottom: .18rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__caret { opacity: .55; transition: transform .25s var(--ease); }
.nav__item.has-panel:hover .nav__caret, .nav__item.is-open .nav__caret { transform: rotate(180deg); }

.panel {
  /* top:100% + padding-top: el panel empieza justo donde acaba el enlace, de
     modo que no queda ningún hueco sin hover al bajar el ratón. El aire visual
     lo da el padding, que sí forma parte del área sensible. */
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  min-width: 340px; padding-top: .6rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Cierre con 140 ms de gracia para que un movimiento en diagonal no lo mate;
     la apertura es inmediata. */
  transition: opacity .18s var(--ease) .14s, transform .18s var(--ease) .14s, visibility .18s .14s;
}
.nav__item.has-panel:hover > .panel,
.nav__item.has-panel:focus-within > .panel,
.nav__item.is-open > .panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* En los últimos elementos el panel se ancla a la derecha para no salirse. */
.nav__item.has-panel:nth-last-child(-n+3) > .panel { left: auto; right: 0; transform: translate(0, 6px); }
.nav__item.has-panel:nth-last-child(-n+3):hover > .panel,
.nav__item.has-panel:nth-last-child(-n+3):focus-within > .panel,
.nav__item.has-panel:nth-last-child(-n+3).is-open > .panel { transform: translate(0, 0); }
.panel__inner {
  background: var(--cream); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 1.1rem; display: grid; gap: 1rem;
}
.panel__cols { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 1.4rem; }
.panel__heading {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: .5rem;
}
.panel__list, .panel__rich { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.panel__list a, .panel__rich a {
  display: block; padding: .42rem .55rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); font-size: .92rem;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.panel__list a:hover, .panel__rich a:hover { background: var(--brand-tint); color: var(--brand-deep); }
.panel__list a[aria-current], .panel__rich a[aria-current] { color: var(--brand); font-weight: 600; }
.panel__rich { min-width: 320px; }
.panel__rich-label { display: block; font-weight: 550; }
.panel__rich-desc { display: block; font-size: .8rem; color: var(--ink-faint); line-height: 1.4; }
.panel__aside {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--border-soft); padding-top: .9rem;
}
.panel__aside-title { font-size: .84rem; color: var(--ink-soft); }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: .55rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; font-size: .88rem;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars i { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-top, 74px) 0 0 0;
    background: var(--cream); overflow-y: auto;
    padding: 1.25rem var(--gutter) 4rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { justify-content: space-between; padding: .95rem .6rem; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav__item.is-current > .nav__link::after { display: none; }
  .nav__item.has-panel > .nav__link { position: relative; }
  .panel {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding-top: 0; display: none;
  }
  .nav__item.is-open > .panel { display: block; }
  /* Anula el centrado del panel de escritorio, que tiene más especificidad */
  .nav__item.has-panel:hover > .panel,
  .nav__item.has-panel:focus-within > .panel,
  .nav__item.is-open > .panel { transform: none; }
  .panel__inner { box-shadow: none; border: 0; background: var(--brand-tint); padding: .8rem; }
  .panel__cols { grid-template-columns: 1fr; gap: .9rem; }
  .panel__aside { flex-direction: column; align-items: stretch; }
  .nav__item--cta { margin-top: 1rem; }
  .nav__item--cta .btn { width: 100%; justify-content: center; padding-block: .9rem; }
}

/* ---------- 6. Botones y píldoras ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: var(--cream); box-shadow: 0 10px 22px -12px rgba(0, 150, 215, .55); }
.btn--primary:hover { background: var(--brand-deep); color: var(--cream); box-shadow: 0 16px 30px -14px rgba(0, 150, 215, .7); }
.btn--accent { background: var(--accent); color: var(--cream); }
.btn--accent:hover { background: #b8340f; color: var(--cream); }
.btn--outline { background: transparent; color: var(--brand-deep); border: 1.5px solid var(--brand-line); }
.btn--outline:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); }
.btn--ghost { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand-deep); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn--light { background: var(--cream); color: var(--brand-deep); }
.btn--light:hover { background: var(--white); color: var(--brand-deep); }
.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
}
.pill--accent { background: var(--accent-tint); color: #a5330f; }
.pill--gold { background: var(--gold-tint); color: #7a5708; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--brand-deep) 0%, #00548f 52%, var(--brand) 100%);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto auto;
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  /* Solo azules del logo: el dorado o el rojo sobre azul se mezclan en un gris verdoso. */
  background: radial-gradient(circle at 60% 40%, rgba(0, 150, 215, .38), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: auto auto -35% -12%;
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(28, 49, 87, .45), transparent 65%);
  pointer-events: none;
}
.hero__inner { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero--split .hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
@media (max-width: 940px) { .hero--split .hero__inner { grid-template-columns: 1fr; } }

.hero .eyebrow { color: var(--gold); }
.hero__lead { font-size: var(--step-1); color: color-mix(in srgb, var(--cream) 86%, transparent); margin-top: 1.25rem; max-width: 54ch; }
.hero__actions { margin-top: 2rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.25rem;
  padding-top: 1.75rem; border-top: 1px solid rgba(255, 253, 249, .2);
}
.hero__meta-item strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--cream); line-height: 1; }
.hero__meta-item span { font-size: .82rem; color: color-mix(in srgb, var(--cream) 72%, transparent); }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover;
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 90px;
  box-shadow: var(--shadow-lg);
}
/* --- Pase de fotos: dos imágenes apiladas; la segunda aparece y desaparece ---
   Solo CSS. Ambas ocupan la misma celda, así el marco no salta aunque las
   fotos tengan otra proporción. Con movimiento reducido se queda la primera. */
.slides { display: grid; }
.slides > img { grid-area: 1 / 1; }
.slides > img:nth-child(2) { opacity: 0; animation: slides-fade 12s ease-in-out 4s infinite; }
@keyframes slides-fade {
  0%, 8%   { opacity: 0; }
  16%, 58% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .slides > img:nth-child(2) { animation: none; } }
.img--focus-left { object-position: 40% center; }

.hero__badge {
  position: absolute; left: -1.25rem; bottom: 1.75rem;
  background: var(--cream); color: var(--ink);
  border-radius: var(--r-md); padding: .95rem 1.15rem;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .75rem;
  max-width: 260px;
}
.hero__badge strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--brand-deep); }
.hero__badge span { font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 620px) { .hero__badge { left: .5rem; bottom: -1rem; } }

/* Hero interior (páginas) */
.page-hero {
  position: relative; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--surface-alt), transparent);
  border-bottom: 1px solid var(--border-soft);
}
.page-hero__inner { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.page-hero--media .page-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
@media (max-width: 900px) { .page-hero--media .page-hero__inner { grid-template-columns: 1fr; } }
.page-hero h1 { font-size: var(--step-4); }
.page-hero__lead { margin-top: 1.1rem; font-size: var(--step-1); color: var(--ink-soft); max-width: 58ch; }
.page-hero__actions { margin-top: 1.75rem; }
.page-hero__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}

.breadcrumbs { padding-block: .85rem; font-size: .82rem; color: var(--ink-faint); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li::after { content: '/'; margin-left: .4rem; opacity: .45; }
.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ---------- 8. Rejillas y tarjetas ---------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card__title { font-size: var(--step-1); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card__text { font-size: .93rem; color: var(--ink-soft); line-height: 1.6; }
.card__meta { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .84rem; color: var(--ink-faint); }
.card__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--brand); font-weight: 600; }
.card__cta { margin-top: auto; padding-top: .75rem; font-weight: 600; font-size: .9rem; color: var(--brand); display: inline-flex; align-items: center; gap: .4rem; }
.card__cta::after { content: '→'; transition: transform .25s var(--ease); }
.card:hover .card__cta::after { transform: translateX(4px); }

.card--flat { background: transparent; border: 0; }
.card--flat:hover { transform: none; box-shadow: none; }
.card--outline { background: transparent; }

.icon-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.icon-card__icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; flex: none;
}
.icon-card h3 { font-size: var(--step-1); }
.icon-card p { font-size: .93rem; color: var(--ink-soft); }

/* ---------- 9. Bloques de contenido ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--step-3); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h4 { font-size: var(--step-1); margin-top: 1.5em; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: .7em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose a { font-weight: 500; }
.prose img { border-radius: var(--r-md); margin-block: 1.8em; }
.prose figure { margin-block: 1.8em; }
.prose figcaption { font-size: .84rem; color: var(--ink-faint); margin-top: .6rem; text-align: center; }

.checklist { list-style: none; padding: 0; display: grid; gap: .75rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096d7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checklist--accent li::before {
  background-color: var(--accent-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9411c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

.callout {
  background: var(--brand-tint); border-left: 4px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.25rem 1.5rem; margin-block: 1.8em;
}
.callout--accent { background: var(--accent-tint); border-left-color: var(--accent); }
.callout--gold { background: var(--gold-tint); border-left-color: var(--gold); }
.callout p + p { margin-top: .7em; }
.callout__title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .35rem; }

.quote {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.4; color: var(--brand-deep);
  border-left: 3px solid var(--accent); padding-left: 1.5rem;
  margin-block: 2em;
}
.quote cite { display: block; margin-top: .8rem; font-family: var(--font-body); font-size: .9rem; font-style: normal; color: var(--ink-faint); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 1.35rem; }
.stat strong { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--brand); line-height: 1; }
.stat span { font-size: .88rem; color: var(--ink-soft); }

.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3.4rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1em;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--brand); color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
}
.steps h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.steps p { color: var(--ink-soft); font-size: .95rem; }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.price {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 1.5rem 1.25rem; text-align: center;
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.price:hover { border-color: var(--brand-line); transform: translateY(-3px); }
.price--featured { background: var(--brand-deep); color: var(--cream); border-color: var(--brand-deep); }
.price--featured .price__name, .price--featured .price__note { color: color-mix(in srgb, var(--cream) 78%, transparent); }
.price--featured .price__amount { color: var(--gold); }
.price__name { font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.price__amount { font-family: var(--font-display); font-size: 2.35rem; color: var(--brand); line-height: 1; }
.price__unit { font-size: .82rem; color: var(--ink-faint); }
.price__note { font-size: .84rem; color: var(--ink-soft); }
.price__tag {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--cream); font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .25rem .7rem; border-radius: var(--r-pill);
}
.price { position: relative; }

.faq { display: grid; gap: .7rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq__item[open] { border-color: var(--brand-line); }
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 550; color: var(--brand-deep);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096d7' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__body { padding: 0 1.35rem 1.3rem; color: var(--ink-soft); }
.faq__body > * + * { margin-top: .8em; }

.table-wrap { overflow-x: auto; margin-block: 1.8em; border-radius: var(--r-md); border: 1px solid var(--border-soft); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; background: var(--surface); }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--border-soft); }
th { background: var(--brand-tint); font-weight: 650; color: var(--brand-deep); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

.media-split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
.media-split--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.media-split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
.media-split--reverse .media-split__media { order: 2; }
@media (max-width: 700px) { .media-split--reverse .media-split__media { order: 0; } }

.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  overflow: hidden; background: var(--brand-deep); box-shadow: var(--shadow-md);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame button.video-frame__play {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center;
  background-size: cover; background-position: center; color: var(--cream);
}
.video-frame__play::before {
  content: ''; position: absolute; inset: 0; background: rgba(0, 48, 87, .45);
}
.video-frame__play svg { position: relative; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .85rem; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); }

.testimonial {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 1.6rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.testimonial__stars { color: var(--gold); letter-spacing: .12em; font-size: .9rem; }
.testimonial__text { font-size: 1rem; line-height: 1.65; color: var(--ink); }
.testimonial__author { margin-top: auto; font-size: .87rem; color: var(--ink-faint); font-weight: 600; }

.person-card { text-align: left; }
.person-card__photo {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-lg); background: var(--brand-tint);
}
.person-card__name { margin-top: 1rem; font-size: var(--step-1); }
.person-card__role { font-size: .87rem; color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.person-card__text { font-size: .92rem; color: var(--ink-soft); margin-top: .5rem; }

.info-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: hidden;
}
.info-bar > div { background: var(--surface); padding: 1.15rem 1.25rem; }
.info-bar dt { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.info-bar dd { margin: .3rem 0 0; font-weight: 550; }

/* Ficha lateral pegajosa */
.layout-aside { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 980px) { .layout-aside { grid-template-columns: 1fr; } }
.aside-card {
  position: sticky; top: calc(var(--header-h) + 1.25rem);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm);
  display: grid; gap: 1rem;
}
.aside-card h2, .aside-card h3 { font-size: var(--step-1); }
.aside-card__rows { display: grid; gap: .7rem; margin: 0; }
.aside-card__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--border); }
.aside-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.aside-card__row dt { color: var(--ink-faint); }
.aside-card__row dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- 10. Formularios ---------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .65rem; }
.field--check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--brand); }
.field--check label { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.form__note { font-size: .82rem; color: var(--ink-faint); }
.form-msg { padding: 1rem 1.2rem; border-radius: var(--r-sm); font-size: .93rem; }
.form-msg--ok { background: var(--lime-tint); color: #47610f; border-left: 4px solid var(--lime); }
.form-msg--error { background: var(--accent-tint); color: #a5330f; }
.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* ---------- 11. Pie ---------- */
.prefooter { background: var(--surface-ocean); color: color-mix(in srgb, var(--cream) 86%, transparent); padding-block: var(--section-y); }
.prefooter__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
@media (max-width: 860px) { .prefooter__inner { grid-template-columns: 1fr; } }
.prefooter .eyebrow { color: var(--gold); }
.prefooter__title { font-size: var(--step-4); }
.prefooter__lead { margin-top: 1rem; font-size: var(--step-1); color: color-mix(in srgb, var(--cream) 78%, transparent); max-width: 50ch; }
.prefooter__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.prefooter__actions .btn--primary { background: var(--gold); color: #3d2b04; box-shadow: none; }
.prefooter__actions .btn--primary:hover { background: #f7c869; color: #3d2b04; }
.prefooter__actions .btn--outline { color: var(--cream); border-color: rgba(255, 253, 249, .35); }
.prefooter__actions .btn--outline:hover { background: rgba(255, 253, 249, .1); color: var(--cream); border-color: var(--cream); }
.prefooter__card {
  background: rgba(255, 253, 249, .07); border: 1px solid rgba(255, 253, 249, .16);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.prefooter__card-title { font-size: var(--step-2); margin-bottom: .8rem; }
.prefooter__address { font-style: normal; line-height: 1.7; }
.prefooter__hours { margin-top: 1rem; font-size: .92rem; }
.prefooter__card .link-arrow { margin-top: 1.1rem; color: var(--gold); }

.site-footer { background: var(--surface-navy); color: color-mix(in srgb, var(--cream) 72%, transparent); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; font-size: .92rem; }
.site-footer__top { display: grid; gap: 2rem; grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); padding-bottom: 2.5rem; }
.site-footer .brand--footer { color: var(--cream); }
.site-footer__claim { margin-top: 1rem; max-width: 38ch; line-height: 1.65; }
.site-footer__heading { color: var(--cream); font-weight: 650; margin-bottom: .85rem; font-size: .92rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.social { display: flex; gap: .6rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 253, 249, .09); display: grid; place-items: center; color: var(--cream);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.social a:hover { background: var(--gold); color: var(--surface-navy); transform: translateY(-2px); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid rgba(255, 253, 249, .12); font-size: .84rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.site-footer__disclaimer { margin-top: 1.25rem; font-size: .78rem; opacity: .6; line-height: 1.6; max-width: 90ch; }

.whatsapp-fab {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .8);
  transition: transform .25s var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.07); color: #fff; }

.cookie-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  max-width: 620px; margin-inline: auto;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; font-size: .87rem;
}
.cookie-bar p { flex: 1 1 260px; color: var(--ink-soft); }
.cookie-bar__actions { display: flex; gap: .5rem; }
/* display:flex de arriba gana al «display:none» del navegador para [hidden],
   así que hay que ocultarlo explícitamente. */
.cookie-bar[hidden] { display: none; }

/* ---------- 12. Animación de entrada ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 13. Ajustes finos ---------- */
@media (max-width: 620px) {
  :root { --header-h: 66px; }
  .hero__meta { gap: 1.1rem; }
  .site-footer__top { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media print {
  .site-header, .topbar, .prefooter, .whatsapp-fab, .cookie-bar, .nav, .header-spacer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 14. Ajustes móviles de cabecera y rejillas ---------- */
@media (max-width: 560px) {
  .site-header__inner { gap: .75rem; }
  .brand { gap: .55rem; }
  .brand__name { font-size: 1.12rem; }
  .brand__claim { display: none; }
  .nav-toggle { padding: .5rem .7rem; }
  .nav-toggle__label { font-size: .82rem; }
}
@media (max-width: 380px) {
  .nav-toggle__label { display: none; }
}

/* La barra de datos rellena siempre la fila completa */
.info-bar { display: flex; flex-wrap: wrap; gap: 1px; }
.info-bar > div { flex: 1 1 190px; }

/* El aviso de cookies no debe tapar el botón flotante de WhatsApp */
@media (max-width: 700px) {
  .cookie-bar { bottom: 5.25rem; }
}

/* Tarjetas de precio: evita que la etiqueta se corte arriba */
.price-grid { padding-top: .7rem; }

/* ============================================================
   15. Utilidades reutilizables
   Sustituyen a los estilos en línea: cualquier ajuste hecho aquí
   se propaga a todas las páginas que usen la clase.
   ============================================================ */

/* --- Espaciado vertical --- */
.mt-0  { margin-top: 0 !important; }
.mt-xs { margin-top: .75rem; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 1.75rem; }
.mt-xl { margin-top: 2.5rem; }
.mb-md { margin-bottom: 1.5rem; }
.pt-0  { padding-top: 0 !important; }

/* --- Medidas de línea --- */
.measure         { max-width: 70ch; }
.measure-center  { max-width: 70ch; margin-inline: auto; }
.measure-prose   { max-width: 75ch; margin-inline: auto; width: 100%; }
.measure-narrow  { max-width: 60ch; margin-inline: auto; }

/* --- Tipografía auxiliar --- */
.t-xs  { font-size: .82rem; }
.t-sm  { font-size: .88rem; }
.h-sm  { font-size: var(--step-1); }
.t-right { text-align: right; }
.fw-500 { font-weight: 500; }

/* --- Enlaces sin decorar (tarjetas y listas) --- */
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { color: var(--brand); }

/* --- Botones sobre fondo oscuro --- */
.btn--outline-light { background: transparent; color: var(--cream); border: 1.5px solid rgba(255, 253, 249, .4); }
.btn--outline-light:hover { background: rgba(255, 253, 249, .12); color: var(--cream); border-color: var(--cream); }
.btn-row--center { justify-content: center; }

/* --- Etiqueta de filtro activa --- */
.pill--active { background: var(--brand); color: var(--cream); }
.pill--active:hover { background: var(--brand-deep); color: var(--cream); }
a.pill { text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
a.pill:hover { background: var(--brand-line); color: var(--brand-deep); }

/* --- Variantes de marcos --- */
.video-frame--wide { aspect-ratio: 16 / 8; }
.self-start { align-self: flex-start; }
.list-plain { list-style: none; padding-left: 0; }

/* --- Etiqueta sobre el mapa --- */
.map-cta {
  position: relative; background: var(--cream); color: var(--brand-deep);
  padding: .85rem 1.5rem; border-radius: var(--r-pill); font-weight: 600;
}

/* --- Listas y bloques dentro de secciones oscuras --- */
.section--dark .checklist li::before,
.hero .checklist li::before {
  background-color: rgba(255, 253, 249, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b647' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* --- Estados y variantes puntuales --- */
.is-error { color: #a5330f; }
.is-square { aspect-ratio: 1; object-fit: cover; }
.person-card__role--lg { font-size: 1.02rem; margin-top: .5rem; color: var(--accent); font-weight: 600; }
.stars--lg { font-size: 1.15rem; }
.section--dark .checklist { color: inherit; }

/* --- Isotipo de la marca (recortado del logotipo original) --- */
.brand__mark { height: 40px; width: auto; flex: none; }
.brand--footer .brand__mark { height: 46px; }
@media (max-width: 560px) { .brand__mark { height: 34px; } }

/* --- Botones dentro de fondos oscuros (héroe, secciones oscuras, pie) ---
   Se resuelve por contexto para no repetir clases en cada plantilla. */
.hero .btn--outline,
.section--dark .btn--outline,
.prefooter .btn--outline {
  color: var(--cream);
  border-color: rgba(255, 253, 249, .4);
}
.hero .btn--outline:hover,
.section--dark .btn--outline:hover,
.prefooter .btn--outline:hover {
  background: rgba(255, 253, 249, .12);
  color: var(--cream);
  border-color: var(--cream);
}
.hero a:not(.btn), .section--dark a:not(.btn) { color: var(--gold); }

/* La chapa del héroe necesita algo más de aire con textos largos */
.hero__badge { min-width: 220px; }
.hero__badge strong { line-height: 1; white-space: nowrap; }

/* --- Lockup horizontal de marca: isotipo + logotipo --- */
.brand { gap: .6rem; }
/* El contenedor es flex en columna: sin esto, el navegador estira la imagen
   a lo ancho de la columna y deforma el logotipo. */
.brand__text { align-items: flex-start; }
.brand__wordmark { height: 30px; width: auto; align-self: flex-start; }
.brand__claim { margin-top: 1px; letter-spacing: .1em; font-size: .62rem; opacity: .8; }
@media (max-width: 560px) {
  .brand__wordmark { height: 25px; }
}

/* --- Navegación compacta en pantallas intermedias --- */
@media (min-width: 1181px) and (max-width: 1330px) {
  .nav__link { padding-inline: .55rem; font-size: .88rem; }
  .brand__claim { display: none; }
}

/* --- Fotos verticales dentro de un bloque imagen + texto ---
   El marco por defecto es 4:3 y recortaría arriba y abajo. Con 5:6 se ve la
   foto entera (853×1024 ≈ 5:6), sin recorte. */
.media-split__media img.img--portrait { aspect-ratio: 5 / 6; object-position: center; }