/* ============================================================
   IQ Panel — editorial cálido
   Crema · tinta · terracota.  Móvil primero, 390px.
   Sin build. Sin framework. Todo aquí.
   ============================================================ */

:root {
  /* ── Paleta IQUORA — tinto ──────────────────────────────
     Todo el color de la app sale de aquí. Cuando tengas el
     manual de marca, cambias estos seis valores y listo. */
  --tinto-hondo:  #3E0C1C;   /* casi negro con vino: fondos serios */
  --tinto:        #7A1B33;   /* la marca */
  --tinto-vivo:   #A32945;   /* interactivo, lo que se toca */
  --tinto-nube:   #FBF0F2;   /* fondo suave de marca */
  --oro:          #A87A3C;   /* acento secundario: dinero, valor */
  --oro-nube:     #FBF4E9;

  /* — base — */
  --crema:        #FAF7F2;
  --crema-hondo:  #F1EBE3;
  --papel:        #FFFFFF;
  --tinta:        #1A1416;
  --tinta-suave:  #544A4D;
  --gris:         #8A8083;
  --linea:        #E6DED7;

  /* — semáforo — */
  --verde:        #15803D;
  --verde-cl:     #EBF5EE;
  --ambar:        #B45309;
  --ambar-cl:     #FDF6E7;

  /* alias: el resto de la hoja sigue hablando de «terracota» */
  --terracota:    var(--tinto);
  --terracota-cl: var(--tinto-nube);

  /* — tipografía — */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texto:   "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;

  /* — ritmo — */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px;
  --curva: 14px;
  --curva-sm: 10px;

  --sombra:    0 1px 2px rgba(28,25,23,.04), 0 4px 16px rgba(28,25,23,.05);
  --sombra-alta: 0 2px 4px rgba(28,25,23,.05), 0 12px 32px rgba(28,25,23,.09);
  --salto: cubic-bezier(.22,1,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  background: var(--crema-hondo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* grano: le quita el plástico al fondo plano */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── El teléfono ─────────────────────────────────────────── */

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--crema);
  position: relative;
  box-shadow: 0 0 0 1px var(--linea), 0 24px 80px rgba(28,25,23,.14);
  display: flex;
  flex-direction: column;
}

.vista {
  flex: 1;
  padding: 0 var(--r5) calc(88px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* ── Encabezados ─────────────────────────────────────────── */

.saludo { padding: var(--r6) 0 var(--r5); }
.saludo h1 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.saludo p { color: var(--gris); font-size: 14px; margin-top: 3px; letter-spacing: .01em; }

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--r3);
  margin: 0 calc(var(--r5) * -1); padding: var(--r4) var(--r5);
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.barra.pegada { border-bottom-color: var(--linea); }
.barra h2 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 30;
  font-weight: 600; font-size: 21px; letter-spacing: -0.02em; flex: 1;
}
.volver {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: none; border-radius: 50%;
  background: var(--crema-hondo); color: var(--tinta);
  font-size: 17px; cursor: pointer;
  transition: transform .18s var(--salto), background .18s;
}
.volver:active { transform: scale(.9); background: var(--linea); }

.rotulo {
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gris);
  margin: var(--r6) 0 var(--r3);
}

/* ── Tarjetas ────────────────────────────────────────────── */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--curva);
  padding: var(--r4);
  box-shadow: var(--sombra);
}
.tarjeta + .tarjeta { margin-top: var(--r3); }

.tarjeta.viva {
  border-color: color-mix(in srgb, var(--terracota) 22%, var(--linea));
  background: linear-gradient(160deg, var(--papel) 55%, var(--terracota-cl));
}
.tarjeta.urgente {
  border-color: color-mix(in srgb, var(--ambar) 28%, var(--linea));
  background: linear-gradient(160deg, var(--papel) 50%, var(--ambar-cl));
}

.pulsable { cursor: pointer; transition: transform .2s var(--salto), box-shadow .2s; }
.pulsable:active { transform: scale(.985); box-shadow: var(--sombra-alta); }

/* ── Estado de los agentes ───────────────────────────────── */

