/* =====================================================================
   REPARACIÓN DE LENTES GUAYAQUIL — Sistema visual compartido
   Un solo archivo cacheable entre las 13 páginas del sitio (antes cada
   página traía ~16-20KB de CSS repetido en línea). Esto reduce el peso
   total transferido cuando alguien navega entre páginas del sitio y
   mantiene el primer render igual de rápido.
   ===================================================================== */

:root{
  --navy: #14233A;
  --navy-2: #1E3A5F;
  --navy-3: #0F1B2C;
  --slate: #4B5C70;
  --gold: #C79A49;
  --gold-light: #E8CD8E;
  --gold-soft: #F2E2BE;
  --paper: #F5F6F8;
  --white: #FFFFFF;
  --ink: #1B222C;
  --ink-soft: #57626E;
  --whatsapp: #22B858;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --shadow-sm: 0 2px 12px rgba(20,35,58,.08);
  --shadow-md: 0 14px 30px rgba(20,35,58,.10);
  --shadow-lg: 0 24px 60px rgba(20,35,58,.16);
  --shadow-gold: 0 10px 26px rgba(199,154,73,.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  padding-top:112px; /* espacio para barra de urgencia + nav fija */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:'Fraunces', serif; color:var(--navy); line-height:1.15;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
img{max-width:100%; display:block;}
section{padding:88px 24px; position:relative;}
.container{max-width:1180px; margin:0 auto;}
.eyebrow{
  font-family:'Inter', sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background:var(--gold);
  display:inline-block;
  border-radius:2px;
}

::selection{background:var(--gold-light); color:var(--navy);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* --- Elemento de firma: línea de "grieta que se convierte en soldadura" --- */
.seam{
  display:block;
  width:220px;
  height:22px;
  margin:18px 0 30px;
  overflow:visible;
}
.seam-center{margin-left:auto; margin-right:auto;}
.seam path{
  fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.seam circle{
  fill:var(--gold);
  opacity:0;
  transform:scale(.3);
  transform-origin:center;
  transform-box:fill-box;
  transition:opacity .4s ease .9s, transform .4s var(--ease) .9s;
}
.seam.seam--drawn path{stroke-dashoffset:0;}
.seam.seam--drawn circle{opacity:1; transform:scale(1);}

/* --- Barra de progreso de scroll (inyectada por JS) --- */
.barra-progreso{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index:1003; pointer-events:none;
  transition:width .1s linear;
}

/* --- Barra de urgencia --- */
.barra-urgencia{
  position:fixed; top:0; left:0; right:0; z-index:1001;
  background:linear-gradient(90deg, var(--navy) 0%, #1a3050 50%, var(--navy) 100%);
  background-size:200% 100%;
  animation:brilloBarra 8s ease-in-out infinite;
  color:var(--gold-light);
  text-align:center;
  font-size:.85rem;
  font-weight:600;
  padding:9px 16px;
}
.barra-urgencia strong{color:var(--white);}
@keyframes brilloBarra{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

/* --- Navbar fija ---
   Nota: a propósito NO se usa backdrop-filter/filter/transform aquí.
   Cualquiera de esas propiedades en un ancestro convierte a ese ancestro
   en el "containing block" de sus descendientes position:fixed — y el
   menú móvil (nav.menu-principal) es descendiente de este header y
   necesita posicionarse respecto al VIEWPORT, no respecto al header.
   Si se reintroduce blur, hay que sacar el menú móvil del DOM del header. */
header.nav-fija{
  position:fixed; top:34px; left:0; right:0; z-index:1000;
  background:var(--white);
  box-shadow:0 2px 12px rgba(20,35,58,.08);
  transition:box-shadow .3s var(--ease);
}
header.nav-fija.nav-scrolled{
  box-shadow:0 8px 26px rgba(20,35,58,.14);
}
.nav-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px 24px;
}
.logo-nav{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--navy);
  line-height:1.1;
  white-space:nowrap;
}
.logo-nav span{color:var(--gold); display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.telefono-nav{
  color:var(--navy);
  font-weight:800;
  font-size:1.2rem;
  display:flex; align-items:center; gap:9px;
  white-space:nowrap;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.telefono-nav:hover{color:var(--navy-2); transform:translateY(-1px);}
.telefono-nav svg{flex-shrink:0;}
nav.menu-principal{flex:1; display:flex; justify-content:center;}
nav.menu-principal ul{display:flex; gap:16px;}
nav.menu-principal ul li{flex-shrink:0;}
nav.menu-principal a{
  position:relative;
  color:var(--navy);
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
  padding:4px 0;
  transition:color .2s;
}
nav.menu-principal a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px; border-radius:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
nav.menu-principal a:hover{color:var(--navy-2);}
nav.menu-principal a:hover::after,
nav.menu-principal a.enlace-activo::after{transform:scaleX(1);}
nav.menu-principal a.enlace-activo{color:var(--navy-2);}
.nav-cta{display:flex; align-items:center;}
.btn-whatsapp-nav{
  background:var(--whatsapp);
  color:var(--white);
  font-weight:800;
  font-size:.94rem;
  padding:13px 26px;
  border-radius:50px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 18px rgba(34,184,88,.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-whatsapp-nav:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(34,184,88,.35);}
.btn-menu-movil{display:none; background:none; border:none; color:var(--navy); font-size:1.6rem; cursor:pointer;}

/* --- Dropdown "Zonas de Cobertura" en el nav --- */
li.nav-dropdown{position:relative; list-style:none;}
li.nav-dropdown > details{position:relative;}
li.nav-dropdown > details > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px;
  color:var(--navy); font-size:.9rem; font-weight:700; white-space:nowrap; transition:color .2s;
}
li.nav-dropdown > details > summary::-webkit-details-marker{display:none;}
li.nav-dropdown > details > summary::after{content:"▾"; font-size:.62rem; color:var(--gold); transition:transform .25s var(--ease);}
li.nav-dropdown > details[open] > summary::after{transform:rotate(180deg);}
li.nav-dropdown > details > summary:hover{color:var(--navy-2);}
.menu-zonas-nav{
  position:absolute; top:calc(100% + 16px); left:0;
  background:var(--white); border:1px solid #E7E9EC; border-radius:12px;
  box-shadow:var(--shadow-lg);
  min-width:230px; padding:14px 0; z-index:500;
  opacity:0; transform:translateY(-6px);
  animation:menuZonasIn .22s var(--ease-soft) forwards;
}
@keyframes menuZonasIn{to{opacity:1; transform:translateY(0);}}
.menu-zonas-nav .grupo-zona{
  display:block; padding:10px 20px 6px; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gold); font-weight:800;
}
.menu-zonas-nav a{
  display:block; padding:9px 20px; color:var(--ink); font-size:.92rem; font-weight:600;
  transition:background .15s, color .15s, padding-left .15s;
}
.menu-zonas-nav a:hover{background:var(--paper); color:var(--navy-2); padding-left:24px;}
.menu-zonas-nav .zona-actual{
  display:block; padding:9px 20px; color:var(--gold); font-size:.92rem; font-weight:700;
}

/* --- Hero --- */
.hero{
  background-color:var(--navy-2);
  /* Foto de fondo con un velo navy encima: el degradado va PRIMERO en la
     lista de capas (se dibuja arriba) para que el texto blanco/dorado del
     título siga leyendo perfecto sin importar qué tan clara sea la foto.
     Es la misma imagen que ya se usa más abajo en la página, así que el
     navegador la reutiliza de caché en vez de descargarla dos veces. */
  background-image:
    linear-gradient(165deg, rgba(13,24,40,.93) 0%, rgba(20,35,58,.87) 45%, rgba(30,55,90,.8) 100%),
    url("../imagenes/hero-manos-reparando-lentes.webp");
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
  padding:90px 24px 128px;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
/* La página de óptica vende armazones y lunas, no reparación: usa una foto
   de venta/producto (armazones sobre terciopelo) en vez de la de taller.
   Misma imagen que ya usa la sección "Marcas" del inicio, así que tampoco
   suma una descarga nueva para quien navega entre páginas. */
.pagina-optica .hero{
  background-image:
    linear-gradient(165deg, rgba(13,24,40,.88) 0%, rgba(20,35,58,.82) 45%, rgba(30,55,90,.76) 100%),
    url("../imagenes/armazones-premium-detalle.webp");
  background-position:center 42%;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(620px 420px at 12% 8%, rgba(199,154,73,.22), transparent 60%),
    radial-gradient(680px 460px at 88% 18%, rgba(232,205,142,.14), transparent 62%),
    radial-gradient(900px 600px at 50% 110%, rgba(20,35,58,.6), transparent 70%);
  animation:derivaHero 18s ease-in-out infinite alternate;
}
@keyframes derivaHero{
  0%{background-position:0 0, 0 0, 0 0;}
  100%{background-position:24px -18px, -20px 16px, 0 0;}
}
.hero-inner{max-width:920px; margin:0 auto; position:relative; z-index:1;}
.hero h1{
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.28;
  margin-top:18px;
  text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--gold-light);}
.hero p.sub{
  color:#E3EAF1;
  font-size:1.12rem;
  margin:22px auto 0;
  max-width:640px;
}
.hero p.sub strong{color:var(--white);}
.seam-hero{margin-left:auto; margin-right:auto;}
.hero-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:36px;}

.btn-primario, .btn-secundario{
  position:relative;
  overflow:hidden;
  font-weight:800;
  padding:18px 30px;
  border-radius:50px;
  font-size:1rem;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change:transform;
}
.btn-primario{
  background:var(--whatsapp);
  color:var(--white);
  box-shadow:0 10px 24px rgba(34,184,88,.3);
}
.btn-primario:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(34,184,88,.4);}
.btn-secundario{
  background:var(--gold);
  color:var(--navy);
  padding:18px 28px;
  box-shadow:var(--shadow-gold);
}
.btn-secundario:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(199,154,73,.4);}
.btn-primario::after, .btn-secundario::after, .btn-whatsapp-nav::after{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease-soft);
  pointer-events:none;
}
.btn-primario:hover::after, .btn-secundario:hover::after, .btn-whatsapp-nav:hover::after{left:130%;}
.btn-whatsapp-nav{position:relative; overflow:hidden;}

.ganchos{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px;}
.gancho{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(232,205,142,.3);
  color:var(--white);
  padding:9px 16px;
  border-radius:30px;
  font-size:.86rem;
  font-weight:600;
  transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.gancho:hover{background:rgba(255,255,255,.14); border-color:var(--gold-light); transform:translateY(-2px);}

/* Insignia flotante sobre la imagen del hero (inyectada por JS) */
.insignia-flotante{
  position:absolute;
  left:18px; bottom:18px;
  background:var(--white);
  color:var(--navy);
  border-radius:14px;
  padding:12px 16px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg);
  font-size:.82rem;
  font-weight:700;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
  z-index:2;
  max-width:min(78%, 280px);
  text-align:left;
  line-height:1.3;
}
.insignia-flotante.insignia--visible{opacity:1; transform:translateY(0);}
.insignia-flotante .insignia-icono{font-size:1.35rem; flex-shrink:0;}

/* --- Franja de confianza --- */
.franja-confianza{
  background:var(--white);
  border-bottom:1px solid #E7E9EC;
  padding:26px 24px;
}
.franja-inner{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;
}
.franja-item{display:flex; align-items:center; gap:10px; color:var(--slate); font-weight:600; font-size:.92rem; transition:color .2s;}
.franja-item svg{flex-shrink:0;}
.franja-item:hover{color:var(--navy);}

/* --- Servicios --- */
.servicios{background:var(--paper);}
.titulo-seccion{max-width:640px;}
.titulo-seccion h2{font-size:clamp(1.6rem, 3vw, 2.3rem); margin-top:6px;}
.titulo-seccion p{color:var(--ink-soft); margin-top:14px; font-size:1.02rem;}

.grid-servicios{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:50px;
}
.card-servicio{
  background:var(--white);
  border:1px solid #E7E9EC;
  border-radius:var(--radius);
  padding:30px 26px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
  transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.card-servicio:hover{box-shadow:var(--shadow-md); transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-3px); border-color:var(--gold-light);}
.card-servicio .num{
  font-family:'Fraunces', serif; font-size:.85rem; color:var(--gold); font-weight:700; letter-spacing:.05em;
  display:inline-block;
  transition:transform .3s var(--ease);
}
.card-servicio:hover .num{transform:scale(1.15);}
.card-servicio h3{font-size:1.18rem; margin-top:10px;}
.card-servicio p{color:var(--ink-soft); font-size:.94rem; margin-top:10px;}

/* --- Marcas --- */
.marcas{background:var(--navy); color:var(--white); position:relative; overflow:hidden;}
.marcas::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(560px 360px at 85% 0%, rgba(199,154,73,.16), transparent 60%);
}
.marcas .container{position:relative; z-index:1;}
.marcas .titulo-seccion h2{color:var(--white);}
.marcas .titulo-seccion p{color:#C7D2DE;}
.grid-marcas{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:46px;
}
.card-marca{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(232,205,142,.25);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.card-marca:hover{background:rgba(255,255,255,.09); border-color:var(--gold); transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-3px);}
.card-marca .nombre-marca{
  font-family:'Fraunces', serif; font-size:1.15rem; color:var(--gold-light); font-weight:600;
}
.card-marca p{color:#B9C4D1; font-size:.86rem; margin-top:8px;}

/* --- Zonas --- */
.zonas{background:var(--white);}
.grid-zonas{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; margin-top:44px;
}
.card-zona{
  background:var(--paper);
  border-radius:var(--radius);
  padding:22px 16px;
  text-align:center;
  border:1px solid #E7E9EC;
  display:block;
  text-decoration:none;
  transition:border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.card-zona:hover{border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-md);}
.card-zona h3{font-size:1.02rem; color:var(--navy);}
.card-zona p{font-size:.82rem; color:var(--ink-soft); margin-top:6px;}
.card-zona--actual{border-color:var(--gold); border-width:2px; cursor:default;}
.card-zona--proxima{opacity:.55; cursor:default;}
.nota-zonas{margin-top:30px; color:var(--ink-soft); font-size:.94rem;}

/* --- Cómo funciona --- */
.como-funciona{background:var(--paper);}
.pasos{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:50px;}
.pasos.pasos-4{grid-template-columns:repeat(4, 1fr); gap:22px;}
.paso{
  background:var(--white); border-radius:var(--radius); padding:28px 24px; border:1px solid #E7E9EC; position:relative;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
  transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.paso:hover{box-shadow:var(--shadow-md); transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-3px);}
.paso .paso-num{
  width:38px; height:38px; border-radius:50%;
  background:var(--navy); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700;
  margin-bottom:16px;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.paso:hover .paso-num{transform:scale(1.1) rotate(-6deg); background:var(--gold);}
.paso h3{font-size:1.08rem;}
.paso p{color:var(--ink-soft); font-size:.92rem; margin-top:8px;}

/* --- FAQ --- */
.faq{background:var(--white);}
.lista-faq{margin-top:40px; max-width:820px;}
.item-faq{border-bottom:1px solid #E7E9EC; padding:22px 0; transition:padding .2s;}
.item-faq summary{
  cursor:pointer; list-style:none; font-weight:600; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; font-size:1.02rem;
  gap:16px;
  transition:color .2s;
}
.item-faq summary:hover{color:var(--navy-2);}
.item-faq summary::-webkit-details-marker{display:none;}
.item-faq summary .icono-faq{color:var(--gold); font-size:1.3rem; transition:transform .3s var(--ease); flex-shrink:0;}
.item-faq[open] summary .icono-faq{transform:rotate(45deg);}
.item-faq .respuesta-faq{color:var(--ink-soft); margin-top:12px; font-size:.96rem; max-width:700px;}

/* --- Bloque de contenido SEO --- */
.contenido-seo{background:var(--white);}
.seo-articulo{max-width:820px; margin:50px auto 0;}
.seo-articulo h2{
  font-size:clamp(1.35rem, 2.6vw, 1.7rem);
  margin-top:52px;
  margin-bottom:6px;
}
.seo-articulo h2:first-child{margin-top:0;}
.seo-articulo .seam{margin:8px 0 18px;}
.seo-articulo h3{
  font-family:'Inter', sans-serif;
  font-weight:700;
  color:var(--navy-2);
  font-size:1.05rem;
  margin-top:26px;
  margin-bottom:10px;
}
.seo-articulo p{
  color:var(--ink-soft);
  font-size:1rem;
  margin-top:14px;
}
.seo-articulo ul{margin-top:14px; padding-left:0;}
.seo-articulo ul li{
  color:var(--ink-soft);
  font-size:.98rem;
  padding-left:26px;
  position:relative;
  margin-bottom:10px;
}
.seo-articulo ul li::before{
  content:"";
  position:absolute; left:0; top:9px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold);
}
.seo-articulo strong{color:var(--navy);}
.seo-cta-inline{
  margin-top:34px;
  padding:26px 28px;
  background:var(--paper);
  border:1px solid #E7E9EC;
  border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.seo-cta-inline:hover{box-shadow:var(--shadow-md); border-color:var(--gold-light);}
.seo-cta-inline p{color:var(--ink); font-weight:600; margin:0; max-width:420px; font-size:.98rem;}
.seo-cta-inline .btn-primario{padding:14px 22px; font-size:.92rem;}

/* --- Sistema de imágenes con placeholder --- */
.img-placeholder{
  position:relative;
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper);
}
.img-placeholder img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease-soft);
}
.img-placeholder:hover img{transform:scale(1.05);}
.img-placeholder .placeholder-fallback{
  display:none;
  position:absolute; inset:0;
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg, #E7E9EC, #F5F6F8);
  color:var(--slate);
  text-align:center;
  padding:20px;
}
.img-placeholder .placeholder-fallback span.icono-cam{font-size:1.9rem;}
.img-placeholder .placeholder-fallback p{
  font-size:.76rem;
  font-family:monospace;
  color:var(--ink-soft);
  word-break:break-all;
}
.img-4-3{aspect-ratio:4/3;}
.img-16-9{aspect-ratio:16/9;}
.img-1-1{aspect-ratio:1/1;}
.img-21-9{aspect-ratio:21/9;}

.cta-final{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  text-align:center;
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.cta-final::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(600px 400px at 50% 0%, rgba(199,154,73,.18), transparent 65%);
}
.cta-final .container{position:relative; z-index:1;}
.cta-final h2{color:var(--white); font-size:clamp(1.7rem, 3.4vw, 2.5rem); max-width:720px; margin:0 auto;}
.cta-final p{color:#C7D2DE; margin-top:16px; max-width:560px; margin-left:auto; margin-right:auto;}
.cta-final .btn-primario{margin-top:32px;}

/* --- Footer --- */
footer{background:var(--navy-3); color:#9AA7B5; padding:50px 24px 30px; position:relative;}
footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer-inner{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;}
.footer-col h4{color:var(--white); font-family:'Inter'; font-size:.95rem; margin-bottom:12px;}
.footer-col ul li{margin-bottom:8px; font-size:.88rem;}
.footer-col ul a{transition:color .2s, padding-left .2s;}
.footer-col ul a:hover{color:var(--gold-light); padding-left:3px;}
.footer-bottom{
  max-width:1180px; margin:40px auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem; text-align:center;
}

/* --- Botón flotante WhatsApp --- */
.whatsapp-flotante{
  position:fixed; bottom:26px; right:26px; z-index:1002;
  background:var(--whatsapp);
  color:var(--white);
  padding:16px 24px;
  border-radius:50px;
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  font-size:.94rem;
  box-shadow:0 10px 26px rgba(34,184,88,.4);
  animation:pulso 2.4s infinite;
  transition:transform .2s var(--ease);
}
.whatsapp-flotante:hover{transform:translateY(-2px) scale(1.03);}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(34,184,88,.45);}
  70%{box-shadow:0 0 0 16px rgba(34,184,88,0);}
  100%{box-shadow:0 0 0 0 rgba(34,184,88,0);}
}

/* --- Botón "volver arriba" (inyectado por JS) --- */
.btn-arriba{
  position:fixed; left:26px; bottom:26px; z-index:1002;
  width:44px; height:44px; border-radius:50%;
  background:var(--white);
  color:var(--navy);
  border:1px solid #E7E9EC;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  font-size:1.1rem;
  opacity:0; transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s, color .2s;
}
.btn-arriba.btn-arriba--visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.btn-arriba:hover{background:var(--navy); color:var(--white);}

/* --- Menú móvil inferior --- */
.menu-movil-inferior{display:none;}

/* --- Animaciones de entrada al hacer scroll (controladas por JS) --- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.reveal--visible{opacity:1; transform:translateY(0);}

@media (max-width: 980px){
  .ganchos, .hero-ctas{justify-content:center;}
  .grid-servicios{grid-template-columns:repeat(2,1fr);}
  .grid-marcas{grid-template-columns:repeat(2,1fr);}
  .grid-zonas{grid-template-columns:repeat(3,1fr);}
  .pasos, .pasos.pasos-4{grid-template-columns:1fr;}
  nav.menu-principal{
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background:var(--navy);
    flex:none; flex-direction:column; justify-content:flex-start;
    padding:20px 24px;
    display:none;
    z-index:1001;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav.menu-principal.abierto{display:flex;}
  nav.menu-principal ul{flex-direction:column; gap:16px; padding-bottom:40px;}
  nav.menu-principal.abierto a{color:var(--white);}
  nav.menu-principal a::after{display:none;}
  li.nav-dropdown > details > summary{color:var(--white);}
  .menu-zonas-nav{
    position:static; background:transparent; border:none; box-shadow:none;
    padding:4px 0 0 12px; min-width:0;
    animation:none;
  }
  .menu-zonas-nav .grupo-zona{color:var(--gold-light);}
  .menu-zonas-nav a, .menu-zonas-nav .zona-actual{color:var(--white); padding:8px 0;}
  .menu-zonas-nav a:hover{padding-left:8px; background:transparent;}
  .btn-menu-movil{display:block;}
  body{padding-bottom:70px;}
  .whatsapp-flotante{
    bottom:88px; right:16px;
    padding:13px 18px; font-size:.85rem;
  }
  .btn-arriba{bottom:88px; left:16px; width:40px; height:40px;}
  .menu-movil-inferior{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:1000;
    background:var(--white); border-top:1px solid #E7E9EC;
    justify-content:space-around; padding:10px 0;
  }
  .menu-movil-inferior a{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:.72rem; color:var(--navy); font-weight:600;
  }
  .insignia-flotante{font-size:.74rem; padding:9px 12px; max-width:72%;}
  .insignia-flotante .insignia-icono{font-size:1.1rem;}

  /* Con el menú móvil abierto, nada debe flotar por encima de la lista de enlaces */
  body.menu-abierto .whatsapp-flotante,
  body.menu-abierto .btn-arriba,
  body.menu-abierto .menu-movil-inferior{
    opacity:0;
    pointer-events:none;
    transition:opacity .15s;
  }
}

