/* sitio.css — sitio público de Extinfuego W.R. S.A. (y el aviso del portal y el 404).
 * Firma (FIRMA.md): tokens :root, DM Sans de cuerpo, light/dark, Font Awesome 6.5.0.
 * Marca Extinfuego: rojo #c8102e, rojo cilindro #8f0b20, amarillo de etiqueta #f2c300,
 * grafito #1d2329 y acero #6b7680. Titulares en Barlow Condensed.
 * Sólo var(--token): los colores viven en los tres bloques de tokens de abajo. */

:root{
  --rojo:#c8102e; --rojo-cil:#8f0b20; --amarillo:#f2c300; --grafito:#1d2329; --acero:#6b7680;
  --bg:#ffffff; --bg2:#f2f4f5; --surface:#ffffff;
  --text:#1d2329; --text2:#2f363d; --dim:#4a545d; --muted:#626d77;
  --accent:#c8102e; --accent2:#a50d26; --accent-text:#b30e29; --on-accent:#ffffff;
  --accent-dim:rgba(200,16,46,.08); --accent-border:rgba(200,16,46,.28);
  --ok:#1e7e34; --ok-dim:rgba(30,126,52,.10); --ok-border:rgba(30,126,52,.28);
  --aviso-bg:#fff6cc; --aviso-borde:#f2c300; --aviso-ink:#3d3200;
  --border:#dde1e4; --border2:#c9cfd4; --hover:rgba(29,35,41,.05);
  --header-bg:rgba(255,255,255,.96);
  --hero-bg:#eceff1; --hero-linea:#d7dce0;
  --ink:#1d2329; --ink-text:#c9d0d6; --ink-strong:#ffffff;
  --wa:#25d366; --wa-ink:#0b3d1e;
  --logo-plate:transparent;
  /* Objetos físicos: la etiqueta y el extintor no cambian con el tema. */
  --etq:#f2c300; --etq-tinta:#1d2329; --etq-celda:rgba(255,255,255,.4);
  --ext-valv:#2b333b; --ext-metal:#9aa3ab; --ext-palanca:#c3c9ce; --ext-hose:#1d2329;
  /* Pictogramas NFPA */
  --clase-a:#1e7a3c; --clase-b:#c8102e; --clase-c:#1a5fb4; --clase-d:#f2c300; --clase-k:#111417;
  --clase-k-borde:#111417; --clase-ink:#ffffff; --clase-d-ink:#1d2329;
  --shadow:0 10px 30px rgba(29,35,41,.10);
  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  color-scheme:light;
}
/* Oscuro SÓLO si el usuario lo elige (FIRMA, sección 5b): no se toma prefers-color-scheme. */
:root[data-theme="dark"]{
  --bg:#1d2329; --bg2:#232a31; --surface:#262e36;
  --text:#eef1f3; --text2:#d3d9de; --dim:#b3bcc4; --muted:#9aa4ad;
  --accent:#c8102e; --accent2:#de1a3a; --accent-text:#ff8a99;
  --accent-dim:rgba(255,138,153,.10); --accent-border:rgba(255,138,153,.30);
  --ok:#6fdc8c; --ok-dim:rgba(111,220,140,.10); --ok-border:rgba(111,220,140,.28);
  --aviso-bg:rgba(242,195,0,.10); --aviso-borde:#f2c300; --aviso-ink:#f7dc6f;
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.18); --hover:rgba(255,255,255,.05);
  --header-bg:rgba(24,29,34,.95);
  --hero-bg:#171c21; --hero-linea:#2b333b;
  --ink:#121619; --ink-text:#b3bcc4;
  --logo-plate:#ffffff;
  --ext-valv:#59636d; --ext-hose:#0b0e10;
  --clase-k-borde:#c3c9ce;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ── Base ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'DM Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);
     line-height:1.6;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;margin:0 0 .4em;font-weight:700;letter-spacing:0}
