/* ============================================================
   Farmacia Cristo Rey — Landing page
   Paleta muestreada del logo original (isotipo.png / marca-banner.png)
   ============================================================ */

:root{
  /* --- Marca --- */
  --blue-700:#01387F;   /* azul del disco del isotipo */
  --blue-600:#04479B;
  --blue-100:#E4EBF4;

  --navy-900:#012C62;   /* azul marino de la curva institucional */
  --navy-800:#03356F;
  --navy-950:#01203F;   /* footer */

  --green-700:#017A3B;
  --green-600:#018743;
  --green-500:#019A4C;
  --green-400:#18C44D;  /* verde del isotipo, más brillante */
  --green-100:#E3F4E9;

  --white:#FFFFFF;
  --paper:#F6F6F7;      /* gris frío del material de marca */
  --line:#E3E4E7;

  --ink:#132237;        /* tinta del wordmark */
  --ink-soft:#5C6675;

  /* --- Sistema --- */
  --font-body:"Segoe UI",-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;
  --font-display:Georgia,"Times New Roman","Iowan Old Style",serif;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  /* Sombras en capas. Una sola sombra ancha se lee como una mancha gris;
     la luz real deja un contacto corto y oscuro pegado al objeto más una
     penumbra amplia y suave. Tres paradas hacen esa diferencia. */
  --shadow-sm:0 1px 2px rgba(19,34,55,.045), 0 2px 6px rgba(19,34,55,.04);
  --shadow-md:0 1px 2px rgba(19,34,55,.04), 0 6px 14px rgba(19,34,55,.05), 0 16px 34px rgba(19,34,55,.07);
  --shadow-lg:0 2px 4px rgba(19,34,55,.05), 0 10px 22px rgba(19,34,55,.06), 0 30px 66px rgba(19,34,55,.12);

  --max:1160px;
  --ease:cubic-bezier(.22,.75,.28,1);

  /* Alto de la barra: lo usa el desplazamiento a las anclas para que el
     título no quede escondido debajo del menú. */
  --nav-h:84px;

  /* Grano. Los planos de color liso grandes se ven "de plantilla"; una
     textura casi imperceptible les devuelve materia. Es un SVG embebido,
     no pesa nada y se aplica sólo sobre los fondos oscuros. */
  --rojo-mapa:#CE3226;      /* rojo de chincheta: SOLO para ubicación */
  --rojo-mapa-100:#FCEDEB;

  --grano:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* ligaduras y cifras de texto: el detalle que separa una página
     compuesta de una página escrita */
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  /* el kerning y las ligaduras ya se piden arriba de forma explícita */
  overflow-x:hidden;
}

/* Al hacer clic en el menú, el destino aterrizaba debajo de la barra fija.
   Este margen lo baja justo lo necesario. */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

::selection{background:var(--green-400);color:var(--navy-950)}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea{font:inherit;color:inherit}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:28px}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.02em}
h3,h4{font-family:var(--font-body);font-weight:700;line-height:1.2;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);letter-spacing:-.026em}
h3{font-size:1.14rem}
h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}

/* El reparto de las líneas es lo que más delata a una página amateur:
   títulos que dejan una palabra huérfana abajo, párrafos con la última
   línea de dos letras. El navegador puede resolverlo solo.
   balance → reparte el título en líneas parejas.
   pretty  → evita huérfanas al final del párrafo. */
h1,h2,h3,blockquote,.lead,.tag{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}

/* Cifras de ancho fijo: los horarios y los teléfonos quedan en columna
   perfecta en vez de bailar según el dígito. */
.stat b,.hours__list span,.branch__wa,
.footer__col span,.footer__col a,.pasos__n{font-variant-numeric:tabular-nums}

/* ============================================================
   FOCO VISIBLE
   Quien navega con teclado tiene que ver dónde está parado. El anillo
   es de marca y aparece sólo con teclado (:focus-visible), nunca al
   hacer clic con el mouse.
   ============================================================ */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--green-500);
  outline-offset:3px;
  border-radius:8px;
}
/* sobre los fondos azules el verde oscuro no se distingue */
.cta :where(a,button,input,textarea):focus-visible,
.footer :where(a,button):focus-visible,
.card--destacada :where(a):focus-visible,
.hours :where(a):focus-visible{outline-color:var(--green-400)}

/* Salto al contenido: fuera de pantalla hasta que recibe foco */
.saltar{
  position:fixed;top:14px;left:14px;z-index:100;
  padding:12px 20px;border-radius:100px;
  background:var(--blue-700);color:#fff;
  font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow-md);
  transform:translateY(-160%);
  transition:transform .3s var(--ease);
}
/* :focus a secas, no :focus-visible: a este enlace sólo se llega con Tab,
   y algunos navegadores no le aplican la heurística de :focus-visible */
.saltar:focus{transform:none;outline:2px solid #fff;outline-offset:3px}

.lead{font-size:1.1rem;color:var(--ink-soft);max-width:52ch}
.muted{color:var(--ink-soft)}
.center{text-align:center}
/* Red de seguridad: el atributo hidden lo pisa cualquier display que se
   declare después. Con esto, lo que está oculto se queda oculto. */
[hidden]{display:none !important}

.tag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-700);
  background:var(--green-100);
  padding:7px 15px;border-radius:100px;
  margin-bottom:20px;
}
.tag--light{background:rgba(255,255,255,.13);color:#8FE3AC}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:1px solid transparent;border-radius:100px;
  font-family:var(--font-body);
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn--primary{background:var(--blue-700);color:#fff;box-shadow:0 10px 24px rgba(1,56,127,.26)}
.btn--primary:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:0 16px 34px rgba(1,56,127,.32)}

.btn--green{background:var(--green-500);color:#fff;box-shadow:0 10px 24px rgba(1,154,76,.3)}
.btn--green:hover{background:var(--green-600);transform:translateY(-2px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper);transform:translateY(-2px)}

.btn--sm{padding:11px 22px;font-size:.89rem}
.btn--full{width:100%}

/* ============================================================
   LOGO (isotipo real + wordmark en una línea)
   ============================================================ */
.logo{display:flex;align-items:center;gap:14px;min-width:0}
/* El PNG trae el disco inscrito exacto en el cuadrado: el radio 50% lo recorta limpio */
.logo__mark{
  width:48px;height:48px;flex:none;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(1,56,127,.28);
}
/* Wordmark en dos niveles: "Farmacia" hace de antetítulo y "Cristo Rey"
   lleva el peso. Una sola línea plana se leía como texto escrito, no
   como marca. El filete lo separa del isotipo. */
.logo__text{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:15px;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:400;text-transform:uppercase;
  font-size:1.16rem;letter-spacing:.13em;
  line-height:1.06;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.logo__text::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:76%;
  transform:translateY(-50%);
  background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line) 78%,transparent);
}
.logo__pre{
  font-size:.53em;letter-spacing:.42em;
  color:var(--ink-soft);
  margin-bottom:.28em;
  transition:color .3s var(--ease);
}
.logo:hover .logo__text{color:var(--blue-700)}
.logo:hover .logo__pre{color:var(--green-600)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
/* Al bajar, la barra se compacta unos píxeles y se apoya sobre la página.
   Es un gesto mínimo, pero es lo que hace que la cabecera se sienta viva
   en vez de pegada. */
.nav.is-stuck{
  --nav-h:74px;
  background:rgba(255,255,255,.9);
  border-bottom-color:var(--line);
  box-shadow:0 1px 2px rgba(19,34,55,.04),0 6px 22px rgba(19,34,55,.06);
}

.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--nav-h);
  transition:height .35s var(--ease);
}

/* Barra de avance de lectura */
.nav__progreso{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  overflow:hidden;pointer-events:none;
}
.nav__progreso i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue-700),var(--green-500) 68%,var(--green-400));
}