.estado { display: flex; align-items: flex-start; gap: var(--r3); }
.latido {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde); flex: none; margin-top: 7px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent);
  animation: latir 2.4s infinite;
}
.latido.apagado { background: var(--gris); animation: none; box-shadow: none; }
@keyframes latir {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 50%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.estado strong { font-size: 15px; font-weight: 600; display: block; }
.estado span   { font-size: 13px; color: var(--gris); }

/* ── Los tres números ────────────────────────────────────── */

.cifras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--curva);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.cifra { padding: var(--r4) var(--r2); text-align: center; position: relative; }
.cifra + .cifra::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--linea);
}
.cifra b {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 60;
  font-weight: 600; font-size: 34px; line-height: 1;
  letter-spacing: -0.03em; display: block;
}
.cifra.destaca b { color: var(--terracota); }
.cifra span {
  display: block; margin-top: 6px;
  font-size: 11.5px; line-height: 1.3; color: var(--gris);
}

/* ── Lista de sucesos ────────────────────────────────────── */

.suceso {
  display: flex; gap: var(--r3);
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--linea);
}
.suceso:last-child { border-bottom: none; }
.suceso time {
  font-size: 12px; color: var(--gris); flex: none;
  width: 46px; padding-top: 2px; font-variant-numeric: tabular-nums;
}
.suceso div { min-width: 0; }
.suceso strong { font-size: 14.5px; font-weight: 500; display: block; }
.suceso p { font-size: 13px; color: var(--gris); margin-top: 1px; }

/* ── Personas ────────────────────────────────────────────── */

.persona { display: flex; align-items: flex-start; gap: var(--r3); }
.inicial {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 30;
  font-weight: 600; font-size: 17px;
  background: var(--crema-hondo); color: var(--tinta-suave);
}
.inicial.alta { background: var(--terracota); color: #fff; }
.inicial.media { background: color-mix(in srgb, var(--terracota) 16%, var(--crema-hondo)); color: var(--terracota); }
.persona h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.persona .meta { font-size: 12.5px; color: var(--gris); margin-top: 1px; }
.persona .dice { font-size: 14px; color: var(--tinta-suave); margin-top: var(--r2); line-height: 1.45; }

.termometro { display: flex; gap: 2px; margin-bottom: 5px; }
.termometro i {
  width: 15px; height: 3px; border-radius: 2px;
  background: var(--linea); display: block;
}
.termometro i.on { background: var(--terracota); }

/* ── Etiquetas ───────────────────────────────────────────── */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  background: var(--crema-hondo); color: var(--tinta-suave);
}
.etiqueta.bien  { background: var(--verde-cl);  color: var(--verde); }
.etiqueta.ojo   { background: var(--ambar-cl);  color: var(--ambar); }
.etiqueta.frio  { background: var(--crema-hondo); color: var(--gris); }
.etiqueta.fuego { background: var(--terracota-cl); color: var(--terracota); }

/* ── Botones ─────────────────────────────────────────────── */

