/* Semana de la Pyme — layout: cabecera, portada, cinta, galería, programa,
   colaboradores y pie */

/* ================= barra de navegación ================= */
.nav-hold{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea-cl)}
.nav{max-width:var(--max);margin:0 auto;padding:11px var(--gutter);
  display:flex;align-items:center;gap:16px}
.marca{display:flex;align-items:center;text-decoration:none;flex:0 1 auto;min-width:0}
.logo-nav{height:46px}
.nav-sep{width:1px;height:34px;background:var(--linea-cl);flex:none}
.marca-min{display:flex;align-items:center;flex:none;text-decoration:none;
  transition:opacity .2s}
.marca-min:hover{opacity:.75}
.marca-min img{height:42px;width:auto;border-radius:3px}
.menu{display:flex;gap:26px;margin-left:auto;font-size:0.8125rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase}
.menu a{text-decoration:none;color:var(--azul-p);padding:8px 0;border-bottom:3px solid transparent;
  transition:color .2s,border-color .2s}
.menu a:hover{color:var(--azul);border-bottom-color:var(--azul)}

/* botón hamburguesa */
.hamb{display:none;width:44px;height:44px;border:0;background:none;padding:11px 10px;flex:none;
  flex-direction:column;justify-content:space-between;cursor:pointer}
