/* Capa corporativa compartida por index.html y lector/index.html.
   Se carga despues de los estilos de cada pagina y solo cambia la apariencia. */
:root{
  --navy:#14224a; --navy-2:#1b3a8a; --navy-3:#0d1733;
  --azul-claro:#8fb6ff; --texto-oscuro:#c9d5f0; --verde-claro:#5ee0a0;
  --sombra-suave:0 1px 2px rgba(20,34,74,.04),0 14px 34px -22px rgba(20,34,74,.35);
}
html{scroll-padding-top:96px}
.degradado{background:linear-gradient(135deg,#14224a 0%,#1b3a8a 55%,#1d4ed8 100%)}

/* Cabecera flotante tipo pildora */
header.barra{position:fixed;top:12px;left:0;right:0;z-index:40;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
header.barra .ancho{pointer-events:auto;width:calc(100% - 24px);max-width:1120px;height:62px;padding:0 10px 0 20px;background:rgba(255,255,255,.97);border:1px solid rgba(20,34,74,.08);border-radius:999px;box-shadow:0 14px 34px -18px rgba(13,23,51,.55)}
header.barra .marca span,header.barra .marca-n{color:var(--navy)}
header.barra nav{color:var(--navy);font-weight:500}
header.barra nav a{position:relative;padding:6px 0}
header.barra nav a:hover{color:var(--marca)}
header.barra nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--marca);transform:scaleX(0);transition:transform .2s}
header.barra nav a:hover::after{transform:scaleX(1)}
header.barra .btn{border-radius:999px}

/* Rotulos de seccion: linea + mono, como los informes institucionales */
.rotulo{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;display:inline-flex;align-items:center;gap:12px}
.rotulo::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor;flex-shrink:0}
.cabeza h2{color:var(--navy)}

