/* OftalmoVisión · home Escaparate
   Colores y tipografías medidos del manual de identidad v1 (págs. 4–5).
   Patrones: manual pág. 20; usos copiados de las piezas (portada, carta, bolígrafo, carnet, botón, agenda). */

:root{
  --magenta:#C1278E; --magenta-osc:#A51F79; --magenta-claro:#FCE4F2;
  --cielo:#3FB5FD; --navy:#092660; --gris:#F4F2F2; --blanco:#FFFFFF;
  --tinta:#1A1D24; --tinta2:#4E5563; --linea:#E4E1E1;
  --titulo:"Montserrat",system-ui,sans-serif;
  --texto:"Kumbh Sans",system-ui,sans-serif;
  --radio:22px; --gutter:48px;

  /* mosaicos sin costura: archivo y tamaño de una celda (≈ mitad del tamaño del manual) */
  --ov:url("marca/patrones/mosaico-ondas-ov.svg");                 --ov-t:54px 31.6px;
  --anillo:url("marca/patrones/mosaico-ojos-anillo.svg");          --anillo-t:140px 142.5px;
  --entre:url("marca/patrones/mosaico-ondas-entrelazadas.svg");    --entre-t:32px 30.5px;
  --abiertos:url("marca/patrones/mosaico-ojos-abiertos.svg");      --abiertos-t:68px 44.3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--nav-h) - 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanco);color:var(--tinta);font:17px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--titulo);margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px}