h2{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:800}
h3{font-size:1.45rem}
p{margin:0 0 1em}
a{color:var(--accent-text);text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Full width (FIRMA, sección 5b): sin contenedor centrado; sólo padding lateral fluido. */
.wrap{width:100%;padding-inline:clamp(16px,4vw,48px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:var(--radius-sm)}
.skip:focus{left:8px}
section{padding:80px 0}
.alt{background:var(--bg2)}
.sec-head{max-width:68ch;margin-bottom:40px}
.lead{color:var(--dim);font-size:1.08rem;max-width:68ch;margin:0}

/* ── Botones (firma: .btn + variante) ─────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:var(--radius-sm);
     font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;
     transition:var(--transition);line-height:1.2;min-height:48px}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent2)}
.btn-accent:disabled{opacity:.6;cursor:wait}
.btn-outline{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-text)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wa:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border:0;color:var(--text);padding:8px;min-height:44px;border-radius:var(--radius-sm)}
.btn-ghost:hover{background:var(--hover)}

/* ── Header ───────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px;position:relative}
.logo{display:flex;align-items:center;text-decoration:none;background:var(--logo-plate);border-radius:var(--radius-sm);padding:3px 8px}
.logo img{height:44px;width:auto}
.nav-tools{display:flex;align-items:center;gap:4px}
.navlinks{display:flex;gap:2px;align-items:center}
.navlinks a{color:var(--text);text-decoration:none;font-weight:600;white-space:nowrap;font-size:.96rem;padding:9px 12px;border-radius:var(--radius-sm)}
.navlinks a:not(.navtel):hover{color:var(--accent-text);background:var(--accent-dim)}
.navtel{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent)!important;font-weight:700;
        padding:10px 16px!important;margin-left:8px;white-space:nowrap}
.navtel:hover{background:var(--accent2)}
.menu-btn{display:none;font-size:1.3rem;width:44px}
.theme-btn{font-size:1.05rem;width:44px}
.theme-btn .fa-sun{display:none}
:root[data-theme="dark"] .theme-btn .fa-sun{display:inline-block}
:root[data-theme="dark"] .theme-btn .fa-moon{display:none}

/* ── Hero: titular + etiqueta de servicio ─────────────────────── */
.hero{background:var(--hero-bg);padding:0;border-bottom:1px solid var(--hero-linea);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.hero-txt{padding:72px 0 80px;align-self:center}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem);font-weight:800;line-height:.98;max-width:22ch;margin-bottom:.35em}
.hero-lead{font-size:1.15rem;color:var(--text2);max-width:56ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.hero-tel{color:var(--dim);margin:0;font-size:.98rem}
.hero-tel a{font-weight:700;white-space:nowrap}
.hero-etq{margin:0;padding-top:28px;display:flex;flex-direction:column;align-items:center}
.hero-etq figcaption{font-size:.9rem;color:var(--dim);max-width:36ch;padding:0 0 28px;margin-top:-6px}
.etq{width:100%;max-width:400px;height:auto;display:block;overflow:hidden}
.etq .gc1{stop-color:var(--rojo-cil)} .etq .gc2{stop-color:var(--rojo)} .etq .gc3{stop-color:var(--rojo-cil)}
.etq .gf1{stop-color:var(--hero-bg);stop-opacity:0} .etq .gf2{stop-color:var(--hero-bg);stop-opacity:1}
.etq .ext-hose{fill:none;stroke:var(--ext-hose);stroke-width:10;stroke-linecap:round}
.etq .ext-brillo{fill:#ffffff;opacity:.16}
.etq .ext-metal{fill:var(--ext-metal)}
.etq .ext-valv{fill:var(--ext-valv)}
.etq .ext-palanca{fill:var(--ext-palanca)}
.etq .ext-aro{fill:none;stroke:var(--ext-palanca);stroke-width:3}
.etq .ext-man{fill:#ffffff;stroke:var(--ext-metal);stroke-width:3}
.etq .ext-verde{fill:none;stroke:var(--clase-a);stroke-width:3}
.etq .ext-aguja{stroke:var(--grafito);stroke-width:2;stroke-linecap:round}
.etq .cuerda{fill:none;stroke:var(--acero);stroke-width:2;stroke-linecap:round}
.etq .tag-carton{fill:var(--etq);stroke:rgba(29,35,41,.18);stroke-width:1}
.etq .tag-ojal{fill:var(--ext-palanca);stroke:var(--acero);stroke-width:1.5}
.etq .tag-hueco,.etq .perfo{fill:var(--hero-bg)}
.etq .tag-banda{fill:var(--rojo)}
.etq text{font-family:var(--display);fill:var(--etq-tinta)}
.etq .tag-t1{font-size:12px;font-weight:700;letter-spacing:.14em;fill:#ffffff;text-anchor:middle}
.etq .tag-t2{font-size:29px;font-weight:800;letter-spacing:.04em;fill:#ffffff;text-anchor:middle}
.etq .tag-checks rect{fill:var(--etq-celda);stroke:var(--etq-tinta);stroke-width:1}
.etq .tag-checks text{font-size:12px;font-weight:600}
.etq .tag-visto{fill:none;stroke:var(--etq-tinta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.etq .tag-lbl{font-size:10px;font-weight:800;letter-spacing:.14em}
.etq .celda rect{fill:var(--etq-celda);stroke:rgba(29,35,41,.5);stroke-width:1}
.etq .celda text{font-size:11px;font-weight:700;text-anchor:middle}
.etq .tag-pie{font-size:11.5px;font-weight:600}
.etq .tag-linea{stroke:var(--etq-tinta);stroke-width:1;opacity:.6}
/* Perforación: sitio.js marca .perforado en el mes y el año actuales. */
.etq .perfo{stroke:rgba(29,35,41,.35);stroke-width:1;transform:scale(0);transform-box:fill-box;transform-origin:center}
.etq .chad{fill:var(--etq);stroke:rgba(29,35,41,.25);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.etq .perforado .perfo{transform:scale(1)}

/* ── Servicios: ciclo de vida en filas ────────────────────────── */
.ciclo{list-style:none;margin:0;padding:0;border-top:2px solid var(--text)}
.ciclo li{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;padding:28px 0;border-bottom:1px solid var(--border2)}
.ciclo-cuando{font-family:var(--display);font-size:1.75rem;font-weight:700;line-height:1.05;color:var(--accent-text);margin:0}
.ciclo-cuerpo{max-width:68ch}
.ciclo-cuerpo h3{font-size:1.6rem;margin-bottom:.25em}
.ciclo-cuerpo p{margin:0 0 .6em;color:var(--text2)}
.ciclo-cuerpo .ciclo-norma{font-size:.88rem;color:var(--muted);margin:0}
.otros-t{margin:56px 0 18px;font-size:1.6rem}
.otros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px;margin:0}
.otros div{border-left:3px solid var(--accent);padding-left:16px}
.otros dt{font-weight:700;margin-bottom:2px}
.otros dd{margin:0;color:var(--dim);max-width:60ch}

/* ── Clases de fuego (pictogramas NFPA) ───────────────────────── */
.clases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--text)}
.clase{padding:24px 20px 8px;border-left:1px solid var(--border2)}
.clase:first-child{border-left:0;padding-left:0}
.clase h3{font-size:1.4rem;margin:14px 0 8px}
.clase-l{display:block;font-size:1rem;font-weight:700;color:var(--dim);letter-spacing:.02em}
.clase p{color:var(--dim);font-size:.95rem;margin:0 0 10px}
.clase .usa{color:var(--text)}
.picto{width:64px;height:64px;display:block;overflow:visible}
.picto text{font-family:var(--display);font-weight:800;font-size:27px;text-anchor:middle;fill:var(--clase-ink)}
.picto.pA polygon{fill:var(--clase-a)} .picto.pB rect{fill:var(--clase-b)} .picto.pC circle{fill:var(--clase-c)}
.picto.pD polygon{fill:var(--clase-d)} .picto.pD text{fill:var(--clase-d-ink)}
.picto.pK polygon{fill:var(--clase-k);stroke:var(--clase-k-borde);stroke-width:2}
.picto.mini{width:30px;height:30px;margin:0 auto}
.matriz-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;margin-top:56px;align-items:start}
.matriz{width:100%;border-collapse:collapse;font-size:.97rem}
.matriz caption{font-family:var(--display);font-weight:700;font-size:1.6rem;text-align:left;margin-bottom:14px;color:var(--text)}
.matriz th,.matriz td{padding:10px 6px;border-bottom:1px solid var(--border2);text-align:center}
.matriz thead th{border-bottom:2px solid var(--text);padding-top:0}
.matriz thead th:first-child,.matriz tbody th{text-align:left;font-weight:600;padding-left:0}
.matriz thead th:first-child{font-family:var(--display);font-size:1.1rem;vertical-align:bottom}
.matriz td.si{color:var(--ok)}
.matriz td.no{color:var(--muted)}
.notas{margin:0;padding:0;list-style:none;display:grid;gap:14px;padding-top:52px}
.notas li{padding-left:16px;border-left:3px solid var(--amarillo);color:var(--text2);max-width:60ch}

/* ── PASS ─────────────────────────────────────────────────────── */
.pass-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 56px;align-items:start}
.pass-grid .lead{margin-bottom:32px}
.pass{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
.pass li{counter-increment:paso;position:relative;padding-left:52px}
.pass li::before{content:counter(paso);position:absolute;left:0;top:-6px;font-family:var(--display);font-weight:800;
                 font-size:2.9rem;line-height:1;color:var(--accent-text)}
.pass h3{font-size:1.45rem;margin-bottom:.2em}
.pass p{color:var(--dim);margin:0}
.pass-foto{margin:8px 0 0}
.pass-foto img{width:100%;aspect-ratio:659/303;object-fit:cover;border-radius:var(--radius)}
.pass-foto figcaption{font-size:.9rem;color:var(--dim);margin-top:10px}
.aviso-emerg{grid-column:1/-1;margin:16px 0 0;background:var(--aviso-bg);border-left:5px solid var(--aviso-borde);
             padding:16px 20px;color:var(--aviso-ink);display:flex;gap:14px;align-items:flex-start;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.aviso-emerg i{font-size:1.25rem;margin-top:3px}
.aviso-emerg strong{color:inherit}

/* ── Normativa ────────────────────────────────────────────────── */
.normas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.normas-grid > div > h3{font-size:1.6rem;padding-bottom:12px;border-bottom:2px solid var(--text);margin:0}
.normas{list-style:none;margin:0;padding:0}
.normas li{padding:20px 0;border-bottom:1px solid var(--border2)}
.normas h4{font-size:1.35rem;margin:0 0 2px}
.normas .norma-tit{font-weight:600;color:var(--text2);margin:0 0 6px}
.normas p{color:var(--dim);margin:0 0 8px;max-width:62ch}
.normas a{font-weight:600}
.normas-pie{margin:32px 0 0;color:var(--dim)}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}
.faq-grid .sec-head{position:sticky;top:100px}
.faq{border-top:2px solid var(--text)}
.faq details{border-bottom:1px solid var(--border2)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);color:var(--accent-text);font-weight:800;font-size:1.6rem;line-height:.9;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent-text)}
.faq details p{color:var(--text2);margin:0;padding:0 0 20px;max-width:68ch}

/* ── Contacto ─────────────────────────────────────────────────── */
.contacto-sec{background:var(--bg2)}
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.contacto .lead{margin-bottom:28px}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.datos li{display:flex;gap:14px;align-items:flex-start}
.datos i{color:var(--accent-text);width:20px;text-align:center;margin-top:4px;font-size:1.05rem}
.datos span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.datos strong{font-size:.9rem;color:var(--dim);font-weight:600}
.form-caja{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:var(--radius);padding:28px}
.form label{display:block;font-weight:600;margin:14px 0 6px}
.form label:first-child{margin-top:0}
.form input,.form textarea{width:100%;min-width:0;padding:12px 14px;border:1px solid var(--border2);border-radius:var(--radius-sm);
       font:inherit;color:var(--text);background:var(--bg);transition:var(--transition)}
.form textarea{resize:vertical;min-height:120px}
.form ::placeholder{color:var(--muted);opacity:1}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-border)}
.form .acciones{margin-top:20px}
.form .nota{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.aviso{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-weight:600}
.aviso[hidden]{display:none}
.aviso.ok{background:var(--ok-dim);color:var(--ok);border:1px solid var(--ok-border)}
.aviso.mal{background:var(--accent-dim);color:var(--accent-text);border:1px solid var(--accent-border)}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--ink-text);padding:40px 0 48px;font-size:.95rem}
.site-footer a{color:var(--ink-strong)}
.site-footer strong{color:var(--ink-strong)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ── Bloques comerciales: franja, ventajas, banda, portal, capacitación ── */
.cta{display:flex;gap:12px;flex-wrap:wrap}
.sec-pie{margin:32px 0 0;color:var(--dim);max-width:70ch}
.nav-wa{font-size:1.3rem;width:44px;color:var(--text)}
.nav-wa:hover{color:var(--accent-text)}
.confianza{background:var(--surface);border-bottom:1px solid var(--border)}
.confianza-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 32px;padding-top:20px;padding-bottom:20px}
.confianza p{margin:0;display:flex;gap:12px;align-items:center;font-weight:600;color:var(--text2);font-size:.98rem}
.confianza i{color:var(--accent-text);width:20px;text-align:center;flex:0 0 20px}
.ventajas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:0 48px;border-top:2px solid var(--text);counter-reset:ventaja}
.ventajas li{counter-increment:ventaja;padding:24px 0 22px;border-bottom:1px solid var(--border2)}
.ventajas h3{font-size:1.5rem;margin-bottom:.3em;display:flex;gap:12px;align-items:baseline}
.ventajas h3::before{content:counter(ventaja,decimal-leading-zero);font-size:1rem;font-weight:800;color:var(--accent-text);flex:0 0 auto}
.ventajas p{color:var(--text2);margin:0 0 .6em;max-width:70ch}
.ventajas .ventaja-base,.cursos .curso-h{font-size:.88rem;color:var(--muted);margin:0}
.cta-medio{background:var(--accent-dim);border-top:1px solid var(--accent-border);border-bottom:1px solid var(--accent-border);padding:56px 0}
.cta-medio-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.cta-medio h2{font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:30ch}
.portal-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:center}
.marca{display:inline-flex;gap:10px;align-items:center;margin:0 0 14px;padding:6px 12px;border-radius:999px;
  background:var(--ok-dim);color:var(--ok);border:1px solid var(--ok-border);font-weight:700;font-size:.92rem}