.nav__links{display:flex;align-items:center;gap:32px}
.nav__links a:not(.btn){
  font-size:.94rem;font-weight:500;color:var(--ink-soft);
  position:relative;transition:color .25s;white-space:nowrap;
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:100%;height:2px;border-radius:2px;background:var(--green-500);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
/* Sección en la que está parado el visitante: el filete queda encendido.
   Orienta sin que haya que mirar la barra de desplazamiento. */
.nav__links a:not(.btn).is-active{color:var(--ink);font-weight:600}
.nav__links a:not(.btn).is-active::after{transform:scaleX(1);transform-origin:left}

.nav__toggle{
  display:none;width:44px;height:44px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0 10px;
}
.nav__toggle span{height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   CURVA INSTITUCIONAL (recortada del banner de marca, con alfa)
   ============================================================ */
/* El banner de origen tenía un velo encima que apagó las bandas
   (verde #019451 en vez de #18C44D). El filtro les levanta el color
   sin regenerar la imagen. Ojo: pasado de 1.5 quedan estridentes. */
.swoosh,
.frame__swoosh{filter:saturate(1.15) contrast(1.02)}

.swoosh{
  position:absolute;top:0;right:0;
  width:min(38%,470px);
  aspect-ratio:550/575;
  background:url("swoosh.svg") right top / 100% auto no-repeat;
  pointer-events:none;z-index:0;
}
/* Sobre el azul oscuro la banda marina casi se funde con el fondo y deja ver
   el borde recto de la imagen: un degradado diagonal lo disuelve. */
.swoosh--cta{
  opacity:.5;
  -webkit-mask-image:linear-gradient(205deg,#000 30%,transparent 80%);
          mask-image:linear-gradient(205deg,#000 30%,transparent 80%);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--white));
  pointer-events:none;z-index:0;
}
/* Composición centrada: una sola columna, mucho aire y jerarquía tipográfica.
   Es lo que le da el aire editorial; llenarla de tarjetas se lo quitaba. */
.hero__inner{
  position:relative;z-index:1;
  min-height:min(86vh,740px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  /* más aire abajo que arriba: empuja el titular hacia el centro óptico */
  /* padding-block y no el atajo: el atajo pondría 0 a los costados y
     anularía el margen lateral de .container */
  padding-block:clamp(56px,8vh,92px) clamp(112px,15vh,168px);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.84rem;font-weight:600;color:var(--blue-700);
  background:#fff;border:1px solid var(--line);
  padding:8px 16px;border-radius:100px;margin-bottom:26px;
  box-shadow:var(--shadow-sm);
}
.eyebrow i{
  width:8px;height:8px;border-radius:50%;background:var(--green-500);
  animation:pulse 2.4s infinite;
}
.eyebrow--cerrado{color:var(--ink-soft)}
.eyebrow--cerrado i{background:#C4562F;animation:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(1,154,76,.5)}
  70%{box-shadow:0 0 0 10px rgba(1,154,76,0)}
  100%{box-shadow:0 0 0 0 rgba(1,154,76,0)}
}

/* --- Isotipo que gira como moneda --- */
.moneda{
  perspective:1100px;              /* sin esto el giro se ve plano */
  width:clamp(96px,11vw,142px);
  aspect-ratio:1;
  margin-bottom:clamp(26px,3.5vh,40px);
}
/* Una sola vuelta al cargar, desacelerando hasta quedar de frente.
   El movimiento perpetuo le robaba atención al titular y al botón,
   que es lo que de verdad queremos que miren. */
.moneda__giro{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  animation:presentarMoneda 2.4s cubic-bezier(.16,.84,.28,1) .45s both;
}
/* al terminar la presentación, JS le pone esta clase y queda reactiva */
.moneda__giro.listo{
  animation:none;
  transition:transform 1.1s var(--ease);
}
.moneda:hover .moneda__giro.listo{transform:rotateY(-20deg) rotateX(7deg)}
.moneda img{
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:50%;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* El recorte circular es semitransparente en el filo y deja pasar el
     fondo claro: este anillo sólido lo tapa. */
  box-shadow:0 0 0 2px var(--blue-700);
}
/* Las caras se separan medio grosor cada una: así el disco tiene volumen
   real y no dos imágenes pegadas. */
.moneda__cara {transform:translateZ(calc(var(--grosor,8px) / 2))}
.moneda__dorso{transform:rotateY(180deg) translateZ(calc(var(--grosor,8px) / 2))}

/* Canto del cilindro: segmentos planos dispuestos en círculo. Es lo que
   hace que a 90° se siga viendo una moneda y no desaparezca. */
.moneda__canto{position:absolute;inset:0;transform-style:preserve-3d}
.moneda__canto span{
  position:absolute;left:50%;top:50%;
  display:block;
  background:var(--blue-700);
}
@keyframes presentarMoneda{
  from{transform:rotateY(-410deg)}
  to  {transform:rotateY(0deg)}
}

.hero h1{
  font-size:clamp(2.9rem,7.4vw,5.4rem);
  line-height:1.04;letter-spacing:-.035em;
  margin-bottom:26px;
}
/* la cursiva del serif hace el acento; el degradado quedaba estridente */
.hero h1 em{font-style:italic;color:var(--green-600)}

.hero .lead{
  font-size:clamp(1.08rem,1.6vw,1.25rem);
  color:var(--ink-soft);
  max-width:52ch;margin-inline:auto;
  line-height:1.6;
  text-wrap:balance;
}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.hero__actions .btn{padding:17px 34px;font-size:1rem}

/* --- Entrada escalonada del hero --- */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* la moneda queda afuera: en escritorio lleva su propio translateY(-50%)
   y esta animación se lo pisaría */
.hero__inner > *:not(.moneda){animation:heroIn .95s var(--ease) both}
.moneda{animation:aparecer 1.2s var(--ease) both;animation-delay:.2s}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.hero__inner > *:nth-child(1){animation-delay:.06s}
.hero__inner > *:nth-child(2){animation-delay:.18s}
.hero__inner > *:nth-child(3){animation-delay:.30s}
.hero__inner > *:nth-child(4){animation-delay:.42s}
.hero__inner > *:nth-child(5){animation-delay:.54s}

/* Curva espejada abajo a la izquierda: cierra la composición centrada.
   El degradado blanco del ::after la va apagando, así que queda apenas
   insinuada. */
.hero::before{
  content:"";position:absolute;left:0;bottom:0;
  width:min(28%,340px);aspect-ratio:550/575;
  background:url("swoosh.svg") right top / 100% auto no-repeat;
  transform:rotate(180deg);
  filter:saturate(1.15) contrast(1.02);
  opacity:.55;
  pointer-events:none;z-index:0;
}

/* --- Stats --- */
.stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--navy-900);
  border-radius:var(--r-xl);
  padding:38px 20px;
  color:#fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.stats::after{
  content:"";position:absolute;top:-60%;right:-8%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,196,77,.28),transparent 65%);
}
.stat{position:relative;text-align:center;padding:6px 12px}
.stat + .stat{border-left:1px solid rgba(255,255,255,.14)}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.15}
.stat span{font-size:.84rem;color:rgba(255,255,255,.64);text-wrap:balance}
/* el ícono ocupa el lugar de la cifra: se alinea a la misma altura de línea */
.stat__icon{display:grid !important;place-items:center;height:calc(clamp(1.8rem,3vw,2.4rem) * 1.15)}
.stat__icon svg{width:clamp(1.7rem,2.8vw,2.2rem);height:auto;fill:var(--green-400)}

/* ============================================================
   SECCIONES
   ============================================================ */
.section{position:relative;padding:clamp(76px,10vw,124px) 0;overflow:hidden}
.section--alt{background:var(--paper);border-block:1px solid var(--line)}
.section > .container{position:relative;z-index:1}

/* ------------------------------------------------------------------
   Marca de agua: el isotipo en silueta, muy tenue, sangrando por el
   borde. Es el mismo recurso que usa el banner institucional.

   Sólo en dos secciones y en lados opuestos: puestas en secciones
   contiguas del mismo lado, las dos siluetas se encuentran en el
   borde común y se ven superpuestas.
------------------------------------------------------------------ */
.coberturas::before,
#sucursales::before{
  content:"";position:absolute;
  width:min(52%,540px);aspect-ratio:1;
  background:url("marca-agua.png") center / contain no-repeat;
  opacity:.09;   /* .05 quedaba prácticamente invisible */
  pointer-events:none;z-index:0;
}
.coberturas::before{left:-13%;top:50%;transform:translateY(-50%)}
#sucursales::before{right:-12%;top:-8%}

.section__head{max-width:640px;margin-bottom:56px}
.section__head p{color:var(--ink-soft);margin-top:16px;font-size:1.04rem}

.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}

/* --- Cards de servicio --- */
/* Destacada a ancho completo + 3 tarjetas debajo: la grilla cierra
   exacta y el envío gratis (el mejor diferencial) deja de compartir
   fila con el resto. */
.servicios{grid-template-columns:repeat(3,1fr)}
.card--destacada{grid-column:1 / -1}

