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

:root{
  --bg:#FAF3E7;
  --surface:#FFFFFF;
  --texto:#1B2A4A;
  --texto-suave:#4E5A78;
  --acento:#A63D0F;
  --acento-2:#23407C;
  --borde:#E4D5BC;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --espacio-seccion:clamp(64px,10vw,96px);
}

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

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--texto);
  line-height:1.6;
  font-size:clamp(1rem,0.3vw + 0.95rem,1.125rem);
  padding-bottom:76px;
}

img{max-width:100%;display:block}

a{color:var(--acento-2)}

h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:0.02em}
h1{font-size:clamp(2.1rem,5.5vw + 1rem,3.6rem);line-height:1.08}
h2{font-size:clamp(1.5rem,2.5vw + 0.8rem,2.2rem);position:relative;padding-bottom:16px;margin-bottom:8px}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--acento);border-radius:2px}
h3{font-size:clamp(1.1rem,1vw + 0.9rem,1.3rem)}

.kicker{
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--acento);
  margin-bottom:12px;
}
.kicker-centro{text-align:center}

.saltar{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--texto);
  color:var(--bg);
  padding:12px 20px;
  z-index:100;
  border-radius:0 0 8px 0;
}
.saltar:focus{left:0}

:focus-visible{outline:3px solid var(--acento-2);outline-offset:2px}