.saltar:focus{left:8px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== patrones =====
   .pat      → máscara: el patrón toma un solo color (background-color). Sólido y tono sobre tono.
   .pat-orig → el SVG con sus dos colores; con opacity baja queda pastel. */
.pat{-webkit-mask-repeat:repeat;mask-repeat:repeat}
.pat.ov{-webkit-mask-image:var(--ov);mask-image:var(--ov);-webkit-mask-size:var(--ov-t);mask-size:var(--ov-t)}
.pat.anillo{-webkit-mask-image:var(--anillo);mask-image:var(--anillo);-webkit-mask-size:var(--anillo-t);mask-size:var(--anillo-t)}
.pat.entre{-webkit-mask-image:var(--entre);mask-image:var(--entre);-webkit-mask-size:var(--entre-t);mask-size:var(--entre-t)}
.pat.abiertos{-webkit-mask-image:var(--abiertos);mask-image:var(--abiertos);-webkit-mask-size:var(--abiertos-t);mask-size:var(--abiertos-t)}
.pat-orig{background-repeat:repeat}
.pat-orig.ov{background-image:var(--ov);background-size:var(--ov-t)}
.pat-orig.anillo{background-image:var(--anillo);background-size:var(--anillo-t)}
.pat-orig.entre{background-image:var(--entre);background-size:var(--entre-t)}
.pat-orig.abiertos{background-image:var(--abiertos);background-size:var(--abiertos-t)}

/* dato que el cliente aún no confirma: se ve a propósito, para no publicar así */
.pend{outline:2px dashed var(--magenta);outline-offset:2px;border-radius:4px;background:var(--magenta-claro);color:var(--magenta-osc);padding:0 4px}
.sobre-color .pend{background:rgba(255,255,255,.18);color:#fff;outline-color:#fff}

/* ===== botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border:0;border-radius:999px;
  padding:13px 26px;font:700 15px/1.1 var(--titulo);text-decoration:none;cursor:pointer;transition:transform .15s,background-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:19px;height:19px;flex:none}
.btn.pri{background:var(--magenta);color:#fff}
.btn.pri:hover{background:var(--magenta-osc)}
.btn.sec{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.blanco{background:#fff;color:var(--magenta)}
.eyebrow{font:700 12px/1 var(--titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;line-height:1.05;color:var(--navy);letter-spacing:-.02em}
.lead{font-size:18.5px;color:var(--tinta2);max-width:44ch}

/* ===== encabezado ===== */
.cabecera{position:relative;overflow:hidden}
/* menú fijo arriba; al bajar se compacta. Arranca en la misma línea que el título de la portada */
:root{--nav-h:96px;--cinta-h:52px}
/* tres columnas: logo a la izquierda, enlaces centrados en la pantalla, botón a la derecha.
   Mismo margen a ambos lados para que el centro de los enlaces sea el centro real de la pantalla */
/* Las columnas de los lados nunca más angostas que lo que llevan: con 1fr iguales, el logo (más
   ancho que el botón) se salía de su columna y se montaba sobre el menú cuando el menú creció a 7
   opciones. Si todo cabe, el menú queda centrado igual que antes; si no, se corre hacia el lado
   del botón, que es el que tiene espacio. */
.nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;column-gap:32px;
  padding:24px clamp(var(--gutter),4vw,330px);
  background:rgba(255,255,255,.97);transition:padding .3s;
  /* sombra sutil que separa el menú de la portada; se mantiene igual al hacer scroll */
  box-shadow:0 1px 0 rgba(9,38,96,.06),0 6px 20px rgba(9,38,96,.06)}
.nav.fija{padding-top:14px;padding-bottom:14px}
@media (prefers-reduced-motion:reduce){.nav,.menu,.menu-btn span{transition:none!important}}
.nav>:first-child{justify-self:start}
.nav>:last-child{justify-self:end}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca .iso{height:40px;width:auto}.marca .logo{height:20px;width:auto}
.links{display:flex;justify-content:center;gap:40px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.links a{display:inline-flex;align-items:center;gap:10px;font:500 17px/1 var(--texto);white-space:nowrap;color:var(--navy);text-decoration:none;padding:8px 0}
/* íconos del manual (pág. 17) delante de cada enlace del menú */
.ico-menu{width:32px;height:32px;flex:none}
.links a:hover,.links a[aria-current="page"]{color:var(--magenta)}
/* contenedor del menú: en computador no existe como caja (la lista ocupa su columna de siempre);
   en celular es el panel que abre el botón ☰ */
.menu{display:contents}
.menu-wa,.menu-btn{display:none}

/* ===== hero Escaparate ===== */
/* botones de la portada más grandes: el llamado principal manda */
.hero .acciones .btn{min-height:58px;padding:17px 34px;font-size:17px}
.hero{position:relative;display:grid;grid-template-columns:1fr 1.05fr;min-height:calc(100vh - var(--nav-h) - var(--cinta-h));min-height:calc(100svh - var(--nav-h) - var(--cinta-h))}
/* margen izquierdo corto: el título usa el ancho de la columna y queda en dos líneas en pantallas grandes */
.hero .izq{position:relative;z-index:3;padding:48px var(--gutter) 110px clamp(var(--gutter),4vw,330px);display:flex;flex-direction:column;justify-content:center;gap:22px;align-items:flex-start}
/* el título se mide contra el ancho de su columna (cqi), no de la pantalla:
   ocupa ~80 % de la columna y se achica en proporción cuando la columna se angosta */
.hero .izq{container-type:inline-size}
.hero .titulo-hero{font-size:clamp(38px,11cqi,68px);font-weight:800;line-height:1.04;color:var(--navy);letter-spacing:-.025em;}
.hero .lead{font-size:clamp(16.5px,3.4cqi,19px)}
.hero .titulo-hero em{font-style:normal;color:var(--magenta)}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
/* diapositivas del texto: todas en la misma celda, así el alto es el de la más larga y nada salta al cambiar */
.diapos-txt{display:grid;width:100%}
.diapo-txt{grid-area:1/1;display:flex;flex-direction:column;gap:22px;align-items:flex-start;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
.diapo-txt.activa{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .15s,transform .5s ease .15s,visibility 0s}
/* controles: puntos + flechas + pausa (la pausa la exige WCAG 2.2.2 en todo lo que se mueve solo) */
.controles-hero{display:flex;align-items:center;gap:6px;margin-top:6px}
.controles-hero .ctl{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--navy);
  font:700 17px/1 var(--titulo);cursor:pointer;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--linea)}
.controles-hero .ctl:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.controles-hero .pausa{font-size:11px;letter-spacing:-1px;margin-left:6px}
.controles-hero .pausa[aria-pressed="true"] span{letter-spacing:0}
.puntos{display:flex;gap:2px}
.puntos button{width:30px;height:40px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.puntos button::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--linea);transition:width .3s ease,background .3s ease}
.puntos button[aria-current="true"]::before{width:24px;background:var(--magenta)}
@media (prefers-reduced-motion:reduce){
  .diapo-txt,.diapo-txt.activa,.hero .foto,.flotante,.flotante.oculta{transition:none;transform:none}
}
.nota-pie{font-size:14px;color:var(--tinta2)}
.hero .der{position:relative;overflow:hidden;border-radius:56px 0 0 0;background:var(--gris)}
/* fotos apiladas: cambian con fundido, las curvas y el logo quedan fijos encima */
.hero .fotos{position:absolute;inset:0}
.hero .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero .foto.activa{opacity:1}
/* contenedor superior + inferior (pág. 21): curvas que muerden la foto */
.hero .curva-cielo{position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;background:var(--cielo)}
.hero .curva-mag{position:absolute;left:-10%;right:-10%;bottom:-150px;height:250px;border-radius:50%;background:var(--magenta);
  display:flex;justify-content:center;align-items:flex-start;padding-top:22px}
.hero .curva-mag img{width:150px;height:auto;filter:brightness(0) invert(1)}

/* 3 · tarjeta flotante con ondas pastel (el botón blanco) */
.flotante{position:absolute;z-index:6;left:calc(50% - 150px);bottom:48px;width:300px;background:#fff;border-radius:var(--radio);
  padding:18px 22px 20px;box-shadow:0 18px 50px rgba(9,38,96,.16);border-top:5px solid var(--magenta)}
