/* AXIOM · web corporativa + academia · DEV ronda 1 (26-oct-2026) · REDISEÑO v2 «Dossier técnico» (31-oct-2026, bloque final)
   Paleta del logo: marino #011A3C, azul #0049A1, celeste #8CBBF5. Fuentes autoalojadas (OFL). */
@font-face { font-family: "Barlow"; src: url(fuentes/Barlow-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fuentes/Barlow-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fuentes/Barlow-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fuentes/BarlowCondensed-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(fuentes/BarlowCondensed-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fuentes/JetBrainsMono.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --marino: #011A3C; --marino-2: #062A5A; --azul: #0049A1; --azul-osc: #00377A; --celeste: #8CBBF5;
  --fondo: #EEF1F5; --banda: #E2E8F0; --blanco: #fff;
  --texto: #0B1630; --suave: #4A5468; --borde: #C5CEDB;
  --sobre-osc: #F1F5FB; --sobre-osc-suave: #B4C3D9;
  --wa: #1A7F45; --ok: #157347; --mal: #B42318;
  --t-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --t-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-datos: "JetBrains Mono", ui-monospace, monospace;
  --ancho: 1240px; --margen: clamp(16px, 5vw, 64px); --seccion: clamp(56px, 7vw, 104px);
  --radio: 3px; --radio-sm: 2px; --senal: #F5B800; --senal-osc: #B98A00;
  --sombra: 0 1px 0 rgb(1 26 60 / .06);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1.0625rem/1.6 var(--t-texto); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; }
h2 { font: 700 clamp(2rem, 3.6vw, 3.1rem)/1.04 var(--t-titulo); letter-spacing: .005em; }
h3 { font: 700 1.3rem/1.2 var(--t-texto); }
p { margin: 0; }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.18em; fill: currentColor; }
.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.oscuro :focus-visible, .hero :focus-visible, .america :focus-visible, .pie :focus-visible { outline-color: var(--celeste); }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--marino); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { top: 12px; }

/* dato de EJEMPLO: visible a propósito */
.pc { font-family: var(--t-datos); font-size: .86em; font-weight: 500; background: #FFF1B8; color: #5A4300; border-bottom: 1.5px dashed #A07800; padding: 0 .3em; border-radius: 3px; }
.nota-ej { margin-top: 18px; font: 400 .78rem/1.5 var(--t-datos); color: var(--suave); }
.nota-ej::before { content: "◆ "; color: #A07800; }

/* aviso de maqueta */
.aviso-dev { background: var(--marino); color: var(--sobre-osc-suave); font: 400 .74rem/1.4 var(--t-datos); }
.aviso-dev .contenedor { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 7px 0; text-align: center; }

/* ── botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 2px solid var(--azul); border-radius: 12px; background: var(--azul); color: #fff;
  font: 600 1rem/1.1 var(--t-texto); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.btn:active { transform: translateY(1px); }
.btn-chico { min-height: 42px; padding: 0 16px; font-size: .95rem; }
.btn-claro { background: #fff; border-color: #fff; color: var(--marino); }
.btn-claro:hover { background: var(--celeste); border-color: var(--celeste); }
.btn-borde { background: transparent; border-color: rgb(255 255 255 / .7); color: #fff; }
.btn-borde:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.btn-osc { background: var(--marino); border-color: var(--marino); }
.btn-osc:hover { background: var(--marino-2); border-color: var(--marino-2); }
.btn-wa { background: var(--wa); border-color: var(--wa); }
.btn-wa:hover { background: #136536; border-color: #136536; }
.btn-ancho { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── navegación ── */
.nav { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--borde); backdrop-filter: saturate(1.4) blur(8px); }
.nav-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo img { width: 92px; height: auto; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0 auto 0 12px; padding: 0; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--texto); }
.menu a:hover { background: var(--banda); color: var(--azul); }
.menu-movil { display: none; }
.nav-acc { display: flex; align-items: center; gap: 10px; }
.idioma { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.idioma button { min-width: 42px; min-height: 40px; border: 0; background: transparent; font: 600 .82rem/1 var(--t-datos); color: var(--suave); cursor: pointer; }
.idioma button[aria-pressed="true"] { background: var(--marino); color: #fff; }
.nav-intranet { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--marino); }
.nav-intranet:hover { background: var(--banda); }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.menu-btn span { display: block; height: 2px; background: var(--marino); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1080px) {
  .nav-intranet { display: none; }
  .menu-movil { display: block; }
}
@media (max-width: 960px) {
  .menu-btn { display: flex; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px var(--margen) 16px; flex-direction: column; background: #fff; border-bottom: 1px solid var(--borde); box-shadow: 0 16px 30px rgb(1 26 60 / .12); }
  .menu.abierto { display: flex; }
  .menu a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--banda); border-radius: 0; }
  .nav-in { gap: 12px; }
  .nav-acc { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav-acc .btn-chico { display: none; }
  .logo img { width: 78px; }
}

/* ── portada ── */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--marino); min-height: min(88vh, 760px); display: flex; align-items: flex-end; }
.hero-foto, .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-foto img { object-fit: cover; object-position: 60% 40%; }
.hero-velo { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(1 26 60 / .94) 0%, rgb(1 26 60 / .82) 38%, rgb(1 26 60 / .2) 72%, rgb(1 26 60 / .05) 100%), linear-gradient(0deg, rgb(1 26 60 / .7), transparent 40%); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 40px; align-items: end; padding-block: clamp(56px, 9vw, 112px) clamp(40px, 6vw, 72px); }
.hero-texto { max-width: 640px; }
.sobre-claro { display: inline-flex; align-items: center; gap: 10px; font: 500 .8rem/1.3 var(--t-datos); letter-spacing: .12em; text-transform: uppercase; color: var(--celeste); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #5BD08A; box-shadow: 0 0 0 4px rgb(91 208 138 / .25); }
.hero h1 { margin: 18px 0 18px; font: 700 clamp(2.6rem, 6vw, 4.9rem)/.98 var(--t-titulo); letter-spacing: .005em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--celeste); }
.hero-bajada { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: #DCE6F5; max-width: 560px; margin-bottom: 28px; }
.hero-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .95rem; color: #DCE6F5; }
.hero-chips li { display: inline-flex; align-items: center; gap: 7px; }
.hero-chips .i { color: var(--celeste); }

.verificador { background: rgb(255 255 255 / .97); color: var(--texto); border-radius: var(--radio); padding: 22px; box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.verif-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.qr-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--marino); display: grid; place-items: center; }
.qr-ic svg { width: 24px; height: 24px; fill: var(--celeste); }
.verificador h2 { font: 700 1.25rem/1.2 var(--t-texto); }
.verificador p { font-size: .95rem; color: var(--suave); }
.verif-fila { display: flex; gap: 8px; }
.verif-fila input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--borde); border-radius: 12px; font: 500 1rem var(--t-datos); text-transform: uppercase; color: var(--texto); background: #fff; }
.verif-fila input::placeholder { text-transform: none; color: #6B7487; }
.verif-fila input:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgb(0 73 161 / .2); }
.verificador .verif-nota { margin-top: 10px; font: 400 .76rem/1.45 var(--t-datos); color: var(--suave); }
@media (min-width: 901px) {
  /* el inspector está a la izquierda de la foto: la foto parte en el 34 % para que el texto no lo tape */
  .hero-foto { left: 32%; width: auto; }
  .hero-foto img { object-position: 18% 30%; }
  .hero-velo { background: linear-gradient(90deg, var(--marino) 0%, var(--marino) 31%, rgb(1 26 60 / .78) 37%, rgb(1 26 60 / .12) 56%, transparent 72%), linear-gradient(0deg, rgb(1 26 60 / .55), transparent 35%); }
}
@media (max-width: 900px) {
  .hero { min-height: 0; display: block; }
  .hero-foto { position: relative; inset: auto; height: auto; aspect-ratio: 1 / 1; max-height: 62vh; }
  .hero-foto img { position: absolute; object-position: 25% 15%; }
  .hero-velo { top: 0; bottom: auto; height: min(100vw, 62vh); background: linear-gradient(180deg, transparent 55%, var(--marino) 100%); }
  .hero-in { grid-template-columns: 1fr; gap: 28px; padding-top: 4px; margin-top: -40px; }
}

@media (max-width: 480px) {
  .hero .acciones .btn { flex: 1 1 100%; }
  .verif-fila { flex-direction: column; }
}