.acciones { display: flex; gap: var(--r2); margin-top: var(--r4); }
.boton {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 44px; padding: 0 var(--r3);
  font-family: var(--texto); font-size: 14.5px; font-weight: 600;
  border: 1px solid var(--linea); border-radius: var(--curva-sm);
  background: var(--papel); color: var(--tinta);
  cursor: pointer; letter-spacing: -0.005em; text-decoration: none;
  transition: transform .16s var(--salto), background .16s, box-shadow .16s;
}
.boton:active { transform: scale(.96); }
/* Los SVG heredan tamaño del contenedor si no se les fija: aquí se les fija. */
.boton svg, .boton-llamar svg, .suceso svg { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.boton.fuerte { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.boton.acento { background: var(--terracota); color: #fff; border-color: var(--terracota); }
.boton.acento:active { background: #A8380B; }
.boton.tenue  { background: transparent; color: var(--tinta-suave); }
.boton.ancho  { width: 100%; }

/* ── Barra de pestañas ───────────────────────────────────── */

.pestanas {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px var(--r2) calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--crema) 90%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linea);
}
.pestana {
  border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px; border-radius: var(--curva-sm);
  font-family: var(--texto); font-size: 10px; font-weight: 600;
  color: var(--gris); letter-spacing: .01em; position: relative;
  transition: color .2s;
}
.pestana svg { width: 21px; height: 21px; stroke-width: 1.7; }
.pestana.activa { color: var(--terracota); }
.pestana .globo {
  position: absolute; top: 3px; right: 50%; margin-right: -18px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px; background: var(--terracota); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
}

/* ── Conversación ────────────────────────────────────────── */

.hilo { padding: var(--r4) 0 var(--r5); display: flex; flex-direction: column; gap: 3px; }
.burbuja {
  max-width: 78%; padding: 9px 13px;
  font-size: 14.5px; line-height: 1.42;
  border-radius: 17px; position: relative;
}
.burbuja.de-el {
  align-self: flex-start; background: var(--papel);
  border: 1px solid var(--linea); border-bottom-left-radius: 5px;
}
.burbuja.de-ella {
  align-self: flex-end; background: var(--tinta); color: var(--crema);
  border-bottom-right-radius: 5px;
}
.burbuja + .burbuja { margin-top: 3px; }
.burbuja.de-el + .burbuja.de-ella,
.burbuja.de-ella + .burbuja.de-el { margin-top: var(--r3); }

.pie-hilo {
  position: sticky; bottom: calc(80px + env(safe-area-inset-bottom));
  margin: 0 calc(var(--r5) * -1); padding: var(--r3) var(--r5);
  background: color-mix(in srgb, var(--crema) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linea);
}

/* ── Transcripción ───────────────────────────────────────── */

.linea-voz { display: flex; gap: var(--r3); padding: var(--r3) 0; border-bottom: 1px solid var(--linea); }
.linea-voz:last-child { border-bottom: none; }
.linea-voz .quien { flex: none; width: 62px; }
.linea-voz .quien b { display: block; font-size: 13px; font-weight: 600; }
.linea-voz .quien time { font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.linea-voz p { font-size: 14.5px; line-height: 1.45; }

.reproductor {
  display: flex; align-items: center; gap: var(--r3);
  background: var(--tinta); color: var(--crema);
  border-radius: var(--curva); padding: var(--r4);
}
.play {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  border: none; background: var(--crema); color: var(--tinta);
  display: grid; place-items: center; cursor: pointer; font-size: 15px;
  transition: transform .18s var(--salto);
}
.play:active { transform: scale(.9); }
.onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; }
.onda i {
  flex: 1; background: color-mix(in srgb, var(--crema) 34%, transparent);
  border-radius: 2px; display: block;
}
.onda i.pasada { background: var(--crema); }

/* ── Gráfica de la semana ────────────────────────────────── */

.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 118px; }
.dia { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.dia .torre {
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--terracota), color-mix(in srgb, var(--terracota) 62%, var(--crema)));
  transform-origin: bottom; animation: crecer .7s var(--salto) backwards;
}
.dia.tenue .torre { background: var(--crema-hondo); }
.dia b    { font-size: 12px; font-variant-numeric: tabular-nums; }
.dia span { font-size: 10.5px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
@keyframes crecer { from { transform: scaleY(0); opacity: 0; } }

.deCada10 { display: flex; align-items: center; gap: var(--r3); padding: var(--r3) 0; border-bottom: 1px solid var(--linea); }
.deCada10:last-child { border-bottom: none; }
.puntos { display: flex; gap: 3px; flex: none; }
.puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); display: block; }
.puntos i.on { background: var(--terracota); }
.deCada10 p { font-size: 14px; }

.ranking { display: flex; align-items: baseline; gap: var(--r3); padding: 11px 0; border-bottom: 1px solid var(--linea); }
.ranking:last-child { border-bottom: none; }
.ranking .n {
  font-family: var(--display); font-variation-settings: "opsz" 20;
  font-weight: 600; font-size: 14px; color: var(--gris); width: 15px; flex: none;
}
.ranking p { flex: 1; font-size: 14.5px; }
.ranking .veces { font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; flex: none; }

/* ── Ajustes ─────────────────────────────────────────────── */

.fila {
  display: flex; align-items: center; gap: var(--r3);
  padding: 13px 0; border-bottom: 1px solid var(--linea);
}
.fila:last-child { border-bottom: none; }
.fila p { flex: 1; font-size: 15px; }
.fila .valor { font-size: 14px; color: var(--gris); }

.palanca {
  width: 46px; height: 27px; flex: none; border-radius: 100px;
  border: none; cursor: pointer; padding: 3px;
  background: var(--linea); position: relative;
  transition: background .24s var(--salto);
}
.palanca::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(28,25,23,.28);
  transition: transform .24s var(--salto);
}
.palanca.si { background: var(--verde); }
.palanca.si::after { transform: translateX(19px); }

/* ── Llamar al agente ────────────────────────────────────── */

