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

:root{
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --texto:#1F2933;
  --texto-suave:#52606D;
  --acento:#2E5F7A;
  --acento-2:#A9BDCB;
  --borde:#D5DCE2;

  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --radio:6px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--fuente);
  background:var(--bg);
  color:var(--texto);
  line-height:1.6;
  font-size:clamp(0.9375rem,2vw,1rem);
}

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

a{color:var(--acento)}

h1,h2,h3{color:var(--texto);line-height:1.2}

h1{font-size:clamp(1.75rem,4.5vw,2.4rem);font-weight:700;letter-spacing:-0.01em}
h2{font-size:clamp(1.3rem,3vw,1.6rem);font-weight:600;color:var(--acento);line-height:1.3}
h3{font-size:1.0625rem;font-weight:600;line-height:1.4}

.label{
  display:block;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-bottom:var(--s1)
}

.dato-mono{font-family:var(--fuente-mono);font-size:0.9375rem;font-weight:500}
.dato-mono a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:-12px 0 -12px -8px}

/* ── Botones ─────────────────────────────────────────── */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 var(--s3);
  border-radius:var(--radio);
  font-weight:600;
  font-size:0.9375rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.boton-primario{background:var(--acento);color:#fff}
.boton-primario:hover{background:#24506a}
.boton-secundario{background:var(--surface);color:var(--acento);border-color:var(--acento)}
.boton-secundario:hover{background:var(--bg)}
.boton-ancho{width:100%}

.cta-par{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

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

/* ── Cabecera ────────────────────────────────────────── */
.cabecera{
  background:var(--surface);
  border-bottom:1px solid var(--borde);
}
.cabecera-inner{
  max-width:1100px;
  margin:0 auto;
  padding:var(--s2) var(--s3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
}
.cabecera-nombre{font-weight:700}
.cabecera-tel{
  font-family:var(--fuente-mono);
  font-size:0.9375rem;
  text-decoration:none;
  color:var(--texto);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 8px;
  margin:-8px -8px -8px 0;
}

/* ── Layout general ─────────────────────────────────── */
.layout{
  max-width:1100px;
  margin:0 auto;
  padding:var(--s4) var(--s3) var(--s6);
  display:flex;
  flex-direction:column;
  gap:var(--s5);
}

section > h2{margin-bottom:var(--s3)}

/* ── Hero ────────────────────────────────────────────── */
.hero-sub{color:var(--texto-suave);margin-top:var(--s2);max-width:52ch}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:0 1px 3px rgba(31,41,51,.08);
  padding:var(--s3);
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}
.sidebar-dato-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.sidebar-dato-cabecera .label{margin-bottom:0}

.toggle-horario{
  background:none;
  border:1px solid var(--borde);
  border-radius:var(--radio);
  color:var(--acento);
  font-size:0.75rem;
  font-weight:600;
  padding:6px 14px;
  cursor:pointer;
  min-height:44px;
}

#estado-apertura.abierto{color:var(--acento);font-weight:700}
#estado-apertura.cerrado{color:var(--texto-suave)}

.tabla-horario{
  width:100%;
  border-collapse:collapse;
  margin-top:var(--s2);
}
.tabla-horario th,.tabla-horario td{
  text-align:left;
  padding:6px 0;
  border-bottom:1px solid var(--borde);
  font-weight:400;
  font-size:0.875rem;
}
.tabla-horario th{font-weight:500;color:var(--texto-suave);width:40%}
.tabla-horario tr:last-child th,.tabla-horario tr:last-child td{border-bottom:none}
.tabla-horario-completa{max-width:420px;margin-top:var(--s3);margin-bottom:var(--s3)}
.tabla-horario-completa caption{text-align:left;font-weight:600;margin-bottom:var(--s2)}

/* ── Franja de confianza ─────────────────────────────── */
.franja-confianza{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--s3);
  text-align:center;
}
.franja-confianza a{font-weight:600;text-decoration:none}
.franja-confianza a:hover{text-decoration:underline}

/* ── Servicios ───────────────────────────────────────── */
.lista-servicios{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.lista-servicios li{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--s3);
}
.lista-servicios h3{margin-bottom:6px}
.lista-servicios p{color:var(--texto-suave)}

/* ── Stepper (dispositivo visual firma) ──────────────── */
.stepper{
  list-style:none;
  position:relative;
}
.stepper li{
  position:relative;
  padding-left:48px;
  padding-bottom:var(--s4);
}
.stepper li:not(.ultimo)::before{
  content:"";
  position:absolute;
  left:11px;
  top:24px;
  bottom:calc(-1 * var(--s4) + 24px);
  border-left:2px solid var(--acento-2);
}
.step-num{
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--acento);
  color:var(--acento);
  font-weight:700;
  font-size:0.8125rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stepper h3{margin-bottom:4px}
.stepper p{color:var(--texto-suave)}

/* ── Por qué venir ───────────────────────────────────── */
.lista-por-que{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.lista-por-que li{border-top:1px solid var(--borde);padding-top:var(--s3)}
.lista-por-que h3{margin-bottom:4px}
.lista-por-que p{color:var(--texto-suave)}

/* ── Reseñas ─────────────────────────────────────────── */
.resenas{display:flex;flex-direction:column;gap:var(--s3)}
.resena{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--s3);
}
.resena p{color:var(--texto);font-style:normal}
.resena footer{margin-top:var(--s2);color:var(--texto-suave);font-size:0.875rem;font-weight:600}

/* ── Ubicación ───────────────────────────────────────── */
.ubicacion p{margin-bottom:var(--s2);color:var(--texto-suave)}

/* ── CTA final ───────────────────────────────────────── */
.cta-final{
  background:var(--surface);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:var(--s4);
  text-align:center;
}
.cta-final p{color:var(--texto-suave);margin-top:var(--s1)}
.cta-final .cta-par{justify-content:center}

/* ── Footer ──────────────────────────────────────────── */
.pie{
  max-width:1100px;
  margin:0 auto;
  padding:var(--s3);
  border-top:1px solid var(--borde);
  color:var(--texto-suave);
  font-size:0.875rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:calc(var(--s3) + 64px);
}

/* ── Barra fija móvil ────────────────────────────────── */
.barra-movil{
  position:fixed;
  left:0;right:0;bottom:0;
  display:flex;
  gap:var(--s2);
  padding:var(--s2);
  background:var(--surface);
  border-top:1px solid var(--borde);
  box-shadow:0 -1px 3px rgba(31,41,51,.08);
  z-index:10;
}
.barra-movil .boton{flex:1}

/* ── Desktop: dos columnas ───────────────────────────── */
@media (min-width:960px){
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:
      "hero      sidebar"
      "trust     sidebar"
      "servicios sidebar"
      "stepper   sidebar"
      "porque    sidebar"
      "resenas   sidebar"
      "ubicacion sidebar"
      "cta       sidebar";
    gap:40px;
  }
  .hero{grid-area:hero}
  .sidebar{grid-area:sidebar;position:sticky;top:16px;align-self:start}
  .franja-confianza{grid-area:trust}
  .servicios{grid-area:servicios}
  .stepper-seccion{grid-area:stepper}
  .por-que{grid-area:porque}
  .resenas{grid-area:resenas}
  .ubicacion{grid-area:ubicacion}
  .cta-final{grid-area:cta}

  .barra-movil{display:none}
  .pie{padding-bottom:var(--s3)}
}

@media (prefers-reduced-motion:no-preference){
  .boton{transition:background-color .15s ease}
}