.hamb span{display:block;height:2.5px;width:100%;background:var(--azul-p);border-radius:3px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* panel desplegable */
.menu-movil{display:none;flex-direction:column;background:#fff;
  border-bottom:1px solid var(--linea-cl);box-shadow:0 6px 20px -26px rgba(10,42,120,.5)}
.menu-movil.on{display:flex;animation:baja .28s cubic-bezier(.16,1,.3,1)}
@keyframes baja{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-movil a{text-decoration:none;color:var(--azul-p);font-weight:700;font-size:1rem;
  padding:16px var(--gutter);border-bottom:1px solid var(--linea-cl)}
.menu-movil a:active,.menu-movil a:hover{background:var(--papel);color:var(--azul)}
/* zona del contador dentro del menú desplegable */
.menu-pie:empty{display:none}
.menu-pie{padding:16px var(--gutter) 20px;background:var(--papel)}
.menu-pie .mini{width:100%;justify-content:center;padding:13px 18px}
.menu-pie .mini span{display:inline;font-size:0.625rem}
.menu-pie .mini b{font-size:1.0625rem}

/* contador de la barra */
.mini{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:var(--r-btn);white-space:nowrap;min-width:0;
  background:var(--g-rojo);color:#fff;box-shadow:0 4px 12px -12px rgba(212,15,44,.85)}
.mini .pt{width:7px;height:7px;border-radius:50%;background:#fff;animation:late 2.2s infinite}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.mini b{font-size:0.9375rem;font-weight:900;font-variant-numeric:tabular-nums}
.mini span{font-size:0.5938rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.85}

/* ================= PORTADA ================= */
.hero{padding:clamp(14px,2vw,26px) 0 clamp(30px,4vw,46px)}
.hero-card{
  max-width:calc(var(--max) - 8px);margin:0 auto;border-radius:var(--r-card);overflow:hidden;
  position:relative;isolation:isolate;
  /* Portada centrada. El degradado recorre el azul de campaña y una luz
     difusa arriba a la derecha le da relieve. La diferencia con el brillo
     de vitrina está en que esta luz es amplia y suave, no un reflejo
     concentrado. El grano de abajo termina de quitarle el aspecto de
     plástico pulido. */
  background:
    radial-gradient(96% 118% at 74% -8%,rgba(150,185,240,.22) 0%,rgba(150,185,240,0) 64%),
    linear-gradient(158deg,#101B45 0%,#17255C 30%,#1E3579 56%,#27499E 82%,#3160B8 100%);
  box-shadow:0 30px 70px -42px rgba(8,25,74,.72);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(34px,4.4vw,62px) clamp(26px,4vw,60px) clamp(36px,4.4vw,58px);
  gap:clamp(18px,2.4vw,28px);
}
/* grano fino: evita que el degradado se vea plano */
.hero-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>")}

/* Filo cálido en el canto superior: es el mismo remate naranja-amarillo
   que lleva el bloque rojo del logo. */
.hero-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:var(--g-calido)}

.hero-txt{position:relative;z-index:2;color:#fff;text-align:center;
  width:min(860px,100%);margin-inline:auto}
.hero .acciones{justify-content:center}


/* Fecha al modo del referente: los tres puntos sobre una línea de texto
   muy espaciada. Sin placa ni vidrio. */
.hero-fecha{display:flex;flex-direction:column;align-items:center;gap:13px;
  margin:0 0 clamp(20px,2.4vw,28px);padding:0;
  font-size:clamp(0.7188rem,.95vw,0.8125rem);font-weight:900;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.92)}
.puntos{display:flex;gap:7px}
.puntos i{width:9px;height:9px;border-radius:50%}
.puntos i:nth-child(1){background:var(--rojo)}
.puntos i:nth-child(2){background:#fff}
.puntos i:nth-child(3){background:var(--cielo)}
.hero-fecha b{color:#fff;font-weight:900;letter-spacing:.19em}

.dots{display:flex;gap:6px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%}
.dots i:nth-child(1){background:var(--rojo)}
.dots i:nth-child(2){background:#fff}
.dots i:nth-child(3){background:var(--estrella-cl) center/contain no-repeat;
  width:12px;height:12px;border-radius:0}

.hero-txt h1{font-size:clamp(2.25rem,6vw,4.375rem);color:#fff;letter-spacing:-.042em;line-height:1;
  max-width:16ch;margin-inline:auto;text-wrap:balance;
  opacity:0;transform:translateY(14px);animation:entra .9s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes entra{to{opacity:1;transform:none}}
.hero-lema{margin:20px auto 0;max-width:50ch;text-wrap:balance;font-size:clamp(1rem,1.5vw,1.2188rem);
  font-weight:400;color:#EFF4FD;line-height:1.55}
.hero-lema b{color:#fff;font-weight:700}

/* Contador: vuelve el vidrio y la celda de días en rojo. Lo que se
   corrige respecto a la versión anterior es el exceso, no el recurso:
   menos difuminado, sin resplandor rojo alrededor, sin que las celdas
   se levanten al pasar el mouse, y el rojo profundo del logo en vez
   del saturado. */
.contador{margin:clamp(26px,3vw,36px) auto 0;max-width:580px;position:relative;
  border-radius:var(--r);padding:clamp(15px,1.8vw,20px);
  background:linear-gradient(150deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 52%,rgba(255,255,255,.09) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 46px -32px rgba(4,12,40,.8), inset 0 1px 0 rgba(255,255,255,.3);
  opacity:0;animation:entra .9s cubic-bezier(.16,1,.3,1) .35s forwards}
.contador .rot{margin:0 0 13px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:0.6562rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}
.contador .rot .pulso{width:6px;height:6px;border-radius:50%;background:var(--amarillo);flex:none}

.celdas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.9vw,10px);border:0}
.celda{position:relative;overflow:hidden;border:0;text-align:center;border-radius:12px;
  padding:clamp(13px,1.6vw,17px) 4px clamp(10px,1.2vw,13px);
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.055) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.09)}
/* la celda de los días manda: rojo profundo del logo, sin halo */
.celda:first-child{background:linear-gradient(160deg,#D40F2C 0%,#B90C25 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}

.celda b{display:block;font-family:var(--display);font-weight:900;color:#fff;
  font-size:clamp(1.9375rem,4.4vw,3.125rem);line-height:.96;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.22)}
.celda span{display:block;margin-top:8px;font-size:0.5625rem;font-weight:900;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.celda:first-child span{color:rgba(255,255,255,.88)}

/* El segundero cambia sin animación. Probamos varios efectos de giro y
   ninguno se veía bien a un cambio por segundo: o quedaba fantasmal, o
   descuadrado, o cansaba. La cifra simplemente cambia, que es lo que
   hacen los contadores de los sitios más cuidados. */
.celda.tic b{animation:none}

@media (max-width:560px){
  .contador{border-radius:12px;padding:13px}
  .celda{border-radius:12px}
  .celda b{font-size:clamp(1.625rem,9.5vw,2.375rem)}
  .celda span{font-size:0.5rem;letter-spacing:.1em}
}

.hero .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px);
  opacity:0;animation:entra .9s cubic-bezier(.16,1,.3,1) .5s forwards}

/* lockup de campaña: encabeza la tarjeta */
.hero-marca{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;
  order:-1;width:100%;margin-bottom:12px}
.logo-hero{width:min(470px,78%);filter:drop-shadow(0 22px 44px rgba(6,19,52,.42));
  opacity:0;transform:scale(.95);animation:entraM 1s cubic-bezier(.16,1,.3,1) .22s forwards}
@keyframes entraM{to{opacity:1;transform:none}}

/* En pantalla angosta el centrado ya viene de la regla base: aquí solo
   se ajustan tamaños y el reparto de los focos de luz. */
@media (max-width:900px){
  .logo-hero{width:min(320px,80%)}
  .hero-txt h1{max-width:none}
  .hero-fecha{letter-spacing:.15em}
  .hero-lema{max-width:40ch}
  .hero .acciones .btn{flex:1 1 auto;justify-content:center;min-width:min(200px,100%)}
}

/* ================= cinta: actividades principales ================= */
.cinta{background:var(--g-rojo);color:#fff;overflow:hidden;position:relative;z-index:4;
  padding:30px 0 32px}
.cinta-rot{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:6px;padding:0 30px;
  background:var(--rojo-osc);box-shadow:22px 0 34px rgba(212,15,44,.9)}
/* el filo cálido cierra el bloque rojo, igual que en el logo */
.cinta-rot::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--g-calido)}
.cinta-rot b{font-size:0.9375rem;font-weight:900;letter-spacing:-.01em;line-height:1.15;max-width:10ch}
.cinta-rot span{font-size:0.625rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.cinta-track{display:flex;width:max-content;animation:corre 76s linear infinite}
.cinta:hover .cinta-track{animation-play-state:paused}

.it{display:flex;flex-direction:column;gap:7px;padding:16px 30px;margin:0 5px;
  border:0;white-space:nowrap;cursor:pointer;color:inherit;text-align:left;font:inherit;
  background:rgba(255,255,255,.10);border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .22s,transform .22s cubic-bezier(.2,.8,.3,1)}
.it:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.it:focus-visible{outline:3px solid #fff;outline-offset:2px}
.it i{font-style:normal;font-size:0.7188rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  opacity:.95;display:flex;align-items:center;gap:11px}
.it u{text-decoration:none;font-size:0.625rem;letter-spacing:.11em;padding:3px 9px;border-radius:3px;
  background:var(--papel);color:var(--rojo-osc);font-weight:900;
}
.it b{font-size:1.375rem;font-weight:900;letter-spacing:-.028em;line-height:1.15}
.it em{font-style:normal;font-size:0.875rem;opacity:.88;display:flex;align-items:center;gap:7px}
.it em::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
@keyframes corre{to{transform:translateX(-50%)}}

/* ================= galería =================
   Mosaico de alto fijo: el video manda y las fotos rellenan alrededor.
   Con muchas fotos, la última muestra el resto y abre la vista ampliada,
   así la sección nunca crece hacia abajo. */
.gal-wrap{margin-top:32px}

.mosaico{display:grid;gap:12px;
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  height:clamp(360px,42vw,560px)}

.m-item{position:relative;margin:0;overflow:hidden;border-radius:14px;cursor:zoom-in;
  background:linear-gradient(140deg,#1E3579,#101B45);
  box-shadow:0 5px 18px -28px rgba(8,25,74,.6);
  transition:box-shadow .3s}
.m-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .3s}
.m-item:hover img{transform:scale(1.05)}
.m-item:hover{box-shadow:0 8px 25px -26px rgba(10,42,120,.6)}
.m-item figcaption{position:absolute;inset:auto 0 0;padding:32px 14px 12px;z-index:2;
  color:#fff;font-size:0.7812rem;font-weight:700;line-height:1.3;
  background:linear-gradient(180deg,transparent,rgba(8,25,74,.92));
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.m-item:hover figcaption{opacity:1;transform:none}
.m-item figcaption span{display:block;font-size:0.625rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cielo-2);margin-bottom:2px}

/* el video: bloque grande a la izquierda, siempre con su rótulo visible */
.m-item.es-video{grid-column:span 2;grid-row:span 2;cursor:pointer;border-radius:14px}
.m-item.es-video::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,42,120,.15),rgba(8,25,74,.6))}
.m-item.es-video figcaption{opacity:1;transform:none;padding:40px 20px 18px;font-size:0.9375rem}
.play-mini{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;pointer-events:none}
.play-mini .circulo{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),background .3s}
.m-item.es-video:hover .circulo{transform:scale(1.1);background:var(--rojo);border-color:var(--rojo)}
.play-mini .circulo::after{content:"";border-left:19px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
.play-mini .txt{font-weight:900;font-size:0.8438rem;color:#fff;letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* "+N fotos" sobre la última pieza cuando hay más de las que caben */
.m-item.mas img{filter:brightness(.45)}
.m-item .resto{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:#fff;pointer-events:none}
.m-item .resto b{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.125rem);font-weight:900;
  letter-spacing:-.03em;line-height:1}
.m-item .resto span{font-size:0.6875rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  opacity:.9}

/* repartos según cuántas fotos acompañan al video */
.mosaico[data-f="0"] .m-item.es-video{grid-column:span 4}
.mosaico[data-f="1"] .m-item.es-video{grid-column:span 3}
.mosaico[data-f="1"] .m-item:not(.es-video){grid-row:span 2}
.mosaico[data-f="2"] .m-item:not(.es-video){grid-column:span 2}
.mosaico[data-f="3"] .m-item:not(.es-video):first-of-type{grid-column:span 2}

/* sin video: mosaico solo de fotos */
.mosaico.sin-video{grid-template-columns:repeat(4,1fr)}
.mosaico.sin-video .m-item:first-child{grid-column:span 2;grid-row:span 2}

.gal-vacia{grid-column:1/-1;display:grid;place-items:center;border:1px dashed var(--linea-cl);
  border-radius:12px;color:var(--texto-3);font-size:0.9062rem;text-align:center;padding:24px}

@media (max-width:860px){
  .mosaico{grid-template-columns:repeat(2,1fr);grid-template-rows:auto repeat(2,1fr);
    height:auto;grid-auto-rows:minmax(120px,1fr)}
  .m-item.es-video{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
  .mosaico[data-f="0"] .m-item.es-video,
  .mosaico[data-f="1"] .m-item.es-video{grid-column:span 2}
  .mosaico[data-f="1"] .m-item:not(.es-video){grid-row:span 1;grid-column:span 2;aspect-ratio:16/9}
  .mosaico[data-f="2"] .m-item:not(.es-video){grid-column:span 1}
  .mosaico[data-f="3"] .m-item:not(.es-video):first-of-type{grid-column:span 2}
}

/* lupa */
.caja{position:fixed;inset:0;z-index:300;background:rgba(16,27,69,.95);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,5vw,60px)}
.caja.on{display:flex}
.caja img,.caja video{max-width:100%;max-height:82vh;border-radius:14px;
  box-shadow:0 13px 45px -30px rgba(0,0,0,.8)}
.caja-x{position:absolute;top:22px;right:26px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.3);color:#fff;width:46px;height:46px;border-radius:50%;
  font-size:1.375rem;line-height:1;cursor:pointer;transition:background .2s;z-index:4}
.caja-x:hover{background:rgba(255,255,255,.3)}
.caja-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.3);color:#fff;
  font-size:1.875rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s;z-index:4}
.caja-nav:hover{background:rgba(255,255,255,.3)}
.caja-nav.ant{left:clamp(10px,3vw,32px)}
.caja-nav.sig{right:clamp(10px,3vw,32px)}
.caja-pie{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,32px);margin:0;text-align:center;
  color:rgba(255,255,255,.86);font-size:0.8438rem;font-weight:700}