/* ---------- Barra de contacto ---------- */
.barra-contacto{
  position:fixed;
  left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--borde);
  z-index:50;
  box-shadow:0 -4px 16px rgba(27,42,74,0.14);
}
.barra-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:56px;
  font-weight:700;
  text-decoration:none;
  font-size:0.95rem;
}
.barra-whatsapp{background:var(--acento);color:#fff}
.barra-llamar{background:var(--acento-2);color:#fff}
.barra-icono{width:20px;height:20px;flex-shrink:0}

@media (min-width:720px){
  .barra-contacto{
    top:0;bottom:auto;
    grid-template-columns:auto auto;
    justify-content:flex-end;
    gap:0;
    padding:0 32px;
    box-shadow:0 4px 16px rgba(27,42,74,0.1);
  }
  .barra-btn{padding:16px 24px;min-height:auto}
  body{padding-bottom:0;padding-top:56px}
}

/* ---------- Hero ---------- */
.hero{
  max-width:1040px;
  margin:0 auto;
  padding:48px 24px var(--espacio-seccion);
  display:grid;
  gap:32px;
  align-items:center;
}
.hero-sub{color:var(--texto-suave);margin-top:16px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero-visual{display:flex;justify-content:center}
.svg-gafas-hero{width:min(320px,80vw);height:auto}

@media (min-width:860px){
  .hero{grid-template-columns:1.1fr 0.9fr;padding-top:96px}
  .hero-visual{justify-content:flex-end}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  border:2px solid transparent;
}
.btn-primario{background:var(--acento);color:#fff}
.btn-secundario{background:transparent;color:var(--acento-2);border-color:var(--acento-2)}
.btn-sobre-oscuro{color:var(--bg);border-color:var(--bg)}

/* ---------- Franja de confianza ---------- */
.confianza{
  max-width:1040px;
  margin:0 auto;
  padding:0 24px var(--espacio-seccion);
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:center;
}
.estado{
  font-weight:700;
  padding:8px 16px;
  border-radius:999px;
  background:var(--surface);
  border:1.5px solid var(--borde);
}
.estado.abierto{color:#1c6b3a}
.estado.cerrado{color:var(--acento)}
.enlace-resenas{font-weight:700}

/* ---------- Vitrina ---------- */
.vitrina{padding:0 0 var(--espacio-seccion)}
.vitrina h2,.vitrina .kicker{max-width:1040px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.vitrina-fila{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:32px calc(50% - min(50%,520px) + 24px) 16px;
  margin-inline:calc(50% - 50vw);
}
.vitrina-tarjeta{
  scroll-snap-align:center;
  flex:0 0 260px;
  height:320px;
  background:var(--surface);
  border:1.5px solid var(--borde);
  border-radius:14px;
  box-shadow:0 4px 16px rgba(27,42,74,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-decoration:none;
  padding:24px;
  text-align:center;
}
@media (max-width:520px){
  .vitrina-tarjeta{flex-basis:78vw}
}
.svg-montura{width:100%;max-width:180px;height:auto}
.vitrina-nombre{
  font-weight:700;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--acento);
}
.vitrina-foto{
  background:repeating-linear-gradient(45deg,#F3EAD8 0 10px,#FAF3E7 10px 20px);
}
.vitrina-foto .vitrina-nombre{
  color:var(--texto-suave);
  font-size:0.8125rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:500;
}
.svg-fantasma{opacity:0.25}

.vitrina-puntos{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:8px;
}
.vitrina-puntos span{
  width:6px;height:6px;border-radius:50%;
  background:var(--borde);
}

/* ---------- Secciones generales ---------- */
.servicios,.porque,.resenas,.ubicacion{
  max-width:1040px;
  margin:0 auto;
  padding:0 24px var(--espacio-seccion);
  text-align:center;
}
.servicios-grid,.porque-grid{
  display:grid;
  gap:20px;
  margin-top:40px;
  text-align:left;
}
@media (min-width:640px){
  .servicios-grid{grid-template-columns:repeat(2,1fr)}
  .porque-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .servicios-grid{grid-template-columns:repeat(3,1fr)}
}
.servicio,.porque-item{
  background:var(--surface);
  border:1.5px solid var(--borde);
  border-radius:14px;
  padding:24px;
  box-shadow:0 4px 16px rgba(27,42,74,0.08);
}
.servicio h3,.porque-item h3{margin-bottom:8px;color:var(--texto)}
.servicio p,.porque-item p{color:var(--texto-suave)}

/* ---------- Reseñas ---------- */
.resenas-grid{
  display:grid;
  gap:20px;
  margin-top:40px;
  text-align:left;
}
@media (min-width:720px){
  .resenas-grid{grid-template-columns:repeat(2,1fr)}
}
.resena{
  background:var(--surface);
  border:1.5px solid var(--borde);
  border-radius:14px;
  padding:24px;
  box-shadow:0 4px 16px rgba(27,42,74,0.08);
}
.resena p{color:var(--texto)}
.resena footer{margin-top:16px;font-weight:700;color:var(--texto-suave);font-style:normal}
.enlace-resenas-abajo{display:inline-block;margin-top:32px}

/* ---------- Ubicación ---------- */
.ubicacion-grid{
  display:grid;
  gap:32px;
  margin-top:40px;
  text-align:left;
}
@media (min-width:720px){
  .ubicacion-grid{grid-template-columns:1fr 1fr;align-items:start}
}
.ubicacion-datos{
  background:var(--surface);
  border:1.5px solid var(--borde);
  border-radius:14px;
  padding:24px;
  box-shadow:0 4px 16px rgba(27,42,74,0.08);
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}
.direccion{font-weight:700;color:var(--texto)}
.horario-detalle{
  background:var(--surface);
  border:1.5px solid var(--borde);
  border-radius:14px;
  padding:20px 24px;
  box-shadow:0 4px 16px rgba(27,42,74,0.08);
}
.horario-detalle summary{font-weight:700;cursor:pointer;color:var(--acento-2)}
.tabla-horario{width:100%;border-collapse:collapse;margin-top:16px}
.tabla-horario tr{border-top:1px solid var(--borde)}
.tabla-horario th,.tabla-horario td{text-align:left;padding:8px 0;font-weight:400}
.tabla-horario th{color:var(--texto-suave);font-weight:500}
.tabla-horario td{text-align:right;color:var(--texto)}

/* ---------- CTA final ---------- */
.cta-final{
  background:var(--texto);
  color:var(--bg);
  text-align:center;
  padding:var(--espacio-seccion) 24px;
}
.cta-final h2{color:var(--bg)}
.cta-final h2::after{background:var(--acento)}
.cta-final p{max-width:46ch;margin:0 auto;color:#C9D2E6}
.cta-final-botones{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:32px}

/* ---------- Footer ---------- */
.pie{
  text-align:center;
  padding:32px 24px 96px;
  color:var(--texto-suave);
  font-size:0.8125rem;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pie a{color:var(--acento-2);font-weight:700}

@media (min-width:720px){
  .pie{padding-bottom:32px}
}