/* ============================================================
   NUCLINIC 2026 — Sistema de diseño (build estático de referencia)
   Tipografía: Montserrat · escala en rem fija (sin vw) · canvas 1920/414
   ============================================================ */

:root{
  /* Paleta oficial (Brandbook NuClinic 2026) */
  --petrol:#112D2F;      /* verde petróleo — primario oscuro */
  --petrol-2:#16383A;    /* variante */
  --cream:#F4F8EC;       /* crema (secciones claras) */
  --mint:#EEF7E9;        /* menta claro */
  --sand:#E9E8E1;        /* neutro cálido */
  --sand-btn:#EAE7E0;    /* botón arena */
  --taupe:#858079;       /* gris cálido (títulos grandes) */
  --lima:#D4DA17;        /* acento lima */
  --carbon:#2E2C27;      /* topbar / footer */
  --white:#fff;
  --ink:#112D2F;

  --font:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1920px;
  --gutter:clamp(20px, 2.4vw, 46px);   /* márgenes laterales ~44px @1920 (medido en Clara) */
  --sp:clamp(64px, 6.4vw, 118px);      /* padding vertical de sección */
  --radius:clamp(24px, 2.2vw, 38px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink);
  font-weight:400; line-height:1.65; background:var(--white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,blockquote{ margin:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.accent{ color:var(--lima); }
.accent-ink{ color:var(--lima); }

/* ---------- Tipografía de secciones ---------- */
.h-section{
  font-size:1.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.045em; color:var(--ink); line-height:1.2;
}
.h-section--light{ color:var(--white); }
.h-section .accent{ color:var(--lima); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --bg:transparent; --fg:var(--white); --bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.085em; line-height:1;
  padding:1.15em 2.5em; border-radius:999px; cursor:pointer;
  background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd);
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn--sm{ font-size:.75rem; padding:1.05em 2.2em; }
.btn--ghost-light{ --bg:transparent; --fg:var(--white); --bd:var(--lima); border-width:1px; }
.btn--ghost-light:hover{ --bg:var(--lima); --fg:var(--ink); --bd:var(--lima); }
.btn--solid-ink{ --bg:var(--ink); --fg:var(--white); --bd:var(--ink); }
.btn--solid-ink:hover{ --bg:var(--petrol-2); --bd:var(--petrol-2); }
.btn--sand{ --bg:var(--sand-btn); --fg:#5C564E; --bd:var(--sand-btn); }
.btn--sand:hover{ --bg:var(--white); --fg:var(--ink); --bd:var(--white); }
.btn--lima{ --bg:var(--lima); --fg:var(--ink); --bd:var(--lima); }
/* borde lima + centro blanco (Agenda tu evaluación — obs Magdalena #12) */
.btn--white-lima{ --bg:var(--white); --fg:var(--ink); --bd:var(--lima); border-width:2px; }
.btn--white-lima:hover{ --bg:var(--lima); --fg:var(--ink); --bd:var(--lima); }
/* transparente + borde lima + texto blanco (tratamientos — obs Aracelli) */
.btn--transp-lima{ --bg:transparent; --fg:var(--white); --bd:var(--lima); border-width:2px; }
.btn--transp-lima:hover{ --bg:var(--lima); --fg:var(--ink); --bd:var(--lima); }
/* arena suave para exámenes (obs Aracelli 2026-09-16) */
.btn--exam-sand{ --bg:#edeae5; --fg:#a09b95; --bd:#edeae5; }
.btn--exam-sand:hover{ --bg:var(--white); --fg:var(--ink); --bd:var(--white); }

/* ============================================================
   TOPBAR + HEADER
   ============================================================ */
.topbar{ background:var(--carbon); color:rgba(255,255,255,.9); position:relative; z-index:70; }
.topbar__in{ display:flex; justify-content:flex-end; align-items:center; min-height:44px; }
.topbar__links{ display:flex; gap:2.2rem; }
.topbar__links a{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; opacity:.9; }
.topbar__links a:hover{ color:var(--lima); opacity:1; }

.site-header{
  position:absolute; left:0; right:0; z-index:60;
  transition:background .3s, box-shadow .3s;
}
.site-header__in{ display:flex; align-items:center; justify-content:space-between; min-height:92px; gap:2rem; }

.brand{ display:flex; flex-direction:column; line-height:1; color:var(--lima); }
.brand__mark{ font-size:1.7rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.7em; }
.brand__dot{ color:var(--lima); }
/* ® pequeño, alineado arriba tras el punto (obs Magdalena 1.8) */
.brand__reg{ font-size:.34em; font-weight:600; vertical-align:top; line-height:1; margin-left:.06em; }
/* bajada separada al alto de la "N" del wordmark, según brandbook (obs Magdalena #2/#3, 1.8) */
.brand__tag{ font-size:.455rem; letter-spacing:.145em; text-transform:uppercase; margin-top:0; font-weight:600; opacity:.95; white-space:nowrap; }
/* logotipo oficial (brandbook 2026) — reemplaza el wordmark de texto */
.brand__img{ display:block; width:auto; height:42px; }
.drawer__brand .brand__img{ height:38px; }
.footer__brand .brand__img{ height:48px; }
@media (max-width:520px){ .brand__img{ height:34px; } }

.mainnav{ display:flex; gap:2rem; align-items:center; }
.navitem{ position:relative; display:flex; align-items:center; }
.navitem__top{
  color:var(--white); font-size:.9rem; font-weight:500;
  letter-spacing:.02em; text-transform:uppercase; opacity:.92;
  display:inline-flex; align-items:center; gap:.4em; padding:.35rem 0;
  transition:color .2s ease, opacity .2s ease;
}
.navitem__top:hover, .navitem:hover .navitem__top, .navitem:focus-within .navitem__top{ color:var(--lima); opacity:1; }
.navitem__top[data-active]{ color:var(--lima); opacity:1; }
/* caret de los ítems con submenú */
.navitem.has-menu > .navitem__top::after{
  content:""; width:5px; height:5px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s ease; opacity:.75;
}
.navitem.has-menu:hover > .navitem__top::after,
.navitem.has-menu:focus-within > .navitem__top::after{ transform:rotate(-135deg); margin-top:1px; }

/* puente invisible bajo el ítem para no cortar el hover al descender */
.navitem.has-menu::after{ content:""; position:absolute; top:100%; left:0; right:0; height:1rem; }

.submenu{
  position:absolute; top:100%; left:-.6rem; margin-top:.95rem;
  min-width:248px; padding:.55rem;
  display:flex; flex-direction:column; gap:.08rem;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212,218,23,.10), transparent 60%),
    linear-gradient(165deg,#16383A 0%,#112D2F 60%,#0C1E1F 100%);
  border:1px solid rgba(244,248,236,.10);
  border-radius:16px 16px 16px 26px;
  box-shadow:0 24px 50px rgba(6,16,16,.36);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:80;
}
.navitem--end .submenu{ left:auto; right:-.6rem; }
.navitem.has-menu:hover > .submenu,
.navitem.has-menu:focus-within > .submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.submenu a{
  color:var(--cream); font-size:.82rem; font-weight:500; letter-spacing:.01em;
  padding:.62rem .9rem; border-radius:11px; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.submenu a:hover{ background:rgba(212,218,23,.13); color:var(--lima); }

/* mega menú: 2 columnas (Conócenos + Especialidades) */
.submenu--mega{ flex-direction:row; gap:.4rem; min-width:436px; padding:.9rem .8rem; }
.submenu--mega .submenu__col{ display:flex; flex-direction:column; gap:.06rem; flex:1; min-width:190px; }
.submenu--mega .submenu__col + .submenu__col{ border-left:1px solid rgba(244,248,236,.10); padding-left:.7rem; }
.submenu__head{
  color:var(--lima); font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:.2rem .9rem .55rem; opacity:.9;
}

/* las secciones enlazadas desde el menú no quedan bajo el header fijo */
section[id]{ scroll-margin-top:96px; }

/* header con fondo al hacer scroll (activado por JS) */
.site-header.is-stuck{ position:fixed; top:0; background:var(--petrol); box-shadow:0 6px 24px rgba(0,0,0,.18); }
.site-header.is-stuck .site-header__in{ min-height:72px; }

.hamburger{ display:none; background:none; border:0; width:30px; height:21px; padding:0; cursor:pointer; }
.hamburger span{ display:block; width:100%; height:3px; background:var(--cream); border-radius:999px; transition:background .25s ease, transform .3s ease; }
.hamburger span + span{ margin-top:6px; }
.hamburger:hover span{ background:var(--lima); }

/* Drawer móvil */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(8,18,18,.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); z-index:90; opacity:0; transition:opacity .38s ease; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:
    radial-gradient(130% 55% at 100% 0%, rgba(212,218,23,.12), transparent 62%),
    linear-gradient(165deg, #16383A 0%, #112D2F 55%, #0C1E1F 100%);
  z-index:95; padding:1.7rem 1.8rem 2.1rem;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
  box-shadow:-26px 0 64px rgba(0,0,0,.4);
}
body.nav-open .drawer-backdrop{ opacity:1; }
body.nav-open .drawer{ transform:translateX(0); }
body.nav-open{ overflow:hidden; }

.drawer__head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:2.4rem; }
.drawer__brand .brand__mark{ font-size:1.5rem; }
.drawer__close{ background:none; border:0; color:var(--cream); cursor:pointer; padding:.25rem; margin:-.25rem; transition:color .2s, transform .3s ease; }
.drawer__close:hover{ color:var(--lima); transform:rotate(90deg); }

.drawer__nav{ display:flex; flex-direction:column; gap:.15rem; overflow-y:auto; margin-right:-.4rem; padding-right:.4rem; }

/* enlaces sueltos (Contacto + utilidad) */
.drawer__nav > a{ color:var(--cream); font-size:1.02rem; text-transform:uppercase; letter-spacing:.055em; font-weight:600; width:max-content; transition:color .2s ease; padding:.5rem 0; }
.drawer__nav > a:hover{ color:var(--lima); }
.drawer__divider{ height:1px; background:rgba(244,248,236,.14); margin:.7rem 0 .4rem; }

/* grupos con acordeón */
.dgroup{ border-bottom:1px solid rgba(244,248,236,.09); }
.dgroup__top{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  color:var(--cream); font-size:1.02rem; text-transform:uppercase; letter-spacing:.055em; font-weight:600;
  padding:.85rem 0; transition:color .2s ease;
}
.dgroup__top:hover{ color:var(--lima); }
.dgroup__chev{ flex:0 0 auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .28s ease; opacity:.8; }
.dgroup.is-open .dgroup__top{ color:var(--lima); }
.dgroup.is-open .dgroup__chev{ transform:rotate(-135deg); }
.dgroup__panel{ max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.22,.61,.36,1); }
.dgroup.is-open .dgroup__panel{ max-height:640px; }
.dgroup__panel a{ display:block; color:rgba(244,248,236,.82); font-size:.86rem; font-weight:500; letter-spacing:.01em; padding:.5rem 0 .5rem .1rem; transition:color .18s ease; }
.dgroup__panel a:hover{ color:var(--lima); }
.dgroup__panel a:last-child{ padding-bottom:.95rem; }
.dgroup__sub{ display:block; color:var(--lima); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.85; padding:.85rem 0 .35rem; }
.dgroup__sub:first-child{ padding-top:.2rem; }

/* entrada escalonada */
.drawer__nav > *{ opacity:0; transform:translateX(16px); }
body.nav-open .drawer__nav > *{ animation:drawerLinkIn .45s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes drawerLinkIn{ to{ opacity:1; transform:none; } }
.drawer__nav > *:nth-child(1){ animation-delay:.06s }
.drawer__nav > *:nth-child(2){ animation-delay:.10s }
.drawer__nav > *:nth-child(3){ animation-delay:.14s }
.drawer__nav > *:nth-child(4){ animation-delay:.18s }
.drawer__nav > *:nth-child(5){ animation-delay:.22s }
.drawer__nav > *:nth-child(6){ animation-delay:.26s }
.drawer__nav > *:nth-child(7){ animation-delay:.30s }
.drawer__nav > *:nth-child(8){ animation-delay:.34s }
.drawer__nav > *:nth-child(9){ animation-delay:.38s }
.drawer__nav > *:nth-child(10){ animation-delay:.42s }

.drawer__foot{ margin-top:auto; padding-top:2rem; }
.drawer__foot .btn{ display:flex; width:100%; }
.drawer__social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.drawer__social a{ width:40px; height:40px; border:1px solid rgba(244,248,236,.28); border-radius:999px; display:grid; place-items:center; color:var(--cream); transition:.2s ease; }
.drawer__social a:hover{ background:var(--lima); border-color:var(--lima); color:var(--ink); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:clamp(600px, 59vw, 1120px); display:flex; align-items:flex-start; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__scrim{ position:absolute; inset:0; background:
    linear-gradient(100deg, rgba(28,34,30,.52) 0%, rgba(28,34,30,.18) 38%, rgba(28,34,30,0) 62%),
    linear-gradient(180deg, rgba(20,28,26,.32) 0%, rgba(20,28,26,0) 18%); }
.hero__in{ position:relative; width:100%; padding-top:clamp(140px,11vw,212px); padding-bottom:0; }
.hero__content{ max-width:1080px; }
.hero__title{
  color:var(--white); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.5rem, 2.1vw, 2.55rem); line-height:1.3; letter-spacing:.004em;
}
.hero__lead{ color:rgba(255,255,255,.94); font-size:1.0625rem; line-height:1.62; margin-top:1.5rem; max-width:520px; font-weight:400; }
.hero__content .btn{ margin-top:1.9rem; }
.hero__dots{ position:absolute; left:50%; bottom:clamp(20px,3vw,40px); transform:translateX(-50%); display:flex; gap:.6rem; z-index:6; }
.hero__dots span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); }
.hero__dots span.is-on{ background:var(--white); }
.hero__dots button{ position:relative; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5); border:0; padding:0; cursor:pointer; transition:background .25s ease, transform .25s ease; }
.hero__dots button::before{ content:""; position:absolute; inset:-11px; border-radius:50%; }
.hero__dots button:hover{ background:rgba(255,255,255,.8); }
.hero__dots button.is-on{ background:var(--white); transform:scale(1.18); }

/* carrusel: slides apilados con crossfade SIN bleed (obs Magdalena #4 / banners C)
   el slide entrante hace fade-in por encima; el saliente se mantiene opaco (fade diferido)
   hasta quedar tapado, evitando el flasheo de fondo entre banners. */
.hero--carousel{ display:block; background:var(--petrol); }
.hero__arrow{ position:absolute; top:auto; bottom:clamp(20px,3vw,40px); z-index:6; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; overflow:hidden; background:rgba(17,45,47,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--cream); cursor:pointer; transition:background .25s ease, color .25s ease; }
.hero__arrow svg{ width:22px; height:22px; display:block; }
.hero__arrow:hover{ background:rgba(17,45,47,.6); color:var(--lima); }
.hero__arrow--prev{ right:calc(clamp(14px,2vw,28px) + 54px); }
.hero__arrow--next{ right:clamp(14px,2vw,28px); }
.hero__slide{ position:absolute; inset:0; display:flex; align-items:flex-start; opacity:0; z-index:1; pointer-events:none; transition:opacity 1s ease-in-out 1s; }
.hero__slide.is-active{ opacity:1; z-index:2; pointer-events:auto; transition:opacity 1s ease-in-out 0s; }
@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition-duration:.01ms; transition-delay:0s; }
}

