/* =========================================================
   ADICCIONES VALENCIA — Instituto Valenciano de Ludopatía y
   Adicciones No Tóxicas (desde 1989)
   Design system: premium, contemporáneo, "medianoche con aurora".
   Tipografía: Bricolage Grotesque (titulares, con carácter) + Plus
   Jakarta Sans (texto/UI, muy legible).
   Nota: se conservan los NOMBRES de variable heredados del motor
   (--teal, --coral, --lime...) aunque ahora sostienen la paleta
   violeta-medianoche + coral + oro de Valencia, para no tocar
   cientos de referencias var(--teal-dark) repartidas por las
   plantillas PHP.
   ========================================================= */

:root {
  --teal: #0f1b33;        /* azul noche, color de marca principal */
  --teal-dark: #070d1c;   /* casi negro, cabecera/footer/hero */
  --teal-light: #3d5172;  /* azul medio, hovers/acentos suaves */
  --coral: #c8922f;       /* dorado/bronce, CTA principal (sin rojo) */
  --coral-dark: #a8781f;  /* dorado oscuro, hover de CTA */
  --lime: #e8c468;        /* dorado claro, detalles/motion/glow */
  --lime-dark: #d1a845;
  --cream: #faf9f6;
  --white: #ffffff;
  --off-white: #f4f1fb;
  --sand: #ece6fa;
  --ink: #15131f;
  --ink-soft: #57536b;
  --border: #e4e0f1;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Poppins', 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 32px;

  --shadow-sm: 0 2px 12px rgba(11,9,21,0.08);
  --shadow: 0 12px 32px rgba(11,9,21,0.14);
  --shadow-lg: 0 24px 60px rgba(11,9,21,0.22);

  --container: 1200px;
  --transition: 0.35s cubic-bezier(.22,.9,.32,1);

  color-scheme: light;
}

/* La web tiene una única paleta de marca fija (ver cabecera de este fichero):
   NO debe seguir el modo oscuro del sistema operativo/navegador del visitante
   (rompía el contraste de secciones claras, tarjetas y el logo del footer). */

/* ---------- Custom adaptive cursor (desktop mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button,
  body.has-custom-cursor input, body.has-custom-cursor textarea { cursor: none; }
  body.has-custom-cursor .content-gallery a, body.has-custom-cursor .gallery-slider-item { cursor: none; }

  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    border-radius: 50%; opacity: 0;
    transition: opacity .2s ease, width .28s cubic-bezier(.22,.9,.32,1), height .28s cubic-bezier(.22,.9,.32,1), background .2s ease, border-color .2s ease;
  }
  .cursor-dot { width: 8px; height: 8px; background: var(--coral); }
  .cursor-ring { width: 34px; height: 34px; border: 1.5px solid var(--teal); background: transparent; }
  .cursor-ring.hovering { width: 58px; height: 58px; background: rgba(157,255,8,0.16); border-color: var(--lime); }
  .cursor-dot.hovering { background: var(--lime); }
  .cursor-ring.clicking { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 16.5px;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; color: var(--teal-dark); }
h1 strong, h2 strong, h3 strong, .h1 strong, .h2 strong, .h3 strong { font-weight: 700; }
p { margin: 0 0 1.1em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 100px; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; border: none; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(232,115,74,0.32); }
.btn-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-dark { background: var(--teal-dark); color: #fff; }
.btn-dark:hover { background: var(--teal); transform: translateY(-2px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,246,239,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.header-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; font-size: 13px; color: var(--ink-soft); background: var(--teal-dark); color: #cfe6e1; }
.header-top a { color: #fff; }
.header-top .social { display: flex; gap: 18px; align-items: center; }
.header-main { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 20px; flex-shrink: 1; min-width: 0; }
.nav > a, .nav-item > a { white-space: nowrap; }
.nav a { font-weight: 600; font-size: 15px; color: var(--ink); position: relative; padding: 6px 0; }
.nav a.active, .nav a:hover { color: var(--teal); }
.nav a.active::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--lime); border-radius:2px; }
.header-cta { display: flex; align-items: center; gap: 16px; }
.phone { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--teal-dark); font-size: 15px; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--teal-dark); border-radius: 2px; transition: transform .3s cubic-bezier(.22,.9,.32,1), opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-close { display: none; }
.nav-logo { display: none; }
.nav-cta { display: none; }

/* ---------- Mega menu ---------- */
.nav-item { position: relative; }
.mega-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px) scale(.98); background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s cubic-bezier(.22,.9,.32,1), transform .25s cubic-bezier(.22,.9,.32,1); z-index: 150; border: 1px solid var(--border); overflow: hidden; }
.nav-item.has-mega:hover .mega-panel, .nav-item.has-mega:focus-within .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

