/* ═══════════════ LA PALETA, EN CLARO Y EN OSCURO ═══════════════
 *
 * Antes habia tres sistemas de color en el sitio: la portada clara, las
 * 66 landings de sector (que viven en landing.css) y el resto de paginas,
 * cada una con su :root propio. Mismo producto, tres caras.
 *
 * Aqui esta la paleta unica. Se carga DESPUES del <style> de cada pagina,
 * asi que sus valores ganan sin tener que vaciar el :root de 108 ficheros.
 * Los nombres cubren los tres vocabularios que ya existian (--surface y
 * --s1 son el mismo papel con dos nombres) para que ninguna pagina se
 * quede sin color.
 *
 * EL CLARO ES EL MODO POR DEFECTO, porque es el de la portada y es lo
 * primero que ve quien llega. El oscuro se pide con data-tema="oscuro"
 * en <html>, que pone tema.js antes de pintar.
 *
 * POR QUE --accent-texto. El lima #BAFF29 sobre el crema da 1.2:1 de
 * contraste: invisible. Pero el lima es la marca y como RELLENO de boton
 * funciona en los dos modos. Asi que el lima se queda en --accent para
 * rellenar, y todo lo que es texto o borde usa --accent-texto, que en
 * oscuro ES el lima y en claro es el verde tinta. Por eso el modo oscuro
 * se ve exactamente igual que antes de este fichero.
 */

