/* =========================================================
   Óptica Tyndall — Propuesta de rediseño
   Estética clínica con estilo: azul/blanco/negro elegante,
   tipografía geométrica moderna. El nombre de la óptica
   coincide con el "efecto Tyndall" (dispersión de la luz que
   explica, entre otras cosas, por qué el cielo se ve azul);
   de ahí que el azul sea la base de la paleta y que el hero y
   los botones primarios usen un ligero "destello" diagonal en
   vez de animaciones festivas.
   ========================================================= */

:root {
  /* Marca */
  --navy-900: #0a1f3d;
  --navy-800: #0f2c56;
  --navy-700: #163b70;
  --blue-600: #2f5fdb;
  --blue-500: #4472e6;
  --blue-100: #dde7fb;
  --sky-050: #f2f6fd;

  /* Neutros */
  --ink: #101826;
  --ink-soft: #58647a;
  --line: #dee5f1;
  --bg: #ffffff;
  --bg-soft: #f4f7fc;
  --white: #ffffff;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgba(10, 31, 61, .07);
  --shadow: 0 16px 38px rgba(10, 31, 61, .14);
  --shadow-lg: 0 28px 64px rgba(10, 31, 61, .24);

  --maxw: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }

.wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600);
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--blue-600); border-radius: 2px; }

.section { padding: clamp(60px, 8vw, 112px) 0; }
.section-head { max-width: 640px; margin-bottom: 50px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.center .eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--blue-600); border-radius: 2px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 16px 0 14px; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Botones ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  padding: 14px 28px; border-radius: var(--radius);
  cursor: pointer; border: 1.5px solid transparent;
  transition: background .25s var(--ease), color .25s, border-color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--navy-900); color: #fff; box-shadow: 0 10px 22px rgba(10,31,61,.24); }
.btn-primary:hover { background: var(--blue-600); box-shadow: 0 14px 30px rgba(47,95,219,.34); }
/* Destello diagonal al pasar el ratón: un guiño discreto a "dispersión de la luz" */
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn-primary:hover::after { left: 130%; }
.btn-wa { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-wa:hover { border-color: #25D366; color: #1a8f47; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 20px 0; transition: padding .35s var(--ease), background .35s, box-shadow .35s;
}
.header.scrolled { background: rgba(10,31,61,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 13px 0; }

/* Cabecera siempre en tono oscuro (antes y después de hacer scroll), coherente
   con la marca — evita el problema de contraste de un logo/texto claro sobre
   una cabecera que cambia de transparente a clara al hacer scroll. */
.header--hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,16,32,.65), rgba(6,16,32,0));
  z-index: 0; transition: opacity .35s;
}
.header--hero.scrolled::before { opacity: 0; }
.header .nav { position: relative; z-index: 5; }
.header .brand { color: #fff; }
.header .brand b { color: var(--blue-500); }
.header .nav-links > a { color: rgba(255,255,255,.86); }
.header .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.header .btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-500); }
.header .burger { color: #fff; }

.nav { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; letter-spacing: -.01em; }
.brand b { font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 28px; font-weight: 500; font-size: .92rem; }
.nav-links > a { transition: color .2s; position: relative; }
.nav-links > a:hover { color: var(--blue-500); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.burger { display: none; position: relative; background: none; border: 0; width: 28px; height: 28px; cursor: pointer; }
.burger svg { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; transition: opacity .2s; }
.burger .icon-close { opacity: 0; }
.header.menu-open .burger .icon-menu { opacity: 0; }
.header.menu-open .burger .icon-close { opacity: 1; }

/* El panel exterior anima max-height y NO lleva padding propio: el padding no
   se comprime por debajo de max-height y dejaría una barra visible tapando la
   cabecera incluso "cerrado". El padding real vive en .mobile-menu-inner.
   z-index por debajo de .header .nav (5) para que la marca y la hamburguesa
   (que también cierra el menú) queden siempre visibles y pulsables encima. */
.mobile-menu {
  display: none;
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  background: var(--navy-900); box-shadow: var(--shadow-lg);
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
}
.mobile-menu.open { max-height: 100vh; overflow-y: auto; }
.mobile-menu-inner { display: flex; flex-direction: column; gap: 2px; padding: 90px 24px 24px; }
.mm-link { padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 500; color: rgba(255,255,255,.88); font-size: .96rem; }
.mm-cta { justify-content: center; margin-top: 16px; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .burger { display: block; }
  .mobile-menu { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 96svh; display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(6,16,32,.4) 0%, rgba(6,16,32,.58) 55%, rgba(6,16,32,.9) 100%), url('img/fachada.jpg') center 42% / cover no-repeat;
}
.hero-inner { position: relative; color: #fff; max-width: 680px; }
/* Halo de "dispersión de luz" muy sutil detrás del texto — nunca decorativo
   en exceso, solo un guiño al efecto Tyndall que da nombre al negocio. */
.hero-inner::before {
  content: ''; position: absolute; top: -80px; left: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(68,114,230,.35), transparent 70%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
.hero .eyebrow { color: var(--blue-500); }
.hero .eyebrow::before { background: var(--blue-500); }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); margin: 20px 0 18px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--blue-500); }
.hero .lead { font-size: 1.12rem; color: rgba(255,255,255,.84); max-width: 540px; margin-bottom: 32px; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-500); }
.hero-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: .88rem; }
.hero-trust b { color: #fff; }
.hero-trust .stars { color: #ffc94a; letter-spacing: 1px; }
.hero-trust .div { width: 1px; height: 20px; background: rgba(255,255,255,.28); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Franja de marcas ---------- */
.brand-strip { background: var(--navy-900); padding: 22px 0; }
.brand-strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
.brand-strip span {
  color: rgba(255,255,255,.78); font-family: var(--font-display); font-weight: 500; font-size: .98rem;
  letter-spacing: .03em; padding: 6px 22px; position: relative;
}
.brand-strip span:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: rgba(255,255,255,.22);
}

/* ---------- Nosotros (texto + foto) ---------- */
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.about-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text .section-head { margin-bottom: 30px; }
.about-text > p { color: var(--ink-soft); margin-bottom: 26px; font-size: 1.02rem; }
.trait-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.trait { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.trait .num { font-family: var(--font-display); font-size: 1.05rem; color: var(--blue-600); font-weight: 700; flex-shrink: 0; width: 28px; }
.trait h4 { font-size: 1.02rem; margin-bottom: 4px; }
.trait p { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; gap: 34px; } .about-photo { aspect-ratio: 16/9; } }

.zones { background: var(--bg-soft); }

/* ---------- Servicios: iconos SVG de línea, no emoji (tono clínico) ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.serv {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 24px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.serv:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue-100); }
.serv-ico {
  width: 50px; height: 50px; border-radius: 14px; background: var(--sky-050);
  display: grid; place-items: center; margin-bottom: 18px; color: var(--blue-600);
}
.serv-ico svg { width: 24px; height: 24px; }
.serv h3 { font-size: 1.08rem; margin-bottom: 8px; }
.serv p { color: var(--ink-soft); font-size: .92rem; }

/* ---------- Marcas / Galería ---------- */
.gallery-teaser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-teaser figure, .gallery figure { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; }
.gallery-teaser img, .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-teaser figure:hover img, .gallery figure:hover img { transform: scale(1.06); }
.gallery-teaser figcaption {
  position: absolute; inset: auto 0 0 0; padding: 10px 12px 8px;
  background: linear-gradient(180deg, transparent, rgba(6,16,32,.86));
  color: #fff; font-size: .76rem; font-weight: 600; letter-spacing: .03em;
}
@media (max-width: 720px) { .gallery-teaser { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Stats ---------- */
.stats { background: var(--navy-900); border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 56px); position: relative; overflow: hidden; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; position: relative; }
.stat { border-right: 1px solid rgba(255,255,255,.12); }
.stat:last-child { border-right: 0; }
.stats .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 2.8rem); line-height: 1; color: var(--blue-500); }
.stats .lbl { margin-top: 10px; font-size: .88rem; color: rgba(255,255,255,.68); }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 18px; } }