/* ── cifras ── */
.cifras { background: #fff; border-bottom: 1px solid var(--borde); }
.cifras-lista { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.cifras-lista div { padding: 26px 20px; display: flex; flex-direction: column-reverse; gap: 4px; }
.cifras-lista div + div { border-left: 1px solid var(--borde); }
.cifras-lista dd { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.5rem)/1 var(--t-titulo); color: var(--marino); }
.cifras-lista dd .pc { font-size: .8em; }
.cifras-lista dt { font-size: .92rem; color: var(--suave); }
@media (max-width: 760px) { .cifras-lista { grid-template-columns: 1fr 1fr; } .cifras-lista div:nth-child(3) { border-left: 0; } .cifras-lista div:nth-child(n+3) { border-top: 1px solid var(--borde); } }

/* ── secciones ── */
.seccion { padding-block: var(--seccion); }
.banda { background: var(--banda); }
.oscuro { background: var(--marino); color: var(--sobre-osc); background-image: radial-gradient(60% 80% at 100% 0%, rgb(0 73 161 / .45), transparent 70%); }
.cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.sobre { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 .78rem/1.3 var(--t-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.sobre-ic { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--azul); color: #fff; display: grid; place-items: center; }
.sobre-ic svg { width: 21px; height: 21px; fill: currentColor; }
.sobre-osc { color: var(--celeste); }
.sobre-osc .sobre-ic { background: rgb(140 187 245 / .16); color: var(--celeste); }
.intro { color: var(--suave); font-size: 1.08rem; }
.oscuro .intro, .america .intro { color: var(--sobre-osc-suave); }
@media (max-width: 860px) { .cab { grid-template-columns: 1fr; } }

/* servicios */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.serv { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s; }
.serv:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(1 26 60 / .06), 0 18px 40px rgb(1 26 60 / .14); }
.serv picture { aspect-ratio: 16 / 10; overflow: hidden; background: var(--banda); }
.serv img { width: 100%; height: 100%; object-fit: cover; }
.serv-txt { padding: 20px 22px 8px; flex: 1; }
.serv-n { font: 600 .78rem/1 var(--t-datos); color: var(--azul); letter-spacing: .1em; }
.serv h3 { margin: 8px 0 8px; }
.serv p { color: var(--suave); font-size: .98rem; }
.serv-link { display: inline-flex; align-items: center; gap: 8px; margin: 8px 22px 20px; min-height: 40px; font-weight: 600; color: var(--azul); text-decoration: none; }
.serv-link::after { content: ""; position: absolute; inset: 0; }
.serv-link:hover span { text-decoration: underline; }
.serv:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.serv-link:focus-visible { outline: none; }
.equipos { margin-top: 28px; padding: 22px 24px; border: 1px dashed #B8C6DB; border-radius: var(--radio); display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: center; }
.equipos-t { font-weight: 700; }
.equipos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.equipos-lista li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); font-size: .92rem; }
.equipos .nota-ej { grid-column: 1 / -1; margin-top: 4px; }
@media (max-width: 1000px) { .servicios { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .servicios { grid-template-columns: 1fr; } .equipos { grid-template-columns: 1fr; } }

/* proceso */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: p; position: relative; }
.pasos li { position: relative; background: #fff; border-radius: var(--radio); padding: 26px 22px 24px; box-shadow: var(--sombra); }
.paso-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marino); color: #fff; font: 700 1.25rem/1 var(--t-titulo); margin-bottom: 16px; }
.pasos li:not(:last-child)::after { content: ""; position: absolute; top: 47px; right: -20px; width: 20px; border-top: 2px dashed #9DB0CC; }
.pasos h3 { margin-bottom: 8px; }
.pasos p { color: var(--suave); font-size: .98rem; }
@media (max-width: 960px) { .pasos { grid-template-columns: 1fr 1fr; } .pasos li::after { display: none; } }
@media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

/* trazabilidad QR */
.qr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.qr-texto h2 { margin-bottom: 16px; }
.lista-check { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px; }
.lista-check li { position: relative; padding-left: 34px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: rgb(140 187 245 / .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CBBF5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lista-claro li::before { background-color: rgb(0 73 161 / .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230049A1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E"); }
.qr-visual { position: relative; display: flex; justify-content: center; padding: 10px 0 40px; }
.tel { width: 300px; border-radius: 36px; padding: 12px; background: #0B1220; box-shadow: 0 30px 60px rgb(0 0 0 / .45), inset 0 0 0 2px #2A3550; }
.tel-pantalla { border-radius: 26px; background: #fff; color: var(--texto); padding: 16px 16px 20px; min-height: 470px; }
.tel-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); font: 400 .62rem/1.2 var(--t-datos); color: var(--suave); }
.tel-barra img { width: 58px; }
.tel-estado { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; padding: 14px; border-radius: 14px; background: #E5F5EC; color: var(--ok); font-weight: 700; font-size: 1.05rem; }
.tel-estado .i { width: 1.6em; height: 1.6em; }
.tel-eq { font: 700 1.5rem/1.1 var(--t-titulo); margin-bottom: 12px; }
.tel-datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tel-datos div { background: var(--fondo); border-radius: 10px; padding: 8px 10px; }
.tel-datos dt { font-size: .72rem; color: var(--suave); }
.tel-datos dd { margin: 2px 0 0; font: 600 .82rem/1.2 var(--t-datos); }
.tel-pdf { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; background: var(--azul); color: #fff; font-weight: 600; font-size: .92rem; }
.qr-stat { position: absolute; right: 0; bottom: 0; width: 240px; background: var(--marino-2); border: 1px solid rgb(140 187 245 / .3); border-radius: var(--radio); padding: 14px 16px; box-shadow: 0 20px 40px rgb(0 0 0 / .35); }
.qr-stat-t { font: 500 .7rem/1.3 var(--t-datos); letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-osc-suave); margin-bottom: 8px; }
.qr-barras { width: 100%; height: auto; }
.qr-stat-n { margin-top: 8px; font-size: .85rem; color: var(--sobre-osc-suave); }
.qr-stat-n b { font: 700 1.4rem/1 var(--t-titulo); color: #fff; }
@media (max-width: 900px) { .qr-grid { grid-template-columns: 1fr; } .qr-stat { right: 50%; transform: translateX(150px); } }
@media (max-width: 560px) { .qr-stat { position: relative; transform: none; right: auto; margin-top: -60px; width: 100%; } .qr-visual { flex-direction: column; align-items: center; } .tel { width: min(300px, 100%); } }

/* globo (estilos del dev 15-oct, «B · agrupado por región») */
.america { position: relative; background: var(--marino); color: var(--sobre-osc); padding-block: var(--seccion) clamp(40px, 4.5vw, 60px); overflow-x: clip;
  background-image: radial-gradient(50% 60% at 100% 0%, rgb(0 73 161 / .45), transparent 70%), linear-gradient(rgb(140 187 245 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(140 187 245 / .05) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px; border-top: 1px solid rgb(140 187 245 / .18); }
.america h2 em { font-style: normal; color: var(--celeste); }
.globo-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; }
.globo-cab-txt { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.globo-bajada { color: #C9D6EA; }
.globo-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.globo-repetir { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; background: transparent; color: #C9D6EA; border: 1px solid rgb(140 187 245 / .45); font: 500 .95rem/1 var(--t-texto); cursor: pointer; }
.globo-repetir:hover { color: #fff; border-color: var(--celeste); }
.globo-repetir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.globo-mapa { position: relative; margin-top: 12px; }
.globo-escena { position: relative; width: 100%; height: 720px; }
.globo-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-pt { cursor: pointer; }
.g-pt .g-aro { opacity: 0; transition: opacity .2s; }
.g-pt.activo .g-aro { opacity: 1; }
.globo-paneles { position: absolute; inset: 0; pointer-events: none; }
.globo-panel { position: absolute; left: 0; top: 0; width: 224px; pointer-events: auto; }
.globo-panel h3 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid rgb(140 187 245 / .35); font: 600 .72rem/1.25 var(--t-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--celeste); }
.globo-panel h3 small { font: 400 .72rem/1.25 var(--t-datos); letter-spacing: .02em; text-transform: none; color: #9FB3CF; white-space: nowrap; }
.globo-panel ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.globo-fila { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; min-height: 28px; margin: 0; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 600 .845rem/1.2 var(--t-texto); text-align: left; cursor: pointer; transition: background-color .2s; }
.globo-fila img { width: 22px; height: 15px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
.globo-fila .k { grid-column: 2; display: none; margin-top: 4px; font: 500 .6875rem/1.3 var(--t-datos); color: #DCEAFD; }
.globo-fila:hover { background: rgb(0 73 161 / .45); }
.globo-fila.activo { background: var(--azul); }
.globo-fila.activo .k { display: block; }
.globo-fila:focus-visible { outline: 2px solid var(--celeste); outline-offset: -2px; }
.globo-pista { display: none; margin: 4px 0 0; text-align: center; font: 400 .75rem/1.5 var(--t-datos); color: #9FB3CF; }
.globo-nota { margin: 14px 0 0; text-align: center; font: 400 .75rem/1.5 var(--t-datos); color: #9FB3CF; }
.globo-mapa.compacto .globo-pista { display: block; }
.globo-mapa.compacto .globo-paneles { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 26px 32px; margin-top: 22px; }
.globo-mapa.compacto .globo-panel { position: static; width: auto; opacity: 1 !important; transform: none !important; }
.globo-mapa.compacto .globo-panel ul { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.globo-mapa.compacto .globo-fila { min-height: 42px; padding: 6px 8px; align-content: center; }
@media (min-width: 900px) { .globo-mapa.compacto .globo-paneles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .globo-mapa.compacto .globo-panel ul { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .globo-cab { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) { .globo-acc .btn, .globo-repetir { flex: 1 1 100%; } .globo-nota { text-align: left; } }

/* academia */
.acad-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-bottom: 36px; }
.acad-ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.acad-ventajas li { display: flex; gap: 12px; padding: 18px; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); }
.acad-ventajas .i { width: 28px; height: 28px; color: var(--azul); }
.acad-ventajas strong { display: block; font-size: 1rem; }
.acad-ventajas span { font-size: .9rem; color: var(--suave); line-height: 1.45; }
.acad-intranet { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--radio); background: var(--marino); color: #fff; text-decoration: none; box-shadow: var(--sombra); transition: background-color .2s; }
.acad-intranet:hover { background: var(--marino-2); }
.acad-intranet-ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--azul); display: grid; place-items: center; }
.acad-intranet-ic .i { width: 28px; height: 28px; }
.acad-intranet strong { display: block; font-size: 1.1rem; }
.acad-intranet span span { font-size: .9rem; color: var(--sobre-osc-suave); }
.acad-intranet .flecha { margin-left: auto; color: var(--celeste); }
.rutas { display: grid; gap: 34px; }
.ruta-t { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 700 1.45rem/1.1 var(--t-titulo); text-transform: uppercase; letter-spacing: .03em; color: var(--marino); }
.ruta-t::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }
.ruta-n { order: 2; font: 600 .75rem/1 var(--t-datos); color: #fff; background: var(--azul); border-radius: 999px; padding: 5px 9px; }
.cursos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.curso { display: flex; flex-direction: column; background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.curso picture { aspect-ratio: 16 / 9; overflow: hidden; background: var(--banda); }
.curso img { width: 100%; height: 100%; object-fit: cover; }
.curso-txt { padding: 16px 18px 6px; flex: 1; }
.curso-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 .74rem/1.3 var(--t-datos); color: var(--suave); margin-bottom: 8px; }
.cod { background: var(--marino); color: #fff; padding: 3px 7px; border-radius: 6px; }
.mod { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--azul); color: var(--azul); }
.mod.vivo { background: var(--azul); color: #fff; }
.curso h4 { font: 700 1.12rem/1.25 var(--t-texto); margin-bottom: 6px; }
.curso-txt > p:not(.curso-meta) { font-size: .93rem; color: var(--suave); line-height: 1.5; }
.curso-ini { margin-top: 8px; font: 500 .78rem/1.3 var(--t-datos); }
.curso-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 18px 18px; }
.curso-wa { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; font-weight: 600; font-size: .92rem; color: var(--wa); text-decoration: none; }
.curso-wa:hover { text-decoration: underline; }
.ruta-gestion .cursos { grid-template-columns: 1fr; }
.ruta-gestion .curso { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr) auto; align-items: center; }
.ruta-gestion .curso picture { aspect-ratio: auto; height: 100%; }
.ruta-gestion .curso-txt { padding: 20px 24px; }
.ruta-gestion .curso-acc { flex-direction: column; align-items: stretch; padding: 20px 24px; }
.grua-bloque { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; padding: clamp(20px, 3vw, 36px); background: var(--banda); border-radius: 22px; }
.grua-bloque h3 { font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 var(--t-titulo); margin-bottom: 10px; }
.grua-bloque p:not(.sobre) { color: var(--suave); }
.grua-marco { border-radius: var(--radio); overflow: hidden; background: #fff; box-shadow: var(--sombra); }
.grua-cargar { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--marino); cursor: pointer; }
.grua-cargar img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .55; }
.grua-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 600 1.1rem/1 var(--t-texto); }
.grua-play .i { width: 52px; height: 52px; padding: 14px; border-radius: 50%; background: var(--azul); }
.grua-cargar:hover .grua-play .i { background: var(--azul-osc); }
.grua-marco iframe { display: block; width: 100%; height: 560px; border: 0; }
@media (max-width: 1000px) { .acad-top { grid-template-columns: 1fr; } .cursos { grid-template-columns: 1fr 1fr; } .grua-bloque { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .acad-ventajas { grid-template-columns: 1fr; } .cursos, .ruta-gestion .cursos { grid-template-columns: 1fr; } .ruta-gestion .curso { display: flex; flex-direction: column; } .ruta-gestion .curso picture { width: auto; aspect-ratio: 16 / 9; } .grua-marco iframe { height: 900px; } }

/* empresa */
.emp-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.emp-texto h2 { margin-bottom: 18px; }
.emp-texto > p:not(.sobre) { color: var(--suave); margin-bottom: 12px; }
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.galeria figure { margin: 0; position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: var(--marino); }
.galeria .g-grande { grid-column: 1 / -1; }
.galeria img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.galeria figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; width: fit-content; padding: 6px 10px; border-radius: 8px; background: rgb(1 26 60 / .85); color: #fff; font-size: .82rem; }
@media (max-width: 900px) { .emp-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .galeria { grid-template-columns: 1fr; } }

/* testimonios */
.testimonios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonios li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); }
.testimonios blockquote { margin: 0; font-size: 1.03rem; }
.testimonios blockquote::before { content: "“"; display: block; font: 700 3rem/0.6 var(--t-titulo); color: var(--azul); margin-bottom: 8px; }
.t-quien { display: flex; align-items: center; gap: 12px; }
.t-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--banda); color: var(--azul); font: 600 .85rem/1 var(--t-datos); flex: none; }
.t-quien strong { display: block; }
.t-quien span span { font-size: .88rem; color: var(--suave); }
@media (max-width: 900px) { .testimonios { grid-template-columns: 1fr; } }

/* preguntas */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-grid .intro { margin: 14px 0 22px; }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 14px; box-shadow: var(--sombra); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600; font-size: 1.04rem; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--banda); color: var(--azul); font: 600 1.2rem/1 var(--t-texto); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 20px 18px; color: var(--suave); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }

/* contacto */
.cont-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.cont-texto h2 { margin-bottom: 14px; }
.cont-texto .intro { margin-bottom: 24px; }
.cont-datos { margin: 28px 0 0; display: grid; gap: 14px; }
.cont-datos dt { font: 500 .74rem/1.3 var(--t-datos); letter-spacing: .1em; text-transform: uppercase; color: var(--celeste); }
.cont-datos dd { margin: 2px 0 0; font-size: 1.05rem; }
.form { background: #fff; color: var(--texto); border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.form-t { grid-column: 1 / -1; font: 700 1.5rem/1.1 var(--t-titulo); }
.campo { display: grid; gap: 6px; align-content: start; }
.campo-wa, .form .campo:nth-of-type(4), .form .campo:nth-of-type(5), .form-nota, .form-ok, .form .btn { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fff; font: 400 1rem var(--t-texto); color: var(--texto); }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(0 73 161 / .2); }
.campo [aria-invalid="true"] { border-color: var(--mal); }
.wa-fila { display: flex; gap: 8px; }
.wa-fila select { width: 128px; flex: none; }
.ayuda { font-size: .85rem; color: var(--suave); }
.error { font-size: .88rem; color: var(--mal); font-weight: 600; min-height: 0; }
.error:empty { display: none; }
.form-nota { font: 400 .76rem/1.45 var(--t-datos); color: var(--suave); }
.form-ok { padding: 12px 14px; border-radius: 12px; background: #E5F5EC; color: var(--ok); font-weight: 600; }
@media (max-width: 900px) { .cont-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } .wa-fila select { width: 112px; } }

/* pie */
.pie { background: #00112A; color: var(--sobre-osc-suave); padding-top: 48px; font-size: .95rem; }
.pie-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgb(140 187 245 / .15); }
.pie-marca img { width: 150px; margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie a { display: inline-block; padding: 4px 0; text-decoration: none; color: var(--sobre-osc); }
.pie a:hover { text-decoration: underline; }
.pie-datos p { margin-bottom: 8px; }
.pie-legal { padding: 18px 0 96px; display: grid; gap: 6px; font-size: .8rem; }
@media (max-width: 760px) { .pie-grid { grid-template-columns: 1fr; } }

/* flotantes */
.flotantes { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: flex; flex-direction: column; gap: 12px; }
.flot { width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 26px rgb(1 26 60 / .3); text-decoration: none; transition: transform .2s; }
.flot:hover { transform: scale(1.06); }
.flot svg { width: 30px; height: 30px; fill: currentColor; }
.flot-wa { background: var(--wa); color: #fff; }
.flot-chat { background: var(--azul); color: #fff; }
.flot-chat svg { fill: none; }
.flot-chat[aria-expanded="true"] { background: var(--marino); }

/* modal inscripción + PayPal (maqueta) */
.modal { border: 0; padding: 0; border-radius: 20px; width: min(480px, calc(100% - 32px)); box-shadow: 0 30px 80px rgb(0 0 0 / .4); color: var(--texto); }
.modal::backdrop { background: rgb(1 26 60 / .6); }
.modal-in { position: relative; padding: 28px; display: grid; gap: 14px; }
.modal-in .sobre { margin: 0; }
.modal h2 { font-size: 1.9rem; padding-right: 40px; }
.mi-meta { font: 500 .8rem/1.4 var(--t-datos); color: var(--suave); }
.modal-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--banda); cursor: pointer; display: grid; place-items: center; }
.modal-x svg { width: 20px; height: 20px; }
.mi-res { margin: 0; display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--fondo); }
.mi-res div { display: flex; justify-content: space-between; gap: 16px; }
.mi-res dt { color: var(--suave); }
.mi-res dd { margin: 0; text-align: right; font-weight: 600; }
.paypal { min-height: 52px; border: 0; border-radius: 26px; background: #FFC439; cursor: pointer; display: grid; place-items: center; }
.paypal:hover { filter: brightness(.96); }
.pp-logo { font: italic 800 1.45rem/1 Verdana, var(--t-texto); letter-spacing: -.02em; }
.pp-logo b { color: #003087; } .pp-logo i { color: #0070E0; }
.pp-nota { font: 400 .74rem/1.45 var(--t-datos); color: var(--suave); }
.pp-ok { padding: 12px; border-radius: 12px; background: #E5F5EC; color: var(--ok); font-weight: 600; }

/* chat Sofía (se pinta al abrir) */
.chat { position: fixed; right: 18px; bottom: 156px; z-index: 46; width: min(380px, calc(100% - 36px)); height: min(560px, calc(100dvh - 180px)); display: flex; flex-direction: column; background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgb(1 26 60 / .35); overflow: hidden; }
.chat[hidden] { display: none; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--marino); color: #fff; }
.chat-av { width: 40px; height: 40px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; font: 700 1.1rem/1 var(--t-titulo); }
.chat-cab div { flex: 1; }
.chat-cab small { display: block; color: var(--sobre-osc-suave); font-size: .78rem; }
.chat-cab a, .chat-cab button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer; }
.chat-cab svg { width: 20px; height: 20px; fill: currentColor; }
.chat-cab button svg { fill: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--fondo); }
.msg { max-width: 86%; padding: 10px 12px; border-radius: 14px; font-size: .95rem; line-height: 1.45; background: #fff; box-shadow: 0 1px 2px rgb(1 26 60 / .08); }
.msg.yo { align-self: flex-end; background: var(--azul); color: #fff; }
.msg .ej { display: inline-block; margin-top: 4px; font: 400 .7rem/1.3 var(--t-datos); color: #7A5B00; }
.chat-rapidas { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--fondo); }
.chat-rapidas button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--azul); background: #fff; color: var(--azul); font: 600 .85rem/1 var(--t-texto); cursor: pointer; }
.chat-rapidas button:hover { background: var(--banda); }
.chat-in { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--borde); }
.chat-in input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--borde); border-radius: 12px; font: 400 1rem var(--t-texto); }
.chat-in button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--azul); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-in svg { width: 20px; height: 20px; fill: none; }
.chat-nota { padding: 0 12px 10px; font: 400 .68rem/1.3 var(--t-datos); color: var(--suave); }
.msg a { color: inherit; font-weight: 600; }
.msg .wa-res { margin-top: 8px; }
@media (max-width: 560px) { .chat { inset: 0; width: auto; height: 100dvh; border-radius: 0; } }

/* idioma: evita destello mientras carga EN */
.en-pend body { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 560px) { .flot { width: 50px; height: 50px; } .flot svg { width: 26px; height: 26px; } .flotantes { right: 12px; bottom: 12px; gap: 10px; } }

/* Intranet y panel: usan todo el ancho de la pantalla (27-oct, pedido de Claudio) */
body.ancho-total .contenedor { width: calc(100% - 2 * clamp(16px, 2.5vw, 48px)); max-width: none; }


/* ══════════════════════════════════════════════════════════════════════
   REDISEÑO v2 «Dossier técnico industrial» (31-oct-2026)
   Esquinas casi rectas, filetes finos, señal ámbar (#F5B800) solo como marcador, títulos en
   mayúscula condensada, secciones numeradas y fichas técnicas. Respaldo: .bak-rediseno-20261031/
   ══════════════════════════════════════════════════════════════════════ */
body { counter-reset: sec; background: var(--fondo); }
h2 { text-transform: uppercase; letter-spacing: .012em; }
.pc { border-radius: 0; }

/* botones: rectos, mayúscula, el principal en ámbar sobre fondos oscuros */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .07em; font: 700 .86rem/1.1 var(--t-texto); }
.btn-chico { font-size: .8rem; }
.btn-claro { background: var(--senal); border-color: var(--senal); color: var(--marino); }
.btn-claro:hover { background: #FFD24D; border-color: #FFD24D; }
.btn-borde { border-color: rgb(255 255 255 / .55); }
.btn-wa { letter-spacing: .05em; }

/* navegación */
.nav { background: #fff; border-bottom: 1px solid var(--borde); box-shadow: 0 2px 0 var(--marino); backdrop-filter: none; }
.nav-in { min-height: 76px; }
.logo img { width: 104px; }
.menu a { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .84rem; font-weight: 700; padding: 12px 12px 10px; border-bottom: 3px solid transparent; }
.menu a:hover { background: transparent; color: var(--azul); border-bottom-color: var(--senal); }
.idioma { border-radius: 2px; }
.nav-intranet { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 700; }
.menu-btn { border-radius: 2px; }
@media (max-width: 960px) { .menu a { border-radius: 0; text-transform: uppercase; font-size: .95rem; } }

/* portada */
.aviso-dev { background: #00112A; }
.hero { background: var(--marino); }
.hero-foto img { filter: saturate(.92) contrast(1.05); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgb(140 187 245 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(140 187 245 / .07) 1px, transparent 1px); background-size: 56px 56px; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2; background: linear-gradient(90deg, var(--senal) 0 160px, rgb(140 187 245 / .25) 160px); }
.hero h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); text-transform: uppercase; line-height: .96; letter-spacing: .01em; }
.hero h1 em { color: var(--celeste); }
@media (min-width: 901px) { .hero-texto { border-left: 4px solid var(--senal); padding-left: 30px; } }
.punto { width: 10px; height: 10px; border-radius: 0; background: var(--senal); box-shadow: none; }
.sobre-claro { color: #E7EEF9; }
.hero-chips { font-size: .9rem; text-transform: none; }
.verificador { border-radius: 2px; border-top: 5px solid var(--senal); box-shadow: 0 24px 60px rgb(0 0 0 / .4); }
.qr-ic { border-radius: 2px; }
.verificador h2 { text-transform: uppercase; font: 700 1.3rem/1.15 var(--t-titulo); letter-spacing: .03em; }
.verif-fila input { border-radius: 2px; }
.verif-fila .btn { padding: 0 16px; }

/* cifras: franja de credenciales sobre fondo marino */
.cifras { background: #001A3A; border-bottom: 0; border-top: 0; }
.cifras-lista div { padding: 30px 24px; }
.cifras-lista div + div { border-left: 1px solid rgb(140 187 245 / .22); }
.cifras-lista dd { color: #fff; font-size: clamp(2.2rem, 3.8vw, 3.2rem); letter-spacing: .01em; }
.cifras-lista dd::before { content: ""; display: block; width: 28px; height: 4px; background: var(--senal); margin-bottom: 12px; }
.cifras-lista dt { color: var(--sobre-osc-suave); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; }
.cifras-lista { display: grid; }
.cifras-lista div { flex-direction: column-reverse; justify-content: flex-end; }
@media (max-width: 760px) { .cifras-lista div { border-top: 0 !important; } .cifras-lista div:nth-child(n+3) { border-top: 1px solid rgb(140 187 245 / .22) !important; } .cifras-lista div { padding: 22px 16px; } }

/* encabezados de sección numerados */
.cab, .globo-cab { position: relative; border-top: 2px solid var(--marino); padding-top: 26px; }
.cab::before, .globo-cab::before { content: ""; position: absolute; top: -2px; left: 0; width: 112px; height: 6px; margin-top: -2px; background: var(--senal); }
.oscuro .cab, .america .globo-cab { border-top-color: rgb(140 187 245 / .4); }
.sobre { gap: 10px; color: var(--marino); letter-spacing: .16em; font-size: .75rem; }
.sobre-ic { display: none; }
.sobre::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); padding: 4px 7px; background: var(--marino); color: var(--senal); font-weight: 600; letter-spacing: .06em; }
.sobre-osc { color: #E7EEF9; }
.sobre-osc::before { background: var(--senal); color: var(--marino); }
.grua-bloque .sobre::before, .modal .sobre::before { counter-increment: none; content: "▪"; background: transparent; color: var(--senal-osc); padding: 0; }
.modal .sobre::before { content: none; }
.intro { font-size: 1.04rem; }

/* servicios: fichas con filete superior */
.serv { border-radius: 2px; border: 1px solid var(--borde); border-top: 4px solid var(--marino); box-shadow: none; transition: transform .2s, box-shadow .2s, border-top-color .2s; }
.serv:hover { transform: translateY(-3px); border-top-color: var(--senal); box-shadow: 0 14px 30px rgb(1 26 60 / .14); }
.serv picture { aspect-ratio: 16 / 9; }
.serv img { filter: saturate(.88) contrast(1.05); }
.serv-n { display: inline-block; padding: 3px 8px; background: var(--senal); color: var(--marino); font-weight: 700; letter-spacing: .1em; }
.serv-n::before { content: "SRV · "; }
.serv h3 { font: 700 1.5rem/1.1 var(--t-titulo); text-transform: uppercase; letter-spacing: .02em; margin: 12px 0 8px; }
.serv-txt { padding: 20px 22px 14px; }
.serv-link { margin: 0; padding: 0 22px; min-height: 52px; width: 100%; border-top: 1px solid var(--borde); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--marino); }
.serv:hover .serv-link { color: var(--azul); }
.equipos { border-radius: 2px; border: 1px solid var(--borde); background: #fff; }
.equipos-t { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.equipos-lista li { border-radius: 2px; background: var(--fondo); }

/* proceso: cuatro etapas con nodo cuadrado */
.pasos li { border-radius: 2px; border: 1px solid var(--borde); border-top: 4px solid var(--marino); box-shadow: none; }
.paso-n { border-radius: 2px; background: var(--marino); color: var(--senal); width: 46px; height: 46px; font-size: 1.4rem; }
.pasos h3 { font: 700 1.3rem/1.1 var(--t-titulo); text-transform: uppercase; letter-spacing: .03em; }
.pasos li:not(:last-child)::after { border-top: 2px solid var(--marino); top: 49px; }

/* trazabilidad (fondo oscuro con cuadrícula técnica) */
.oscuro { background-image: linear-gradient(rgb(140 187 245 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(140 187 245 / .05) 1px, transparent 1px), radial-gradient(60% 80% at 100% 0%, rgb(0 73 161 / .45), transparent 70%); background-size: 48px 48px, 48px 48px, auto; }
.lista-check li::before { border-radius: 2px; }
.qr-stat { border-radius: 2px; border-top: 4px solid var(--senal); }
.tel-estado { border-radius: 8px; }

/* globo */
.globo-fila, .globo-repetir { border-radius: 2px; }

/* academia */
.acad-ventajas li { border-radius: 2px; border: 1px solid var(--borde); border-left: 4px solid var(--azul); box-shadow: none; }
.acad-intranet { border-radius: 2px; border-top: 4px solid var(--senal); box-shadow: none; }
.acad-intranet-ic { border-radius: 2px; }
.ruta-t { font-size: 1.55rem; letter-spacing: .05em; }
.ruta-t::before { content: ""; width: 14px; height: 14px; background: var(--senal); flex: none; }
.ruta-t::after { border-top: 2px solid var(--marino); opacity: .85; }
.ruta-n { border-radius: 2px; background: var(--marino); color: var(--senal); }
.curso { border-radius: 2px; border: 1px solid var(--borde); border-top: 4px solid var(--azul); box-shadow: none; transition: box-shadow .2s, transform .2s; }
.curso:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(1 26 60 / .13); }
.ruta-criticos .curso { border-top-color: var(--senal); }
.ruta-gestion .curso { border-top-color: var(--marino); }
.curso img { filter: saturate(.88) contrast(1.05); }
.cod { border-radius: 2px; background: var(--marino); color: var(--senal); font-weight: 600; letter-spacing: .06em; }
.mod { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.curso h4 { font: 700 1.35rem/1.12 var(--t-titulo); text-transform: uppercase; letter-spacing: .02em; }
.curso-ini { padding-top: 8px; border-top: 1px dashed var(--borde); }
.curso-acc { border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 4px; }
.curso-wa { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; font-weight: 700; }
.grua-bloque { border-radius: 2px; border: 1px solid var(--borde); border-left: 6px solid var(--senal); background: #fff; }
.grua-marco { border-radius: 2px; border: 1px solid var(--borde); box-shadow: none; background: var(--fondo); }
.grua-bloque h3 { text-transform: uppercase; }

/* empresa */
.galeria figure { border-radius: 2px; box-shadow: none; }
.galeria img { filter: saturate(.9) contrast(1.04); }
.galeria figcaption { border-radius: 0; background: rgb(1 26 60 / .9); border-left: 4px solid var(--senal); font-size: .8rem; letter-spacing: .02em; }

/* testimonios */
.testimonios li { border-radius: 2px; border: 1px solid var(--borde); border-left: 4px solid var(--azul); box-shadow: none; }
.t-av { border-radius: 2px; background: var(--marino); color: var(--senal); }

/* preguntas */
.faq details { border-radius: 2px; border: 1px solid var(--borde); box-shadow: none; }
.faq details[open] { border-left: 4px solid var(--senal); }
.faq summary { border-radius: 2px; }
.faq summary::after { border-radius: 2px; background: var(--marino); color: var(--senal); }

/* contacto */
.form { border-radius: 2px; border-top: 5px solid var(--senal); }
.form-t { text-transform: uppercase; letter-spacing: .03em; font-size: 1.6rem; }
.campo input, .campo select, .campo textarea { border-radius: 2px; }
.campo label { text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; font-weight: 700; }
.form-ok { border-radius: 2px; }
.cont-datos dt { color: var(--senal); }

/* pie */
.pie { background: #00112A; border-top: 6px solid var(--senal); padding-top: 56px; }
.pie-grid { border-bottom: 1px solid rgb(140 187 245 / .25); grid-template-columns: 1.3fr 1fr 1fr; }
.pie a { text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; font-weight: 600; padding: 7px 0; }
.pie-marca img { width: 170px; }

/* flotantes, chat y modal */
.flot { border-radius: 4px; }
.chat { border-radius: 4px; border-top: 4px solid var(--senal); }
.chat-av { border-radius: 2px; }
.chat-cab a, .chat-cab button { border-radius: 2px; }
.msg { border-radius: 4px; }
.chat-rapidas button { border-radius: 2px; }
.chat-in input, .chat-in button { border-radius: 2px; }
.modal { border-radius: 2px; border-top: 5px solid var(--senal); }
.modal-x { border-radius: 2px; }
.mi-res { border-radius: 2px; }
@media (max-width: 480px) { .nav-in { min-height: 64px; } .logo img { width: 88px; } .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); } }
@media (max-width: 760px) { .pie-grid { grid-template-columns: minmax(0, 1fr); } .pie-datos .pc { overflow-wrap: anywhere; } }

/* ── Marcador «dato de ejemplo» en la franja de cifras: no tapa la etiqueta (31-oct, ronda variantes) ── */
.cifras-lista dd { line-height: 1.12; margin-bottom: 2px; }
.cifras-lista dd .pc { display: inline-block; line-height: 1.12; padding: .04em .26em .02em; background: rgb(245 184 0 / .16); color: #fff; border-bottom: 2px dashed var(--senal); font-size: .8em; }
.cifras-lista div { gap: 12px; }

/* ═════ PORTADA DEFINITIVA «Panorámica» (31-oct-2026, decisión de Claudio) ═════
   Antes eran axiom-v2.css + axiom-vpro.css + axiom-v7.css (variante ?v=7), consolidadas aquí en ese orden.
   Respaldo previo: clientes/ae0031-axiom/respaldos/pre-consolidar-20261031/ */

/* — base «cinemático» (ex v2) — */
:root { --senal: #E0312B; --senal-osc: #B01E18; --rojo: #E0312B; --rojo-claro: #FF6A60; }
.btn-claro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-claro:hover { background: #FF4A41; border-color: #FF4A41; }
.btn-borde { border-color: rgb(255 255 255 / .7); }
.menu a:hover { border-bottom-color: var(--rojo); }
.nav { box-shadow: 0 2px 0 var(--marino); }

/* portada a sangre */
.hero { min-height: min(94vh, 820px); align-items: flex-end; }
.hero::before { background-image: none; }
.hero::after { background: linear-gradient(90deg, var(--rojo) 0 200px, transparent 200px); height: 4px; z-index: 4; }
@media (min-width: 901px) { .hero-foto { left: 0; width: 100%; } }
.hero-foto img { object-position: 62% 35%; filter: saturate(1) contrast(1.06); }
.hero-velo { background: linear-gradient(0deg, rgb(1 26 60 / .94) 0%, rgb(1 26 60 / .6) 38%, rgb(1 26 60 / .1) 72%), linear-gradient(90deg, rgb(1 26 60 / .55), transparent 60%); }
.hero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: clamp(80px, 12vw, 160px) clamp(110px, 12vw, 150px); }
.hero-texto { max-width: 900px; border: 0; padding-left: 0; }
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .94; max-width: 17ch; }
.hero h1 em { color: #fff; box-shadow: inset 0 -.12em 0 var(--rojo); }
.hero-bajada { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 620px; }
.sobre-claro { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; }
.punto { background: var(--rojo); }
.hero-chips .i { color: var(--rojo-claro); }
/* verificador: barra horizontal de vidrio */
.verificador { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: rgb(1 26 60 / .72); backdrop-filter: blur(10px); color: #fff; border: 1px solid rgb(140 187 245 / .3); border-top: 3px solid var(--rojo); box-shadow: none; border-radius: 2px; padding: 18px 22px; }
.verificador .verif-cab { margin: 0; flex: 0 1 auto; }
.verificador h2 { color: #fff; }
.verificador p, .verificador .verif-cab p { color: #C9D6EA; }
.verificador .verif-fila { flex: 1 1 340px; }
.verificador .verif-nota { flex-basis: 100%; margin: 0; color: #B4C3D9; }
.verificador .qr-ic { background: var(--rojo); color: #fff; }
.verificador .qr-ic svg { fill: #fff; }
.verif-fila .btn { background: var(--rojo); border-color: var(--rojo); color: #fff; }
@media (max-width: 900px) { .hero-in { margin-top: -40px; padding-block: 4px 56px; } .hero-velo { background: linear-gradient(180deg, transparent 55%, var(--marino) 100%); } .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); max-width: none; } .verificador { background: #fff; color: var(--texto); backdrop-filter: none; } .verificador h2 { color: var(--marino); } .verificador p, .verificador .verif-cab p, .verificador .verif-nota { color: var(--suave); } }

/* cifras flotantes sobre el borde del hero */
.cifras { background: transparent; margin-top: -72px; position: relative; z-index: 5; padding-bottom: 8px; }
.cifras-lista { background: var(--marino); border-top: 4px solid var(--rojo); box-shadow: 0 24px 50px rgb(1 26 60 / .35); }
.cifras-lista dd { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.cifras-lista dd::before { background: var(--rojo); width: 22px; height: 3px; margin-bottom: 10px; }
.cifras-lista dt { font-family: var(--t-datos); font-size: .72rem; letter-spacing: .1em; }
.cifras-lista dd .pc { background: rgb(255 255 255 / .1); border-bottom-color: var(--rojo-claro); }
@media (max-width: 900px) { .cifras { margin-top: 0; padding-top: 16px; } }

/* títulos de sección: barra lateral roja */
.cab, .globo-cab { border-top: 0; padding-top: 0; padding-left: 22px; border-left: 6px solid var(--marino); }
.cab::before, .globo-cab::before { display: none; }
.cab > div:first-child, .globo-cab > div:first-child { position: relative; }
.cab { border-left-color: var(--rojo); }
.globo-cab { border-left-color: var(--rojo); }
.oscuro .cab, .america .globo-cab { border-left-color: var(--rojo); border-top: 0; }
.sobre::before { background: var(--marino); color: #fff; }
.sobre-osc::before { background: var(--rojo); color: #fff; }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }

/* servicios: tarjetas marino oscuras */
.serv { background: var(--marino); color: #E7EEF9; border: 0; border-bottom: 4px solid var(--marino); box-shadow: 0 10px 26px rgb(1 26 60 / .22); }
.serv:hover { border-top: 0; border-bottom-color: var(--rojo); box-shadow: 0 18px 40px rgb(1 26 60 / .35); }
.serv h3 { color: #fff; }
.serv p { color: #C9D6EA; }
.serv-n { background: var(--rojo); color: #fff; }
.serv-link { color: #fff; border-top-color: rgb(140 187 245 / .25); }
.serv:hover .serv-link { color: var(--rojo-claro); }
.serv img { filter: saturate(.95) contrast(1.05); }
/* resto de fichas: filete azul, tags sin amarillo */
.pasos li, .curso, .testimonios li { border-top-color: var(--azul); }
.ruta-criticos .curso { border-top-color: var(--rojo); }
.cod, .paso-n, .ruta-n, .t-av, .faq summary::after { color: #fff; }
.ruta-t::before { background: var(--rojo); }
.faq details[open], .grua-bloque { border-left-color: var(--rojo); }
.form, .verificador, .modal, .chat, .qr-stat, .acad-intranet { border-top-color: var(--rojo); }
.galeria figcaption { border-left-color: var(--rojo); }
.pie { border-top-color: var(--rojo); }
.cont-datos dt { color: #FF8A82; }

/* — base «pro» (ex vpro) — */
:root { --rojo: #D42A22; --rojo-hover: #E8392F; --tinta: #071833; --linea-osc: rgb(140 187 245 / .18); --nav-alto: 72px; }

/* ── portada: se quitan capas (grilla, reglas de color, subrayado rojo) ── */
.hero { background: var(--tinta); min-height: 0; align-items: stretch; }
.hero::before, .hero::after { display: none; }
.hero-foto img { filter: none; }
.hero-texto { border: 0; padding: 0; }
.sobre-claro { gap: 12px; font: 500 .74rem/1.3 var(--t-datos); letter-spacing: .16em; color: #A9C4E8; }
.punto { width: 18px; height: 2px; border-radius: 0; background: var(--rojo); box-shadow: none; }
.hero h1 { margin: 20px 0 20px; font: 700 clamp(2.5rem, 3.9vw, 3.6rem)/1.0 var(--t-titulo); letter-spacing: .004em; text-transform: uppercase; text-wrap: balance; max-width: 19ch; }
.hero h1 em { color: var(--celeste); box-shadow: none; }
.hero-bajada { font-size: 1.04rem; line-height: 1.62; color: #C3D1E6; max-width: 54ch; margin-bottom: 30px; }
.hero .acciones { gap: 12px; }
.hero .btn { min-height: 50px; border-radius: 2px; letter-spacing: .01em; }
.btn-claro { background: var(--rojo); border-color: var(--rojo); }
.btn-claro:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); }
.btn-borde { border: 1px solid rgb(255 255 255 / .42); background: transparent; }
.btn-borde:hover { border-color: #fff; background: rgb(255 255 255 / .06); }
.hero-chips { margin-top: 24px; gap: 6px 22px; font-size: .86rem; color: #9FB3CF; }
.hero-chips .i { color: var(--celeste); width: 1em; height: 1em; }
@media (prefers-reduced-motion: no-preference) { .hero .btn { transition: background-color .2s, border-color .2s; } .hero .btn:hover { transform: none; } }

/* ── verificador: tarjeta blanca sobria, una sola fila ── */
.verificador { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 22px; background: #fff; color: var(--texto); backdrop-filter: none; border: 0; border-top: 0; border-radius: 2px; box-shadow: 0 1px 0 rgb(1 26 60 / .04), 0 18px 44px rgb(1 12 30 / .28); padding: 18px 20px; }
.verificador .verif-cab { margin: 0; display: flex; align-items: center; gap: 14px; }
.verificador .qr-ic { width: 42px; height: 42px; border-radius: 2px; background: var(--marino); }
.verificador .qr-ic svg { fill: var(--celeste); width: 22px; height: 22px; }
.verificador h2 { font: 600 1.02rem/1.2 var(--t-texto); text-transform: none; letter-spacing: 0; color: var(--marino); }
.verificador p, .verificador .verif-cab p { font-size: .84rem; line-height: 1.4; color: var(--suave); margin-top: 2px; }
.verificador .verif-fila { display: flex; gap: 8px; flex: none; }
.verif-fila input { min-height: 46px; border: 1px solid var(--borde); border-radius: 2px; font: 500 .92rem var(--t-datos); background: #F7F9FC; }
.verif-fila .btn { min-height: 46px; padding: 0 20px; border-radius: 2px; background: var(--marino); border-color: var(--marino); color: #fff; }
.verif-fila .btn:hover { background: var(--azul); border-color: var(--azul); }
.verificador .verif-nota { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid #E6EBF2; font: 400 .72rem/1.4 var(--t-datos); color: #6B7487; }
@media (max-width: 900px) {
  .verificador { grid-template-columns: 1fr; background: #fff; color: var(--texto); }
  .verificador h2 { color: var(--marino); }
  .verificador p, .verificador .verif-cab p, .verificador .verif-nota { color: var(--suave); }
}
@media (max-width: 480px) { .verificador .verif-fila { flex-direction: row; } .verif-fila .btn { padding: 0 16px; } }

/* ── cifras: sin cajas ni ticks; número fino en condensada, rótulo pequeño ── */
.cifras { margin-top: 0; padding: 0; background: #fff; border-bottom: 1px solid var(--borde); position: relative; z-index: 2; }
.cifras-lista { background: transparent; border: 0; box-shadow: none; }
.cifras-lista div { padding: 26px 28px 24px; gap: 6px; justify-content: center; }
.cifras-lista div + div { border-left: 1px solid #DDE3EC; }
.cifras-lista dd { font: 600 clamp(2rem, 2.6vw, 2.5rem)/1 var(--t-titulo); color: var(--marino); letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.cifras-lista dd::before { display: none; }
.cifras-lista dt { font: 500 .8rem/1.35 var(--t-texto); letter-spacing: .01em; text-transform: none; color: var(--suave); }
/* el dato sigue marcado como ejemplo (.pc), pero con un subrayado discreto en vez de caja */
.cifras-lista dd .pc { display: inline; font: inherit; background: none; color: inherit; padding: 0; border: 0; border-bottom: 1.5px dashed #C9A23A; line-height: inherit; }
@media (max-width: 760px) {
  .cifras-lista div { padding: 20px 16px; }
  .cifras-lista div:nth-child(3) { border-left: 0; }
  .cifras-lista div:nth-child(n+3) { border-top: 1px solid #DDE3EC !important; }
}

/* ── rojo medido en el resto de la página: barras de título y fichas en azul ── */
.cab, .globo-cab, .oscuro .cab, .america .globo-cab { border-left-color: var(--azul); }
.ruta-t::before, .serv-n { background: var(--azul); }
.faq details[open], .grua-bloque, .galeria figcaption { border-left-color: var(--azul); }
.form, .modal, .chat, .qr-stat, .acad-intranet { border-top-color: var(--azul); }
.serv:hover { border-bottom-color: var(--celeste); }
.serv:hover .serv-link { color: var(--celeste); }
.pie { border-top-color: var(--azul); }
.cont-datos dt { color: var(--celeste); }
.menu a:hover { border-bottom-color: var(--azul); }

/* ── globo: pie común (cifra 23 países) ── */
.cifras-globo .globo-mapa { margin: 0; }
.cifras-globo .globo-pista, .cifras-globo .globo-paneles { display: none !important; }
.globo-repetir { min-height: 36px; padding: 0 12px; border-radius: 2px; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .globo-repetir { display: none !important; } }

/* ── sección 04: directorio de países, sin globo (igual que v4) ── */
.globo-en-hero .america { padding-block: clamp(36px, 4.5vw, 64px); }
.globo-en-hero .america .globo-cab { margin-bottom: 26px; }
.globo-en-hero .america .globo-paneles { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px 32px; }
.globo-en-hero .america .globo-panel { position: static; width: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; }
.globo-en-hero .america .globo-panel ul { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.globo-en-hero .america .globo-fila { min-height: 36px; }
@media (min-width: 900px) { .globo-en-hero .america .globo-panel ul { grid-template-columns: 1fr; } }
.globo-en-hero .america .globo-nota { text-align: left; }
.globo-en-hero .america .globo-acc .globo-repetir { display: none; }
/* evita desborde a 390 px: los hijos del grid pueden encogerse y la nota mono corta donde haga falta */
.verificador > * { min-width: 0; }
.verificador .verif-nota { overflow-wrap: anywhere; }
@media (max-width: 480px) { .verificador { padding: 16px; } .verif-fila input { padding: 0 10px; font-size: .86rem; } }

/* — Panorámica (ex v7) — */
@media (min-width: 901px) {
  .hero { display: block; min-height: 0; }
  .hero-foto { left: 37%; right: 0; width: auto; }
  .hero-foto img { object-position: 25% 40%; }
  .hero-velo { background: linear-gradient(90deg, var(--tinta) 0%, var(--tinta) 40%, rgb(7 24 51 / .6) 44%, rgb(7 24 51 / 0) 52%), linear-gradient(0deg, rgb(7 24 51 / .55) 0%, rgb(7 24 51 / 0) 26%); }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; padding-block: clamp(40px, 4.2vw, 60px) clamp(40px, 4.6vw, 68px); }
  .hero-chips { display: none; }
  .hero-texto { max-width: min(520px, 38vw); }
  /* verificador a la derecha, sobre la foto (suelo/chaleco), sin tapar la cara ni el logo de la grúa */
  .hero { min-height: min(44.8vw, 700px); }
  .hero-in { min-height: inherit; }
  .verificador { position: absolute; right: 0; bottom: clamp(24px, 2.4vw, 34px); width: min(400px, 31vw); min-width: 340px; grid-template-columns: 1fr; gap: 10px; box-shadow: 0 18px 44px rgb(1 12 30 / .45); }
  .verificador .verif-cab p { display: none; }
  .hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .verificador { padding: 14px 16px 10px; }
  .verificador .verif-nota { padding-top: 8px; }
}
/* franja de cifras marina con el globo como emblema */
.cifras { background: var(--tinta); border-bottom: 1px solid var(--linea-osc); border-top: 1px solid var(--linea-osc); }
.cifras .contenedor { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; column-gap: 28px; }
.cifras-lista dd { color: #fff; }
.cifras-lista dt { color: #9FB3CF; }
.cifras-lista div + div { border-left-color: var(--linea-osc); }
.cifras-lista dd .pc { border-bottom: 0; }
.cifras-globo { position: relative; z-index: 3; width: 250px; margin-top: -112px; margin-bottom: 10px; }
.cifras-globo .globo-svg { filter: drop-shadow(0 10px 24px rgb(0 0 0 / .35)); }
@media (max-width: 900px) {
  .hero { display: block; }
  .hero-foto { position: relative; aspect-ratio: 16 / 12; max-height: 58vh; height: auto; }
  .hero-foto img { position: absolute; object-position: 30% 20%; }
  .hero-velo { top: 0; height: min(75vw, 58vh); background: linear-gradient(180deg, rgb(7 24 51 / 0) 60%, var(--tinta) 100%); }
  .hero-in { margin-top: -18px; padding-block: 0 72px; gap: 26px; }
  .hero h1 { font-size: clamp(2.25rem, 10vw, 3rem); max-width: none; margin: 16px 0; }
  .cifras .contenedor { grid-template-columns: 1fr; }
  .cifras-globo { width: 190px; margin: -80px auto 0; }
  .cifras-lista div:nth-child(n+3) { border-top-color: var(--linea-osc) !important; }
}
/* EN tiene un titular más largo: un punto menos para que siga en 3 líneas y las cifras queden sobre el pliegue */
@media (min-width: 901px) { html[lang="en"] .hero h1 { font-size: clamp(2.2rem, 3.05vw, 2.9rem); } }
/* móvil: el verificador vuelve a su sitio, bajo los botones */
@media (max-width: 900px) { .verificador { position: static; width: auto; min-width: 0; } }

/* Transición marino→foto (31-oct-2026, elegida por Claudio: antes «t=4»): foto a sangre completa, velo marino de izquierda a derecha, texto encima. Solo escritorio. */
@media (min-width: 901px) {
  .hero-foto { left: 0; right: 0; overflow: hidden; }
  .hero-foto img { left: 32.85%; right: auto; width: auto; height: 100%; aspect-ratio: 16 / 9; max-width: none; object-fit: cover; object-position: 0 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
  .hero-velo { background: linear-gradient(90deg, var(--tinta) 0%, rgb(7 24 51 / .93) 30%, rgb(7 24 51 / .72) 40%, rgb(7 24 51 / .3) 50%, rgb(7 24 51 / 0) 62%), linear-gradient(0deg, rgb(7 24 51 / .55) 0%, rgb(7 24 51 / 0) 26%); }
}

/* encabezados de sección sin barra lateral (31-oct): título alineado con las tarjetas */
.cab, .globo-cab, .oscuro .cab, .america .globo-cab { border-left: 0; padding-left: 0; }
/* la sombra del globo no se derrama bajo la franja de cifras (solo se recorta por abajo) */
.cifras { clip-path: inset(-300px -100px 0 -100px); }

/* «Leer más» (31-oct): enlace secundario, aún sin destino (aria-disabled). Conectar: ver FICHA. */
.curso-mas { display: inline-flex; align-items: center; min-height: 42px; padding: 0 4px; font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texto, inherit); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: default; }
.curso-mas:hover { text-decoration-thickness: 2px; }
.curso-mas:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ═════ «CÓMO TRABAJAMOS» ANIMADO (31-oct-2026) ═════
   Una sola versión (01-nov: alt. 1 riel y alt. 2 planta isométrica eliminadas; respaldo respaldos/pre-globocarrusel-20261101): [data-proc="3"] hoja de vida.
   Por defecto (sin .anim) todo se ve en su ESTADO FINAL: así quedan sin JS y con movimiento reducido.
   .anim = el motor está corriendo: lo que aún no tiene .on se oculta; solo se animan transform/opacity (y trazos SVG). */
.proc { --ease: cubic-bezier(.65, 0, .35, 1); --mov: .7s; position: relative; }
.proc.quieto, .proc.quieto * { transition: none !important; }
.proc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.proc-pasos { list-style: none; margin: 0; padding: 0; }
.pp { position: relative; }
.pp h3 { margin: 0 0 6px; font: 700 1.22rem/1.1 var(--t-titulo); text-transform: uppercase; letter-spacing: .03em; color: var(--texto); }
.pp p { margin: 0; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.pp-n { display: block; font: 600 .72rem/1 var(--t-datos); letter-spacing: .14em; color: var(--azul); }
.pp-nodo { position: relative; display: grid; place-items: center; }
.pp-nodo svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.pp-nodo svg * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .75s var(--ease) .1s; }
.pp-txt { transition: opacity .5s; }
.proc.anim .pp:not(.on) .pp-txt { opacity: .4; }
.proc.anim .pp:not(.on) .pp-nodo svg * { stroke-dashoffset: 1; }
.proc .pc { display: inline; font: inherit; background: none; color: inherit; padding: 0; border: 0; border-bottom: 1.5px dashed #C9A23A; border-radius: 0; }
.proc-ctrl { display: flex; justify-content: flex-end; min-height: 40px; margin-top: 18px; }
.proc-repetir { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 2px; background: #fff; color: var(--marino); font: 600 .74rem/1 var(--t-datos); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; animation: proc-aparece .4s ease-out; }
.proc-repetir svg { width: 16px; height: 16px; }
.proc-repetir:hover { border-color: var(--azul); color: var(--azul); }
.proc-repetir:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.proc-repetir[hidden] { display: none; }
@keyframes proc-aparece { from { opacity: 0; transform: translateY(6px); } }
@keyframes proc-pulso { 0% { opacity: .95; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes proc-scan { 0% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; transform: translateY(var(--scan, 80px)); } 100% { opacity: 0; transform: translateY(var(--scan, 80px)); } }
@keyframes proc-titila { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.estado-ok-punto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #7CF0AE; box-shadow: 0 0 0 4px rgb(124 240 174 / .22); }

/* ── alt. 3 · HOJA DE VIDA EN PAPEL + CAMINO EN ZIGZAG (31-oct-2026, «folleto») ──
   La ficha es un papel impreso (crema, grano, relieve, esquina doblada, pliegues de tríptico, filetes dobles,
   folio rojo, sellos de goma con tinta irregular). Los 5 pasos alternan izquierda/derecha de un camino serpenteante:
   proceso.js arma el trazado por los centros de los nodos; la tinta se dibuja con stroke-dashoffset y la pluma
   (marcador) lo recorre con transform. Sin JS el camino no se muestra (la lista sigue legible). */
.proc[data-proc="3"] {
  --papel: #F7F3E9; --tinta: #0B2347; --tinta-gris: #5A6478; --tinta-azul: #1D4F9A; --tinta-roja: #C42A22; --proc-fondo: var(--banda);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .18 0 0 0 .5 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mancha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
.proc[data-proc="3"] .proc-cuerpo { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(28px, 4vw, 60px); align-items: center; }

/* papel */
.pv3 { position: relative; padding: 4px 2px 12px; }
.pv3-hoja { position: relative; padding: 13px; color: var(--tinta);
  background: var(--grano), linear-gradient(158deg, #FCFAF4 0%, var(--papel) 42%, #EEE7D7 100%);
  box-shadow: 0 1px 1px rgb(70 52 20 / .14), 0 3px 6px rgb(70 52 20 / .08), 0 30px 48px -26px rgb(1 26 60 / .5), inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 70px rgb(150 120 70 / .1); }
.pv3-hoja::before { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; z-index: 4; background: linear-gradient(225deg, var(--proc-fondo) 50%, transparent 50%); }
.pv3-hoja::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; z-index: 5; background: linear-gradient(45deg, #E2D8C2 0%, #FAF6EC 49.4%, transparent 50%); filter: drop-shadow(-2px 2px 2px rgb(70 52 20 / .28)); }
.pv3-pliegues { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(33.3% - 14px), rgb(255 255 255 / .38) calc(33.3% - 1px), rgb(90 66 30 / .16) 33.3%, rgb(90 66 30 / .05) calc(33.3% + 5px), transparent calc(33.3% + 16px)),
    linear-gradient(180deg, transparent calc(66.6% - 14px), rgb(90 66 30 / .06) calc(66.6% - 2px), rgb(90 66 30 / .15) 66.6%, rgb(255 255 255 / .34) calc(66.6% + 1px), transparent calc(66.6% + 14px)),
    linear-gradient(180deg, transparent 33.3%, rgb(90 66 30 / .025) 33.3% 66.6%, transparent 66.6%); }
.pv3-marco { position: relative; padding: 18px 22px 18px; border: 3px double rgb(11 35 71 / .62); }
.pv3-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 14px; padding: 0 30px 12px 0; }
.pv3-marca { font: 700 1.6rem/1 var(--t-titulo); letter-spacing: .24em; color: var(--tinta); }
.pv3-emisor { grid-row: 2; font: 500 .62rem/1.4 var(--t-datos); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-gris); }
.pv3-folio { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 .8rem/1 var(--t-datos); letter-spacing: .04em; color: var(--tinta-roja); }
.pv3-tit { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding-top: 12px; font: 700 1.05rem/1.1 var(--t-titulo); letter-spacing: .26em; text-transform: uppercase; text-align: center; color: var(--tinta); }
.pv3-tit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-top: 1px solid rgb(11 35 71 / .55); background: repeating-linear-gradient(45deg, rgb(29 79 154 / .2) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgb(29 79 154 / .14) 0 1px, transparent 1px 5px); }
.pv3-tit::after, .pv3-tit span::before { content: ""; flex: 1; height: 0; border-top: 1px solid rgb(11 35 71 / .5); }
.pv3-tit span { display: contents; }
.pv3-tit span::before { order: -1; }
.pv3-cuerpo { position: relative; }
.pv3-fila, .pv3-insp { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; padding: 11px 0 9px; border-bottom: 1px dotted rgb(11 35 71 / .38); }
.pv3-k { font: 500 .64rem/1.8 var(--t-datos); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-gris); }
.pv3-v { font: 600 1rem/1.45 var(--t-texto); color: var(--tinta); transition: opacity .4s calc(var(--d, 0) * .18s), transform .5s var(--ease) calc(var(--d, 0) * .18s); }
.pv3-mono { font: 500 .9rem/1.6 var(--t-datos); }
.pv3-fila[style] .pv3-v { --d: 1; }
.pv3-cert .pv3-v { --d: 0; position: relative; justify-self: start; }
/* N.º de certificado «se imprime» de izquierda a derecha (tapa de papel que se retira a saltos, tipo máquina) */
.pv3-cert .pv3-v::after { content: ""; position: absolute; inset: 0 -2px; background: #F5F0E4; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .6s steps(11, end) .15s; }
.proc.anim .pv3-cert:not(.sub-on) .pv3-v::after { transform: scaleX(1); transition: none; }
/* marcador ámbar sobre la parte de la hoja que se está completando (subfase activa del paso 02) */
.pv3-insp, .pv3-cert { position: relative; }
.pv3-insp::before, .pv3-cert::before { content: ""; position: absolute; inset: 3px -10px; border-left: 3px solid #F5B800; background: rgb(245 184 0 / .15); mix-blend-mode: multiply; opacity: 0; transition: opacity .6s; pointer-events: none; }
.proc.anim .pv3-insp.sub-act::before, .proc.anim .pv3-cert.sub-act::before { opacity: 1; }
.proc.anim .pv3-fila:not(.on) .pv3-v { opacity: 0; transform: translateX(-10px); }
.pv3-chk { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 0; padding: 0; list-style: none; }
.pv3-chk li { display: flex; align-items: center; gap: 9px; font-size: .88rem; line-height: 1.3; color: var(--tinta); }
.pv3-chk i { position: relative; flex: none; width: 15px; height: 15px; border: 1.3px solid rgb(11 35 71 / .75); }
.pv3-chk svg { position: absolute; left: 0; top: -6px; width: 21px; height: 21px; overflow: visible; fill: none; stroke: var(--tinta-azul); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease-out calc(var(--d) * .3s + .2s); }
.proc.anim .pv3-insp:not(.sub-on) .pv3-chk svg { stroke-dashoffset: 1; transition: none; }
/* sello APROBADO: goma redonda, tinta azul irregular */
.pv3-sello { position: absolute; right: 8px; bottom: -52px; width: 100px; height: 100px; display: grid; place-items: center; color: var(--tinta-azul); opacity: .9; transform: rotate(-13deg); mix-blend-mode: multiply; -webkit-mask-image: var(--mancha); mask-image: var(--mancha); transition: opacity .1s .85s, transform .32s cubic-bezier(.3, 1.45, .55, 1) .85s; pointer-events: none; }
.pv3-sello svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; }
.pv3-sello .fino { stroke-width: 1; }
.pv3-sello text { fill: currentColor; stroke: none; font: 600 9.6px/1 var(--t-datos); letter-spacing: .06em; }
.pv3-sello-t { position: relative; padding: 3px 7px 2px; border-block: 2px solid currentColor; background: var(--papel); font: 700 1.05rem/1 var(--t-titulo); letter-spacing: .1em; }
.proc.anim .pv3-sello:not(.sub-on) { opacity: 0; transform: rotate(-4deg) scale(1.65); transition: none; }
/* pie: QR impreso + estado con timbre VIGENTE */
.pv3-pie { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgb(11 35 71 / .5); }
.pv3-qr { position: relative; width: 104px; height: 104px; padding: 5px; overflow: hidden; color: var(--tinta); outline: 1px solid rgb(11 35 71 / .3); outline-offset: 3px; --scan: 100px; transition: opacity .3s .1s, outline-color .5s; }
.pv3-qr svg { display: block; width: 100%; height: 100%; }
.pv3-qr::after { content: ""; position: absolute; inset: 0; background: var(--papel); transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1s steps(12, end) .5s; }
.proc.anim .pv3-qr:not(.sub-on) { opacity: .2; }
.proc.anim .pv3-qr.sub-act { outline-color: #F5B800; outline-width: 2px; }
.proc.anim .pv3-qr:not(.sub-on)::after { transform: scaleY(1); transition: none; }
.proc.anim .pv3-laser.act { animation: proc-scan .9s var(--ease) .15s both; }
.pv3-estado { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.pv3-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 46px; }
.pv3-pend { position: relative; padding: 6px 10px; border: 1px dashed rgb(11 35 71 / .45); color: var(--tinta-gris); font: 500 .72rem/1 var(--t-datos); letter-spacing: .1em; text-transform: uppercase; opacity: .5; transition: opacity .3s 1.15s; }
.pv3-pend::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; background: var(--tinta-gris); transform-origin: 0 50%; transition: transform .3s ease-out 1.05s; }
.pv3-ok { padding: 6px 14px 4px; border: 3px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; color: var(--tinta-roja); font: 700 1.65rem/1 var(--t-titulo); letter-spacing: .16em; opacity: .92; transform: rotate(-7deg); mix-blend-mode: multiply; -webkit-mask-image: var(--mancha); mask-image: var(--mancha); -webkit-mask-size: 170px; mask-size: 170px; transition: opacity .1s 1.15s, transform .3s cubic-bezier(.3, 1.45, .55, 1) 1.15s; }
.pv3-vence { font: 500 .78rem/1.2 var(--t-datos); color: var(--tinta); transition: opacity .4s 1.5s; }
.pv3-url { font: 500 .68rem/1.2 var(--t-datos); color: var(--tinta-gris); overflow-wrap: anywhere; }
.proc.anim .pv3-pend:not(.on) { opacity: 1; transition: none; }
.proc.anim .pv3-pend:not(.on)::after { transform: scaleX(0); transition: none; }
.proc.anim .pv3-ok:not(.on) { opacity: 0; transform: rotate(-2deg) scale(1.7); transition: none; }
.proc.anim .pv3-vence:not(.on) { opacity: 0; transition: none; }
.proc .pv3 .pc { border-bottom-color: #B98A00; }

/* camino en zigzag */
.proc[data-proc="3"] .proc-lista { position: relative; }
.pv3-camino { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pv3-camino:not(.listo) { display: none; }
.pv3-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.pv3-guia { fill: none; stroke: #9DAAC0; stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.pv3-tinta { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linecap: round; }
.pv3-fin { fill: var(--marino); opacity: 0; transition: opacity .4s .3s; }
.proc.fin .pv3-fin { opacity: 1; }
.pv3-pluma { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--rojo); border: 3px solid #fff; box-shadow: 0 0 0 4px rgb(224 49 43 / .18), 0 3px 8px rgb(1 26 60 / .35); will-change: transform; transition: opacity .4s .2s; }
.proc.fin .pv3-pluma { opacity: 0; }
/* pasos grandes (01-nov): 3 pasos, nodo 76 px, número 01–03 grande, título y texto legibles, mucho aire entre pasos */
.proc[data-proc="3"] .proc-pasos { position: relative; z-index: 1; display: grid; gap: clamp(96px, 8vw, 140px); padding: 8px 0 54px; }
.proc[data-proc="3"] .pp { display: grid; column-gap: 22px; align-items: center; width: 72%; }
.proc[data-proc="3"] .pp:nth-child(odd) { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: "n nodo" "txt nodo"; text-align: right; }
.proc[data-proc="3"] .pp:nth-child(even) { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "nodo n" "nodo txt"; margin-left: 28%; }
.proc[data-proc="3"] .pp-nodo { grid-area: nodo; align-self: center; width: 76px; height: 76px; background: var(--marino); border: 1.5px solid var(--marino); border-radius: 2px; color: #fff; transition: background-color .4s, color .4s, border-color .4s; }
.proc[data-proc="3"] .pp-nodo svg { width: 42px; height: 42px; stroke-width: 2.4; }
.proc[data-proc="3"] .pp-nodo::before { content: ""; position: absolute; inset: -8px; border: 2px solid var(--rojo); opacity: 0; pointer-events: none; }
.proc.anim[data-proc="3"] .pp:not(.on) .pp-nodo { background: #F4F6F9; border-color: #B9C6D8; color: #9AA9BE; }
.proc[data-proc="3"] .pp.act .pp-nodo { background: var(--rojo); border-color: var(--rojo); }
.proc.anim[data-proc="3"] .pp.act .pp-nodo::before { animation: proc-pulso 1.3s var(--ease) infinite; }
.proc[data-proc="3"] .pp-n { grid-area: n; align-self: end; margin: 0 0 6px; font: 700 1.7rem/1 var(--t-titulo); letter-spacing: .04em; color: var(--azul); }
.proc[data-proc="3"] .pp-txt { grid-area: txt; align-self: start; }
.proc[data-proc="3"] .pp h3 { margin-bottom: 8px; font-size: clamp(1.5rem, 1.9vw, 1.8rem); }
.proc[data-proc="3"] .pp p { font-size: 1.06rem; line-height: 1.55; color: #3A4659; }
.proc[data-proc="3"] .pp:nth-child(odd) .pp-txt { padding-left: 4%; }
/* viñetas del paso 02 (01-nov, 2.ª versión): una sola sección con 3 partes que aparecen EN SECUENCIA (data-sub 1·2·3), cada una con
   su mini animación de ícono, sincronizadas con la hoja: a) tablilla: la lupa recorre y se tildan los checks; b) el informe sale de
   la impresora y recibe su timbre; c) la etiqueta QR baja y se pega. Mientras ocurre: texto pleno + marcador ámbar; después queda
   todo visible. Sin .anim (sin JS / movimiento reducido) = estado final. Solo transform, opacity y stroke-dashoffset. */
.pp-vi { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.pp-vi li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 8px 5px 0; font-size: 1.02rem; line-height: 1.45; color: #2A3548; }
.pp-vi li::before { content: ""; position: absolute; inset: 0 -6px 0 -10px; border-left: 3px solid #F5B800; background: linear-gradient(90deg, rgb(245 184 0 / .17), rgb(245 184 0 / .05)); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: transform .45s var(--ease), opacity .6s; pointer-events: none; }
.proc.anim .pp-vi li.sub-act::before { transform: scaleX(1); opacity: 1; }
.vi-t { position: relative; transition: opacity .45s; }
.proc.anim .pp-vi li:not(.sub-on) .vi-t { opacity: .36; }
.vi-ic { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--marino); border-radius: 2px; background: #fff; color: var(--marino); transition: color .4s, border-color .4s, background-color .4s; }
.vi-ic svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vi-ic svg * { transform-box: fill-box; }
.proc.anim .pp-vi li:not(.sub-on) .vi-ic { color: #9AA9BE; border-color: #C3CEDD; background: #F4F6F9; }
.proc.anim .pp-vi li.sub-act .vi-ic { color: #fff; border-color: var(--azul); background: var(--azul); }
/* a) tablilla + lupa */
.vi-ln { opacity: .55; }
.vi-chk { stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .3s ease-out calc(.3s + var(--i) * .42s); }
.proc.anim .vi-a:not(.sub-on) .vi-chk { stroke-dashoffset: 1; transition: none; }
.vi-lupa { transform-origin: 50% 50%; }
.proc.anim .vi-a.sub-act .vi-lupa { animation: vi-lupa 1.5s var(--ease) both; }
@keyframes vi-lupa { 0% { transform: translate(-4px, -13px); } 30% { transform: translate(-2px, -12px); } 55% { transform: translate(-1px, -6px); } 100% { transform: translate(0, 0); } }
/* b) impresora: el informe se desliza fuera de la ranura y recibe su timbre */
.vi-impr { fill: currentColor; fill-opacity: .12; }
.vi-doc { transition: transform .9s cubic-bezier(.3, .7, .3, 1) .1s; }
.proc.anim .vi-b:not(.sub-on) .vi-doc { transform: translateY(-18px); transition: none; }
.vi-timbre { fill: currentColor; stroke: none; transform-origin: 50% 50%; transition: transform .28s cubic-bezier(.3, 1.6, .55, 1) .95s, opacity .1s .95s; }
.proc.anim .vi-b:not(.sub-on) .vi-timbre { opacity: 0; transform: scale(2.2); transition: none; }
/* c) etiqueta: baja girada, se aprieta contra el equipo y aparece su QR */
.vi-base { opacity: .5; }
.vi-tag { transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.3, 1.35, .55, 1), opacity .2s; }
.proc.anim .vi-c:not(.sub-on) .vi-tag { opacity: 0; transform: translate(4px, -9px) rotate(-16deg) scale(1.14); transition: none; }
.vi-qr { fill: currentColor; stroke: none; transition: opacity .35s .55s; }
.proc.anim .vi-c:not(.sub-on) .vi-qr { opacity: 0; transition: none; }
.proc.anim .vi-c.sub-act .vi-tag { animation: vi-pega .5s ease-out .5s; }
@keyframes vi-pega { 40% { transform: scale(.93, .96); } }
@media (max-width: 900px) {
  .proc[data-proc="3"] .proc-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .proc[data-proc="3"] .pv3 { order: -1; max-width: 600px; }
}
@media (max-width: 760px) {
  .pv3-hoja { padding: 9px; }
  .pv3-marco { padding: 14px 14px 14px; }
  .pv3-cab { padding-right: 26px; }
  .pv3-marca { font-size: 1.35rem; }
  .pv3-folio { grid-row: 3; grid-column: 1; margin-top: 6px; }
  .pv3-tit { font-size: .92rem; letter-spacing: .18em; gap: 8px; }
  .pv3-fila, .pv3-insp { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pv3-chk { grid-template-columns: minmax(0, 1fr); }
  .pv3-sello { width: 92px; height: 92px; right: -2px; bottom: -8px; }
  .pv3-sello-t { font-size: .88rem; padding: 2px 5px 1px; }
  .pv3-qr { width: 88px; height: 88px; --scan: 84px; }
  .pv3-pie { gap: 16px; }
  .pv3-ok { font-size: 1.35rem; }
  .proc[data-proc="3"] .pp, .proc[data-proc="3"] .pp:nth-child(odd), .proc[data-proc="3"] .pp:nth-child(even) { width: auto; margin-left: 0; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "nodo n" "nodo txt"; column-gap: 12px; text-align: left; padding: 0; align-items: start; }
  .proc[data-proc="3"] .pp:nth-child(odd) .pp-txt { padding-left: 0; }
  .proc[data-proc="3"] .proc-pasos { gap: 44px; padding: 20px 0 46px; }
  .proc[data-proc="3"] .pp-nodo { align-self: start; width: 58px; height: 58px; justify-self: start; }
  .proc[data-proc="3"] .pp:nth-child(even) .pp-nodo { justify-self: end; }
  .proc[data-proc="3"] .pp-nodo svg { width: 32px; height: 32px; }
  .proc[data-proc="3"] .pp-n { font-size: 1.4rem; margin-top: 4px; }
  .proc[data-proc="3"] .pp h3 { font-size: 1.38rem; }
  .proc[data-proc="3"] .pp p, .pp-vi li { font-size: 1rem; }
  .pp-vi li { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .vi-ic { width: 34px; height: 34px; }
  .vi-ic svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .proc-repetir { display: none !important; } }

/* ═════ PORTADA A TODO EL ANCHO (01-nov-2026) ═════
   Foto a sangre hasta el borde derecho en cualquier ancho: la caja de la foto crece (16:9, anclada arriba) y se recorta por abajo,
   así la cara y el logo de la grúa (arriba, 5–45 % del alto) quedan enteros. Menú, texto, verificador y cifras usan un contenedor
   más ancho (--ancho-p); el texto sigue en columna legible (520 px, bajada 54ch). Solo escritorio: ≤900 px no cambia. */
@media (min-width: 901px) {
  .hero { --hh: min(44.8vw, max(700px, 31vw)); min-height: var(--hh); }
  .hero-foto img { top: 0; bottom: auto; width: max(calc(var(--hh) * 16 / 9), 67.15%); height: auto; min-height: 100%; aspect-ratio: 16 / 9; object-position: 50% 0; }
  .nav-acc { margin-left: auto; }
  .menu { margin-right: 0; }
  .nav-in, .hero-in, .cifras .contenedor { width: min(100% - 2 * clamp(24px, 4vw, 96px), 1880px); }
  .cifras { --globo: clamp(250px, 13vw, 340px); }
  .cifras .contenedor { grid-template-columns: var(--globo) minmax(0, 1fr); }
  .cifras-globo { width: var(--globo); margin-top: calc(var(--globo) * -.448); }
}

/* ═════ GLOBO INTERACTIVO + MÁS GRANDE (01-nov-2026) ═════
   Cada país del globo de la portada: cursor/toque/teclado → línea roja que se dibuja hacia afuera y bandera + nombre al final
   (globo.js, capa .ge-capa). Reemplaza a las 4 banderas fijas. El globo crece hacia el espacio libre de la derecha/arriba:
   columna = --gizq (aire para las etiquetas del lado izquierdo) + --globo; cuánto sube lo calcula globo.js (--globo-sube)
   para quedar siempre bajo los botones (o el verificador en móvil). */
.ge-capa { position: absolute; inset: 0; pointer-events: none; }
.ge-capa[hidden] { display: none; }
.ge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ge-linea { fill: none; stroke: var(--rojo); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .16s ease-in; }
.ge-fin { fill: var(--rojo); opacity: 0; transition: opacity .12s; }
.ge-onda { fill: none; stroke: var(--rojo-claro); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ge-et { position: absolute; left: 0; top: 0; width: max-content; display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px; background: rgb(1 20 46 / .94); border: 1px solid rgb(140 187 245 / .4); border-left: 3px solid var(--rojo); border-radius: 2px; box-shadow: 0 10px 24px rgb(0 0 0 / .4); color: #fff; font: 700 1rem/1 var(--t-titulo); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .14s, transform .14s; }
.ge-et.izq { border-left: 1px solid rgb(140 187 245 / .4); border-right: 3px solid var(--rojo); padding: 6px 7px 6px 12px; flex-direction: row-reverse; transform: translateX(8px); }
.ge-et img { width: 26px; height: 18px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .55); }
.ge-capa.on .ge-linea { stroke-dashoffset: 0; transition: stroke-dashoffset .42s cubic-bezier(.25, .7, .3, 1); }
.ge-capa.on .ge-fin { opacity: 1; transition: opacity .1s .38s; }
.ge-capa.on .ge-onda { animation: ge-onda 1.6s ease-out infinite; }
.ge-capa.on .ge-et { opacity: 1; transform: none; transition: opacity .24s .34s, transform .32s .34s cubic-bezier(.2, .8, .3, 1); }
.ge-capa.reinicio *, .ge-capa.reinicio .ge-et { transition: none !important; animation: none !important; }
@keyframes ge-onda { 0% { opacity: .95; transform: scale(.5); } 100% { opacity: 0; transform: scale(2); } }
/* botones invisibles sobre cada punto: solo para teclado y lectores (el puntero usa el país más cercano, zona ≥ 24 px) */
.ge-botones { position: absolute; inset: 0; }
.ge-bt { position: absolute; left: 0; top: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: none; cursor: pointer; }
.ge-bt:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--rojo); }
@media (prefers-reduced-motion: reduce) {
  .ge-linea, .ge-fin, .ge-et, .ge-capa.on .ge-linea, .ge-capa.on .ge-fin, .ge-capa.on .ge-et { transition: none !important; }
  .ge-capa.on .ge-onda { animation: none; }
}
.cifras-globo { margin-top: calc(-1 * var(--globo-sube, 80px)); }
@media (min-width: 901px) {
  .cifras { --globo: clamp(250px, 46vw - 330px, 400px); --gizq: clamp(0px, 25vw - 260px, 150px); }
  /* columnas de cifras a la medida de su rótulo (con el globo más ancho, «Equipos y aparejos certificados» no se parte) */
  .cifras-lista { grid-template-columns: repeat(4, minmax(0, auto)); }
  .cifras .contenedor { grid-template-columns: calc(var(--globo) + var(--gizq)) minmax(0, 1fr); }
  .cifras-globo { width: var(--globo); margin-left: var(--gizq); margin-top: calc(-1 * var(--globo-sube, var(--globo) * .45)); }
  .ge-et { font-size: clamp(1rem, .55vw + .5rem, 1.15rem); }
}
@media (max-width: 900px) {
  .cifras-globo { width: 240px; margin: calc(-1 * var(--globo-sube, 40px)) auto 0; }
  .cifras { clip-path: inset(-400px 0 0 0); }
}

/* ═════ CARRUSEL DE SERVICIOS · CINTA CONTINUA (01-nov-2026) ═════
   Sin JS: fila con scroll-snap nativo. Con JS (axiom.js): .carr-vp = visor (overflow hidden) y la fila .carr-js se
   mueve con transform (marquee infinito, copias inertes). Flechas, pausa y arrastre; sin puntos. ~3 tarjetas / 2,2 / 1,2. */
.servicios { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 30px; margin: -8px 0 -30px; }
.servicios::-webkit-scrollbar { display: none; }
.servicios > .serv { scroll-snap-align: start; }
.servicios img { -webkit-user-drag: none; user-select: none; }
.servicios.carr-js { overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; will-change: transform; }
.carr-vp { overflow: hidden; padding: 8px 0 30px; margin: -8px 0 -30px; touch-action: pan-y; cursor: grab; }
.carr-vp.arrastrando { cursor: grabbing; user-select: none; }
/* a sangre (01-nov): ancho y desfase los pone axiom.js; extremos con desvanecido en vez de corte seco */
.carr-vp { --carr-fade: 24px; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--carr-fade), #000 calc(100% - var(--carr-fade)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--carr-fade), #000 calc(100% - var(--carr-fade)), transparent 100%); }
.servicios.carr-js { max-width: none; }
.carr-vp.arrastrando .serv { pointer-events: none; }
@media (max-width: 1000px) { .servicios { grid-template-columns: none; grid-auto-columns: calc((100% - 20px) / 2.2); } }
@media (max-width: 640px) { .servicios { grid-template-columns: none; grid-auto-columns: 80%; gap: 14px; } }

.carr-ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 22px; }
.carr-ctrl[hidden] { display: none; }
.carr-flechas { display: flex; gap: 8px; }
.carr-flecha { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--marino); border-radius: 2px; background: #fff; color: var(--marino); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.carr-flecha svg { width: 20px; height: 20px; }
.carr-flecha.atras svg { transform: scaleX(-1); }
.carr-flecha:hover:not(:disabled) { background: var(--marino); color: #fff; }
.carr-flecha:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.carr-flecha:disabled { opacity: .35; cursor: default; }

.carr-pausa svg { width: 18px; height: 18px; fill: currentColor; }
.carr-pausa .ico-play, .carr-pausa.pausado .ico-pausa { display: none; }
.carr-pausa.pausado .ico-play { display: inline; }
.carr-pausa[hidden] { display: none; }
@media (max-width: 640px) { .carr-flechas { gap: 6px; } .carr-flecha { width: 44px; height: 44px; } }

/* ═════ MENÚ MÁS GRANDE (01-nov-2026) ═════
   Barra de ~90 px en escritorio y logo más grande. El logo del cliente solo existe a 369 px (subtítulo de ~11 px de alto en la
   fuente): a tamaño de menú quedaba ilegible, así que se usa el símbolo + «AXIOM» recortado (img/r/logo-marca-369.webp, sin la
   franja inferior) y «Training & Consulting» va como TEXTO vivo con sus dos filetes azules, igual que en el original. */
html { scroll-padding-top: 106px; }
.nav-in { min-height: 90px; padding-block: 2px; }
.logo { display: inline-flex; flex-direction: column; align-items: stretch; flex: none; text-decoration: none; line-height: 0; }
.logo img { display: block; width: 116px; height: auto; }
.logo-sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 700 9.5px/1 var(--t-titulo); letter-spacing: .13em; text-transform: uppercase; color: #011A3C; white-space: nowrap; }
.logo-sub::before, .logo-sub::after { content: ""; flex: 1 1 0; min-width: 4px; height: 1.5px; background: #4371B5; }
.menu a { font-size: .92rem; padding: 14px 14px 12px; }
.idioma button { min-width: 46px; min-height: 44px; font-size: .86rem; }
.nav-intranet { min-height: 46px; font-size: .86rem; }
.nav-acc .btn-chico { min-height: 48px; padding: 0 22px; font-size: .88rem; }
@media (max-width: 1180px) and (min-width: 961px) { .menu a { padding-inline: 10px; font-size: .86rem; } .logo img { width: 112px; } }
@media (max-width: 960px) { .nav-in { min-height: 82px; } .logo img { width: 108px; } .logo-sub { font-size: 8.6px; } .menu a { font-size: .95rem; } }
@media (max-width: 480px) { .nav-in { min-height: 76px; } .logo img { width: 100px; } .logo-sub { font-size: 8px; letter-spacing: .1em; margin-top: 3px; } }

/* ═════ FUSIÓN 02 · CÓMO TRABAJAMOS + TRAZABILIDAD QR + TODA AMÉRICA (01-nov-2026, pedido de Claudio) ═════
   Las viejas secciones 03 y 04 se integran en la 02 (respaldo clientes/ae0031-axiom/respaldos/pre-fusion-20261101/):
   - Paso 03 «Verificación en línea» (#trazabilidad) en 3 subfases (data-sub 4·5·6): el TELÉFONO (.ptel) entra, su visor
     escanea el QR de la hoja y muestra la ficha pública → crecen las barras del historial de escaneos → cae la alerta de
     vencimiento (y en la hoja se marca «Vence»).
   - Remate: el camino baja hasta la FRANJA de países (.pam, #america, data-s 4) y los 23 países se encienden de norte a sur.
   Sin .anim (sin JS / movimiento reducido) = estado final. Solo transform, opacity y stroke-dashoffset. */

/* columna izquierda en escritorio (01-nov, scroll): hoja + teléfono FIJOS (sticky) bajo el menú mientras se bajan los pasos;
   proceso.js les pone zoom < 1 si no caben enteros en la pantalla. Los nodos se alinean con el título de su paso (el paso se
   activa cuando su título cruza el centro de la pantalla). ≤900 px: sin sticky (display: contents). */
.proc-izq { min-width: 0; }
@media (min-width: 901px) {
  .proc[data-proc="3"] .proc-cuerpo { align-items: start; }
  .proc-izq { position: sticky; top: 118px; display: grid; align-self: start; }
  .proc[data-proc="3"] .ptel { justify-self: end; margin: -34px 7% 0 0; }
  /* aire bajo el paso 03: la columna fija no se suelta hasta que su última viñeta pasó por el centro de la pantalla
     (el camino baja por ese tramo hasta la franja de países) */
  .proc[data-proc="3"] .proc-pasos { padding-bottom: max(54px, calc(50vh - 90px)); }
}
@media (min-width: 761px) { .proc[data-proc="3"] .pp-nodo { align-self: start; margin-top: 8px; } }
@media (max-width: 900px) { .proc-izq { display: contents; } }

/* paso 03 (lado izquierdo del zigzag, texto a la derecha): viñetas en espejo, ícono junto al nodo */
.proc[data-proc="3"] .pp:nth-child(odd) .pp-vi li { grid-template-columns: minmax(0, 1fr) 38px; text-align: right; padding: 5px 0 5px 8px; }
.proc[data-proc="3"] .pp:nth-child(odd) .pp-vi .vi-ic { order: 2; }
.proc[data-proc="3"] .pp:nth-child(odd) .pp-vi li::before { inset: 0 -10px 0 -6px; border-left: 0; border-right: 3px solid #F5B800; background: linear-gradient(270deg, rgb(245 184 0 / .17), rgb(245 184 0 / .05)); transform-origin: 100% 50%; }
.pp-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.proc[data-proc="3"] .pp:nth-child(odd) .pp-acc { justify-content: flex-end; }
.btn-linea { background: transparent; border-color: var(--marino); color: var(--marino); }
.btn-linea:hover { background: var(--marino); border-color: var(--marino); color: #fff; }
.pp-acc .btn { transition: opacity .5s, background-color .2s, border-color .2s, color .2s; }
.proc.anim .pp:not(.on) .pp-acc .btn { opacity: .4; }

/* íconos de las viñetas del paso 03: d) celular que escanea y tilda · e) barras del historial + pin · f) campana con aviso */
.vi-scan { stroke: var(--senal); stroke-width: 1.6; opacity: 0; }
.proc.anim .vi-d.sub-act .vi-scan { animation: vi-scan 1.1s var(--ease) .1s both; }
@keyframes vi-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; transform: translateY(15px); } 100% { opacity: 0; transform: translateY(15px); } }
.vi-d .vi-chk { transition-delay: 1s; }
.proc.anim .vi-d:not(.sub-on) .vi-chk { stroke-dashoffset: 1; transition: none; }
.vi-bar { stroke-width: 3.2; stroke-linecap: butt; transform-origin: 50% 100%; transition: transform .4s cubic-bezier(.3, 1.3, .5, 1) calc(.15s + var(--i) * .13s); }
.proc.anim .vi-e:not(.sub-on) .vi-bar { transform: scaleY(0); transition: none; }
.vi-pin { fill: currentColor; stroke: none; transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.3, 1.6, .55, 1) .8s, opacity .1s .8s; }
.proc.anim .vi-e:not(.sub-on) .vi-pin { opacity: 0; transform: scale(2); transition: none; }
.vi-campana { transform-origin: 50% 12%; }
.proc.anim .vi-f.sub-act .vi-campana { animation: vi-campana 1.1s ease-in-out .25s both; }
@keyframes vi-campana { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 35% { transform: rotate(-13deg); } 55% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
.vi-aviso { fill: var(--senal); stroke: none; transform-origin: 50% 50%; transition: transform .3s cubic-bezier(.3, 1.6, .55, 1) .35s, opacity .1s .35s; }
.proc.anim .vi-f:not(.sub-on) .vi-aviso { opacity: 0; transform: scale(0); transition: none; }

/* la hoja: «Vence» se marca en ámbar mientras cae la alerta */
.pv3-vence { position: relative; }
.pv3-vence::before { content: ""; position: absolute; inset: -3px -8px; border-left: 3px solid #F5B800; background: rgb(245 184 0 / .2); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s; pointer-events: none; }
.proc.anim .pv3-vence.sub-act::before { opacity: 1; }

/* ── teléfono con la ficha pública ── */
.ptel { position: relative; z-index: 2; width: 252px; transform: rotate(2.5deg); transition: opacity .45s .3s, transform .85s cubic-bezier(.2, .9, .3, 1) .3s; }
.proc.anim .ptel:not(.on) { opacity: 0; transform: translateY(70px) rotate(9deg); transition: none; }
.ptel-caja { padding: 9px; border-radius: 30px; background: #0B1220; box-shadow: 0 34px 48px -20px rgb(1 26 60 / .6), 0 2px 6px rgb(1 26 60 / .25), inset 0 0 0 2px #2A3550; }
.ptel-pant { position: relative; overflow: hidden; min-height: 412px; padding: 12px 12px 14px; border-radius: 22px; background: #fff; color: var(--texto); }
.ptel-barra { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-bottom: 9px; border-bottom: 1px solid var(--borde); font: 400 .56rem/1.2 var(--t-datos); color: var(--suave); }
.ptel-barra img { width: 44px; height: auto; }
.ptel-estado { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding: 9px 10px; border-radius: 6px; background: #E5F5EC; color: var(--ok, #157F45); font-weight: 700; font-size: .9rem; }
.ptel-estado .i { width: 1.45em; height: 1.45em; }
.ptel-eq { margin: 0 0 9px; font: 700 1.16rem/1.1 var(--t-titulo); color: var(--texto); }
.ptel-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.ptel-datos div { padding: 6px 8px; border-radius: 4px; background: var(--fondo); }
.ptel-datos dt { font-size: .64rem; color: var(--suave); }
.ptel-datos dd { margin: 1px 0 0; font: 600 .72rem/1.2 var(--t-datos); overflow-wrap: anywhere; }
.ptel-hist { position: relative; margin-top: 9px; padding: 8px 9px 7px; border-radius: 4px; background: var(--marino); color: var(--sobre-osc-suave); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .4s; }
.ptel-hist-t { margin: 0 0 6px; font: 500 .56rem/1.2 var(--t-datos); letter-spacing: .08em; text-transform: uppercase; }
.ptel-barras { display: block; width: 100%; height: auto; }
.ptel-barras rect { fill: var(--celeste); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.25, .5, 1) calc(.1s + var(--i) * .09s); }
.ptel-hist-n { margin: 5px 0 0; font-size: .72rem; }
.ptel-hist-n b { font: 700 1.05rem/1 var(--t-titulo); color: #fff; }
.proc.anim .ptel-hist:not(.sub-on) .ptel-barras rect { transform: scaleY(.06); transition: none; }
.proc.anim .ptel-hist.sub-act { outline-color: #F5B800; }
.ptel-pdf { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin-top: 9px; border-radius: 4px; background: var(--azul); color: #fff; font-weight: 600; font-size: .8rem; }
/* visor de la cámara: solo mientras escanea (paso 03 activo); luego aparece la ficha */
.ptel-visor { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; background: #0E1626; color: #DCEAFD; font: 500 .7rem/1 var(--t-datos); letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; }
.ptel-mira { position: relative; display: block; width: 116px; height: 116px; padding: 14px; color: #F7F3E9; }
.ptel-mira::before { content: ""; position: absolute; inset: 0; border: 3px solid #8CBBF5; -webkit-mask: conic-gradient(at 26px 26px, transparent 75%, #000 0) 0 0 / calc(100% - 26px) calc(100% - 26px); mask: conic-gradient(at 26px 26px, transparent 75%, #000 0) 0 0 / calc(100% - 26px) calc(100% - 26px); }
.ptel-mira svg { display: block; width: 100%; height: 100%; }
.ptel-linea { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: #F5B800; box-shadow: 0 0 10px 2px rgb(245 184 0 / .6); }
.ptel-visor { transition: opacity .35s; }
.ptel-ficha { transition: opacity .45s .1s, transform .5s var(--ease) .1s; }
.proc.anim .ptel-ficha:not(.sub-on) { opacity: 0; transform: translateY(14px); }
.proc.anim .ptel-ficha:not(.sub-on) ~ .ptel-visor { opacity: 1; }
.proc.anim .ptel.on .ptel-ficha:not(.sub-on) ~ .ptel-visor .ptel-linea { animation: ptel-linea .8s ease-in-out infinite alternate; }
@keyframes ptel-linea { from { transform: translateY(0); } to { transform: translateY(98px); } }
/* alerta de vencimiento: baja desde arriba como notificación */
.ptel-alerta { position: absolute; z-index: 3; left: 7px; right: 7px; top: 7px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 9px; border-left: 3px solid #F5B800; border-radius: 6px; background: rgb(1 26 60 / .96); color: #fff; box-shadow: 0 12px 22px -8px rgb(1 26 60 / .6); transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), opacity .25s; }
.ptel-alerta svg { width: 26px; height: 26px; fill: none; stroke: #F5B800; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 15%; }
.ptel-alerta > span { display: grid; gap: 2px; font-size: .7rem; line-height: 1.25; color: var(--sobre-osc-suave); }
.ptel-alerta b { font: 700 .86rem/1.1 var(--t-texto); color: #fff; }
.proc.anim .ptel-alerta:not(.sub-on) { opacity: 0; transform: translateY(-130%); transition: none; }
.proc.anim .ptel-alerta.sub-act svg { animation: vi-campana 1s ease-in-out .5s both; }

/* ── franja «Trabajamos en toda América» (lo esencial de la vieja sección 04; el globo grande queda solo en la portada) ── */
.pam { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 26px clamp(32px, 4vw, 64px); align-items: start; margin-top: 6px; padding: clamp(26px, 3vw, 40px); background: var(--marino); color: var(--sobre-osc); border-top: 3px solid var(--azul);
  background-image: radial-gradient(70% 120% at 100% 0%, rgb(0 73 161 / .4), transparent 70%); }
.pam-cab { display: grid; gap: 12px; justify-items: start; }
.pam-sobre { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 600 .72rem/1.3 var(--t-datos); letter-spacing: .14em; text-transform: uppercase; color: var(--celeste); }
.pam-sobre svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pam h3 { margin: 0; font: 700 clamp(1.7rem, 2.4vw, 2.3rem)/1.02 var(--t-titulo); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.pam h3 em { font-style: normal; color: var(--celeste); }
.pam-intro { margin: 0; color: var(--sobre-osc-suave); font-size: .98rem; line-height: 1.55; }
.pam-cab .btn { margin-top: 4px; }
.pam-paises { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 18px clamp(18px, 2.4vw, 34px); }
.pam-reg h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; padding: 0 2px 7px; border-bottom: 1px solid rgb(140 187 245 / .35); font: 600 .68rem/1.25 var(--t-datos); letter-spacing: .12em; text-transform: uppercase; color: var(--celeste); }
.pam-reg h4 small { font: 400 .68rem/1.25 var(--t-datos); letter-spacing: .02em; text-transform: none; color: #9FB3CF; white-space: nowrap; }
.pam-reg ul { display: grid; gap: 1px 12px; margin: 0; padding: 0; list-style: none; }
.pam-centro ul, .pam-sur ul { grid-template-columns: 1fr 1fr; }
.pam-reg li { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 30px; font: 600 .84rem/1.2 var(--t-texto); color: #fff;
  transition: opacity .4s calc(var(--i) * 55ms), transform .5s var(--ease) calc(var(--i) * 55ms); }
.pam-reg li span { min-width: 0; overflow-wrap: anywhere; }
.pam-reg img { flex: none; width: 22px; height: 15px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
.proc.anim .pam:not(.on) li { opacity: .2; transform: translateY(5px); transition: none; }
.pam-nota { grid-column: 1 / -1; margin: 0; font: 400 .72rem/1.5 var(--t-datos); color: #9FB3CF; }
.pam .pc { border-bottom-color: var(--senal); }
.pam :focus-visible { outline-color: var(--celeste); }
.proc[data-proc="3"] .proc-ctrl { margin-top: 14px; }

@media (max-width: 1100px) and (min-width: 901px) { .pam { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .proc[data-proc="3"] .ptel { order: 1; justify-self: center; margin-top: 4px; }
  .pam { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
}
@media (max-width: 640px) {
  .pam { padding: 24px 18px; }
  .pam-paises { grid-template-columns: minmax(0, 1fr); }
  .pam-norte ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .proc[data-proc="3"] .pp:nth-child(odd) .pp-vi li { grid-template-columns: 34px minmax(0, 1fr); text-align: left; padding: 5px 8px 5px 0; }
  .proc[data-proc="3"] .pp:nth-child(odd) .pp-vi .vi-ic { order: 0; }
  .proc[data-proc="3"] .pp:nth-child(odd) .pp-vi li::before { inset: 0 -6px 0 -10px; border-right: 0; border-left: 3px solid #F5B800; background: linear-gradient(90deg, rgb(245 184 0 / .17), rgb(245 184 0 / .05)); transform-origin: 0 50%; }
  .proc[data-proc="3"] .pp:nth-child(odd) .pp-acc { justify-content: flex-start; }
}

/* ═════ ACADEMIA · TIMBRES REDONDOS (01-nov-2026, pedido de Claudio; reemplaza las 3 tarjetas) ═════
   Las 3 ventajas son sellos circulares de goma/tinta: borde doble, texto en arco «AXIOM · ACADEMIA», ícono + título en el centro y
   la descripción bajo el sello. Tinta azul AXIOM con borde irregular y falla (filtro SVG #tinta-sello), cada uno girado (--rot).
   Texto real (HTML y SVG), no imagen. Entrada: caen grandes, estampan con aplastado, halo de tinta (.sello::before) y sombra
   (::after); luego el bloque oscuro «Entrar a la intranet». axiom.js pone .timbre-prep y después .timbrar (una vez).
   Sin JS o con movimiento reducido: quietos y en su estado final. Solo transform y opacity. */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acad-top { grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 6px; margin-bottom: clamp(30px, 4vw, 48px); }
.acad-ventajas { gap: clamp(10px, 2vw, 28px); align-items: start; }
.acad-ventajas li { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; position: relative; }
.acad-ventajas li > p { margin: 0; max-width: 24ch; font-size: .92rem; line-height: 1.45; color: var(--suave); }
.sello { position: relative; width: min(100%, 212px); aspect-ratio: 1; color: var(--azul); transform: rotate(var(--rot, 0deg)); }
.sello-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: url(#tinta-sello); opacity: 1; mix-blend-mode: multiply; }
.sello-svg circle { fill: none; stroke: currentColor; }
.sello-svg .s-r1 { stroke-width: 4.2; } .sello-svg .s-r2 { stroke-width: 1.4; } .sello-svg .s-r3 { stroke-width: 1.8; stroke-dasharray: 1 0; }
.sello-svg .s-pt { fill: currentColor; stroke: none; }
.sello-svg .s-arco { fill: currentColor; font: 700 17px/1 var(--t-titulo); letter-spacing: .1em; text-transform: uppercase; }
.sello-c { position: absolute; inset: 27%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sello-c .i { width: 26px; height: 26px; color: var(--azul); flex: none; }
.sello-c strong { display: block; font: 700 clamp(.9rem, 1.15vw, 1rem)/1.05 var(--t-titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--azul); text-wrap: balance; }
.acad-intranet { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 22px 20px; text-align: left; }
.acad-intranet .flecha { margin-left: 0; margin-top: 2px; }
.acad-ventajas li, .acad-intranet { position: relative; }
.timbre-prep .sello, .timbre-prep .acad-ventajas li > p, .timbre-prep .acad-intranet { opacity: 0; }
.timbre-prep.timbrar .sello { animation: sello-estampa .66s cubic-bezier(.3, .6, .35, 1) calc(var(--t) * 150ms) both; }
.timbre-prep.timbrar .acad-ventajas li > p { animation: sello-desc .5s ease-out calc(var(--t) * 150ms + .4s) both; }
.timbre-prep.timbrar .acad-intranet { animation: timbre .62s cubic-bezier(.3, .6, .35, 1) calc(var(--t) * 150ms) both; }
.timbre-prep .sello::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 73 161 / .3), rgb(0 73 161 / .12) 70%, transparent); opacity: 0; pointer-events: none; }
.timbre-prep .sello::after { content: ""; position: absolute; inset: 6% 6% 0; border-radius: 50%; box-shadow: 0 16px 24px -12px rgb(1 26 60 / .5); opacity: 0; pointer-events: none; }
.timbre-prep.timbrar .sello::before { animation: timbre-tinta 1.1s ease-out calc(var(--t) * 150ms + .3s) both; }
.timbre-prep.timbrar .sello::after { animation: timbre-sombra .9s ease-out calc(var(--t) * 150ms) both; }
@keyframes sello-estampa {
  0% { opacity: 0; transform: translateY(-26px) scale(1.5) rotate(calc(var(--rot) - 14deg)); }
  45% { opacity: 1; transform: translateY(0) scale(1.05) rotate(calc(var(--rot) - 2deg)); }
  58% { transform: scale(.94, .96) rotate(var(--rot)); }
  74% { transform: scale(1.025) rotate(var(--rot)); }
  88% { transform: scale(.995) rotate(var(--rot)); }
  100% { opacity: 1; transform: rotate(var(--rot)); }
}
@keyframes sello-desc { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.acad-top { --x: 0; }
@keyframes timbre {
  0% { opacity: 0; transform: translateY(-16px) scale(1.32) rotate(-6deg); }
  45% { opacity: 1; transform: translateY(0) scale(1.04) rotate(-1deg); }
  58% { transform: scale(.95, .97) rotate(0); }
  74% { transform: scale(1.02); }
  88% { transform: scale(.995); }
  100% { opacity: 1; transform: none; }
}
@keyframes timbre-sombra { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes timbre-tinta { 0% { opacity: 0; transform: scale(.92); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
@media (max-width: 1000px) {
  .acad-top { grid-template-columns: 1fr; }
  .acad-intranet { flex-direction: row; align-items: center; }
  .acad-intranet .flecha { margin-left: auto; }
}
@media (max-width: 700px) {
  .acad-ventajas { grid-template-columns: 1fr; gap: 34px; }
  .sello { width: 200px; }
}

/* ═════ REVISTA DE FIGURAS (01-nov-2026, pedido de Claudio) ═════
   Prueba interactiva con 2 páginas: Fig 1 tabla de carga (grua/) y Fig 2 ángulo de eslingas (grua/eslingas.html, skill anatomy).
   Cabecera tipo índice de revista (pestañas «Fig 1 · …» con filete) + folio 01/02 con flechas. Cambio de página: la hoja que sale
   gira sobre su lomo izquierdo (rotateY, perspectiva) y se desvanece; la que entra se asienta desde la derecha (al volver, al revés).
   Solo transform y opacity; movimiento reducido = cambio directo (axiom.js). */
.grua-bloque.revista { display: block; }
.rev-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: clamp(16px, 2.4vw, 26px); border-bottom: 1px solid var(--borde); }
.rev-indice { display: flex; gap: 2px; min-width: 0; }
.rev-tab { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 16px 9px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: transparent; color: var(--suave); font: 600 .98rem/1.1 var(--t-titulo); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.rev-tab .rev-n { font: 500 .7rem/1 var(--t-datos); letter-spacing: .08em; text-transform: none; color: var(--azul); }
.rev-tab:hover { color: var(--marino); background: var(--fondo); }
.rev-tab[aria-selected="true"] { color: var(--marino); border-bottom-color: var(--azul); }
.rev-tab:focus-visible, .rev-flecha:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.rev-folio { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.rev-num { font: 500 .8rem/1 var(--t-datos); color: var(--suave); letter-spacing: .06em; }
.rev-num b { font: 700 1.5rem/1 var(--t-titulo); color: var(--marino); }
.rev-flecha { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--borde); border-radius: 2px; background: #fff; color: var(--marino); cursor: pointer; }
.rev-flecha:hover { border-color: var(--azul); color: var(--azul); }
.rev-flecha[data-rev-paso="-1"] .i { transform: scaleX(-1); }
/* v2 «paso de página» (01-nov, enc:807): las 2 hojas siempre apiladas en la misma celda (la oculta = visibility hidden) →
   el bloque mide lo de la más alta y no cambia de alto al pasar de página. El giro lo pinta axiom.js (tiras 3D). */
.rev-hojas { position: relative; display: grid; touch-action: pan-y; }
.rev-hoja { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; background: #fff; }
.rev-hoja[hidden] { display: grid; visibility: hidden; }
.rev-hoja .grua-marco { align-self: start; }
.rev-girando .rev-hojas { cursor: grabbing; user-select: none; }
.rev-girando .rev-esquina { opacity: 0; }
/* la hoja que gira: tiras anidadas (cada una gira sobre el borde de la anterior) */
.rev-libro { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); z-index: 4; pointer-events: none; perspective: var(--persp, 3000px); perspective-origin: 50% 45%; }
.rev-tira { position: absolute; top: 0; left: 0; width: var(--ws); height: var(--h); transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.rev-tira .rev-tira { left: 100%; }
.rev-cara, .rev-dorso { position: absolute; inset: 0 -1px 0 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; }
.rev-dorso { transform: rotateY(180deg); background: #f3f1ec; }
.rev-espejo { position: absolute; inset: 0; transform: scaleX(-1); opacity: .13; filter: grayscale(1); }
.rev-copia { position: absolute; top: 0; width: var(--w); margin: 0; visibility: visible; }
.rev-copia .rev-snap { display: block; width: 100%; object-fit: cover; object-position: 50% 0; background: var(--fondo); }
.rev-luz, .rev-brillo { position: absolute; inset: 0; pointer-events: none; }
.rev-brillo { opacity: 0; will-change: opacity; }
.rev-brillo { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 55%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: screen; }
/* sombra que la hoja proyecta sobre la de abajo (sigue su borde libre) y hondura del lomo */
.rev-sombra { position: absolute; left: 0; top: 0; bottom: 0; width: 150px; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 0 50%; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(1, 26, 60, .34), rgba(1, 26, 60, .12) 35%, rgba(1, 26, 60, 0)); }
.rev-lomo { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(1, 26, 60, .22), rgba(1, 26, 60, 0)); }
/* esquina doblada: se arrastra para pasar la hoja (o clic = siguiente) */
.rev-esquina { position: absolute; right: -1px; bottom: -1px; z-index: 5; width: 46px; height: 46px; padding: 0; border: 0; cursor: grab; touch-action: none;
  background: linear-gradient(315deg, var(--banda, #eef2f7) 0 47%, rgba(1, 26, 60, .18) 49%, #fff 51%, #e9edf3 78%, #d5dce6 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%); transition: width .25s ease, height .25s ease, opacity .2s; }
.rev-esquina:hover { width: 64px; height: 64px; }
@media (max-width: 1000px) { .rev-hoja { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 560px) {
  .rev-cab { align-items: stretch; }
  .rev-indice { flex: 1 1 100%; }
  .rev-tab { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; font-size: .9rem; }
  .rev-folio { flex: 1 1 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .rev-esquina { transition: none; } }

/* ═════ 01-nov · ORDEN NUEVO: franja de timbres compacta; cursos/revista al final (#academia) ═════ */
.acad-sellos { padding-block: clamp(26px, 3.2vw, 44px); }
.acad-sellos .acad-top { margin-bottom: 0; margin-top: 0; }