/* nivela · sistema de diseño de la web (móvil primero, modo claro y oscuro) */
:root {
  /* Marca (01-10-2026): verde noche, menta, petróleo y tinta. Sin ámbar. */
  --marca-noche: #072420;
  --marca-menta: #34D399;
  --marca-petroleo: #0F766E;
  --marca-tinta: #0B2B26;
  --fondo: #FFFFFF;
  --superficie: #F0FDFA;
  --superficie-2: #D9F2EC;
  --texto: #0B2B26;
  --texto-suave: #3E5C57;
  --borde: #BFD8D2;
  --primario: #0F766E;
  --primario-hover: #115E59;
  --sobre-primario: #FFFFFF;
  --exito: #15803D;
  --aviso: #A16207;           /* amarillo de estado, siempre con icono y texto */
  --aviso-fondo: #FEFCE8;
  --error: #B91C1C;
  --error-fondo: #FEF2F2;
  --foco: #2563EB;
  --sombra: 0 1px 2px rgba(7, 36, 32, .06), 0 4px 16px rgba(7, 36, 32, .06);

  --t-14: .875rem; --t-16: 1rem; --t-18: 1.125rem; --t-22: 1.375rem;
  --t-28: 1.75rem; --t-36: 2.25rem; --t-48: 3rem;
  --e-4: .25rem; --e-8: .5rem; --e-12: .75rem; --e-16: 1rem; --e-24: 1.5rem;
  --e-32: 2rem; --e-48: 3rem; --e-64: 4rem; --e-96: 6rem;
  --radio: 12px;
  --ancho: 72rem;
  --lectura: 68ch;
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;
  --fuente-titulos: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #072420;
    --superficie: #0B302B;
    --superficie-2: #0F3D37;
    --texto: #E6EFEE;
    --texto-suave: #A7C4BE;
    --borde: #25524B;
    --primario: #34D399;
    --primario-hover: #6EE7B7;
    --sobre-primario: #072420;
    --exito: #4ADE80;
    --aviso: #FACC15;
    --aviso-fondo: #2A2608;
    --error: #F87171;
    --error-fondo: #2E1515;
    --foco: #93C5FD;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #072420;
  --superficie: #0B302B;
  --superficie-2: #0F3D37;
  --texto: #E6EFEE;
  --texto-suave: #A7C4BE;
  --borde: #25524B;
  --primario: #34D399;
  --primario-hover: #6EE7B7;
  --sobre-primario: #072420;
  --exito: #4ADE80;
  --aviso: #FACC15;
  --aviso-fondo: #2A2608;
  --error: #F87171;
  --error-fondo: #2E1515;
  --foco: #93C5FD;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 var(--t-18)/1.6 var(--fuente);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--primario); text-underline-offset: 3px; }
a:hover { color: var(--primario-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--primario); color: var(--sobre-primario); padding: var(--e-8) var(--e-16); z-index: 20; }
.saltar:focus { left: var(--e-16); }

h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.2; margin: 0 0 var(--e-16); letter-spacing: -.01em; }
h1 { font-size: var(--t-36); font-weight: 800; }
h2 { font-size: var(--t-28); font-weight: 800; }
h3 { font-size: var(--t-22); font-weight: 700; }
p, ul, ol { margin: 0 0 var(--e-16); }
.suave { color: var(--texto-suave); }
.pequeno { font-size: var(--t-14); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e-16); }
.lectura { max-width: var(--lectura); }
.seccion { padding: var(--e-48) 0; }
.seccion.gris { background: var(--superficie); }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--borde); background: var(--fondo); position: sticky; top: 0; z-index: 10; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--e-16); }
.logo { display: inline-flex; align-items: center; gap: var(--e-8); text-decoration: none; color: var(--texto); font: 800 var(--t-22)/1 var(--fuente-titulos); letter-spacing: -.02em; min-height: 44px; }
.logo svg { width: 30px; height: 32px; flex: none; }
.nav-escritorio { display: none; }
.nav-escritorio a { color: var(--texto); text-decoration: none; font-size: var(--t-16); padding: var(--e-8) var(--e-12); border-radius: 8px; }
.nav-escritorio a:hover, .nav-escritorio a[aria-current="page"] { background: var(--superficie); color: var(--primario); }
.menu-movil { position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; min-width: 48px; min-height: 48px; display: grid; place-items: center; border-radius: 8px; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary:hover { background: var(--superficie); }
.menu-movil nav { position: absolute; right: 0; top: 56px; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-8); min-width: 220px; display: grid; }
.menu-movil nav a { color: var(--texto); text-decoration: none; padding: var(--e-12) var(--e-16); border-radius: 8px; min-height: 44px; }
.menu-movil nav a:hover { background: var(--superficie); }
@media (min-width: 900px) {
  .nav-escritorio { display: flex; align-items: center; gap: var(--e-4); }
  .menu-movil { display: none; }
}

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8); min-height: 48px; padding: var(--e-12) var(--e-24); border-radius: 10px; font: 700 var(--t-16)/1.2 var(--fuente); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.boton.principal { background: var(--primario); color: var(--sobre-primario); }
.boton.principal:hover { background: var(--primario-hover); color: var(--sobre-primario); }
.boton.secundario { background: transparent; color: var(--primario); border-color: var(--primario); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.pequeno { min-height: 44px; padding: var(--e-8) var(--e-16); font-size: var(--t-14); }
.boton[disabled] { opacity: .55; cursor: not-allowed; }

/* Portada */
.hero { padding: var(--e-48) 0 var(--e-64); background: linear-gradient(170deg, var(--superficie-2) 0%, var(--fondo) 70%); }
.hero .etiqueta { display: inline-block; font: 700 var(--t-14) var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--primario); margin-bottom: var(--e-12); }
.hero h1 { font-size: var(--t-36); max-width: 20ch; }
.hero p { font-size: var(--t-18); max-width: 52ch; color: var(--texto-suave); }
.hero .acciones { display: flex; flex-wrap: wrap; gap: var(--e-12); align-items: center; margin-top: var(--e-24); }
@media (min-width: 900px) { .hero h1 { font-size: var(--t-48); } .hero { padding: var(--e-96) 0; } }

