/* TermoCalc — versión tropical (clara). Se carga después de estilos.css:
   arena de fondo, turquesa como color principal, coral y mango de acento, verde palmera. */
:root {
  --fondo: #fffaf2;
  --fondo-2: #fdf0de;
  --tarjeta: #ffffff;
  --tarjeta-2: #fff5e8;
  --borde: #f0dcc0;
  --texto: #10302c;
  --texto-2: #4a5f5a;
  --texto-3: #7b8b85;
  --cian: #0d9488;            /* turquesa */
  --cian-2: #0f766e;
  --cian-suave: rgba(13, 148, 136, .1);
  --violeta: #f0604d;         /* coral */
  --violeta-suave: rgba(240, 96, 77, .1);
  --coral: #f0604d;
  --mango: #f59e0b;
  --palmera: #15803d;
  --radio: 18px;
  --sombra: 0 22px 44px -24px rgba(120, 72, 20, .35);
  --titulos: "Poppins", "Inter", system-ui, sans-serif;
  color-scheme: light;
}

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

/* Botones y píldoras redondeadas */
.boton { border-radius: 999px; }
.boton-primario { color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 10px 24px -10px rgba(13, 148, 136, .7); }
.boton-primario:hover { background: linear-gradient(135deg, #0d9488, #0f766e); }
.boton-secundario { background: var(--tarjeta); border-color: var(--borde); }
.boton-secundario:hover { border-color: var(--coral); }

.barra { background: rgba(255, 250, 242, .88); border-bottom-color: var(--borde); }
.marca-logo { background: linear-gradient(135deg, #2dd4bf, #0d9488 55%, #f59e0b); box-shadow: 0 6px 18px -6px rgba(13, 148, 136, .7); border-radius: 12px; }
.menu a:hover { color: var(--coral); }

/* Portada: sol de mango y agua turquesa */
.portada::before {
  background:
    radial-gradient(520px 360px at 15% 25%, rgba(45, 212, 191, .22), transparent 70%),
    radial-gradient(460px 320px at 88% 8%, rgba(245, 158, 11, .22), transparent 70%),
    radial-gradient(420px 300px at 70% 60%, rgba(240, 96, 77, .12), transparent 70%);
}
.etiqueta { color: var(--cian-2); border-color: rgba(13, 148, 136, .28); }
.etiqueta.violeta { color: #c2410c; background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); }
.portada h1 span { background-image: linear-gradient(90deg, #ec4f5e, #f0604d 35%, #f59e0b); }
.portada-imagen {
  border-radius: 24px;
  background: linear-gradient(160deg, #2dd4bf, #f59e0b 55%, #f0604d);
  box-shadow: 0 40px 90px -40px rgba(240, 96, 77, .55);
}
.portada-imagen img { border-radius: 18px; }
.cifra { border-top: 4px solid var(--cian); }
.cifra:nth-child(2) { border-top-color: var(--mango); }
.cifra:nth-child(3) { border-top-color: var(--coral); }
.cifra:nth-child(4) { border-top-color: var(--palmera); }
.cifra, .instalacion, .video-info, .ia-pregunta, .salida, .motor { box-shadow: 0 2px 6px rgba(120, 72, 20, .06); }

/* Secciones alternas con una ola arriba y abajo */
.seccion.alterna { position: relative; border-block: 0; background: var(--fondo-2); }
.seccion.alterna::before, .seccion.alterna::after {
  content: ""; position: absolute; left: 0; right: 0; height: 28px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14C150 -4 300 -4 450 14S750 32 900 14 1100 -2 1200 10V28Z' fill='%23fdf0de'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.seccion.alterna::before { top: -27px; }
.seccion.alterna::after { bottom: -27px; transform: rotate(180deg); }
.paso + .paso { border-top: 1px dashed var(--borde); }

/* Íconos: coral, mango, turquesa, hibisco, palmera */
.i-rojo { background: rgba(240, 96, 77, .12); color: #e04a36; }
.i-naranja { background: rgba(245, 158, 11, .14); color: #d97706; }
.i-cian { background: rgba(13, 148, 136, .12); color: #0d9488; }
.i-violeta { background: rgba(219, 39, 119, .1); color: #db2777; }
.i-verde { background: rgba(21, 128, 61, .1); color: #15803d; }
.i-amarillo { background: rgba(234, 179, 8, .15); color: #a16207; }
.instalacion { border-top: 4px solid var(--cian); }
.instalacion:nth-child(1) { border-top-color: var(--coral); }
.instalacion:nth-child(2) { border-top-color: var(--mango); }

.pestana { border-radius: 999px; }
.pestana[aria-selected="true"] { color: #fff; background: var(--cian); }
.capitulos button:hover { background: var(--cian-suave); }
.capitulos button.activo { color: var(--coral); }
.capitulos time { color: var(--cian-2); }
.video-marco { border-radius: 20px; }

.paso-numero { color: var(--coral); }
.lista-chica li::before {
  background-color: rgba(13, 148, 136, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.captura { border-radius: 16px; }

.ia-pregunta .burbuja { background: rgba(13, 148, 136, .08); border-color: rgba(13, 148, 136, .25); border-radius: 16px 16px 4px 16px; }
.ia-pregunta .respuesta { border-left-color: var(--coral); }
.ia-pregunta h4 { color: #c2410c; }

.chip { background: #fff5e8; border-color: var(--borde); color: #6b5b45; }
.ventaja { border-left-color: var(--coral); background: linear-gradient(90deg, rgba(240, 96, 77, .08), transparent 70%); }
.preguntas summary::after { color: var(--coral); }

.llamado {
  border-radius: 28px; border: 0;
  background:
    radial-gradient(500px 260px at 15% 0%, rgba(45, 212, 191, .35), transparent 70%),
    radial-gradient(500px 260px at 85% 100%, rgba(245, 158, 11, .35), transparent 70%),
    radial-gradient(400px 220px at 60% 30%, rgba(240, 96, 77, .18), transparent 70%),
    #fff6e9;
}
.salida-icono { background: radial-gradient(260px 140px at 50% 50%, rgba(245, 158, 11, .18), transparent 70%), var(--tarjeta-2); }
.salida-icono span { border-top-color: var(--cian); }
.salida-icono span:nth-child(2) { border-top-color: var(--mango); }
.salida-icono span:nth-child(3) { border-top-color: var(--coral); }

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

/* El visor de capturas queda oscuro: las capturas de la app son oscuras. */
.visor { background: rgba(8, 30, 28, .94); }
.visor p { color: #cfe3df; }
.visor-cerrar { background: #0f2f2b; border-color: #1d4a44; color: #e8f5f2; }