@media (max-width: 620px){
  .grid-servicios, .grid-marcas, .grid-zonas{grid-template-columns:1fr;}
  section{padding:64px 20px;}
}

/* Los dispositivos táctiles no reciben tilt 3D ni imán en botones (JS ya no
   agrega los listeners), pero por si acaso, neutralizamos el transform 3D. */
@media (hover: none){
  .card-servicio, .card-marca, .paso{transform:none !important;}
}

/* ===== CONFIANZA (garantías) ===== */
.confianza{background:var(--white);}
.confianza .card-servicio{text-align:left; border:2px solid var(--gold-light);}
.confianza .card-servicio .icono{font-size:2.2rem; display:block; margin-bottom:10px; transition:transform .3s var(--ease);}
.confianza .card-servicio:hover .icono{transform:scale(1.15) rotate(-4deg);}

/* ===== FORMULARIO DE COTIZACIÓN ===== */
.cotizar{background:var(--paper);}
.cotizar-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:40px;}
.cotizar-lista{list-style:none; padding:0; margin-top:20px;}
.cotizar-lista li{display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-weight:600; margin-bottom:10px; font-size:.96rem;}
.cotizar-lista li span{color:var(--whatsapp); font-size:1.15rem;}
.form-cotizacion{background:var(--white); border:1px solid #E7E9EC; border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-md); transition:box-shadow .3s var(--ease);}
.form-cotizacion:hover{box-shadow:var(--shadow-lg);}
.form-cotizacion label{display:block; font-weight:700; color:var(--navy); margin-bottom:8px; font-size:.92rem;}
.form-cotizacion .campo{margin-bottom:20px;}
.form-cotizacion input, .form-cotizacion select, .form-cotizacion textarea{
  width:100%; border:1px solid #D7DCE2; border-radius:10px; padding:12px 14px;
  font-family:'Inter', sans-serif; font-size:.96rem; color:var(--ink); background:var(--white);
  transition:border-color .2s, box-shadow .2s;
}
.form-cotizacion input:focus, .form-cotizacion select:focus, .form-cotizacion textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,154,73,.15);
}
.form-cotizacion button{
  width:100%; background:var(--whatsapp); color:var(--white); border:none; cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:700; font-size:1.02rem; padding:16px; border-radius:999px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  position:relative; overflow:hidden;
}
.form-cotizacion button:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(34,184,88,.3);}

