/* ============================================================================
   La hoja de estilos de tukiuy.com. UNA sola, para todas las páginas.

   Hasta el 2026-09-15 cada página tenía su copia pegada en el <head>, y ya
   habían empezado a divergir. Lo que es propio de una página —el formulario
   de recarga, el de opinión— sigue en un <style> chico adentro de esa página.

   Fondo blanco siempre, sin tema oscuro, sin sombras ni brillos: lo pidió Iván
   el 2026-09-15 al ver la primera versión («muy IA»). Sencillo a propósito.

   Los verdes son los mismos de la app y por la misma razón: `--verde-marca` es
   FONDO (con `--sobre-verde` encima) y `--verde-fuerte` es lo que va como TEXTO.
   El manzana sobre blanco da 1,87:1 y no se lee.
   ========================================================================== */

:root{
  color-scheme:light;
  --verde-marca:#7ED321; --verde-fuerte:#3C7A12; --verde-suave:#F1FADF;
  --verde-encima:#6FBE1B;
  --sobre-verde:#14210B;
  --whatsapp:#25D366;
  --tinta:#0F1117; --tinta-2:#4B5059; --tinta-3:#667085; --tinta-suave:#61656F;
  /* El papel es el mismo gris de las franjas de la web nueva
     (`backgroundElement` en src/constants/theme.ts): las páginas estáticas y la
     app web tienen que verse como un solo sitio. */
  --fondo:#FFFFFF; --papel:#F4F5F8; --borde:#E3E5EB; --borde-fuerte:#808DA7;
  /* 1200 de contenido + 24 de margen por lado: el mismo contenedor que la web
     nueva (`ANCHO_SITIO` en src/web/medidas.ts). */
  --ancho:78rem; --ancho-texto:44rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
[hidden]{display:none !important}

h1{font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 .5rem}
h2{font-size:1.15rem;line-height:1.35;margin:2.75rem 0 .75rem}
h3{font-size:1rem;line-height:1.4;margin:1.75rem 0 .35rem}
p,li{color:var(--tinta-2)}
li{margin-bottom:.4rem}
strong{color:var(--tinta);font-weight:600}
a{color:var(--verde-fuerte)}
a:focus-visible,button:focus-visible{outline:2px solid var(--verde-fuerte);outline-offset:2px}

/* ---------------------------------------------------------------- cabecera

   La MISMA barra que la web nueva (src/web/nav.tsx) para quien no entró: el
   logo, cómo funciona, emprendedores, ayuda, tu opinión, y entrar o
   registrarse. Las medidas salen de ahí: 64 de alto, links de 14 con fondo al
   pasar el puntero, botones chicos de 36. «Iniciar sesión» y «Registrate» abren
   la ventana de entrar de la app (`/?entrar=1`): las formas de entrar
   viven en UN componente y no se copian acá.

   Los botones de la barra son `.nav-boton` y no `.boton` a propósito: /clave/
   y /volver/ estiran `.boton` a todo el ancho para el botón grande de su
   página, y eso no puede alcanzar a la barra. */

.saltar{position:absolute;left:-9999px;top:0;z-index:5}
.saltar:focus{left:1rem;top:.75rem;background:var(--fondo);padding:.4rem .8rem;border:2px solid var(--verde-fuerte);border-radius:.5rem}

.cabecera{border-bottom:1px solid var(--borde);background:var(--fondo);position:relative;z-index:2}
.cabecera-dentro{
  max-width:var(--ancho); margin:0 auto; padding:0 1.5rem; height:4rem;
  display:flex; align-items:center; gap:1.5rem;
}
.marca{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--tinta);border-radius:.6rem}
.marca svg{width:1.875rem;height:1.875rem;flex:none}
.marca span{font-weight:700;font-size:1.3rem;line-height:1;letter-spacing:-.02em}

.menu{display:flex;align-items:center;gap:.125rem;margin-left:auto}
.menu a{display:inline-flex;align-items:center;min-height:2.375rem;padding:0 .75rem;border-radius:.5rem;
  text-decoration:none;color:var(--tinta-suave);font-size:.875rem;font-weight:500;line-height:1.5}
.menu a:hover{color:var(--tinta);background:var(--papel)}
.menu a[aria-current="page"]{color:var(--tinta);font-weight:600}

.cuenta{display:flex;align-items:center;gap:.5rem}
.nav-boton{display:inline-flex;align-items:center;justify-content:center;min-height:2.25rem;padding:0 .75rem;
  border-radius:.75rem;border:1px solid var(--borde-fuerte);background:var(--fondo);color:var(--tinta);
  font-size:.8125rem;font-weight:600;line-height:1.45;text-decoration:none;white-space:nowrap}
.nav-boton:hover{background:var(--papel)}
.nav-boton.principal{background:var(--verde-marca);border-color:var(--verde-marca);color:var(--sobre-verde)}
.nav-boton.principal:hover{background:var(--verde-encima);border-color:var(--verde-encima)}

