/* ==========================================================================
   E-Boost Monopatines — hoja de estilos
   Paleta 01 aprobada. Todos los pares color/fondo verificados contra WCAG 2.1:
   el verde de marca nunca es color de letra (2,02:1) — para texto va #45701F.
   ========================================================================== */

:root{
  /* Bloques */
  --verde:#7DC242;
  --verde-hover:#6BAB37;
  --azul-claro:#A9DCF2;
  --azul-claro-suave:#DCEFF9;
  --fondo:#F1F8FC;
  --blanco:#FFFFFF;

  /* Texto (contrastes verificados sobre --fondo) */
  --tinta:#12313F;        /* 12,74:1 */
  --tinta-2:#4A6975;      /* 4,5:1+  */
  --verde-texto:#45701F;  /* 5,45:1  */
  --enlace:#1C6E93;       /* 5,29:1  */

  --borde:#D3E6F0;
  --borde-suave:#E4F0F7;

  /* Destello de los botones: oscuro sobre fondo claro. Cada seccion que
     cambia de fondo redefine estas dos y los botones se adaptan solos. */
  --destello:#12313F;
  --tras-boton:var(--fondo);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cuerpo:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --ancho:1120px;
  --radio:10px;
  --sombra:0 1px 2px rgba(18,49,63,.05), 0 10px 30px rgba(18,49,63,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--cuerpo);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--enlace); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--tinta)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--verde-texto); outline-offset:3px; border-radius:4px;
}

.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 22px}

/* Enlace de salto para lectores de pantalla y teclado */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--blanco);
  padding:12px 18px; border-radius:0 0 8px 0; font-weight:600;
}
.saltar:focus{left:0}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.022em; text-wrap:balance; margin:0}
h1{font-size:clamp(31px,5vw,52px); line-height:1.05; font-weight:800}
h2{font-size:clamp(25px,3.4vw,36px); line-height:1.12; font-weight:800}
h3{font-size:clamp(19px,2.2vw,23px); line-height:1.2; font-weight:700}
h4{font-size:17px; line-height:1.3; font-weight:700}
p{margin:0 0 1.05em; max-width:68ch}
.bajada{font-size:clamp(17px,1.9vw,20px); color:var(--tinta-2); max-width:62ch}

.etiqueta{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--verde-texto);
  margin:0 0 14px;
}

/* ---------- Encabezado ---------- */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(241,248,252,.94);
  backdrop-filter:saturate(150%) blur(9px);
  -webkit-backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid var(--borde);
}
.cabecera-fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:13px 0; max-width:var(--ancho); margin:0 auto;
  padding-left:22px; padding-right:22px;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo:hover{color:inherit}
.logo-marca{
  width:42px; height:42px; flex:none; display:block;
}
.logo-txt{font-family:var(--display); font-weight:800; font-size:18px; color:var(--tinta); line-height:1.05}
.logo-txt small{
  display:block; font-family:var(--mono); font-weight:400; font-size:8.5px;
  letter-spacing:.22em; color:var(--tinta-2); margin-top:3px;
}

.nav{display:flex; align-items:center; gap:22px}
.nav a{
  font-size:14.5px; font-weight:500; color:var(--tinta-2);
  text-decoration:none; white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinta)}
.nav a[aria-current="page"]{font-weight:600; box-shadow:inset 0 -3px 0 var(--verde)}
/* En celular el menu no desaparece: pasa a una fila deslizable bajo el logo.
   (Un menu hamburguesa necesitaria JS y la CSP del sitio no lo permite.) */
@media (max-width:900px){
  .cabecera-fila{flex-wrap:wrap; row-gap:2px; padding-bottom:9px}
  .nav{
    order:3; width:100%; gap:18px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-top:9px; border-top:1px solid var(--borde-suave);
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:14px}
}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--verde); color:var(--tinta);
  font-family:var(--display); font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:8px; text-decoration:none;
  border:2px solid var(--verde); white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.boton:hover{color:var(--tinta)}
.boton-linea{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--tinta);
  font-family:var(--display); font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:8px; text-decoration:none;
  border:2px solid var(--borde); white-space:nowrap;
  transition:border-color .15s ease;
}
.boton-linea:hover{border-color:var(--tinta); color:var(--tinta)}
.boton-chico{font-size:14px; padding:9px 15px}
.ico{width:18px; height:18px; flex:none; fill:currentColor}