.mega-panel--rich { display: flex; width: 740px; padding: 10px; gap: 2px; }
.mega-rich-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 2px; flex: 1; min-width: 0; align-content: start; }
.mega-group { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mega-addiction-link {
  display: flex; align-items: baseline; gap: 13px; padding: 13px 16px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 15px; font-weight: 600; min-width: 0; position: relative;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.mega-addiction-num { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--ink-soft); opacity: .45; flex-shrink: 0; letter-spacing: .03em; transition: color var(--transition), opacity var(--transition); }
.mega-addiction-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-addiction-link::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 3px; background: linear-gradient(var(--coral), var(--lime)); transform: scaleY(0); transition: transform var(--transition); }
.mega-addiction-link:hover { background: var(--off-white); color: var(--teal); padding-left: 22px; }
.mega-addiction-link:hover::before { transform: scaleY(1); }
.mega-addiction-link:hover .mega-addiction-num { color: var(--coral); opacity: 1; }

.mega-featured {
  flex: 0 0 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  padding: 24px 20px; border-radius: var(--radius); color: #fff; margin: 2px;
  background: linear-gradient(155deg, var(--teal-dark), var(--teal) 60%, var(--teal-light));
  position: relative; overflow: hidden;
}
.mega-featured::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 90% 0%, rgba(232,196,104,0.4), transparent 70%); }
.mega-featured-eyebrow { position: relative; font-size: 11.5px; color: #f4e3bc; font-weight: 700; text-transform: lowercase; }
.mega-featured-title { position: relative; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.mega-featured-cta { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lime); }
.mega-featured:hover .mega-featured-cta svg { transform: translateX(3px); }
.mega-featured-cta svg { transition: transform var(--transition); }

@media (max-width: 900px) {
  /* backdrop-filter would turn the header into the containing block of the
     fixed menu (it then only covered the header strip and widened the page). */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250,246,239,0.98); }
  /* Panel oscuro ("medianoche con aurora", igual que el resto de la marca) en
     vez del blanco genérico de antes: se siente como un overlay de app, no
     como una sección más de la página. */
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(88vw, 400px);
    height: 100vh; height: 100dvh;
    background: linear-gradient(165deg, var(--teal-dark) 0%, #0b1530 55%, var(--teal) 140%);
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    padding: 64px 0 0; gap: 0;
    transform: translateX(105%); visibility: hidden;
    transition: transform .45s cubic-bezier(.22,.9,.32,1), visibility 0s linear .45s;
    z-index: 300; box-shadow: -24px 0 60px rgba(0,0,0,.4);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition: transform .45s cubic-bezier(.22,.9,.32,1), visibility 0s; }
  .nav > a, .nav-item > a {
    display: flex; align-items: center; width: 100%; padding: 11px 24px; font-size: 15.5px;
    color: #f2f0fa; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07); position: relative;
  }
  .nav > a.active, .nav-item > a.active { color: var(--lime); }
  .nav a.active::after { display: none; }
  .nav > a.active::before, .nav-item > a.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lime); }
  .nav > a:active, .nav-item > a:active { background: rgba(255,255,255,.06); }
  /* Cierre circular en vez del aspa suelta de antes. */
  .nav-close {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 18px; right: 20px;
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); border: none;
    font-size: 16px; cursor: pointer; color: #fff; transition: background .2s;
  }
  .nav-close:hover { background: rgba(255,255,255,.16); }
  .nav-overlay { position: fixed; inset: 0; background: rgba(4,7,14,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 250; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
  .nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
  .menu-toggle { display: flex; padding: 12px; margin-right: -12px; }
  .header-cta { gap: 10px; }
  .header-cta .phone { display: none; }
  .header-cta .btn-primary { padding: 9px 16px; font-size: 12.5px; white-space: nowrap; }
  .header-top .top-left { display: none; }
  .nav-item { width: 100%; }
  .mega-panel,
  .nav-item.has-mega:hover .mega-panel,
  .nav-item.has-mega:focus-within .mega-panel { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; background: none; margin-top: 0; width: 100%; }
  .mega-panel--rich { flex-direction: column; width: 100%; padding: 0 0 4px; gap: 4px; }
  /* Dos columnas en vez de una: la lista de 15 adicciones ocupa la mitad de
     alto al desplegarse, para que el menú no obligue a hacer scroll. */
  .mega-rich-cols { grid-template-columns: 1fr 1fr; gap: 0 6px; padding: 0 18px; }
  .mega-featured { display: none; }
  /* Submenú "Adicciones no tóxicas" adaptado al panel oscuro, más compacto. */
  .nav .mega-addiction-link { display: flex; align-items: center; gap: 8px; padding: 8px 6px; color: #d7dcee; font-size: 13px; border-bottom: none; }
  .nav .mega-addiction-num { color: rgba(255,255,255,.35); font-size: 10px; }
  .nav .mega-addiction-link:hover, .nav .mega-addiction-link:active { background: rgba(255,255,255,.06); color: #fff; padding-left: 10px; }
  .nav .mega-addiction-link:hover .mega-addiction-num { color: var(--lime); opacity: 1; }

  /* CTA fijo al final del menú: no hace falta cerrarlo para llamar o pedir info. */
  .nav-cta.nav-cta { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 18px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); }
  .nav-cta-phone { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
  .nav-cta .btn-primary { width: 100%; justify-content: center; padding: 11px 16px; }

  /* Entrada escalonada de los enlaces al abrir el menú (se respeta
     prefers-reduced-motion aparte, ver más abajo). */
  .nav > a, .nav > .nav-item, .nav > .nav-cta, .nav > .nav-logo { opacity: 0; transform: translateX(14px); transition: opacity .35s ease, transform .35s ease; }
  .nav.is-open > a, .nav.is-open > .nav-item, .nav.is-open > .nav-cta, .nav.is-open > .nav-logo { opacity: 1; transform: none; }
  .nav.is-open > :nth-child(2) { transition-delay: .03s; }
  .nav.is-open > :nth-child(3) { transition-delay: .07s; }
  .nav.is-open > :nth-child(4) { transition-delay: .11s; }
  .nav.is-open > :nth-child(5) { transition-delay: .15s; }
  .nav.is-open > :nth-child(6) { transition-delay: .19s; }
  .nav.is-open > :nth-child(7) { transition-delay: .23s; }
  .nav.is-open > :nth-child(8) { transition-delay: .27s; }
  .nav.is-open > :nth-child(9) { transition-delay: .31s; }

  /* Logo dentro del panel: tarjeta blanca igual que en el footer, para que
     se vea bien sobre el fondo oscuro del menú. */
  .nav-logo { display: flex; padding: 0 24px 14px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-logo img { width: 155px; height: 48px; background: #fff; border-radius: var(--radius-sm); padding: 8px 14px; box-sizing: content-box; }
}
@media (prefers-reduced-motion: reduce) {
  .nav > a, .nav > .nav-item, .nav > .nav-cta, .nav > .nav-logo { opacity: 1 !important; transform: none !important; transition: none !important; }
  .menu-toggle span { transition: none !important; }
}
body.no-scroll { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; padding: 90px 0 70px; overflow: hidden;
  background: linear-gradient(160deg, rgba(7,13,28,0.88), rgba(15,27,51,0.82) 75%), url('../img/hero-bg/page-hero-bg.jpg');
  background-size: cover; background-position: center;
}
.hero::after { content:''; position:absolute; inset:0; background: linear-gradient(100deg, var(--teal-dark) 0%, rgba(7,13,28,0.5) 32%, transparent 60%); pointer-events:none; z-index: 1; }

/* Home: vídeo de Valencia de fondo, con el vídeo ya atenuado y además una
   capa oscura PLANA (no un degradado direccional: así el contraste es igual
   en toda la columna de texto, no solo donde el degradado pega fuerte) por
   encima. El vídeo se sigue viendo, pero nunca compite con el texto. */
.hero--video {
  padding: 120px 0 90px; min-height: 0; display: flex; align-items: center;
  background: var(--teal-dark);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(0.4) saturate(0.75); }
.hero--video::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: rgba(5,8,16,0.66); }
.hero--video .reveal, .hero--video .reveal * { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero--video .container { position: relative; z-index: 2; }
.hero-content { max-width: 820px; }

/* Fondo animado: canvas de partículas doradas + halo que respira (ver
   assets/js/hero-particles.js) — solo en la home, donde hay #heroCanvas. */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }


/* Hero background slideshow: several photos stacked, one crossfades in/out
   at a time (see main.js) so the hero visibly keeps changing while a visitor
   is on the page, not just once per page load. */
.hero-bg-slides { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.8s ease; }
.hero-bg-slide.is-active { opacity: 0.18; }
.hero-bg-slides--strong .hero-bg-slide.is-active { opacity: 0.4; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.eyebrow { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--coral); margin-bottom: 18px; padding-bottom: 10px; }
.eyebrow::after { content:''; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--lime); border-radius:2px; }
.hero .eyebrow { color: #ffd7c4; }
.hero .eyebrow::after { background: var(--lime); }
.section--dark .eyebrow::after { background: var(--lime); }
.h1 { font-size: clamp(32px, 4.4vw, 50px); color: #fff; margin-bottom: .4em; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.hero .lead { font-size: 18px; color: #dcefec; max-width: 560px; }
.hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 34px; margin-top: 42px; flex-wrap: wrap; }
.hero-stat { position: relative; padding-left: 14px; border-left: 3px solid var(--lime); }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 30px; color: #fff; }
.hero-stat span { font-size: 13px; color: #b9d8d2; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero-video-trigger { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius-lg); }
.hero-video-trigger:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.hero-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; background: rgba(10,20,18,0.55); border: 2px solid rgba(255,255,255,0.8); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; padding-left: 5px; transition: background .2s, transform .2s; }
.hero-video-trigger:hover .hero-video-play, .hero-video-trigger:focus-visible .hero-video-play { background: var(--lime); border-color: var(--lime); color: var(--teal-dark); transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-media { order: -1; }
  .hero-stats { gap: 14px; flex-wrap: nowrap; }
  .hero-stat { flex: 1 1 0; min-width: 0; padding-left: 10px; border-left-width: 2px; }
  .hero-stat span { font-size: 11px; line-height: 1.25; }
}

.video-modal { position: fixed; inset: 0; background: rgba(10,20,18,0.92); z-index: 500; display: none; align-items: center; justify-content: center; padding: 56px 12px 24px; }
.video-modal.is-open { display: flex; }
.video-modal video { width: 100%; max-width: 1100px; max-height: 80vh; max-height: 80dvh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: #000; }
.video-modal-close { position: absolute; top: 6px; right: 10px; width: 48px; height: 48px; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section--gray { background: var(--off-white); }
.section--photo-soft { background: var(--off-white); position: relative; overflow: hidden; }
.section--photo-soft::before { content: ''; position: absolute; inset: 0; background-image: var(--section-photo); background-size: cover; background-position: center; opacity: .16; }
.section--photo-soft .container { position: relative; z-index: 1; }
.section--dark { background: var(--teal-dark); color: #eaf3f1; position: relative; }
.section--dark h2, .section--dark h3, .section--dark p { color: #eaf3f1; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head .h2 { margin-bottom: 6px; }
.h2 { font-size: clamp(26px, 3.2vw, 38px); }

/* ---------- Grid / Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); border: 1px solid var(--border); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 22px; }
.card-icon { display: block; box-sizing: border-box; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--sand, #f2ede6); object-fit: contain; margin-bottom: 14px; }
.card-tag { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--teal); letter-spacing: .05em; }
.card-title { font-size: 18px; margin: 8px 0; }
.card-title a:hover { color: var(--teal); }
.card-excerpt { color: var(--ink-soft); font-size: 14.5px; }
.card-link { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--coral); display: inline-flex; align-items:center; gap:6px; margin-top:8px; }

/* ---------- Team member profile cards (/equipo) ---------- */
.team-member { display: flex; align-items: flex-start; gap: 30px; padding: 36px 0; border-bottom: 1px solid var(--border); }
.team-member:first-child { padding-top: 0; }
.team-member:last-child { border-bottom: none; }
.team-member-photo { width: 200px; height: 240px; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow); border: 3px solid var(--white); flex-shrink: 0; }
.team-member-content { min-width: 0; }
.team-member-name { margin: 0; font-size: 22px; }
.team-member-role { margin: 4px 0 14px; color: var(--teal); font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.team-member-bio p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .team-member { flex-direction: column; gap: 18px; }
  .team-member-photo { width: 100%; height: 280px; }
}

/* ---------- Side-floated inline photo (smaller image next to flowing text) ---------- */
.figure-side { width: 300px; max-width: 45%; border-radius: var(--radius); box-shadow: var(--shadow); margin: 6px 0 20px 28px; float: right; }
.figure-side.figure-side--left { float: left; margin: 6px 28px 20px 0; }
@media (max-width: 700px) { .figure-side, .figure-side.figure-side--left { float: none; width: 100%; max-width: 100%; margin: 0 0 24px; } }

/* ---------- Static partner-logo row (replaces the auto-scrolling marquee) ---------- */
.partners-static { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; padding: 14px 0; max-width: 820px; margin: 0 auto; }
.partners-static .logo-marquee-item { padding: 0; height: auto; }
.partners-static .logo-marquee-item img { height: 92px; max-width: 280px; }

/* ---------- Content body (generic page content) ---------- */
.content-body { font-size: 16.5px; color: var(--ink-soft); }
.content-body h2 { margin-top: 1.5em; font-size: 26px; padding-left: 16px; border-left: 4px solid var(--lime); }
.content-body h3 { margin-top: 1.2em; font-size: 20px; }
.content-body ul, .content-body ol { padding-left: 22px; }
.content-body li { margin-bottom: 8px; }
.content-body img { border-radius: var(--radius); margin: 24px 0; box-shadow: var(--shadow-sm); }
.content-body a { color: var(--teal); text-decoration: underline; text-decoration-color: rgba(15,92,83,0.35); }
.content-body blockquote { background: var(--off-white); border-left: 4px solid var(--coral); padding: 16px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; margin: 24px 0; }

/* ---------- Tipo de adicción: contenido + menú lateral ---------- */
.tipo-layout { max-width: var(--container); display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
.tipo-main { min-width: 0; }
.tipo-sidebar { position: sticky; top: 24px; }
.tipo-sidebar-card { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.tipo-sidebar-heading { font-size: 13px; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 14px; }
.tipo-sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.tipo-sidebar-link { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14.5px; color: var(--ink); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.tipo-sidebar-link:hover { background: var(--white); color: var(--teal); }
.tipo-sidebar-link.is-active { background: var(--teal-dark); color: var(--white); font-weight: 600; }
.tipo-sidebar-cta { width: 100%; justify-content: center; }
@media (max-width: 960px) { .tipo-layout { grid-template-columns: 1fr; gap: 32px; } .tipo-sidebar { position: static; } }

/* Migrated Avada CTA buttons ("Nuestro centro", "Metodología"...) and the
   "otros tratamientos" interlinking block, kept as real buttons */
a[data-btn] {
  display: inline-flex; margin: 6px 10px 6px 0; padding: 12px 24px; border-radius: 100px;
  background: var(--teal); color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  transition: background var(--transition), transform var(--transition);
}
a[data-btn]:hover { background: var(--coral); transform: translateY(-2px); }

/* Bare "related item" links the migrated content wraps in h5 (e.g. "otras
   adicciones" cross-links) — render as pill chips rather than plain headings */
.content-body h5:has(> a:only-child) {
  display: inline-block; margin: 4px 8px 4px 0; font-size: 0;
}
.content-body h5:has(> a:only-child) > a {
  display: inline-flex; padding: 9px 20px; border-radius: 100px; font-size: 13.5px;
  background: var(--off-white); border: 1.5px solid var(--border); color: var(--teal-dark) !important;
  text-decoration: none !important; font-family: var(--font-display); font-weight: 700;
  transition: background var(--transition), border-color var(--transition);
}
.content-body h5:has(> a:only-child) > a:hover { background: var(--white); border-color: var(--teal); }

/* Photo galleries migrated from the original site */
.content-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 28px 0; }
.content-gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4/3; position: relative; }
.content-gallery img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .5s ease; }
.content-gallery a:hover img { transform: scale(1.08); }
.content-gallery a::after { content:'⤢'; position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(10,65,59,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; opacity:0; transition:opacity .25s; }
.content-gallery a:hover::after { opacity: 1; }

/* Full-bleed edge-to-edge photo slider (e.g. facility galleries on the home page) */
.gallery-slider-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.gallery-slider {
  display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 6vw; scrollbar-width: none;
}
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slider-item {
  flex: 0 0 auto; width: min(78vw, 420px); aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; display: block;
}
.gallery-slider-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-slider-item:hover img { transform: scale(1.06); }
.gallery-slider-item::after { content:'⤢'; position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; background:rgba(10,65,59,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; opacity:0; transition:opacity .25s; }
.gallery-slider-item:hover::after { opacity: 1; }
.gallery-slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--teal-dark);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition);
}
.gallery-slider-nav:hover { background: var(--lime); color: var(--teal-dark); }
.gallery-slider-prev { left: 14px; }
.gallery-slider-next { right: 14px; }
@media (max-width: 700px) { .gallery-slider-nav { display: none; } }

/* Lightbox for gallery images */
.lightbox { position: fixed; inset: 0; background: rgba(10,20,18,0.92); z-index: 500; display: none; align-items: center; justify-content: center; padding: 56px 12px 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 80vh; max-height: 80dvh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: 6px; right: 10px; width: 48px; height: 48px; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }
.lightbox-nav:hover { background: var(--lime); color: var(--teal-dark); }

/* ---------- Logo marquee (continuous auto-scrolling partner logos) ---------- */
.logo-marquee-wrap { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; padding: 10px 0; }
.logo-marquee { display: flex; align-items: center; width: max-content; will-change: transform; }
.logo-marquee-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 74px; padding: 0 42px; }
.logo-marquee-item img { height: 40px; max-width: 140px; width: auto; object-fit: contain; opacity: .65; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.logo-marquee-item:hover img { opacity: 1; filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .logo-marquee { transform: none !important; } }

/* ---------- Test online (addiction self-assessment quiz) ---------- */
.quiz-progress { position: sticky; top: 76px; z-index: 40; background: var(--cream); padding: 12px 0; margin-bottom: 20px; }
.quiz-progress-bar { height: 8px; border-radius: 100px; background: var(--sand); overflow: hidden; margin-bottom: 8px; }
.quiz-progress-bar span { display: block; height: 100%; background: var(--lime); border-radius: 100px; transition: width .3s ease; }
#quizProgressLabel { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.quiz-question { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; }
.quiz-question-text { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 16px; color: var(--ink); }
.quiz-question-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; margin-right: 8px; }
.quiz-answers { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .quiz-answers { flex-direction: row; flex-wrap: wrap; } }
.quiz-answer { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 100px; border: 1.5px solid var(--border); cursor: pointer; font-size: 14px; transition: border-color var(--transition), background var(--transition); }
.quiz-answer:hover { border-color: var(--teal-light); }
.quiz-answer input { accent-color: var(--teal); }
.quiz-answer:has(input:checked), .quiz-answer.is-checked { border-color: var(--teal); background: rgba(15,92,83,0.06); font-weight: 600; }
/* ---------- Downloadable guides (/guias) ---------- */
.guia-card-cover { display: flex; justify-content: center; align-items: flex-end; height: 290px; padding: 24px 24px 0; background: linear-gradient(135deg, var(--sand), #f6f1e6); overflow: hidden; }
.guia-card-cover img { display: block; width: 62%; max-width: 230px; height: auto; border-radius: 6px 6px 0 0; box-shadow: 0 10px 26px rgba(10,65,59,.30); transition: transform .35s ease; align-self: flex-end; }
.card:hover .guia-card-cover img { transform: translateY(-6px); }
.guia-card-cover--sm { height: 190px; padding-top: 16px; }
.guia-card-cover--sm img { width: 44%; max-width: 130px; }
.guia-detail-cover { margin: 0 0 26px; max-width: 250px; }
.guia-detail-cover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 14px 34px rgba(10,65,59,.28); }
.guia-toc { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guia-toc li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink); }
.guia-toc-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--sand); color: var(--teal-dark); font-family: var(--font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

.quiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.quiz-nav .btn-primary { margin-left: auto; }
.quiz-result-score { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.quiz-result-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; background: var(--teal-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 26px; }

/* ---------- Table of contents (rebuilt from real headings, long blog posts) ---------- */
.toc { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin: 0 0 32px; }
.toc-title { font-family: var(--font-display); font-weight: 700; margin: 0 0 10px; color: var(--teal-dark); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 6px; }
.toc li.toc-sub { padding-left: 18px; font-size: 14.5px; }
.toc a { color: var(--teal); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- Page hero (static pages) ---------- */
.page-hero { position: relative; background: var(--off-white); padding: 54px 0 40px; border-bottom: 1px solid var(--border); overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,246,239,0.12), var(--off-white) 90%); }
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal-dark); color: #cfe6e1; padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { display: inline-flex; align-items: center; background: var(--white); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 18px; }
.footer-logo img { width: 155px; height: 48px; display: block; }
.footer-heading { color: #fff; font-size: 14px; letter-spacing: .06em; margin: 0 0 16px; font-weight: 700; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #b9d8d2; font-size: 14.5px; }
.footer-links a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s; }
.footer-social a:hover { background: var(--coral); transform: translateY(-3px) scale(1.08); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #9bc0b9; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* El titular del hero es lo primero que se ve de la web: nunca debe depender
   de la animación de aparición por scroll. Si esa animación no llega a
   completarse (móvil, conexión lenta, pestaña en segundo plano al cargar...),
   el texto se queda a medio camino y se ve gris en vez de blanco. Visible
   desde el primer fotograma, siempre. */
.hero--video .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  font-family: var(--font-body); font-size: 15px; background: var(--white); color: var(--ink); transition: border-color var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); }
.form-glow { position: relative; }
.form-glow::before {
  content:''; position:absolute; inset:-2px; border-radius: inherit; z-index:-1;
  background: linear-gradient(120deg, var(--coral), var(--teal-light), var(--coral)); background-size: 200% 200%;
  opacity: .35; filter: blur(18px); animation: glow-shift 6s ease infinite;
}
@keyframes glow-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .form-glow::before { animation: none; } }
.contact-card { background: var(--white); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg); }
.contact-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
@media (max-width: 520px) { .contact-tiles { grid-template-columns: 1fr; } }
.contact-tile { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s, transform .2s, box-shadow .2s; }
.contact-tile:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contact-tile-icon { color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.contact-tile span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--ink); word-break: break-word; }
.contact-tile b { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; }
.ajax-lead-msg { margin-top: 10px; font-size: 14px; }
.ajax-lead-msg.success { color: var(--teal); }
.ajax-lead-msg.error { color: var(--coral-dark); }