/* ── CLARO ───────────────────────────────────────────────── */
:root {
  --bg:            #F3F5F1;
  --surface:       #FFFFFF;   --s1: #FFFFFF;
  --surface-2:     #E9ECE4;   --s2: #E9ECE4;
                              --s3: #DFE3D8;

  --border:        rgba(16,24,10,.10);
  --border-fuerte: rgba(16,24,10,.18);

  --text:   #0E140C;  --ink: #0E140C;
  --cuerpo: #2C3328;
  --muted:  #59614F;
  /* Tiene que pasar sobre los TRES fondos claros, no solo sobre
     --bg: se usa en etiquetas que viven dentro de tarjetas. El
     #8A9183 de la portada daba 2.7:1 sobre --surface-2. */
  --muted-2:#5F6756;

  /* El lima rellena; el verde tinta escribe. */
  --accent:       #BAFF29;
  --accent-2:     #A9F010;
  --accent-texto: #3F6B00;
  --verde-tinta:  #3F6B00;
  --accent-dim:   rgba(186,255,41,.22);
  --accent-glow:  rgba(186,255,41,.45);

  /* El tinte de cada landing lo declara su propia pagina. Sobre claro,
     un naranja o un verde de marca se cae a 2:1, asi que para texto se
     usa una version mezclada con la tinta. El relleno sigue siendo el
     color de marca puro. */
  --tinte-texto: color-mix(in srgb, var(--tinte, #3F6B00) 58%, #0B1109);

  /* Colores de marca ajena (WhatsApp, Google) y de sector: el tono puro
     se queda para rellenos, y aqui va el que se puede leer. */
  --wa:     #0A7430;
  --star:   #7A5800;
  --food:   #9E4716;
  --violet: #5B2FD6;
  --gold:   #8A5A00;

  --card-1: #E9ECE4;
  --card-2: #FFFFFF;

  /* Las cuatro bandas que dan ritmo a las landings: en oscuro son
     grises teñidos, en claro son cremas teñidos del mismo lado. */
  --banda-calida:  #F8F2E8;
  --banda-fria:    #ECF2F5;
  --banda-ciruela: #F4EEF7;
  --banda-bosque:  #EBF2EC;

  --nav-fondo:     rgba(243,245,241,.94);
  --bg-hondo:      #E9ECE4;   /* el fondo un punto mas hondo que --bg */
  --sombra-figura: rgba(16,24,10,.18);

  --sombra-s: 0 1px 2px rgba(16,24,10,.05);
  --sombra-m: 0 10px 30px -12px rgba(16,24,10,.18);
  --sombra-l: 0 36px 70px -28px rgba(16,24,10,.30);

  color-scheme: light;
}

/* ── OSCURO ──────────────────────────────────────────────── */
:root[data-tema="oscuro"] {
  --bg:            #080808;
  --surface:       #111111;   --s1: #101010;
  --surface-2:     #161616;   --s2: #161616;
                              --s3: #1C1C1C;

  --border:        rgba(255,255,255,.06);
  --border-fuerte: rgba(255,255,255,.14);

  --text:   #F0F0F0;  --ink: #F0F0F0;
  --cuerpo: #B6B6B6;
  /* El #6E6E6E que traian las landings da 3.9:1 sobre el negro:
     por debajo de AA para texto pequeno, que es justo donde se
     usa (kickers, pies, metadatos). */
  --muted:  #8A8A8A;
  --muted-2:#9A9A9A;

  --accent:       #BAFF29;
  --accent-2:     #A9F010;
  --accent-texto: #BAFF29;
  --verde-tinta:  #BAFF29;
  --accent-dim:   rgba(186,255,41,.08);
  --accent-glow:  rgba(186,255,41,.40);

  --tinte-texto: var(--tinte, #BAFF29);

  --wa:     #25D366;
  --star:   #FBBC04;
  --food:   #FF8C42;
  --violet: #8B5CF6;
  --gold:   #FFD166;

  --card-1: #18220B;
  --card-2: #08090A;

  --banda-calida:  #1A1109;
  --banda-fria:    #091317;
  --banda-ciruela: #150C18;
  --banda-bosque:  #0A1410;

  --nav-fondo:     rgba(8,8,8,.94);
  --bg-hondo:      #050505;
  --sombra-figura: rgba(0,0,0,.55);

  --sombra-s: none;
  --sombra-m: none;
  --sombra-l: none;

  color-scheme: dark;
}

/* El fondo y el texto de la pagina, por si alguna los trae a fuego. */
body { background: var(--bg); color: var(--text); }


/* ── ISLAS OSCURAS ────────────────────────────────────────
 *
 * Hay trozos que son oscuros a proposito y lo seguiran siendo en los dos
 * modos: el pie, las maquetas del producto (una captura del tablero no
 * se vuelve clara porque la pagina lo sea) y el aviso de cookies.
 *
 * No se les escriben colores uno a uno: se les redefinen LAS VARIABLES
 * en el propio elemento. Como las propiedades personalizadas se heredan,
 * todo lo de dentro —tarjetas, titulares, grises, bordes— queda bien sin
 * tocar una sola regla mas. Esto es lo que faltaba antes: el pie se
 * quedo con texto oscuro sobre fondo oscuro.
 *
 * EL PIE VA EN #0E140C, el verde oscuro de la marca, en claro y en
 * oscuro. Dentro: blanco para leer y el lima para la marca, que sobre
 * ese verde da 14:1.
 */
footer,
.cta-banner,
.apa-pantalla,
.caso-foto,
.qc-mini,
.wa-phone,
#consentimiento {
  --bg:            #0E140C;
  --bg-hondo:      #0A0F09;
  --surface:       #182115;   --s1: #182115;
  --surface-2:     #1E2A1B;   --s2: #1E2A1B;
                              --s3: #253220;
  --border:        rgba(255,255,255,.10);
  --border-fuerte: rgba(255,255,255,.20);
  --text:   #FFFFFF;  --ink: #FFFFFF;
  --cuerpo: #C9D0C4;
  --muted:  #9BA394;
  --muted-2:#8A9183;
  --accent-texto: #BAFF29;
  --verde-tinta:  #BAFF29;
  --tinte-texto:  #BAFF29;
  --accent-dim:   rgba(186,255,41,.12);
  --nav-fondo:    rgba(14,20,12,.94);
  --wa:     #0A7430;
  --gold:   #FFD166;  --warning: #FFD166;
  --star:   #FBBC04;  --azul: #8AB4FF;
  --rojo:   #FF4B4B;
  --sombra-s: none; --sombra-m: none; --sombra-l: none;
  color: var(--text);
  color-scheme: dark;
}

footer,
.cta-banner { background: #0E140C; }
/* El subtitulo iba en blanco al 75% sobre el verde brillante: 2:1. Sobre
   el verde oscuro el blanco entero da 18.7:1 y no hace falta rebajarlo. */
.cta-banner .cta-banner-sub { color: var(--cuerpo); }
.cta-banner .cta-banner-title { color: var(--text); }
.cta-banner .cta-banner-btn { background: var(--accent-texto); color: #0B1200;
  border-color: var(--accent-texto); }

/* El interruptor */─────────────────────────────── */
.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  background: transparent; color: var(--text);
  border: 1px solid var(--border-fuerte); border-radius: 999px;
  cursor: pointer; padding: 0; line-height: 0;
  transition: border-color .2s, background .2s;
}
.tema-btn:hover { border-color: var(--accent-texto); background: var(--accent-dim); }
.tema-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Se ensena el sol o la luna, nunca los dos: el icono indica a donde vas. */
.tema-btn .tema-luna { display: block; }
.tema-btn .tema-sol  { display: none; }
:root[data-tema="oscuro"] .tema-btn .tema-luna { display: none; }
:root[data-tema="oscuro"] .tema-btn .tema-sol  { display: block; }

/* El recuadro donde iria el QR de ejemplo: era gris medio sobre gris
   medio, 1.1:1 en los dos modos. */
.dv-qr { background: var(--surface-2); color: var(--muted); }

/* La inicial dentro del avatar iba en negro sobre el verde: 3.5:1. */
.wa-avatar { color: #FFFFFF; }

/* Etiquetas y avatares que ponian un gris medio sobre otro gris medio. */
.pick-badge.them { background: var(--surface-2); color: var(--muted); }
.testimonial-avatar { background: var(--azul); color: var(--bg); }

/* Las etiquetas de categoria del blog. Los tonos pastel originales
   (#46D19D, #A78BFA) sobre blanco dan 1.9:1 y 2.7:1; aqui van los
   mismos colores llevados a un tono que se lee, y en oscuro vuelven
   a ser los pastel de siempre. */
:root { --cat-verde: #0C6B4D; --cat-lila: #5B3FBE; --rojo: #B3261E;
  /* Varias paginas escriben var(--warning, #FFD166). Sin definirla
     caia siempre en el ambar, que sobre el crema da 1.3:1. */
  --warning: #8A5A00; --azul: #1B4FD1; }
:root[data-tema="oscuro"] { --cat-verde: #46D19D; --cat-lila: #A78BFA; --rojo: #FF4B4B;
  --warning: #FFD166; --azul: #8AB4FF; }