/* TermoCalc — versión ecológica (clara). Se carga después de estilos.css:
   papel reciclado, verde musgo como color principal, terracota y verde hoja de acento. */
:root {
  --fondo: #f7f5ec;
  --fondo-2: #edf0e2;
  --tarjeta: #fffdf6;
  --tarjeta-2: #f3f4e8;
  --borde: #d9dec8;
  --texto: #1d2b1c;
  --texto-2: #4c5948;
  --texto-3: #758070;
  --cian: #2f6b2c;            /* musgo */
  --cian-2: #24561f;
  --cian-suave: rgba(47, 107, 44, .1);
  --violeta: #a85a25;         /* terracota */
  --violeta-suave: rgba(168, 90, 37, .1);
  --musgo: #2f6b2c;
  --hoja: #6a9a2b;
  --terracota: #a85a25;
  --arcilla: #c98a3c;
  --radio: 18px;
  --hoja-radio: 26px 6px 26px 6px;
  --sombra: 0 20px 40px -24px rgba(40, 60, 25, .35);
  --titulos: "Fraunces", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

/* Papel: una textura muy suave de fibras */
body {
  background-color: var(--fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

h1, h2, h3, .marca { font-family: var(--titulos); letter-spacing: -.01em; }
h1 { font-weight: 700; }
h2 { font-weight: 650; }
h3 { font-weight: 600; }

.boton { border-radius: 999px; }
.boton-primario { color: #fff; background: var(--musgo); }
.boton-primario:hover { background: var(--cian-2); }
.boton-secundario { background: var(--tarjeta); border-color: var(--borde); }
.boton-secundario:hover { border-color: var(--musgo); }

.barra { background: rgba(247, 245, 236, .9); border-bottom-color: var(--borde); }
.marca-logo { background: linear-gradient(135deg, #8fbf4a, #2f6b2c); border-radius: 14px 4px 14px 4px; box-shadow: 0 6px 16px -6px rgba(47, 107, 44, .6); }
.menu a:hover { color: var(--musgo); }

/* Portada: luz de bosque */
.portada::before {
  background:
    radial-gradient(560px 360px at 15% 25%, rgba(106, 154, 43, .2), transparent 70%),
    radial-gradient(460px 320px at 88% 10%, rgba(201, 138, 60, .16), transparent 70%);
}
.etiqueta { color: var(--musgo); border-color: rgba(47, 107, 44, .28); font-family: var(--fuente); }
.etiqueta.violeta { color: var(--terracota); border-color: rgba(168, 90, 37, .3); }
.portada h1 span { background-image: linear-gradient(90deg, #2f6b2c, #6a9a2b); }
.portada-imagen {
  border-radius: 34px 10px 34px 10px;
  background: linear-gradient(160deg, #8fbf4a, #2f6b2c 60%, #a85a25);
  box-shadow: 0 40px 90px -40px rgba(47, 107, 44, .55);
}
.portada-imagen img { border-radius: 28px 6px 28px 6px; }

/* Tarjetas con esquinas de hoja */
.cifra, .instalacion, .video-info, .ia-pregunta, .salida, .motor, .llamado { border-radius: var(--hoja-radio); box-shadow: 0 2px 6px rgba(40, 60, 25, .06); }
.cifra b { font-family: var(--titulos); font-weight: 650; }
.captura { border-radius: 22px 6px 22px 6px; }
.video-marco { border-radius: 26px 6px 26px 6px; }
.ventaja { border-radius: 0 22px 6px 0; }

.seccion.alterna { border-block: 1px solid var(--borde); }
.paso + .paso { border-top: 1px dashed var(--borde); }
.paso-numero { color: var(--terracota); }

/* Íconos: musgo, hoja, terracota, arcilla, agua */
.i-rojo { background: rgba(168, 90, 37, .1); color: #a85a25; }
.i-naranja { background: rgba(201, 138, 60, .14); color: #a86b1f; }
.i-cian { background: rgba(46, 116, 128, .1); color: #2e7480; }
.i-violeta { background: rgba(47, 107, 44, .1); color: #2f6b2c; }
.i-verde { background: rgba(106, 154, 43, .14); color: #4f7d1c; }
.i-amarillo { background: rgba(176, 140, 40, .14); color: #8a6a12; }
.instalacion .icono, .motor h3 .icono { border-radius: 14px 4px 14px 4px; }

.pestana[aria-selected="true"] { color: #fff; }
.capitulos button:hover { background: var(--cian-suave); }
.capitulos button.activo { color: var(--terracota); }

.lista-chica li::before {
  background-color: rgba(106, 154, 43, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b2c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.instalacion li::before { background: var(--hoja); opacity: .7; border-radius: 0 50% 0 50%; }

.ia-pregunta .burbuja { background: rgba(47, 107, 44, .07); border-color: rgba(47, 107, 44, .22); }
.ia-pregunta .respuesta { border-left-color: var(--terracota); }
.ia-pregunta h4 { color: var(--terracota); }

.chip { background: var(--tarjeta-2); border-color: var(--borde); color: #4c5948; }
.ventaja { border-left-color: var(--hoja); background: linear-gradient(90deg, rgba(106, 154, 43, .1), transparent 70%); }
.preguntas summary::after { color: var(--musgo); }

.llamado {
  border-color: var(--borde);
  background:
    radial-gradient(500px 260px at 15% 0%, rgba(106, 154, 43, .22), transparent 70%),
    radial-gradient(500px 260px at 85% 100%, rgba(201, 138, 60, .18), transparent 70%),
    var(--tarjeta);
}
.salida-icono { background: radial-gradient(260px 140px at 50% 50%, rgba(106, 154, 43, .16), transparent 70%), var(--tarjeta-2); }
.salida-icono span { border-top-color: var(--musgo); border-radius: 10px 3px 10px 3px; }
.salida-icono span:nth-child(2) { border-top-color: var(--arcilla); }
.salida-icono span:nth-child(3) { border-top-color: var(--terracota); }

.pie-sitio { background: var(--fondo-2); }

/* El visor de capturas queda oscuro: las capturas de la app son oscuras. */
.visor { background: rgba(16, 26, 14, .94); }
.visor p { color: #d6dfcc; }
.visor-cerrar { background: #1d2b1c; border-color: #33472f; color: #eef3e6; }