/* Sitio público de Tendex: portada y documentos legales. Colores de
   lib/utils/app_palette.dart: verde de marca para acciones y enlaces, lima solo
   como acento, bosque para la franja de descarga. Claro y tranquilo: fondo
   blanco, menta suave para separar, tarjetas blancas, poco texto por bloque. */

@font-face { font-family: Sora; font-weight: 600; font-display: swap; src: url(panel/fuentes/Sora-600.ttf) format('truetype'); }
@font-face { font-family: Sora; font-weight: 700; font-display: swap; src: url(panel/fuentes/Sora-700.ttf) format('truetype'); }
@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url(panel/fuentes/Figtree-400.ttf) format('truetype'); }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(panel/fuentes/Figtree-600.ttf) format('truetype'); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(panel/fuentes/Figtree-700.ttf) format('truetype'); }

:root {
  --blanco: #ffffff;
  --menta: #f2f7ef;
  --menta-2: #e4f0de;
  --borde: #dfe8d6;
  --texto: #0d1f13;
  --texto-2: #41543f;
  --texto-3: #58695a;
  --marca: #157a3a;
  --marca-fuerte: #0e5a2a;
  --lima: #8bdb1f;
  --bosque: #0b3d20;
  --peligro: #be123c;
  --radio: 16px;
  --sombra: 0 1px 2px rgb(13 31 19 / 4%), 0 10px 30px rgb(13 31 19 / 6%);
  --ancho: 1140px;
  --rapido: 180ms;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font: 17px/1.6 Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Sora, Figtree, sans-serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: var(--marca); text-underline-offset: 3px; }