.llamar {
  position: relative; overflow: hidden;
  background: var(--tinta); color: var(--crema);
  border-radius: var(--curva); padding: var(--r5) var(--r4);
  text-align: center;
}
.llamar::after {
  content: ""; position: absolute; inset: -50%;
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--terracota) 42%, transparent), transparent 62%);
  animation: respirar 5s ease-in-out infinite;
}
@keyframes respirar { 50% { transform: scale(1.14); opacity: .72; } }
.llamar > * { position: relative; z-index: 1; }
.llamar h3 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 30;
  font-weight: 600; font-size: 22px; letter-spacing: -0.02em;
}
.llamar p { font-size: 13.5px; opacity: .74; margin-top: 5px; }
.boton-llamar {
  margin-top: var(--r4); width: 100%; min-height: 52px;
  border: none; border-radius: var(--curva-sm);
  background: var(--terracota); color: #fff;
  font-family: var(--texto); font-size: 16px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--r2);
  transition: transform .16s var(--salto);
}
.boton-llamar:active { transform: scale(.97); }
.boton-llamar.colgar { background: #B91C1C; }

.enllamada { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; margin-top: var(--r3); }
.enllamada i {
  width: 3px; border-radius: 2px; background: var(--crema); display: block;
  animation: hablar .9s ease-in-out infinite;
}
@keyframes hablar { 0%,100% { height: 5px; } 50% { height: 22px; } }

/* ── Cortina de entrada ──────────────────────────────────── */

#cortina {
  position: fixed; inset: 0; z-index: 200;
  background: var(--tinta); color: var(--crema);
  display: grid; place-items: center;
  animation: salir .55s var(--salto) 1.5s forwards;
}
#cortina .marca {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
  font-weight: 600; font-size: 40px; letter-spacing: -0.035em;
  animation: entrar .8s var(--salto) backwards;
}
#cortina .marca em { color: var(--terracota); font-style: normal; }
#cortina small {
  display: block; text-align: center; margin-top: var(--r2);
  font-family: var(--texto); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; opacity: .5;
  animation: entrar .8s var(--salto) .18s backwards;
}
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes salir  { to { opacity: 0; visibility: hidden; transform: scale(1.05); } }

/* ── Aparición escalonada ────────────────────────────────── */

.surge { animation: surgir .5s var(--salto) backwards; }
@keyframes surgir { from { opacity: 0; transform: translateY(12px); } }

/* ── Otros ───────────────────────────────────────────────── */

.filtros {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--r5) * -1); padding: var(--r3) var(--r5);
}
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--linea); background: var(--papel);
  font-family: var(--texto); font-size: 13px; font-weight: 500;
  color: var(--tinta-suave); cursor: pointer; white-space: nowrap;
  transition: all .18s;
}
.chip.activo { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.dato { display: flex; justify-content: space-between; gap: var(--r3); padding: 10px 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: none; }
.dato dt { font-size: 14px; color: var(--gris); }
.dato dd { font-size: 14px; font-weight: 500; text-align: right; }

.freno { display: flex; gap: var(--r2); padding: var(--r3) 0; border-bottom: 1px solid var(--linea); }
.freno:last-child { border-bottom: none; }
.freno .sello { flex: none; font-size: 15px; line-height: 1.3; }
.freno q { font-size: 14.5px; font-weight: 500; font-style: italic; display: block; }
.freno p { font-size: 13px; color: var(--gris); margin-top: 2px; }

.parrafo { font-size: 15.5px; line-height: 1.55; color: var(--tinta-suave); }
.parrafo strong { color: var(--tinta); font-weight: 600; }

.gasto b {
  font-family: var(--display);
  font-variation-settings: "SOFT" 20, "opsz" 40;
  font-weight: 600; font-size: 27px; letter-spacing: -0.02em;
}
.medidor { height: 6px; border-radius: 100px; background: var(--crema-hondo); margin-top: var(--r3); overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 100px; background: var(--verde); }

.vacio { text-align: center; padding: var(--r7) var(--r4); color: var(--gris); font-size: 14.5px; }

textarea.campo {
  width: 100%; min-height: 76px; resize: vertical;
  font-family: var(--texto); font-size: 14.5px; line-height: 1.45;
  padding: var(--r3); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--curva-sm);
  background: var(--crema); margin-top: var(--r2);
}
textarea.campo:focus { outline: 2px solid color-mix(in srgb, var(--terracota) 38%, transparent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  html.anima .revela { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ============================================================
   CAPA 2 — textura, componentes y movimiento
   Todo lo que sigue es para que se sienta caro y vivo.
   ============================================================ */

/* ── Texturas de fondo ───────────────────────────────────── */

/* Un degradado tenue de marca detrás de todo. Le quita el plano. */
#app::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 380px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 100% at 12% -8%, color-mix(in srgb, var(--tinto) 9%, transparent), transparent 62%),
    radial-gradient(90% 80% at 95% 4%, color-mix(in srgb, var(--oro) 11%, transparent), transparent 58%);
}
.vista { position: relative; z-index: 1; }

/* Papel con fibra: rayado finísimo, casi invisible pero se siente. */
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(
    135deg, transparent 0 3px, color-mix(in srgb, var(--tinta) 1.4%, transparent) 3px 4px);
}
.tarjeta > * { position: relative; }

/* ── Encabezado con más presencia ────────────────────────── */

.portada {
  margin: 0 calc(var(--r5) * -1); padding: var(--r7) var(--r5) var(--r5);
  position: relative;
}
.portada .fecha {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinto);
  display: flex; align-items: center; gap: var(--r2);
}
.portada .fecha::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tinto) 28%, transparent), transparent);
}
.portada h1 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
  font-weight: 600; font-size: 36px; line-height: 1.02;
  letter-spacing: -0.035em; margin-top: var(--r3);
}
.portada h1 em { font-style: normal; color: var(--tinto); }
.portada .negocio {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--r3); padding: 5px 11px 5px 6px;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 100px; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--sombra);
}
.portada .negocio .sigla {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--tinto); color: #fff;
  display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
}