/* ---------- Secciones ---------- */
.seccion{padding:66px 0}
.seccion-blanca{background:var(--blanco); border-block:1px solid var(--borde-suave);
                --tras-boton:var(--blanco)}
.seccion-cabeza{margin-bottom:38px; max-width:64ch}
.seccion-cabeza p{margin-top:12px}

/* ---------- Hero ---------- */
.hero{padding:64px 0 58px}

/* ---------- Hero con foto de fondo (solo la home) --------------------------
   La foto va detras (::before) y encima un velo (::after) que arranca opaco
   del lado del texto y se desvanece hacia la derecha. Que el velo sea opaco
   donde hay texto es a proposito: asi el contraste esta garantizado sea cual
   sea la foto, y no depende de que la imagen sea clara u oscura.
   En pantallas angostas el texto ocupa todo el ancho, asi que el velo tapa
   casi todo y de la foto queda apenas una insinuacion abajo.              */
.hero-foto{position:relative; overflow:hidden; isolation:isolate}
/* Con foto, el texto se mantiene en la mitad izquierda para no invadirla. */
@media (min-width:901px){ .hero-foto .bajada{max-width:52ch} }
/* Con foto, la linea separadora de los datos no puede cruzarla de lado a lado:
   se reemplaza el borde por un degradado que se apaga hacia la derecha. */
@media (min-width:901px){
  .hero-foto .hero-datos{
    border-top:0;
    background:linear-gradient(90deg,
      var(--borde) 0%, var(--borde) 46%, transparent 72%) top left / 100% 1px no-repeat;
  }
}
.hero-foto::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:auto; z-index:-2;
  /* Franja fija a la derecha, con la foto ya recortada al monopatin, para que se
     vea entero. La mascara desvanece su borde izquierdo: sin ella quedaba un
     corte vertical duro que caia en distinto lugar segun el ancho de pantalla. */
  width:44%;
  background:url("/taller.webp?v=2") center right / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 34%);
}
.hero-foto::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* Abre apenas termina el texto: medido, el renglon mas largo llega al 54-56%
     en pantallas grandes. De ahi a la derecha la foto se ve limpia. */
  background:linear-gradient(96deg,
    var(--fondo) 0%, var(--fondo) 56%,
    rgba(241,248,252,.52) 63%, rgba(241,248,252,.12) 69%,
    rgba(241,248,252,0) 76%);
}
/* Entre 901 y 1199 el texto llega mas a la derecha (hasta el 62%), asi que el
   velo tiene que abrir mas tarde para no dejarlo sobre la foto. */
@media (max-width:1199px) and (min-width:901px){
  .hero-foto::after{
    background:linear-gradient(96deg,
      var(--fondo) 0%, var(--fondo) 63%,
      rgba(241,248,252,.52) 70%, rgba(241,248,252,.12) 77%,
      rgba(241,248,252,0) 84%);
  }
}

@media (max-width:900px){
  /* En celular el texto ocupa todo el ancho: no hay lado libre para la foto.
     Asi que la foto pasa a ser una franja al pie del hero, debajo del texto,
     con una version mas liviana para no gastar datos moviles de mas.       */
  .hero-foto{padding-bottom:214px}
  .hero-foto::before{
    top:auto; bottom:0; height:206px;
    background:url("/taller-movil.webp?v=2") center 42% / cover no-repeat;
  }
  .hero-foto::after{
    top:auto; bottom:0; height:206px;
    background:linear-gradient(180deg,
      var(--fondo) 0%, rgba(241,248,252,.22) 16%, rgba(241,248,252,0) 42%);
  }
}
/* Sin la foto el hero sigue funcionando igual: el velo es del color del fondo. */

.hero h1{margin-bottom:18px}
.hero .bajada{margin-bottom:28px}
.hero-acciones{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-datos{
  display:flex; gap:10px 26px; flex-wrap:wrap; margin-top:30px;
  padding-top:24px; border-top:1px solid var(--borde);
}
.hero-dato{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--tinta-2)}
.hero-dato svg{fill:var(--verde-texto); width:17px; height:17px; flex:none}
.hero-dato strong{color:var(--tinta); font-weight:600}