@media (max-width:560px){
  .caja-nav{width:44px;height:44px;font-size:1.625rem}
  .caja img,.caja video{max-height:72vh}
  .gal-item{flex-basis:76vw}
  .gal-item.es-video{flex-basis:84vw}
  .gal-flechas{display:none}
}

/* ================= ficha de actividad ================= */
.modal{position:fixed;inset:0;z-index:320;background:rgba(16,27,69,.76);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:clamp(12px,3.5vw,36px)}
.modal.on{display:flex;animation:fundido .25s ease}
@keyframes fundido{from{opacity:0}to{opacity:1}}

.ficha{background:#fff;color:var(--azul-p);width:min(640px,100%);max-height:88vh;
  border-radius:12px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;min-height:0;
  box-shadow:0 16px 55px -40px rgba(0,0,0,.65);
  animation:sube .35s cubic-bezier(.16,1,.3,1)}
@keyframes sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* cabecera compacta: rojo sólido y profundo, sin trama que reste legibilidad */
.ficha .tapa{position:relative;flex:none;padding:18px 26px 16px;color:#fff;
  background:var(--g-rojo)}

.ficha .tapa .etqs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  font-size:0.6562rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
/* las tres etiquetas comparten el mismo estilo: píldora blanca sobre rojo */
.ficha .tapa .org,
.ficha .tapa .cuando,
.ficha .tapa .modo{padding:5px 11px;border-radius:3px;background:#fff;color:var(--rojo-osc)}
.ficha .tapa h3{font-size:clamp(1.1875rem,2.5vw,1.625rem);color:#fff;text-wrap:balance;letter-spacing:-.028em;
  padding-right:46px}

/* cuerpo con scroll propio — min-height:0 es lo que permite que funcione dentro del flex */
.ficha .cuerpo{padding:18px 26px 20px;overflow-y:auto;flex:1 1 auto;min-height:0}
.ficha dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}
.ficha .dato{background:var(--papel);border-radius:12px;padding:9px 13px}
.ficha .dato:nth-child(2){grid-column:span 2}
.ficha dt{font-size:0.5625rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:2px}
.ficha dd{margin:0;font-size:0.9062rem;font-weight:700;line-height:1.3}
.ficha .desc{font-size:0.9375rem;font-weight:400;color:var(--texto-2);margin:0;line-height:1.55}

