/* Optilen · estilos de la landing
   Colores del manual de marca: rojo #E0040B, grises. El azul #2850A0 es solo para audiología. */

@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --rojo:#E0040B;
  --texto:#2A2D31;
  --sec:#5C666C;
  --claro:#F4F5F6;
  --linea:#E6E8EA;
  --linea-fuerte:#C9CED2;
  --azul:#2850A0;
  --wa:#25D366;
  --blanco:#fff;
  --ancho:1120px;
  /* curva del isotipo (manual de marca) para el borde inferior de las fotos grandes */
  --iso:polygon(0% 0%, 100% 0%, 100.0% 88.16%, 97.5% 89.80%, 95.0% 91.26%, 92.5% 92.57%, 90.0% 93.74%, 87.5% 94.78%, 85.0% 95.70%, 82.5% 96.50%, 80.0% 97.21%, 77.5% 97.82%, 75.0% 98.34%, 72.5% 98.78%, 70.0% 99.15%, 67.5% 99.44%, 65.0% 99.67%, 62.5% 99.84%, 60.0% 99.95%, 57.5% 100.00%, 55.0% 100.00%, 52.5% 99.94%, 50.0% 99.84%, 47.5% 99.68%, 45.0% 99.48%, 42.5% 99.23%, 40.0% 98.93%, 37.5% 98.58%, 35.0% 98.19%, 32.5% 97.75%, 30.0% 97.27%, 27.5% 96.75%, 25.0% 96.18%, 22.5% 95.57%, 20.0% 94.91%, 17.5% 94.22%, 15.0% 93.49%, 12.5% 92.72%, 10.0% 91.92%, 7.5% 91.09%, 5.0% 90.24%, 2.5% 89.36%, 0.0% 88.46%);
  --lado:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texto);line-height:1.55;background:var(--blanco);font-size:16px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--texto);outline-offset:3px;border-radius:6px}