/* El menú del teléfono: un <details>, así anda sin JavaScript. */
.menu-movil{display:none;margin-left:auto;position:relative}
.menu-movil summary{list-style:none;cursor:pointer;width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary:hover{background:var(--papel)}
.menu-movil summary span,.menu-movil summary span::before,.menu-movil summary span::after{
  display:block;width:1.25rem;height:2px;border-radius:2px;background:var(--tinta);position:relative;content:""}
.menu-movil summary span::before{position:absolute;top:-6px}
.menu-movil summary span::after{position:absolute;top:6px}
.menu-movil[open] summary span{background:transparent}
.menu-movil[open] summary span::before{top:0;transform:rotate(45deg)}
.menu-movil[open] summary span::after{top:0;transform:rotate(-45deg)}
.menu-movil nav{position:absolute;right:0;top:calc(100% + .5rem);width:min(20rem,calc(100vw - 2rem));
  background:var(--fondo);border:1px solid var(--borde);border-radius:1rem;padding:.5rem;
  display:flex;flex-direction:column;gap:.125rem}
.menu-movil nav a{display:flex;align-items:center;min-height:2.75rem;padding:0 .75rem;border-radius:.6rem;
  color:var(--tinta);text-decoration:none;font-size:1rem}
.menu-movil nav a:hover{background:var(--papel)}
.menu-movil nav .nav-boton{justify-content:center;margin-top:.375rem;min-height:2.75rem;font-size:.9375rem}

@media (max-width:63.99rem){
  .menu,.cuenta{display:none}
  .menu-movil{display:block}
}
@media (max-width:44.99rem){
  .cabecera-dentro{padding:0 1rem}
}

/* ------------------------------------------------------------ cuerpo común */

.pagina{max-width:var(--ancho-texto);margin:0 auto;padding:2.5rem 1.25rem 4rem}
.pagina.angosta{max-width:38rem}
.fecha{color:var(--tinta-3);font-size:.85rem;margin:0 0 2rem}
.bajada{font-size:1.1rem;color:var(--tinta-2);margin:.5rem 0 2rem}

.caja{background:var(--verde-suave);border-left:3px solid var(--verde-marca);
  padding:1rem 1.25rem;margin:1.5rem 0}
.caja p{margin:0;color:var(--tinta-2)}
.caja p + p{margin-top:.6rem}
.caja strong{color:var(--tinta)}

table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.9rem}
th{text-align:left;font-size:.85rem;font-weight:600;color:var(--tinta);
  padding:.6rem .75rem;border-bottom:1px solid var(--borde)}
td{padding:.6rem .75rem;border-bottom:1px solid var(--borde);color:var(--tinta-2);vertical-align:top}
td:first-child{color:var(--tinta);font-weight:500}
.tabla{overflow-x:auto;border:1px solid var(--borde)}
.tabla table{margin:0}

.boton{
  display:inline-block; background:var(--verde-marca); color:var(--sobre-verde);
  font:inherit; font-weight:600; text-decoration:none; text-align:center;
  padding:.7rem 1.2rem; border-radius:.75rem; border:0; cursor:pointer;
}
.boton:hover{background:var(--verde-encima)}
.boton.secundario{background:var(--fondo);color:var(--tinta);border:1px solid var(--borde-fuerte)}
.boton.secundario:hover{background:var(--papel)}

/* Índice de las páginas largas (términos, privacidad, ayuda). */
.indice{border:1px solid var(--borde);padding:1rem 1.25rem;margin:0 0 2.5rem;font-size:.92rem}
.indice b{display:block;color:var(--tinta);margin-bottom:.4rem}
.indice ol,.indice ul{margin:0;padding-left:1.2rem;columns:2 16rem;column-gap:2rem}
.indice li{margin:0 0 .25rem;break-inside:avoid}

/* Caja con borde: lo que marca el límite de cada bloque. Sin sombra y sin
   degradé, que es lo que Iván marcó como «muy IA» en la primera versión. */
.tarjeta{border:1px solid var(--borde);border-radius:1rem;padding:1.35rem 1.25rem;background:var(--fondo)}
.tarjeta h3{margin:0 0 .35rem;font-size:1.05rem}
.tarjeta > :last-child{margin-bottom:0}

/* Banda a todo el ancho, para separar secciones con una línea que llega a los
   dos bordes de la pantalla. */
.banda{border-top:1px solid var(--borde)}
.banda.gris{background:var(--papel)}
.banda.gris .tarjeta{background:var(--fondo)}

/* --------------------------------------------------------------------- pie */

.pie{border-top:1px solid var(--borde);margin-top:0;background:var(--papel)}
.pie-dentro{
  max-width:var(--ancho); margin:0 auto; padding:2.75rem 1.5rem 2rem;
  display:grid; gap:2rem; grid-template-columns:1.4fr repeat(3,1fr);
}
@media (max-width:44.99rem){ .pie-dentro{grid-template-columns:1fr 1fr;padding:2.75rem 1rem 2rem} .pie-marca{grid-column:1 / -1} }
.pie-marca p{margin:.5rem 0 0;font-size:.9rem}
.pie h2{font-size:.9rem;color:var(--tinta);margin:.2rem 0 .6rem}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:0 0 .4rem;font-size:.92rem}
.pie li a{color:var(--tinta-2);text-decoration:none}
.pie li a:hover{color:var(--tinta);text-decoration:underline}
.pie-final{
  max-width:calc(var(--ancho) - 3rem); margin:0 auto; padding:1.25rem 0; border-top:1px solid var(--borde);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:.85rem; color:var(--tinta-3);
}
.pie-final a{color:var(--tinta-3)}
/* La línea de arriba del final llega justo hasta donde llega el contenido. */
@media (max-width:78rem){ .pie-final{margin:0 1.5rem} }
@media (max-width:44.99rem){ .pie-final{margin:0 1rem} }