/* ── Números que cuentan ─────────────────────────────────── */

.cifras { background: linear-gradient(165deg, var(--papel), var(--crema)); }
.cifra b { font-variant-numeric: tabular-nums; }
.cifra.destaca b { color: var(--tinto); }
.cifra.destaca { background: linear-gradient(180deg, transparent, var(--tinto-nube)); }

/* ── Grupos de clientes por color ────────────────────────── */

.grupo { margin-top: var(--r6); }
.grupo-titulo {
  display: flex; align-items: center; gap: var(--r2);
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: var(--r3);
}
.grupo-titulo .cuenta {
  font-size: 10px; padding: 2px 7px; border-radius: 100px;
  background: currentColor; color: var(--papel); font-weight: 700;
}
.grupo-titulo::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .22; }

.grupo.calientes  { --tono: var(--tinto);  --tono-cl: var(--tinto-nube); }
.grupo.nuevos     { --tono: var(--oro);    --tono-cl: var(--oro-nube); }
.grupo.esperando  { --tono: var(--ambar);  --tono-cl: var(--ambar-cl); }
.grupo.tibios     { --tono: var(--gris);   --tono-cl: var(--crema-hondo); }
.grupo-titulo { color: var(--tono); }

/* La tarjeta hereda el tono de su grupo por una cinta lateral. */
.grupo .tarjeta {
  border-left: 3px solid var(--tono);
  background: linear-gradient(100deg, var(--tono-cl) 0%, var(--papel) 34%);
}
.grupo .inicial { background: var(--tono); color: #fff; }
.grupo.tibios .inicial { color: var(--tinta-suave); }
.grupo .termometro i.on { background: var(--tono); }

/* ── Línea de tiempo con hilo ────────────────────────────── */

.hilo-tiempo { position: relative; padding-left: var(--r5); }
.hilo-tiempo::before {
  content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, var(--tinto), var(--linea));
}
.hilo-tiempo .suceso { border: none; padding: var(--r3) 0; }
.hilo-tiempo .suceso::before {
  content: ""; position: absolute; left: -22px; margin-top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--papel); border: 2px solid var(--tinto);
}
.hilo-tiempo .suceso { position: relative; }

/* ── Anillo de consumo ───────────────────────────────────── */

