/* ==========================================================================
   Guía de Registro Fotográfico — estilos
   3 temas: [data-theme="claro"] (por defecto) · "infografia" · "nocturno"
   ========================================================================== */

/* ---------- Tokens: tema CLARO (rojo Claro + verde de las fichas) ---------- */
:root {
  --rojo: #DA291C;
  --rojo-osc: #A90F12;
  --verde: #1F6B33;
  --verde-sua: #DDF0D9;
  --ambar-sua: #FFF3CF;
  --ambar: #8A5A00;

  --fondo: #F4F4F6;
  --fondo-2: #ECECEF;
  --superficie: #FFFFFF;
  --tinta: #1C1C1E;
  --tinta-2: #55565C;
  --tinta-3: #8A8B92;
  --linea: #E2E2E6;
  --primario: var(--rojo);
  --primario-tinta: #FFFFFF;

  --radio: 14px;
  --radio-sm: 10px;
  --borde: 1px solid var(--linea);
  --sombra: 0 1px 2px rgba(20, 20, 30, .06), 0 6px 20px rgba(20, 20, 30, .06);
  --sombra-hover: 0 2px 4px rgba(20, 20, 30, .08), 0 14px 32px rgba(20, 20, 30, .10);

  --f-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 700;
  --titulo-esp: .2px;

  --num-color: var(--rojo);
  --num-trazo: 0;
  --num-relleno: var(--rojo);

  --topbar: var(--rojo);
  --topbar-tinta: #FFFFFF;
  --tab-tinta: #1C1C1E;
}

/* ---------- Tema INFOGRAFÍA (bordes gruesos, etiquetas de color, números contorneados) ---------- */
:root[data-theme="infografia"] {
  --fondo: #EEF2F8;
  --fondo-2: #E3E8F1;
  --superficie: #FFFFFF;
  --tinta: #15171C;
  --tinta-2: #3B3F48;
  --tinta-3: #6C717C;
  --linea: #15171C;
  --primario: #15171C;
  --primario-tinta: #FFFFFF;
  --radio: 12px;
  --radio-sm: 8px;
  --borde: 2.5px solid #15171C;
  --sombra: 4px 4px 0 #15171C;
  --sombra-hover: 6px 6px 0 #15171C;
  --f-titulo: "Lexend", system-ui, sans-serif;
  --f-texto: "Lexend", system-ui, sans-serif;
  --titulo-peso: 800;
  --titulo-esp: -.2px;
  --num-trazo: 2.5px;
  --num-relleno: transparent;
  --num-color: #15171C;
  --topbar: #FFFFFF;
  --topbar-tinta: #15171C;
}