/* Portada oscura */
.heroe{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(1100px 520px at 85% 10%,rgba(29,78,216,.55),transparent 60%),radial-gradient(800px 500px at 0% 100%,rgba(27,58,138,.6),transparent 60%),var(--navy-3)}
.heroe::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.heroe .constelacion{position:absolute;z-index:-1;right:-60px;top:70px;width:560px;max-width:70vw;opacity:.5;pointer-events:none}
.heroe h1{color:#fff}
.heroe h1 em,.heroe h1 .azul{color:var(--azul-claro)}
.heroe .entrada{color:var(--texto-oscuro)}
.heroe .rotulo{color:#dbe6ff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:999px;padding:7px 14px;letter-spacing:.14em}
.heroe .rotulo::before{width:7px;height:7px;border-radius:50%;background:var(--verde-claro);box-shadow:0 0 0 4px rgba(94,224,160,.18)}
.heroe .acciones-portada .btn-2,.heroe .acciones-heroe .btn-borde{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.heroe .acciones-portada .btn-2:hover,.heroe .acciones-heroe .btn-borde:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.heroe .propiedades span{color:var(--texto-oscuro)}
.heroe .propiedades svg{stroke:var(--verde-claro)}
.heroe .acciones-heroe{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* Portada de inicio: el fondo oscuro termina a media altura de las tarjetas */
.portada.heroe{padding:132px 0 72px;background:linear-gradient(180deg,transparent 0,transparent calc(100% - 200px),var(--papel) calc(100% - 200px)),radial-gradient(1100px 520px at 85% 10%,rgba(29,78,216,.55),transparent 60%),radial-gradient(800px 500px at 0% 70%,rgba(27,58,138,.6),transparent 60%),var(--navy-3)}
.portada.heroe::before{bottom:200px}
.portada.heroe h1{font-size:38px}
.lineas2{margin-top:52px}
.linea-card{padding:0 0 28px;border-radius:18px;border-color:rgba(20,34,74,.08);box-shadow:0 30px 60px -34px rgba(13,23,51,.55)}
.linea-card::before{display:none}
.linea-card > :not(.tope){margin-left:28px;margin-right:28px}
.linea-card .tope{position:relative;overflow:hidden;margin:0 0 22px;padding:20px 28px 24px;color:#fff;background:linear-gradient(135deg,#14224a 0%,#1b3a8a 60%,#1d4ed8 100%);align-items:flex-end}
.linea-card.oro .tope{background:linear-gradient(135deg,#5c3f12 0%,#9a6e2c 55%,#c99a4a 100%)}
.linea-card .tope::after{content:"";position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.09)}
.linea-card .tope .num{position:absolute;left:28px;top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;opacity:.75}
.linea-card .tope img,.linea-card .tope .sello{margin-top:26px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.linea-card .tope .sello{background:#fff;border-color:transparent}
.linea-card .para{color:rgba(255,255,255,.72)}
.linea-card h2{color:#fff}
/* Respaldo: iconos con color por tarjeta */
#confianza{background:linear-gradient(180deg,#eef4ff 0%,#ffffff 100%)}
.conf{flex-direction:column;background:var(--papel-alto);padding:24px}
.conf .ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#1b3a8a,#3b82f6);box-shadow:0 10px 20px -12px rgba(29,78,216,.8)}
.conf:nth-child(2) .ic{background:linear-gradient(135deg,#0f766e,#2dd4bf);box-shadow:0 10px 20px -12px rgba(15,118,110,.8)}
.conf:nth-child(3) .ic{background:linear-gradient(135deg,#4338ca,#818cf8);box-shadow:0 10px 20px -12px rgba(67,56,202,.8)}
.conf:nth-child(4) .ic{background:linear-gradient(135deg,#178a45,#34d399);box-shadow:0 10px 20px -12px rgba(23,138,69,.8)}
@media(min-width:1024px){.portada.heroe{padding:150px 0 84px}.portada.heroe h1{font-size:56px}}

/* Portada del lector */
.heroe > .portada{padding-top:124px;padding-bottom:80px}
.heroe .vivo .halo{background:rgba(143,182,255,.22)}
.heroe .vivo .tarjeta{border-color:rgba(255,255,255,.2);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
@media(min-width:1024px){.heroe > .portada{padding-top:150px;padding-bottom:96px}}

/* Cinta con las lineas de trabajo */
.cinta{position:relative;overflow:hidden;background:var(--papel-alto);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--papel-alto),transparent)}
.cinta::after{right:0;background:linear-gradient(-90deg,var(--papel-alto),transparent)}
.cinta-pista{display:flex;width:max-content;animation:cinta 48s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-pista span{display:inline-flex;align-items:center;gap:22px;padding:16px 0 16px 22px;font-family:var(--display);font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap}
.cinta-pista span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--marca);opacity:.5}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Tarjetas: un poco mas de presencia */
.srv,.clavo,.conf,.fn,.limites,.precio-caja,.via{box-shadow:var(--sombra-suave)}
.srv,.clavo,.conf{transition:transform .2s,box-shadow .2s,border-color .2s}
.srv:hover,.clavo:hover,.conf:hover{transform:translateY(-3px);border-color:var(--marca-borde);box-shadow:0 1px 2px rgba(20,34,74,.05),0 22px 40px -24px rgba(20,34,74,.45)}
.srv h3,.clavo h3,.conf h3,.fn h3,.limites h3{color:var(--navy)}

/* Pie institucional */
footer.pie-corp{border:0;background:var(--navy);color:#c3cde6;margin-top:24px}
footer.pie-corp .ancho{display:block;padding:0 20px}
.pie-grid{display:grid;gap:36px;padding:56px 0 40px}
.pie-corp .marca span,.pie-corp .marca-n{color:#fff}
.pie-corp .marca img{background:#fff;border-radius:9px}
.pie-marca p{margin-top:14px;font-size:14px;line-height:1.65;max-width:34ch}
.pie-corp h4{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8ea2cf}
.pie-col a:not([hidden]),.pie-col span{display:block;font-size:14px;line-height:1.5;padding:4px 0;color:#dbe3f5}
.pie-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pie-legal{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 28px;display:flex;flex-direction:column;gap:14px}
.pie-legal .letra{font-size:12.5px;line-height:1.65;color:#93a4c8;max-width:95ch}
.pie-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12.5px;color:#7f92bd}

@media(min-width:768px){
  .pie-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media(min-width:1024px){
  footer.pie-corp .ancho{padding:0 32px}
}
@media(max-width:879px){
  header.barra .ancho{height:56px}
}
@media(prefers-reduced-motion:reduce){
  .cinta-pista{animation:none}
}
/* Ajustes finos */
.heroe .vivo .tarjeta{color:var(--tinta)}
.pie-legal .letra{border:0;padding:0}
.pie-corp .marca img{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
@media(max-width:639px){.heroe .rotulo{letter-spacing:.08em;font-size:10.5px;text-align:left}}

/* Video promocional */
.video-sec{padding:72px 0;background:radial-gradient(900px 500px at 15% 30%,rgba(29,78,216,.10),transparent 60%),var(--papel)}
.video-grid{display:grid;gap:40px;align-items:center}
.video-marco{position:relative;justify-self:center;width:100%;max-width:820px;aspect-ratio:16/9;border-radius:16px;padding:8px;background:#0d1733;box-shadow:0 40px 80px -36px rgba(13,23,51,.7),0 0 0 1px rgba(20,34,74,.12)}
.video-marco video{display:block;width:100%;height:100%;border-radius:10px;object-fit:cover;background:#0d1733}
.video-texto h2{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--navy);margin:14px 0 14px}
.video-texto p{font-size:17px;color:var(--tinta-media);line-height:1.65;max-width:52ch}
.video-texto ul{margin:20px 0 26px;display:flex;flex-direction:column;gap:10px;padding:0;list-style:none}
.video-texto li{position:relative;padding-left:28px;font-size:15.5px;color:var(--tinta)}
.video-texto li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--marca-fondo);box-shadow:inset 0 0 0 5px var(--marca)}
.video-acc{display:flex;flex-wrap:wrap;gap:12px}
@media(min-width:880px){.video-grid{grid-template-columns:1.45fr .9fr}.video-texto h2{font-size:38px}.video-sec{padding:96px 0}}
.btn[hidden]{display:none}
.btn-wa{background:#1fa855;color:#fff} .btn-wa:hover{background:#178a45}
@media(min-width:1024px){#reportes .rejilla-3{grid-template-columns:repeat(2,1fr)}}

/* Planes de precio */
.planes{display:grid;gap:20px;max-width:860px}
.plan{position:relative;border-radius:20px;border:1px solid var(--linea);background:var(--papel-alto);padding:30px 28px 28px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sombra-suave)}
.plan h3{font-size:20px;font-weight:800;color:var(--navy);margin-top:10px}
.plan-destacado{border-color:var(--marca);box-shadow:0 0 0 3px rgba(29,78,216,.10),0 30px 60px -36px rgba(13,23,51,.55)}
.plan-sello{align-self:flex-start;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--marca);border-radius:999px;padding:4px 12px}
.plan-sello-suave{color:var(--navy);background:var(--marca-fondo)}
.plan-precio{font-family:var(--display);font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--navy);margin-top:4px}
.plan-precio small{font-family:var(--sans);font-size:17px;font-weight:500;color:var(--tinta-media);letter-spacing:0}
.plan-detalle{font-size:15px;color:var(--tinta-media)}
.plan-iva{font-size:13px;color:var(--tinta-suave);margin-bottom:14px}
.plan .btn{margin-top:auto}
.plan-incluye{margin-top:26px;display:grid;gap:10px;max-width:860px}
.plan-incluye li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--tinta-media)}
.plan-incluye li svg{flex-shrink:0;margin-top:4px}
@media(min-width:720px){.planes{grid-template-columns:1fr 1fr}.plan-incluye{grid-template-columns:1fr 1fr}}
.linea-card .linea-precio{font-size:14px;color:var(--navy);margin:-8px 28px 18px;padding:10px 14px;border-radius:12px;background:var(--marca-fondo)}