/* Línea visual de «Del aula a la comunidad» (.pptx): una pantalla por parte, como una diapositiva,
   alternando CONTENIDO_CLARO (#F4F4F4) y CONTENIDO_OSCURO (#101010). Se avanza deslizando o con el mando inferior. */
:root {
  /* claro */
  --c-fondo: #F4F4F4;        /* layout CONTENIDO_CLARO / LIBRE_CLARO */
  --c-texto: #111111;        /* títulos y texto principal */
  --c-gris: #55555B;         /* texto secundario */
  --c-tarjeta: #FFFFFF;      /* tarjetas claras (slides 11, 14) */
  --c-borde: #D9D9D9;
  --verde: #2A7A3E;          /* verde Sapientiam sobre claro (rótulos, cifras, tarjeta destacada) */
  --verde-suave: #DCE6DC;    /* caja resaltada del cronograma (slide 9) */
  --verde-texto: #1F5C2F;    /* verde para texto pequeño sobre --verde-suave (6,2:1; #2A7A3E daba 4,15:1) */
  /* oscuro */
  --o-fondo: #101010;        /* layout CONTENIDO_OSCURO / LIBRE_OSCURO */
  --o-tarjeta: #1B1E1B;      /* frente*_fondo */
  --o-borde: #2C302C;
  --o-texto: #F2F2EC;
  --o-gris: #A6A6A6;
  --verde-vivo: #4CA62E;     /* verde sobre oscuro (frente*_borde, números) */
  --mal: #B3261E;
  --f-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;  /* Montserrat Black en títulos */
  --f-texto: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --mando: 68px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* sin esto, .tarjeta-verde { display: grid } mostraba la respuesta del reto antes de elegir */
html, body { height: 100%; }
body { margin: 0; background: var(--c-fondo); color: var(--c-texto); font: 500 16px/1.5 var(--f-texto); -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 900; margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 6vw, 2rem); }
h3 { font-size: 1.15rem; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
code { font: 0.8em/1.4 var(--f-mono); overflow-wrap: anywhere; }
.mono { font-family: var(--f-mono); font-size: .8rem; }
.gris { color: var(--c-gris); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo { font: 700 .78rem/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.fuente { font: .75rem/1.45 var(--f-mono); color: var(--c-gris); }
.firma { font: 400 .75rem/1 var(--f-mono); color: var(--c-gris); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.firma::before { content: "✓"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 2px; background: var(--verde); color: #fff; font-size: .6rem; }
.centrado { text-align: center; justify-items: center; }

/* ---------- Pista horizontal: una pantalla por parte ---------- */
.recorrido { overflow: hidden; }
.pista {
  display: flex; height: calc(100% - var(--mando) - env(safe-area-inset-bottom, 0px));
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; outline: none;
}
.pista::-webkit-scrollbar { display: none; }
.pantalla {
  position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: 28px;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px));
}
.lienzo { max-width: 620px; margin: 0 auto; display: grid; gap: 14px; }
.lienzo + .lienzo { margin-top: 22px; }
.claro { background: var(--c-fondo); color: var(--c-texto); }
.oscuro { background: var(--o-fondo); color: var(--o-texto); }
.oscuro .gris, .oscuro .fuente, .oscuro .firma { color: var(--o-gris); }
.oscuro .rotulo { color: var(--verde-vivo); }
.oscuro .firma::before { background: var(--verde-vivo); color: var(--o-fondo); }
.titulo { font-size: clamp(1.55rem, 7vw, 2.15rem); }

/* ---------- Mando inferior (táctil) ---------- */
.mando {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(var(--mando) + env(safe-area-inset-bottom, 0px));
  padding: 8px max(10px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px;
  background: var(--c-tarjeta); border-top: 1px solid var(--c-borde);
}
.paso { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--c-texto); background: transparent; color: var(--c-texto);
  font: 700 1.6rem/1 var(--f-titulo); cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; touch-action: manipulation; }
.paso:active { background: var(--verde-suave); }
.paso:disabled { opacity: .25; cursor: default; }
.centro { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.lugar { font: 700 .78rem/1.2 var(--f-mono); color: var(--c-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.puntos { display: flex; gap: 0; }
.puntos button { width: 34px; height: 44px; min-height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.puntos button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-borde); transition: width .2s ease, background .2s ease; }
.puntos button[aria-current="step"]::after { width: 22px; border-radius: 4px; background: var(--verde); }

/* ---------- Portada ---------- */
.titulo-portada { font-size: clamp(2.6rem, 13vw, 4rem); font-weight: 900; line-height: 1; }
.barra-verde { display: block; width: 74px; height: 5px; background: var(--verde); border-radius: 1px; }
.subtitulo { font-weight: 700; font-size: 1.05rem; color: var(--c-gris); }
.indice { display: grid; gap: 8px; margin-top: 8px; }
.fila { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; text-align: left; min-height: 52px; padding: 10px 14px;
  background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-left: 4px solid var(--verde); border-radius: 6px;
  font: 700 .98rem/1.25 var(--f-texto); color: var(--c-texto); cursor: pointer; touch-action: manipulation; }
.fila:active { background: var(--verde-suave); }
.num { font: 700 .9rem/1 var(--f-mono); color: var(--verde); }
.pista-gesto { font: 700 .78rem/1 var(--f-mono); color: var(--verde); display: flex; align-items: center; gap: 6px; }
.flecha { display: inline-block; font-size: 1.1rem; animation: empuje 1.6s ease-in-out 3; }
@keyframes empuje { 50% { transform: translateX(6px); } }

/* ---------- Componentes compartidos ---------- */
.cifra-gigante { font: 900 clamp(4.2rem, 24vw, 6.5rem)/1 var(--f-titulo); color: var(--verde); letter-spacing: -0.03em; }
.oscuro .cifra-gigante { color: var(--verde-vivo); }
.cita { background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-left: 4px solid var(--verde); border-radius: 4px; padding: 10px 14px; font-weight: 700; font-size: .92rem; text-align: center; }
.oscuro .cita { background: var(--o-tarjeta); border-color: var(--o-borde); border-left-color: var(--verde-vivo); color: var(--o-texto); }
.tarjeta { background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 6px; padding: 14px 16px; }
.tarjeta-verde { background: var(--verde); color: #fff; border-radius: 6px; padding: 18px; display: grid; gap: 10px; }
.tarjeta-verde .rotulo { color: #FFFFFF; }
.tarjeta-verde h3 { font-size: 1.35rem; font-weight: 900; }
.tarjeta-o { background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: 6px; padding: 14px; position: relative; overflow: hidden; }
.tarjeta-o::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--verde-vivo); }
details summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: 10px; align-items: center; min-height: 48px; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .num { transform: rotate(45deg); }
details summary .num { transition: transform .2s ease; display: inline-block; font-size: 1.2rem; }
details[open] summary { margin-bottom: 10px; }
ul.limpia { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; font-size: .94rem; }

/* Virtus */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla-2 .tarjeta-o { display: grid; gap: 6px; align-content: start; }
.cifra { font: 900 1.7rem/1 var(--f-titulo); color: var(--verde-vivo); font-variant-numeric: tabular-nums; }
.rejilla-2 p { font-weight: 700; font-size: .84rem; line-height: 1.3; }
.rejilla-2 small { color: var(--o-gris); font-size: .78rem; line-height: 1.35; border-top: 1px solid var(--o-borde); padding-top: 6px; }
.bloque-distinto { display: grid; gap: 8px; justify-items: center; text-align: center; padding-block: 18px 6px; }
.signo { font: 900 3.2rem/1 var(--f-titulo); color: var(--verde-vivo); }
.bloque-distinto h3 { font-size: 1.4rem; font-weight: 900; }
.linea-tiempo { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font: .78rem/1.4 var(--f-mono); color: var(--verde-vivo); }
.linea-tiempo b { margin-right: 6px; }

/* Eje D */
.semanas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.semanas li { background: var(--c-tarjeta); border: 1px solid var(--c-texto); border-radius: 5px; padding: 6px 4px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.semanas small { font: 700 .75rem/1.1 var(--f-mono); color: var(--c-gris); }
.semanas li.hecho small { color: var(--verde); }
.semanas li.actual small, .semanas li.actual b { color: var(--verde-texto); }
.semanas b { font: 800 .8rem/1.1 var(--f-titulo); }
.semanas li.actual { background: var(--verde-suave); border: 2px solid var(--verde); }
.pregunta { font-size: 1.35rem; font-weight: 900; }
.muestras { display: grid; gap: 12px; }
.muestra { background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 6px; padding: 12px; display: grid; gap: 10px; }
.muestra.elegida { border: 2px solid var(--c-texto); }
.muestra.es-humana { border: 2px solid var(--verde); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.letra { font: 900 1.1rem/1 var(--f-titulo); }
.veredicto { font: 700 .78rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.veredicto.ok { color: var(--verde); }
.veredicto.ia { color: var(--mal); }
.espectro { position: relative; border-radius: 4px; overflow: hidden; background: #fff; }
.espectro img { display: block; width: 100%; height: auto; }
.techo { position: absolute; left: 7.9%; right: 1.9%; height: 0; border-top: 2px dashed; opacity: 0; transition: opacity .5s ease; }
.techo span { position: absolute; right: 4px; top: -24px; font: 700 .75rem/1 var(--f-mono); padding: 3px 5px; border-radius: 3px; color: #fff; }
.revelado .techo { opacity: 1; }
.techo.t16 { top: 30.1%; border-color: var(--verde-vivo); } .techo.t16 span { background: var(--verde); }
.techo.t11 { top: 45.8%; border-color: #E2557A; } .techo.t11 span { background: var(--mal); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.tel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tel figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.tel figcaption { font: .75rem/1.3 var(--f-mono); color: #FFFFFF; }

/* CSIRT */
.capas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.capas li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 5px; padding: 8px 12px; }
.capas li .num { font: 900 1.1rem/1 var(--f-titulo); color: var(--c-texto); }
.capas b { display: block; font-weight: 800; font-size: .95rem; }
.capas small { font: .78rem/1.3 var(--f-mono); color: var(--c-gris); }

/* ---------- Botones y formularios ---------- */
button { font: 700 .92rem/1 var(--f-texto); color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 6px;
  padding: 12px 16px; min-height: 48px; cursor: pointer; touch-action: manipulation; }
button:focus-visible, summary:focus-visible, textarea:focus-visible, .campo:focus-visible, a:focus-visible { outline: 3px solid var(--verde-vivo); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; }
button.elegir, button.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.oscuro button.primario { background: var(--verde-vivo); border-color: var(--verde-vivo); color: var(--o-fondo); }
.oir::before { content: "▶ "; font-size: .8em; }
.oir.sonando::before { content: "■ "; }
.forma { display: grid; gap: 8px; }
textarea, .campo { width: 100%; resize: vertical; font: 500 1rem/1.45 var(--f-texto); color: var(--c-texto); background: var(--c-tarjeta);
  border: 1px solid var(--c-borde); border-radius: 6px; padding: 12px; min-height: 48px; }
.oscuro textarea { background: var(--o-fondo); color: var(--o-texto); border-color: var(--o-borde); }
textarea:disabled { opacity: .55; }
.forma-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.contador { font: .78rem var(--f-mono); color: var(--c-gris); font-variant-numeric: tabular-nums; }
.oscuro .contador { color: var(--o-gris); }
.aviso { font-size: .88rem; font-weight: 600; min-height: 1.2em; }
.aviso.ok { color: var(--verde); } .aviso.error { color: var(--mal); }
.oscuro .aviso.ok { color: var(--verde-vivo); } .oscuro .aviso.error { color: #FF8A80; }

/* Muro (pantalla oscura) */
.muro { display: grid; gap: 12px; padding-top: 18px; }
.muro-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.estado { font: 700 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 7px 10px; border-radius: 4px; border: 1px solid; }
.estado.abierto { color: var(--verde-vivo); } .estado.cerrado { color: var(--o-gris); }
.ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ideas li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--o-fondo); border: 1px solid var(--o-borde); border-radius: 5px; padding: 8px 8px 8px 12px; }
.ideas li p { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .92rem; }
.voto { min-width: 66px; font: 700 .9rem/1 var(--f-mono); font-variant-numeric: tabular-nums; border-color: var(--o-borde); color: var(--o-texto); }
.voto::before { content: "▲ "; font-size: .72em; color: var(--verde-vivo); }
.voto.votada { border-color: var(--verde-vivo); color: var(--verde-vivo); opacity: 1; }

/* Cierre */
.cierre { display: grid; gap: 8px; padding-block: 16px; }
.cierre h3 { font-size: 1.35rem; font-weight: 900; }
.creditos { display: grid; gap: 6px; font-size: .78rem; color: var(--c-gris); border-top: 1px solid var(--c-borde); padding-top: 12px; }

/* Vista del equipo (página normal, sin pista) */
.equipo main { max-width: 640px; margin: 0 auto; display: grid; gap: 24px; padding: 24px max(18px, env(safe-area-inset-left, 0px)) 40px; }
.equipo .ideas li { background: var(--c-tarjeta); border-color: var(--c-borde); }

@media (min-width: 640px) {
  .rejilla-2 { grid-template-columns: repeat(4, 1fr); }
  .semanas { grid-template-columns: repeat(7, 1fr); }
  .muestras { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pista { scroll-behavior: auto; }
  .flecha { animation: none; }
  .techo, .puntos button::after, details summary .num { transition: none; }
}
.mando.oscuro { background: var(--o-tarjeta); border-top-color: var(--o-borde); }
.mando.oscuro .paso { border-color: var(--o-texto); color: var(--o-texto); }
.mando.oscuro .paso:active { background: var(--o-borde); }
.mando.oscuro .lugar { color: var(--o-gris); }
.mando.oscuro .puntos button::after { background: var(--o-borde); }
.mando.oscuro .puntos button[aria-current="step"]::after { background: var(--verde-vivo); }
.equipo section { display: grid; gap: 12px; }

/* Logos (portada y cierre, como en las diapositivas 1 y 14) */
.logos { display: flex; align-items: center; gap: 14px; }
.logos img { height: 44px; width: auto; }
.cierre .logos { justify-content: center; margin-top: 6px; }

/* Hacking Day: ediciones anteriores (pantalla oscura) */
.historia { display: grid; gap: 10px; padding-top: 8px; }
.ediciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ediciones li { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center;
  background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: 6px; padding: 6px; }
.ediciones img { width: 88px; height: 66px; object-fit: cover; border-radius: 4px; display: block; }
.ediciones span { display: grid; gap: 2px; font-weight: 700; font-size: .92rem; min-width: 0; }
.ediciones b { font: 700 .78rem/1 var(--f-mono); color: var(--verde-vivo); }
.siguiente-edicion { border-color: var(--verde-vivo) !important; }
.año-grande { display: grid !important; place-items: center; width: 88px; height: 66px; border-radius: 4px; background: var(--verde-vivo);
  color: var(--o-fondo); font: 900 1.25rem/1 var(--f-titulo) !important; }

/* Contacto */
.contacto { display: grid; gap: 8px; }
.contacto dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.contacto dt { font: 700 .78rem/2.9 var(--f-mono); color: var(--verde); }
.contacto dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contacto a { color: var(--verde); font-weight: 700; display: inline-block; padding-block: 12px; }
.seleccionable { user-select: all; font-family: var(--f-mono); font-size: .85rem; }

/* El mando se agrupa en el ancho del contenido: en pantallas anchas los botones no quedan en los extremos */
@media (min-width: 700px) { .mando { padding-left: calc((100vw - 660px) / 2); padding-right: calc((100vw - 660px) / 2); } }

/* ---------- Ilustraciones de trazo (línea negra, acentos en verde Sapientiam) ---------- */
.ilu { display: block; width: 100%; max-width: 420px; height: auto; margin-block: 4px; }
.ilu-media { max-width: 360px; margin-inline: auto; }
.ilu-chica { width: 130px; }
.ilu .t, .ico .t { fill: none; stroke: var(--c-texto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ilu .v, .ico .v, .ico-capa .v { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ilu .vf, .ico .vf { fill: var(--verde); stroke: none; }
.ilu .blanco, .ico .blanco { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ilu .punteada { stroke-dasharray: 2 7; }
.oscuro .ilu .t, .oscuro .ico .t { stroke: var(--o-texto); }
.oscuro .ilu .v, .oscuro .ico .v, .oscuro .ico-capa .v { stroke: var(--verde-vivo); }
.oscuro .ilu .vf, .oscuro .ico .vf { fill: var(--verde-vivo); }

/* Eje D: las tres estaciones */
.estaciones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.estaciones li { display: grid; justify-items: center; gap: 4px; background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 6px; padding: 10px 4px; }
.estaciones .ico { width: 44px; height: 44px; }
.estaciones span { font-weight: 700; font-size: .85rem; }

/* CSIRT: ícono de cada capa */
.capas li { grid-template-columns: 2rem 1fr 26px; }
.ico-capa { width: 24px; height: 24px; }

/* Virtus: una cuenta por punto */
.puntos-cuentas { margin: 0; display: grid; gap: 8px; }
.puntos-cuentas canvas { width: 100%; height: auto; display: block; background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: 6px; }
.puntos-cuentas figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 700; font-size: .85rem; }
.leyenda { display: inline-flex; align-items: center; gap: 6px; }
.leyenda::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.gris-punto::before { background: #7A807A; }
.verde-punto::before { background: var(--verde-vivo); box-shadow: 0 0 0 2px var(--o-fondo), 0 0 0 3.5px var(--verde-vivo); }

/* ---------- Escudo: sesiones (cada una, una ventana de videollamada) ---------- */
.sesiones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.sesiones .org { display: grid; justify-items: center; gap: 4px; background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 6px; padding: 12px 6px; text-align: center; }
.ventanas { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.ventanas span { position: relative; width: 30px; height: 22px; border: 2px solid var(--c-texto); border-radius: 3px;
  display: grid; place-items: center; font: 700 .75rem/1 var(--f-mono); color: var(--verde); }
.ventanas span::after { content: ""; position: absolute; right: -6px; top: 5px; border: 4px solid transparent; border-left-color: var(--c-texto); }
.sesiones b { font-size: .88rem; line-height: 1.2; }
.sesiones small { font: 700 .78rem/1 var(--f-mono); color: var(--verde); }

/* Escudo: consejos para la casa */
.consejos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.consejos li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; background: var(--c-tarjeta);
  border: 1px solid var(--c-borde); border-left: 4px solid var(--verde); border-radius: 6px; padding: 10px 12px; font-size: .92rem; font-weight: 600; }
.consejos .ico, .pasos-tiempo .ico, .actividades .ico { width: 44px; height: 44px; }

/* Virtus: tres pasos del 13 al 16 de octubre */
.pasos-tiempo { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; position: relative; }
.pasos-tiempo li { display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.pasos-tiempo li + li::before { content: ""; position: absolute; top: 22px; right: calc(50% + 26px); width: calc(100% - 44px); border-top: 2px dashed var(--o-borde); }
.pasos-tiempo b { font: 700 .82rem/1 var(--f-mono); color: var(--verde-vivo); }
.pasos-tiempo span { font-size: .82rem; font-weight: 600; line-height: 1.25; }

/* CSIRT: diagrama de flujo vertical */
.flujo { display: grid; gap: 0; }
.flujo .par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.flujo .columna { display: grid; gap: 0; }
.capa { background: var(--c-tarjeta); border: 1px solid var(--c-borde); border-radius: 6px; padding: 8px 10px; }
.capa.central { border: 2px solid var(--verde); }
.capa.auditoria { border: 2px dashed var(--c-gris); }
.capa summary { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; align-items: center; min-height: 48px; cursor: pointer; list-style: none; }
.capa summary::-webkit-details-marker { display: none; }
.capa .n { font: 900 1rem/1 var(--f-titulo); }
.capa .nom { display: grid; gap: 2px; min-width: 0; }
.capa .nom b { font-weight: 800; font-size: .9rem; line-height: 1.15; }
.capa .nom small { font: .75rem/1.3 var(--f-mono); color: var(--c-gris); overflow-wrap: anywhere; }
.capa[open] .nom small { display: none; }
.herr { list-style: none; margin: 8px 0 2px; padding: 8px 0 0; border-top: 1px solid var(--c-borde); display: grid; gap: 6px; }
.herr li { display: grid; gap: 1px; font-size: .82rem; line-height: 1.3; }
.herr b { font: 700 .8rem/1.2 var(--f-mono); color: var(--verde); }
.flecha-flujo { display: grid; justify-items: center; padding: 4px 0; }
.flecha-flujo::before { content: ""; height: 14px; border-left: 2px solid var(--verde); }
.flecha-flujo span { font: 700 .75rem/1 var(--f-mono); color: var(--verde-texto); background: var(--verde-suave); padding: 4px 8px; border-radius: 10px; }
.flecha-flujo::after { content: ""; border: 6px solid transparent; border-top-color: var(--verde); margin-top: 0; }
.bifurca { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 0; }
.bifurca span { justify-self: center; font: 700 .75rem/1 var(--f-mono); color: var(--verde-texto); background: var(--verde-suave); padding: 4px 8px; border-radius: 10px; position: relative; }
.bifurca span::after { content: "▼"; display: block; text-align: center; color: var(--verde); font-size: .7rem; margin-top: 4px; }
.destino { display: flex; align-items: center; gap: 6px; padding: 8px 4px 0; font-size: .78rem; font-weight: 700; color: var(--c-gris); }
.destino::before { content: "↓"; color: var(--verde); font-weight: 900; }
.ida-vuelta { text-align: center; color: var(--verde); font-size: 1.2rem; line-height: 1.6; }

/* Hacking Day: actividades */
.actividades { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; width: 100%; }
.actividades li { display: grid; justify-items: center; gap: 4px; background: var(--o-tarjeta); border: 1px solid var(--o-borde); border-radius: 6px; padding: 10px 4px; }
.actividades span { font-size: .82rem; font-weight: 700; text-align: center; }

/* Comentario: burbuja */
.ilu-burbuja { width: 180px; }

/* CSIRT en el teléfono: una sola columna; el rótulo de la bifurcación dice a qué capa va cada flujo */
.bifurca em { display: none; }
@media (max-width: 519px) {
  .flujo .par { grid-template-columns: 1fr; gap: 6px; }
  .bifurca { grid-template-columns: 1fr; justify-items: center; }
  .bifurca span { display: none; }
  .bifurca em { display: block; font: 700 .75rem/1.3 var(--f-mono); font-style: normal; color: var(--verde-texto); background: var(--verde-suave); padding: 4px 10px; border-radius: 10px; text-align: center; }
  .bifurca::after { content: "▼"; justify-self: center; color: var(--verde); font-size: .7rem; }
  .flujo .columna + .columna { margin-top: 6px; }
}
/* Hacking Day: 5 actividades en dos filas parejas (3 + 2) */
.actividades { grid-template-columns: repeat(6, 1fr); }
.actividades li:nth-child(-n+3) { grid-column: span 2; }
.actividades li:nth-child(n+4) { grid-column: span 3; }

/* ---------- Logos reales ---------- */
.herr li { grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; }
.herr li .logo { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }
.logo.inicial, .logo-mini.inicial { display: grid; place-items: center; background: var(--verde-suave); color: var(--verde-texto); font: 900 .9rem/1 var(--f-titulo); border-radius: 4px; }
.logo.inicial { width: 28px; height: 28px; }
.tira { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.logo-mini { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
.logo-mini.inicial { width: 22px; height: 22px; font-size: .75rem; }
.capa[open] .tira { display: none; }
.logo-org { height: 46px; width: auto; }
.org-texto { font: 900 1rem/1.15 var(--f-titulo); min-height: 46px; display: grid; place-items: center; }
.con-logo { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.con-logo img { height: 14px; width: auto; }
.rejilla-2 small.con-logo { justify-content: flex-start; }
.rejilla-2 small.con-logo img { height: 16px; flex: none; }
.apps { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.apps img { width: 22px; height: 22px; }
.portadas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.portadas figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.portadas img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--c-borde); display: block; }
.portadas figcaption { font: .75rem/1.3 var(--f-mono); color: var(--c-gris); text-align: left; }
.con-logo img.zoom { width: 64px; height: 64px; margin-block: -22px; }
.ilu-burbuja { width: 100%; max-width: 320px; }