.flotante .dia{font:700 11.5px/1 var(--titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}
.flotante .estado{display:flex;align-items:center;gap:8px;margin-top:10px;font:700 17px/1.2 var(--titulo);color:var(--navy)}
/* ícono de WhatsApp como indicador: verde (abierto o sin horario configurado), gris si está cerrado */
.flotante .punto{width:32px;height:32px;flex:none;color:#25D366}
.flotante .punto.cerrado{color:#9AA3B2}
.flotante .detalle{font-size:14px;color:var(--tinta2);margin-top:4px}
/* la diapositiva puede no llevar tarjeta: se esconde sin soltar su espacio, para que nada salte */
.flotante{transition:opacity .4s ease,transform .4s ease,visibility 0s}
.flotante.oculta{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease,visibility 0s .4s}
.flotante .dir{font-size:14px;color:var(--tinta);margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}

/* ===== 2 · franja de datos: blanca y limpia, sin textura (sin textura) ===== */
/* la franja es parte de la portada: sin fondo propio, para que la textura pase por detrás */
.cinta{position:relative;z-index:2;background:transparent;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cinta ul{list-style:none;margin:0;min-height:var(--cinta-h);align-items:center;justify-content:center;padding:8px var(--gutter);display:flex;gap:10px 36px;flex-wrap:wrap}
.cinta li{font:700 15px/1.3 var(--titulo);color:var(--navy);display:flex;align-items:center;gap:10px}
.cinta li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--magenta)}

/* ===== servicios: rejilla asimétrica ===== */
.servicios{background:var(--gris);padding:84px var(--gutter) 92px}
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.cab .h2{max-width:18ch;margin-top:12px}
.rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-auto-rows:minmax(200px,auto);gap:16px}
.card{position:relative;background:#fff;border-radius:var(--radio);padding:24px;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.card .ico{width:64px;height:64px;margin-bottom:auto}
.card h3{font-size:19px;color:var(--navy);margin-top:18px}
.card p{font-size:15px;color:var(--tinta2)}
.card .esquina{position:absolute;top:-34px;right:-34px;width:150px;height:150px;border-radius:50%;opacity:.2}
/* el color de la esquina va en clase y no en style="": la CSP del sitio no permite estilos en línea */
.esquina.fondo-cielo{background:var(--cielo)}
.esquina.fondo-magenta{background:var(--magenta)}
.card.grande{grid-row:span 2;padding:0;min-height:420px;justify-content:flex-end}
.card.grande>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card.grande .pie{position:relative;background:var(--magenta);color:#fff;padding:24px 28px 26px;border-top-right-radius:120px;max-width:88%}
.card.grande .pie h3{color:#fff;font-size:25px;margin:0}
.card.grande .pie p{color:#FFE3F3;margin-top:4px}
.card.cielo{background:var(--cielo)}
.card.cielo h3,.card.cielo p{color:var(--navy)}
.card.cielo .esquina{background:#fff;opacity:.45}

/* ===== monturas y lentes: una tarjeta fija por marca (las publica la óptica desde el panel; ver marcas.js) ===== */
.monturas{padding:92px var(--gutter)}
.vitrina{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px}
@media (max-width:1100px){.vitrina{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* fondo neutro con el isotipo grande recortado, tono sobre tono (como el reverso de la tarjeta de presentación) */
.montura .fot{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:20px;background:var(--gris);overflow:hidden}
.montura .fot::before{content:"";position:absolute;width:150%;aspect-ratio:142/89;right:-62%;bottom:-38%;background:#E8E3E3;
  -webkit-mask:url("marca/isotipo.svg") center/contain no-repeat;mask:url("marca/isotipo.svg") center/contain no-repeat}
.montura .fot img{position:relative;width:64px;height:64px}
/* la foto de la marca llena la tarjeta; mientras baja, se ve el fondo con el isotipo */
.montura .fot .foto-marca{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.montura .fot .foto-marca:not([src]){visibility:hidden}
.montura .tag{position:absolute;left:12px;bottom:12px;font:700 10.5px/1 var(--titulo);letter-spacing:.1em;text-transform:uppercase;
  background:#fff;color:var(--tinta2);padding:6px 9px;border-radius:99px}
.montura h3{font-size:17px;color:var(--navy);margin-top:12px}
.montura p{font-size:14.5px;color:var(--tinta2)}
.vitrina-pie{margin-top:36px;font-size:16px;color:var(--tinta2)}
.vitrina-pie a{color:var(--magenta);font-weight:700;text-decoration:none;white-space:nowrap}
.vitrina-pie a:hover{text-decoration:underline}

/* enlace dentro de una tarjeta de servicio (p. ej. "Salud ocular" → /test-ojo-seco) */
.card-enlace{margin-top:10px;font:700 14px/1.3 var(--titulo);color:var(--magenta);text-decoration:none}
.card-enlace:hover{text-decoration:underline}

/* ===== dónde estamos: contacto Escaparate (mapa a sangre + tarjeta de horario encima) =====
   A la izquierda encabezado, formulario, datos y enlaces, en el ancho justo del formulario
   (560 + márgenes); el mapa con el horario se queda con el resto, sin hueco en medio.
   Un solo botón fuerte ("Enviar mensaje"); lo demás son enlaces discretos. */
.donde{display:grid;grid-template-columns:minmax(0,calc(560px + 2 * var(--gutter))) minmax(0,1fr);align-items:stretch;background:var(--gris)}
.donde-txt{padding:88px var(--gutter);display:flex;flex-direction:column;align-items:flex-start}
.donde-txt > *{width:100%;max-width:560px}
.donde .h2{margin-top:12px}
.donde-intro{font-size:17px;color:var(--tinta2);margin:12px 0 28px}
/* datos básicos, compactos */
.canales{list-style:none;margin:32px 0 0;padding:0;font-size:14.5px;color:var(--tinta2)}
.canales li{display:flex;gap:14px;padding:5px 0}
.canales b{flex:none;width:76px;font:700 13.5px/1.5 var(--titulo);color:var(--navy)}
.canales a{color:var(--magenta);font-weight:700;text-decoration:none}
/* Pedir cita y WhatsApp: enlaces de texto, no botones */
.donde-enlaces{display:flex;flex-wrap:wrap;gap:8px 28px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--linea)}
.donde-enlaces a{font:700 15px/1.4 var(--titulo);color:var(--magenta);text-decoration:none}
.donde-enlaces a:hover{color:var(--magenta-osc);text-decoration:underline;text-underline-offset:3px}
/* formulario de contacto: campos sobre el fondo gris, sin tarjeta */
.contacto-form .fila{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.contacto-form .campo{display:block;margin-bottom:14px}
.contacto-form .campo span{display:block;font:700 14px/1.3 var(--titulo);color:var(--navy);margin-bottom:6px}
.contacto-form .campo i{font-style:normal;font-weight:500;color:var(--tinta2)}
.contacto-form input:not([type=checkbox]),.contacto-form textarea{width:100%;min-height:48px;padding:11px 14px;border:2px solid #E1DCDC;border-radius:14px;
  font:16px/1.4 var(--texto);color:var(--tinta);background:#fff}
.contacto-form textarea{resize:vertical;min-height:110px}
.contacto-form input:focus,.contacto-form textarea:focus{outline:none;border-color:var(--navy)}
.contacto-form [aria-invalid="true"]{border-color:var(--magenta)}
.contacto-form .check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--tinta2);cursor:pointer;margin:4px 0 18px}
.contacto-form .check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--magenta)}
.contacto-form .check a{color:var(--magenta)}
.contacto-form .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contacto-form .estado{font-size:14.5px;font-weight:700;margin:0 0 14px;color:var(--magenta-osc)}
.contacto-form .estado.ok{color:#1E7A4C}
.contacto-form .estado a{color:inherit}
.contacto-form button[disabled]{opacity:.6;cursor:wait}
@media (max-width:560px){.contacto-form .fila{grid-template-columns:1fr}}
.mapa{position:relative;min-height:540px;overflow:hidden;border-top-left-radius:56px;background:#E6ECF2}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-falso{position:absolute;inset:0;background-color:#E6ECF2;
  background-image:linear-gradient(#D6DEE7 1px,transparent 1px),linear-gradient(90deg,#D6DEE7 1px,transparent 1px);background-size:48px 48px}
.mapa-falso .calle{position:absolute;background:#fff}
.mapa-falso .calle.h{left:0;right:0;top:44%;height:26px}
.mapa-falso .calle.v{top:0;bottom:0;left:58%;width:22px}
.mapa-falso .calle.d{left:-10%;width:130%;top:70%;height:16px;transform:rotate(-14deg)}
.mapa-falso .pin{position:absolute;left:calc(58% - 13px);top:calc(44% - 52px);width:48px;height:48px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--magenta);border:4px solid #fff;box-shadow:0 8px 20px rgba(193,39,142,.35)}
.horario-card{position:absolute;left:40px;bottom:40px;width:310px;background:#fff;border-radius:var(--radio);padding:20px 22px 22px;box-shadow:0 18px 50px rgba(9,38,96,.18)}
.horario-card .dia{font:700 11.5px/1 var(--titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-bottom:8px}
.horas div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:15px}
.horas div:last-child{border-bottom:0}
.horas b{font-family:var(--titulo);color:var(--navy)}
.horario-card .btn{margin-top:14px;min-height:42px;padding:10px 20px;font-size:14px}

/* ===== 7 · pie curvo (la carta) ===== */
.pie-sitio{position:relative;padding-top:120px;overflow:hidden}
.pie-sitio .ondas{position:absolute;left:0;right:0;top:0;height:200px;opacity:.22;
  -webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}
.pie-sitio .base{position:relative;background:var(--magenta);color:#fff;margin:0 -6%;
  padding:90px calc(6% + var(--gutter)) 36px;border-radius:50% 50% 0 0 / 90px 90px 0 0}
.pie-sitio .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;font-size:15px}
.pie-sitio h2{font:700 13px/1 var(--titulo);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;color:#FFD0EC}
.pie-sitio ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie-sitio a{text-decoration:none}.pie-sitio a:hover{text-decoration:underline}
.pie-sitio .redes a{display:inline-flex;align-items:center;gap:8px}
.pie-sitio .redes svg{width:18px;height:18px;flex:none}
.pie-sitio .logo-b{width:230px;filter:brightness(0) invert(1)}
.pie-sitio .legal a{color:#fff}
.pie-sitio .legal{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.28);font-size:13.5px;color:#FFE3F3;display:flex;gap:10px 24px;flex-wrap:wrap}

/* laptops angostas: el menú cabe en una línea */
/* pantallas medianas: todo un poco más compacto para que quepa centrado */
/* con 6 opciones (entró "Test ojo seco") los cortes se corrieron: este tramo antes llegaba a 1560 px */
@media (max-width:1680px) and (min-width:1281px){
  .links{gap:24px}   /* 24 y no 28: con 7 opciones, a 1501 px la barra se salía de la pantalla */
  .links a{font-size:16px}
  .ico-menu{width:28px;height:28px}
  .marca .iso{height:36px}.marca .logo{height:18px}
}
/* laptops de 1281–1500 px, como las de 1366: se aprieta un poco más, conservando los íconos */
@media (max-width:1500px) and (min-width:1281px){
  .nav{column-gap:20px}
  .links{gap:10px}   /* 10 y no 14: con 7 opciones, a 1281 px faltaban 20 px */
  .links a{font-size:15px;gap:6px}
  .ico-menu{width:22px;height:22px}
}
@media (max-width:1280px) and (min-width:901px){
  .nav{column-gap:20px}
  .marca .iso{height:32px}.marca .logo{height:16px}
  .links{gap:16px;flex-wrap:nowrap}
  .links a{font-size:14px;white-space:nowrap}
  .ico-menu{display:none}  /* en laptops angostas no caben: queda solo el texto */
}

/* hasta 1100 y no 1060: con 7 opciones, entre 1061 y 1075 px el menú cabía sin un píxel de sobra */
@media (max-width:1100px) and (min-width:901px){
  .nav{column-gap:14px}
  .links{gap:12px}
  .links a{font-size:13.5px}
  .marca .logo{height:14px}
  .nav .btn{min-height:42px;padding:10px 16px;font-size:14px}
  .links .externo{display:none}  /* siguen en el pie */
  .cinta li{font-size:13.5px}
  .cinta ul{gap:6px 22px}
}

/* en pantallas medianas la tarjeta se monta completa sobre la foto para no tapar el texto */
@media (max-width:1600px) and (min-width:901px){
  .flotante{left:calc(48.8% + 28px)}
}

/* ===== tableta y celular ===== */
@media (max-width:1100px){
  .rejilla{grid-template-columns:1fr 1fr}
  .card.grande{grid-column:span 2;grid-row:auto;min-height:340px}
  .donde{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gutter:20px}
  :root{--nav-h:68px}  /* alto real del menú en celular: 14 + 40 + 14 */
  .nav{display:flex;padding:14px var(--gutter);justify-content:space-between;flex-wrap:nowrap;gap:12px}
  .marca .iso{height:26px}.marca .logo{height:13px}
  .nav.fija{padding-top:12px;padding-bottom:12px}
  .nav .btn{min-height:40px;padding:9px 16px;font-size:13.5px}
  /* menú del celular: botón ☰ (40 px, igual que "Pedir mi cita", para no cambiar el alto del menú) */
  .nav-der{display:flex;align-items:center;gap:10px}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;padding:0;border:0;border-radius:50%;
    background:transparent;color:var(--navy);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--linea)}
  .menu-btn span{grid-area:1/1;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .menu-btn span:nth-child(1){transform:translateY(-6px)}
  .menu-btn span:nth-child(3){transform:translateY(6px)}
  /* abierto, las tres rayas se vuelven una X */
  .nav.abierto .menu-btn{box-shadow:inset 0 0 0 1.5px var(--navy)}
  .nav.abierto .menu-btn span:nth-child(1){transform:rotate(45deg)}
  .nav.abierto .menu-btn span:nth-child(2){opacity:0}
  .nav.abierto .menu-btn span:nth-child(3){transform:rotate(-45deg)}
  /* el panel baja desde el menú y llena el resto de la pantalla; cerrado no se ve ni recibe el foco */
  .menu{display:flex;flex-direction:column;gap:28px;position:absolute;top:100%;left:0;right:0;
    height:calc(100vh - 100%);height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;
    padding:8px var(--gutter) 32px;background:#fff;border-top:1px solid var(--linea);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
  .nav.abierto .menu{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
  .links{flex-direction:column;gap:0}
  .links li{border-bottom:1px solid var(--linea)}
  .links a{display:flex;gap:16px;padding:16px 4px;font:600 19px/1.2 var(--titulo);white-space:normal}
  .ico-menu{width:36px;height:36px}
  .nav .menu-wa{display:flex;min-height:52px;padding:14px 22px;font-size:16px}
  /* con el menú abierto, la página de atrás no se desplaza */
  body.menu-abierto{overflow:hidden}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .izq{padding:24px var(--gutter) 40px}
  .hero .der{height:68svh;min-height:360px;margin-left:var(--gutter);border-radius:40px 0 0 0}
  /* las piezas de la marca a la escala de la foto, no de la pantalla grande:
     el círculo es el 40 % del ancho y asoma solo su esquina */
  .hero .curva-cielo{width:40%;height:auto;aspect-ratio:1;right:0;top:0;transform:translate(40%,-40%)}
  /* la tarjeta se monta 46 px sobre la foto; la curva sube para que el logo se vea completo y no solo el ícono */
  .hero .curva-mag{left:-12%;right:-12%;height:210px;bottom:-92px;padding-top:14px}
  .hero .curva-mag img{width:104px}
  .flotante{position:relative;left:auto;bottom:auto;width:auto;margin:-46px var(--gutter) 0}
  .cinta ul{padding:14px var(--gutter);flex-direction:column;align-items:center;gap:6px}
  .servicios,.monturas{padding-top:64px;padding-bottom:64px}
  .donde-txt{padding-top:64px;padding-bottom:40px}
  .mapa{min-height:420px;border-top-left-radius:40px;margin-left:var(--gutter)}
  .horario-card{left:16px;right:16px;bottom:16px;width:auto}
  .rejilla{grid-template-columns:1fr}
  .vitrina{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .card.grande{grid-column:auto}
  .pie-sitio .cols{grid-template-columns:1fr 1fr}
  .pie-sitio .cols>div:first-child{grid-column:span 2}
}

/* ===== celular: la portada en dos pantallas =====
   Primero el texto a pantalla completa; al bajar, la foto. De la foto asoman 40 px
   al final de la primera pantalla como pista de que la página sigue. */
@media (max-width:600px){
  .hero .izq{min-height:calc(100vh - var(--nav-h) - 40px);min-height:calc(100svh - var(--nav-h) - 40px);padding:28px var(--gutter) 24px}
  /* el texto se centra en el alto que sobra y los controles del carrusel quedan al fondo */
  .hero .diapos-txt{margin-block:auto}
  .controles-hero{align-self:center;margin-top:0}
  .hero .titulo-hero{font-size:clamp(38px,12.5cqi,56px)}
  /* botones del mismo ancho, lado a lado; si el texto de un banner es largo, cada uno baja a su línea */
  .hero .acciones{width:100%}
  .hero .acciones .btn{flex:1 1 auto;min-height:54px;padding:15px 22px;font-size:16px}
  /* foto con arco (tarjeta grande de servicios): el arco magenta baja para que se vea más la foto.
     El título traía el interlineado del cuerpo (1.6) y en dos líneas inflaba el bloque */
  .card.grande{min-height:360px}
  .card.grande .pie{padding:18px 22px 20px;border-top-right-radius:80px;max-width:86%}
  .card.grande .pie h3{font-size:21px;line-height:1.15}
  .card.grande .pie p{font-size:14px;line-height:1.45}
}

/* celulares angostos (360–400 px): logo, "Pedir mi cita" y ☰ caben en una línea sin salirse */
@media (max-width:400px){
  .nav{gap:8px}
  .marca{gap:7px}
  .marca .iso{height:24px}.marca .logo{height:11.5px}
  .nav-der{gap:8px}
  .nav-der .btn{padding:9px 13px;font-size:13px}   /* solo el de arriba, no el de WhatsApp del panel */
  .menu-btn{width:38px;height:38px}
}
/* los más angostos (320–359 px: iPhone SE de primera generación, Android pequeños): con lo de
   arriba la barra pide ~347 px, y el botón se partía en dos líneas montado sobre el logo. Aquí
   pide ~309. nowrap y flex-shrink:0 para que, si algún día no cabe, se note y no se aplaste el logo */
@media (max-width:359px){
  .nav{padding-left:16px;padding-right:16px;gap:6px}
  .marca{gap:6px;flex-shrink:0}
  .marca .iso{height:22px}.marca .logo{height:10px}
  .nav-der{gap:6px}
  .nav-der .btn{padding:9px 11px;font-size:12.5px;white-space:nowrap}
  .menu-btn{width:36px;height:36px}
}

/* ===== novedades ===== (lo arma novedades.js)
   En el inicio, un carril de tarjetas propias con lo que la óptica elige en el panel. El perfil
   de Instagram detrás de una fachada de marca ya no va en el inicio: sus estilos (rejilla,
   perfil, fachada) quedan para la página /novedades. Los reproductores de las redes solo
   existen dentro del <dialog>, después del clic. */
.novedades{padding:92px var(--gutter)}
/* página /novedades: perfil a la izquierda, no más ancho que el embed de Instagram (~540 px); tarjetas a la derecha */
.nov-rejilla{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:32px;align-items:start}
.nov-rejilla.solo-perfil{grid-template-columns:minmax(0,560px);justify-content:center}
.nov-rejilla.solo-lista{grid-template-columns:minmax(0,1fr)}

.nov-perfil{background:var(--gris);border-radius:var(--radio);padding:24px}
.nov-perfil h3{font-size:20px;color:var(--navy)}
.nov-sub{font-size:15px;color:var(--tinta2);margin:4px 0 18px}
/* la fachada: degradado de marca, sin nada de Instagram hasta que se pulse el botón */
.nov-fachada{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:420px;padding:32px 24px;
  border-radius:16px;text-align:center;color:#fff;background:linear-gradient(160deg,var(--magenta) 0%,var(--navy) 100%)}
.nov-ig{width:56px;height:56px}
.nov-usuario{font:700 18px/1.2 var(--titulo)}
.nov-fachada p:not(.nov-usuario){max-width:34ch;font-size:15px;line-height:1.5;color:#FFE3F3}
.nov-fachada .btn{max-width:100%;margin-top:4px}
/* sobre el degradado oscuro el anillo navy del foco no se ve (≈1,2:1): aquí va blanco (de 9 a 12:1) */
.nov-fachada .btn:focus-visible{outline-color:#fff}
/* el embed del perfil: alto inicial de respaldo; Instagram manda el real (MEASURE) y novedades.js lo aplica */
.nov-marco-perfil{display:block;width:100%;height:560px;border:0;border-radius:16px;background:#fff}
.nov-privacidad{margin-top:12px;font-size:13px;line-height:1.5;color:var(--tinta2)}
.nov-privacidad a{color:var(--navy);font-weight:700}

/* el aviso de privacidad y, con mouse o en pantalla ancha, las flechas. Van ANTES del carril: el
   aviso se lee antes de cualquier tarjeta, y pulsar una (su foto o su botón) es la forma de
   aceptar la conexión */
.nov-barra{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:18px}
.nov-barra .nov-privacidad{margin:0;max-width:72ch}
.nov-flechas{display:flex;gap:8px;flex:none}
/* el círculo navy de la vitrina de monturas de antes (.flecha-btn, que ya no está en este archivo).
   Apagada en los extremos con aria-disabled, no con disabled, para no soltar el foco */
.nov-flecha{display:grid;place-items:center;width:46px;height:46px;padding:0 0 3px;border:2px solid var(--navy);border-radius:50%;
  background:#fff;color:var(--navy);font:700 26px/1 var(--titulo);cursor:pointer;transition:background-color .15s,color .15s,opacity .15s}
.nov-flecha:hover{background:var(--navy);color:#fff}
/* apagada con color y no con opacity: la opacidad también borraría el anillo del foco, y el foco
   se queda en la flecha al llegar al extremo */
.nov-flecha[aria-disabled="true"]{cursor:default;background:#fff;color:rgba(9,38,96,.3);border-color:rgba(9,38,96,.3)}

/* el carril: una fila que se desliza de lado y se detiene al comienzo de cada tarjeta. Nada se
   mueve solo. 4 a la vista desde 1024 px (sin pasar de 360 px: la foto mide 720 y en pantallas
   muy anchas se vería borrosa); 3 entre 900 y 1023; tableta: ~45 %; celular: ~75 %, para que
   asome la siguiente y se note que hay más. Barra fina y discreta; en el celular ni se ve.
   Por ese tope, el bloque (aviso, flechas y carril) no pasa de 1500 px = 4 × 360 + 3 × 20 de
   separación: más ancho, desde unos 1600 px de ventana, asomaba el 80 % de una 5.ª tarjeta
   cortada contra el borde. El número va escrito porque --nov-gap vive en .nov-lista.
   position:relative no es adorno: sin eso, el título oculto (.vh, absoluto) de los botones de
   las tarjetas que no se ven escapa del carril y le da scroll de lado a la página entera */
.nov-eventos{max-width:1500px}
.nov-lista{--nov-gap:20px;position:relative;list-style:none;margin:0;padding:0 0 14px;display:grid;grid-auto-flow:column;
  grid-auto-columns:min(calc((100% - 3 * var(--nov-gap)) / 4),360px);gap:var(--nov-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:#CFCACA transparent}
.nov-lista::-webkit-scrollbar{height:6px}
.nov-lista::-webkit-scrollbar-thumb{background:#CFCACA;border-radius:99px}
@media (prefers-reduced-motion:reduce){.nov-lista{scroll-behavior:auto}}
@media (max-width:899px){.nov-lista{--nov-gap:16px;grid-auto-columns:45%}}
@media (max-width:600px){.nov-lista{--nov-gap:14px;grid-auto-columns:75%}}
/* portátil con la ventana a dos tercios o tableta acostada: con el gutter de 48 px, cuatro
   tarjetas quedaban de ~183 px (menos que en un celular de 320) y "Ver en Instagram" se partía
   en dos líneas mientras "Ver en TikTok" no, y los botones dejaban de quedar parejos */
@media (min-width:900px) and (max-width:1023px){.nov-lista{grid-auto-columns:calc((100% - 2 * var(--nov-gap)) / 3)}}

/* tarjeta vertical: foto 4:5 arriba; debajo fecha · lugar, título, texto y el botón. El texto
   crece y empuja el botón al fondo, así los botones del carril quedan en la misma línea */
.nov-tarjeta{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;padding:10px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio)}
/* la foto también abre el reproductor (novedades.js); el botón "Ver en …" sigue siendo el control
   para el teclado y el lector de pantalla */
.nov-foto{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--gris);cursor:pointer}
.nov-foto::before{content:"";position:absolute;width:150%;aspect-ratio:142/89;right:-62%;bottom:-24%;background:#E8E3E3;
  -webkit-mask:url("marca/isotipo.svg") center/contain no-repeat;mask:url("marca/isotipo.svg") center/contain no-repeat}
.nov-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nov-foto img:not([src]){visibility:hidden}
/* la red de origen, siempre a la vista (YouTube lo exige en toda miniatura que lleve a sus videos) */
.nov-red{position:absolute;left:8px;top:8px;padding:6px 9px;border-radius:999px;background:rgba(9,38,96,.88);color:#fff;
  font:700 11px/1 var(--titulo);letter-spacing:.04em}
/* ▶ en las que son video: avisa a la vista (aria-hidden) y se pulsa con la foto; el control
   accesible es el botón "Ver en …" */
.nov-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(9,38,96,.72);box-shadow:0 6px 18px rgba(9,38,96,.3)}
.nov-play::before{content:"";position:absolute;left:23px;top:18px;width:18px;height:22px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.nov-txt{flex:1 1 auto;min-width:0;padding:14px 6px 0;overflow-wrap:anywhere}
.nov-cuando{margin-bottom:6px;font:700 12.5px/1.35 var(--titulo);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta)}
.nov-tarjeta h3{font-size:18px;line-height:1.25;color:var(--navy)}
.nov-texto{margin-top:6px;font-size:15px;line-height:1.5;color:var(--tinta2)}
.nov-ver{margin:16px 6px 6px;min-height:44px;padding:10px 18px;font-size:14px}

/* el diálogo: cabecera fija y cuerpo que se desplaza. La cabecera no se monta sobre el iframe al
   desplazar, porque YouTube prohíbe cualquier cosa encima de su reproductor */
.nov-dialogo{width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  padding:0;border:0;border-radius:20px;overflow:hidden;background:#fff;color:var(--tinta);box-shadow:0 24px 70px rgba(9,38,96,.35)}
.nov-dialogo[open]{display:flex;flex-direction:column}
.nov-dialogo.ancho{width:min(880px,calc(100vw - 32px))}        /* YouTube 16:9 */
.nov-dialogo.vertical{width:min(380px,calc(100vw - 16px))}     /* TikTok, Shorts y Facebook vertical, 9:16 */
.nov-dialogo::backdrop{background:rgba(9,38,96,.72)}
.nov-dlg-cab{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--linea)}
.nov-dlg-titulo{min-width:0;font-size:16px;font-weight:700;line-height:1.3;color:var(--navy);overflow-wrap:anywhere}
.nov-cerrar{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--gris);color:var(--navy);font:400 28px/1 var(--texto);cursor:pointer}
.nov-cerrar:hover{background:var(--linea)}
.nov-dlg-cuerpo{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px;display:grid;justify-items:center}
.nov-dlg-cuerpo iframe{display:block;width:100%;border:0;background:#fff}
.nov-dlg-cuerpo .ig{height:560px}                                              /* hasta que llegue su MEASURE */
/* Los verticales se angostan en ventanas bajas para caber de alto con su barra de controles (en
   una portátil de 1366 × 768 quedaba escondida). 128 px = 32 de margen del diálogo + 65 de
   cabecera + 24 de relleno + holgura para el redondeo. La línea con vh es el respaldo de dvh */
.nov-dlg-cuerpo .tt{width:clamp(300px,100%,340px);width:clamp(300px,min(100%,calc((100vh - 128px) * 9 / 16)),340px);
  width:clamp(300px,min(100%,calc((100dvh - 128px) * 9 / 16)),340px);height:auto;aspect-ratio:9/16;background:#000}   /* TikTok: nunca menos de 300 px */
.nov-dlg-cuerpo .yt{height:auto;aspect-ratio:16/9;min-height:200px;background:#000}                /* YouTube: mínimo 200 × 200 */
.nov-dlg-cuerpo .yt.short,.nov-dlg-cuerpo .fb.vertical{max-width:340px;max-width:min(340px,calc((100vh - 128px) * 9 / 16));
  max-width:min(340px,calc((100dvh - 128px) * 9 / 16));min-width:200px;aspect-ratio:9/16}
/* Facebook: horizontal 16:9 como YouTube y vertical 9:16 como un Short (arriba). Lo decide el
   formato que marca el panel, no si el enlace es de reel (novedades.js). El plugin no baja de 220 px */
.nov-dlg-cuerpo .fb{height:auto;aspect-ratio:16/9;background:#000}
.nov-dlg-cuerpo .fb.vertical{min-width:220px}
.nov-respaldo{padding:28px 16px;text-align:center;color:var(--tinta2)}
.nov-respaldo a{color:var(--magenta);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .nov-dialogo[open]{animation:nov-entra .22s ease-out}
  .nov-dialogo[open]::backdrop{animation:nov-fundido .22s ease-out}
}
@keyframes nov-entra{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes nov-fundido{from{opacity:0}}

@media (max-width:1100px){
  /* página /novedades, una columna: el perfil centrado y con el ancho del embed; las tarjetas debajo */
  .nov-rejilla,.nov-rejilla.solo-perfil{grid-template-columns:minmax(0,1fr)}
  .nov-perfil{justify-self:center;width:100%;max-width:560px}
}
@media (max-width:900px){
  .novedades{padding-top:64px;padding-bottom:64px}
  .nov-perfil{padding:18px}
  .nov-fachada{min-height:360px;padding:28px 18px}
}
/* celular angosto: la tarjeta mide unos 210-300 px, el texto un poco más chico */
@media (max-width:480px){
  .nov-tarjeta h3{font-size:16.5px}
  .nov-texto{font-size:14.5px}
  /* sin la tarjeta gris: el embed del perfil gana el ancho de su relleno (Instagram lo pensó para 326 px o más) */
  .nov-perfil{padding:0;background:none;border-radius:0}
}
/* hasta 400 px el cuerpo del diálogo va sin margen lateral: el reproductor de TikTok no baja de 300 px */
@media (max-width:400px){
  .nov-dlg-cuerpo{padding:8px 0}
}