/* ---------- Grilla de tarjetas ---------- */
.grilla{display:grid; gap:18px}
.grilla-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grilla-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grilla-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.tarjeta{
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--radio); padding:24px; box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.tarjeta h3{margin-bottom:9px}
.tarjeta p{font-size:15.5px; color:var(--tinta-2); margin-bottom:16px}
.tarjeta p:last-child{margin-bottom:0}
.tarjeta .mas{margin-top:auto; font-weight:600; font-size:14.5px; text-decoration:none}
.tarjeta .mas::after{content:" \2192"}
.tarjeta-icono{
  width:44px; height:44px; border-radius:9px; background:var(--azul-claro-suave);
  display:grid; place-items:center; margin-bottom:15px; flex:none;
}
.tarjeta-icono svg{width:23px; height:23px; fill:var(--verde-texto)}

/* ---------- Lista de síntomas ---------- */
.sintomas{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.sintomas li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16px; color:var(--tinta-2); line-height:1.55;
}
.sintomas li::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--verde); flex:none; margin-top:8px;
}

/* ---------- Pasos numerados ---------- */
.pasos{list-style:none; padding:0; margin:0; display:grid; gap:20px; counter-reset:paso}
.pasos li{display:flex; gap:16px; align-items:flex-start; counter-increment:paso}
.pasos li::before{
  content:counter(paso); flex:none;
  width:33px; height:33px; border-radius:50%; background:var(--verde);
  display:grid; place-items:center; color:var(--tinta);
  font-family:var(--display); font-weight:800; font-size:15px;
}
.pasos strong{display:block; font-family:var(--display); font-size:17px; margin-bottom:2px}
.pasos span{color:var(--tinta-2); font-size:15.5px; line-height:1.55}

/* ---------- Bloque destacado ---------- */
.destacado{
  background:var(--azul-claro-suave); border:1px solid var(--azul-claro);
  border-radius:var(--radio); padding:26px 28px;
}
.destacado h3{margin-bottom:10px}
.destacado p:last-child{margin-bottom:0}