/* ---------- Tema NOCTURNO (alto contraste, ideal de noche / en campo) ---------- */
:root[data-theme="nocturno"] {
  --fondo: #0F1116;
  --fondo-2: #171A21;
  --superficie: #1A1D25;
  --tinta: #F3F4F6;
  --tinta-2: #B9BCC5;
  --tinta-3: #858A96;
  --linea: #2B2F3A;
  --primario: #FF4B3E;
  --primario-tinta: #FFFFFF;
  --verde: #5FD38A;
  --verde-sua: rgba(95, 211, 138, .12);
  --ambar-sua: rgba(246, 195, 67, .12);
  --ambar: #F6C343;
  --rojo: #FF4B3E;
  --radio: 18px;
  --radio-sm: 12px;
  --borde: 1px solid #2B2F3A;
  --sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --sombra-hover: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 40px rgba(0, 0, 0, .5);
  --f-titulo: "Lexend", system-ui, sans-serif;
  --f-texto: "Lexend", system-ui, sans-serif;
  --titulo-peso: 700;
  --titulo-esp: -.3px;
  --num-trazo: 2px;
  --num-relleno: transparent;
  --num-color: #FF4B3E;
  --topbar: #0F1116;
  --topbar-tinta: #F3F4F6;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
body.sin-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: var(--titulo-peso); letter-spacing: var(--titulo-esp); line-height: 1.1; margin: 0; }
p { margin: 0; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; border-radius: 6px; }
.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenedor { padding: 0 28px; } }

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar); color: var(--topbar-tinta); }
:root[data-theme="infografia"] .topbar { border-bottom: var(--borde); }
:root[data-theme="nocturno"] .topbar { border-bottom: var(--borde); background: rgba(15, 17, 22, .94); }
.topbar__in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
@media (min-width: 720px) { .topbar__in { padding: 12px 28px; } }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca__icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); flex: none; }
.marca__icono .ico { width: 22px; height: 22px; }
:root[data-theme="infografia"] .marca__icono { background: #F6C343; border: var(--borde); }
:root[data-theme="nocturno"] .marca__icono { background: var(--primario); color: #fff; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca__txt strong { font-family: var(--f-titulo); font-size: 17px; font-weight: var(--titulo-peso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca__txt small { font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 480px) { .marca__txt strong { font-size: 20px; } }
@media (max-width: 400px) { .marca__icono { width: 34px; height: 34px; } .temas button { padding: 6px; } }

.temas { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .14); }
:root[data-theme="infografia"] .temas { background: var(--fondo); border: 2px solid #15171C; }
:root[data-theme="nocturno"] .temas { background: var(--fondo-2); }
.temas__lbl { font-size: 12px; opacity: .8; padding: 0 6px 0 8px; display: none; }
@media (min-width: 900px) { .temas__lbl { display: inline; } }
.temas button {
  border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; cursor: pointer; min-height: 32px;
}
.temas button i { width: 16px; height: 16px; border-radius: 50%; display: block; border: 2px solid rgba(255, 255, 255, .7); }
.temas button[data-tema="claro"] i { background: linear-gradient(135deg, #DA291C 50%, #fff 50%); }
.temas button[data-tema="infografia"] i { background: conic-gradient(#F6C343 0 25%, #2BC46B 0 50%, #F38B85 0 75%, #4CC3EE 0); border-color: #15171C; }
.temas button[data-tema="nocturno"] i { background: linear-gradient(135deg, #0F1116 55%, #FF4B3E 55%); }
.temas button span { display: none; }
@media (min-width: 640px) { .temas button span { display: inline; } }
.temas button[aria-checked="true"] { background: rgba(255, 255, 255, .95); color: #1C1C1E; }
:root[data-theme="infografia"] .temas button[aria-checked="true"] { background: #15171C; color: #fff; }
:root[data-theme="nocturno"] .temas button[aria-checked="true"] { background: #2B2F3A; color: #fff; }

.tabs { display: flex; gap: 4px; max-width: 1180px; margin: 0 auto; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .tabs { padding: 0 24px; } }
.tabs a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 10px 12px 12px; border-bottom: 3px solid transparent; opacity: .82; min-height: 44px;
}
.tabs a .ico { width: 18px; height: 18px; }
.tabs a:hover { opacity: 1; }
.tabs a.activo { opacity: 1; border-bottom-color: currentColor; }
:root[data-theme="infografia"] .tabs a.activo { border-bottom-color: #DA291C; }
:root[data-theme="nocturno"] .tabs a.activo { border-bottom-color: var(--primario); }

/* ---------- Hero ---------- */
.hero { padding: 28px 0 8px; }
.hero h1 { font-size: clamp(34px, 7vw, 60px); margin-top: 12px; }
.hero h1 em { font-style: normal; color: var(--rojo); }
:root[data-theme="infografia"] .hero h1 em { background: #F6C343; color: #15171C; padding: 0 .18em; border: var(--borde); border-radius: 10px; box-shadow: 3px 3px 0 #15171C; display: inline-block; transform: rotate(-2deg); }
.hero p { margin-top: 12px; max-width: 620px; color: var(--tinta-2); font-size: 18px; }
.hero--compacto h1 { font-size: clamp(26px, 4.5vw, 38px); }
.hero--compacto { padding-top: 20px; }
.br-lg { display: none; }
@media (min-width: 720px) { .br-lg { display: inline; } .hero { padding: 44px 0 12px; } }
.sello {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-2);
  background: var(--superficie); border: var(--borde); padding: 5px 12px; border-radius: 999px;
}
:root[data-theme="infografia"] .sello { border-width: 2px; }

/* ---------- Encabezados de sección ---------- */
.titulo-seccion { display: flex; align-items: center; gap: 10px; font-size: 24px; margin: 28px 0 14px; }
.titulo-seccion > .ico { color: var(--rojo); }
.titulo-seccion--error > .ico { color: var(--rojo); }
.paso-badge {
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--primario); color: var(--primario-tinta); font-size: 16px; font-family: var(--f-texto); font-weight: 700;
}
:root[data-theme="infografia"] .paso-badge { background: #DA291C; border: 2px solid #15171C; }

/* ---------- Tarjetas de servicio ---------- */
.servicios__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .servicios__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .servicios__grid { grid-template-columns: repeat(4, 1fr); } }
.serv {
  position: relative; display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--superficie); border: var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height: 92px;
  animation: entrar .4s ease both; animation-delay: calc(var(--i) * 50ms);
}
@media (min-width: 1024px) { .serv { flex-direction: column; align-items: flex-start; min-height: 190px; } }
.serv:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.serv__icono {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--rojo) 10%, transparent); color: var(--rojo);
}
.serv__icono .ico { width: 26px; height: 26px; }
:root[data-theme="infografia"] .serv__icono { border: 2px solid #15171C; background: #F6C343; color: #15171C; border-radius: 50%; }
:root[data-theme="infografia"] .serv:nth-child(2) .serv__icono { background: #2BC46B; }
:root[data-theme="infografia"] .serv:nth-child(3) .serv__icono { background: #F38B85; }
:root[data-theme="infografia"] .serv:nth-child(4) .serv__icono { background: #4CC3EE; }
.serv__txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.serv__txt strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 20px; line-height: 1.15; }
.serv__txt small { color: var(--tinta-3); font-size: 14px; font-weight: 500; }
.serv__tec { display: flex; gap: 6px; }
.serv__flecha { color: var(--tinta-3); }
@media (min-width: 1024px) { .serv__flecha { position: absolute; top: 18px; right: 16px; } }
.serv--activo { border-color: var(--rojo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 22%, transparent), var(--sombra); }
:root[data-theme="infografia"] .serv--activo { background: #FFF6D8; box-shadow: 6px 6px 0 #DA291C; border-color: #15171C; }
.serv--activo .serv__flecha { color: var(--rojo); }

/* Cuando ya hay un servicio elegido, las tarjetas se compactan */
.servicios__grid--compacto .serv { min-height: 0; padding: 12px 14px; }
@media (min-width: 1024px) {
  .servicios__grid--compacto .serv { flex-direction: row; align-items: center; }
  .servicios__grid--compacto .serv__flecha { position: static; }
  .servicios__grid--compacto .serv__icono { width: 42px; height: 42px; }
  .servicios__grid--compacto .serv__txt strong { font-size: 17px; }
}

.tec {
  font-family: var(--f-texto); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; padding: 2px 8px; border-radius: 999px;
  background: var(--fondo-2); color: var(--tinta-2); vertical-align: middle;
}
.tec--ftth { background: color-mix(in srgb, #2BC46B 18%, transparent); color: #137A3C; }
.tec--hfc { background: color-mix(in srgb, #4CC3EE 22%, transparent); color: #0B6A8C; }
:root[data-theme="nocturno"] .tec--ftth { color: #6FE09A; }
:root[data-theme="nocturno"] .tec--hfc { color: #7FD8F7; }
:root[data-theme="infografia"] .tec { border: 1.5px solid #15171C; color: #15171C; }

.nota-regular {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--radio-sm);
  background: var(--fondo-2); color: var(--tinta-2); font-size: 14.5px;
}
.nota-regular .ico { margin-top: 3px; color: var(--tinta-3); }
:root[data-theme="infografia"] .nota-regular { border: 2px dashed #15171C; background: transparent; }

/* ---------- Resumen de módulos ---------- */
.modulos-resumen__grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .modulos-resumen__grid { grid-template-columns: 1fr 1fr; } }
.modulo-card { display: flex; gap: 14px; padding: 18px; background: var(--superficie); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.modulo-card strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 20px; display: block; }
.modulo-card small { color: var(--tinta-3); }
.modulo-card__icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; flex: none; background: var(--fondo-2); }
.modulo-card__icono .ico { width: 24px; height: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
  background: var(--tab, var(--fondo-2)); color: #15171C; text-decoration: none; white-space: nowrap;
}
:root[data-theme="infografia"] .chip { border: 2px solid #15171C; }
.chip--neutro { background: var(--fondo-2); color: var(--tinta-2); font-weight: 600; }
.chip--op { background: transparent; border: var(--borde); color: var(--tinta); font-weight: 600; }
.chip--op:hover { border-color: var(--rojo); color: var(--rojo); }

/* ---------- Ruta ---------- */
.ruta { margin-top: 8px; }
.ruta__cab { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.ruta__nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: clamp(24px, 4vw, 32px); }
.ruta__nombre > .ico { color: var(--rojo); width: 28px; height: 28px; }
.aplica { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--tinta-3); }
.aplica > span:first-child { font-weight: 600; margin-right: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  border: var(--borde); background: var(--superficie); color: var(--tinta); transition: transform .15s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn--pri { background: var(--primario); color: var(--primario-tinta); border-color: var(--primario); }
:root[data-theme="claro"] .btn--pri { background: var(--rojo); border-color: var(--rojo); }
:root[data-theme="infografia"] .btn { border-radius: 10px; box-shadow: 3px 3px 0 #15171C; }
:root[data-theme="infografia"] .btn--pri { background: #DA291C; border-color: #15171C; }
.btn--sec:hover { border-color: var(--rojo); color: var(--rojo); }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--tinta-2); cursor: pointer; text-decoration: none; padding: 8px 4px; min-height: 40px;
}
.btn-link:hover { color: var(--rojo); }
.btn-link--error { color: var(--rojo); }

.aviso {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--radio-sm);
  background: var(--ambar-sua); color: var(--tinta); border-left: 5px solid #F6C343; font-weight: 500;
}
.aviso .ico { color: var(--ambar); margin-top: 2px; width: 22px; height: 22px; }
:root[data-theme="infografia"] .aviso { border: var(--borde); border-left-width: 8px; border-left-color: #F6C343; }
.aviso--suave { margin: 0 0 14px; font-size: 14.5px; }


/* Etapas (módulos) */
.etapa { margin-top: 28px; }
.etapa__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.etapa__cab small { display: block; text-transform: uppercase; letter-spacing: .8px; font-size: 12px; font-weight: 700; color: var(--tinta-3); }
.etapa__cab strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 22px; }
.etapa__cab strong span { color: var(--rojo); }
.etapa__icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--tinta); color: var(--fondo); flex: none; }
.etapa__icono .ico { width: 22px; height: 22px; }
:root[data-theme="claro"] .etapa__icono { background: var(--rojo); color: #fff; }

/* Pasos (tarjeta de foto) */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.paso { display: grid; grid-template-columns: 1fr; gap: 6px; position: relative; animation: entrar .45s ease both; }
@media (min-width: 720px) {
  .paso { grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
  :root[data-theme="infografia"] .paso:nth-child(even) { grid-template-columns: 1fr 110px; }
  :root[data-theme="infografia"] .paso:nth-child(even) .paso__num { order: 2; }
}
.paso__num {
  font-family: "Lexend", var(--f-titulo); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -1px;
  color: var(--num-relleno); -webkit-text-stroke: var(--num-trazo) var(--num-color); text-align: left;
}
@media (min-width: 720px) { .paso__num { font-size: 84px; text-align: center; } }
:root[data-theme="claro"] .paso__num { font-family: var(--f-titulo); }

.paso__card {
  position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
  background: var(--superficie); border: var(--borde); border-radius: var(--radio); padding: 26px 14px 14px; box-shadow: var(--sombra);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 560px) { .paso__card { grid-template-columns: 150px 1fr; gap: 18px; padding: 28px 18px 18px; } }
@media (min-width: 1000px) { .paso__card { grid-template-columns: 180px 1fr; } }
.paso__card:hover { box-shadow: var(--sombra-hover); }
:root[data-theme="claro"] .paso__card { border-left: 6px solid var(--tab); }
:root[data-theme="nocturno"] .paso__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: var(--radio) var(--radio) 0 0; background: var(--tab); }
:root[data-theme="infografia"] .paso__card::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: -12px; width: 10px; background: var(--tab);
  border: 2.5px solid #15171C; border-right: 0; border-radius: 6px 0 0 6px;
}
.paso__tab {
  position: absolute; top: -15px; left: 14px; background: var(--tab); color: #15171C; font-weight: 800; font-size: 15px;
  padding: 4px 14px; border-radius: 8px; letter-spacing: .3px; font-family: "Lexend", var(--f-texto);
}
:root[data-theme="claro"] .paso__tab { background: var(--rojo); color: #fff; }
:root[data-theme="infografia"] .paso__tab { border: 2.5px solid #15171C; font-size: 16px; padding: 4px 16px; }
@media (min-width: 720px) {
  :root[data-theme="infografia"] .paso:nth-child(even) .paso__tab { left: auto; right: 18px; }
  :root[data-theme="infografia"] .paso:nth-child(even) .paso__card::after { left: auto; right: -12px; border: 2.5px solid #15171C; border-left: 0; border-radius: 0 6px 6px 0; }
}

.paso__thumb {
  position: relative; display: block; border-radius: var(--radio-sm); overflow: hidden; aspect-ratio: 3 / 4; background: var(--fondo-2);
  border: var(--borde);
}
.paso__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.paso__thumb:hover img { transform: scale(1.04); }
.paso__zoom {
  position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .62); color: #fff;
}
.paso__thumb { grid-column: 1; grid-row: 1; }
.paso__head { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.paso__body { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) {
  .paso__thumb { grid-row: 1 / span 2; }
  .paso__body { grid-column: 2; }
  .paso__card { row-gap: 10px; }
}
.paso__head h3 { font-size: 21px; display: flex; align-items: center; gap: 8px; }
@media (min-width: 720px) { .paso__head h3 { font-size: 26px; } }
.paso__head > p { color: var(--tinta-2); font-size: 15px; }
.paso__icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--tab) 28%, transparent); color: var(--tinta); flex: none; }
.paso__icono .ico { width: 19px; height: 19px; }
:root[data-theme="infografia"] .paso__icono { background: var(--tab); border: 2px solid #15171C; border-radius: 50%; }

.puntos { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.puntos li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 500; line-height: 1.35; }
.puntos b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 800;
  background: var(--verde); color: #fff; margin-top: -1px;
}
:root[data-theme="nocturno"] .puntos b { color: #0F1116; }
:root[data-theme="infografia"] .puntos b { border: 2px solid #15171C; background: #2BC46B; color: #15171C; }

.opciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--tinta-3); }
.opciones > span { font-weight: 600; }
.condicion {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; background: var(--ambar-sua); color: var(--ambar);
}
:root[data-theme="infografia"] .condicion { border: 2px solid #15171C; color: #15171C; background: #FFE9A6; }
.paso--condicional .paso__card { border-style: dashed; }

.paso__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
@media (max-width: 719px) {
  .pasos { gap: 34px; }
  .paso__num { position: absolute; top: -26px; right: 8px; z-index: 1; font-size: 42px; }
  :root[data-theme="claro"] .paso__num { -webkit-text-stroke: 0; }
}

/* ---------- Catálogo ---------- */
.catalogo__cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.filtros { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--superficie); border: var(--borde); }
.filtro { border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--tinta-2); min-height: 38px; }
.filtro.activo { background: var(--primario); color: var(--primario-tinta); }
:root[data-theme="claro"] .filtro.activo { background: var(--rojo); }
.cat-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat {
  position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--superficie); border: var(--borde);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.cat img { aspect-ratio: 2 / 3; object-fit: cover; object-position: top; width: 100%; }
.cat--error img { aspect-ratio: 4 / 5; }
.cat__tab { position: absolute; top: 8px; left: 8px; background: var(--tab, var(--rojo)); color: #15171C; font-weight: 800; font-size: 12.5px; padding: 3px 9px; border-radius: 6px; }
:root[data-theme="infografia"] .cat__tab { border: 2px solid #15171C; }
.cat--error .cat__tab { background: var(--rojo); color: #fff; }
.cat__txt { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; border-top: var(--borde); }
.cat__txt strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 17px; line-height: 1.15; }
.cat__txt small { color: var(--tinta-3); font-size: 13px; line-height: 1.35; }
.cat--error .cat__txt small { color: var(--tinta-2); }

/* ---------- Reglas ---------- */
.reglas__grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .reglas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reglas__grid { grid-template-columns: repeat(4, 1fr); } }
.regla { display: flex; gap: 14px; padding: 18px; background: var(--superficie); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); animation: entrar .4s ease both; animation-delay: calc(var(--i) * 40ms); }
@media (min-width: 1000px) { .regla { flex-direction: column; } }
.regla__icono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); flex: none; }
.regla__icono .ico { width: 24px; height: 24px; }
:root[data-theme="infografia"] .regla__icono { border: 2px solid #15171C; color: #15171C; background: #F6C343; border-radius: 50%; }
:root[data-theme="infografia"] .regla:nth-child(4n+2) .regla__icono { background: #2BC46B; }
:root[data-theme="infografia"] .regla:nth-child(4n+3) .regla__icono { background: #F38B85; }
:root[data-theme="infografia"] .regla:nth-child(4n+4) .regla__icono { background: #4CC3EE; }
.regla h3 { font-size: 20px; margin-bottom: 4px; }
.regla p { color: var(--tinta-2); font-size: 15px; }

/* ---------- Visor (modal de ficha) ---------- */
.visor {
  padding: 0; border: 0; width: 100%; max-width: 1120px; max-height: 100dvh; height: 100dvh; margin: 0 auto;
  background: var(--superficie); color: var(--tinta); border-radius: 0;
}
@media (min-width: 900px) { .visor { height: calc(100dvh - 48px); margin: 24px auto; border-radius: 20px; border: var(--borde); } }
:root[data-theme="infografia"] .visor { box-shadow: 8px 8px 0 #15171C; }
.visor::backdrop { background: rgba(10, 10, 14, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.visor[open] { animation: subir .25s ease; }
.visor__in { display: flex; flex-direction: column; height: 100%; }
.visor__cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: var(--borde); }
.visor__cab h2 { font-size: 22px; flex: 1; min-width: 0; }
.visor__tab { background: var(--tab); color: #15171C; font-weight: 800; padding: 5px 12px; border-radius: 8px; font-family: "Lexend", var(--f-texto); }
:root[data-theme="claro"] .visor__tab { background: var(--rojo); color: #fff; }
:root[data-theme="infografia"] .visor__tab { border: 2px solid #15171C; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: var(--borde); background: var(--superficie); color: var(--tinta); display: grid; place-items: center; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--fondo-2); }

.visor__cuerpo { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; overscroll-behavior: contain; }
@media (min-width: 900px) { .visor__cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; } }
.visor__fig { margin: 0; background: var(--fondo-2); display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 900px) { .visor__fig { overflow: auto; } }
.visor__img { border: 0; padding: 14px 14px 6px; background: none; cursor: zoom-in; display: block; width: 100%; flex: 0 0 auto; }
.visor__img img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; margin: 0 auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }
@media (min-width: 900px) { .visor__img img { max-height: calc(100dvh - 270px); } }
.visor__fig.zoom .visor__img { cursor: zoom-out; overflow: auto; }
.visor__fig.zoom .visor__img img { max-height: none; width: 100%; max-width: none; }
@media (min-width: 900px) { .visor__fig.zoom .visor__img img { width: 160%; } }
.visor__fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 16px 12px; font-size: 13.5px; color: var(--tinta-3); }
.visor__fig figcaption > span { display: inline-flex; align-items: center; gap: 6px; }
.visor__fig--error { background: color-mix(in srgb, var(--rojo) 8%, var(--fondo-2)); }
.cap-error { color: var(--rojo); font-weight: 700; font-size: 14.5px; }

.visor__info { padding: 18px 18px 28px; }
@media (min-width: 900px) { .visor__info { overflow: auto; padding: 22px 26px 32px; } }
.visor__info h3 { font-size: 19px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.h-error { color: var(--rojo); }
.donde { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radio-sm); background: var(--verde-sua); color: var(--verde); margin-bottom: 14px; }
.donde .ico { width: 26px; height: 26px; }
.donde small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; opacity: .85; }
.donde strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 20px; color: var(--tinta); }
:root[data-theme="infografia"] .donde { border: 2px solid #15171C; color: #15171C; }
.visor__info .condicion { margin-bottom: 14px; }
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.seg { padding: 8px 14px; border-radius: 999px; border: var(--borde); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--tinta-2); min-height: 40px; display: inline-flex; align-items: center; }
.seg.activo { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
:root[data-theme="claro"] .seg.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.puntos--grandes { gap: 10px; }
.puntos--grandes li { font-size: 16.5px; padding: 10px 12px; border-radius: var(--radio-sm); background: var(--fondo); }
:root[data-theme="infografia"] .puntos--grandes li { border: 2px solid #15171C; background: #fff; }
.puntos--grandes b { width: 26px; height: 26px; font-size: 13px; }
.desc { color: var(--tinta-2); font-size: 15.5px; }
.notas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.notas li { display: flex; gap: 8px; font-size: 14.5px; color: var(--tinta-2); }
.notas .ico { margin-top: 3px; color: var(--tinta-3); }
.errores { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.err { display: flex; flex-direction: column; text-decoration: none; border: var(--borde); border-radius: var(--radio-sm); overflow: hidden; background: var(--superficie); transition: border-color .15s ease; }
.err img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.err span { font-size: 12.5px; padding: 6px 8px 8px; color: var(--tinta-2); line-height: 1.3; }
.err:hover, .err.activo { border-color: var(--rojo); box-shadow: 0 0 0 2px var(--rojo); }
.visor__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: var(--borde); }
.visor__pos { font-size: 14px; color: var(--tinta-3); font-weight: 600; }

/* ---------- Pie ---------- */
.pie { margin-top: 56px; padding: 22px 0 36px; border-top: var(--borde); color: var(--tinta-3); font-size: 13.5px; }
:root[data-theme="infografia"] .pie { border-top-width: 2px; }
.pie__sub { margin-top: 4px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--tinta); color: var(--fondo); padding: 10px 18px; border-radius: 999px; font-weight: 600; transition: all .25s ease; z-index: 50;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Animaciones ---------- */
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   v2 — navegación inferior, búsqueda, capacitación, presentación, quiz, PWA
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--superficie); color: var(--tinta); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.saltar:focus { top: 8px; }
.solo-desktop { display: none !important; }
@media (min-width: 900px) { .solo-desktop { display: inline-flex !important; } p.solo-desktop { display: block !important; margin-top: 18px; } }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn--grande { min-height: 52px; font-size: 17px; padding: 0 22px; }
.btn:hover { filter: brightness(1.04); }
.paso__head h3 { font-size: 21px; display: flex; align-items: center; gap: 8px; }
@media (min-width: 720px) { .paso__head h3 { font-size: 26px; } }

/* Navegación inferior en celular (pulgar) */
@media (max-width: 719px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 0 4px env(safe-area-inset-bottom);
    gap: 0; justify-content: space-around; background: var(--superficie); color: var(--tinta-2);
    border-top: var(--borde); box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); overflow: visible;
  }
  .tabs a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; font-size: 12.5px; min-height: 60px; padding: 6px 4px; border-bottom: 0; border-top: 3px solid transparent; opacity: 1; }
  .tabs a .ico { width: 22px; height: 22px; }
  .tabs a.activo { color: var(--rojo); border-top-color: var(--rojo); }
  :root[data-theme="infografia"] .tabs a.activo { color: #15171C; background: #FFE9A6; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Indicador sin conexión */
.sin-red { display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #FFE9A6; color: #5C3D00; white-space: nowrap; }
.sin-red .ico { width: 15px; height: 15px; }
body.offline .sin-red { display: inline-flex; }

/* Novedad */
.novedad {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 12px 14px 16px; border-radius: var(--radio);
  background: var(--superficie); border: var(--borde); border-left: 6px solid var(--rojo); box-shadow: var(--sombra); animation: entrar .35s ease both;
}
.novedad__icono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--rojo) 12%, transparent); color: var(--rojo); }
.novedad div { flex: 1; min-width: 0; }
.novedad small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--rojo); }
.novedad strong { display: block; font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 19px; margin: 2px 0; }
.novedad p { font-size: 15px; color: var(--tinta-2); }
.icon-btn--sm { width: 40px; height: 40px; }

/* Buscador */
.buscador { position: relative; margin-top: 20px; }
.buscador > .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--tinta-3); pointer-events: none; }
.buscador input {
  width: 100%; min-height: 54px; padding: 0 16px 0 46px; font: inherit; font-size: 16.5px; color: var(--tinta);
  background: var(--superficie); border: var(--borde); border-radius: 999px; box-shadow: var(--sombra);
}
:root[data-theme="claro"] .buscador input, :root[data-theme="nocturno"] .buscador input { border-width: 1.5px; }
.buscador input:focus { outline: 3px solid color-mix(in srgb, var(--rojo) 45%, transparent); outline-offset: 1px; }
.buscador input::placeholder { color: var(--tinta-3); }
.busqueda-fotos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 14px; color: var(--tinta-3); font-weight: 600; }
.busqueda-fotos[hidden] { display: none; }
.vacio { display: flex; gap: 8px; align-items: center; padding: 16px; color: var(--tinta-2); }
.vacio[hidden] { display: none; }
.servicios .serv[hidden] { display: none; }

/* Capacitación */
.capacitacion__grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .capacitacion__grid { grid-template-columns: 1.4fr 1fr; } }
.cap-card { display: flex; gap: 16px; padding: 18px; background: var(--superficie); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.cap-card h3 { font-size: 21px; margin-bottom: 4px; }
.cap-card p { color: var(--tinta-2); font-size: 15px; margin-bottom: 12px; }
.cap-card__icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, #4CC3EE 22%, transparent); color: #0B6A8C; }
.cap-card__icono--quiz { background: color-mix(in srgb, #A98BF5 25%, transparent); color: #5B3FB8; }
:root[data-theme="nocturno"] .cap-card__icono { color: #7FD8F7; }
:root[data-theme="nocturno"] .cap-card__icono--quiz { color: #C9B6FF; }
:root[data-theme="infografia"] .cap-card__icono { border: 2px solid #15171C; color: #15171C; background: #4CC3EE; border-radius: 50%; }
:root[data-theme="infografia"] .cap-card__icono--quiz { background: #A98BF5; }
.cap-card__icono .ico { width: 24px; height: 24px; }
.chips--acciones { margin-top: 0; }
.chips--acciones .chip { min-height: 44px; padding: 6px 14px; font-size: 14px; }

/* Instalar */
.instalar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 20px; padding: 16px; border-radius: var(--radio); background: var(--fondo-2); }
.instalar[hidden] { display: none; }
.instalar > div { flex: 1 1 200px; }
.instalar strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 19px; }
.instalar p { font-size: 14.5px; color: var(--tinta-2); }
.instalar__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie); color: var(--rojo); }
:root[data-theme="infografia"] .instalar { border: 2px dashed #15171C; background: transparent; }

/* Novedades (lista) */
.novedades { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.novedades li { display: flex; gap: 14px; padding: 14px 16px; background: var(--superficie); border: var(--borde); border-radius: var(--radio-sm); }
.novedades time { font-weight: 700; font-size: 13.5px; color: var(--rojo); white-space: nowrap; padding-top: 2px; min-width: 84px; }
.novedades strong { font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 18px; }
.novedades p { color: var(--tinta-2); font-size: 15px; }

/* Toast con acción */
.toast { display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); }
.toast button { border: 0; background: var(--rojo); color: #fff; font: inherit; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.toast.visible { pointer-events: auto; }

/* ---------- Quiz ---------- */
.quiz { max-width: 760px; margin: 24px auto 0; }
.quiz__hero { display: flex; gap: 16px; align-items: flex-start; }
.quiz__hero h1 { font-size: clamp(30px, 6vw, 44px); }
.quiz__hero p { color: var(--tinta-2); font-size: 17px; margin-top: 6px; }
.quiz__form { margin-top: 24px; display: grid; gap: 18px; padding: 20px; background: var(--superficie); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.campo { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo > span, .campo legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: 8px; }
.campo small { font-weight: 500; color: var(--tinta-3); }
.campo input[type="text"], .campo input[type="number"], .campo input[type="password"], .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--tinta);
  background: var(--fondo); border: var(--borde); border-radius: var(--radio-sm);
}
:root[data-theme="claro"] .campo input, :root[data-theme="claro"] .campo select, :root[data-theme="claro"] .campo textarea { border-width: 1.5px; }
.opciones-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.radio span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 999px; border: var(--borde); font-weight: 600; cursor: pointer; }
.radio input:checked + span { background: var(--rojo); border-color: var(--rojo); color: #fff; }
:root[data-theme="infografia"] .radio input:checked + span { background: #15171C; border-color: #15171C; }
.radio input:focus-visible + span { outline: 3px solid var(--primario); outline-offset: 2px; }
.quiz__form .btn { justify-self: start; }

.quiz__top { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tinta-2); }
.quiz__barra { flex: 1; height: 10px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
:root[data-theme="infografia"] .quiz__barra { border: 2px solid #15171C; height: 14px; }
.quiz__barra i { display: block; height: 100%; background: var(--rojo); border-radius: 99px; transition: width .3s ease; }
.quiz__ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--verde); }
.quiz__preg { font-size: clamp(24px, 5.2vw, 34px); margin: 22px 0 18px; outline: none; line-height: 1.2; }
.quiz__ops { display: grid; gap: 10px; }
.op {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; text-align: left; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--tinta); background: var(--superficie); border: var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); transition: border-color .15s ease, background-color .15s ease;
}
:root[data-theme="claro"] .op, :root[data-theme="nocturno"] .op { border-width: 1.5px; }
.op:hover:not(:disabled) { border-color: var(--rojo); }
.op:active:not(:disabled) { background: var(--fondo-2); }
.op__letra { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--fondo-2); font-weight: 800; font-size: 15px; }
.op > span:nth-child(2) { flex: 1; }
.op__marca { width: 24px; height: 24px; flex: none; }
.op:disabled { cursor: default; color: var(--tinta); }
.op--ok { border-color: var(--verde) !important; background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); }
.op--ok .op__letra { background: var(--verde); color: #fff; }
.op--ok .op__marca { color: var(--verde); }
.op--mal { border-color: var(--rojo) !important; background: color-mix(in srgb, var(--rojo) 10%, var(--superficie)); }
.op--mal .op__letra { background: var(--rojo); color: #fff; }
.op--mal .op__marca { color: var(--rojo); }
.quiz__fb { margin-top: 16px; padding: 16px; border-radius: var(--radio); display: grid; gap: 14px; grid-template-columns: 1fr; animation: entrar .25s ease both; }
.quiz__fb[hidden] { display: none; }
@media (min-width: 560px) { .quiz__fb { grid-template-columns: 1fr 120px; } .quiz__fb .btn { grid-column: 1 / -1; } }
.quiz__fb--ok { background: var(--verde-sua); }
.quiz__fb--mal { background: color-mix(in srgb, var(--rojo) 9%, var(--superficie)); }
.quiz__fb-txt strong { display: flex; align-items: center; gap: 8px; font-size: 20px; font-family: var(--f-titulo); }
.quiz__fb--ok strong { color: var(--verde); }
.quiz__fb--mal strong { color: var(--rojo); }
.quiz__fb-txt p { margin-top: 6px; font-size: 16px; color: var(--tinta); }
.quiz__fb-img { position: relative; display: block; border-radius: var(--radio-sm); overflow: hidden; border: var(--borde); max-width: 140px; text-decoration: none; }
.quiz__fb-img img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; width: 100%; }
.quiz__fb-img span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .65); }
.quiz__salir { margin-top: 18px; }
.quiz__puntaje { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding: 22px; background: var(--superficie); border: var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.quiz__aro {
  --c: var(--rojo); width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--pct) * 1%), var(--fondo-2) 0);
}
.quiz__puntaje--ok .quiz__aro { --c: var(--verde); }
.quiz__aro span { width: 108px; height: 108px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-size: 20px; color: var(--tinta-2); font-family: "Lexend", var(--f-texto); }
.quiz__aro b { font-size: 38px; color: var(--tinta); line-height: 1; }
.quiz__puntaje h1 { display: flex; align-items: center; gap: 10px; font-size: 40px; }
.quiz__puntaje p { color: var(--tinta-2); font-size: 17px; margin-top: 4px; }
.quiz__envio { display: flex; align-items: center; gap: 6px; font-size: 14.5px !important; color: var(--verde) !important; font-weight: 600; }
.repaso { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.repaso li { display: grid; gap: 6px; padding: 14px 16px; background: var(--superficie); border: var(--borde); border-radius: var(--radio-sm); }
.repaso strong { font-size: 16px; }
.repaso__ok { display: flex; gap: 6px; align-items: center; color: var(--verde); font-weight: 700; }
.repaso small { color: var(--tinta-2); font-size: 14.5px; }
.quiz__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- Modo presentación ---------- */
body.presentando { overflow: hidden; }
.pres { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--fondo); color: var(--tinta); }
.pres[hidden] { display: none; }
.pres__cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: var(--borde); background: var(--superficie); }
.pres__cab strong { flex: 1; font-family: var(--f-titulo); font-weight: var(--titulo-peso); font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres__cont { font-weight: 700; color: var(--tinta-3); font-size: 14px; }
.pres__slide { flex: 1; min-height: 0; overflow: auto; padding: clamp(14px, 2.5vw, 36px); }
.pres__pie { display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: var(--borde); background: var(--superficie); }
.pres__barra { flex: 1; height: 8px; border-radius: 99px; background: var(--fondo-2); overflow: hidden; }
.pres__barra i { display: block; height: 100%; background: var(--rojo); transition: width .3s ease; }
@media (max-width: 560px) { .pres__pie .btn span { display: none; } .pres__pie .btn { padding: 0 14px; } }
.pres:fullscreen { background: var(--fondo); }

.sl { min-height: 100%; animation: aparecer .3s ease both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.sl h1 { font-size: clamp(30px, 5vw, 68px); }
.sl--portada { display: grid; gap: 24px; align-content: center; }
@media (min-width: 900px) { .sl--portada { grid-template-columns: 1fr 1fr; align-items: center; } }
.sl-portada__txt h1 { margin: 14px 0 12px; }
.sl-portada__txt p { font-size: clamp(17px, 1.8vw, 24px); color: var(--tinta-2); margin: 10px 0; }
.sl-tecs { display: flex; gap: 8px; }
.sl-tecs .tec { font-size: 15px; padding: 4px 14px; }
.sl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sl-lista li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--superficie); border: var(--borde); border-left: 6px solid var(--tab); border-radius: var(--radio-sm); font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; }
.sl-lista b { font-family: "Lexend", var(--f-titulo); font-size: 1.4em; color: var(--rojo); min-width: 2ch; }
.sl-lista .chip { font-size: .8em; }
.sl-lista span:not(.chip) { flex: 1; }
.sl-lista em { font-style: normal; color: var(--tinta-3); font-weight: 500; }
.sl-lista small { color: var(--tinta-3); font-size: .72em; font-weight: 600; }
@media (max-width: 600px) { .sl-lista small { display: none; } }

.sl--foto { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sl--foto { height: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }
.sl__img { margin: 0; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.sl__img img { max-height: calc(100dvh - 190px); width: auto; max-width: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, .16); }
@media (max-width: 899px) { .sl__img img { max-height: 58vh; } }
.sl__info { position: relative; min-width: 0; }
.sl__num { font-family: "Lexend", var(--f-titulo); font-weight: 800; font-size: clamp(56px, 9vw, 130px); line-height: .9; color: var(--num-relleno); -webkit-text-stroke: var(--num-trazo) var(--num-color); }
:root[data-theme="claro"] .sl__num { color: var(--rojo); }
.sl__tab { display: inline-block; margin: 10px 0 8px; background: var(--tab); color: #15171C; font-weight: 800; padding: 6px 16px; border-radius: 10px; font-size: clamp(16px, 1.6vw, 22px); font-family: "Lexend", var(--f-texto); }
:root[data-theme="claro"] .sl__tab { background: var(--rojo); color: #fff; }
:root[data-theme="infografia"] .sl__tab { border: 2.5px solid #15171C; }
.sl__info h2 { font-size: clamp(28px, 4vw, 54px); margin-bottom: 14px; }
.sl__info h2 small { font-size: .55em; color: var(--tinta-3); font-weight: 600; }
.sl__info h3 { display: flex; align-items: center; gap: 8px; font-size: clamp(20px, 2vw, 28px); margin: 20px 0 10px; color: var(--verde); }
.donde--sl { display: inline-flex; margin-bottom: 14px; }
.puntos--sl { gap: 12px; }
.puntos--sl li { font-size: clamp(18px, 2vw, 28px); line-height: 1.3; }
.puntos--sl b { width: 1.4em; height: 1.4em; font-size: .75em; }
.sl__alerta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--rojo); color: #fff; font-weight: 700; font-size: clamp(15px, 1.5vw, 20px); margin-bottom: 14px; }
.sl--error .sl__info h2 { color: var(--rojo); }
.sl--reglas h1 { margin-bottom: 20px; }
.sl--reglas .regla h3 { font-size: clamp(18px, 1.7vw, 24px); }
.sl--reglas .regla p { font-size: clamp(14px, 1.3vw, 18px); }
.sl--cierre { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: center; text-align: left; }
.sl--cierre h1 { font-size: clamp(44px, 8vw, 110px); color: var(--rojo); }
.sl--cierre p { font-size: clamp(18px, 2vw, 28px); color: var(--tinta-2); margin-top: 8px; }
.sl-url { font-family: "Lexend", var(--f-texto); font-weight: 700; color: var(--tinta) !important; word-break: break-all; }
.sl-pie { font-size: 15px !important; color: var(--tinta-3) !important; }
.qr { padding: 16px; background: #fff; border-radius: 18px; box-shadow: var(--sombra); }
.qr[hidden] { display: none; }
.qr img, .qr canvas { display: block; width: 240px; height: 240px; }