/* barra de acción anclada abajo: nunca hay que bajar para inscribirse */
.ficha .pies{flex:0 0 auto;display:flex;gap:10px;padding:14px 26px;
  border-top:1px solid var(--linea-cl);background:#fff;
  box-shadow:0 -14px 26px -22px rgba(10,42,120,.55)}
.ficha .pies .btn{flex:1 1 auto;justify-content:center;min-width:min(120px,100%)}
.ficha .cerrar{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;z-index:3;
  background:rgba(255,255,255,.22);color:#fff;font-size:1.1875rem;line-height:1;transition:background .2s}
.ficha .cerrar:hover{background:rgba(255,255,255,.42)}
.ficha .cerrar:focus-visible{outline:3px solid #fff;outline-offset:2px}

@media (max-width:560px){
  .modal{padding:0;align-items:flex-end}
  .ficha{max-height:92vh;border-radius:12px 22px 0 0;width:100%}
  .ficha .tapa{padding:16px 18px 14px}
  .ficha .cuerpo{padding:16px 18px 18px}
  .ficha .pies{padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .ficha dl{grid-template-columns:1fr}
  .ficha .dato:nth-child(2){grid-column:auto}
}

/* ================= programa ================= */
.riel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:34px 0 0}
.dia{background:#fff;border:1px solid var(--linea-cl);border-radius:var(--r);
  padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 6px 22px -34px rgba(10,42,120,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.dia:hover{transform:translateY(-6px);box-shadow:0 10px 30px -34px rgba(10,42,120,.55)}
.dia > h3{display:flex;justify-content:space-between;align-items:baseline;font-size:0.9062rem;
  color:var(--azul-tit);padding-bottom:14px;border-bottom:1px solid var(--linea-cl)}
.dia > h3 i{font-style:normal;font-size:2.125rem;letter-spacing:-.04em;color:var(--dia,var(--azul))}
/* cada día toma un tono de la misma familia azul: distingue sin ensuciar */
.dia--otras{grid-column:1 / -1;--dia:#5B6479}
.dia--otras > h3 small{font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:none;color:#6B7280}
.otras-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;align-items:start}
.otras-lista .act{margin-bottom:0}
.dia[data-n="1"]{--dia:#17255C}
.dia[data-n="2"]{--dia:#1E3579}
.dia[data-n="3"]{--dia:#27499E}
.dia[data-n="4"]{--dia:#3160B8}
.dia{position:relative;overflow:hidden}
.dia::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--dia,var(--azul))}
.dia > h3{padding-top:4px;color:var(--dia,var(--azul-p))}
.act{text-decoration:none;display:block;padding:10px 12px;border-radius:14px;
  background:none;border:0;width:100%;text-align:left;font:inherit;color:var(--azul-p);
  transition:background .22s}
.act{border-left:5px solid transparent;margin-bottom:2px}
.act .hora{font-size:0.7188rem;font-weight:900;letter-spacing:.1em;color:var(--azul)}
/* Cada actividad toma un matiz propio, todos derivados de la campaña:
   los dos azules del degradado, el rojo del lockup y los dos extremos
   del filo cálido (naranja y ámbar). Nada fuera de esa familia.

   El ciclo es 5n: los matices se repiten cada cinco casillas. Antes las
   reglas apuntaban a la 1ª..5ª y de la sexta en adelante la casilla
   quedaba sin fondo ni borde. Con días de muchas actividades, como la
   RM, eso dejaba la mayoría de la lista sin tratamiento. */
.act:nth-of-type(5n+1){background:#E7EAF4;border-left-color:#17255C}
.act:nth-of-type(5n+2){background:#E6ECF8;border-left-color:#1E3579}
.act:nth-of-type(5n+3){background:#FBE9EC;border-left-color:#B01026}
.act:nth-of-type(5n+4){background:#FAEDE4;border-left-color:#9C4111}
.act:nth-of-type(5n)  {background:#F9F1DE;border-left-color:#7E5209}
.act:nth-of-type(5n+1) .hora{color:#17255C}
.act:nth-of-type(5n+2) .hora{color:#1E3579}
.act:nth-of-type(5n+3) .hora{color:#B01026}
.act:nth-of-type(5n+4) .hora{color:#9C4111}
.act:nth-of-type(5n)   .hora{color:#7E5209}
.act:hover{filter:brightness(.965)}

/* Actividades más allá de las cuatro visibles: ocultas hasta que se
   pulsa "Ver más". Se pintan igual en el HTML, solo no se muestran, así
   siguen siendo encontrables por el buscador del navegador. */
.act--oculta{display:none}
.act--oculta.act--ver{display:block;animation:abre .32s cubic-bezier(.16,1,.3,1)}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.dia-mas{width:100%;margin-top:10px;padding:11px 14px;border:0;border-radius:8px;
  background:rgba(23,37,92,.05);color:var(--azul-tit);
  font-size:0.7812rem;font-weight:900;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s ease,color .2s ease}
.dia-mas:hover{background:rgba(23,37,92,.1)}
.dia-mas .flecha{font-size:0.875rem;line-height:1}

/* Barra bajo el título del programa: alcance, buscador y modalidad. */
.prog-resumen{margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.pr-fila{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:0.8125rem}
.pr-n{font-weight:900;letter-spacing:.03em;color:var(--azul-tit);
  background:rgba(23,37,92,.06);padding:6px 13px;border-radius:100px;white-space:nowrap}
.pr-ayuda{color:var(--texto-3)}
.pr-volver,.pr-limpiar{border:0;background:none;padding:0;cursor:pointer;
  font-size:0.8125rem;font-weight:900;letter-spacing:.03em;color:var(--azul);
  text-decoration:underline;text-underline-offset:3px}
.pr-volver:hover,.pr-limpiar:hover{color:var(--rojo-osc)}
.pr-limpiar{color:var(--rojo-osc)}

.pr-campos{gap:10px}
.pr-campos input,.pr-campos select{
  font:inherit;font-size:0.875rem;color:var(--azul-p);background:#fff;
  border:1px solid var(--linea-cl);border-radius:8px;padding:10px 14px}
.pr-campos input{flex:1 1 240px;min-width:0;max-width:420px}
.pr-campos select{flex:0 0 auto;cursor:pointer}
.pr-campos input:focus,.pr-campos select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(39,73,158,.14)}
.pr-campos input::placeholder{color:var(--texto-3)}

.riel-vacio{color:var(--texto-3);font-size:0.9375rem;padding:26px 0;margin:0}

/* marca de enlace que sale del sitio */
.btn .externo{font-size:0.8125rem;opacity:.85;margin-left:-2px}

@media (prefers-reduced-motion:reduce){.act--oculta.act--ver{animation:none}}
.act b{display:block;font-weight:700;font-size:0.9375rem;line-height:1.3;margin:4px 0 3px;
  letter-spacing:-.015em;color:var(--azul-p)}
.act em{font-style:normal;font-size:0.8125rem;color:var(--texto-3)}
/* destacada: no cambia el color de la casilla, se señala con una estrella */
.act--hito{position:relative}
.act--hito::after{content:"";position:absolute;top:9px;right:11px;width:12px;height:12px;
  background:var(--estrella) center/contain no-repeat;opacity:.95}
.act--hito b{padding-right:16px}

/* ================= portales ================= */
.portales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.portal{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:var(--azul-p);
  background:#fff;border:1px solid var(--linea-cl);border-radius:12px;padding:24px 24px 22px;
  box-shadow:0 6px 22px -34px rgba(10,42,120,.5);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.portal::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--g-rojo);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.portal:hover{transform:translateY(-6px);box-shadow:0 10px 31px -32px rgba(10,42,120,.55);
  border-color:var(--cielo)}
.portal:hover::before{transform:scaleX(1)}

/* El logo es el título de la tarjeta: se apoya directo sobre el blanco,
   centrado y ocupando el ancho disponible. */
.p-logo{display:flex;align-items:center;justify-content:center;height:6.4rem;padding:4px 0}
.p-logo img{max-height:5.4rem;max-width:88%;width:auto;object-fit:contain}

.p-txt{display:flex;flex-direction:column;gap:7px;flex:1;text-align:center}
.p-txt em{font-style:normal;font-size:0.975rem;color:var(--texto-2);line-height:1.5;
  max-width:30ch;margin-inline:auto}
.p-ir{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;color:var(--azul);align-self:center;
  padding:10px 19px;border-radius:var(--r-btn);box-shadow:inset 0 0 0 1.5px var(--nube);
  transition:background .22s,color .22s,box-shadow .22s}
.portal:hover .p-ir{background:var(--azul);color:#fff;box-shadow:inset 0 0 0 1.5px var(--azul)}
.p-ir i{font-style:normal;font-size:1rem;transition:transform .25s}
.portal:hover .p-ir i{transform:translateX(5px)}

@media (max-width:940px){
  .portales{grid-template-columns:1fr;gap:14px}
  .portal{flex-direction:row;align-items:center;flex-wrap:wrap;padding:18px 22px;gap:20px}
  .p-logo{flex:0 0 11.5rem;height:5.2rem}
  .p-logo img{max-height:4.6rem;max-width:100%}
  .p-txt{flex:1 1 14rem;text-align:left}
  .p-txt em{max-width:none;margin-inline:0}
  .p-ir{flex:0 0 100%;align-self:flex-start}
}
/* Al volver a columna hay que anular los flex de la vista en fila:
   en vertical, un flex-basis en rem deja de ser ancho y pasa a ser
   alto mínimo, y eso es lo que abría un hueco bajo cada texto. */
@media (max-width:560px){
  .portal{flex-direction:column;align-items:center;flex-wrap:nowrap;
    gap:14px;padding:24px 20px 20px}
  .p-logo{flex:none;height:5rem;padding:0;width:100%}
  .p-logo img{max-height:4.4rem;max-width:76%}
  .p-txt{flex:0 1 auto;gap:6px;text-align:center}
  .p-txt em{font-size:0.95rem;max-width:28ch;margin-inline:auto}
  .p-ir{flex:none;align-self:center;margin-top:2px}
}

/* ================= colaboradores ================= */
.colab-baja{font-size:1rem;color:var(--texto-2);margin:14px 0 0;max-width:64ch}
.colab-carrusel{position:relative;margin-top:34px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.colab-track{display:flex;align-items:stretch;gap:16px;width:max-content;
  animation:corre var(--dur,44s) linear infinite}
.colab-carrusel:hover .colab-track{animation-play-state:paused}
.colab-sep{display:flex;align-items:center;gap:13px;padding:0 14px;white-space:nowrap;
  font-size:0.7188rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
.colab-sep::before{content:"";width:4px;height:44px;border-radius:3px;background:var(--g-rojo)}
.col-logo{background:#fff;border:1px solid var(--linea-cl);border-radius:14px;
  min-width:12.4rem;min-height:8.4rem;display:grid;place-items:center;padding:20px;flex:none;
  box-shadow:0 5px 18px -30px rgba(10,42,120,.5);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s}
.col-logo:hover{transform:translateY(-5px);box-shadow:0 8px 23px -28px rgba(10,42,120,.55);border-color:var(--cielo)}
.col-logo img{max-height:82px;max-width:100%;width:auto;object-fit:contain}
.col-logo span{font-family:var(--display);font-weight:900;font-size:1.125rem;letter-spacing:-.02em;
  color:var(--azul-p);text-align:center;line-height:1.15}
a.col-logo{text-decoration:none;color:inherit;cursor:pointer}
/* Logos con la imagen genérica de Gobierno: sigla discreta bajo el logo */
.col-logo--gob{grid-template-rows:1fr auto;row-gap:10px;padding-bottom:14px}
.col-logo--gob img{max-height:66px}
.col-logo--gob .col-sigla{font-family:inherit;font-weight:700;font-size:0.6875rem;
  letter-spacing:.06em;line-height:1;color:var(--texto-2);transition:color .28s}
.col-logo--gob:hover .col-sigla{color:var(--azul)}
a.col-logo:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.colab-carrusel:focus-within .colab-track{animation-play-state:paused}
/* flechas del carrusel */
.colab-marco{position:relative;margin-top:16px}
/* aire arriba y abajo: el logo sube al posarse y su sombra no se corta */
.colab-marco .colab-carrusel{margin-top:0;padding:18px 0}
.colab-marco:hover .colab-track{animation-play-state:paused}
.colab-carrusel.arrastrando .colab-track{animation-play-state:paused}

/* ===== controles manuales comunes: cinta y colaboradores ===== */
.colab-carrusel,.cinta{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.colab-carrusel.arrastrando,.cinta.arrastrando{cursor:grabbing}
.arrastrando .col-logo,.arrastrando .it{pointer-events:none}
.cinta.arrastrando .cinta-track{animation-play-state:paused}
.colab-track img{-webkit-user-drag:none}
.car-flecha{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;
  display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--azul);border:1px solid var(--linea-cl);
  box-shadow:0 6px 18px -8px rgba(10,42,120,.35);
  transition:transform .2s,background .2s,color .2s,border-color .2s}
.car-flecha--ant{left:calc(var(--izq,0px) + 6px)}
.car-flecha--sig{right:6px}
.car-flecha:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.car-flecha:active{transform:scale(.94)}
.car-flecha:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
/* en la cinta roja: flecha blanca con ícono rojo */
.cinta .car-flecha{color:var(--rojo-osc);border-color:transparent;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.cinta .car-flecha:hover{background:var(--papel);color:var(--rojo-osc)}
.cinta .car-flecha:focus-visible{outline-color:#fff}
@media (max-width:600px){.car-flecha{width:38px;height:38px;margin-top:-19px}}
@media (prefers-reduced-motion:reduce){.colab-carrusel{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* ================= pie ================= */
.pie{background:var(--tinta);color:var(--claro);padding:52px 0 26px;font-size:0.9062rem;margin-top:0}
.pie a{text-decoration:none;opacity:.85}.pie a:hover{opacity:1}
.pie-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:30px}
.pie h4{font-size:0.6562rem;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 15px;font-weight:900}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie .min{height:74px;width:auto;border-radius:3px}
.logo-pie{height:56px;margin-bottom:16px}
.legal{margin-top:38px;padding-top:20px;border-top:1px solid var(--linea);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:0.7188rem;color:#A8BCE0;font-weight:700}
.aviso{margin:14px 0 0;font-size:0.75rem;line-height:1.55;opacity:.7;
  text-align:justify;text-align-last:left;-webkit-hyphens:auto;hyphens:auto}
.aviso a{text-decoration:underline;text-underline-offset:2px}
.pie-marco{background:#fff;padding:16px 0}
.pie-marco .wrap{display:flex;align-items:center;justify-content:center;gap:14px}
.pie-marco b{font-size:0.8125rem;font-weight:900;letter-spacing:.04em;color:var(--azul-p);white-space:nowrap}
.pie-marco b i{font-style:normal;font-weight:400}
.pie-marco .regla{flex:1;max-width:230px;display:flex;height:4px}
.pie-marco .regla span{height:4px}
.pie-marco .az{background:var(--azul);width:86px}
.pie-marco .ro{background:var(--rojo);flex:1}

/* ================= responsive ================= */
@media (max-width:1040px){
  .media{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(4,1fr)}
  .riel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-grid{grid-template-columns:1fr 1fr}
  .pie-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:940px){
  .menu{display:none}
  .hamb{display:flex;margin-left:auto}
}
@media (max-width:860px){
  .gal{grid-template-columns:1fr 1fr}
  .logo-nav{height:38px}
  .marca-min img{height:34px}
}
@media (max-width:760px){
  .nav-sep,.marca-min{display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .nav{gap:12px;padding-inline:16px}
  .logo-nav{height:32px}
  .marca-min img{height:30px}
  .riel{grid-template-columns:1fr;gap:12px}
  .hero{padding-top:10px}
  .hero-card{border-radius:12px;padding:26px 20px 30px}
  .cinta-rot{display:none}
  .it{padding:14px 22px}
  .it b{font-size:1.125rem}
  .cinta{padding:16px 0}
  .it{padding:6px 22px}
  .it b{font-size:1rem}
  .gal{grid-template-columns:1fr 1fr;gap:12px}
  .media{gap:12px}
  .colab-sep{padding:0 8px}
  .col-logo{min-width:9.9rem;min-height:7.2rem;padding:16px}
  .col-logo img{max-height:70px}
  .col-logo--gob img{max-height:56px}
  .col-logo--gob{row-gap:8px;padding-bottom:12px}
  .pie{padding:40px 0 22px}
  .pie-grid{grid-template-columns:1fr;gap:26px}
  .legal{font-size:0.6562rem}
  .aviso{font-size:0.6875rem;text-align:left;-webkit-hyphens:manual;hyphens:manual}
  .btn{padding:13px 22px;font-size:0.9062rem}
}
/* teléfonos angostos: el logo del Ministerio se mantiene, achicado */
@media (max-width:400px){
  .nav{gap:9px;padding-inline:14px}
  .logo-nav{height:27px}
  .nav-sep{height:26px}
  .marca-min img{height:26px}
  .hamb{width:40px;height:40px;padding:10px 8px}
  .hero-card{padding:22px 16px 26px}
  .celda{padding:11px 2px 9px}
}