/* ============================================================
   INTRO — UN CUIDADO INTEGRAL
   ============================================================ */
.intro{ background:var(--cream); padding-block:var(--sp); }
.intro__in{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.intro__text{ max-width:1120px; margin-top:1.6rem; color:#4a4f45; font-size:1.0625rem; line-height:1.78; text-wrap:balance; }
.intro .btn{ margin-top:2.2rem; }

/* ============================================================
   BANNER ANTIINFLAMATORIA
   ============================================================ */
.banner-wrap{ background:var(--cream); padding-bottom:var(--sp); }
/* Banner: asset de diseño de Clara (texto horneado en alta resolución) en tarjeta redondeada */
.banner{
  position:relative; border-radius:34px 34px 34px 92px; overflow:hidden;
  aspect-ratio:1820/636; background:#585044;
}
.banner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

/* ============================================================
   BANNERS DESTACADOS (3 mini-banners del home — sección D)
   ============================================================ */
/* Banners destacados — arte final de Clara (carrusel con forma recortada) */
.claraban{ background:var(--cream); padding:clamp(18px,2.6vw,44px) var(--gutter); }
.claraban__track{ position:relative; max-width:var(--wrap); margin-inline:auto; aspect-ratio:1920/800; border-radius:0 clamp(48px,7vw,96px) 0 clamp(48px,7vw,96px); overflow:hidden; }
.claraban__item{ position:absolute; inset:0; display:block; opacity:0; z-index:1; pointer-events:none; transition:opacity .8s ease-in-out; }
.claraban__item.is-active{ opacity:1; z-index:2; pointer-events:auto; }
.claraban__item picture, .claraban__item img{ width:100%; height:100%; }
.claraban__item img{ display:block; object-fit:cover; transition:transform .6s ease; }
.claraban__item.is-active:hover img{ transform:scale(1.02); }
.claraban__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; overflow:hidden; background:rgba(17,45,47,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--cream); cursor:pointer; transition:background .25s ease, color .25s ease; }
.claraban__arrow:hover{ background:rgba(17,45,47,.6); color:var(--lima); }
.claraban__arrow svg{ width:22px; height:22px; display:block; }
.claraban__arrow--prev{ left:clamp(14px,2vw,28px); }
.claraban__arrow--next{ right:clamp(14px,2vw,28px); }
.claraban__dots{ position:absolute; left:50%; bottom:clamp(14px,2vw,26px); transform:translateX(-50%); z-index:4; display:flex; gap:.6rem; }
.claraban__dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.55); border:0; padding:0; cursor:pointer; transition:background .25s ease, transform .25s ease; }
.claraban__dots button:hover{ background:rgba(255,255,255,.85); }
.claraban__dots button.is-on{ background:var(--white); transform:scale(1.18); }
@media (max-width:768px){
  .claraban__track{ aspect-ratio:800/1200; border-radius:0 clamp(34px,10vw,60px) 0 clamp(34px,10vw,60px); }
  .claraban__arrow{ width:36px; height:36px; }
  .claraban__arrow svg{ width:18px; height:18px; }
  .claraban__item.is-active:hover img{ transform:none; }
}