/* ---------- Stat strip ---------- */
.stat-strip { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: flex; justify-content: space-around; flex-wrap: wrap; padding: 40px; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 32px; color: var(--teal); }
.stat span { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Blog ---------- */
.blog-meta { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.blog-filter { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.blog-filter span { opacity: .65; font-weight: 400; margin-left: 3px; }
.blog-filter:hover { border-color: var(--teal); color: var(--teal); }
.blog-filter.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.blog-filter.is-active span { opacity: .85; }
.blog-item.is-filtered-out { display: none; }
.blog-item.is-hidden-by-limit { display: none; }
.blog-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }
#blogLoadMore[hidden] { display: none; }
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 44px; }
.pagination a, .pagination span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-family: var(--font-display); }
.pagination a { background: var(--white); border: 1px solid var(--border); }
.pagination a:hover { background: var(--teal); color: #fff; }
.pagination .current { background: var(--teal); color: #fff; }

.blog-layout { grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; } }
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.blog-sidebar-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.blog-sidebar-box-body { padding: 20px; }

/* ---------- Alerts ---------- */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14.5px; margin-bottom: 16px; }
.alert-error { background: #fdeae2; color: var(--coral-dark); }

/* ---------- Back to top / WhatsApp FAB ---------- */
.fab-contact { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.fab-main-btn { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); border: none; cursor: pointer; transition: transform var(--transition), background var(--transition); padding: 0; flex-shrink: 0; }
.fab-main-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); opacity: .55; animation: fab-pulse 2.6s ease-out infinite; pointer-events: none; }
.fab-main-btn:hover { transform: scale(1.06); background: var(--coral); }
.fab-main-logo { width: 34px; height: auto; display: block; position: relative; z-index: 1; }
.fab-contact.is-open .fab-main-btn { background: var(--coral); }
.fab-contact.is-open .fab-main-btn::before { animation: none; opacity: 0; }
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fab-main-btn::before { animation: none; display: none; }
}
.fab-options { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-option { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 999px; padding: 10px 18px 10px 14px; box-shadow: var(--shadow); text-decoration: none; font-family: var(--font-display); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity var(--transition), transform var(--transition); }
.fab-contact.is-open .fab-option { opacity: 1; transform: none; pointer-events: auto; }
.fab-contact.is-open .fab-option:nth-child(1) { transition-delay: .06s; }
.fab-contact.is-open .fab-option:nth-child(2) { transition-delay: .03s; }
.fab-contact.is-open .fab-option:nth-child(3) { transition-delay: 0s; }
.fab-option-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--sand, #f2ede6); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fab-option:hover .fab-option-icon { background: var(--teal); color: #fff; }
@media (max-width: 600px) {
  .fab-contact { right: 16px; bottom: 16px; }
  .fab-option-label { display: none; }
  .fab-option { padding: 10px; }
  .fab-option-icon { width: 26px; height: 26px; }
}

/* ---------- Panel de leads/newsletter (/admin/panel) ---------- */
.admin-panel-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.admin-panel-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 26px; box-shadow: var(--shadow-sm); min-width: 160px; }
.admin-stat b { display: block; font-family: var(--font-display); font-size: 30px; color: var(--teal); }
.admin-stat span { font-size: 13px; color: var(--ink-soft); }
.admin-origen-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.admin-origen-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; background: var(--off-white); border: 1px solid var(--border); font-size: 13px; color: var(--ink-soft); }
.admin-origen-pill b { color: var(--ink); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--white); }
.admin-table th { text-align: left; padding: 12px 16px; background: var(--off-white); color: var(--ink-soft); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.admin-table td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: top; }
.admin-table-msg { max-width: 320px; color: var(--ink-soft); }
.admin-table tr:hover td { background: var(--off-white); }

