/* nominacion.css — campaña «Top 25 Educadores HVACR 2027» (3-oct-2026). Ver nominacion.js. */
:root{
  --nom-fondo:#04162d; --nom-fondo-2:#0a2547; --nom-texto:#ffffff; --nom-suave:#d6e2f2;
  --nom-rojo:#c8102e; --nom-rojo-hover:#a50d26; --nom-azul:#5cb8ff; --nom-foco:#ffd34d;
  --nom-aviso-fondo:#04162d; --nom-aviso-texto:#ffffff;
}

/* ── Aviso compacto (en el flujo, debajo de la cabecera fija; no tapa nada) ── */
.nom-aviso{display:flex;align-items:center;gap:8px;background:var(--nom-aviso-fondo);color:var(--nom-aviso-texto);
  padding:4px 4px 4px 16px;border-bottom:3px solid var(--nom-rojo);font:14px/1.35 Arial,"Helvetica Neue",sans-serif;min-height:48px;box-sizing:border-box}
.nom-aviso p{margin:0;flex:1;min-width:0;text-align:center}
.nom-aviso b{color:#fff}
.nom-aviso a{color:var(--nom-foco);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-block;padding:4px 2px}
.nom-aviso-cerrar{flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.nom-aviso-cerrar:hover{background:rgba(255,255,255,.12)}
.nom-aviso a:focus-visible,.nom-aviso-cerrar:focus-visible{outline:3px solid var(--nom-foco);outline-offset:2px}
@media (max-width:600px){
  .nom-aviso{font-size:13px;padding-left:12px}
  .nom-aviso p{text-align:left}
  .nom-aviso-txt .nom-largo{display:none}
}

/* ── Sección ── */
#nomina-mario{scroll-margin-top:84px}
#nomina-mario .nom-caja{background:linear-gradient(160deg,var(--nom-fondo) 0%,var(--nom-fondo-2) 100%);color:var(--nom-texto);
  border-radius:22px;padding:clamp(22px,4vw,48px);margin-top:32px;margin-bottom:32px;box-sizing:border-box;overflow:hidden}
#nomina-mario .nom-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:start}
#nomina-mario figure{margin:0}
#nomina-mario .nom-cartel img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
#nomina-mario .nom-texto{min-width:0}
#nomina-mario .nom-eyebrow{color:var(--nom-azul);letter-spacing:.08em;font-weight:800;font-size:13px;margin:0 0 10px}
#nomina-mario h2{color:#fff !important;font-size:clamp(28px,4.2vw,46px);line-height:1.05;margin:0 0 18px;letter-spacing:-.01em;overflow-wrap:break-word}
#nomina-mario h2:focus{outline:none}
#nomina-mario h2:focus-visible{outline:3px solid var(--nom-foco);outline-offset:4px}
#nomina-mario p{color:var(--nom-suave);font-size:17px;line-height:1.6;margin:0 0 14px}
#nomina-mario .nom-destaca{color:#fff;font-weight:800;font-size:19px}
#nomina-mario .nom-fecha{color:#fff;font-weight:800;font-size:18px;border-left:4px solid var(--nom-rojo);padding-left:12px;margin-top:20px}
#nomina-mario .nom-accion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0}
#nomina-mario .nom-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 26px;border-radius:12px;
  background:var(--nom-rojo);color:#fff !important;font-weight:900;font-size:18px;letter-spacing:.02em;text-decoration:none;text-align:center;
  box-shadow:0 10px 24px rgba(200,16,46,.35);border:2px solid rgba(255,255,255,.25);max-width:100%;box-sizing:border-box}
#nomina-mario .nom-boton:hover{background:var(--nom-rojo-hover)}
#nomina-mario .nom-boton:focus-visible{outline:3px solid var(--nom-foco);outline-offset:3px}
#nomina-mario .nom-nota{color:var(--nom-suave);font-size:14px}
#nomina-mario .nom-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#nomina-mario .nom-como{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;margin:6px 0 18px}
#nomina-mario .nom-como summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;padding:10px 16px;font-weight:800;font-size:17px;color:#fff;list-style:none;border-radius:12px}
#nomina-mario .nom-como summary::-webkit-details-marker{display:none}
#nomina-mario .nom-como summary::before{content:"";width:9px;height:9px;border-right:3px solid var(--nom-azul);border-bottom:3px solid var(--nom-azul);transform:rotate(-45deg);transition:transform .2s;flex:none}
#nomina-mario .nom-como[open] summary::before{transform:rotate(45deg)}
#nomina-mario .nom-como summary:focus-visible{outline:3px solid var(--nom-foco);outline-offset:2px}
#nomina-mario .nom-como ol{margin:0;padding:4px 18px 16px 40px;color:var(--nom-suave);font-size:16px;line-height:1.6}
#nomina-mario .nom-como li{margin:0 0 8px;overflow-wrap:anywhere}
#nomina-mario .nom-como b{color:#fff}
#nomina-mario .nom-gracias{color:#fff;font-style:italic}
#nomina-mario .nom-fin{color:#fff;font-size:18px;background:rgba(255,255,255,.08);border-left:4px solid var(--nom-azul);border-radius:8px;padding:14px 16px;margin-top:20px}

/* Tarjeta en inglés: fotografía original sin texto encima + texto real debajo */
#nomina-mario .nom-tarjeta-en{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
#nomina-mario .nom-tarjeta-en img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
#nomina-mario .nom-tarjeta-en figcaption{display:grid;gap:6px;padding:18px 20px 20px;background:var(--nom-fondo);border-top:4px solid var(--nom-rojo)}
#nomina-mario .nom-tarjeta-marca{color:var(--nom-azul);font-weight:800;font-size:13px;letter-spacing:.14em}
#nomina-mario .nom-tarjeta-en strong{color:#fff;font-size:24px;line-height:1.15}
#nomina-mario .nom-tarjeta-en span{color:var(--nom-suave);font-size:16px;line-height:1.45}
#nomina-mario .nom-tarjeta-en .nom-tarjeta-fecha{color:#fff;font-weight:800}

@media (max-width:860px){
  #nomina-mario .nom-caja{border-radius:16px;margin-top:20px;margin-bottom:20px}
  #nomina-mario .nom-grid{grid-template-columns:minmax(0,1fr)}
  #nomina-mario .nom-cartel,#nomina-mario .nom-tarjeta-en{max-width:440px;width:100%;margin:0 auto}
  #nomina-mario .nom-tarjeta-en img{aspect-ratio:4/3;object-position:50% 18%}
  #nomina-mario p{font-size:16px}
  #nomina-mario .nom-boton{width:100%;font-size:17px;padding:14px 16px}
}
/* Celular: el cartel ocupa todo el ancho útil de la caja (más grande = más legible), sin recorte */
@media (max-width:600px){
  #nomina-mario .nom-caja{padding:14px 14px 22px}
  #nomina-mario .nom-cartel{max-width:none}
  #nomina-mario .nom-cartel img{border-radius:10px}
  #nomina-mario .nom-texto{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){#nomina-mario .nom-como summary::before{transition:none}}