/* ============================================================
   ÁREAS DE ESPECIALIDAD
   ============================================================ */
.areas{ position:relative; overflow:hidden; padding-block:var(--sp); }
.areas__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.areas__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(34,27,17,.5), rgba(34,27,17,.38)); }
.areas__in{ position:relative; }
.areas__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:2.6rem; }
.area-card{
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:1.6rem 1.5rem; text-align:center;
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
}
.area-card h3{ color:var(--white); font-size:1.0625rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.area-card p{ color:rgba(255,255,255,.82); font-size:.84rem; line-height:1.55; margin-top:.9rem; }
.areas__cta{ display:flex; justify-content:flex-end; margin-top:2.4rem; }

/* ============================================================
   MENCIONES
   ============================================================ */
.menciones{ background:var(--petrol); padding-block:clamp(40px,4.5vw,64px); }
.menciones__in{ text-align:center; }
.menciones__label{ color:var(--white); font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; opacity:.85; }
.menciones__logos{ display:flex; align-items:center; justify-content:space-around; gap:clamp(2rem,4vw,4rem); margin-top:2.2rem; flex-wrap:wrap; }
.menciones__logos img{ height:clamp(34px,3.2vw,58px); width:auto; object-fit:contain; opacity:.96; }

/* ============================================================
   NOTICIAS DESTACADAS
   ============================================================ */
.noticias{ background:var(--white); padding-block:var(--sp); }
.noticias__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2.6rem; }
.noticias__all{ color:var(--ink); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.noticias__all:hover{ opacity:.8; }
.noticias__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.2vw,2.4rem); align-items:stretch; }
.news{ display:flex; flex-direction:column; height:100%; }
.news__media{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  padding:0; border:0; background:#000; cursor:default;
}
.news__media img{ width:100%; height:100%; object-fit:cover; }
.news__media.video{ cursor:pointer; }
.video__play{
  position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%;
  background:var(--lima); display:flex; align-items:center; justify-content:center;
  transition:transform .25s, background .25s; box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.video__play i{ width:0; height:0; margin-left:5px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--petrol); }
