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

:root{
  --bg:#1c3b33;
  --surface:#275247;
  --texto:#f4f1e4;
  --texto-suave:#c8d4c6;
  --acento:#f2d778;
  --acento-2:#a8d8c2;
  --borde:#3a6156;
  --radio:10px;
  --marco:6px;
  --col-max:760px;
}

@media (min-width:640px){
  :root{ --marco:10px; }
}

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

body{
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(244,241,228,0.03), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 90%, rgba(244,241,228,0.025), transparent 70%),
    var(--bg);
  color:var(--texto);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:1rem;
  line-height:1.65;
  box-shadow:inset 0 0 0 var(--marco) #163029;
  min-height:100vh;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  color:var(--texto);
}

h1{ font-size:clamp(2rem,7vw,3.4rem); font-weight:700; line-height:1.15; }
h2{ font-size:clamp(1.4rem,4.5vw,2rem); font-weight:700; line-height:1.2; }
h3{ font-size:clamp(1.1rem,3vw,1.3rem); font-weight:600; line-height:1.35; }

p{ color:var(--texto); }

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

.visualmente-oculto{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.salto{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--acento);
  color:var(--bg);
  padding:12px 20px;
  z-index:100;
  border-radius:0 0 var(--radio) 0;
}
.salto:focus{ left:0; }

/* ── Barra fija de contacto ─────────────────────────────────────────── */
.barra-contacto{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  z-index:50;
  border-top:2px solid var(--borde);
}
.barra-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  text-decoration:none;
  font-weight:600;
  font-size:0.9375rem;
}
.barra-btn svg{ fill:currentColor; }
.barra-whatsapp{ background:var(--acento); color:var(--bg); }
.barra-llamar{ background:var(--surface); color:var(--texto); border-left:2px solid var(--borde); }

main{ padding-bottom:76px; }

.eyebrow{
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--texto-suave);
  text-transform:uppercase;
}

/* ── Subrayado de tiza (dispositivo firma) ─────────────────────────── */
.tiza{ position:relative; display:inline-block; }
.subrayado{
  display:block;
  width:100%;
  height:12px;
  margin-top:2px;
  overflow:visible;
}
.subrayado path{
  fill:none;
  stroke:var(--acento);
  stroke-width:5;
  stroke-linecap:round;
  opacity:0.9;
}
.subrayado--h1{ position:absolute; left:0; bottom:-10px; }
h2 .subrayado--h2{
  display:inline-block;
  width:110px;
  vertical-align:-6px;
  margin-left:10px;
}

/* ── Layout general ─────────────────────────────────────────────────── */
.hero, .seccion, .cta-final, .pie, .confianza{
  max-width:var(--col-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}

.hero{
  padding-top:56px;
  padding-bottom:40px;
}
.hero-sub{
  margin-top:20px;
  max-width:56ch;
  color:var(--texto-suave);
  font-size:1.0625rem;
}
.hero-cta{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 24px;
  border-radius:var(--radio);
  font-weight:700;
  text-decoration:none;
  font-size:1rem;
}
.btn-primario{ background:var(--acento); color:var(--bg); }
.btn-secundario{ background:transparent; color:var(--texto); border:2px solid var(--texto); }

/* ── Franja de confianza ────────────────────────────────────────────── */
.confianza{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:20px;
  padding-bottom:20px;
  border-top:2px solid var(--borde);
  border-bottom:2px solid var(--borde);
}
.estado{
  font-weight:600;
  font-size:0.9375rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.estado::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--texto-suave);
}
.estado.abierto::before{ background:var(--acento); }
.estado.cerrado::before{ background:var(--texto-suave); }
.enlace-resenas{ font-weight:600; font-size:0.9375rem; }

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion{ padding-top:72px; }

/* Pasos del curso */
.lista-pasos{
  list-style:none;
  margin-top:32px;
  display:grid;
  gap:28px;
}
.lista-pasos li{
  display:flex;
  align-items:center;
  gap:20px;
}
.circulo-tiza{
  position:relative;
  flex:none;
  width:56px; height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.circulo-tiza svg{ position:absolute; inset:0; width:100%; height:100%; }
.circulo-tiza ellipse{
  fill:none;
  stroke:var(--acento);
  stroke-width:2.5;
}
.circulo-num{
  position:relative;
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  font-size:clamp(1.4rem,4vw,1.75rem);
  font-weight:700;
  line-height:1;
  color:var(--texto);
}
.lista-pasos p{ font-size:1.0625rem; }

/* Tarjetas-nota de servicios */
.grid-notas{
  margin-top:32px;
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}
.nota{
  background:var(--surface);
  border:2px solid var(--borde);
  border-radius:var(--radio);
  padding:20px;
}
.nota p{
  margin-top:8px;
  color:var(--texto-suave);
}

/* Razones */
.razones{
  margin-top:32px;
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
}
.razon p{
  margin-top:8px;
  color:var(--texto-suave);
}

/* Notas pegadas (reseñas) */
.notas-pegadas{
  margin-top:32px;
  display:grid;
  gap:28px;
  grid-template-columns:1fr;
}
.nota-pegada{
  background:var(--surface);
  border:2px solid var(--borde);
  border-radius:var(--radio);
  padding:24px;
}
.nota-pegada:nth-of-type(1){ transform:rotate(-1deg); }
.nota-pegada:nth-of-type(2){ transform:rotate(1deg); }
.nota-pegada p{ font-size:1.0625rem; }
.nota-pegada cite{
  display:block;
  margin-top:12px;
  font-style:normal;
  font-weight:600;
  color:var(--texto-suave);
  font-size:0.8125rem;
  letter-spacing:0.06em;
}

/* Ubicación */
.direccion{ margin-top:20px; color:var(--texto-suave); }
.tabla-horarios{
  margin-top:20px;
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:2px solid var(--borde);
  border-radius:var(--radio);
  overflow:hidden;
}
.tabla-horarios tr{ border-bottom:1px solid var(--borde); }
.tabla-horarios tr:last-child{ border-bottom:none; }
.tabla-horarios th,.tabla-horarios td{
  text-align:left;
  padding:12px 16px;
  font-weight:400;
}
.tabla-horarios th{ font-weight:600; }
.tabla-horarios td{ color:var(--texto-suave); }
#ubicacion .btn{ margin-top:24px; }

/* CTA final */
.cta-final{
  margin-top:72px;
  padding-top:48px;
  padding-bottom:48px;
  text-align:center;
  background:var(--acento);
  color:var(--bg);
  max-width:none;
  border-radius:0;
}
.cta-final > *{
  max-width:var(--col-max);
  margin-left:auto;
  margin-right:auto;
}
.cta-final h2{ color:var(--bg); }
.cta-final p{
  margin-top:12px;
  color:var(--bg);
}
.cta-final .btn{
  margin-top:24px;
  background:var(--bg);
  color:var(--texto);
}

/* Pie */
.pie{
  padding-top:32px;
  padding-bottom:96px;
  color:var(--texto-suave);
  font-size:0.875rem;
}
.pie p+p{ margin-top:8px; }
.pie a{ color:var(--acento-2); }

/* ── Escritorio ──────────────────────────────────────────────────────── */
@media (min-width:640px){
  .grid-notas{ grid-template-columns:1fr 1fr; }
  .razones{ grid-template-columns:1fr 1fr 1fr; }
  .notas-pegadas{ grid-template-columns:1fr 1fr; }
  .barra-contacto{ max-width:420px; left:auto; right:24px; bottom:24px; border-radius:var(--radio); overflow:hidden; box-shadow:none; border:2px solid var(--borde); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}