/* ---------- Info práctica (horarios) ---------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.info-item { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.info-item h4 { font-size: 1rem; margin-bottom: 8px; }
.info-item p { color: var(--ink-soft); font-size: .9rem; }

.hours-table { display: grid; gap: 0; max-width: 420px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hours-row { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: .94rem; }
.hours-row:last-child { border-bottom: 0; }
.hours-row span:first-child { color: var(--ink-soft); }
.hours-row b { font-family: var(--font-display); }
.hours-row.closed b { color: var(--ink-soft); font-weight: 500; }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; }
.contact-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 46px);
}
.contact-card .eyebrow { margin-bottom: 16px; }
.contact-card h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 14px; }
.contact-card > p { color: var(--ink-soft); margin-bottom: 26px; }
.contact-line { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.contact-line:first-of-type { border-top: 0; }
.contact-line .ico { width: 44px; height: 44px; border-radius: 13px; background: var(--sky-050); display: grid; place-items: center; color: var(--blue-600); flex: 0 0 auto; }
.contact-line .ico svg { width: 20px; height: 20px; }
.contact-line small { display: block; color: var(--ink-soft); font-size: .8rem; }
.contact-line b { font-size: 1rem; font-weight: 600; }
.contact-actions { display: flex; gap: 12px; margin: 26px 0 22px; flex-wrap: wrap; }
.socials { display: flex; gap: 12px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--blue-600); transition: background .2s, color .2s, border-color .2s; }
.socials a:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.socials svg { width: 18px; height: 18px; }

.map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 340px; }
.map-card iframe { width: 100%; height: 100%; border: 0; min-height: 340px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final { background: var(--navy-900); }
.cta-box { text-align: center; color: #fff; }
.cta-box .eyebrow { justify-content: center; color: var(--blue-500); }
.cta-box .eyebrow::before { display: none; }
.cta-box .eyebrow::after { content: ''; width: 24px; height: 2px; background: var(--blue-500); border-radius: 2px; }
.cta-box h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 14px 0; font-weight: 600; }
.cta-box p { color: rgba(255,255,255,.7); max-width: 520px; margin: 0 auto 28px; }
.cta-box .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.cta-box .btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-500); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 56px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer h5 { color: #fff; font-family: var(--font-display); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer a:hover { color: var(--blue-500); }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer p { font-size: .9rem; max-width: 34ch; line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Llamar flotante ---------- */
/* La ficha actual del negocio no confirma un WhatsApp Business activo, así
   que el botón persistente en pantalla usa "llamar" (tel:), el canal 100%
   verificado hoy mismo. El resto de CTAs de la página sí ofrecen WhatsApp. */
.call-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; background: var(--navy-900); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  border: 1.5px solid rgba(255,255,255,.15); transition: transform .3s var(--ease), background .3s;
}
.call-float:hover { transform: scale(1.06); background: var(--blue-600); }
.call-float svg { width: 25px; height: 25px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,16,32,.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 86vh; border-radius: 6px; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }

/* Grid genérico reutilizado por valor.html ("seis mejoras") */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }

@media (max-width: 720px) {
  .hero { padding-top: 90px; }
}