/* ---------- Admin live-editor bar (reused from the shared pattern) ---------- */
.admin-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: 36px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; }
.admin-bar-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf5e; box-shadow: 0 0 0 3px rgba(62,207,94,.25); flex-shrink: 0; }
.admin-bar-status { color: var(--coral); opacity: 0; transition: opacity .2s; }
.admin-bar-status.show { opacity: 1; }
.admin-bar-logout { margin-left: auto; color: #ccc; text-decoration: underline; }
body.admin-edit-mode .site-header { top: 36px; }
body.admin-edit-mode { padding-top: 36px; }
[data-edit-key] { position: relative; outline: 1.5px dashed transparent; outline-offset: 3px; border-radius: 3px; }
[data-edit-key]:hover { outline-color: rgba(232,115,74,.6); }
[data-edit-key][contenteditable="true"]:focus { outline: 1.5px solid var(--coral); background: rgba(232,115,74,.05); }

/* Cookie banner */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 760px; margin: 0 auto; display: flex; gap: 16px; align-items: center; background: var(--teal-dark); color: #fff; padding: 16px 20px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.28); font-size: 14px; line-height: 1.5; }
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1; }
.cookie-banner a { color: #ffb596; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn { border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff; padding: 10px 18px; border-radius: 100px; font: inherit; font-weight: 700; cursor: pointer; }
.cookie-btn-primary { background: var(--coral); border-color: var(--coral); }
@media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.45; } .cookie-actions { justify-content: stretch; } .cookie-btn { flex: 1; padding: 11px 14px; } }
body.no-scroll .cookie-banner { display: none; }