/* ---------- Garantía ---------- */
.tabla-envoltorio{overflow-x:auto; border-radius:var(--radio); border:1px solid var(--borde)}
table{border-collapse:collapse; width:100%; min-width:460px; background:var(--blanco)}
caption{
  text-align:left; padding:15px 20px; font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-2); border-bottom:1px solid var(--borde);
}
th{
  text-align:left; padding:13px 20px; font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-2); border-bottom:1px solid var(--borde); white-space:nowrap;
}
td{padding:14px 20px; border-bottom:1px solid var(--borde-suave); font-size:15.5px; color:var(--tinta-2)}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--tinta); font-weight:600}
td.plazo{font-family:var(--mono); font-weight:600; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- Marcador de contenido pendiente ---------- */
.pendiente{
  border:2px dashed var(--azul-claro); border-radius:var(--radio);
  background:var(--azul-claro-suave); padding:22px 24px; color:var(--tinta-2);
  font-size:15px;
}
.pendiente strong{color:var(--tinta); display:block; margin-bottom:5px; font-family:var(--display)}
.pendiente p:last-child{margin-bottom:0}

/* ---------- Franja de cierre ---------- */
/* Sobre navy el destello se invierte: claro sobre oscuro. */
.cierre{background:var(--tinta); color:var(--blanco); padding:58px 0;
        --destello:#EAF4F9; --tras-boton:var(--tinta)}
.cierre h2{color:var(--blanco); margin-bottom:14px}
.cierre p{color:#B9CFD9; max-width:56ch; margin-bottom:26px}
.cierre .boton{border-color:var(--verde)}
.cierre .boton-linea{color:var(--blanco); border-color:#3C5B69}
.cierre .boton-linea:hover{border-color:var(--blanco); color:var(--blanco)}
.cierre-acciones{display:flex; gap:12px; flex-wrap:wrap}


/* ---------- Destello girando en los botones -------------------------------
   Port a CSS puro del componente de 21st.dev: un cono de luz gira detras del
   boton (::before) y un recorte tapa el centro (::after), asi solo brilla el
   borde. Sin JS, no toca la CSP.
   El cono no va de transparente a destello, sino del color del borde normal
   al destello: asi el boton conserva su borde de siempre y el brillo lo
   recorre, en vez de aparecer y desaparecer.
   El color sale de --destello, que cada seccion redefine segun su fondo.
   Se anima transform, lo mas barato que compone la GPU.                     */
.boton, .boton-linea{
  position:relative; isolation:isolate; overflow:hidden;
  border-color:transparent;
}
.boton{ --borde-base:var(--verde);  --relleno:var(--verde) }
.boton-linea{ --borde-base:var(--borde); --relleno:var(--tras-boton) }
.cierre .boton-linea{ --borde-base:#3C5B69 }

.boton::before, .boton-linea::before{
  content:""; position:absolute; z-index:-2;
  inset:-150%; width:400%; height:400%;
  background:conic-gradient(from 0deg,
    var(--borde-base) 0deg, var(--destello) 55deg,
    var(--borde-base) 110deg, var(--borde-base) 360deg);
  animation:girar-luz 4.5s linear infinite;
}
.boton::after, .boton-linea::after{
  content:""; position:absolute; z-index:-1;
  inset:2px; border-radius:6px; background:var(--relleno);
  transition:background .15s ease;
}
.boton:hover::after{ background:var(--verde-hover) }
@keyframes girar-luz{ to{ transform:rotate(360deg) } }

/* Si el sistema pide menos movimiento, el destello se queda quieto. */
@media (prefers-reduced-motion: reduce){
  .boton::before, .boton-linea::before{ animation:none }
}

.tabla-nota{
  font-size:15px; color:var(--tinta-2); margin:14px 0 0; max-width:74ch;
  padding-left:14px; border-left:3px solid var(--borde);
}
.tabla-nota strong{color:var(--tinta)}

/* ---------- Pie ---------- */
.pie{background:var(--blanco); border-top:1px solid var(--borde); padding:46px 0 30px; font-size:15px}
.pie-grilla{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:34px}
@media (max-width:760px){ .pie-grilla{grid-template-columns:1fr; gap:26px} }
.pie h2{margin-bottom:13px; font-size:13px; font-family:var(--mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2); font-weight:600}
.pie ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.pie a{color:var(--tinta-2); text-decoration:none}
.pie a:hover{color:var(--tinta); text-decoration:underline}
.pie-desc{color:var(--tinta-2); font-size:15px; max-width:38ch; margin:13px 0 0}

.pie-legal{
  border-top:1px solid var(--borde-suave); padding-top:22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:14px; color:var(--tinta-2);
}
.credito-triplex{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--tinta-2)}
.credito-triplex:hover{color:var(--tinta)}
.credito-triplex svg{width:23px; height:23px; flex:none; border-radius:5px}
.credito-triplex strong{color:var(--tinta); font-weight:600}

/* La barra ancha de WhatsApp se saco: en celular tambien va la burbuja, que
   ocupa menos y no tapa el contenido. Se libera el padding que la compensaba. */


/* ---------- Burbuja flotante de WhatsApp ------------------------------------
   En escritorio, donde hay lugar de sobra al costado. En movil NO se muestra:
   ahi ya esta la barra ancha, que con mas area y el texto explicito convierte
   mejor que un circulo chico. Poner las dos seria repetir el mismo boton.   */
.wa-burbuja{
  position:fixed; right:22px; bottom:22px; z-index:120;
  display:none; width:64px; height:64px; border-radius:50%;
  box-shadow:0 6px 20px rgba(18,49,63,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-burbuja img{width:64px; height:64px; display:block}
.wa-burbuja:hover, .wa-burbuja:focus-visible{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 26px rgba(18,49,63,.36);
}
.wa-burbuja{display:block}
@media (max-width:900px){
  .wa-burbuja{width:58px; height:58px; right:16px; bottom:16px}
  .wa-burbuja img{width:58px; height:58px}
}
@media (prefers-reduced-motion: reduce){
  .wa-burbuja{transition:none}
  .wa-burbuja:hover, .wa-burbuja:focus-visible{transform:none}
}

/* ---------- Migas ---------- */
.migas{font-size:13.5px; color:var(--tinta-2); padding:20px 0 0}
.migas a{color:var(--tinta-2); text-decoration:none}
.migas a:hover{color:var(--tinta); text-decoration:underline}
.migas span{margin:0 7px; opacity:.6}

/* ---------- Utilidades ---------- */
.centrado{text-align:center}
.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}