/* Candidatura ISACA Madrid 2026-2028. Sistema visual propio inspirado en la paleta y la
   tipografía públicas de isaca.org. Sin logotipos ni componentes de ISACA. Sin recursos externos. */

/* Roboto y Roboto Condensed, alojadas en la propia web (SIL Open Font License 1.1, ver fuentes/OFL-*.txt) */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fuentes/roboto-latin.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fuentes/roboto-condensed-latin.woff2") format("woff2"); }

:root {
  --marino: #1d2d5c;
  --marino-2: #14203f;
  --azul: #07649d;
  --azul-vivo: #017dc2;
  --celeste: #00a4e4;
  --pizarra: #323e48;
  --texto: #28323b;
  --gris: #5b6875;
  --linea: #d5dbe1;
  --claro: #f6f7f8;
  --hielo: #e7f0f5;
  --verde: #36ac91;
  --verde-texto: #1d7662;
  --ambar: #fbb034;
  --ambar-texto: #8a5a00;
  --blanco: #ffffff;
  --borrador: #c2410c;
  --radio: 6px;
  --sombra: 0 1px 2px rgba(29, 45, 92, .06), 0 6px 20px rgba(29, 45, 92, .07);
  --ancho: 1160px;
  --fuente: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: "Roboto Condensed", Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--blanco); color: var(--texto);
  font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--azul); text-underline-offset: .18em; }
a:hover { color: var(--marino); }
:focus-visible { outline: 3px solid var(--marino-2); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; border-radius: 2px; }
.portada :focus-visible, .bloque-marino :focus-visible, .bloque-llamada :focus-visible, .pie :focus-visible,
.cabecera-seccion :focus-visible, .franja-aviso :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--marino-2); }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); color: var(--marino); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pizarra); margin-top: 1em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .envoltura { padding: 0 28px; } }
.estrecho { max-width: 800px; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--marino); color: #fff; padding: .6em 1em; z-index: 100; }
.saltar:focus { left: 8px; top: 8px; }

/* franjas superiores */
.franja-borrador { background: var(--borrador); color: #fff; text-align: center; font-size: .85rem; font-weight: 700; padding: .4em 16px; }
.franja-aviso { background: var(--marino-2); color: #cfd8e3; font-size: .8rem; line-height: 1.4; padding: .45em 0; }

/* cabecera */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 50; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--marino); }
.marca-simbolo { display: inline-grid; grid-template-columns: repeat(3, 7px); gap: 3px; align-items: end; }
.marca-simbolo span { display: block; width: 7px; border-radius: 2px; }
.marca-simbolo span:nth-child(1) { height: 14px; background: var(--celeste); }
.marca-simbolo span:nth-child(2) { height: 22px; background: var(--azul); }
.marca-simbolo span:nth-child(3) { height: 30px; background: var(--marino); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-family: var(--fuente-titulo); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
.marca-texto small { color: var(--gris); font-size: .8rem; }
@media (max-width: 440px) {
  .marca-texto strong { font-size: .86rem; letter-spacing: .01em; }
  .marca-texto small { font-size: .72rem; }
  .menu-rotulo { display: none; }
}

.menu-escritorio { display: none; }
.menu-escritorio ul, .menu-movil ul { list-style: none; margin: 0; padding: 0; }
.menu-escritorio ul { display: flex; gap: 4px; }
.menu-escritorio a, .menu-movil a { display: block; text-decoration: none; color: var(--pizarra); font-weight: 500; padding: .5em .7em; border-radius: var(--radio); }
.menu-escritorio a:hover, .menu-movil a:hover { background: var(--hielo); color: var(--marino); }
.menu-escritorio a[aria-current="page"], .menu-movil a[aria-current="page"] { color: var(--azul); box-shadow: inset 0 -3px 0 var(--celeste); border-radius: 0; }
.menu-movil summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 44px; font-weight: 600; color: var(--marino); }
.menu-movil summary::-webkit-details-marker { display: none; }
.hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 22px; height: 2px; background: var(--marino); position: relative; }
.hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; }
.hamburguesa::before { top: -7px; } .hamburguesa::after { top: 7px; }
.menu-movil[open] nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); padding: 8px 16px 16px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
.menu-movil[open] a { padding: .8em .5em; border-bottom: 1px solid var(--claro); }
@media (min-width: 1040px) { .menu-movil { display: none; } .menu-escritorio { display: block; } }