.portal-txt .lead{margin-bottom:28px}
.portal-puntos{margin:0 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.portal-puntos dt{font-weight:700;display:flex;gap:10px;align-items:baseline}
.portal-puntos dt i{color:var(--accent-text);width:20px;text-align:center;flex:0 0 20px}
.portal-puntos dd{margin:4px 0 0 30px;color:var(--dim);max-width:52ch}
.cap-puntos{margin:32px 0 8px}
@media (min-width:1100px){.cap-puntos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.portal-caps{margin:0;position:relative;padding-right:min(14%,120px);padding-bottom:40px}
.portal-caps figcaption{color:var(--dim);font-size:.9rem;margin-top:14px}
.pt-cap{display:block;position:relative;border:1px solid var(--border2);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.pt-cap img{display:block;width:100%;height:auto}
.pt-cap .cap-oscuro{display:none}
:root[data-theme="dark"] .pt-cap .cap-claro{display:none}
:root[data-theme="dark"] .pt-cap .cap-oscuro{display:block}
.pt-cap-pc{border-radius:var(--radius);padding-top:22px}
.pt-cap-pc::before{content:"";position:absolute;top:8px;left:12px;width:7px;height:7px;border-radius:50%;background:var(--border2);
  box-shadow:12px 0 0 var(--border2),24px 0 0 var(--border2)}
.pt-cap-tel{position:absolute;right:0;bottom:0;width:min(26%,210px);border-radius:22px;border-width:6px;border-color:var(--grafito)}
.cursos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
/* 6 cursos: 3 + 3 en escritorio, 2 + 2 + 2 en tablet, 1 en móvil (nunca 5 + 1). */
@media (min-width:640px){.cursos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cursos{grid-template-columns:repeat(3,1fr)}}
.cursos li{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius-sm);padding:18px 20px}
.cursos h3{font-size:1.35rem;margin:4px 0 6px}
.cursos li p:last-child{color:var(--dim);margin:0}
#capacitacion .cta{margin-top:24px}
.pass-pie{grid-column:1/-1;margin:0}
#faq{border-top:1px solid var(--border)}
.faq-t{font-size:1.4rem;margin:0 0 10px}
.faq + .faq-t{margin-top:40px}
.form-ayuda{font-size:.88rem;color:var(--muted);margin:-2px 0 8px}

/* ── 404 (full width, como el resto: FIRMA, sección 5b) ────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow)}
.error-404{min-height:100vh;display:flex;align-items:center;padding:24px clamp(16px,4vw,48px);background:var(--bg2)}
.error-404 .card{width:100%;text-align:center}
.error-404 p{max-width:70ch;margin-inline:auto}
.error-404 .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ── La única animación: perforar el mes y el año ─────────────── */
@media (prefers-reduced-motion: no-preference){
  .etq .perforado .perfo{animation:perforar .34s cubic-bezier(.2,.8,.3,1.4) var(--d,0s) both}
  .etq .perforado .chad{animation:caer 1s cubic-bezier(.45,0,.85,.55) var(--d,0s) both}
  @keyframes perforar{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
  @keyframes caer{
    0%{opacity:0;transform:none}
    6%{opacity:1;transform:none}
    80%{opacity:1}
    100%{opacity:0;transform:translate(16px,120px) rotate(50deg)}
  }
}

/* ── Responsive ───────────────────────────────────────────────── */
/* Menú plegado antes de que los enlaces se partan en dos líneas. */
@media (max-width:1240px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;
            align-items:stretch;padding:12px 16px;border-bottom:1px solid var(--border);gap:4px;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navtel{margin:6px 0 0;justify-content:center}
  .menu-btn{display:inline-flex}
}
@media (max-width:1060px){
  .navlinks a{padding:9px 8px}
  .clases{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .clase:nth-child(4){border-left:0;padding-left:0}
}
@media (max-width:900px){
  section{padding:56px 0}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;
            align-items:stretch;padding:12px 16px;border-bottom:1px solid var(--border);gap:4px;box-shadow:var(--shadow)}
  .navlinks.open{display:flex}
  .navtel{margin:6px 0 0;justify-content:center}
  .menu-btn{display:inline-flex}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-txt{padding:44px 0 8px}
  .hero-etq{padding-top:8px}
  .etq{max-width:330px}
  .ciclo li{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .ciclo-cuando{font-size:1.35rem}
  .otros,.normas-grid,.matriz-wrap,.pass-grid,.faq-grid,.contacto,.portal-grid,.cta-medio-fila{grid-template-columns:1fr}
  .confianza-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .normas-grid,.matriz-wrap,.faq-grid,.contacto{gap:32px}
  .notas{padding-top:0}
  .faq-grid .sec-head{position:static;margin-bottom:0}
  .clases{grid-template-columns:1fr}
  .clase,.clase:first-child,.clase:nth-child(4){display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;
         border-left:0;padding:18px 0;border-bottom:1px solid var(--border2)}
  .clase .picto{grid-row:1/4}
  .clase h3{margin-top:0}
}
@media (max-width:480px){
  .logo img{height:36px}
  .hero h1{font-size:2.3rem}
  .hero .cta .btn,.cta-medio .cta .btn{flex:1 1 100%}
  .confianza-fila,.portal-puntos{grid-template-columns:1fr}
  .portal-caps{padding-right:0;padding-bottom:0}
  .pt-cap-tel{display:none}
  .pass{grid-template-columns:1fr}
  .form-caja{padding:20px 16px}
  .matriz{font-size:.9rem}
  .matriz th,.matriz td{padding:9px 3px}
  .picto.mini{width:26px;height:26px}
}