/* ---------- Mapa del sitio ---------- */
.sitemap-list { list-style: none; margin: 16px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.sitemap-list li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.sitemap-list a:hover { color: var(--teal); }
.sitemap-date { display: block; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) { .sitemap-list { columns: 1; } }

/* ---------- Mobile hardening ---------- */
body { overflow-wrap: break-word; }
video, iframe, embed, object { max-width: 100%; }
.content-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-body pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 480px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; padding-left: 22px; padding-right: 22px; }
  /* Los "eyebrow" (etiquetas pequeñas encima de cada título de sección) no
     deben partirse en dos líneas en móvil, por largos que sean. */
  .eyebrow { font-size: 11px; letter-spacing: .03em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.nav-sub-toggle { display: none; }
@media (max-width: 900px) {
  .nav-item.has-mega { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-item.has-mega > a { flex: 1 1 0; width: auto; min-width: 0; }
  .nav-sub-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; margin-right: -12px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.75); }
  .nav-sub-toggle::before { content: ''; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
  .nav-item.is-expanded .nav-sub-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }
  .nav-item.has-mega .mega-panel { display: none; flex: 0 0 100%; }
  .nav-item.has-mega.is-expanded .mega-panel { display: grid; }
}

/* ---------- Mobile usability: iOS no-zoom inputs, comfortable tap targets, compact header ---------- */
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .header-top { padding: 0 16px; }
  .header-top a { display: inline-flex; align-items: center; min-height: 40px; }
  .header-top .social { gap: 16px; }
  .header-main { padding-top: 8px; padding-bottom: 8px; }
  .logo img { height: 44px; }
  .card-link { min-height: 44px; }
  .breadcrumb a { display: inline-block; padding: 8px 0; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding: 10px 0; }
  .footer-bottom a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 480px) {
  .container { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 900px) {
  /* Rehecho sin vídeo, sin degradado, sin tarjeta superpuesta: un fondo
     plano sólido (el mismo --teal-dark que usan el footer y las secciones
     oscuras, donde nunca ha habido queja de contraste) directamente detrás
     del texto. Cuantas menos capas, menos sitios donde se pueda romper. */
  .hero { padding: 36px 0 48px; }
  .hero--video { padding: 44px 0 36px; min-height: 0; }
  .hero--video .hero-canvas { display: none; }
  .hero-content { max-width: none; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: .02em; margin-bottom: 10px; padding-bottom: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero .h1 { font-size: 24px; line-height: 1.18; margin-bottom: .35em; }
  .hero .lead { font-size: 14.5px; line-height: 1.5; max-width: none; color: #cfd6e4; }
  .hero-actions { margin-top: 16px; gap: 10px; flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { margin-top: 20px; }
  .hero-media img { aspect-ratio: 16 / 10 !important; width: 100%; }
  .hero-video-play { width: 64px; height: 64px; font-size: 20px; }
  .hero-stat b { font-size: 20px; }
}

/* ---------- FAQ (home) ---------- */
.faq-list { margin-top: 18px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-family: var(--font-display); font-weight: 700; color: var(--teal-dark); position: relative; min-height: 48px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--coral); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: 0; padding: 0 20px 18px; color: var(--ink-soft); }

/* De 901px en adelante (incluida la anchura máxima del contenedor, que no
   crece más allá de 1200px): mantener el menú en una sola línea siempre,
   sin que el logo se vea empujado a 0 de ancho por falta de sitio. */
.nav a, .phone { white-space: nowrap; }
@media (min-width: 901px) {
  .header-main { gap: 14px; }
  .nav { gap: 18px; }
  .nav a { font-size: 14px; }
  .header-cta .phone { display: none; }
}