/* Tarjetas y rejillas */
.rejilla { display: grid; gap: var(--e-16); }
@media (min-width: 700px) { .rejilla.dos { grid-template-columns: repeat(2, 1fr); } .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-24); }
.seccion.gris .tarjeta { background: var(--fondo); }
.tarjeta h3 { font-size: var(--t-18); margin-bottom: var(--e-8); }
.tarjeta p:last-child, .tarjeta ul:last-child { margin-bottom: 0; }
.icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-2); color: var(--primario); margin-bottom: var(--e-12); }
.icono svg { width: 22px; height: 22px; }

/* Avisos */
.aviso { border-left: 4px solid var(--primario); background: var(--superficie); padding: var(--e-16); border-radius: 0 var(--radio) var(--radio) 0; margin: var(--e-24) 0; }
.aviso.importante { border-color: var(--aviso); background: var(--aviso-fondo); }
.aviso p:last-child { margin-bottom: 0; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; margin: var(--e-16) 0 var(--e-24); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-16); min-width: 520px; }
th, td { text-align: left; padding: var(--e-12) var(--e-16); border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--superficie); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* Precio */
.precio { font: 800 var(--t-48)/1 var(--fuente-titulos); color: var(--texto); }
.lista-check { list-style: none; padding: 0; }
.lista-check li { padding-left: var(--e-32); position: relative; margin-bottom: var(--e-12); }
.lista-check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--exito); font-weight: 800; }

/* Preguntas frecuentes */
.faq details { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 var(--e-16); margin-bottom: var(--e-12); background: var(--fondo); }
.faq summary { cursor: pointer; font-weight: 700; padding: var(--e-16) 0; min-height: 48px; list-style-position: outside; }
.faq details[open] summary { border-bottom: 1px solid var(--borde); margin-bottom: var(--e-12); }

/* Formularios */
.campo { display: grid; gap: var(--e-8); margin-bottom: var(--e-16); }
.campo label { font-weight: 600; font-size: var(--t-16); }
input[type="text"], input[type="email"], textarea, select {
  width: 100%; min-height: 48px; padding: var(--e-12); font: 400 var(--t-16)/1.5 var(--fuente);
  color: var(--texto); background: var(--fondo); border: 1.5px solid var(--borde); border-radius: 10px;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--primario); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 30%, transparent); }
.casilla { display: flex; gap: var(--e-12); align-items: flex-start; font-size: var(--t-16); margin-bottom: var(--e-16); }
.casilla input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--primario); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mensaje { padding: var(--e-12) var(--e-16); border-radius: 10px; margin: var(--e-16) 0; font-size: var(--t-16); }
.mensaje.ok { background: var(--superficie-2); color: var(--texto); border-left: 4px solid var(--exito); }
.mensaje.mal { background: var(--error-fondo); color: var(--texto); border-left: 4px solid var(--error); }

/* Artículos del blog y páginas legales */
.articulo { max-width: var(--lectura); }
.articulo h2 { font-size: var(--t-22); margin-top: var(--e-32); }
.articulo h3 { font-size: var(--t-18); margin-top: var(--e-24); }
.meta { font-size: var(--t-14); color: var(--texto-suave); margin-bottom: var(--e-24); }
.fuentes { font-size: var(--t-14); color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: var(--e-16); margin-top: var(--e-32); }
.pendiente { background: var(--aviso-fondo); color: var(--texto); border: 1px dashed var(--aviso); border-radius: 4px; padding: 0 var(--e-4); font-weight: 600; }

/* Pie */
.pie { background: var(--superficie); border-top: 1px solid var(--borde); padding: var(--e-48) 0 var(--e-32); font-size: var(--t-16); margin-top: var(--e-48); }
.pie .columnas { display: grid; gap: var(--e-24); }
@media (min-width: 700px) { .pie .columnas { grid-template-columns: 2fr 1fr 1fr; } }
.pie ul { list-style: none; padding: 0; }
.pie li { margin-bottom: var(--e-8); }
.pie a { color: var(--texto); }
.pie .legal-linea { border-top: 1px solid var(--borde); margin-top: var(--e-24); padding-top: var(--e-16); font-size: var(--t-14); color: var(--texto-suave); }

/* Banner de cookies */
.cookies { position: fixed; left: var(--e-16); right: var(--e-16); bottom: var(--e-16); z-index: 30; max-width: 40rem; margin: 0 auto; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e-16); font-size: var(--t-16); }
.cookies[hidden] { display: none; }
.cookies .acciones { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-top: var(--e-12); }
.cookies .acciones .boton { flex: 1 1 8rem; }

/* Tema */
.tema { background: none; border: 0; color: var(--texto); min-width: 48px; min-height: 48px; border-radius: 8px; cursor: pointer; }
.tema:hover { background: var(--superficie); }