/* botones */
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0 1.2em; }
.boton { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: .7em 1.3em; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.boton .ico { width: 20px; height: 20px; }
.boton-primario { background: var(--celeste); color: var(--marino-2); }
.boton-primario:hover { background: #33b8ec; color: var(--marino-2); }
.boton-claro { border-color: rgba(255,255,255,.7); color: #fff; }
.boton-claro:hover { background: rgba(255,255,255,.12); color: #fff; }
.boton-secundario { border-color: var(--azul); color: var(--azul); background: #fff; }
.boton-secundario:hover { background: var(--hielo); }
.enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.enlace-flecha .ico { width: 18px; height: 18px; }
.enlace-claro { color: #fff; } .enlace-claro:hover { color: var(--celeste); }
.ico { width: 22px; height: 22px; flex: none; vertical-align: -5px; }
.ico-grande { width: 34px; height: 34px; }

/* portada */
.portada { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, #0b5a92 0%, rgba(11,90,146,0) 55%), linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%); }
.portada .red { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.red-lineas line { stroke: #3d8fd0; stroke-width: 1; opacity: .55; }
.red-nodos circle { fill: var(--celeste); opacity: .75; }
.portada-contenido { position: relative; padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 900px) { .portada-contenido { padding-top: 96px; padding-bottom: 96px; } }
@media (min-width: 1000px) { .portada-contenido { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; } }
.panel-cifras { margin-top: 36px; background: rgba(9, 20, 44, .55); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 22px; backdrop-filter: blur(4px); }
@media (min-width: 1000px) { .panel-cifras { margin-top: 0; } }
.panel-titulo { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--celeste); margin-bottom: 14px; }
.panel-cifras dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.panel-cifras div { border-left: 3px solid var(--celeste); padding-left: 12px; }
.panel-cifras dt { font-family: var(--fuente-titulo); font-size: 2.6rem; font-weight: 700; color: #fff; line-height: 1; }
.panel-cifras dd { margin: 4px 0 0; color: #cfd8e3; font-size: .9rem; line-height: 1.35; }
.portada h1 { color: #fff; max-width: 14ch; }
.portada-sublema { font-family: var(--fuente-titulo); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--celeste); font-weight: 700; margin-bottom: .6em; }
.portada-tesis { max-width: 58ch; font-size: 1.12rem; color: #e3eaf2; }
.portada-fecha { display: flex; align-items: center; gap: 8px; color: #cfd8e3; font-size: .95rem; margin: 0; }

.antetitulo { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 700; color: var(--azul); margin-bottom: .7em; }
.antetitulo-claro { color: var(--celeste); }
.entradilla { font-size: 1.12rem; color: var(--gris); max-width: 70ch; }

/* bloques */
.bloque { padding: 56px 0; }
@media (min-width: 900px) { .bloque { padding: 80px 0; } }
.bloque-gris { background: var(--claro); }
.bloque-marino { background: var(--marino); color: #dfe7f0; }
.bloque-marino h2, .bloque-marino h3 { color: #fff; }
.bloque-llamada { background: linear-gradient(135deg, var(--azul) 0%, var(--marino) 100%); color: #fff; padding: 48px 0; }
.bloque-llamada h2 { color: #fff; }
.llamada { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) { .llamada { flex-direction: row; align-items: center; justify-content: space-between; } }

.cabecera-seccion { background: linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%); color: #dfe7f0; padding: 48px 0 44px; }
.cabecera-seccion h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.9rem); max-width: 22ch; }
.cabecera-seccion .antetitulo { color: var(--celeste); }
.cabecera-seccion .entradilla { color: #cfd8e3; }

.rejilla-3 { display: grid; gap: 20px; }
@media (min-width: 760px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }
.dos-columnas { display: grid; gap: 40px; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* cambios */
.cambios { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .cambios { grid-template-columns: repeat(2, 1fr); } }
.cambios li { border-left: 4px solid var(--celeste); padding: 4px 0 4px 16px; }
.cambios strong { display: block; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--marino); }
.cambios span { color: var(--gris); }

/* pilares */
.rejilla-pilares { display: grid; gap: 20px; margin-top: 1.5em; }
@media (min-width: 760px) { .rejilla-pilares { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rejilla-pilares { grid-template-columns: repeat(4, 1fr); } }
.pilar { background: #fff; border: 1px solid var(--linea); border-top: 5px solid var(--color); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.pilar-cab { display: flex; align-items: center; gap: 12px; margin-bottom: .6em; color: var(--color-texto); }
.pilar-cab h3 { margin: 0; font-size: 1.35rem; }
.pilar > p { color: var(--gris); font-size: .98rem; }
.pilar-azul { --color: var(--celeste); --color-texto: var(--azul); }
.pilar-verde { --color: var(--verde); --color-texto: var(--verde-texto); }
.pilar-ambar { --color: var(--ambar); --color-texto: var(--ambar-texto); }
.pilar-marino { --color: var(--marino); --color-texto: var(--marino); }
.lista-compromisos { list-style: none; padding: 0; margin: 0; }
.compromiso-corto { display: flex; gap: 10px; align-items: baseline; padding: .55em 0; border-top: 1px solid var(--claro); text-decoration: none; color: var(--texto); font-weight: 500; line-height: 1.35; }
.compromiso-corto:hover { color: var(--azul); }
.num { font-family: var(--fuente-titulo); font-weight: 700; color: var(--color-texto, var(--azul)); font-size: .95rem; }

/* caras */
.caras { list-style: none; padding: 0; margin: 1.5em 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
@media (min-width: 600px) { .caras { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .caras { grid-template-columns: repeat(6, 1fr); } }
.caras a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; gap: 4px; }
.cara-nombre { font-weight: 700; color: var(--marino); line-height: 1.25; font-size: .95rem; }
.cara-cargo { color: var(--gris); font-size: .86rem; line-height: 1.3; }

.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar-ini { font-family: var(--fuente-titulo); font-weight: 700; color: #fff; letter-spacing: .02em; }
.avatar-ini.t0 { background: linear-gradient(135deg, var(--azul), var(--marino)); }
.avatar-ini.t1 { background: linear-gradient(135deg, var(--azul), #054a75); }
.avatar-ini.t2 { background: linear-gradient(135deg, var(--verde-texto), var(--azul)); }
.avatar-ini.t3 { background: linear-gradient(135deg, #5c6bc0, var(--marino)); }
.avatar-p { width: 72px; height: 72px; font-size: 1.4rem; }
.avatar-m { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar-g { width: 112px; height: 112px; font-size: 2.1rem; }

/* garantías */
.garantia { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radio); padding: 22px; }
.garantia .ico { color: var(--celeste); margin-bottom: 10px; }
.garantia p { margin: 0; }
.bloque-marino .rejilla-3 { margin: 1.5em 0; }

/* ruta mini */
.ruta-mini { list-style: none; padding: 0; margin: 1.5em 0; display: grid; gap: 12px; counter-reset: r; }
@media (min-width: 900px) { .ruta-mini { grid-template-columns: repeat(5, 1fr); } }
.ruta-mini li { background: var(--claro); border-radius: var(--radio); padding: 16px; border-top: 4px solid var(--azul); }
.ruta-cuando { display: block; font-family: var(--fuente-titulo); font-weight: 700; color: var(--marino); }
.ruta-que { color: var(--gris); font-size: .95rem; line-height: 1.4; }

/* programa */
.indice-pilares ul { list-style: none; padding: 20px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: .45em 1em; border-radius: 999px; border: 2px solid var(--color); color: var(--color-texto); font-weight: 700; text-decoration: none; background: #fff; }
.chip:hover { background: var(--claro); }
.bloque-pilar { padding: 48px 0 16px; }
.pilar-titulo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; color: var(--color-texto); }
.pilar-titulo h2 { margin-bottom: .2em; }
.pilar-titulo p { color: var(--gris); margin: 0; }
.compromiso { background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--color); border-radius: var(--radio); margin-bottom: 18px; box-shadow: var(--sombra); scroll-margin-top: 90px; }
.compromiso-cab { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 20px 20px 0; align-items: start; }
.compromiso-cab .num { font-size: 1.6rem; line-height: 1; padding-top: 2px; }
.compromiso-cab h3 { margin-bottom: .25em; font-size: 1.3rem; }
.compromiso-frase { color: var(--gris); margin: 0; }
.estado { grid-column: 2; justify-self: start; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--pizarra); background: var(--hielo); padding: .25em .7em; border-radius: 999px; }
.compromiso-cuerpo { display: grid; gap: 8px 32px; padding: 16px 20px 20px; }
@media (min-width: 900px) { .compromiso-cuerpo { grid-template-columns: 1fr 300px; } .estado { grid-column: auto; } .compromiso-cab { grid-template-columns: auto 1fr auto; } }
.compromiso-datos { margin: 0; background: var(--claro); border-radius: var(--radio); padding: 14px 16px; font-size: .95rem; align-self: start; }
.compromiso-datos dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 700; margin-top: .6em; }
.compromiso-datos dt:first-child { margin-top: 0; }
.compromiso-datos dd { margin: 0; font-weight: 500; }
.desplegable { border-top: 1px solid var(--linea); margin-top: .5em; }
.desplegable summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: .8em 0; min-height: 44px; }
.desplegable-cuerpo ul { margin-top: .2em; }
.depende { font-size: .95rem; color: var(--gris); }
.ideas-grupo { background: #fff; border-radius: var(--radio); padding: 20px; border: 1px solid var(--linea); }
.ideas-grupo ul { margin: 0; color: var(--gris); }
.ideas-grupo li { margin-bottom: .35em; }

/* equipo */
.fichas { display: grid; gap: 20px; margin-top: 1.5em; }
@media (min-width: 900px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 18px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); scroll-margin-top: 90px; }
@media (max-width: 480px) { .ficha { grid-template-columns: 1fr; } .avatar-g { width: 88px; height: 88px; font-size: 1.7rem; } }
.ficha h3 { font-size: 1.4rem; margin-bottom: .1em; }
.ficha-cargo { font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--azul); margin-bottom: .3em; }
.ficha-perfil { color: var(--gris); margin-bottom: .6em; }
.certs { list-style: none; padding: 0; margin: 0 0 .8em; display: flex; flex-wrap: wrap; gap: 6px; }
.certs li { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--marino); background: var(--hielo); border-radius: 4px; padding: .2em .55em; }
.foco { margin: 0 0 .8em; color: var(--texto); font-size: .97rem; }
.lidera { font-size: .92rem; color: var(--gris); }
.no-hace { font-size: .92rem; background: #fff7e6; border-left: 3px solid var(--ambar); padding: .5em .8em; border-radius: 0 4px 4px 0; }
.miembros { list-style: none; padding: 0; margin: 1em 0 2em; display: grid; gap: 14px; }
@media (min-width: 640px) { .miembros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .miembros { grid-template-columns: repeat(3, 1fr); } }
.miembro { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
.miembro > span { display: flex; flex-direction: column; line-height: 1.3; }
.miembro strong { color: var(--marino); }
.miembro span span { color: var(--gris); font-size: .92rem; }
.miembro span .miembro-perfil { font-size: .84rem; margin-top: 2px; }
.miembros-claro .miembro { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.miembros-claro strong { color: #fff; }
.miembros-claro span span { color: #cfd8e3; }
@media (min-width: 640px) { .miembros-claro { grid-template-columns: 1fr; } }
.subtitulo { margin-top: 1.2em; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--linea); border-radius: 999px; padding: .3em .9em; font-size: .92rem; color: var(--pizarra); background: #fff; }
.nota { color: var(--gris); font-style: italic; }

/* buen gobierno */
.esquema { display: grid; gap: 12px; margin: 1.5em 0 2em; max-width: 760px; }
.esq-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.esq { border-radius: var(--radio); padding: 16px; text-align: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.05rem; }
.esq-asamblea { background: var(--marino); color: #fff; }
.esq-junta { background: var(--azul); color: #fff; }
.esq-comite { background: #fff; color: var(--marino); border: 2px dashed var(--marino); }
.esq-extendida { background: var(--hielo); color: var(--marino); }
.esq-asesor { background: #fff; color: var(--gris); border: 1px solid var(--linea); }
.organos { display: grid; gap: 16px; }
@media (min-width: 760px) { .organos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .organos { grid-template-columns: repeat(3, 1fr); } }
.organo { border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; background: #fff; }
.organo-tipo { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gris); font-weight: 700; margin-bottom: .4em; }
.organo dl { margin: 0; font-size: .95rem; }
.organo dt { font-weight: 700; color: var(--marino); margin-top: .5em; }
.organo dd { margin: 0; color: var(--gris); }
.organo-comite { border: 2px solid var(--marino); }
.decalogo { list-style: none; padding: 0; margin: 1.5em 0 0; display: grid; gap: 14px; counter-reset: d; }
@media (min-width: 760px) { .decalogo { grid-template-columns: repeat(2, 1fr); } }
.decalogo li { counter-increment: d; position: relative; padding: 16px 16px 16px 64px; background: var(--claro); border-radius: var(--radio); }
.decalogo li::before { content: counter(d); position: absolute; left: 16px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--marino); color: #fff; font-family: var(--fuente-titulo); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.decalogo h3 { margin-bottom: .2em; font-size: 1.08rem; }
.decalogo p { margin: 0; color: var(--gris); font-size: .97rem; }
.pasos { list-style: none; padding: 0; margin: 1em 0 0; counter-reset: p; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.pasos li::before { content: counter(p); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--azul); color: var(--azul); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pasos strong { color: var(--marino); }
.pasos span { color: var(--gris); font-size: .95rem; }
.reglas { padding-left: 1.1em; }
.reglas li { margin-bottom: .8em; }
.declaraciones { list-style: none; padding: 0; display: grid; gap: 12px; }
.declaraciones li { background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--azul); border-radius: var(--radio); padding: 16px 18px; }
.medida { display: block; margin-top: .4em; color: var(--gris); }
.principios { list-style: none; padding: 0; margin: 1.5em 0 0; }
.principios li { background: #fff; border-radius: var(--radio); padding: 20px; border-top: 4px solid var(--verde); }
.principios h3 { margin-bottom: .3em; }
.principios p { margin: 0; color: var(--gris); }

/* hoja de ruta */
.linea-tiempo { list-style: none; padding: 0; margin: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.fase { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 20px; padding-bottom: 32px; }
.fase-marca { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--celeste); position: relative; z-index: 1; margin-top: 4px; }
.fase:first-child .fase-marca { border-color: var(--ambar); }
.fase-cuando { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 700; color: var(--azul); margin-bottom: .2em; }
.fase h2 { font-size: 1.5rem; }
.fase ul { margin: 0; color: var(--texto); }
.fase li { margin-bottom: .3em; }

/* participa y preguntas */
.accion { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.accion .ico { color: var(--azul); margin-bottom: 8px; }
.accion h2 { font-size: 1.5rem; }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { cursor: pointer; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; color: var(--marino); padding: 1em 2em 1em 0; position: relative; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; position: absolute; right: 4px; top: .8em; font-size: 1.5rem; color: var(--azul); }
.pregunta[open] summary::after { content: "\2212"; }
.pregunta p { color: var(--texto); padding-bottom: 1em; margin: 0; }
.texto-legal h2 { font-size: 1.25rem; margin-top: 1.4em; }

/* etiquetas de borrador (sólo vista previa) */
.etiqueta-borrador { display: inline-block; align-self: flex-start; width: auto; margin-top: .5em; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--borrador); padding: .2em .6em; border-radius: 4px; }

/* pie */
.pie { background: var(--marino-2); color: #b9c4d0; padding: 48px 0 24px; font-size: .95rem; }
.pie a { color: #dfe7f0; }
.pie a:hover { color: var(--celeste); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .4em; }
.pie-rejilla { display: grid; gap: 28px; }
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 2fr 1fr 1fr; } }
.pie-lema { font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: .2em; }
.pie-titulo { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.pie-asamblea { display: flex; align-items: center; gap: 8px; color: var(--celeste); }
.pie-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 20px; font-size: .82rem; color: #93a1b0; }

@media print {
  .cabecera, .franja-aviso, .franja-borrador, .portada .red, .bloque-llamada { display: none; }
  .portada, .cabecera-seccion, .bloque-marino { background: none; color: #000; }
  .portada h1, .cabecera-seccion h1, .bloque-marino h2 { color: #000; }
}

.distincion { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 .8em; padding: .35em .8em .35em .6em;
  background: #fff7e6; border: 1px solid #f4d48a; border-radius: 10px; color: var(--ambar-texto); font-weight: 700; font-size: .88rem; line-height: 1.3; }
.distincion .ico { width: 18px; height: 18px; color: #c98a00; }

/* selector de idioma */
.cabecera-acciones { display: flex; align-items: center; gap: 6px; }
.idioma { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: .35em .8em; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; color: var(--marino); font-weight: 600; font-size: .9rem; }
.idioma:hover { background: var(--hielo); color: var(--marino); }
.idioma .ico { width: 18px; height: 18px; color: var(--azul); }
@media (min-width: 1040px) { .menu-escritorio { order: 2; margin-left: auto; } .cabecera-acciones { order: 3; } }
.idioma-corto { display: none; font-weight: 700; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 440px) { .idioma-largo { display: none; } .idioma-corto { display: inline; } .idioma { padding: .35em .6em; } }
.aviso-idioma { color: #fff; margin-left: .6em; white-space: nowrap; }

/* fotos y vídeos */
.medio { margin: 0 0 24px; }
.medio-img, .medio-video { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--marino); object-fit: cover; box-shadow: var(--sombra); }
.medio-16-9 { aspect-ratio: 16 / 9; }
.medio-21-9 { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .medio-21-9 { aspect-ratio: 16 / 9; } }
.medio figcaption { color: var(--gris); font-size: .92rem; margin-top: 8px; }
.medio-persona { margin: 12px 0 0; }
.columnas-medio { align-items: center; }
@media (min-width: 900px) { .columnas-medio { grid-template-columns: 1fr 1.3fr; } }
.bloque-mensaje { background: linear-gradient(180deg, var(--hielo) 0%, #fff 100%); }

/* huecos pendientes (sólo vista previa) */
.hueco-medio { display: flex; align-items: center; justify-content: center; margin: 0 0 24px; padding: 20px; border: 2px dashed var(--borrador); border-radius: 10px; background: repeating-linear-gradient(135deg, #fff7f2, #fff7f2 14px, #fdeee4 14px, #fdeee4 28px); color: #7a2e0b; }
.hueco-medio.medio-21-9, .hueco-medio.medio-16-9 { aspect-ratio: auto; min-height: 220px; }
.hueco-cuerpo { max-width: 680px; }
.hueco-tipo { display: flex; align-items: center; gap: 8px; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .08em; font-size: .82rem; color: var(--borrador); margin-bottom: .4em; }
.hueco-tipo .ico { width: 22px; height: 22px; }
.hueco-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.25rem; color: #5a2309; margin-bottom: .4em; }
.hueco-que { font-size: .95rem; margin-bottom: .6em; }
.hueco-spec { font-size: .82rem; margin: 0; opacity: .9; }
.hueco-medio code, .hueco-mini code { background: rgba(255,255,255,.7); padding: 0 .3em; border-radius: 3px; font-size: .85em; }
.hueco-mini { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: #7a2e0b; background: #fff7f2; border: 1px dashed var(--borrador); border-radius: 6px; padding: 8px 10px; margin: 10px 0 0; line-height: 1.4; }
.hueco-mini .ico { width: 18px; height: 18px; flex: none; color: var(--borrador); margin-top: 1px; }
.bloque-marino .hueco-medio { margin-top: 20px; }

/* menú de escritorio sin cortes de línea (los rótulos en inglés son más largos) */
.menu-escritorio a { white-space: nowrap; padding: .5em .6em; }
@media (min-width: 1040px) and (max-width: 1239px) { .menu-escritorio { display: none; } .menu-movil { display: block; } }
.nota-legal { font-size: .88rem; color: var(--gris); background: var(--claro); border-left: 3px solid var(--azul); padding: .6em .8em; border-radius: 0 4px 4px 0; }

/* tras la auditoría */
.portada-equipo { color: #e3eaf2; margin: -.2em 0 1em; }
.portada-equipo a { color: #fff; font-weight: 700; }
.indice-16 { margin-top: 12px; }
.indice-16 summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: .6em 0; min-height: 44px; }
.indice-16 ol { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 32px; }
.volver { text-align: right; font-size: .92rem; margin: 0 0 8px; }
.modelo { margin: .4em 0 1em; }
.modelo summary { cursor: pointer; font-weight: 700; color: var(--azul); min-height: 44px; padding: .5em 0; }
.modelo p { background: var(--claro); border-radius: var(--radio); padding: .8em 1em; font-size: .95rem; }
.correo-visible { font-size: .9rem; color: var(--gris); overflow-wrap: anywhere; }
.bloque-compartir { background: var(--hielo); padding: 36px 0; }
.compartir { display: flex; flex-direction: column; gap: 16px; }
.compartir h2 { font-size: 1.4rem; margin-bottom: .2em; }
.compartir p { margin: 0; color: var(--gris); }
@media (min-width: 900px) { .compartir { flex-direction: row; align-items: center; justify-content: space-between; } }
.pregunta summary .pregunta-t { display: inline; font-size: 1.15rem; margin: 0; color: var(--marino); }
.pregunta summary::after { content: "+" / ""; }
.pregunta[open] summary::after { content: "‘2" / ""; }
@media (forced-colors: active) {
  .hamburguesa, .hamburguesa::before, .hamburguesa::after { background: CanvasText; }
  .boton, .chip, .idioma { border: 2px solid ButtonText; }
}
@media print {
  .franja-aviso, .bloque-compartir, .menu-movil, .menu-escritorio, .idioma { display: none !important; }
  body, .pie, .bloque-marino, .cabecera-seccion { background: #fff !important; color: #000 !important; }
  .panel-cifras dt, .panel-cifras dd, .bloque-marino h3, .enlace-claro, .portada-tesis, .portada-equipo,
  .cabecera-seccion .entradilla, .pie-lema, .pie-titulo, .pie a, .pie, .miembros-claro strong, .miembros-claro span span { color: #000 !important; }
  .decalogo li::before, .esq { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  details > :not(summary) { display: block !important; }
  a { text-decoration: underline; }
}

.enlace-li { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; font-weight: 500; margin: 0 0 .6em; }
.enlace-li .ico-mini { width: 14px; height: 14px; }
.enlace-li-p { font-size: .84rem; margin: 3px 0 0; }
.miembro span .etiqueta-borrador { color: #fff; font-size: .72rem; align-self: flex-start; margin-top: 6px; }
.video-programa { margin-top: 2.2em; margin-bottom: .4em; }

.fichas-comite { margin: 1.4em 0 1.8em; }
@media (min-width: 1000px) { .fichas-comite { grid-template-columns: repeat(3, 1fr); } }
.bloque-marino .ficha { color: var(--texto); }
.bloque-marino .ficha h3 { color: var(--marino); }
.ficha-bio { font-size: .95rem; margin: .4em 0 0; }
.comite-texto p { color: #dfe7f0; }
.ficha-comite { align-content: start; }
.ficha-comite .avatar-g { width: 88px; height: 88px; font-size: 1.7rem; }
.ficha-comite .ficha-pie { grid-column: 1 / -1; }
.ficha-comite .ficha-pie:empty { display: none; }
.ficha-comite h3 { font-size: 1.25rem; }
.bloque-marino .entradilla { color: #cfd8e3; }
.cabecera-seccion + .bloque-marino { border-top: 1px solid rgba(255,255,255,.14); }
.portada-video { margin-top: 36px; }
@media (min-width: 1000px) { .portada-video { margin-top: 0; } }
.portada-video .hueco-medio { margin: 0; }
.portada-video .hueco-que { font-size: .82rem; max-height: 9.5em; overflow: auto; }
/* títulos de sección más visibles (2026-10-02) */
.antetitulo { display: flex; align-items: center; gap: .65em; font-size: clamp(.98rem, 1.5vw, 1.12rem); letter-spacing: .1em; margin-bottom: .55em; }
.antetitulo::before { content: ""; flex: none; width: 32px; height: 4px; border-radius: 2px; background: currentColor; }
h2 { font-size: clamp(1.75rem, 4vw, 2.65rem); letter-spacing: -.01em; }
.bloque { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
@media (max-width: 600px) { .portada .antetitulo { font-size: .86rem; letter-spacing: .08em; } }
/* lenguaje visual de las plantillas de ISACA (2026-10-02): curvas, anillos y naranja */
:root { --ambar: #e57424; --ambar-texto: #a3480f; --verde-claro: #6db642; --celeste-claro: #6ac7ea; }
.portada { background: url("curvas.svg") center bottom / 100% 70% no-repeat, radial-gradient(120% 90% at 85% 10%, #0e5c94 0%, rgba(14,92,148,0) 55%), linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%); }
.portada .red { opacity: .32; }
.cabecera-seccion { position: relative; overflow: hidden;
  background: url("curvas.svg") center bottom / 100% 85% no-repeat, radial-gradient(110% 140% at 90% 120%, #0e5c94 0%, rgba(14,92,148,0) 60%), linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%); }
@media (min-width: 900px) {
  .cabecera-seccion::after { content: ""; position: absolute; right: max(24px, calc((100vw - 1180px) / 2)); top: 50%; width: 210px; height: 210px; transform: translateY(-50%); background: url("anillos.svg") center / contain no-repeat; opacity: .9; pointer-events: none; }
}
.bloque-marino { background: url("curvas.svg") center bottom / 100% 40% no-repeat, linear-gradient(160deg, var(--marino) 0%, #16285a 70%, #123f78 100%); }
@media (min-width: 900px) { .cabecera-seccion h1, .cabecera-seccion .entradilla { max-width: min(70ch, calc(100% - 250px)); } }

/* ===================================================================================
   REDISEÑO 2026-10-02: lenguaje visual de las plantillas de capítulo de ISACA en Canva
   (curvas, arcos, anillos en «C», insignias redondas, franja naranja). Todo propio.
   =================================================================================== */
:root { --radio: 12px; --sombra: 0 2px 4px rgba(29,45,92,.06), 0 12px 32px rgba(29,45,92,.10); }

/* bordes curvos en las cabeceras oscuras */
.portada, .cabecera-seccion { border-radius: 0 0 50% 50% / 0 0 56px 56px; }
@media (max-width: 700px) { .portada, .cabecera-seccion { border-radius: 0 0 50% 50% / 0 0 28px 28px; } }

/* franja naranja bajo la portada */
.franja-naranja { background: var(--ambar); color: #fff; margin: -28px auto 0; max-width: min(1100px, calc(100% - 32px)); border-radius: 999px; position: relative; z-index: 2; box-shadow: 0 10px 24px rgba(229,116,36,.28); }
.franja-naranja-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 14px; padding-bottom: 14px; }
.franja-naranja p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.franja-naranja strong { font-weight: 900; }
.franja-naranja a { color: #fff; font-weight: 900; font-size: 1.2rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid rgba(255,255,255,.7); }
.franja-naranja a:hover { color: #fff; border-color: #fff; }
.franja-naranja .ico { width: 22px; height: 22px; }
@media (max-width: 700px) { .franja-naranja { border-radius: 18px; } .franja-naranja p, .franja-naranja a { font-size: 1.05rem; } }

/* secciones claras con grandes círculos al fondo */
.bloque-gris, .bloque-mensaje { position: relative; overflow: hidden; background: #eef5fa; }
.bloque-gris::after, .bloque-mensaje::after { content: ""; position: absolute; right: -180px; top: -160px; width: 620px; height: 620px; background: url("circulos.svg") center / contain no-repeat; pointer-events: none; }
.bloque-gris > .envoltura, .bloque-mensaje > .envoltura { position: relative; z-index: 1; }

/* anillo en «C» alrededor de las fotos, como los ponentes de las plantillas */
.anillo { display: inline-flex; flex: none; border-radius: 50%; padding: 5px; background: conic-gradient(from 215deg, var(--anillo) 0 74%, transparent 74% 100%); }
.anillo .avatar { border: 3px solid #fff; }
.anillo.a0 { --anillo: var(--celeste); } .anillo.a1 { --anillo: var(--verde); } .anillo.a2 { --anillo: var(--marino); } .anillo.a3 { --anillo: var(--azul-vivo); }
.ficha .anillo, .ficha-comite .anillo { padding: 7px; align-self: start; }
.caras .anillo { margin-bottom: 6px; }
.caras a:hover .anillo { background: conic-gradient(from 215deg, var(--ambar) 0 74%, transparent 74% 100%); }

/* qué queremos cambiar: tarjetas numeradas */
.cambios { counter-reset: cambio; gap: 18px; }
.cambios li { counter-increment: cambio; border: 0; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 20px 20px 84px; position: relative; min-height: 96px; }
.cambios li::before { content: counter(cambio, decimal-leading-zero); position: absolute; left: 18px; top: 20px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; color: #fff; background: var(--marino); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--celeste); }
.cambios li:nth-child(2)::before { background: var(--verde-texto); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--verde); }
.cambios li:nth-child(3)::before { background: var(--ambar-texto); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ambar); }
.cambios li:nth-child(4)::before { background: var(--azul); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--celeste-claro); }

/* pilares de la portada: carteles con banda degradada y pestaña curva */
.pilar-azul { --fondo: #0e5c94; } .pilar-verde { --fondo: #1d7662; } .pilar-ambar { --fondo: #b4520f; } .pilar-marino { --fondo: #0158bd; }
.pilar { padding: 0; border: 0; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pilar-cab { margin: 0; padding: 26px 22px 40px; color: #fff; background: url("curvas.svg") center bottom / 100% 100% no-repeat, linear-gradient(145deg, var(--marino) 10%, var(--fondo) 100%); border-radius: 0 0 50% 50% / 0 0 30px 30px; }
.pilar-cab h3 { color: #fff; font-size: 1.45rem; }
.pilar-cab .ico { width: 46px; height: 46px; padding: 9px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }
.pilar > p { padding: 18px 22px 0; }
.pilar > .lista-compromisos { padding: 0 22px 18px; }

/* garantías: iconos en insignia redonda */
.garantia { border-radius: 16px; background: rgba(255,255,255,.07); }
.garantia .ico { display: block; width: 58px; height: 58px; padding: 13px; border-radius: 50%; background: var(--verde); color: #fff; box-shadow: 0 0 0 5px rgba(54,173,145,.25); margin-bottom: 14px; }

/* hoja de ruta resumida: hitos unidos por una línea */
.ruta-mini { counter-reset: hito; position: relative; }
.ruta-mini li { counter-increment: hito; border-top: 0; background: #fff; box-shadow: var(--sombra); padding-top: 52px; position: relative; }
.ruta-mini li::before { content: counter(hito); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--celeste); color: var(--marino-2); font-weight: 900; display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .ruta-mini::before { content: ""; position: absolute; left: 30px; right: 30px; top: 29px; height: 3px; background: linear-gradient(90deg, var(--celeste), var(--verde), var(--ambar)); z-index: 0; } .ruta-mini li { z-index: 1; } }

/* llamada final: cartel con insignia de fecha */
.bloque-llamada { position: relative; overflow: hidden; padding: 64px 0; background: url("curvas.svg") center bottom / 100% 80% no-repeat, radial-gradient(90% 120% at 10% 0%, #0158bd 0%, rgba(1,88,189,0) 60%), linear-gradient(135deg, var(--marino) 0%, var(--marino-2) 100%); }
.bloque-llamada::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 300px; height: 300px; background: url("anillos.svg") center / contain no-repeat; opacity: .35; pointer-events: none; }
.llamada { position: relative; z-index: 1; }
@media (min-width: 900px) { .llamada { justify-content: flex-start; gap: 36px; } .llamada .boton { margin-left: auto; } }
.insignia { flex: none; width: 118px; height: 118px; margin: 0; border-radius: 50%; background: var(--verde); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; line-height: 1; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
.insignia span { font-size: 2.6rem; letter-spacing: 0; margin-bottom: 2px; }
.llamada-texto p { color: #e3eaf2; margin: 0; font-size: 1.08rem; }

/* páginas interiores */
.pilar-titulo { position: relative; overflow: hidden; color: #fff; padding: 30px 28px; border-radius: 20px; background: url("curvas.svg") center bottom / 100% 90% no-repeat, linear-gradient(130deg, var(--marino) 0%, var(--fondo) 100%); box-shadow: var(--sombra); }
.pilar-titulo::after { content: ""; position: absolute; right: -30px; top: 50%; width: 170px; height: 170px; transform: translateY(-50%); background: url("anillos.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }
.pilar-titulo h2 { color: #fff; position: relative; }
.pilar-titulo p { color: #e3eaf2; position: relative; max-width: 60ch; }
.pilar-titulo .ico { width: 56px; height: 56px; padding: 11px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; position: relative; }
.compromiso { border-left: 0; border-top: 6px solid var(--color); border-radius: 16px; }
.compromiso-cab .num { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-texto); color: #fff; font-size: 1.3rem; padding: 0; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--color); }
.compromiso-datos { background: #eef5fa; border-radius: 12px; }
.ficha { border-radius: 16px; }
.ficha-cargo { display: inline-block; background: var(--hielo); color: var(--azul); padding: .3em .85em; border-radius: 999px; }
.miembro { border-radius: 14px; box-shadow: var(--sombra); border-color: transparent; }
.accion { position: relative; overflow: hidden; border-radius: 18px; border: 0; padding-top: 30px; }
.accion::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, var(--celeste), var(--verde), var(--ambar)); }
.accion .ico { width: 58px; height: 58px; padding: 13px; border-radius: 50%; background: var(--marino); color: #fff; box-shadow: 0 0 0 5px var(--hielo); }
.decalogo li { background: #fff; box-shadow: var(--sombra); border-radius: 14px; }
.decalogo li::before { background: linear-gradient(135deg, var(--azul), var(--celeste)); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--celeste-claro); }
.fase-marca { width: 28px; height: 28px; border-width: 6px; box-shadow: 0 0 0 4px var(--hielo); }
.linea-tiempo::before { left: 13px; width: 3px; background: linear-gradient(180deg, var(--ambar), var(--celeste), var(--verde)); }
.organo { border-radius: 14px; box-shadow: var(--sombra); border-color: transparent; }
.ideas-grupo { border-radius: 14px; box-shadow: var(--sombra); border: 0; }
.boton-primario { box-shadow: 0 8px 20px rgba(0,164,228,.3); }
.pie { background: url("curvas.svg") center bottom / 100% 70% no-repeat, var(--marino-2); }
@media print { .franja-naranja, .insignia { display: none; } .pilar-cab, .pilar-titulo { background: none; color: #000; } .pilar-cab h3, .pilar-titulo h2 { color: #000; } }
@media (forced-colors: active) { .anillo { background: none; border: 2px solid CanvasText; } }
.llamada .boton, .compartir .boton { white-space: nowrap; flex: none; }
.accion .boton .ico, .garantia .boton .ico { width: 20px; height: 20px; padding: 0; background: none; box-shadow: none; color: inherit; margin: 0; border-radius: 0; }
.linea-tiempo::before { top: 18px; }
.fase { gap: 22px; padding-bottom: 22px; }
.fase-marca { margin-top: 22px; }
.fase-cuerpo { background: #fff; border-radius: 16px; box-shadow: var(--sombra); padding: 20px 24px 14px; border-top: 5px solid var(--celeste); }
.fase:first-child .fase-cuerpo { border-top-color: var(--ambar); background: linear-gradient(180deg, #fff4ec 0%, #fff 60%); }
.fase:last-child .fase-cuerpo { border-top-color: var(--verde); }
.fase-cuerpo ul { padding-left: 1.1em; }
.bloque-llamada .insignia { width: 104px; height: 104px; }
@media (max-width: 899px) { .llamada .insignia { width: 88px; height: 88px; } .llamada .insignia span { font-size: 2.1rem; } }

.carteles { list-style: none; padding: 0; margin: 1.6em 0 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cartel-mini { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cartel-mini img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--sombra); display: block; }
.cartel-mini .boton { min-height: 40px; padding: .45em 1em; font-size: .92rem; }
.cartel-mini .boton .ico { transform: rotate(90deg); }
.franja-naranja p { display: block; } .franja-naranja p .ico { vertical-align: -4px; margin-right: 6px; }

/* tras la auditoría de primera vista (2026-10-02) */
.bloque-voto { padding-top: clamp(48px, 6vw, 72px); }
.pasos-voto { list-style: none; padding: 0; margin: 1.4em 0 1em; display: grid; gap: 18px; counter-reset: pv; }
@media (min-width: 860px) { .pasos-voto { grid-template-columns: repeat(3, 1fr); } }
.pasos-voto li { counter-increment: pv; position: relative; background: #fff; border-radius: 16px; box-shadow: var(--sombra); padding: 66px 22px 22px; }
.pasos-voto li::before { content: counter(pv); position: absolute; left: 22px; top: 18px; width: 38px; height: 38px; border-radius: 50%; background: var(--ambar); color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(229,116,36,.3); }
.pasos-voto strong { display: block; font-family: var(--fuente-titulo); font-size: 1.25rem; color: var(--marino); margin-bottom: .3em; }
.pasos-voto span { color: var(--gris); }
.portada-int { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 14px; color: #fff; font-size: 1rem; max-width: 58ch; }
.portada-int .ico { flex: none; color: var(--celeste); margin-top: 2px; }
.antetitulo-sub { margin-top: 2.4em; }
.empieza-h { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .8em; }
.empieza { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .empieza { grid-template-columns: repeat(3, 1fr); } }
.empieza > li { background: #fff; border-radius: 16px; box-shadow: var(--sombra); padding: 18px 20px; border-top: 5px solid var(--celeste); }
.empieza > li:nth-child(2) { border-top-color: var(--verde); } .empieza > li:nth-child(3) { border-top-color: var(--ambar); }
.empieza strong { display: block; font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--marino); margin-bottom: .4em; }
.empieza ul { list-style: none; padding: 0; margin: 0; }
.pasos-t { font-weight: 700; color: var(--marino); margin-bottom: .3em; }
.pasos-delegar { padding-left: 1.3em; margin: 0 0 .8em; }
.pasos-delegar li { margin-bottom: .45em; }
.compartir-botones { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 600px) { .franja-aviso { font-size: .72rem; } }

/* marca de la candidatura al estilo de los programas de ISACA (2026-10-02) */
.marca-simbolo { width: 42px; height: 42px; flex: none; }
.marca-texto { gap: 2px; }
.marca-lema { font-family: var(--fuente); font-size: 1.12rem; line-height: 1.1; color: var(--marino); letter-spacing: -.005em; }
.marca-lema .lema-a { font-weight: 500; }
.marca-lema .lema-b, .lema .lema-b, .pie-lema .lema-b { font-weight: 900; background: linear-gradient(90deg, var(--azul-vivo) 0%, var(--celeste) 55%, var(--verde) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-texto small { text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; font-weight: 700; color: var(--gris); }
@media (max-width: 440px) { .marca-lema { font-size: .95rem; } .marca-texto small { font-size: .6rem; } .marca-simbolo { width: 34px; height: 34px; } }
.lema { font-family: var(--fuente); color: #fff; margin: 0 0 .25em; line-height: 1; max-width: none; }
.lema .lema-a { display: block; font-size: clamp(1.35rem, 3.6vw, 2.1rem); font-weight: 500; letter-spacing: 0; margin-bottom: .12em; }
.lema .lema-b { display: block; font-size: clamp(2.7rem, 8.4vw, 5rem); letter-spacing: -.025em; padding-bottom: .08em;
  background: linear-gradient(90deg, #6ac7ea 0%, var(--celeste) 45%, #36ad91 80%, #6db642 100%); -webkit-background-clip: text; background-clip: text; }
.lema-tag { font-family: var(--fuente); text-transform: uppercase; letter-spacing: .2em; font-weight: 700; font-size: clamp(.9rem, 1.6vw, 1.08rem); color: #fff; margin: .2em 0 1.1em; }
.pie-marca { display: flex; align-items: center; gap: 12px; margin-bottom: .4em; }
.pie-simbolo { width: 44px; height: 44px; flex: none; }
.pie-lema { font-family: var(--fuente); font-size: 1.35rem; line-height: 1.1; color: #fff; }
.pie-lema .lema-a { font-weight: 500; }
.pie-lema .lema-b { background: linear-gradient(90deg, #6ac7ea 0%, var(--celeste) 50%, #6db642 100%); -webkit-background-clip: text; background-clip: text; }
.lema-tag-pie { font-size: .78rem; letter-spacing: .16em; color: #cfd8e3; margin: 0 0 1em; }
@media (forced-colors: active) { .lema-b { background: none !important; color: CanvasText !important; } }
@media print { .lema .lema-b, .marca-lema .lema-b, .pie-lema .lema-b { background: none; color: #000; } .lema, .lema-tag { color: #000; } }
.portada .lema { max-width: none; }
.marca-lema, .marca-texto small { white-space: nowrap; } .marca { flex: none; }

.folleto { display: grid; gap: 24px; align-items: center; margin-top: 2.4em; background: #eef5fa; border-radius: 18px; padding: 24px; }
@media (min-width: 760px) { .folleto { grid-template-columns: 380px 1fr; } }
.folleto-caras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 380px; }
.folleto img { width: 100%; max-width: 184px; height: auto; border-radius: 6px; box-shadow: var(--sombra); display: block; }
.folleto h3 { font-size: 1.4rem; margin-bottom: .3em; }
.folleto .boton .ico { transform: rotate(90deg); }

/* ---------------------------------------------------------------- huevo de pascua: el juego */
.huevo { display: inline-flex; border-radius: 50%; flex: none; }
.huevo .pie-simbolo { transition: transform .4s ease; }
.huevo:hover .pie-simbolo, .huevo:focus-visible .pie-simbolo { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .huevo .pie-simbolo { transition: none; } }
.e404-juego { margin-top: 1.4em; }
.juego-sin-js { background: var(--hielo); border-left: 4px solid var(--celeste); padding: .8em 1em; border-radius: var(--radio); }
.juego { max-width: 600px; margin: 0 auto; }
.juego-marcador { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.juego-marcador div { background: var(--marino-2); color: #fff; border-radius: 12px; padding: 8px 12px; text-align: center; }
.juego-marcador dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--celeste-claro); }
.juego-marcador dd { margin: 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.juego-tablero { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); background: var(--marino-2); }
.juego-lienzo { display: block; width: 100%; height: auto; aspect-ratio: 19 / 21; touch-action: none; }
.juego-lienzo:focus-visible { outline: 3px solid var(--celeste); outline-offset: -3px; }
.juego-capa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 26, 54, .78); }
.juego-capa[hidden] { display: none; }
.juego-caja { background: #fff; color: var(--texto); border-radius: 16px; padding: 22px 22px 18px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.35); max-height: 100%; overflow: auto; }
.juego-caja p { margin: 0 0 .7em; }
.juego-titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--marino); }
.juego-antetitulo { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--verde-texto); }
.juego-nota { font-size: .9rem; color: var(--gris); }
.juego-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.juego-botones .boton { min-height: 44px; }
.juego-moneda { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px;
  color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.5rem; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--linea); }
.juego-moneda.c-azul { background: #00a4e4; } .juego-moneda.c-verde { background: #2a9a80; }
.juego-moneda.c-ambar { background: #e57424; } .juego-moneda.c-marino { background: #5c6bc0; }
.juego-mando { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); gap: 8px; justify-content: center; margin: 14px auto 0; }
.juego-mando button { border: 0; border-radius: 14px; background: var(--marino); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; }
.juego-mando button:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
.juego-mando .ico { width: 26px; height: 26px; }
.juego-mando .mando-arriba { grid-column: 2; grid-row: 1; } .juego-mando .mando-izquierda { grid-column: 1; grid-row: 2; }
.juego-mando .mando-abajo { grid-column: 2; grid-row: 2; } .juego-mando .mando-derecha { grid-column: 3; grid-row: 2; }
.juego-mando .mando-pausa { grid-column: 3; grid-row: 1; font-size: .8rem; font-weight: 700; background: var(--gris); }
.juego-mando .ico-arriba { transform: rotate(-90deg); } .juego-mando .ico-abajo { transform: rotate(90deg); } .juego-mando .ico-izquierda { transform: rotate(180deg); }
.juego-lista-h2 { margin-top: 2em; }
.tesoros { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .tesoros { grid-template-columns: 1fr 1fr; } }
.tesoro { display: flex; gap: 12px; align-items: flex-start; background: var(--claro); border-radius: 12px; padding: 12px 14px; }
.tesoro-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--fuente-titulo); font-weight: 700; background: var(--marino); }
.tesoro-num.pilar-azul { background: #0278ad; } .tesoro-num.pilar-verde { background: var(--verde-texto); }
.tesoro-num.pilar-ambar { background: var(--ambar-texto); } .tesoro-num.pilar-marino { background: #4a58a8; }
.tesoro-titulo { display: block; color: var(--marino); }
.tesoro-frase { display: block; font-size: .95rem; }
.tesoro-oculto { display: none; color: var(--gris); font-style: italic; align-self: center; }
.juego-activo ~ .tesoros .tesoro:not(.descubierto) .tesoro-texto { display: none; }
.juego-activo ~ .tesoros .tesoro:not(.descubierto) .tesoro-oculto { display: block; }
.juego-activo ~ .tesoros .tesoro:not(.descubierto) .tesoro-num { background: #a9b4c0; }
.tesoro.descubierto { background: var(--hielo); }
.juego-programa { margin-top: 1.6em; text-align: center; }
@media (hover: hover) and (pointer: fine) { .juego-mando { display: none; } .juego-mando[hidden] { display: none; } }
[data-con-js][hidden], [data-sin-js][hidden] { display: none !important; }
@media (max-width: 480px) {
  .juego-capa { padding: 8px; }
  .juego-caja { padding: 14px 14px 12px; font-size: .9rem; line-height: 1.45; }
  .juego-caja p { margin-bottom: .5em; }
  .juego-titulo { font-size: 1.2rem; }
  .juego-moneda { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: 4px; }
  .juego-botones .boton { min-height: 40px; padding: .5em 1em; font-size: .9rem; }
}

/* el juego no se para: aviso breve en el tablero, la moneda vuela a la lista y el compromiso se desbloquea */
.juego-aviso { position: absolute; left: 50%; top: 10px; z-index: 2; margin: 0; max-width: calc(100% - 24px); transform: translate(-50%, -160%);
  background: #fff; color: var(--marino); border-radius: 999px; padding: 6px 16px 6px 14px; font-weight: 700; font-size: .92rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(0,0,0,.3); border-left: 6px solid var(--celeste);
  transition: transform .35s ease; pointer-events: none; }
.juego-aviso.visible { transform: translate(-50%, 0); }
.juego-aviso.c-verde { border-left-color: #2a9a80; } .juego-aviso.c-ambar { border-left-color: #e57424; } .juego-aviso.c-marino { border-left-color: #5c6bc0; }
.juego-vuela { position: fixed; left: 0; top: 0; z-index: 60; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; background: #00a4e4; }
.juego-vuela.c-verde { background: #2a9a80; } .juego-vuela.c-ambar { background: #e57424; } .juego-vuela.c-marino { background: #5c6bc0; }
.tesoro.recien { animation: desbloqueo 1.8s ease-out; }
@keyframes desbloqueo { 0% { background: #fff1c9; box-shadow: 0 0 0 3px #e57424; } 100% { background: var(--hielo); box-shadow: 0 0 0 0 rgba(229,116,36,0); } }
@media (prefers-reduced-motion: reduce) { .tesoro.recien { animation: none; } .juego-aviso { transition: none; } }