a:hover { color: var(--marca-fuerte); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.saltar { position: absolute; left: 16px; top: -48px; background: var(--blanco); padding: 8px 14px; z-index: 20; }
.saltar:focus { top: 12px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.suave { color: var(--texto-2); }
.icono { width: 20px; height: 20px; flex: none; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font: 600 16px/1.2 Figtree, sans-serif; text-decoration: none;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-fuerte); color: #fff; }
.btn-linea { background: var(--blanco); color: var(--marca-fuerte); border-color: #b9d2b0; }
.btn-linea:hover { border-color: var(--marca); color: var(--marca-fuerte); }
.btn-chico { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.btn .icono { width: 18px; height: 18px; }

/* Google Play: negro con letras blancas, como el distintivo oficial. La ficha
   solo abre para testers mientras la app siga en prueba cerrada
   (docs/SITIO_WEB.md §2). */
.tienda {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 7px 22px 7px 16px;
  border-radius: 12px; border: 1px solid #3c4043; background: #000; color: #fff; text-decoration: none; line-height: 1.1;
  transition: background-color var(--rapido), transform var(--rapido);
}
.tienda .play { width: 24px; height: 26px; flex: none; }
.tienda small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tienda strong { display: block; font: 600 20px Figtree, sans-serif; letter-spacing: -0.01em; }
.tienda:hover { background: #1f1f1f; color: #fff; transform: translateY(-1px); }

/* ── Cabecera fija ───────────────────────────────────────────────────── */
.sitio-cabecera { position: sticky; top: 0; z-index: 10; background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--borde); backdrop-filter: blur(10px); }
.sitio-cabecera .envoltura { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font: 700 20px Sora, sans-serif; letter-spacing: -0.02em; }
.marca:hover { color: var(--texto); }
.marca img { width: 32px; height: 32px; border-radius: 8px; }
.sitio-nav { display: flex; gap: 2px; margin-inline: auto; }
.sitio-nav a { color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; transition: color var(--rapido), background-color var(--rapido); }
.sitio-nav a:hover { color: var(--marca-fuerte); background: var(--menta); }
.cabecera-acciones { display: flex; gap: 8px; }
@media (max-width: 980px) {
  .sitio-cabecera .envoltura { flex-wrap: wrap; gap: 0 12px; padding-block: 10px 0; }
  .cabecera-acciones, .sitio-cabecera > .envoltura > .btn { margin-inline-start: auto; }
  .cabecera-acciones .btn-primario { display: none; }
  /* En teléfono la navegación pasa a una fila que se desliza: sin menú oculto. */
  .sitio-nav { order: 3; width: calc(100% + 24px); margin: 6px -12px 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  .sitio-nav a { white-space: nowrap; }
}

/* ── Secciones ───────────────────────────────────────────────────────── */
.seccion { padding-block: 88px; }
/* Fondos con vida: menta con resplandores suaves del lima y la hoja del logo. */
.menta {
  background:
    radial-gradient(520px 320px at 92% 8%, rgb(139 219 31 / 18%), transparent 70%),
    radial-gradient(480px 320px at 4% 96%, rgb(47 168 58 / 12%), transparent 70%),
    linear-gradient(180deg, #f2f7ef, #e8f3e1);
}
.cabeza { max-width: 40em; margin-bottom: 40px; }
.cabeza.centro { margin-inline: auto; text-align: center; }
.cabeza h2 { font-size: clamp(28px, 3.2vw, 40px); }
.cabeza p { margin-top: 14px; font-size: 18px; color: var(--texto-2); }
@media (max-width: 700px) { .seccion { padding-block: 64px; } .cabeza { margin-bottom: 28px; } }

/* ── Portada ─────────────────────────────────────────────────────────── */
.portada {
  position: relative; overflow: hidden; padding-block: 64px 72px;
  background:
    radial-gradient(640px 420px at 88% 18%, rgb(139 219 31 / 26%), transparent 70%),
    radial-gradient(560px 380px at 6% 100%, rgb(47 168 58 / 16%), transparent 70%),
    linear-gradient(180deg, #f2f7ef, #e6f2df);
}
/* Rejilla de puntos detrás de la captura, que se desvanece hacia el texto. */
.portada::before {
  content: ''; position: absolute; top: 32px; right: 0; width: 46%; height: 70%; pointer-events: none;
  background: radial-gradient(rgb(21 122 58 / 22%) 1.3px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  mask-image: linear-gradient(to left, #000 30%, transparent);
}
.portada .envoltura { position: relative; }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.portada h1 { font-size: clamp(34px, 3.6vw, 48px); }
.portada .lead { font-size: 19px; margin-top: 20px; max-width: 30em; color: var(--texto-2); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.nota-acceso { font-size: 15px; margin-top: 14px; color: var(--texto-3); max-width: 32em; }
/* Junto a «Quiero probar Tendex»: el correo para dudas o cotizaciones. */
.nota-dudas { font-size: 15px; margin-top: 8px; color: var(--texto-2); max-width: 34em; }
.nota-dudas a { font-weight: 600; }
.descarga .nota-dudas { color: #dceadb; }
.descarga .nota-dudas a { color: var(--lima); }
.acceso-usuario { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 16px; color: var(--texto-2); }
.acceso-usuario a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.acceso-usuario a:hover { text-decoration: underline; }
.acceso-usuario .icono { width: 16px; height: 16px; }
.vitrina { margin: 0; }
/* La imagen ya trae su marco (portátil y teléfono) y su sombra: marketing/web. */
.vitrina img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) {
  .portada { padding-block: 48px; }
  .portada .envoltura { grid-template-columns: 1fr; gap: 40px; }
}

/* Cuatro pilares en una sola tarjeta, bajo la portada. */
.pilares {
  position: relative; margin-top: 40px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pilares > div { padding: 28px; }
.pilares > div + div { border-inline-start: 1px solid var(--borde); }
.pilares h3 { font-size: 17px; margin: 16px 0 6px; }
.pilares p { font-size: 15px; color: var(--texto-2); }
.pilares > div { transition: background-color var(--rapido); }
.pilares > div:hover { background: var(--menta); }
.pilares > div:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.pilares > div:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.sello { width: 44px; height: 44px; border-radius: 12px; background: var(--marca); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgb(21 122 58 / 25%); }
.sello .icono { width: 22px; height: 22px; }
.tras-portada { padding-top: 40px; }
@media (max-width: 900px) {
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilares > div:nth-child(3) { border-inline-start: 0; }
  .pilares > div:nth-child(n + 3) { border-top: 1px solid var(--borde); }
}
@media (max-width: 560px) {
  .pilares { grid-template-columns: 1fr; }
  .pilares > div + div { border-inline-start: 0; border-top: 1px solid var(--borde); }
  .pilares > div { padding: 22px; }
}

/* Funciones: lista de módulos y el panel en el celular. */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 64px; align-items: center; }
/* Funciones dentro de una tarjeta grande con fondo verde suave. */
.bloque {
  position: relative; overflow: hidden; border: 1px solid #d3e6c8; border-radius: 28px; padding: 56px;
  background:
    radial-gradient(420px 300px at 100% 0%, rgb(139 219 31 / 28%), transparent 70%),
    linear-gradient(135deg, #f4faef 0%, #e1f0d6 100%);
}
.bloque .cabeza { margin-bottom: 32px; }
.modulos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.modulos li { position: relative; padding-inline-start: 36px; }
.modulos li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); }
.modulos li::after { content: ''; position: absolute; left: 7px; top: 9px; width: 8px; height: 4px; border-inline-start: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
@media (max-width: 700px) { .bloque { padding: 32px 20px; border-radius: 20px; } }
.modulos strong { display: block; font-weight: 700; }
.modulos span { font-size: 15px; color: var(--texto-2); }
.telefono { margin: 0; justify-self: center; max-width: 380px; }
.telefono img { display: block; width: 100%; height: auto; }
.telefono figcaption { font-size: 13px; color: var(--texto-3); text-align: center; margin-top: 12px; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 560px) { .modulos { grid-template-columns: 1fr; } }

/* Tipos de negocio: etiquetas. */
.negocios { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.negocios li { padding: 10px 18px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde); font-weight: 600; font-size: 15px; }

/* Con qué funciona: logos guardados en img/marcas/ (la CSP no deja cargarlos de afuera). */
.servicios { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 980px; }
.servicio {
  display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; padding: 26px 18px;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra);
  transition: transform var(--rapido), border-color var(--rapido);
}
.servicio:hover { transform: translateY(-2px); border-color: var(--marca); }
.servicio img { width: 44px; height: 44px; margin-bottom: 6px; object-fit: contain; }
.servicio-nombre { font-family: Sora, Figtree, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--texto); }
.servicio-texto { font-size: 14px; color: var(--texto-3); }
.servicios-nota { margin: 28px auto 0; max-width: 44em; text-align: center; font-size: 13px; color: var(--texto-3); }
@media (max-width: 860px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .servicios { grid-template-columns: 1fr; } }

/* ── Planes ──────────────────────────────────────────────────────────── */
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; border: 0; padding: 0; margin: 0; min-width: 0; }
.plan {
  position: relative; overflow: hidden; border: 1px solid #cfe3c3; border-radius: var(--radio);
  background: linear-gradient(180deg, #f6fbf2 0%, #e9f4e1 100%);
  display: flex; flex-direction: column; cursor: pointer; box-shadow: 0 1px 2px rgb(13 31 19 / 4%), 0 8px 22px rgb(21 122 58 / 7%);
  transition: transform var(--rapido), box-shadow var(--rapido);
}
.plan > :not(.plan-cabeza) { margin-inline: 28px; }
.plan:hover { box-shadow: var(--sombra); transform: translateY(-4px); }
.plan:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 4px; }
/* Cabecera verde: más profunda cuanto mayor es el plan. */
.plan-cabeza {
  --verde: var(--marca);
  padding: 26px 28px 24px; color: #fff;
  background: radial-gradient(260px 160px at 100% 0%, rgb(139 219 31 / 38%), transparent 70%), var(--verde);
}
.plan:nth-child(3) .plan-cabeza { --verde: var(--marca-fuerte); }
.plan:nth-child(4) .plan-cabeza { --verde: var(--bosque); }
.plan h3 { font-size: 22px; color: #fff; }
.plan .para { color: #e3f1dd; margin-top: 6px; font-size: 15px; min-height: 3em; }
.precio { margin-top: 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.precio .cifra { font: 700 34px/1 Sora, sans-serif; letter-spacing: -0.03em; }
.precio .unidad { font-size: 14px; color: #d3e8cc; }
/* Lo que cuesta subir desde un plan menor (la diferencia de precio). */
.plan .mejora { margin-top: 10px; font-size: 13px; line-height: 1.45; color: #e3f1dd; min-height: 2.9em; }
.plan .mejora strong { color: #fff; }
/* El plan recomendado: sello lima y un borde que lo destaca. */
.plan-sello {
  position: absolute; top: 16px; right: 16px; padding: 3px 10px; border-radius: 999px;
  background: var(--lima); color: var(--bosque); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.plan:has(.plan-sello) { border: 2px solid var(--lima); }
.topes { margin: 18px 0 0; padding: 0 0 14px; border-bottom: 1px solid var(--borde); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.topes dt { font-size: 13px; color: var(--texto-3); }
.topes dd { margin: 0; font-weight: 700; font-size: 15px; }
.incluye { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.plan ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 15px; }
.plan li { padding-inline-start: 24px; position: relative; }
.plan li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-inline-start: 2px solid var(--marca); border-bottom: 2px solid var(--marca); transform: rotate(-45deg); }
/* Toda la tarjeta es el control (radio oculto): tocarla la agranda un poco para
   leerla mejor. No se «elige» nada: la compra se hace en la app. */
.plan { padding-bottom: 28px; }
.plan-elegir { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; }
.plan:has(input:checked) {
  transform: scale(1.04); z-index: 1;
  box-shadow: 0 0 0 3px var(--lima), 0 18px 44px rgb(13 31 19 / 16%);
}
.plan:has(input:checked):hover { transform: scale(1.04) translateY(-2px); }
@media (max-width: 960px) { .plan:has(input:checked), .plan:has(input:checked):hover { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .plan:has(input:checked), .plan:has(input:checked):hover, .plan:hover { transform: none; } }
#planes {
  background:
    radial-gradient(700px 380px at 50% 0%, rgb(139 219 31 / 14%), transparent 70%),
    radial-gradient(500px 300px at 100% 100%, rgb(47 168 58 / 8%), transparent 70%);
}
.planes-pie { margin-top: 20px; text-align: center; color: var(--texto-2); font-size: 15px; }

/* Selector Mensual / Anual / Pago único (sin JS): tres radios; la píldora
   blanca se desliza al elegido y cada tarjeta muestra su tarifa. Sin :has(),
   se ve solo el precio mensual. */
.cobro {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%; max-width: 480px; margin: 0 auto 28px; padding: 5px; border: 1px solid #cfe3c3;
  border-radius: 999px; background: var(--menta-2); min-width: 0;
}
.cobro label {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; min-height: 44px; padding: 6px 10px; border-radius: 999px; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--texto-2); cursor: pointer;
  transition: color var(--rapido);
}
.cobro label:hover { color: var(--marca-fuerte); }
.cobro input:checked + label { color: var(--bosque); }
.cobro input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }
.cobro .ahorro {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--lima); color: var(--bosque); white-space: nowrap;
}
.cobro-indicador {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3);
  border-radius: 999px; background: var(--blanco); box-shadow: 0 2px 8px rgb(13 31 19 / 12%);
  transition: transform 260ms cubic-bezier(.3, .7, .2, 1);
}
.cobro:has(#cobro-anio:checked) .cobro-indicador { transform: translateX(100%); }
.cobro:has(#cobro-unico:checked) .cobro-indicador { transform: translateX(200%); }
@media (prefers-reduced-motion: reduce) { .cobro-indicador { transition: none; } }
@media (max-width: 420px) {
  .cobro label { font-size: 14px; padding-inline: 6px; }
  .cobro .ahorro { font-size: 10px; }
}

.tarifa { display: none; }
.tarifa-mes { display: block; }
.planes-zona:has(#cobro-anio:checked) .tarifa-mes,
.planes-zona:has(#cobro-unico:checked) .tarifa-mes { display: none; }
.planes-zona:has(#cobro-anio:checked) .tarifa-anio,
.planes-zona:has(#cobro-unico:checked) .tarifa-unico { display: block; animation: tarifa-entra 260ms ease-out; }
@keyframes tarifa-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tarifa { animation: none !important; } }

/* Antetítulo de la portada: una línea cálida antes del título. */
.antetitulo {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 999px;
  background: var(--menta-2); color: var(--marca-fuerte); font-weight: 700; font-size: 14px;
}
@media (max-width: 960px) { .planes { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan .para { min-height: 0; } }

/* Facturación electrónica: aún no disponible, sin acción. */
.plan-futuro {
  margin: 24px auto 0; max-width: 820px; display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(135deg, #fbfdf6, #eef8e2); border: 1px dashed #9fcf6a; border-radius: var(--radio); padding: 24px 28px;
  transition: border-color var(--rapido), transform var(--rapido);
}
.plan-futuro:hover { border-color: var(--marca); transform: translateY(-2px); }
.plan-futuro h3 { font-size: 18px; }
.plan-futuro p { margin-top: 6px; font-size: 15px; color: var(--texto-2); }
.plan-futuro .estado { margin-top: 10px; font-size: 14px; color: var(--texto-3); }
.etiqueta { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fdf3e2; color: #8a4005; font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) { .plan-futuro { flex-direction: column; gap: 12px; } }

.mas-info { margin-top: 16px; text-align: center; font-size: 15px; }

/* Descarga: una franja compacta. */
.descarga {
  background: var(--bosque); color: #dceadb; border-radius: 24px; padding: 48px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center;
}
.descarga h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); }
.descarga p { margin-top: 12px; max-width: 34em; }
.descarga {
  background:
    radial-gradient(420px 260px at 100% 0%, rgb(139 219 31 / 30%), transparent 70%),
    radial-gradient(360px 240px at 0% 100%, rgb(47 168 58 / 30%), transparent 70%),
    var(--bosque);
}
.descarga .acciones { margin-top: 0; justify-content: flex-end; }
.btn-lima { background: var(--lima); color: var(--bosque); }
.btn-lima:hover { background: #a3e635; color: var(--bosque); }
@media (max-width: 860px) { .descarga { grid-template-columns: 1fr; padding: 32px 24px; } .descarga .acciones { justify-content: flex-start; } }

/* Preguntas */
.preguntas-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.preguntas-rejilla .cabeza { margin-bottom: 0; }
.preguntas { border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 700; font-size: 17px; transition: color var(--rapido); }
.preguntas summary:hover { color: var(--marca-fuerte); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 Figtree, sans-serif; color: var(--marca); }
.preguntas details[open] summary::after { content: '−'; }
.preguntas details > div { padding: 0 0 20px; color: var(--texto-2); max-width: 64ch; font-size: 16px; }
.preguntas details > div p + p { margin-top: 10px; }
@media (max-width: 860px) { .preguntas-rejilla { grid-template-columns: 1fr; gap: 24px; } }

/* Nosotros y contacto */
.nosotros { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.nosotros p + p { margin-top: 14px; }
.nosotros .texto { color: var(--texto-2); }
.nosotros .lema { margin-top: 22px; font: 700 clamp(19px, 2.2vw, 23px)/1.35 Sora, sans-serif; color: var(--marca-fuerte); letter-spacing: -0.01em; text-wrap: balance; }
.contacto {
  border-radius: var(--radio); padding: 28px; color: #e3f1dd; box-shadow: var(--sombra);
  background: radial-gradient(300px 200px at 100% 0%, rgb(139 219 31 / 35%), transparent 70%), var(--marca);
}
.contacto h3 { font-size: 20px; color: #fff; }
.contacto dl { margin: 16px 0 20px; display: grid; gap: 14px; }
.contacto dt { font-size: 14px; color: #d3e8cc; }
.contacto dd { margin: 2px 0 0; font-weight: 600; color: #fff; }
.contacto a { color: #fff; }
.contacto a:hover { color: #fff; text-decoration-thickness: 2px; }
.contacto .suave { color: #e3f1dd; }
@media (max-width: 860px) { .nosotros { grid-template-columns: 1fr; gap: 32px; } }

/* ── Pie ─────────────────────────────────────────────────────────────── */
.sitio-pie { background: var(--blanco); border-top: 1px solid var(--borde); padding-block: 48px 32px; font-size: 15px; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.sitio-pie h2 { font: 700 14px Figtree, sans-serif; color: var(--texto); margin-bottom: 12px; letter-spacing: 0; }
.sitio-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sitio-pie a { color: var(--texto-2); text-decoration: none; }
.sitio-pie a:hover { color: var(--marca); text-decoration: underline; }
.sitio-pie .marca { margin-bottom: 12px; }
.pie-final { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--borde); color: var(--texto-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
@media (max-width: 800px) { .pie-rejilla { grid-template-columns: 1fr; gap: 28px; } }

/* ── Documentos legales ──────────────────────────────────────────────── */
/* Mismo fondo menta de la portada; el documento, en una tarjeta blanca. */
body.pagina-doc {
  background:
    radial-gradient(640px 420px at 92% 0%, rgb(139 219 31 / 20%), transparent 70%),
    radial-gradient(560px 380px at 0% 40%, rgb(47 168 58 / 10%), transparent 70%),
    linear-gradient(180deg, #f2f7ef, #e8f3e1) no-repeat;
  background-attachment: fixed;
}
.doc-fondo { padding: 48px 24px 80px; }
main.doc {
  max-width: 820px; margin: 0 auto; padding: 48px 56px 56px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 24px; box-shadow: var(--sombra);
}
@media (max-width: 700px) { .doc-fondo { padding: 24px 12px 48px; } main.doc { padding: 28px 20px 32px; border-radius: 18px; } }
main.doc h1 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 12px; }
main.doc h2 { font-size: 21px; margin: 2.4rem 0 .6rem; }
main.doc p, main.doc ul, main.doc ol { margin: 0 0 1rem; }
main.doc li + li { margin-top: .35rem; }
main.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 15px; }
main.doc th, main.doc td { text-align: start; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--borde); vertical-align: top; }
main.doc th { font-weight: 600; }
.tabla-desliza { overflow-x: auto; }
.nota { color: var(--texto-2); }
.indice-doc { background: var(--menta); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 20px; margin: 24px 0; font-size: 15px; }
.indice-doc ul { margin: 6px 0 0; padding-inline-start: 18px; }
.indice-doc li + li { margin-top: 2px; }

/* Página de eliminación de cuenta */
button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; }
.peligro { background: var(--peligro); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
#confirmar, #estado { margin-top: 1.25rem; }
.g_id_signin { margin: 1.5rem 0; }

/* 404 */
.no-encontrada { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 16px; padding: 48px 24px; }
.no-encontrada .acciones { justify-content: center; margin-top: 8px; }