/* ===== TESTIMONIOS ===== */
.testimonios{background:var(--navy); color:var(--white); position:relative; overflow:hidden;}
.testimonios::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(560px 360px at 10% 100%, rgba(199,154,73,.14), transparent 60%);
}
.testimonios .container{position:relative; z-index:1;}
.testimonios .titulo-seccion h2{color:var(--white);}
.testimonios .titulo-seccion p{color:#C7D2DE;}
.grid-testimonios{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px;}
.card-testimonio{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:26px;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
}
.card-testimonio:hover{background:rgba(255,255,255,.1); border-color:var(--gold-light); transform:perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-3px);}
.card-testimonio .estrellas{color:var(--gold-light); letter-spacing:2px; margin-bottom:12px;}
.card-testimonio p{color:#DCE3EB; font-size:.94rem; font-style:italic; line-height:1.6;}
.card-testimonio .autor{margin-top:14px; font-weight:700; color:var(--white); font-size:.9rem;}

/* ===== PRECIOS ===== */
.precios{background:var(--white);}
.tabla-precios{max-width:720px; margin:40px auto 0; background:var(--paper); border:1px solid #E7E9EC; border-radius:var(--radius); padding:12px 30px;}
.fila-precio{display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid #E1E4E8; font-weight:600; color:var(--ink); transition:padding-left .2s;}
.fila-precio:hover{padding-left:6px;}
.fila-precio:last-child{border-bottom:none;}
.fila-precio .valor{color:#1E8E4E; font-weight:800;}
.nota-precios{max-width:720px; margin:24px auto 0; background:#FBF3E3; border-left:4px solid var(--gold); border-radius:0 10px 10px 0; padding:18px 22px; color:var(--ink-soft); font-size:.9rem; font-style:italic;}

@media (max-width: 860px){
  .cotizar-grid{grid-template-columns:1fr;}
  .grid-testimonios{grid-template-columns:1fr;}
}

/* ===== ENLACES DENTRO DEL CONTENIDO NARRATIVO ===== */
.enlace-contenido{color:var(--navy-2); text-decoration:underline; text-underline-offset:2px; font-weight:600; transition:color .2s;}
.enlace-contenido:hover{color:var(--gold);}

/* =====================================================================
   TOQUES "COMERCIAL/BOUTIQUE" — solo página de óptica (.pagina-optica)
   Tres efectos livianos (CSS puro o CSS + el mismo mousemove que ya usa
   el tilt de las tarjetas), sin librerías externas, sin peso adicional
   de red. Escopeados con .pagina-optica para no tocar las otras 11
   páginas del sitio.
   ===================================================================== */

/* --- 1) Grano sutil sobre el hero: textura editorial/boutique.
   SVG minúsculo embebido en el propio CSS — no genera ninguna petición
   de red nueva. --- */
.pagina-optica .hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity:.15;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* --- 2) Halo dorado que sigue el cursor en las tarjetas.
   Reutiliza las mismas variables --mx/--my que ya fija interactions.js
   en el listener de mousemove del tilt 3D: no hace falta JS nuevo. --- */
.pagina-optica .card-servicio,
.pagina-optica .card-marca{
  position:relative;
  isolation:isolate;
}
.pagina-optica .card-servicio::before,
.pagina-optica .card-marca::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(199,154,73,.30), transparent 65%);
  opacity:0;
  transition:opacity .35s;
}
.pagina-optica .card-servicio:hover::before,
.pagina-optica .card-marca:hover::before{opacity:1;}

/* --- 3) Anillo dorado giratorio detrás de la insignia flotante del hero.
   Animación de compositor (solo transform de --angle vía @property),
   costo de CPU/GPU insignificante aunque quede corriendo de fondo. --- */
@property --angulo-insignia{
  syntax:"<angle>"; inherits:false; initial-value:0deg;
}
.pagina-optica .insignia-flotante{position:relative; isolation:isolate;}
.pagina-optica .insignia-flotante::before{
  content:"";
  position:absolute; inset:-2px; z-index:-1;
  border-radius:16px;
  background:conic-gradient(from var(--angulo-insignia), var(--gold), transparent 30%, transparent 70%, var(--gold));
  animation:girarInsignia 5s linear infinite;
  opacity:0; transition:opacity .4s;
}
.pagina-optica .insignia-flotante.insignia--visible::before{opacity:1;}
@keyframes girarInsignia{to{--angulo-insignia:360deg;}}

/* --- 4) Capitular en el primer párrafo de la guía (toque editorial,
   gratis en rendimiento — puro CSS, tipografía que ya está cargada). --- */
.pagina-optica .seo-articulo > p:first-of-type::first-letter{
  float:left;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:3.4rem;
  line-height:.8;
  margin:.1rem .5rem -.1rem 0;
  color:var(--gold);
}

@media (prefers-reduced-motion: reduce){
  .pagina-optica .insignia-flotante::before{animation:none;}
}