.anillo { display: flex; align-items: center; gap: var(--r4); }
.anillo svg { width: 74px; height: 74px; flex: none; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.anillo .pista { stroke: var(--crema-hondo); }
.anillo .lleno {
  stroke: var(--verde);
  stroke-dasharray: var(--vuelta);
  stroke-dashoffset: var(--vuelta);
  animation: llenar 1.1s var(--salto) .25s forwards;
}
@keyframes llenar { to { stroke-dashoffset: var(--resto); } }
.anillo .centro {
  position: absolute; font-size: 13px; font-weight: 700;
}

/* ── Aparecer al hacer scroll ────────────────────────────── */

/* Sin JS, sin IntersectionObserver o con movimiento reducido, el contenido
   se ve igual. La animación es un lujo, no un requisito para leer. */
.revela { opacity: 1; transform: none; }
html.anima .revela { opacity: 0; transform: translateY(18px); }
html.anima .revela.visible { opacity: 1; transform: none; }
html.anima .revela.visible {
  transition: opacity .55s var(--salto), transform .55s var(--salto);
}

/* ── Cambio de pantalla ──────────────────────────────────── */

.vista.entrando > * { animation: entrar-vista .42s var(--salto) backwards; }
@keyframes entrar-vista { from { opacity: 0; transform: translateY(10px); } }

/* ── Pestañas con más carácter ───────────────────────────── */

.pestana.activa { color: var(--tinto); }
.pestana.activa::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--tinto);
  animation: subrayar .35s var(--salto);
}
@keyframes subrayar { from { width: 0; } }
.pestana .globo { background: var(--tinto); }
.pestana:active svg { transform: scale(.86); transition: transform .12s; }

/* ── Botones: brillo al tocar ────────────────────────────── */

.boton.acento, .boton-llamar { background: var(--tinto); border-color: var(--tinto); }
.boton.acento:active, .boton-llamar:active { background: var(--tinto-vivo); }
.boton { position: relative; overflow: hidden; }
.boton::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.5), transparent 45%);
  opacity: 0; transition: opacity .45s;
}
.boton:active::after { opacity: 1; transition: none; }

/* ── Llamar: más presencia ───────────────────────────────── */

.llamar { background: var(--tinto-hondo); }
.llamar::after {
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--tinto-vivo) 62%, transparent), transparent 62%);
}
.boton-llamar { box-shadow: 0 6px 22px color-mix(in srgb, var(--tinto-vivo) 42%, transparent); }

/* ── Cortina y marca ─────────────────────────────────────── */

#cortina { background: var(--tinto-hondo); }
#cortina .marca em { color: var(--oro); }

/* ── Puerta de entrada (contraseña) ──────────────────────── */

.puerta {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--r5); background: var(--tinto-hondo); color: var(--crema);
  position: relative; overflow: hidden;
}
.puerta::before {
  content: ""; position: absolute; inset: -30%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tinto-vivo) 46%, transparent), transparent 58%);
  animation: respirar 6s ease-in-out infinite;
}
.puerta > form { position: relative; width: 100%; max-width: 300px; text-align: center; }
.puerta .marca {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60;
  font-weight: 600; font-size: 38px; letter-spacing: -0.035em;
}
.puerta .marca em { color: var(--oro); font-style: normal; }
.puerta p { font-size: 13px; opacity: .62; margin: var(--r2) 0 var(--r6); }
.puerta input {
  width: 100%; height: 56px; text-align: center;
  font-family: var(--display); font-size: 26px; font-weight: 600;
  letter-spacing: .5em; text-indent: .5em;
  color: var(--crema); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--curva);
}
.puerta input:focus { outline: 2px solid var(--oro); outline-offset: 2px; }
.puerta button {
  width: 100%; min-height: 50px; margin-top: var(--r3);
  border: none; border-radius: var(--curva-sm);
  background: var(--oro); color: var(--tinto-hondo);
  font-family: var(--texto); font-size: 16px; font-weight: 700; cursor: pointer;
}
.puerta .mal { color: #FCA5A5; font-size: 13px; margin-top: var(--r3); }

/* ── Detalles finos ──────────────────────────────────────── */

.etiqueta.fuego { background: var(--tinto-nube); color: var(--tinto); }
.dia .torre { background: linear-gradient(180deg, var(--tinto-vivo), var(--tinto)); }
.puntos i.on { background: var(--tinto); }
.medidor i { background: linear-gradient(90deg, var(--verde), color-mix(in srgb, var(--verde) 62%, var(--oro))); }
.ranking .n { color: var(--tinto); opacity: .55; }
.burbuja.de-ella { background: var(--tinto-hondo); }
.reproductor { background: var(--tinto-hondo); }
.chip.activo { background: var(--tinto); border-color: var(--tinto); }
.inicial.alta { background: var(--tinto); }
.inicial.media { background: color-mix(in srgb, var(--tinto) 15%, var(--crema-hondo)); color: var(--tinto); }