.news__media.video:hover .video__play{ transform:scale(1.08); background:#fff; }
.news__media.is-playing .video__play{ display:none; }
.news__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Cuerpo flexible: el título reserva 2 líneas y el botón se ancla al fondo → todos alineados */
.news__body{ padding-top:1.5rem; display:flex; flex-direction:column; flex:1; }
.news__title{ color:var(--ink); font-size:1.0625rem; font-weight:700; line-height:1.3; min-height:2.6em; }
.news__desc{ color:rgba(17,45,47,.72); font-size:.875rem; line-height:1.55; margin-top:.6rem; margin-bottom:1.4rem; }
.news__body .btn{ margin-top:auto; align-self:flex-start; }
/* Podcast */
.podcast-platforms{ justify-content:center; margin:0 0 clamp(2.6rem,4.5vw,4rem); }
.podcast-episodes{ margin-top:0; }

/* ============================================================
   OPINIONES
   ============================================================ */
.opiniones{ background:var(--cream); padding-block:var(--sp); }
.opiniones__in{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.opiniones__quote{ max-width:1000px; margin-top:1.8rem; color:#4a4f45; font-size:1rem; line-height:1.95; font-weight:400; }
.opiniones__author{ margin-top:1.8rem; color:var(--taupe); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }

/* ============================================================
   TRUST / RESPALDO
   ============================================================ */
.trust{ background:var(--petrol); padding-block:clamp(52px,5.4vw,86px); }
.trust__in{ display:flex; justify-content:center; }
.trust__logos{ width:100%; max-width:min(620px,92%); height:auto; object-fit:contain; opacity:.94; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--carbon); padding-block:clamp(40px,4.5vw,60px); }
.footer__in{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; text-align:center; }
.footer__brand{ align-items:center; }
.footer__contact{ display:flex; flex-direction:column; gap:.3rem; color:rgba(255,255,255,.8); font-size:.85rem; }
.footer__contact a:hover{ color:var(--lima); }
.footer__social span{ display:block; width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); }
.footer__social:hover span{ border-color:var(--lima); }

/* ============================================================
   MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width:768px){
  :root{ --gutter:22px; --sp:clamp(48px,12vw,64px); --radius:20px; }
  .topbar{ display:none; }
  .site-header__in{ min-height:76px; }
  .brand__mark{ font-size:1.55rem; }
  .mainnav{ display:none; }
  .hamburger{ display:block; }

  /* Escala tipográfica mobile medida sobre el mockup de Clara (414pt):
     H1 ~1.35rem · heading ~1.3rem · lead ~0.9rem · body ~0.85rem */
  .hero{ min-height:clamp(540px,126vw,690px); }
  .hero__in{ padding-top:clamp(120px,30vw,158px); }
  .hero__scrim{ background:
      linear-gradient(0deg, rgba(16,26,24,.74) 6%, rgba(16,26,24,.12) 52%, rgba(16,26,24,.30) 100%); }
  .hero__content{ max-width:none; }
  .hero__title{ font-size:1.2rem; line-height:1.4; letter-spacing:.01em; }   /* obs #1: achicar título en celular */
  .hero__lead{ font-size:.9rem; line-height:1.55; margin-top:1.1rem; max-width:none; }
  .hero__content .btn{ margin-top:1.5rem; }
  .hero--carousel .hero__in{ padding-bottom:56px; }   /* espacio para los dots del carrusel */
  .hero__dots{ bottom:22px; }
  .hero__arrow{ display:none; }

  .h-section{ font-size:1.3rem; letter-spacing:.03em; }

  /* En mobile Clara alinea el contenido de sección a la izquierda */
  .intro__in, .opiniones__in{ text-align:left; align-items:flex-start; }
  .intro__text{ font-size:.88rem; line-height:1.7; margin-top:1.1rem; }
  .opiniones__quote{ font-size:.88rem; line-height:1.75; }
  .opiniones__author{ align-self:flex-start; }

  .banner{ aspect-ratio:16/10; border-radius:20px 20px 20px 54px; }
  .banner__bg{ object-position:left center; }
  .minibanners__grid{ grid-template-columns:1fr; gap:1rem; }
  .mbanner{ aspect-ratio:16/10; border-radius:20px 20px 20px 44px; }

  .hide-mobile{ display:none; }
  .btn{ font-size:.72rem; padding:1.05em 2.2em; }
  .btn--sm{ font-size:.68rem; }

  .areas__grid{ grid-template-columns:1fr; gap:1rem; margin-top:2rem; }
  .area-card{ text-align:center; padding:1.6rem 1.5rem; }
  .area-card h3{ font-size:1rem; }
  .area-card p{ font-size:.82rem; }
  .areas__cta{ justify-content:center; margin-top:2rem; }

  .menciones__logos{ gap:1.6rem 2.4rem; justify-content:center; }
  .menciones__logos img{ height:30px; }

  .noticias__head{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .noticias__all{ font-size:.78rem; }
  .noticias__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .news__media{ aspect-ratio:4/3; border-radius:18px; }        /* más compacta en mobile */
  .news__media:not(.video) img{ object-position:center top; }  /* PAULA: mostrar cabecera */
  .news__media.video img{ object-position:center 24%; }        /* videos: enfocar el rostro, no cortar cabeza */
  .news__body{ padding-top:1.1rem; }
  .news__title{ font-size:1rem; min-height:0; }            /* en 1-col no hace falta reservar */
  .news__desc{ font-size:.82rem; margin-bottom:1.1rem; }
  .video__play{ width:56px; height:56px; }
  .video__play i{ border-width:9px 0 9px 15px; }

  .trust__logos{ width:100%; height:auto; max-width:min(480px,100%); }
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ============================================================
   PÁGINAS INTERIORES — componentes compartidos
   ============================================================ */
/* ítem de nav activo: ver .navitem__top[data-active] en TOPBAR + HEADER */

/* ---------- Hero de página interior ---------- */
.hero--page{ min-height:clamp(520px, 50vw, 760px); }
/* Actividad física: encuadre a la derecha para mostrar el cuerpo de la modelo (obs Magdalena 3.3) */
.hero--pano .hero__bg{ object-position:80% 18%; }
.hero__eyebrow{ color:rgba(255,255,255,.86); font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.hero--light .hero__eyebrow{ color:#6f6a60; }
/* Hero claro: overlay crema, texto oscuro */
.hero--light .hero__scrim{ background:
    linear-gradient(100deg, rgba(244,248,236,.9) 0%, rgba(244,248,236,.6) 42%, rgba(244,248,236,.15) 70%),
    linear-gradient(180deg, rgba(244,248,236,.5) 0%, rgba(244,248,236,0) 22%); }
.hero--light .hero__title{ color:var(--taupe); }
.hero--light .hero__title .accent{ color:#9aa017; }
.hero--light .hero__lead{ color:#4a4f45; }
.hero--light .btn--ghost-light{ --fg:var(--ink); --bd:rgba(17,45,47,.45); }
.hero--light .btn--ghost-light:hover{ --bg:var(--ink); --fg:var(--white); --bd:var(--ink); }

/* ---------- Banda tagline ("Desde tu interior…") ---------- */
.tagline-band{ padding-block:clamp(26px,3vw,44px); text-align:center; }
.tagline-band--cream{ background:var(--cream); }
.tagline-band--mint{ background:var(--mint); }
.tagline-band--petrol{ background:var(--petrol); }
.tagline-band p{ font-size:.9rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.tagline-band--cream p, .tagline-band--mint p{ color:var(--taupe); }
.tagline-band--petrol p{ color:rgba(255,255,255,.85); }
.tagline-band .accent{ color:var(--lima); }

/* ---------- Content-media (texto + foto/video lado a lado) ---------- */
.cmedia{ padding-block:var(--sp); }
.cmedia--light{ background:var(--cream); }
.cmedia--petrol{ background:var(--petrol); }
.cmedia--warm{ background:#8c7f6c; }
.cmedia__in{ display:grid; grid-template-columns:1.14fr .86fr; gap:clamp(2rem,5vw,5.5rem); align-items:center; }
.cmedia--reverse .cmedia__media{ order:-1; }
.cmedia__eyebrow{ font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem; }
.cmedia__title{ font-size:clamp(1.5rem,1.9vw,2rem); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.15; }
.cmedia__title .accent{ color:var(--lima); }
.cmedia__body{ margin-top:1.3rem; line-height:1.75; font-size:1.0625rem; }
.cmedia__body p + p{ margin-top:1rem; }
.cmedia--light .cmedia__eyebrow{ color:#8a8478; }
.cmedia--light .cmedia__title{ color:var(--ink); }
.cmedia--light .cmedia__body{ color:#4a4f45; }
.cmedia--petrol .cmedia__eyebrow{ color:var(--lima); }
.cmedia--petrol .cmedia__title{ color:var(--white); }
.cmedia--petrol .cmedia__body{ color:rgba(255,255,255,.82); }
.cmedia--warm .cmedia__eyebrow{ color:rgba(255,255,255,.85); }
.cmedia--warm .cmedia__title{ color:var(--white); }
.cmedia--warm .cmedia__body{ color:rgba(255,255,255,.9); }
.cmedia__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
/* Bioimpedanciometría: imagen cuadrada con esquinas redondeadas (obs Magdalena 4.1) */
.cmedia__media--square{ aspect-ratio:1/1; border-radius:clamp(28px,3vw,44px); }
.cmedia__media img{ width:100%; height:100%; object-fit:cover; }
.cmedia__media.video{ position:relative; cursor:pointer; border:0; padding:0; background:#000; }
.cmedia .btn{ margin-top:1.8rem; }

/* listas con viñeta lima */
.nu-list{ list-style:none; margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.nu-list li{ position:relative; padding-left:1.5rem; line-height:1.55; }
.nu-list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--lima); }
.cmedia--light .nu-list li{ color:#4a4f45; }
.cmedia--petrol .nu-list li{ color:rgba(255,255,255,.85); }

/* ---------- Placeholder "Video doctora" ---------- */
.vdoctora{ border-radius:var(--radius); display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:4/5; padding:2rem; }
.vdoctora--gray{ background:#c9c7c0; color:#5c574e; }
.vdoctora--light{ background:#fff; border:1px solid rgba(17,45,47,.12); color:var(--taupe); }
.vdoctora span{ font-size:1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; line-height:1.5; }
.vdoctora--gray span{ color:#8a2b2b; }
.vdoctora--light span{ color:#b03636; }

/* ---------- CTA band ---------- */
.cta-band{ padding-block:clamp(40px,4.5vw,68px); text-align:center; }
.cta-band--cream{ background:var(--cream); }
.cta-band--petrol{ background:var(--petrol); }
.cta-band__text{ font-size:clamp(1rem,1.3vw,1.35rem); font-weight:600; letter-spacing:.02em; max-width:820px; margin:0 auto; line-height:1.4; }
.cta-band--cream .cta-band__text{ color:var(--ink); }
.cta-band--petrol .cta-band__text{ color:var(--white); }
.cta-band .btn{ margin-top:1.8rem; }

/* ---------- Variantes content-media / hero para páginas de apoyo ---------- */
.hero__lead + .hero__lead{ margin-top:1rem; }
.hero--text .hero__content{ max-width:1080px; }
.hero--text .hero__lead{ max-width:660px; }
/* Perder peso: foto de la cinta (clara) → velo reforzado a la izquierda para legibilidad (obs Magdalena 3.4) */
.hero--pp .hero__scrim{ background:
    linear-gradient(100deg, rgba(20,28,26,.72) 0%, rgba(20,28,26,.45) 40%, rgba(20,28,26,.05) 70%),
    linear-gradient(180deg, rgba(20,28,26,.3) 0%, rgba(20,28,26,0) 24%); }

/* layout con columna aside (placeholder video izquierda + texto con subtítulos derecha) */
.cmedia--aside .cmedia__in{ grid-template-columns:minmax(240px, .62fr) 1fr; align-items:start; gap:clamp(2rem,4vw,4.5rem); }
.cmedia--aside .cmedia__media{ position:sticky; top:100px; aspect-ratio:auto; }
.cmedia__sub{ font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; margin-top:2.2rem; }
.cmedia__sub:first-child{ margin-top:0; }
.cmedia--light .cmedia__sub{ color:var(--taupe); }
.cmedia--petrol .cmedia__sub{ color:var(--white); }
.cmedia__text > p{ margin-top:1rem; line-height:1.75; }
.cmedia--light .cmedia__text > p{ color:#4a4f45; }
.cmedia--petrol .cmedia__text > p{ color:rgba(255,255,255,.82); }
.cmedia__text > p:first-child, .cmedia__sub + p{ margin-top:1rem; }

@media (max-width:768px){
  .cmedia__in{ grid-template-columns:1fr; gap:1.8rem; }
  .cmedia--reverse .cmedia__media{ order:0; }
  .cmedia--aside .cmedia__in{ grid-template-columns:1fr; }
  .cmedia--aside .cmedia__media{ position:static; }
  .cmedia__title, .cmedia__sub{ font-size:1.2rem; }
  .cmedia__body, .cmedia__text > p, .nu-list li{ font-size:.9rem; }
  .vdoctora{ aspect-ratio:16/10; }
  .hero__eyebrow{ font-size:.72rem; }
  .cta-band__text{ font-size:1rem; }
}

/* cta warm + lista numerada */
.cta-band--warm{ background:#8c7f6c; }
.cta-band--warm .cta-band__text{ color:var(--white); }
/* franja Agenda más angosta + color corregido a petróleo (obs Magdalena #16) */
.cta-band--slim{ padding-block:clamp(20px,2.3vw,32px); }
.nu-list--num{ counter-reset:n; }
.nu-list--num li{ padding-left:1.9rem; }
.nu-list--num li::before{ content:counter(n) "."; counter-increment:n; background:none; color:var(--lima); font-weight:700; width:auto; height:auto; top:0; border-radius:0; font-size:.95em; }
.cmedia__text > .nu-list{ margin-top:1.4rem; }
.cmedia__text > .cmedia__sub + .nu-list{ margin-top:1rem; }

/* content-media con aside a la derecha (texto ancho + placeholder video) */
.cmedia--aside-r .cmedia__in{ grid-template-columns:1fr minmax(260px,.66fr); align-items:start; gap:clamp(2rem,4vw,4.5rem); }
.cmedia--aside-r .cmedia__media{ position:sticky; top:100px; aspect-ratio:auto; }
.cmedia--aside-r .vdoctora{ aspect-ratio:4/5; }
.cmedia__cta{ display:flex; gap:1.6rem 2rem; align-items:center; flex-wrap:wrap; margin-top:1.8rem; }
.cmedia__cta p{ flex:1 1 300px; margin:0; }
.cmedia--petrol .cmedia__cta p{ color:#fff; font-weight:500; }
@media (max-width:768px){ .cmedia--aside-r .cmedia__in{ grid-template-columns:1fr; } .cmedia--aside-r .cmedia__media{ position:static; } }

/* ---------- Exámenes: facade video en content-media, cualidades, botones dobles ---------- */
.cmedia__media.video{ aspect-ratio:16/9; }
.video.is-playing .video__play{ display:none; }
.cmedia__media.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.exam-quals{ list-style:none; margin:.9rem 0 1.2rem; display:flex; flex-direction:column; gap:.15rem; }
.exam-quals li{ font-weight:600; }
.cmedia--light .exam-quals li{ color:var(--ink); }
.cmedia--petrol .exam-quals li{ color:#fff; }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

/* Sección con foto de fondo (Test Genético) */
.feature-photo{ position:relative; overflow:hidden; padding-block:var(--sp); }
.feature-photo__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right; }
.feature-photo__scrim{ position:absolute; inset:0; background:
    linear-gradient(90deg, rgba(60,50,40,.9) 0%, rgba(60,50,40,.72) 42%, rgba(60,50,40,.25) 72%, rgba(60,50,40,.1) 100%); }
.feature-photo__in{ position:relative; }
.feature-photo__text{ max-width:760px; color:#fff; }
.feature-photo__title{ font-size:clamp(1.5rem,2vw,2.1rem); font-weight:700; text-transform:uppercase; line-height:1.15; letter-spacing:.015em; }
.feature-photo__text .lead-quote{ font-style:italic; font-size:1.1rem; margin-top:1rem; color:rgba(255,255,255,.92); }
.feature-photo__text h3{ font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-top:1.8rem; }
.feature-photo__text p{ margin-top:.7rem; line-height:1.7; color:rgba(255,255,255,.9); }
.feature-photo__text .nu-list{ margin-top:1rem; }
.feature-photo__text .nu-list li{ color:rgba(255,255,255,.9); }

/* Placeholder logos certificaciones */
.certs{ background:#fff; padding-block:clamp(48px,5vw,80px); text-align:center; }
.certs__label{ color:var(--taupe); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:clamp(26px,3vw,44px); }
.certs__logos{ width:100%; max-width:min(620px,92%); height:auto; object-fit:contain; margin-inline:auto; display:block; }

@media (max-width:768px){
  .feature-photo__scrim{ background:linear-gradient(180deg, rgba(60,50,40,.82), rgba(60,50,40,.9)); }
  .btn-row .btn{ flex:1 1 auto; }
}
.btn--ghost-ink{ --bg:transparent; --fg:var(--ink); --bd:rgba(17,45,47,.4); }
.btn--ghost-ink:hover{ --bg:var(--ink); --fg:var(--white); --bd:var(--ink); }

/* ---------- Conócenos: hero derecha, NuShop, placeholder, partners ---------- */
.btn--ghost-lima{ --bg:transparent; --fg:var(--lima); --bd:var(--lima); }
.btn--ghost-lima:hover{ --bg:var(--lima); --fg:var(--ink); --bd:var(--lima); }
.hero--right .hero__in{ display:flex; justify-content:flex-end; }
.hero--right .hero__content{ max-width:600px; }
.hero--right .hero__bg{ object-position:left center; }
.hero--right .hero__scrim{ background:linear-gradient(270deg, rgba(30,36,32,.74) 0%, rgba(30,36,32,.34) 34%, rgba(30,36,32,0) 62%); }
.photo-placeholder{ background:#2b2925; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:4/3; padding:2rem; }
.photo-placeholder span{ font-size:1rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; max-width:16em; line-height:1.5; color:rgba(255,255,255,.82); }
.nushop{ position:relative; background:linear-gradient(120deg,#2c3a18,#45561f); overflow:hidden; padding-block:var(--sp); }
.nushop__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.nushop__text h2{ color:var(--lima); font-size:clamp(1.5rem,1.9vw,2rem); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.nushop__text .cmedia__body{ color:rgba(255,255,255,.9); margin-top:1.3rem; line-height:1.75; }
.nushop__text .cmedia__body p + p{ margin-top:1rem; }
.nushop__text .btn{ margin-top:1.8rem; }
.nushop__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:transparent; }
.nushop__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.partners-row{ margin-top:2.6rem; }
.partners-row img{ max-width:min(680px,100%); height:auto; opacity:.92; }
@media (max-width:768px){
  .hero--right .hero__in{ justify-content:flex-start; }
  .nushop__in{ grid-template-columns:1fr; gap:1.8rem; }
  .partners-row img{ max-width:100%; }
}

/* ---------- Alianzas (grilla de aliados sobre fondo petróleo) ---------- */
.allies{ padding-block:var(--sp); }
.allies__head{ max-width:760px; margin:0 auto; text-align:center; }
.allies__title{ font-size:clamp(1.5rem,1.9vw,2rem); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.15; color:var(--white); }
.allies__title .accent{ color:var(--lima); }
.allies__intro{ margin-top:1.3rem; line-height:1.75; font-size:1.0625rem; color:rgba(255,255,255,.82); }
.allies__grid{ margin-top:clamp(2.4rem,4vw,3.6rem); display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; }
.ally{ flex:0 1 calc(25% - 1.05rem); display:flex; flex-direction:column; align-items:center; gap:1.05rem; padding:1.7rem 1.4rem; background:var(--white); border-radius:22px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
.ally:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(0,0,0,.55); }
.ally__logo{ height:66px; width:100%; display:flex; align-items:center; justify-content:center; }
.ally__logo img{ max-height:100%; max-width:78%; width:auto; object-fit:contain; }
.ally__name{ font-size:.9rem; font-weight:600; color:var(--ink); text-align:center; letter-spacing:.01em; }
@media (max-width:960px){ .ally{ flex:0 1 calc(50% - .7rem); } }
@media (max-width:460px){ .ally{ flex:0 1 100%; } }

/* ---------- Tratamientos: hero con tarjetas + listas de especialidad ---------- */
.hero--cards{ min-height:clamp(600px,54vw,800px); }
.hero--cards .hero__in{ display:flex; flex-direction:column; justify-content:space-between; padding-bottom:clamp(24px,3vw,52px); }
.hero--cards .hero__scrim{ background:
    linear-gradient(100deg, rgba(28,34,30,.5) 0%, rgba(28,34,30,.18) 40%, rgba(28,34,30,0) 66%),
    linear-gradient(180deg, rgba(20,28,26,.2) 0%, rgba(20,28,26,0) 20%, rgba(20,28,26,.42) 78%, rgba(20,28,26,.55) 100%); }
.trat-cards{ position:relative; margin-top:2.5rem; }
/* cápsulas de especialidad: vidrio claro translúcido, sin borde blanco (obs Magdalena #14) */
.trat-cards .area-card{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.12); backdrop-filter:blur(10px) saturate(1.1); text-align:center; }

.speclist{ background:var(--carbon); padding-block:var(--sp); }
.speclist__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,6rem); }
.spec-block{ margin-bottom:2.6rem; }
.spec-block:last-child{ margin-bottom:0; }
.spec-block h2{ color:var(--lima); font-size:clamp(1.4rem,1.7vw,1.85rem); font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.spec-block__sub{ color:rgba(255,255,255,.6); font-size:.9rem; margin-top:.3rem; margin-bottom:1rem; }
.spec-block .nu-list li{ color:rgba(255,255,255,.85); }
.spec-block .nu-list li strong{ color:#fff; }
.speclist__cta{ margin-top:1rem; }
@media (max-width:768px){ .speclist__cols{ grid-template-columns:1fr; gap:2rem; } .trat-cards .area-card{ text-align:center; } }
/* listas de especialidad: líneas planas sin viñeta (como Clara) */
.spec-block .nu-list li{ padding-left:0; }
.spec-block .nu-list li::before{ display:none; }
.spec-block .nu-list{ gap:.5rem; }
/* ítems con página propia (Ver más) — obs Magdalena #7–11 */
.spec-link{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.55rem; color:#fff; font-weight:600; transition:color .18s ease; }
.spec-link:hover{ color:var(--lima); }
.spec-link__more{ font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--lima); opacity:.9; white-space:nowrap; }
.spec-link__more::after{ content:" →"; }

/* ============================================================
   MUSE
   ============================================================ */
.muse-lockup{ display:inline-flex; align-items:center; gap:1.1rem; color:#fff; }
.muse-lockup .ml-nu{ font-weight:700; font-size:clamp(1.6rem,2.1vw,2.3rem); letter-spacing:-.01em; }
.muse-lockup .ml-sep{ width:1px; height:1.5em; background:rgba(255,255,255,.55); }
.muse-lockup .ml-spa{ font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.1rem,1.5vw,1.55rem); letter-spacing:.24em; font-weight:400; }
.hero--center{ align-items:center; }
.hero--center .hero__in{ padding-top:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero--center .hero__content{ display:flex; flex-direction:column; align-items:center; max-width:none; }
.hero--center .hero__content .btn{ margin-top:2rem; }

.gallery{ background:var(--cream); padding-block:var(--sp); }
.gallery__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2vw,2rem); margin-top:2.4rem; }
.gallery__card{ border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; }
.gallery__card img{ width:100%; height:100%; object-fit:cover; }
.gallery__foot{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; margin-top:2.6rem; }
.gallery__dots{ display:flex; gap:.6rem; }
.gallery__dots span{ width:9px; height:9px; border-radius:50%; background:rgba(17,45,47,.25); }
.gallery__dots span.is-on{ background:var(--ink); }

/* banner full-width con texto y botón sobre foto (Dieta antiinflamatoria — diseño Clara) */
.photo-banner{ position:relative; overflow:hidden; min-height:clamp(360px,38vw,520px); display:flex; align-items:center; }
.photo-banner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.photo-banner__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(28,32,22,.82) 0%, rgba(28,32,22,.55) 38%, rgba(28,32,22,.08) 68%); }
.photo-banner__in{ position:relative; width:100%; }
.photo-banner__text{ max-width:460px; color:#fff; display:flex; flex-direction:column; gap:1rem; }
.photo-banner__text p{ line-height:1.6; }
.photo-banner__text .btn{ margin-top:.7rem; align-self:flex-start; }
@media (max-width:768px){
  .photo-banner{ min-height:0; padding-block:clamp(44px,12vw,72px); }
  .photo-banner__scrim{ background:linear-gradient(180deg, rgba(24,28,20,.62) 0%, rgba(24,28,20,.78) 100%); }
  .photo-banner__text{ max-width:none; }
}

.cta-photo{ position:relative; overflow:hidden; padding-block:clamp(70px,8vw,130px); text-align:center; }
.cta-photo__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cta-photo__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(44,52,26,.82), rgba(44,52,26,.5)); }
.cta-photo__in{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.6rem; color:#fff; }
.cta-photo__text{ font-size:clamp(1rem,1.3vw,1.4rem); font-weight:600; text-transform:uppercase; letter-spacing:.02em; max-width:720px; line-height:1.4; }

/* ============================================================
   DIRECTORIO — grilla de doctores + filtros
   ============================================================ */
.dir-hero{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; width:100%; }
.dir-hero__ph{ background:#2b2925; border-radius:38px 38px 90px 38px; aspect-ratio:16/10; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.dir-hero__ph img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.dir-hero__ph span{ color:#b03636; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.doc-filters{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem; }
.doc-filter{ border-radius:999px; padding:.85em 1.7em; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; border:1px solid rgba(255,255,255,.3); background:rgba(17,45,47,.35); color:#fff; cursor:pointer; }
.doc-filter.is-on{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.docs{ background:#fff; padding-block:var(--sp); }
/* Ficha única — Directora Médica (obs Magdalena 2.3–2.5) */
.doc-solo{ display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(1.8rem,3.2vw,3.4rem); align-items:center; }
.doc-solo__photo{ aspect-ratio:3/2; border-radius:38px 38px 90px 38px; overflow:hidden; background:#eee; }
.doc-solo__photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.doc-solo__eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; color:var(--taupe); }
.doc-solo__name{ font-size:clamp(1.5rem,2.4vw,2rem); font-weight:700; color:var(--ink); line-height:1.15; margin-top:.55rem; }
.doc-solo__role{ color:var(--taupe); font-weight:600; font-size:.95rem; margin-top:.55rem; }
.doc-solo__bio{ color:rgba(17,45,47,.75); line-height:1.65; margin-top:1.1rem; max-width:48ch; }
@media (max-width:768px){
  .doc-solo{ grid-template-columns:1fr; gap:1.6rem; }
  .doc-solo__photo{ border-radius:28px 28px 60px 28px; }
}
.docs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,2.5vw,2.8rem) clamp(1.6rem,2.5vw,3rem); }
.doc-card__photo{ border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:#eee; }
.doc-card__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.doc-card__name{ font-weight:700; font-size:1.0625rem; margin-top:1.1rem; color:var(--ink); }
.doc-card__role{ color:var(--taupe); font-size:.9rem; margin-top:.2rem; }
.doc-card .btn{ margin-top:1.1rem; }

/* ============================================================
   PERFIL — hero glass + acordeón
   ============================================================ */
.profile{ position:relative; overflow:hidden; min-height:clamp(640px,54vw,820px); display:flex; align-items:center; padding-block:clamp(130px,11vw,190px) var(--sp); }
.profile__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center; }
.profile__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,34,30,.86) 0%, rgba(15,34,30,.5) 46%, rgba(15,34,30,.08) 76%); }
.profile__in{ position:relative; width:100%; }
.profile__card{ max-width:600px; background:rgba(255,255,255,.1); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:clamp(1.8rem,3vw,2.8rem); color:#fff; }
.profile__name{ font-size:clamp(1.4rem,1.9vw,2rem); font-weight:700; text-transform:uppercase; line-height:1.15; }
.profile__spec{ color:var(--lima); font-style:italic; margin-top:.6rem; }
.profile__univ{ color:rgba(255,255,255,.85); font-size:.92rem; margin-top:.4rem; }
.accordion{ margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.18); }
.accordion details{ border-bottom:1px solid rgba(255,255,255,.18); }
.accordion summary{ padding:.85rem 0; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-size:1.2rem; color:var(--lima); line-height:1; }
.accordion details[open] summary::after{ content:"–"; }
.accordion .acc-body{ padding:0 0 1rem; color:rgba(255,255,255,.78); font-size:.88rem; line-height:1.6; }
.profile-cta{ background:var(--petrol); padding-block:clamp(38px,4.2vw,60px); }
.profile-cta__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem 3rem; flex-wrap:wrap; }
.profile-cta__logos{ height:clamp(44px,4.2vw,62px); width:auto; opacity:.94; }
.profile-cta__price{ display:flex; flex-direction:column; align-items:flex-end; gap:.9rem; }
.profile-cta__price b{ color:#fff; font-size:1.05rem; letter-spacing:.02em; }

@media (max-width:768px){
  .gallery__grid, .docs__grid{ grid-template-columns:1fr; }
  .dir-hero{ grid-template-columns:1fr; }
  .dir-hero__ph{ display:none; }
  .profile__scrim{ background:linear-gradient(180deg, rgba(15,34,30,.8), rgba(15,34,30,.9)); }
  .profile__card{ max-width:none; }
  .profile-cta__in{ flex-direction:column; align-items:flex-start; }
  .gallery__card{ aspect-ratio:4/3; }
}
/* media Más allá: tamaño original (4/3) pero anclada arriba para no cortar cabezas */
.cmedia__media--tall{ aspect-ratio:4/3; }
.cmedia__media--tall img{ object-position:center 12%; }
.cmedia__media--wide{ aspect-ratio:3/2; }

/* Directorio: filtros movidos a la sección de la grilla (fondo claro) */
.hero--dir{ align-items:center; min-height:clamp(520px,50vw,720px); }
.hero--dir .hero__in{ padding-top:clamp(120px,10vw,150px); padding-bottom:clamp(30px,4vw,60px); }
.docs .doc-filters{ margin:0 0 2.8rem; }
.docs .doc-filter{ background:transparent; color:var(--ink); border-color:rgba(17,45,47,.28); }
.docs .doc-filter:hover{ border-color:var(--ink); }
.docs .doc-filter.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.doc-card{ transition:opacity .25s; }
/* Filtros directorio en mobile: grid 2 columnas parejas (evita el wrap ragged) */
@media (max-width:600px){
  .docs .doc-filters{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:2.2rem; }
  .docs .doc-filter{ padding:.85em .5em; font-size:.72rem; letter-spacing:.02em; text-align:center; }
}

/* Directorio hero: degradado carbón arriba (funde con el topbar) + oscurecido izq para el texto */
.hero--dir .hero__scrim{ background:
    linear-gradient(180deg, rgba(46,44,39,.96) 0%, rgba(46,44,39,.4) 7%, rgba(46,44,39,0) 16%),
    linear-gradient(105deg, rgba(18,28,22,.6) 0%, rgba(18,28,22,.26) 42%, rgba(18,28,22,0) 68%); }

/* ============================================================
   PÁGINAS UTILITARIAS (Contacto / Servicios en línea)
   ============================================================ */
.page-head{ background:var(--petrol); padding-block:clamp(126px,12vw,186px) clamp(46px,6vw,78px); }
.page-head__note{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lima); border:1px solid rgba(212,218,23,.5); border-radius:999px; padding:.4em 1em; margin-bottom:1.2rem; }
.page-head h1{ color:#fff; font-size:clamp(1.6rem,2.2vw,2.6rem); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; }
.page-head h1 .accent{ color:var(--lima); }
.page-head p{ color:rgba(255,255,255,.85); margin-top:1.1rem; max-width:660px; font-size:1.0625rem; line-height:1.6; }

.section-pad{ padding-block:var(--sp); }
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2.5rem,5vw,5.5rem); align-items:start; }
.nu-form{ display:flex; flex-direction:column; gap:1.2rem; }
.nu-form .field{ display:flex; flex-direction:column; gap:.45rem; }
.nu-form label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--ink); }
.nu-form input, .nu-form textarea{ font-family:var(--font); font-size:1rem; padding:.9rem 1.1rem; border:1px solid rgba(17,45,47,.2); border-radius:14px; background:#fff; color:var(--ink); width:100%; }
.nu-form input:focus, .nu-form textarea:focus{ outline:none; border-color:var(--ink); }
.nu-form textarea{ min-height:150px; resize:vertical; }
.nu-form .btn{ align-self:flex-start; margin-top:.4rem; }
.contact-info h3{ font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
.contact-info ul{ list-style:none; margin-top:1.2rem; display:flex; flex-direction:column; gap:1.1rem; }
.contact-info li{ line-height:1.5; }
.contact-info li b{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--taupe); margin-bottom:.2rem; }
.contact-info a{ color:var(--ink); }
.contact-info a:hover{ color:#9aa017; }

.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,2.5vw,2.4rem); }
.service-card{ background:var(--cream); border-radius:var(--radius); padding:clamp(1.9rem,3vw,2.8rem); display:flex; flex-direction:column; }
.service-card h3{ color:#9aa017; font-size:1.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.service-card p{ color:#4a4f45; line-height:1.7; margin-top:.9rem; flex:1; }
.service-card .btn{ align-self:flex-start; margin-top:1.6rem; }
@media (max-width:768px){ .contact-grid, .services-grid{ grid-template-columns:1fr; } }

/* Contacto — tarjeta unificada (idea de diseño Clara: rounded asimétrico + petróleo + lima) */
.contact-wrap{ background:var(--cream); padding-block:var(--sp); }
.contact-card{ display:grid; grid-template-columns:1.25fr .78fr; background:#fff; border-radius:36px 36px 36px 92px; overflow:hidden; box-shadow:0 34px 80px rgba(17,45,47,.12); }
.contact-card__form{ padding:clamp(2rem,3.4vw,3.4rem); }
.contact-card__form h2{ font-size:1.35rem; font-weight:700; text-transform:uppercase; color:var(--ink); letter-spacing:.02em; margin-bottom:1.7rem; }
.contact-card__info{ background:var(--petrol); color:#fff; padding:clamp(2rem,3.4vw,3.4rem); display:flex; flex-direction:column; }
.contact-card__info h3{ color:#fff; font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.contact-card__info ul{ list-style:none; margin-top:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
.contact-card__info li b{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--lima); margin-bottom:.3rem; font-weight:700; }
.contact-card__info li, .contact-card__info a{ color:rgba(255,255,255,.9); line-height:1.5; }
.contact-card__info a:hover{ color:#fff; }
.contact-card__social{ margin-top:auto; padding-top:2.2rem; display:flex; gap:.8rem; }
.contact-card__social a{ width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:center; color:var(--cream); transition:background .2s ease, border-color .2s ease, color .2s ease; }
.contact-card__social a:hover{ background:var(--lima); border-color:var(--lima); color:var(--petrol); }
.nu-form input, .nu-form textarea{ background:#F3F6EC; border:1.5px solid transparent; border-radius:14px; }
.nu-form input::placeholder, .nu-form textarea::placeholder{ color:#9a978d; }
.nu-form input:focus, .nu-form textarea:focus{ border-color:var(--lima); background:#fff; }
@media (max-width:768px){ .contact-card{ grid-template-columns:1fr; border-radius:26px 26px 26px 56px; } }

/* ============================================================
   FOOTER v2 (ADN Clara + columnas + barra copyright)
   ============================================================ */
.footer{ background:var(--carbon); color:rgba(255,255,255,.72); padding-block:clamp(50px,5vw,76px) 0; }
.footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.25fr; gap:clamp(2rem,4vw,4.5rem); padding-bottom:clamp(38px,4vw,58px); }
.footer .footer__brand{ align-items:flex-start; }
.footer .footer__brand .brand__tag{ opacity:.9; }
.footer__blurb{ margin-top:1.3rem; max-width:320px; font-size:.9rem; line-height:1.65; color:rgba(255,255,255,.55); }
.footer__social{ display:flex; gap:.7rem; margin-top:1.7rem; }
.footer__social a{ width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.24); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); transition:border-color .25s, color .25s, background .25s; }
.footer__social a:hover{ border-color:var(--lima); color:var(--lima); }
.footer__col{ display:flex; flex-direction:column; gap:.9rem; }
.footer__col h4{ color:var(--lima); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:.6rem; }
.footer__col a, .footer__contactcol span{ color:rgba(255,255,255,.7); font-size:.92rem; line-height:1.3; }
.footer__col a{ transition:color .2s; width:fit-content; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:1.7rem; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; color:rgba(255,255,255,.48); }
.footer__tagline{ text-transform:uppercase; letter-spacing:.09em; }
@media (max-width:768px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:2.2rem 1.6rem; }
  .footer__brandcol{ grid-column:1 / -1; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   LONGFORM — páginas de texto (tratamientos de apoyo + legales)
   ══════════════════════════════════════════════════════════════ */
.longform{ background:var(--cream); padding-block:var(--sp); }
.longform .wrap{ max-width:840px; }
.longform h2{ font-size:clamp(1.15rem,1.7vw,1.6rem); color:var(--petrol); font-weight:600; line-height:1.25; margin:2.4rem 0 1rem; }
.longform h2:first-child{ margin-top:0; }
.longform h3{ font-size:1.05rem; color:var(--petrol); font-weight:600; margin:1.7rem 0 .6rem; }
.longform p{ margin:0 0 1.05rem; line-height:1.72; color:var(--ink); font-size:1.02rem; }
.longform p:last-child{ margin-bottom:0; }
.longform a:not(.btn){ color:var(--petrol); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--lima); text-decoration-thickness:2px; }
.longform strong{ color:var(--petrol); }
.longform ol{ list-style:none; counter-reset:li; margin:0 0 1.4rem; padding:0; }
.longform ol li{ position:relative; padding-left:2.4rem; margin-bottom:.8rem; line-height:1.65; color:var(--ink); counter-increment:li; }
.longform ol li::before{ content:counter(li); position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:999px; background:var(--lima); color:var(--petrol); font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
.longform ul.bullet{ list-style:none; margin:0 0 1.4rem; padding:0; }
.longform ul.bullet li{ position:relative; padding-left:1.5rem; margin-bottom:.7rem; line-height:1.65; color:var(--ink); }
.longform ul.bullet li::before{ content:""; position:absolute; left:.1rem; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--lima); }
.longform__note{ background:var(--mint); border-radius:20px 20px 20px 48px; padding:clamp(1.2rem,2.4vw,1.8rem); margin:1.8rem 0; }
.longform__note p{ margin:0; }
.longform__card{ background:#fff; border-radius:24px; padding:clamp(1.6rem,3vw,2.8rem); box-shadow:0 24px 60px -34px rgba(17,45,47,.32); }
.longform__card h2{ margin-top:0; }
.longform__card .btn-row{ margin-top:1.6rem; }
.longform__video{ position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; margin:2.2rem 0; background:#000; cursor:pointer; box-shadow:0 16px 40px -18px rgba(17,45,47,.32); }
.longform__video img{ width:100%; height:100%; object-fit:cover; display:block; }
.longform__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.longform__video:hover .video__play{ transform:scale(1.08); background:#fff; }
.longform__video.is-playing .video__play{ display:none; }

/* nota final de la tarjeta de contacto (Reclamos) */
.contact-card__foot{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16); font-size:.85rem; line-height:1.6; color:rgba(255,255,255,.72); }
.contact-card__foot a{ color:var(--lima); }

/* ============================================================
   CONSENTIMIENTO DE COOKIES (Ley 21.719)
   ============================================================ */
.footer__legal{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.footer__legal a, .footer__cookies-btn{ color:rgba(244,248,236,.7); font-size:.8rem; text-decoration:none; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; }
.footer__legal a:hover, .footer__cookies-btn:hover{ color:var(--lima); }

.cookie{ position:fixed; left:0; right:0; bottom:0; z-index:1000; display:flex; justify-content:center; padding:clamp(.7rem,2vw,1.3rem); pointer-events:none; }
.cookie[hidden]{ display:none; }
.cookie__prefs[hidden]{ display:none; }
.cookie__actions [hidden]{ display:none; }
.cookie__inner{ pointer-events:auto; width:100%; max-width:960px; background:var(--cream); color:var(--ink); border:1px solid rgba(17,45,47,.14); border-radius:20px 20px 20px 44px; box-shadow:0 20px 55px rgba(17,45,47,.28); padding:clamp(1.1rem,2.6vw,1.7rem) clamp(1.2rem,3vw,2rem); transform:translateY(130%); opacity:0; transition:transform .35s ease, opacity .35s ease; }
.cookie.is-open .cookie__inner{ transform:none; opacity:1; }
.cookie__title{ font-size:1.05rem; font-weight:700; margin:0 0 .35rem; }
.cookie__text p{ font-size:.86rem; line-height:1.55; color:#4a4a44; margin:0; max-width:74ch; }
.cookie__text a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.cookie__prefs{ display:grid; gap:.5rem; margin:1.1rem 0 .2rem; }
.cookie__pref{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; border:1px solid rgba(17,45,47,.12); border-radius:12px; padding:.7rem .95rem; }
.cookie__pref > span{ display:flex; flex-direction:column; gap:.15rem; }
.cookie__pref b{ font-size:.82rem; }
.cookie__pref small{ font-size:.72rem; color:#6b6b63; line-height:1.4; }
.cookie__pref input{ width:20px; height:20px; accent-color:var(--lima); flex:0 0 auto; cursor:pointer; }
.cookie__pref input:disabled{ opacity:.5; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; align-items:center; }
.cookie__actions [data-cookie="accept"]{ margin-left:auto; }
.cookie__save{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.cookie__save:hover{ background:#0c1e1f; }
@media (max-width:560px){
  .cookie__inner{ border-radius:18px 18px 18px 30px; }
  .cookie__actions{ gap:.5rem; }
  .cookie__actions .btn{ flex:1 1 46%; text-align:center; }
  .cookie__actions [data-cookie="accept"]{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .cookie__inner{ transition:none; } }