.audiologia a:focus-visible{outline-color:#fff}
[id]{scroll-margin-top:90px}

.salto{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--texto);color:#fff;padding:10px 16px;border-radius:8px}
.salto:focus{left:12px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:20px;height:20px;flex:none;fill:currentColor}
.ico-linea{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}

.contenedor{max-width:var(--ancho);margin:0 auto}
.sec{padding:clamp(32px,5vw,72px) var(--lado) clamp(48px,7vw,96px)}
.sec--claro{background:var(--claro)}

h2{font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-.01em;line-height:1.1}
h3{font-size:20px;font-weight:600;line-height:1.3}
.bajada{margin-top:16px;font-size:18px;color:var(--sec);max-width:52ch}

/* Curvas de marca */
.curva{display:block;margin-top:14px;width:66px;height:20.7px}
.curva use{fill:var(--rojo)}
.curva--blanca use{fill:#fff}
.curva--centro{margin-left:auto;margin-right:auto}
@keyframes trazo{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.trazo{stroke-dasharray:100;stroke-dashoffset:100;animation:trazo 2.2s .4s cubic-bezier(.45,0,.2,1) forwards}
@supports (animation-timeline:view()){
  .curva{view-timeline-name:--curva}
  .trazo-scroll{stroke-dasharray:100;stroke-dashoffset:100;animation:trazo linear both;animation-timeline:--curva;animation-range:entry 30% cover 55%}
}
/* Navegadores sin animación por scroll: la curva se dibuja una vez al entrar en pantalla (lo activa main.js) */
.js-trazo .trazo-scroll{stroke-dasharray:100;stroke-dashoffset:100}
.js-trazo .curva.visto .trazo-scroll{animation:trazo 1.6s cubic-bezier(.45,0,.2,1) forwards}
@media (prefers-reduced-motion:reduce){
  .trazo,.trazo-scroll,.js-trazo .trazo-scroll{animation:none!important;stroke-dashoffset:0!important}
}

/* Olas entre secciones */
.ola{line-height:0;margin-bottom:-1px;background:var(--de,#fff);color:var(--a,#fff)}
.ola svg{display:block;width:100%;height:clamp(28px,4vw,56px)}
.ola path{fill:currentColor}
.ola--gris-a-blanco{--de:var(--claro);--a:#fff}
.ola--blanco-a-gris{--de:#fff;--a:var(--claro)}
.ola--azul-a-blanco{--de:var(--azul);--a:#fff}

/* Botones */
.boton{display:inline-flex;align-items:center;gap:10px;background:var(--rojo);color:#fff;padding:15px 28px;border-radius:999px;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;min-height:48px;border:2px solid var(--rojo);transition:opacity .2s}
.boton:hover{opacity:.88}
.boton--ig{background:#fff;color:var(--rojo)}
.boton--azul{background:#fff;color:var(--azul);border-color:#fff}
.boton--chico{padding:12px 22px;font-size:15px;min-height:44px}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* Encabezado */
.encabezado{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--linea);transition:transform .35s ease}
.encabezado.oculto{transform:translateY(-100%)}
.encabezado .contenedor{padding:10px var(--lado);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-cab{height:clamp(60px,7vw,80px);width:auto}

/* Portada */
.portada{padding:clamp(40px,7vw,88px) var(--lado) clamp(40px,6vw,72px)}
.portada .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:48px}
.portada-texto{flex:1 1 380px;max-width:560px}
.desde{margin-bottom:18px;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
h1{font-size:clamp(34px,4.6vw,56px);font-weight:500;letter-spacing:-.025em;line-height:1.06}
.portada .curva{width:170px;height:53.4px;max-width:50%;margin-top:20px}
.portada-bajada{margin-top:24px;font-size:19px;color:var(--sec);max-width:46ch}
.portada-foto{flex:0 1 440px;width:100%;max-width:440px;aspect-ratio:440/580;object-fit:cover;border-radius:20px 20px 0 0;clip-path:var(--iso)}

/* Sin turno / con turno */
.turnos{padding:0 var(--lado) clamp(48px,7vw,88px)}
.turnos .contenedor{border-top:1px solid var(--linea);padding-top:32px;display:flex;flex-wrap:wrap;gap:24px 64px}
.turnos p{flex:1 1 300px;max-width:52ch;color:var(--sec)}
.turnos strong{display:block;color:var(--texto);font-weight:600}

/* Contactología */
.escalera{display:grid;grid-template-columns:1fr;gap:36px 24px;margin-top:48px}
@media (min-width:600px){.escalera{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .escalera{grid-template-columns:repeat(4,1fr)}
  .escalera>div:nth-child(2){margin-top:36px}
  .escalera>div:nth-child(3){margin-top:72px}
  .escalera>div:nth-child(4){margin-top:108px}
}
.escalera img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.escalera h3{margin:16px 0 4px}
.escalera h3 span{color:var(--sec);font-weight:500;margin-right:.6em}
.escalera p{color:var(--sec);max-width:34ch}
.sec .acciones.tras{margin-top:48px}
.nota{color:var(--sec)}

/* Audiología */
.degrade-azul{height:clamp(120px,16vw,200px);background:linear-gradient(to bottom,#fff 0%,rgba(40,80,160,.03) 20%,rgba(40,80,160,.12) 40%,rgba(40,80,160,.32) 60%,rgba(40,80,160,.62) 80%,var(--azul) 100%)}
.audiologia{background:var(--azul);color:#fff;padding:clamp(24px,4vw,56px) var(--lado) clamp(56px,8vw,104px)}
.audiologia .contenedor{display:flex;flex-wrap:wrap;gap:48px 72px}
.audio-intro{flex:1 1 340px;max-width:480px}
.audiologia h2{font-size:clamp(32px,4.4vw,54px);line-height:1.08}
.audio-intro .grande{margin-top:20px;font-size:19px;line-height:1.5;max-width:40ch}
.audio-intro .minutos{margin-top:20px}
.audio-intro .boton{margin-top:32px}
.audio-lista{flex:1 1 400px;align-self:center;border-bottom:1px solid rgba(255,255,255,.35)}
.audio-lista div{padding:20px 0;border-top:1px solid rgba(255,255,255,.35)}
.audio-lista h3{margin-bottom:4px}

/* Taller */
.taller-grilla{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px 24px}
.taller-grilla img,.taller-grilla video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--linea)}
.corte-quieta{display:none!important}
@media (prefers-reduced-motion:reduce){.corte-video{display:none!important}.corte-quieta{display:block!important}}
.taller-grilla h3{margin:16px 0 4px;font-size:19px}
.taller-grilla p{color:var(--sec);max-width:34ch}
.taller .bajada+.bajada{margin-top:12px}

/* Tiempos */
.tiempos{background:var(--claro);padding:clamp(24px,3.5vw,48px) var(--lado) clamp(36px,5vw,64px);text-align:center}
.tiempos .contenedor{max-width:1040px}
.tiempos .reloj{display:block;margin:0 auto 14px;width:48px;height:48px;color:var(--rojo)}
.tiempos h2{font-size:clamp(28px,3.6vw,40px)}
.tiempos-grilla{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 40px}
.tiempos-grilla div{padding-top:18px;border-top:1px solid var(--linea-fuerte)}
.tiempos-grilla .dato{font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-.025em;line-height:1;color:var(--rojo)}
.tiempos-grilla .que{margin-top:12px;font-size:17px;color:var(--sec)}
.tiempos .pie-nota{margin-top:22px;font-size:15px;color:var(--sec)}

/* Cristales */
.cristales .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:40px 64px}
.cristales-foto{flex:0 1 360px;width:100%;max-width:360px;aspect-ratio:1/1;object-fit:cover;border-radius:20px 20px 0 0;clip-path:var(--iso)}
.cristales-texto{flex:1 1 360px;max-width:560px}
.cristales-lista{margin-top:24px;border-bottom:1px solid var(--linea)}
.cristales-lista p{padding:14px 0;border-top:1px solid var(--linea);color:var(--sec)}
.cristales-lista strong{color:var(--texto);font-weight:600}
.cristales-lista small{display:block;margin-top:6px;font-size:16px}
.cristales .boton{margin-top:28px}
.separador{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.separador div{border-top:1px solid var(--linea)}

/* Armazones */
.armazones-fotos{margin-top:32px;max-width:780px;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.armazones-fotos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#fff;border:1px solid var(--linea)}
.armazones .acciones{margin-top:32px}
.armazones .bajada+.bajada{margin-top:12px}

/* Reseñas */
.estrellas{color:var(--rojo);letter-spacing:2px}
.puntaje{margin-top:16px;font-size:18px;color:var(--sec)}
.resenas{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px 40px}
.resenas figure{padding-top:16px;border-top:1px solid var(--linea-fuerte)}
.resenas blockquote{font-size:17px;line-height:1.55}
.resenas figcaption{margin-top:12px;color:var(--sec);font-size:16px}

/* Visitanos */
.visita .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:48px 64px}
.visita-foto{flex:1 1 380px;width:100%;max-width:560px;aspect-ratio:4/3;object-fit:cover;border-radius:20px 20px 0 0;clip-path:var(--iso)}
.visita-texto{flex:1 1 320px;max-width:460px}
.direccion{margin-top:20px;font-size:18px}
.horario{margin-top:16px;color:var(--sec)}
.contacto{margin-top:16px;display:flex;flex-direction:column;gap:6px;color:var(--sec)}
.contacto a{display:flex;align-items:center;gap:10px;color:var(--sec);text-decoration:none;min-height:44px}
.contacto a:hover{color:var(--texto)}
.contacto .ico{color:var(--rojo)}
.visita .boton{margin-top:22px}

/* Pie */
.pie{padding:36px var(--lado) 40px;border-top:1px solid var(--linea);text-align:center}
.pie img{height:48px;width:auto;margin:0 auto}
.pie p{margin-top:14px;font-size:15px;color:var(--sec)}
@media (max-width:600px){.pie{padding-bottom:100px}}

/* Botón flotante de WhatsApp */
.flotante{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:6;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.2);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.flotante.visible{opacity:1;transform:none;pointer-events:auto}
.flotante .ico{width:30px;height:30px}
@media (max-width:600px){.flotante{width:52px;height:52px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.flotante .ico{width:27px;height:27px}}
@media (prefers-reduced-motion:reduce){.encabezado,.flotante{transition:none}}