.card{
  position:relative;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 28px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.card__icon{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:13px;background:var(--green-100);margin-bottom:22px;
  transition:background .35s var(--ease);
}
.card__icon svg{width:22px;height:22px;fill:none;stroke:var(--green-600);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.card:hover .card__icon{background:var(--blue-700)}
.card:hover .card__icon svg{stroke:var(--green-400)}
.card h3{margin-bottom:10px}
.card p{font-size:.95rem;color:var(--ink-soft)}

/* Marcas dentro de una tarjeta: fichas chicas, más escaneables que un párrafo */
.marcas{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.marcas li{
  font-size:.79rem;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line);
  padding:6px 12px;border-radius:100px;
  transition:border-color .25s,background .25s;
}
.card:hover .marcas li{border-color:var(--green-400);background:var(--green-100)}
.marcas__mas{color:var(--ink-soft) !important;font-weight:500 !important;background:transparent !important;border-style:dashed !important}

/* --- Tarjeta destacada --- */
.card--destacada{
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:clamp(40px,4.4vw,58px);
  background:linear-gradient(125deg,var(--navy-900) 20%,var(--blue-700));
  border-color:transparent;color:#fff;
  box-shadow:var(--shadow-lg);
}
.card__swoosh{
  position:absolute;top:0;right:0;
  width:34%;aspect-ratio:550/575;
  background:url("swoosh.svg") right top / 100% auto no-repeat;
  opacity:.4;pointer-events:none;
  -webkit-mask-image:linear-gradient(205deg,#000 25%,transparent 78%);
          mask-image:linear-gradient(205deg,#000 25%,transparent 78%);
}
/* el :not() evita que esta regla le pise el position:absolute al swoosh */
.card--destacada > *:not(.card__swoosh){position:relative;z-index:1;max-width:min(58ch,62%)}
.card__pill{
  align-self:flex-start;margin-bottom:20px;
  font-size:.71rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy-900);background:var(--green-400);
  padding:6px 14px;border-radius:100px;
}
.card--destacada .card__icon{background:rgba(255,255,255,.14);width:52px;height:52px}
.card--destacada .card__icon svg{stroke:var(--green-400);width:25px;height:25px}
.card--destacada:hover .card__icon{background:rgba(255,255,255,.22)}
.card--destacada h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.015em;margin-bottom:12px}
.card--destacada p{color:rgba(255,255,255,.76);font-size:1.02rem;max-width:42ch}
.card__link{
  display:inline-flex;align-items:center;gap:9px;
  align-self:flex-start;margin-top:26px;
  font-size:.95rem;font-weight:600;color:var(--green-400);
  transition:gap .25s var(--ease);
}
.card__link:hover{gap:15px}
.card__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- Split (Nosotros): retrato del material de marca --- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.split__visual{position:relative}

/* Panel azul profundo: en gris claro sobre sección blanca no se separaba
   del fondo y la sección entera se veía apagada. */
.frame{
  position:relative;aspect-ratio:1/1.06;
  border-radius:var(--r-xl);
  background:linear-gradient(155deg,var(--navy-950) 12%,var(--blue-700) 88%);
  display:grid;place-content:center;justify-items:center;gap:28px;
  box-shadow:0 30px 70px rgba(1,32,63,.28);
  overflow:hidden;
}
.frame__swoosh{
  position:absolute;top:0;right:0;
  width:66%;aspect-ratio:550/575;
  background:url("swoosh.svg") right top / 100% auto no-repeat;
  opacity:.62;
  -webkit-mask-image:linear-gradient(205deg,#000 28%,transparent 82%);
          mask-image:linear-gradient(205deg,#000 28%,transparent 82%);
}
/* halo claro detrás del isotipo: sin él, disco azul sobre panel azul */
.frame__mark{
  position:relative;z-index:1;
  width:min(50%,170px);height:auto;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),
             0 0 0 14px rgba(255,255,255,.05),
             0 22px 48px rgba(0,0,0,.34);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.frame:hover .frame__mark{
  transform:scale(1.045);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),
             0 0 0 20px rgba(24,196,77,.09),
             0 26px 56px rgba(0,0,0,.38);
}
.frame__word{
  position:relative;z-index:1;
  font-family:var(--font-display);
  font-size:clamp(.8rem,2vw,1.05rem);
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-align:center;
}

.quote-chip{
  position:absolute;right:-18px;bottom:34px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 22px;box-shadow:var(--shadow-md);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.split__visual:hover .quote-chip{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.quote-chip b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.18rem;color:var(--ink)}
.quote-chip small{font-size:.79rem;color:var(--ink-soft)}

.split__copy > p{color:var(--ink-soft);margin-bottom:32px;max-width:54ch}
.split__copy h2{margin-bottom:20px}

/* Filas con estado propio: al pasar el mouse se tiñen, aparece un filete
   verde a la izquierda y el tilde se rellena. Movimiento contenido. */
.checklist{display:grid;gap:6px;margin-bottom:34px}
.checklist li{
  position:relative;
  display:flex;gap:15px;align-items:flex-start;
  padding:15px 18px;
  border-radius:var(--r-md);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.checklist li::before{
  content:"";position:absolute;left:0;top:18%;
  width:3px;height:64%;border-radius:3px;
  background:var(--green-500);
  transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.checklist li:hover{background:var(--paper);transform:translateX(6px)}
.checklist li:hover::before{transform:scaleY(1)}

.checklist svg{
  width:24px;height:24px;flex:none;margin-top:2px;padding:5px;
  border-radius:50%;background:var(--green-100);
  fill:none;stroke:var(--green-600);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  transition:background .35s var(--ease),stroke .35s var(--ease),transform .35s var(--ease);
}
.checklist li:hover svg{background:var(--green-500);stroke:#fff;transform:scale(1.08)}

.checklist b{display:block;font-size:1rem;transition:color .3s}
.checklist li:hover b{color:var(--blue-700)}
.checklist span{font-size:.92rem;color:var(--ink-soft)}

/* --- Dermocosmética --- */
/* Fondo verde muy tenue: la diferencia de las secciones blanca y gris
   sin romper el ritmo, y acompaña el tema. */
.dermo{background:#F3F8F5;border-block:1px solid #E3EDE7;padding:0}
/* La foto sangra hasta el borde de la pantalla y ocupa media sección de
   alto completo. Como tarjeta flotante con sombra se leía como algo
   pegado encima; así forma parte de la franja. */
/* dos clases a propósito: .container reajusta su padding dentro de los
   media queries y por orden le ganaba a un selector simple */
.dermo > .dermo__inner{
  max-width:none;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  align-items:stretch;
}
.dermo__copy{
  align-self:center;
  padding-block:clamp(76px,9vw,116px);
  padding-left:max(28px, calc((100vw - var(--max)) / 2));
  padding-right:clamp(38px,5vw,76px);
}
.dermo__copy > p{color:var(--ink-soft);margin-bottom:30px;max-width:46ch}
.dermo__copy h2{margin-bottom:20px}

.dermo__marcas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:10px;margin-bottom:34px;
}
/* Las fichas de marca pasaron a ser <button> (ver "VITRINA DE MARCAS"
   al final): el estilo vive ahora en .marca, no en el <li>. */

/* Ilustración de envases: apoyada directo sobre el fondo, sin tarjeta
   ni sombra, para que no se lea como algo pegado encima. */
.dermo__arte{align-self:center;padding-right:max(28px, calc((100vw - var(--max)) / 2))}
.dermo__arte svg{width:100%;height:auto}
.d-halo   {fill:rgba(1,154,76,.07)}
.d-piso   {fill:rgba(19,34,55,.10)}
.d-cuerpo {fill:#fff;stroke:var(--blue-700);stroke-width:2.6}
.d-liquido{fill:var(--green-100)}
.d-pipeta {fill:#DCEBE1}
.d-collar {fill:var(--blue-700)}
.d-perilla{fill:var(--green-500)}
.d-etiq   {fill:var(--green-100)}
.d-gota   {fill:var(--green-600)}
.d-linea  {fill:rgba(1,56,127,.28)}
.d-brillo {fill:rgba(255,255,255,.85)}

/* Antes acá había una regla que estiraba cualquier <img> de esta columna
   a sangre completa, pensada para una foto de estudio que nunca llegó.
   Ahora la columna es la vitrina y los logos de marca son <img>: la regla
   los reventaba a pantalla completa. Se eliminó. */

/* --- Coberturas y formas de pago --- */
/* Con 20 obras sociales, las fichas ocupan todo el ancho: en dos
   columnas la lista quedaba altísima contra tres formas de pago. */
.pagos{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;
  margin-top:44px;padding-top:34px;
  border-top:1px solid var(--line);
}
.pagos h3{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  display:flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;
  background:#fff;border:1px solid var(--line);
  font-size:.95rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.chips--pago{gap:10px}
.chips--pago li{font-weight:500}
.chips--pago svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:var(--green-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Promociones --- */
/* Las tarjetas las genera promociones.js. La jerarquía la manda la cifra:
   en un descuento el número es la noticia y las palabras son la aclaración,
   así que el título va en dos tamaños y no todo parejo. */
.promos{border-top:1px solid var(--line)}

.promos__lista{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  gap:20px;
}

.promo{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  /* La entrada es propia y no del observador de .reveal, porque estas
     tarjetas nacen después de que ese observador ya salió a mirar. */
  animation:promoEntra .7s var(--ease) both;
}
.promo:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
@keyframes promoEntra{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.promo__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.promo__entidad{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
/* La placa blanca detrás del logo no es adorno: dos de los logos de banco
   son azul marino y sobre la tarjeta oscura desaparecerían. De paso es como
   los bancos muestran sus marcas en cualquier vidriera. */
.promo__marcas{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.promo__logo{
  display:flex;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:5px 9px;
}
/* Los archivos vienen todos con la misma altura de lienzo y el logo
   escalado a igual área de tinta, así que fijando el alto quedan todos
   del mismo tamaño óptico sin tocar nada acá. */
.promo__logo img{display:block;height:26px;width:auto}
.promo--hoy .promo__logo{border-color:transparent;box-shadow:0 3px 10px rgba(1,32,63,.4)}
/* Con margin-left:auto el estado se va al borde derecho haya entidad o no */
.promo__estado{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.promo__chip{
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;white-space:nowrap;
}
.promo__chip--hoy{background:var(--green-600);color:#fff}
.promo__chip--vence{border:1px solid var(--line);color:var(--ink-soft);background:#fff}

.promo__cifra{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.7rem,5vw,3.4rem);line-height:.92;letter-spacing:-.035em;
  color:var(--blue-700);
}
.promo__resto{
  display:block;margin-top:11px;
  font-family:var(--font-body);
  font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);
}
/* Cuando el título no arranca con una cifra va entero, en un cuerpo
   intermedio: ni grito ni letra chica. */
.promo__plano{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.32rem,2.3vw,1.62rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--ink);
}

.promo__dias{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.87rem;font-weight:600;color:var(--ink);
}
.promo__letra{margin-top:9px;font-size:.84rem;line-height:1.55;color:var(--ink-soft)}
/* Empuja la vigencia al pie aunque las tarjetas tengan distinto alto,
   así todas las fechas quedan alineadas en una misma línea. */
.promo__vigencia{margin-top:auto;padding-top:18px;font-size:.76rem;color:var(--ink-soft)}

/* La que corre hoy se da vuelta al azul de marca. No es un color nuevo:
   es el mismo del encabezado traído acá para que, entre varias tarjetas,
   se vea cuál importa sin tener que leerlas todas. */
.promo--hoy{
  isolation:isolate;overflow:hidden;
  background:linear-gradient(152deg,var(--navy-950) 0%,#02306B 55%,var(--blue-700) 100%);
  border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.promo--hoy > *{position:relative;z-index:1}
.promo--hoy .promo__entidad{color:rgba(255,255,255,.62)}
.promo--hoy .promo__cifra{color:var(--green-400)}
.promo--hoy .promo__resto,
.promo--hoy .promo__plano,
.promo--hoy .promo__dias{color:#fff}
.promo--hoy .promo__dias{border-top-color:rgba(255,255,255,.18)}
.promo--hoy .promo__letra{color:rgba(255,255,255,.74)}
.promo--hoy .promo__vigencia{color:rgba(255,255,255,.52)}
.promo--hoy .promo__chip--hoy{background:var(--green-400);color:var(--navy-950)}
.promo--hoy .promo__chip--vence{
  background:transparent;border-color:rgba(255,255,255,.34);color:rgba(255,255,255,.82);
}

.promos__aviso{
  margin-top:32px;max-width:72ch;
  font-size:.84rem;line-height:1.6;color:var(--ink-soft);
}

/* --- Sucursales --- */
.branch{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 26px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.branch:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.branch h3{font-size:1.08rem;line-height:1.3}
.branch__ref{
  display:inline-block;align-self:flex-start;margin-top:9px;
  font-size:.71rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-700);background:var(--blue-100);
  padding:5px 12px;border-radius:100px;
}
.branch__actions{
  display:grid;gap:10px;justify-items:start;
  margin-top:auto;padding-top:22px;
}
/* Botón de WhatsApp */
.branch__wa{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:100px;
  background:var(--green-500);color:#fff;
  font-size:.9rem;font-weight:600;
  transition:background .25s,transform .25s var(--ease),box-shadow .25s;
}
.branch__wa:hover{background:var(--green-600);transform:translateY(-2px);box-shadow:0 10px 22px rgba(1,154,76,.28)}
.branch__wa svg{width:18px;height:18px;flex:none;fill:currentColor}

/* Sucursal sin teléfono todavía */
.branch--nueva{border-style:dashed;border-color:var(--green-400);background:var(--green-100)}
.branch--nueva:hover{border-color:var(--green-500)}
.branch__nueva{
  align-self:flex-start;margin-bottom:12px;
  font-size:.71rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--green-500);
  padding:5px 12px;border-radius:100px;
}
.branch--nueva .branch__ref{background:#fff}
.branch__pronto{font-size:.86rem;color:var(--green-700);font-weight:600}

/* --- Trabajá con nosotros --- */
.jobs{background:var(--paper);border-top:1px solid var(--line);padding:clamp(48px,6vw,64px) 0}
.jobs__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.jobs__copy h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin-bottom:8px}
.jobs__copy p{color:var(--ink-soft);font-size:.98rem;max-width:46ch}
.jobs__copy a{color:var(--blue-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.jobs__copy a:hover{color:var(--green-600)}
/* el correo es largo: que no rompa el ancho en pantallas chicas */
.footer__col a[href^="mailto:"]{word-break:break-all}
.jobs .btn svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* --- Bloque de horarios: azul de marca para que destaque --- */
/* El contenedor .hours ya no existe: su contenido (el encabezado y la lista
   de horarios) vive ahora dentro de .franja, arriba de las tarjetas. Las
   reglas de .hours__head y .hours__list siguen más abajo, que son las que
   se usan. */
.hours__head{position:relative;z-index:1}
.hours__head h3{font-family:var(--font-display);font-weight:400;font-size:1.7rem;letter-spacing:-.01em}
.hours__head p{font-size:.9rem;color:rgba(255,255,255,.66);margin-top:8px;max-width:26ch}

.hours__list{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px}
.hours__list li{
  flex:1 1 170px;
  padding:16px 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  transition:background .3s,border-color .3s;
}
.hours__list b{
  display:block;margin-bottom:5px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-400);
}
.hours__list span{font-family:var(--font-display);font-size:1.5rem;color:#fff;white-space:nowrap}

/* el día en curso queda marcado */
.hours__list li.is-hoy{background:rgba(24,196,77,.16);border-color:var(--green-400)}
.hours__list li.is-hoy b::after{
  content:"Hoy";
  margin-left:8px;padding:2px 8px;border-radius:100px;
  background:var(--green-400);color:var(--navy-900);
  font-size:.66rem;letter-spacing:.06em;
}

/* --- Testimonios --- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.quote blockquote{font-family:var(--font-display);font-size:1.06rem;line-height:1.55}
.quote blockquote::before{content:"“";display:block;font-size:2.8rem;line-height:0;margin-bottom:24px;color:var(--green-400);font-family:var(--font-display)}
.quote figcaption{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.avatar{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--blue-700);color:#fff;font-weight:700;
}
.avatar--green{background:var(--green-500)}
.quote figcaption b{font-size:.95rem;font-weight:700}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative;
  background:var(--navy-900);
  color:#fff;padding:clamp(76px,9vw,108px) 0;overflow:hidden;
}
.cta__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center}
.cta__copy h2{margin-bottom:16px}
.cta__copy > p{color:rgba(255,255,255,.72);max-width:44ch}


.cta__form{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);
  padding:32px;display:grid;gap:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.cta__form label{display:grid;gap:8px}
.cta__form label > span{font-size:.81rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.cta__form input,.cta__form textarea,.cta__form select{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.95rem;resize:vertical;
  transition:border-color .25s,background .25s;
}
.cta__form input::placeholder,.cta__form textarea::placeholder{color:rgba(255,255,255,.42)}
.cta__form input:focus,.cta__form textarea:focus,.cta__form select:focus{
  outline:none;border-color:var(--green-400);background:rgba(255,255,255,.12);
}
/* --- Catálogo de sucursales: reemplaza al desplegable, que quedaba apagado --- */
.picker{border:0;padding:0;margin:0}
.picker legend{
  padding:0;margin-bottom:12px;
  font-size:.81rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72);
}
.picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick{cursor:pointer}
.pick--ancho{grid-column:1 / -1}
/* el radio real queda oculto pero accesible por teclado */
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__box{
  display:flex;flex-direction:column;gap:1px;
  height:100%;padding:13px 15px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);
  border:1.5px solid rgba(255,255,255,.18);
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.pick__box b{font-size:.9rem;font-weight:600;color:#fff;line-height:1.25}
.pick__box small{font-size:.74rem;color:rgba(255,255,255,.55)}
.pick:hover .pick__box{background:rgba(255,255,255,.15);transform:translateY(-2px)}

/* seleccionada */
.pick input:checked + .pick__box{
  background:rgba(24,196,77,.2);
  border-color:var(--green-400);
  box-shadow:0 8px 22px rgba(24,196,77,.22);
}
.pick input:checked + .pick__box b{color:#fff}
.pick input:checked + .pick__box small{color:var(--green-400)}
/* foco visible para quien navega con teclado */
.pick input:focus-visible + .pick__box{outline:2px solid var(--green-400);outline-offset:2px}

.btn__wa{width:19px;height:19px;flex:none;fill:currentColor}

.form__note{font-size:.87rem;color:var(--green-400);text-align:center}
.form__note--error{color:#FFB4A2}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy-950);color:rgba(255,255,255,.62);padding:72px 0 0}
.footer__inner{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
  padding-bottom:52px;
}
.footer__brand p{font-size:.92rem;margin-top:18px;max-width:30ch}
.logo--light .logo__mark{box-shadow:none;outline:1px solid rgba(255,255,255,.16)}
.logo--light .logo__text{color:#fff}
.logo--light .logo__pre{color:rgba(255,255,255,.5)}
.logo--light .logo__text::before{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.22) 22%,rgba(255,255,255,.22) 78%,transparent);
}
.footer .logo:hover .logo__text{color:#fff}
.footer .logo:hover .logo__pre{color:var(--green-400)}

.footer__col{display:grid;gap:11px;align-content:start}
.footer__col h4{color:rgba(255,255,255,.42);margin-bottom:6px}
.footer__col a,.footer__col span{font-size:.92rem;transition:color .25s}
.footer__col a:hover{color:var(--green-400)}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;color:rgba(255,255,255,.42);
}

/* ============================================================
   ANIMACIÓN DE ENTRADA
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* En escritorio la moneda sale del flujo y se va al costado izquierdo:
   contrapesa la curva del ángulo superior derecho y deja el titular
   en el lugar de mayor atención. */
@media (min-width:1001px){
  .hero__inner{position:relative}
  .moneda{
    position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    width:clamp(130px,13vw,196px);
    margin-bottom:0;
  }
}

@media (max-width:1080px){
  .logo__text{font-size:1.02rem;letter-spacing:.1em;padding-left:13px}
  .nav__links{gap:24px}
}

@media (max-width:1000px){
  .swoosh{width:44%}
  .split{grid-template-columns:1fr;gap:52px}
  .split__visual{max-width:420px}
  /* apilado: la imagen arriba */
  .dermo > .dermo__inner{grid-template-columns:1fr}
  .dermo__arte{order:-1;max-width:400px;margin-inline:auto;padding:44px 28px 0}
  .dermo__copy{padding-inline:28px;padding-block:clamp(48px,7vw,76px)}
  .pagos{gap:14px 26px}
  .cta__inner{grid-template-columns:1fr;gap:44px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr;gap:38px}
}

@media (max-width:820px){
  .swoosh{width:46%}
  .logo__text{font-size:.96rem;letter-spacing:.1em}
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    padding:14px 28px 26px;
    box-shadow:var(--shadow-md);
    transform:translateY(-130%);
    /* Con sólo translate, el menú cerrado sigue estando: quien navega con
       Tab caía en cinco enlaces invisibles fuera de pantalla. visibility
       lo saca del recorrido del teclado y del lector de pantalla, y se
       retrasa hasta el final para no cortar la animación de cierre. */
    visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
  }
  .nav__links.is-open{
    transform:none;
    visibility:visible;
    transition:transform .45s var(--ease),visibility 0s;
  }
  .nav__links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav__links a:not(.btn)::after{display:none}
  .nav__cta{margin-top:18px}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px 0;padding:32px 12px}
  .stat + .stat{border-left:0}
  .stat:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
}

@media (max-width:640px){
  body{font-size:16px}
  .container{padding-inline:20px}
  .swoosh{width:44%}
  .logo{gap:10px}
  .logo__mark{width:40px;height:40px}
  /* el wordmark se mantiene en una sola línea: partirlo en tres se ve mal */
  .logo__text{font-size:.78rem;letter-spacing:.08em;padding-left:11px}
  .grid--3{grid-template-columns:1fr}
  .servicios{grid-template-columns:1fr}
  .card--destacada{grid-column:auto;padding:34px 26px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__inner{min-height:auto;padding-block:64px 76px}
  .quote-chip{right:8px;bottom:-14px}
  .cta__form{padding:24px}
  .hours{grid-template-columns:1fr;gap:22px;padding:30px 24px}
  .hours__list li{flex:1 1 100%}
  .picker__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:32px}
  .footer__bottom{flex-direction:column;gap:6px}
}

/* ============================================================
   PASOS DEL PEDIDO (reemplazan a los teléfonos sueltos del CTA)
   ============================================================ */
.pasos{display:grid;gap:4px;margin-top:32px;counter-reset:paso}
.pasos li{
  display:flex;gap:15px;align-items:flex-start;
  padding:13px 16px;border-radius:var(--r-md);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.pasos li:hover{background:rgba(255,255,255,.06);transform:translateX(5px)}
.pasos__n{
  flex:none;width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  font-size:.8rem;font-weight:700;
  color:var(--green-400);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.pasos li:hover .pasos__n{background:var(--green-500);border-color:var(--green-500);color:#fff}
.pasos b{display:block;font-size:.97rem;color:#fff;margin-bottom:1px}
.pasos span:not(.pasos__n){font-size:.88rem;color:rgba(255,255,255,.62)}

/* ============================================================
   OPINIONES DENTRO DE "NOSOTROS"
   Segundo nivel de la misma sección: separado por un filete y un
   título discreto, no por otra banda completa de relleno.
   ============================================================ */
.opiniones{
  margin-top:clamp(58px,7vw,84px);
  padding-top:clamp(46px,5vw,62px);
  border-top:1px solid var(--line);
}
.opiniones__titulo{
  margin-bottom:26px;
  font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============================================================
   CAPA DE ACABADO
   Nada de esto agrega elementos nuevos: son las diferencias de
   materia, peso y respuesta que separan una página correcta de
   una página cara.
   ============================================================ */

/* --- Grano sobre los planos oscuros --------------------------------
   Un rectángulo de color liso de 1160 px se lee como plantilla. Con
   una textura al 5 % el mismo azul parece papel impreso. Va sólo en
   los fondos profundos, que es donde el ojo lo registra. */
.cta::before,
.footer::before,
.stats::before,
.hours::before,
.frame::before,
.card--destacada::before,
.promo--hoy::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grano);
  background-size:180px 180px;
  opacity:.06;
  mix-blend-mode:overlay;
  pointer-events:none;z-index:0;
}

/* El pie no estaba posicionado: sin esto el grano no sabe dónde anclarse */
.footer{position:relative;overflow:hidden}
.footer__inner,
.footer__bottom{position:relative;z-index:1}

/* --- Contraste del pie ---------------------------------------------
   Sobre #01203F el blanco al 42 % queda por debajo del mínimo legible.
   Subirlo no cambia el aire de la sección y la vuelve accesible. */
.footer{color:rgba(255,255,255,.72)}
.footer__col h4{color:rgba(255,255,255,.55)}
.footer__bottom{color:rgba(255,255,255,.55)}

/* --- Respuesta al toque ---------------------------------------------
   Un botón que sólo reacciona al pasar el mouse se siente muerto en el
   celular. El hundido del clic es la confirmación física de que pasó algo. */
.btn,.branch__wa,.wa-fab,.pick__box,.nav__toggle{-webkit-tap-highlight-color:transparent}
.btn:active,
.branch__wa:active,
.wa-fab:active{transform:translateY(0) scale(.978)}
.pick:active .pick__box{transform:scale(.985)}

/* --- Enlaces dentro de texto corrido --- */
.jobs__copy a,
.footer__col a[href^="mailto:"]{
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .25s,text-decoration-color .25s;
}

/* --- Filete de luz en los paneles oscuros ---------------------------
   Un borde superior claro de un píxel simula que la luz de la página
   pega en el canto del panel. Sin él los bloques azules se ven pegados. */
.stats,.hours,.card--destacada,.cta__form,.frame{
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.09);
}
.cta__form{box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.12)}

/* ============================================================
   ACCESO RÁPIDO AL PEDIDO (botón flotante)
   Toda la página termina en WhatsApp; esto acorta el camino desde
   cualquier punto sin obligar a volver arriba.
   ============================================================ */
.wa-fab{
  position:fixed;z-index:70;
  right:clamp(16px,3vw,30px);
  bottom:clamp(16px,3vw,30px);
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 24px;border-radius:100px;
  background:var(--green-500);color:#fff;
  font-size:.93rem;font-weight:600;letter-spacing:-.005em;
  box-shadow:0 2px 6px rgba(1,101,50,.28),0 12px 34px rgba(1,154,76,.36);
  opacity:0;visibility:hidden;
  transform:translateY(16px) scale(.94);
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             visibility .45s,background .25s,box-shadow .3s;
}
.wa-fab.is-visible{opacity:1;visibility:visible;transform:none}
.wa-fab:hover{
  background:var(--green-600);
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(1,101,50,.3),0 18px 44px rgba(1,154,76,.44);
}
.wa-fab svg{width:21px;height:21px;flex:none;fill:currentColor}

@media (max-width:640px){
  /* en pantalla chica el rótulo compite con el contenido: queda el ícono */
  .wa-fab{width:56px;height:56px;padding:0;justify-content:center}
  .wa-fab span{display:none}
}

/* ============================================================
   IMPRESIÓN
   La lista de sucursales y los horarios se imprimen y se pegan en la
   heladera. Sin esto salen seis hojas con fondos azules a full tinta.
   ============================================================ */
@media print{
  .nav,.wa-fab,.saltar,.swoosh,.moneda,.hero__actions,
  .cta__form,.jobs,.dermo__arte,.nav__progreso{display:none !important}

  *{
    box-shadow:none !important;
    background-image:none !important;
    color:#000 !important;
    text-shadow:none !important;
  }
  body{font-size:11pt;background:#fff}
  .hero::before,.hero::after,
  .section::before,.coberturas::before{display:none !important}

  .stats,.hours,.cta,.footer,.card--destacada,.frame,.section--alt,.dermo{
    background:#fff !important;
    border:1px solid #999 !important;
  }
  .reveal{opacity:1 !important;transform:none !important}

  /* el papel no tiene enlaces: se escribe la dirección al lado */
  a[href^="http"]::after,
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555 !important}
  a[href^="#"]::after{content:""}

  .branch,.quote,.card,.section{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}

/* El grano usa mix-blend-mode: sin aislar, mezclaría con todo lo que
   tenga debajo en la página en vez de con su propio panel. */
.cta,.footer,.stats,.hours,.frame,.card--destacada{isolation:isolate}

/* ============================================================
   VITRINA DE MARCAS (dermocosmética)
   La columna derecha deja de ser un adorno fijo: muestra el frasco
   en reposo y cambia a la ficha de la marca que se está mirando.
   ============================================================ */

/* --- Las marcas ahora son botones --- */
.dermo__marcas{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
.dermo__marcas li{display:grid}
.marca{
  display:grid;place-items:center;
  width:100%;height:100%;
  padding:15px 10px;min-height:58px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  font-family:var(--font-display);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-align:center;line-height:1.25;white-space:nowrap;
  cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,
             box-shadow .3s,color .3s,background .3s;
}
/* is-activa la pone el script: en el celular no hay "pasar el mouse",
   y sin marca visible no se sabe qué ficha se está viendo */
.marca:hover,
.marca.is-activa{
  transform:translateY(-3px);
  border-color:var(--green-400);
  box-shadow:0 10px 24px rgba(1,154,76,.14);
  color:var(--green-700);
}
.marca.is-activa{background:var(--green-100)}

.dermo__pista{
  margin-top:-20px;margin-bottom:30px;
  font-size:.83rem;color:var(--ink-soft);
}

/* --- La vitrina --- */
/* La proporción viene del viewBox del frasco: fija el alto para que las
   fichas se apilen encima sin que la sección pegue un salto al cambiar. */
.vitrina{position:relative;width:100%;aspect-ratio:400/360}

.vitrina__panel{
  position:absolute;inset:0;
  display:grid;place-items:center;
  margin:0;
  opacity:0;visibility:hidden;
  transform:scale(.97);
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s;
}
.vitrina__panel.is-activo{opacity:1;visibility:visible;transform:none}
.vitrina__panel svg{width:100%;height:auto}

.vitrina__tarjeta{
  width:min(88%,380px);
  padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,32px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  text-align:center;
}

/* Alto fijo: cuando entre el logo oficial en lugar del nombre compuesto,
   la ficha no cambia de tamaño y el cruce sigue siendo limpio. */
.vitrina__marco{
  min-height:92px;
  display:grid;place-items:center;
  padding-bottom:22px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
/* Los archivos vienen todos en el mismo lienzo de 472x184, con el logo ya
   centrado y equilibrado adentro (mismo peso visual para todos, aunque uno
   sea alargado y otro compacto). Acá alcanza con fijar la caja: ninguna
   marca queda más grande que otra y la ficha no cambia de alto al cruzar.
   El lienzo va al doble del tamaño mostrado, para pantallas retina. */
.vitrina__logo{width:236px;height:92px;max-width:100%;object-fit:contain}
.vitrina__nombre{
  font-family:var(--font-display);
  font-size:clamp(1.28rem,2.3vw,1.62rem);
  line-height:1.14;letter-spacing:-.01em;
  color:var(--blue-700);
}

.vitrina__cat{
  display:inline-block;margin-bottom:12px;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-700);background:var(--green-100);
  padding:6px 14px;border-radius:100px;
}
.vitrina__tarjeta p{font-size:.92rem;color:var(--ink-soft);line-height:1.55}

@media (max-width:1000px){
  /* Apilado, la vitrina pasa a estar DEBAJO de las marcas. Arriba, tocar
     una marca cambiaba algo que quedaba fuera de pantalla. */
  .dermo__arte{
    order:0;
    padding:0 28px clamp(48px,7vw,72px);
    /* El max-width + margin-inline:auto de la regla original convertían a
       esta columna en "ancho según contenido". Como todos los paneles de
       la vitrina son absolutos, no aportan ancho, y la columna se achicaba
       sola. Acá se la deja estirar y el límite pasa a la vitrina, que es
       lo que en realidad hay que centrar. */
    max-width:none;
    margin-inline:0;
  }
  .vitrina{max-width:400px;margin-inline:auto}
  .dermo__copy{padding-bottom:clamp(24px,3vw,34px)}
}

/* ============================================================
   FOTO DE SUCURSAL
   Un frente reconocible vale más que cualquier texto: el cliente
   sabe adónde tiene que ir antes de leer la dirección.

   PARA AGREGAR LAS QUE FALTAN:
   guardar cada foto en  sucursales/  y en su tarjeta reemplazar

       <div class="branch__foto branch__foto--marca" aria-hidden="true"></div>
   por
       <div class="branch__foto">
         <img src="sucursales/nombre.jpg" alt="Frente de la sucursal de ..."
              width="827" height="465" loading="lazy" decoding="async">
       </div>

   Conviene pasarlas antes por el mismo revelado (recorte 16:9, balance
   de blancos, punto de negro y enfoque) para que no desentonen entre sí.
   ============================================================ */
/* position: la chapa de "la más cercana" se ancla acá */
.branch{overflow:hidden;position:relative}

/* Sangra hasta el borde de la tarjeta anulando su relleno */
.branch__foto{
  position:relative;
  aspect-ratio:16/9;
  margin:-28px -26px 22px;
  background:var(--navy-900);
  overflow:hidden;
}
.branch__foto img{
  width:100%;height:100%;
  object-fit:cover;
  /* el acercamiento al pasar el mouse le da vida sin mover el texto */
  transition:transform .8s var(--ease);
}
.branch:hover .branch__foto img{transform:scale(1.05)}

/* Un velo oscuro abajo: separa la foto del título que viene debajo y
   empareja fotos tomadas con luces distintas. */
.branch__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(1,32,63,.28));
  pointer-events:none;
}

/* --- Sucursales sin foto todavía ---
   Un panel de marca, no un hueco gris: se lee como una decisión y no
   como una imagen que no cargó. */
.branch__foto--marca{
  background:linear-gradient(140deg,var(--navy-950) 8%,var(--blue-700) 94%);
}
.branch__foto--marca::before{
  content:"";position:absolute;top:0;right:0;
  width:54%;aspect-ratio:550/575;
  background:url("swoosh.svg") right top / 100% auto no-repeat;
  filter:saturate(1.15) contrast(1.02);
  opacity:.46;
  -webkit-mask-image:linear-gradient(205deg,#000 22%,transparent 82%);
          mask-image:linear-gradient(205deg,#000 22%,transparent 82%);
}
.branch__foto--marca::after{
  content:"";position:absolute;left:50%;top:50%;
  width:34%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:url("isotipo.jpg") center / contain no-repeat;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),
             0 0 0 9px rgba(255,255,255,.05);
  transition:transform .6s var(--ease);
}
.branch:hover .branch__foto--marca::after{transform:translate(-50%,-50%) scale(1.05)}

/* La que abre próximamente lleva su cartel encima de la foto, no debajo:
   es lo primero que hay que saber de esa tarjeta. */
.branch--nueva .branch__nueva{
  position:absolute;z-index:2;
  top:14px;left:14px;
  margin-bottom:0;
  box-shadow:0 4px 12px rgba(1,32,63,.3);
}
.branch--nueva{position:relative}

@media (max-width:640px){
  .branch__foto{margin:-28px -26px 20px}
}

/* ============================================================
   CÓMO LLEGAR
   El enlace al mapa va en la tarjeta de cada sucursal, no en una
   sección aparte: "cómo llego" tiene que estar al lado de "dónde
   está", y una segunda lista de las mismas 8 direcciones sería
   contenido repetido.
   ============================================================ */
/* Los dos botones comparten renglón y el bloque entero se ancla al pie */
.branch__actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px;
  justify-items:initial;
}

/* Los teléfonos fijos salieron de las tarjetas de sucursal por pedido: eran
   una línea suelta debajo de dos de las ocho. Siguen figurando en el pie de
   la página, en la columna de contacto. */
/* Secundario a propósito: contorneado, no relleno. El pedido por WhatsApp
   sigue siendo la acción principal de la tarjeta y tiene que ganar. */
.branch__mapa{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:100px;
  border:1px solid var(--line);
  background:#fff;
  font-size:.87rem;font-weight:600;color:var(--blue-700);
  transition:border-color .25s,background .25s,color .25s,
             transform .25s var(--ease),box-shadow .25s;
}
.branch__mapa svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.branch__mapa:hover{
  border-color:var(--blue-700);
  background:var(--blue-100);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(1,56,127,.14);
}
.branch__mapa:active{transform:translateY(0) scale(.978)}

/* dentro de la tarjeta verde de "próximamente" el blanco no contrasta */
.branch--nueva .branch__mapa{background:#fff;border-color:var(--green-400)}

/* La sucursal que abre próximamente lleva una línea de texto donde las otras
   llevan botones. El bloque ya apoyaba parejo, pero el texto es la mitad de
   alto que un botón y quedaba más abajo dentro de su propio bloque. Con este
   relleno queda a la misma altura óptica que sus vecinas. */
.branch__pronto{
  display:inline-flex;align-items:center;
  min-height:41px;
  padding-block:9px;
}

/* ============================================================
   ¿CUÁL ME QUEDA MÁS CERCA?
   ============================================================ */
/* Antes era un botón fantasma, chico, debajo de un párrafo: el estilo más
   discreto de la página para la función que más se usa. Ahora es una franja
   propia, con su chincheta y su botón sólido. Se ve de una. */
.cercania{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 20px;
  margin-top:30px;
  padding:20px 24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
/* La chincheta roja es el único rojo de la página, y sólo significa
   "ubicación". Como acento chico funciona; de fondo grande competiría con
   el verde de WhatsApp, y rojo junto a verde es justo el par que no
   distingue una de cada doce personas con daltonismo. */
.cercania__pin{
  flex:none;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--rojo-mapa);
  box-shadow:0 4px 14px rgba(206,50,38,.32);
}
.cercania__pin svg{
  width:23px;height:23px;
  fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.cercania__texto{flex:1 1 260px;min-width:0}
.cercania__texto b{
  display:block;
  font-size:1.02rem;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);
}
/* Decirlo antes de pedirlo, no después: es la diferencia entre que
   acepten el permiso y que lo rechacen por las dudas. */
.cercania__texto span{
  display:block;margin-top:3px;
  font-size:.86rem;color:var(--ink-soft);
}
.cercania .btn{flex:none}

.cercania__aviso{
  margin-top:14px;
  font-size:.9rem;font-weight:600;color:var(--green-700);
}
.cercania__aviso--error{color:#B04A26;font-weight:500}

/* Distancia: va pegada a la dirección, que es lo que se está leyendo */
.branch__dist{
  align-self:flex-start;
  margin-top:8px;
  font-size:.82rem;font-weight:700;
  letter-spacing:.02em;
  color:var(--green-700);
  font-variant-numeric:tabular-nums;
}

/* La más cercana tiene que cantar. Se levanta de la grilla, lleva un aro
   de dos píxeles y una chapa roja con chincheta: el mismo rojo del botón,
   otra vez sólo para decir "ubicación". */
.branch--cerca{
  border-color:transparent;
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg),0 0 0 2px var(--blue-700);
}
/* .branch:hover pisa la sombra por especificidad y se llevaba el aro
   puesto: hay que repetirlo acá o al pasar el mouse se pierde el realce */
.branch--cerca:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg),0 0 0 2px var(--blue-700);
}

/* La chapa cuelga de la TARJETA, no del banner. En las sucursales sin foto
   el banner ya usa ::before para la curva de marca, y las dos cosas se
   peleaban por el mismo pseudo-elemento: salía azul y del ancho del panel.
   Colgada de .branch funciona igual con foto y sin foto. */
.branch--cerca::before{
  content:"La más cercana";
  position:absolute;z-index:3;top:14px;left:14px;
  padding:8px 16px 8px 34px;border-radius:100px;
  background:var(--rojo-mapa) no-repeat 12px 50% / 15px 15px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s6.8-6.2 6.8-10.7a6.8 6.8 0 1 0-13.6 0C5.2 15.3 12 21.5 12 21.5z'/%3E%3Ccircle cx='12' cy='10.4' r='2.5'/%3E%3C/svg%3E");
  color:#fff;
  font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 5px 16px rgba(206,50,38,.42);
}

/* Al aparecer, un aro que late tres veces y se apaga. Llama la atención
   una vez y después deja de molestar. */
.branch--cerca.branch--recien{animation:latido 1.5s var(--ease) 3}
@keyframes latido{
  0%  {box-shadow:var(--shadow-lg),0 0 0 2px var(--blue-700),0 0 0 0 rgba(1,56,127,.34)}
  70% {box-shadow:var(--shadow-lg),0 0 0 2px var(--blue-700),0 0 0 16px rgba(1,56,127,0)}
  100%{box-shadow:var(--shadow-lg),0 0 0 2px var(--blue-700),0 0 0 0 rgba(1,56,127,0)}
}

/* La distancia de la más cercana también sube de rango */
.branch--cerca .branch__dist{
  color:var(--blue-700);
  font-size:.92rem;
}

@media (max-width:640px){
  .cercania{gap:10px}
  .cercania .btn{width:100%}
}

/* ============================================================
   PORTADA OSCURA  (reemplaza a la clara con dos curvas)
   La foto del frente es nocturna. En vez de corregirla hacia el día,
   la portada se va al azul de marca y la foto se funde adentro: la
   cruz verde brilla contra el navy, y de paso la falta de resolución
   se disimula muchísimo más en una imagen nocturna que en una clara.
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(158deg,var(--navy-950) 0%,#02306B 46%,var(--blue-700) 100%);
  color:#fff;
}
/* las dos curvas de marca salen de la portada: la foto es el visual ahora */
.hero::before{display:none}
/* el ::after era el degradado blanco del pie; ahora es la textura de grano */
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grano);
  background-size:180px 180px;
  opacity:.07;
  mix-blend-mode:overlay;
  pointer-events:none;z-index:3;
}
.hero .swoosh{display:none}

/* --- La foto --- */
.hero__foto{
  position:absolute;top:0;right:0;bottom:0;
  width:47%;
  z-index:0;
  /* El borde izquierdo se disuelve para que la foto ENTRE en el azul en
     vez de apoyarse encima como un recorte pegado. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
}
.hero__foto img{
  width:100%;height:100%;
  object-fit:cover;
  /* 34% deja arriba la cruz y el cartel, y recorta la vereda de abajo */
  object-position:56% 34%;
}
/* Tinte azul encima: iguala la temperatura de la foto con el fondo y baja
   el contraste justo donde el titular podría acercarse. */
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    /* El pie se hunde en el azul: la franja de datos cruza todo el ancho y
       sin esto sus últimas columnas caían sobre la vidriera iluminada, que
       es la zona más clara de la foto. Además apoya la imagen abajo. */
    linear-gradient(180deg,rgba(1,32,63,0) 48%,rgba(1,32,63,.62) 74%,rgba(1,32,63,.93) 100%),
    linear-gradient(100deg,rgba(1,32,63,.94) 0%,rgba(1,44,98,.42) 42%,rgba(1,44,98,.14) 100%);
}

/* --- La columna de texto --- */
.hero__inner{
  position:relative;z-index:2;
  min-height:min(86vh,752px);
  display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;
  text-align:left;
  /* padding-block, NO el atajo padding: el atajo pone 0 a los costados y
     anula el margen lateral de .container, y el texto toca el borde */
  padding-block:clamp(72px,10vh,116px) clamp(34px,5vh,52px);
}
.hero__copy{max-width:min(100%,610px)}

.hero h1{
  font-size:clamp(2.7rem,6.4vw,4.9rem);
  line-height:1.03;letter-spacing:-.035em;
  margin-bottom:24px;
  color:#fff;
}
.hero h1 em{font-style:italic;color:var(--green-400)}
.hero .lead{
  color:rgba(255,255,255,.76);
  max-width:46ch;margin-inline:0;
}
.hero__actions{justify-content:flex-start;margin-top:38px}

/* La píldora de estado, sobre azul */
.hero .eyebrow{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* Cerrado es el estado que hay que ver: alguien que entra a las 3 de la
   mañana necesita enterarse enseguida. Antes quedaba MÁS apagado que
   "abierto", que es justo al revés de lo que hace falta.
   Ahora la píldora se llena de rojo. El salto de contraste es lo que llama
   la atención — no sólo el color — así que también funciona para quien no
   distingue el rojo del verde. Y el texto ya dice a qué hora abrimos. */
/* Mismo tamaño, mismo peso y mismo relleno que "abierto": lo único que
   cambia es el color. Lo que estaba mal antes era que el texto se
   apagaba justo cuando había que leerlo. */
.hero .eyebrow--cerrado{
  background:rgba(206,50,38,.2);
  border-color:rgba(206,50,38,.55);
  color:#fff;
}
.hero .eyebrow--cerrado i{
  background:var(--rojo-mapa);
  box-shadow:0 0 0 3px rgba(206,50,38,.28);
}

/* Azul sobre azul no existe: el botón principal pasa a blanco, y al pasar
   el mouse se va al verde de marca. */
.hero .btn--primary{
  background:#fff;color:var(--navy-900);
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.hero .btn--primary:hover{
  background:var(--green-400);color:var(--navy-950);
  box-shadow:0 16px 38px rgba(24,196,77,.32);
}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
.hero .btn--ghost:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}

/* --- La franja de confianza, ya sin tarjeta --- */
/* Sobre el azul, la tarjeta azul era una caja adentro de otra caja. */
.hero .stats{
  margin-top:clamp(44px,7vh,72px);
  background:none;
  border-radius:0;
  box-shadow:none;
  border-top:1px solid rgba(255,255,255,.17);
  padding:26px 0 0;
  overflow:visible;
}
.hero .stats::before,
.hero .stats::after{display:none}
.hero .stat + .stat{border-left-color:rgba(255,255,255,.15)}
.hero .stat span{color:rgba(255,255,255,.62)}

@media (max-width:1000px){
  /* Apilado no hay dos columnas: la foto pasa a ser el fondo de toda la
     portada, con un velo fuerte para que el texto se siga leyendo. */
  .hero__foto{
    width:100%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__foto img{object-position:58% 30%}
  .hero__foto::after{
    background:linear-gradient(180deg,rgba(1,32,63,.90) 0%,rgba(1,32,63,.78) 46%,rgba(1,32,63,.93) 100%);
  }
  .hero__copy{max-width:none}
  .hero__inner{min-height:min(88vh,700px)}
}

@media (max-width:640px){
  .hero h1{font-size:clamp(2.3rem,9vw,3rem)}
  .hero__inner{min-height:auto;padding-block:74px 40px}
  .hero .stats{margin-top:38px;padding-top:22px}
}

/* ============================================================
   ENVÍO DE CV
   El botón anterior era un mailto: y nada más. Ese enlace depende de
   que el visitante tenga un programa de correo configurado — quien usa
   Gmail en el navegador no tiene ninguno y el clic no hacía nada.
   ============================================================ */
.jobs__envio{
  flex:0 1 auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;
}
.jobs__etiqueta{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* La dirección es el elemento principal: se copia de un clic y eso
   funciona siempre, tenga lo que tenga instalado el visitante. */
.jobs__mail{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;
  padding:9px 9px 9px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;
  font-size:1rem;font-weight:600;color:var(--ink);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
/* user-select:all → un solo clic marca la dirección entera. Es el plan B
   cuando el navegador no permite copiar por código. */
.jobs__mail__texto{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  user-select:all;-webkit-user-select:all;
}
.jobs__copiar{
  flex:none;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:0;border-radius:10px;
  background:var(--paper);
  cursor:pointer;
  transition:background .25s,transform .2s var(--ease);
}
.jobs__copiar svg{
  width:18px;height:18px;
  fill:none;stroke:var(--blue-700);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.jobs__copiar:hover{background:var(--blue-100)}
.jobs__copiar:active{transform:scale(.92)}
.jobs__mail:hover{border-color:var(--blue-700);box-shadow:0 8px 20px rgba(1,56,127,.12)}
.jobs__mail.is-copiado{border-color:var(--green-500);background:var(--green-100)}
.jobs__mail.is-copiado .jobs__copiar{background:var(--green-100)}
.jobs__mail.is-copiado .jobs__copiar svg{stroke:var(--green-600)}

.jobs__aviso{font-size:.84rem;font-weight:600;color:var(--green-700)}
.jobs__botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}

@media (max-width:640px){
  .jobs__envio{width:100%}
  .jobs__mail{width:100%}
  .jobs__botones{width:100%}
  .jobs__botones .btn{flex:1 1 auto}
}

/* ============================================================
   FRANJA DE LAS OCHO
   Un solo panel arriba de las tarjetas con lo que vale para todas:
   el horario (que es el mismo) y el buscador de la más cercana. Antes
   eran dos bloques sueltos, y el de horarios estaba al final de la
   sección, después de ocho tarjetas con foto: se perdía.
   ============================================================ */
.franja{
  position:relative;overflow:hidden;isolation:isolate;
  /* Separación generosa a propósito: las tarjetas sin foto también tienen
     banner azul, y con poco aire la franja y la primera tarjeta se leían
     como una sola mancha azul. */
  margin-bottom:clamp(52px,7vw,76px);
  background:linear-gradient(125deg,var(--navy-900) 15%,var(--blue-700));
  border-radius:var(--r-xl);
  padding:clamp(28px,3.4vw,40px) clamp(24px,3vw,44px);
  color:#fff;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.09);
}
.franja::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grano);background-size:180px 180px;
  opacity:.06;mix-blend-mode:overlay;pointer-events:none;z-index:0;
}
.franja::after{
  content:"";position:absolute;bottom:-70%;left:-6%;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,196,77,.26),transparent 66%);
  pointer-events:none;z-index:0;
}
.franja > *{position:relative;z-index:1}

.franja__horarios{
  display:grid;
  /* La columna del encabezado necesita respirar: con la bajada completa,
     en 190 px el texto caía en tres renglones apretados. */
  grid-template-columns:minmax(235px,290px) 1fr;
  gap:26px 48px;align-items:center;
}
.franja .hours__head p{max-width:34ch}

/* --- El buscador, ahora dentro del panel oscuro --- */
/* Era una tarjeta blanca suelta; acá adentro una caja blanca sobre azul
   volvería a ser una caja dentro de otra. Se separa con un filete. */
.franja .cercania{
  margin-top:clamp(24px,3vw,32px);
  padding:clamp(22px,2.6vw,28px) 0 0;
  background:none;
  border:0;
  border-top:1px solid rgba(255,255,255,.16);
  border-radius:0;
  box-shadow:none;
}
.franja .cercania__texto b{color:#fff}
.franja .cercania__texto span{color:rgba(255,255,255,.66)}
.franja .cercania .btn--primary{
  background:#fff;color:var(--navy-900);
  box-shadow:0 10px 26px rgba(0,0,0,.26);
}
.franja .cercania .btn--primary:hover{
  background:var(--green-400);color:var(--navy-950);
  box-shadow:0 14px 32px rgba(24,196,77,.3);
}
.franja .cercania__aviso{flex:1 1 100%;margin-top:4px}
.franja .cercania__aviso{color:var(--green-400)}
.franja .cercania__aviso--error{color:#FFB4A2}

@media (max-width:820px){
  .franja__horarios{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  .franja{padding:24px 20px;border-radius:var(--r-lg)}
  .franja .cercania .btn{width:100%}
}

/* ============================================================
   JERARQUÍA DEL PANEL: PRIMERO EL BUSCADOR
   El horario ya se dice en la píldora de la portada y en el pie. El
   buscador de sucursal cercana no está en ningún otro lado y es lo
   único que se puede accionar acá — pero era el texto más chico del
   panel (16 px contra 27 del título de horarios). Se invierte.
   ============================================================ */
/* El buscador pasa a abrir el panel: se le saca el filete de arriba */
.franja .cercania{
  margin-top:0;
  padding-top:0;
  border-top:0;
  gap:18px 22px;
}
/* Ahora el titular del panel: mismo serif que los demás títulos */
.franja .cercania__texto b{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.35rem,2.3vw,1.75rem);
  line-height:1.14;
  letter-spacing:-.018em;
  margin-bottom:5px;
}
.franja .cercania__texto span{font-size:.92rem}
.franja .cercania__pin{width:54px;height:54px}
.franja .cercania__pin svg{width:26px;height:26px}
.franja .cercania .btn{padding:15px 30px;font-size:.97rem}

/* Y los horarios bajan de rango: pasan a ser la referencia, no el titular */
.franja__horarios{
  margin-top:clamp(24px,3vw,32px);
  padding-top:clamp(22px,2.6vw,28px);
  border-top:1px solid rgba(255,255,255,.16);
}
.franja .hours__head h3{
  font-family:var(--font-body);
  font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-400);
}
.franja .hours__head p{margin-top:9px;font-size:.88rem;max-width:30ch}
.franja .hours__list span{font-size:1.28rem}
.franja .hours__list li{padding:13px 17px}

/* En esa franja de anchos la barra ya tiene cinco enlaces más el botón y
   no entra uno más sin que se apelmace. El menú de hamburguesa todavía
   no entró (aparece a los 820) y abajo de esos anchos sí hay lugar, así
   que sólo acá se retira "Descuentos": la sección sigue en el pie. */
@media (min-width:821px) and (max-width:1040px){
  .nav__links a[href="#descuentos"]{display:none}
}