a la izquierda */
padding-left: 0;
/* quita sangría extra si la hubiera */
}
/* Si quieres que las viñetas queden un poco separadas del borde: */
.info-box.full-width .plan-features li {
padding-left: .80rem;
/* micro-sangría solo visual */
}
.clientes-exito-slider {
width: 100%;
position: relative;
}
.cliente-logo {
height: 70px;
/* << Aumenta el tamaño */
border-radius: 12px;
/* << Hace los bordes redondeados */
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
/* sombra ligera */
}
.cliente-logo:hover {
transform: scale(1.12);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/*funcionalidad de los caso de exito */
@keyframes scroll-logos-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
.casos {
font-size: 1.8em;
color: var(--primary-blue);
font-family: 'Orbitron', sans-serif;
text-align: center;
/* centra el texto */
margin: 0 auto;
padding: 10px;
/* útil si es un bloque con ancho definido */
}
/* Hover animado sobre logos */
.cliente-logo {
transition: transform 0.3s ease, border 0.3s ease;
cursor: pointer;
border: 3px solid transparent;
border-radius: 10px;
}
.cliente-logo:hover {
transform: scale(1.08);
border-color: var(--primary-blue);
/* usa tu azul principal */
}
/* Viñeta flotante (modal personalizado) */
/* ——— ANIMACIÓN de entrada del modal ——— */
@keyframes vidrioRearmado {
0% {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
transform: scale(0.6) rotateX(45deg) skewY(10deg);
opacity: 0;
}
40% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1.05) rotateX(0deg) skewY(0deg);
opacity: 0.4;
}
100% {
transform: scale(1) rotateX(0) skewY(0);
opacity: 1;
}
}
.modal-caso {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 38, 77, 0.4);
backdrop-filter: blur(8px);
z-index: 9999;
justify-content: center;
align-items: center;
padding: 1rem;
}
.modal-text {
position: relative;
z-index: 2;
color: #002a4d;
font-size: 1.2rem;
font-weight: 500;
font-family: 'Segoe UI', sans-serif;
text-align: center;
line-height: 1.7;
letter-spacing: 0.4px;
}
.modal-sello {
position: absolute;
bottom: 1rem;
right: 1rem;
background-color: var(--primary-blue);
color: white;
font-size: 0.75rem;
font-weight: bold;
padding: 6px 10px;
border-radius: 6px;
box-shadow: 0 0 6px rgba(0, 102, 204, 0.5);
z-index: 3;
animation: pulseGlow 2s ease-in-out infinite;
}
@media (max-width: 768px),
(max-height: 640px) {
.modal-sello {
display: none !important;
}
}
@keyframes pulseGlow {
0%,
100% {
box-shadow: 0 0 6px rgba(0, 102, 204, 0.6);
}
50% {
box-shadow: 0 0 18px rgba(0, 102, 204, 0.9);
}
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.8rem;
background: none;
border: none;
color: #003366;
cursor: pointer;
z-index: 4;
transition: transform 0.2s ease;
}
.modal-close:hover {
transform: scale(1.2);
color: var(--primary-blue);
}
.modal-logo-agua {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transform: translate(-50%, -50%) scale(0.6) rotate(-8deg);
z-index: 0;
pointer-events: none;
opacity: 10;
animation: logoVidrioIn 1.4s ease-out forwards;
filter: blur(1px) brightness(1.1);
}
@keyframes logoVidrioIn {
0% {
transform: translate(-50%, -50%) scale(0.3) rotate(-30deg);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
opacity: 0;
}
40% {
transform: translate(-50%, -50%) scale(0.75) rotate(-8deg);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 0.08;
}
100% {
transform: translate(-50%, -50%) scale(0.7) rotate(-8deg);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 0.025;
/* Marca de agua muy suave */
}
}
/* Aquí termina tu CSS general... */
/* === Clientes de éxito: marquee + scroll táctil === */
.clientes-exito-slider {
overflow-x: auto;
/* scroll horizontal */
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
/* inercia iOS */
scroll-snap-type: x mandatory;
/* snap logo a logo */
padding: 8px 0 12px;
/* bordes suaves al inicio/fin (opcional) */
mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
/* === Clientes de éxito: marquee + scroll táctil === */
.clientes-exito-track {
display: inline-flex;
flex-wrap: nowrap;
gap: 32px;
width: max-content;
will-change: transform;
animation: logos-marquee 30s linear infinite;
}
/* Duplicaste los logos: del 0% al -50% vuelve sin “salto” */
@keyframes logos-marquee {
from {
transform: translateX(-10%);
}
to {
transform: translateX(0%);
}
}
/* Pausar animación cuando el usuario interactúe */
.clientes-exito-slider:hover .clientes-exito-track,
.clientes-exito-slider:active .clientes-exito-track,
.clientes-exito-slider.is-interacting .clientes-exito-track {
animation-play-state: paused;
}
/* Cada logo como “slide” */
.cliente-logo {
flex: 0 0 auto;
scroll-snap-align: center;
/* mejora de arrastre en móvil */
touch-action: pan-x;
}
/* Scrollbar (WebKit) */
.clientes-exito-slider::-webkit-scrollbar {
height: 6px;
}
.clientes-exito-slider::-webkit-scrollbar-thumb {
background: linear-gradient(#0077ff, #00b0ff);
border-radius: 4px;
}
/* Ajustes móviles */
@media (max-width: 600px) {
.clientes-exito-track {
gap: 24px;
}
.cliente-logo {
height: 60px;
}
}
/* ───── paneles de ia ya quien le pueda interesar ───── */
/* ---------- Call-outs flotantes ---------- */
.hs-callout {
position: fixed;
bottom: 4rem;
/* ↑ sube para no tapar CTA */
max-width: 300px;
padding: 1rem 1.2rem;
background: #ffffffee;
border-radius: 12px;
font-size: .9rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
cursor: pointer;
z-index: 9999;
animation: pulse 2s infinite;
transition: transform .25s, box-shadow .25s, filter .25s;
}
/* halo (mismo color del borde) solo al hover */
.hs-callout::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 var(--halo, transparent);
opacity: 0;
pointer-events: none;
transition: opacity .3s, box-shadow .3s;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, .3);
}
70% {
transform: scale(1.02);
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.hs-callout:hover {
transform: translateY(-4px) scale(1.08);
filter: brightness(1.05);
}
.hs-callout:hover::after {
opacity: .8;
}
.hs-callout.interesa {
left: 2rem;
border: 3px solid #0077ff;
}
.hs-callout.interesa:hover::after {
--halo: #0077ff66;
}
.hs-callout.syntex {
right: 2rem;
border: 3px solid #ff6b00;
}
.hs-callout.syntex:hover::after {
--halo: #ff6b0066;
}
/* ---------- Modales ---------- */
.hs-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .7);
z-index: 10000;
}
.hs-modal.hidden {
display: none;
}
.hs-modal-content {
background: #fff;
color: #111;
border-radius: 16px;
max-width: 640px;
width: 92%;
padding: 2rem;
max-height: 90vh;
overflow-y: auto;
animation: fadeUp .4s ease-out, modalPop .35s ease-out forwards;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
transform-origin: center;
transition: transform .25s;
}
@keyframes fadeUp {
from {
transform: translateY(40px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes modalPop {
0% {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
80% {
transform: scale(1.03);
}
100% {
transform: scale(1);
box-shadow: 0 0 22px rgba(0, 118, 255, .35);
}
}
/* micro-zoom al pasar el cursor sobre el modal */
.hs-modal-content:hover {
transform: scale(1.015);
}
/* ---------- Botón Cerrar ---------- */
.hs-close {
margin-top: 1.2rem;
background: #0077ff;
border: none;
color: #fff;
padding: .6rem 1.6rem;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: transform .25s, box-shadow .25s, filter .25s;
}
.hs-close:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
filter: brightness(1.1);
}
/* ---------- Responsive ---------- */
@media(max-width:575px) {
.hs-callout {
bottom: 3rem;
max-width: 260px;
font-size: .82rem;
padding: .8rem 1rem;
}
}
/* Banner: tres tarjetas, mismo alto siempre */
#banner-promos {
display: grid;
grid-template-columns: repeat(3, minmax(320px, 1fr));
gap: 32px;
padding: 32px 16px;
align-items: stretch;
/* <- todas igual de altas */
background: #002b5e;
border-top: 4px solid #ffc400;
border-bottom: 4px solid #ffc400;
}
/* Tarjeta: llenar la celda y centrar contenido */
#banner-promos .promo-card {
height: 100%;
/* <- ocupa todo el alto de la celda */
display: flex;
flex-direction: column;
justify-content: center;
/* contenido centrado vertical */
flex: 0 0 auto;
/* ignora reglas flex heredadas */
max-width: unset;
/* grid controla el ancho */
padding: 36px 40px;
font-size: 1.25rem;
line-height: 1.4;
background: #fff;
color: #000;
border: 3px solid #0077ff;
border-radius: 16px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
transition: transform .3s, box-shadow .3s;
}
/* Hover */
#banner-promos .promo-card:hover {
transform: translateY(-6px) scale(1.05);
box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
/* Texto */
#banner-promos .promo-card>strong {
display: block;
margin-bottom: 8px;
text-align: center;
font-weight: 800;
font-size: 20px;
line-height: 1.25;
}
#banner-promos .promo-sub {
font-size: 23px;
line-height: 1.4;
}
/* Variante */
#banner-promos .promo-card.syntex {
border-color: #0077ff;
}
/* Responsivo */
@media (max-width:1100px) {
#banner-promos {
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
}
@media (max-width:680px) {
#banner-promos {
grid-template-columns: 1fr;
gap: 15px;
padding: 24px 12px;
}
#banner-promos .promo-card {
padding: 28px 24px;
font-size: 1rem;
}
}
/* ──────────────────────────────────────────
MODAL: efecto vidrio + aparición de texto
────────────────────────────────────────── */
/* Modal base: sin animación por defecto */
.hs-modal-content {
background: #fff;
color: #111;
border: 4px solid #0077ff;
border-radius: 20px;
max-width: 720px;
width: 92%;
padding: 2.6rem 3rem;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
transform-origin: center;
transition: transform .25s;
}
/* Clase que se añade cada vez que se abre */
.hs-modal-content.animate {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
animation: glassBuild .9s ease-out forwards,
borderGlow 1.1s ease-out forwards;
}
/* Aparece el texto con retardo de 0.9 s */
.hs-modal-content.animate>* {
opacity: 0;
animation: fadeIn .4s ease-out forwards .9s;
}
/* Vidrio que se arma */
@keyframes glassBuild {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transform: scale(.6) rotateX(25deg) skewY(6deg);
}
40% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1.05);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1);
}
}
/* Destello azul del borde al final */
@keyframes borderGlow {
0% {
box-shadow: 0 0 0 rgba(0, 118, 255, 0);
}
100% {
box-shadow: 0 0 22px rgba(0, 118, 255, .45);
}
}
/* Texto fade-in */
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Hover micro-zoom */
.hs-modal-content:hover {
transform: scale(1.02);
}
/* Botón cerrar centrado */
.hs-close {
display: block;
margin: 2rem auto 0;
background: #ff6b00;
border: none;
color: #fff;
padding: .7rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
}
.hs-close:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
/* Igual ancho interior + misma tipografía para ambos */
.modal-body {
max-width: 640px;
/* controla el texto, NO el contenedor azul */
margin: 0 auto;
font-size: 1rem;
line-height: 1.55;
}
.modal-body ul {
margin: 1rem 0 1.5rem 0;
padding-left: 1.4rem;
}
.modal-body li {
margin-bottom: .55rem;
}
/* ========= GRID DE TARJETAS ========= */
/* ╔══════════════════════════════════════╗
║ 1 · BANNER DESLIZANTE (marquee) ║
╚══════════════════════════════════════╝ */
/* Contenedor que oculta el desbordamiento */
#hsx-banner-wrap {
overflow: hidden;
width: 100%;
background: #f8f9fa;
/* fondo gris claro */
padding: 32px 0;
border-block: 4px solid #ffffff;
/* banda amarilla arriba/abajo */
}
/* Pista que se desplaza; duplica las tarjetas para loop continuo */
/* velocidad: 35 s (modifícala a tu gusto) */
#hsx-banner-track {
display: flex;
gap: 24px;
animation: hsx-scroll 30s linear infinite;
}
/* Tarjeta individual (aspecto + hover) */
/* ENVOLTORIO GENERAL */
#hsx-banner-wrap {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0;
/* 🔧 importante */
margin: 0;
/* 🔧 importante */
}
/* CARRUSEL DE TARJETAS */
#hsx-banner-track {
display: flex;
flex-wrap: nowrap;
gap: 16px;
padding: 1rem 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 1rem;
}
/* TARJETA INDIVIDUAL */
.hsx-card {
flex: 0 0 auto;
width: 240px;
background: white;
border: 3px solid #0077ff;
border-radius: 16px;
padding: 16px;
text-align: center;
scroll-snap-align: start;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
transition: transform 0.3s;
}
.hsx-card:hover {
transform: scale(1.05);
}
/* IMAGEN DE LA TARJETA */
.hsx-card img {
width: 100%;
max-height: 160px;
object-fit: contain;
border-radius: 12px;
margin-bottom: 12px;
}
/* TÍTULO */
.hsx-card h3 {
font-size: 1rem;
font-weight: 800;
color: #003a70;
}
/* SCROLLBAR PERSONALIZADA */
#hsx-banner-wrap::-webkit-scrollbar {
height: 6px;
}
#hsx-banner-wrap::-webkit-scrollbar-thumb {
background: #0077ff;
border-radius: 4px;
}
@media (max-width: 575px) {
.hsx-card h3 {
font-size: 1.2rem;
}
/* ≈ 19 px en móviles */
}
/* ╔══════════════════════════════════════╗
║ 2 · MODALES (sin cambios visuales) ║
╚══════════════════════════════════════╝ */
.hsx-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .7);
z-index: 10000;
}
.hsx-hidden {
display: none;
}
.hsx-box {
position: relative;
background: rgba(255, 255, 255, .96);
color: #111;
border: 4px solid #0077ff;
border-radius: 20px;
max-width: 720px;
width: 92%;
padding: 2.6rem 3rem;
max-height: 88vh;
overflow-y: auto;
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
transform-origin: center;
animation: hsx-fade .4s;
}
/* Marca de agua */
.hsx-box::after {
content: "";
position: absolute;
inset: 0;
background: url("/static/landing/img/circuito.png") center/260px no-repeat;
opacity: .18;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
/* Se necesita para que la marca de agua quede por debajo del contenido */
/* ── ajuste de tamaño y centrado del modal ─────────────── */
/* ─── Modal totalmente visible, sin cortar títulos ─── */
/* ╔═══════════════════════════╗
║ MODAL “VIDRIO” SIN BARRA ║
╚═══════════════════════════╝ */
.hsx-box {
position: relative;
background: rgba(255, 255, 255, .96);
border: 4px solid #0077ff;
border-radius: 20px;
/* ——— ancho / alto ——— */
max-width: 980px;
/* ⇦ más ancho */
width: 94vw;
/* ocupa casi todo */
max-height: 90vh;
/* alto generoso */
/* ——— sin scroll interno ——— */
overflow: hidden;
/* ——— aire ——— */
padding: 3rem 3.4rem;
box-shadow: 0 10px 28px rgba(0, 0, 0, .40);
display: flex;
flex-direction: column;
justify-content: center;
/* centra el contenido */
}
/* marca de agua (sigue igual) */
.hsx-box::after {
content: "";
position: absolute;
inset: 0;
background: url("/static/landing/img/circuito.png") center/280px no-repeat;
opacity: .10;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
/*──── CONTENIDO ────*/
.modal-body {
/* contenedor interno */
position: relative;
z-index: 1;
max-width: 900px;
/* texto no muy largo */
margin: 0 auto;
line-height: 1.55;
}
/* título: se parte si es muy largo y queda centrado */
/* ── 1 · ancho mayor para escritorio ─────────────────── */
@media (min-width: 992px) {
/* ≈ “lg” en Bootstrap */
.hsx-box {
max-width: 1100px;
/* antes 720 px */
width: 90vw;
/* deja margen lateral */
}
}
/* ── 2 · centramos el título y dejamos que salte líneas ─ */
.modal-body h2 {
margin: 0 0 1.4rem;
text-align: left;
/* ← centrado */
font-size: clamp(2rem, 4vw + .4rem, 2.8rem);
line-height: 1.15;
word-break: break-word;
hyphens: auto;
text-wrap: balance;
}
/* lista y párrafos sin cambios funcionales */
.modal-body ul {
margin: 1rem 0 1.5rem;
padding-left: 1.4rem;
}
.modal-body li {
margin-bottom: .55rem;
}
.modal-body ul {
margin: 1rem 0 1.5rem;
padding-left: 1.4rem;
}
.modal-body li {
margin-bottom: .55rem;
}
/* Botón cerrar */
.hsx-close {
display: block;
margin: 2rem auto 0;
background: #ff6b00;
color: #fff;
border: none;
padding: .7rem 2rem;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
}
.hsx-close:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
/* ───── EFECTO VIDRIO PARA .hsx-box ───── */
@keyframes hsx-glass {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transform: scale(.6) rotateX(25deg) skewY(5deg);
}
40% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1.05);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: scale(1);
}
}
@keyframes hsx-border {
from {
box-shadow: 0 0 0 rgba(0, 118, 255, 0);
}
to {
box-shadow: 0 0 22px rgba(0, 118, 255, .45);
}
}
@keyframes hsx-text {
to {
opacity: 1;
}
}
.hsx-box.hsx-glass {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
animation: hsx-glass .8s ease-out forwards,
hsx-border .9s ease-out forwards .8s;
}
.hsx-box.hsx-glass>* {
opacity: 0;
animation: hsx-text .45s forwards .8s;
}
/* --- ALINEACIÓN PARA EL CONTENIDO DEL MODAL --- */
/* ╔══════════ BANNER DESLIZANTE + FLECHAS ══════════╗ */
/* ╔══════════ BANNER DESLIZANTE + FLECHAS ══════════╗ */
/* ── 1. Contenedor: muestra lo que sobresale en X ── */
#hsx-banner-wrap {
position: relative;
overflow-x: visible;
/* deja ver las flechas */
overflow-y: hidden;
scroll-behavior: smooth;
width: 100%;
background: #f8f9fa;
padding: 32px 0;
border-block: 4px solid #fff;
/* la pausa de animación ya la tienes más abajo */
}
/* ── 2. Flechas (un único bloque) ── */
.hsx-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
line-height: 42px;
border: none;
border-radius: 50%;
font: 700 1.8rem/42px 'Segoe UI';
background: #ffffffee;
color: #003a70;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
cursor: pointer;
transition: background .25s;
z-index: 100;
/* SIEMPRE por encima */
}
/* –26 px fuera del marco */
.hsx-arrow.left {
left: -26px;
}
.hsx-arrow.right {
right: -26px;
}
.hsx-arrow:hover {
background: #ffdd57;
}
/* ── 3. Pista deslizante (sin cambios) ── */
#hsx-banner-track {
display: flex;
gap: 24px;
animation: hsx-scroll 35s linear infinite;
/* velocidad */
}
@keyframes hsx-scroll {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
/* loop */
}
/* 4. Pausa la animación al pasar el ratón o usar flechas */
#hsx-banner-wrap:hover #hsx-banner-track,
#hsx-banner-wrap.pause #hsx-banner-track {
animation-play-state: paused;
}
/* ========= BANNER WOW ========= */
.wow-wrapper {
text-align: center;
perspective: 600px;
/* profundidad para el hover 3-D */
margin: 40px 0 28px;
}
.wow-heading {
display: inline-block;
padding: 1.2rem 2.0rem;
background: linear-gradient(135deg, #002b5e 0%, #004f9c 60%, #006ee0 100%);
border: 4px solid #ffdd57;
/* tu amarillo corporativo */
border-radius: 14px;
font: 600 clamp(1.3rem, 4vw+0.3rem, 2.6rem)/1.14 'Orbitron', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
transform: skewX(-8deg);
/* leve ángulo futurista */
box-shadow: 0 9px 28px rgba(0, 0, 0, .35);
position: relative;
transition: transform .35s cubic-bezier(.25, .85, .25, 1),
box-shadow .35s;
}
/* texto vuelve al eje normal dentro del skew */
.wow-heading span {
display: block;
transform: skewX(8deg);
}
/* “extrusión” 3-D mediante varias capas de sombra de texto */
.wow-heading span:first-child {
text-shadow:
0 1px 0 #104f99,
0 2px 0 #0d4385,
0 3px 0 #09366f,
0 4px 0 #062b5e,
0 6px 6px rgba(0, 0, 0, .45);
}
/* destello superior */
.wow-heading::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to bottom, rgba(255, 255, 255, .25), transparent 70%);
mix-blend-mode: overlay;
pointer-events: none;
}
/* contorno/fondo “neón” que late */
@keyframes wow-glow {
0%,
100% {
box-shadow: 0 0 12px rgba(0, 118, 255, .6);
}
50% {
box-shadow: 0 0 22px rgba(0, 118, 255, .9);
}
}
.wow-heading:hover {
transform: skewX(-8deg) translateY(-6px) rotateX(6deg);
animation: wow-glow 2.4s ease-in-out infinite;
}
.ia-callout {
position: fixed;
bottom: 3rem;
left: 2rem;
max-width: 320px;
padding: 1rem 1.3rem;
background: linear-gradient(135deg, #0a0a23, #003b46);
color: #fff;
font-size: .95rem;
font-weight: 500;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
border: 3px solid #00e676;
cursor: pointer;
z-index: 9999;
animation: pulseFlash 2.2s infinite;
transition: transform .25s ease, opacity .4s ease;
opacity: 1;
}
.ia-callout.hidden {
opacity: 0;
pointer-events: none;
}
.ia-callout:hover {
transform: translateY(-4px) scale(1.06);
box-shadow: 0 0 30px rgba(230, 207, 0, 0.6);
}
/* Animación de pulso moderno */
@keyframes pulseFlash {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5);
}
50% {
transform: scale(1.03);
box-shadow: 0 0 18px 10px rgba(0, 230, 118, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
}
}
/* ===========================
FIXES CRÍTICOS (AL FINAL)
=========================== */
/* 🛠️ Bug: había un font-size:100px en móvil */
@media (max-width:575px) {
#banner-promos {
gap: 16px;
padding: 18px 12px;
}
.promo-card {
flex: 1 1 300px;
max-width: 92%;
padding: 18px 16px;
font-size: 1rem !important;
/* <— ya no se “grita” */
line-height: 1.35;
word-break: normal;
text-wrap: pretty;
}
.promo-card>strong {
font-size: 1.05rem;
/* título compacto */
margin-bottom: .35rem;
}
.promo-sub {
font-size: .95rem;
/* subtítulo legible */
}
}
/* 🪟 Modales HS (interesa/syntex): “X” arriba fija + pistas de desplazamiento */
.hs-modal-content {
position: relative;
}
/* pista “desliza para ver más” en móviles dentro del modal */
.modal-scroll-hint {
position: sticky;
bottom: -1px;
left: 0;
right: 0;
text-align: center;
font-size: .9rem;
padding: .5rem .25rem;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .88) 40%, #fff 92%);
color: #003a70;
z-index: 4;
}
@media (min-width:576px) {
.modal-scroll-hint {
display: none;
}
}
/* Bloqueo de scroll del body cuando haya modal abierto */
body.modal-open {
overflow: hidden;
}
/* 🧭 Carrusel HSX: inicia en 0, no “muy atrás”, y deja scroll horizontal visible */
#hsx-banner-wrap {
overflow-x: auto !important;
/* muestra scroll (no visible => no había “barra para bajar”) */
overflow-y: hidden;
padding: 24px 0 12px 0;
scroll-behavior: smooth;
}
/* Botón “X” arriba en modales HSX (los de las tarjetas del carrusel) */
.hsx-box {
position: relative;
}
.hsx-x {
position: absolute;
top: .6rem;
right: .8rem;
font-size: 1.8rem;
line-height: 1;
border: 0;
background: transparent;
color: #003a70;
cursor: pointer;
z-index: 5;
}
.hsx-x:after {
content: "×";
}
/* Ajustes de tipografía dentro de modales para móvil */
@media (max-width:575px) {
.modal-body {
font-size: .98rem;
line-height: 1.5;
}
.modal-body h2 {
font-size: clamp(1.35rem, 6vw, 1.8rem);
}
.modal-body h3 {
font-size: clamp(1.05rem, 4.8vw, 1.2rem);
}
}
/* (Opcional) reduce la marca de agua si se ve muy fuerte al entrar */
.modal-logo-agua {
opacity: .10;
}
/* ===========================
FIXES CRÍTICOS (AL FINAL)
=========================== */
/* 🛠️ Bug: había un font-size:100px en móvil */
@media (max-width:575px) {
#banner-promos {
gap: 16px;
padding: 18px 12px;
}
.promo-card {
flex: 1 1 300px;
max-width: 92%;
padding: 18px 16px;
font-size: 1rem !important;
/* <— ya no se “grita” */
line-height: 1.35;
word-break: normal;
text-wrap: pretty;
}
.promo-card>strong {
font-size: 1.05rem;
/* título compacto */
margin-bottom: .35rem;
}
.promo-sub {
font-size: .95rem;
/* subtítulo legible */
}
}
/* 🧯 Typo que invalida la regla (rompe transform) */
header .header-image:hover,
header .header-image.activa {
transform: scale(1.10);
/* antes: 1.10servicios (inválido) */
}
/* 🪟 Modales HS (interesa/syntex): “X” arriba fija + pistas de desplazamiento */
.hs-modal-content {
position: relative;
}
/* pista “desliza para ver más” en móviles dentro del modal */
.modal-scroll-hint {
position: sticky;
bottom: -1px;
left: 0;
right: 0;
text-align: center;
font-size: .9rem;
padding: .5rem .25rem;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .88) 40%, #fff 92%);
color: #003a70;
z-index: 4;
}
@media (min-width:576px) {
.modal-scroll-hint {
display: none;
}
}
/* Bloqueo de scroll del body cuando haya modal abierto */
body.modal-open {
overflow: hidden;
}
/* 🧭 Carrusel HSX: inicia en 0, no “muy atrás”, y deja scroll horizontal visible */
#hsx-banner-wrap {
overflow-x: auto !important;
/* muestra scroll (no visible => no había “barra para bajar”) */
overflow-y: hidden;
padding: 24px 0 12px 0;
scroll-behavior: smooth;
}
/* Botón “X” arriba en modales HSX (los de las tarjetas del carrusel) */
.hsx-box {
position: relative;
}
.hsx-x {
position: absolute;
top: .6rem;
right: .8rem;
font-size: 1.8rem;
line-height: 1;
border: 0;
background: transparent;
color: #003a70;
cursor: pointer;
z-index: 5;
}
.hsx-x:after {
content: "×";
}
/* Ajustes de tipografía dentro de modales para móvil */
@media (max-width:575px) {
.modal-body {
font-size: .98rem;
line-height: 1.5;
}
.modal-body h2 {
font-size: clamp(1.35rem, 6vw, 1.8rem);
}
.modal-body h3 {
font-size: clamp(1.05rem, 4.8vw, 1.2rem);
}
}
/* (Opcional) reduce la marca de agua si se ve muy fuerte al entrar */
.modal-logo-agua {
opacity: .10;
}
/* Modal base */
.hs-modal {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(10, 16, 28, .55);
backdrop-filter: blur(6px);
z-index: 1000;
}
.hs-modal.hidden {
display: none;
}
.hs-modal-content {
width: min(800px, 92vw);
max-height: min(86vh, 900px);
background: #fff;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
display: flex;
flex-direction: column;
overflow: hidden;
/* evita doble scroll externo */
outline: 1px solid #e6ecf5;
}
.modal-header {
position: sticky;
top: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #fff;
border-bottom: 1px solid #eef2f7;
}
.modal-header h2 {
margin: 0;
font-size: clamp(1.1rem, 1.2vw + .9rem, 1.5rem);
}
.hs-x {
inline-size: 36px;
block-size: 36px;
border: 0;
border-radius: 999px;
cursor: pointer;
background: transparent;
position: relative;
}
.hs-x::before,
.hs-x::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 18px;
height: 2px;
background: #2a2a2a;
transform-origin: center;
}
.hs-x::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.hs-x::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.hs-x:hover {
background: #f3f6fb;
}
.modal-body {
padding: 18px 20px 22px;
overflow: auto;
}
/* scroll solo al contenido */
.modal-body p {
margin: 0 0 12px;
}
.modal-body p+p {
margin-top: 8px;
}
/* separa párrafos sin
*/
.icon-list {
list-style: none;
margin: 14px 0;
padding: 0;
}
.icon-list li {
display: grid;
grid-template-columns: 1.6em 1fr;
gap: .4em;
align-items: start;
margin: .35em 0;
}
.icon-list .icon {
display: inline-block;
line-height: 1.2;
}
.cta {
text-align: center;
margin-top: 16px;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
background: linear-gradient(90deg, var(--cta-g1) 0%, var(--cta-g2) 50%, var(--cta-g3) 100%);
color: #fff;
}
.cta-button:focus-visible {
outline: 3px solid #00A896;
outline-offset: 2px;
}
/* Mantener la tipografía del sitio dentro del modal */
.hs-modal-content,
.hs-modal-content * {
font-family: inherit;
}
/* Volver a tu estilo de títulos (quita el clamp que te pasé) */
.modal-header h2 {
margin: 0;
}
/* sin font-size aquí */
/* === Panel de sectores: versión responsive === */
/* contenedor */
.panel-informativo-sectores {
max-width: 1100px;
/* centrado y ancho controlado */
border-radius: 12px;
border: 2px solid #FFC400;
background: #004a99;
padding: 20px 16px;
}
/* grid adaptable (4 → 3 → 2 → 1 columnas) */
.sectores-wrapper {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 16px;
/* vertical, horizontal */
align-items: stretch;
}
/* “píldoras” con icono + texto */
.sector-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 10px;
padding: 10px 12px;
color: #fff;
/* tamaño fluido sin exagerar en móvil */
font-size: clamp(.95rem, 1.6vw, 1.1rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
line-height: 1.25;
/* que el texto largo corte bien */
white-space: normal;
word-break: break-word;
hyphens: auto;
}
/* hover sutil en desktop */
@media (hover:hover) {
.sector-item:hover {
background: rgba(255, 255, 255, .14);
transform: translateY(-2px);
transition: .25s ease;
}
}
/* ——— Tablet ——— */
@media (max-width: 992px) {
.sectores-wrapper {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ——— Móvil (≤768) ——— */
@media (max-width: 768px) {
.panel-informativo-sectores {
padding: 16px 12px;
}
.sectores-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.sector-item {
padding: 10px;
letter-spacing: .2px;
text-transform: none;
/* mejora legibilidad en móvil */
}
}
/* ——— Móvil pequeño (≤480) ——— */
@media (max-width: 480px) {
.sectores-wrapper {
grid-template-columns: 1fr;
gap: 10px;
}
.sector-item {
font-size: .98rem;
padding: 10px 12px;
}
}
/* === HSX banner: espacio a los lados y gap uniforme === */
#hsx-banner-track {
display: flex;
/* por si no lo tenías */
gap: 20px;
/* separación entre cards */
}
#hsx-banner-track::before,
#hsx-banner-track::after {
content: "";
flex: 0 0 16px;
/* ← espacio izquierdo y derecho */
}
/* === HSX modal: overlay, caja con scroll y botón X === */
.hsx-modal {
position: fixed;
inset: 0;
display: none;
/* oculto por defecto */
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, .55);
z-index: 1000;
}
.hsx-modal:not(.hsx-hidden) {
display: flex;
}
.hsx-box {
max-height: 85vh;
/* ← scroll vertical dentro */
overflow: auto;
/* ← aquí aparece el scroll */
background: #fff;
border-radius: 14px;
padding: 18px 16px 16px 16px;
position: relative;
box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.hsx-x {
position: absolute;
top: 10px;
right: 12px;
font-size: 22px;
line-height: 1;
border: 0;
background: transparent;
cursor: pointer;
}
/* === HSX banner: espacio a los lados y separación entre cards === */
#hsx-banner-track {
display: flex;
gap: 20px;
}
#hsx-banner-track::before,
#hsx-banner-track::after {
content: "";
flex: 0 0 16px;
}
/* === HSX modal: overlay/caja con scroll y botón X === */
.hsx-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(0, 0, 0, .55);
z-index: 1000;
}
.hsx-modal:not(.hsx-hidden) {
display: flex;
}
.hsx-box {
max-height: 85vh;
overflow: auto;
background: #fff;
border-radius: 14px;
padding: 18px 16px 16px;
position: relative;
box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.hsx-x {
position: absolute;
top: 10px;
right: 12px;
font-size: 22px;
line-height: 1;
border: 0;
background: transparent;
cursor: pointer;
}
/* — HSX modal: la caja externa NO scrollea — */
.hsx-modal .hsx-box {
overflow: hidden;
/* evita que la barra salga aquí */
position: relative;
}
/* — El contenido interno SÍ scrollea y reserva canal para la barra — */
.hsx-modal .hsx-box .modal-body {
max-height: min(80vh, 640px);
overflow-y: auto;
scrollbar-gutter: stable both-edges;
/* reserva espacio para la barra */
padding-right: 18px;
/* colchón para navegadores sin soporte */
box-sizing: border-box;
}
.hsx-modal .hsx-box .modal-body h2 {
/* fallbacks por si el navegador no soporta 'anywhere' */
word-break: break-word;
/* legacy */
overflow-wrap: anywhere;
/* moderno */
hyphens: auto;
/* guiones si el idioma está definido (lang="es") */
margin-inline-end: .25rem;
/* lógico: respeta LTR/RTL */
}
/* (Opcional) afina la barra en Chromium */
.hsx-modal .hsx-box .modal-body::-webkit-scrollbar {
width: 10px;
}
/* En modales, el título ocupa su caja y no se desborda */
.hsx-modal .block-title {
width: auto !important;
max-width: 100% !important;
margin-right: 0;
overflow-wrap: anywhere;
text-wrap: balance;
line-height: 1.2;
}
/* — HSX modal: la caja externa NO scrollea — */
.hsx-modal .hsx-box {
overflow: hidden;
/* evita que aparezca barra fuera */
position: relative;
}
/* — El contenido interno SÍ scrollea y reserva espacio para la barra — */
.hsx-modal .hsx-box .modal-body {
max-height: min(80vh, 640px);
overflow-y: auto;
scrollbar-gutter: stable both-edges;
/* reserva canal para la barra */
padding-right: 18px;
/* colchón para navegadores sin soporte */
box-sizing: border-box;
}
/* opcional: afina la barra en Chromium */
.hsx-modal .hsx-box .modal-body::-webkit-scrollbar {
width: 10px;
}
/* Ocultar visualmente la barra de scroll SOLO en el modal */
.hsx-modal .hsx-box .modal-body {
/* sigue escrolleando */
overflow-y: auto;
/* Firefox / Edge (modo IE) */
scrollbar-width: none;
-ms-overflow-style: none;
}
/* Chrome / Safari */
.hsx-modal .hsx-box .modal-body::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Color de texto y título SOLO dentro del modal */
.hsx-modal .hsx-box .modal-body {
color: #111;
/* cuerpo */
}
.hsx-modal .hsx-box .modal-body h2.block-title {
color: #003a70;
/* mismo azul de tu paleta */
}
/* ====== MODALES HS: más ancho útil del contenido ====== */
/* Reduce un poco el padding lateral de la caja (no cambia el tamaño de la caja) */
.hs-modal-content {
padding-inline: clamp(14px, 3vw, 28px);
}
/* El contenido interno (header + body) usa el 100% del ancho disponible */
/* ========== 1) Evitar que se mueva la página de fondo ========== */
html.modal-open,
body.modal-open {
overflow: hidden !important;
/* bloquea scroll del body */
overscroll-behavior: none;
/* evita ‘rebotes’ en móvil */
}
/* El overlay del modal ‘absorbe’ los deslizamientos */
.hs-modal {
overscroll-behavior: contain;
}
/* El contenido del modal scrollea SOLO en Y (sin raya horizontal) */
.hs-modal .hs-modal-content {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* scroll suave iOS */
}
/* ========== 2) Header fijo + efecto 3D y brillo unificado ========== */
.hs-modal .modal-header {
position: sticky;
top: 20px;
z-index: 15;
padding: 10px 2px 14px;
background: #fff;
/* tapa contenido al scrollear */
/* ligera sombra inferior cuando se pega */
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
}
/* Tarjeta de títulos – sin márgenes negativos para evitar overflow */
.hs-modal .modal-header .modal-titles {
width: 100%;
margin: 0 0 20px 0;
padding: 16px 20px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
border: 3px solid var(--primary-blue);
border-radius: 14px;
/* 3D: profundidad + sombra de caída bonita */
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
transform-style: preserve-3d;
perspective: 900px;
position: relative;
}
/* Brillo que recorre el título (suave y elegante) */
.hs-modal .modal-header .modal-titles::after {
content: "";
position: absolute;
inset: -15%;
pointer-events: none;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .65) 10%, transparent 22%);
transform: translateZ(12px) rotate(-20deg) translateX(-60%);
opacity: .0;
animation: headerShine 7.2s ease-in-out infinite;
}
@keyframes headerShine {
0% {
transform: translateZ(12px) rotate(-20deg) translateX(-60%);
opacity: 0;
}
10% {
opacity: .55;
}
50% {
transform: translateZ(12px) rotate(-20deg) translateX(60%);
opacity: 0;
}
100% {
transform: translateZ(12px) rotate(-20deg) translateX(60%);
opacity: 0;
}
}
/* Título H2 con efecto 3D (capas de sombra para volumen) */
.hs-modal .modal-header .modal-titles h2 {
margin: 0 0 6px;
font-family: 'Orbitron', sans-serif;
font-weight: 800;
color: var(--primary-blue);
font-size: clamp(1.6rem, 2.2vw + 1.1rem, 2.4rem);
line-height: 1.1;
text-shadow:
0 1px 0 #e6f0ff,
/* bisel claro */
0 2px 0 rgba(0, 0, 0, .05),
0 3px 0 rgba(0, 0, 0, .04),
0 6px 12px rgba(0, 38, 99, .18);
/* profundidad suave */
transform: translateZ(2px);
}
/* Subtítulo */
.hs-modal .modal-header .modal-titles h3 {
margin: 0;
font-weight: 800;
color: #0a2f68;
font-size: clamp(1.05rem, 1.2vw + .8rem, 1.35rem);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* Borde luminoso sutil alrededor de la tarjeta (efecto tech) */
.hs-modal .modal-header .modal-titles {
box-shadow:
inset 0 1px 6px rgba(255, 255, 255, .6),
0 0 0 1px rgba(255, 255, 255, .5);
}
/* Accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
.hs-modal .modal-header .modal-titles::after {
animation: none !important;
}
}
/* Scroll VISIBLE dentro del modal (móvil y desktop) */
.hs-modal .hs-modal-content .modal-body {
max-height: min(80vh, 640px);
/* obliga el scroll cuando hace falta */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* inercia iOS */
scrollbar-width: thin;
/* Firefox */
}
/* Barra de scroll (Chromium/WebKit) */
.hs-modal .hs-modal-content .modal-body::-webkit-scrollbar {
width: 8px;
}
.hs-modal .hs-modal-content .modal-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .35);
border-radius: 8px;
}
.hs-modal .hs-modal-content .modal-body::-webkit-scrollbar-track {
background: transparent;
}
/* ====== MODALES: TITULOS GRANDES Y A TODO ANCHO ====== */
/* ====== SYNTEX: IMAGEN “HERO” GRANDE (si la usas) ====== */
#syntex-modal .syntex-hero {
display: block;
width: min(780px, 94%);
max-height: 240px;
object-fit: cover;
/* que se recorte bonito */
margin: 4px auto 12px;
border-radius: 12px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
/* ====== SCROLL SOLO EN EL CUERPO, VISIBLE EN MÓVIL ====== */
.hs-modal .hs-modal-content {
max-height: min(90vh, 950px);
overflow: hidden;
/* nada de scroll aquí */
}
.hs-modal .modal-body {
max-height: calc(90vh - 170px);
/* reserva para header + botones */
overflow-y: auto;
/* ← scroll visible */
scrollbar-gutter: stable both-edges;
padding-right: 16px;
}
/* ====== SCROLL SOLO EN EL CUERPO, VISIBLE EN MÓVIL ====== */
.planes-content {
max-width: min(1600px, 96vw);
margin-inline: auto;
}
/* ====== Grid de planes (responsive) ====== */
/* Base: móvil (1 columna) */
.plans {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: start;
justify-content: center;
/* centra el grid cuando hay pocas columnas */
}
/* Laptop / tablet: 2 columnas */
@media (min-width: 900px) {
.plans {
grid-template-columns: repeat(2, minmax(380px, 1fr));
/* patrón para 5 tarjetas: la 5ª centrada ocupando las dos columnas */
grid-template-areas:
"card1 card2"
"card3 card4"
"card5 card5";
}
.plans>.plan:nth-of-type(1) {
grid-area: card1;
}
.plans>.plan:nth-of-type(2) {
grid-area: card2;
}
.plans>.plan:nth-of-type(3) {
grid-area: card3;
}
.plans>.plan:nth-of-type(4) {
grid-area: card4;
}
.plans>.plan:nth-of-type(5) {
grid-area: card5;
}
}
/* Desktop: 3 columnas (3 arriba + 2 abajo centrados) */
@media (min-width: 1400px) {
.plans {
grid-template-columns: repeat(3, minmax(420px, 1fr));
grid-template-areas:
"card1 card2 card3"
"card4 . card5";
}
}
/* ====== Tarjetas: altura pareja y CTA al fondo ====== */
.plan {
display: flex;
flex-direction: column;
height: 100%;
}
.plan .cta-button {
margin-top: auto;
}
/* ====== Listas internas: limpia bullets (por si aparecen) ====== */
.feature-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.feature-list li {
break-inside: avoid;
}
/* En pantallas muy anchas, reparte en 2 columnas para bajar la altura */
@media (min-width: 1600px) {
.feature-list {
columns: 2;
column-gap: 16px;
}
}
/* === Desktop (>=1400px): 3 arriba + 2 abajo CENTRADOS COMO PAREJA === */
/* Usamos 5 columnas: 1 gutter a cada lado + 3 columnas para tarjetas */
/* Desktop (>=1400px): 3 arriba + 2 abajo CENTRADAS */
@media (min-width: 1400px) {
.plans {
grid-template-columns: 1fr repeat(3, minmax(420px, 1fr)) 1fr;
/* gutter | 3 cards | gutter */
gap: 24px;
}
/* Arriba (igual que antes) */
.plans>.plan:nth-of-type(1) {
grid-column: 2;
grid-row: 1;
}
.plans>.plan:nth-of-type(2) {
grid-column: 3;
grid-row: 1;
}
.plans>.plan:nth-of-type(3) {
grid-column: 4;
grid-row: 1;
}
/* ABAJO EN EL CENTRO (cámbialas a columnas 2 y 3) */
.plans>.plan:nth-of-type(4) {
grid-column: 2;
grid-row: 2;
}
/* izquierda de la pareja */
.plans>.plan:nth-of-type(5) {
grid-column: 3;
grid-row: 2;
}
/* derecha de la pareja */
}
/* Leyenda compacta bajo tablas de soporte */
.support-legend {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 10px 0 18px;
}
.legend-card {
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 6px 14px rgba(0, 0, 0, .05);
}
.legend-card h5 {
margin: 0 0 8px 0;
font-weight: 800;
color: var(--primary-blue);
font-family: 'Orbitron', sans-serif;
font-size: 1rem;
}
.legend-list {
list-style: none;
margin: 0;
padding: 0;
font-size: .95rem;
}
.legend-list li {
position: relative;
padding-left: 22px;
margin: 6px 0;
}
.legend-list li::before {
content: '✔';
position: absolute;
left: 0;
top: 0;
color: var(--primary-blue);
font-weight: 900;
}
/* Responsive */
@media (max-width:768px) {
.support-legend {
grid-template-columns: 1fr;
}
}
/* ===== Tablas de soporte (reutiliza tu paleta) ===== */
.pricing-wrap {
max-width: 1500px;
margin: 8px auto 40px;
padding: 0 12px;
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 8px 0 6px;
}
.pricing-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
overflow: hidden;
}
.pricing-table thead th {
background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
color: #fff;
font-family: 'Orbitron', sans-serif;
font-weight: 800;
letter-spacing: .3px;
text-align: center;
padding: 14px 12px;
font-size: 1.02rem;
white-space: nowrap;
}
.pricing-table th.plan-col {
text-align: left;
background: #f9fbff;
color: #0d2d5a;
font-weight: 800;
font-family: 'Inter', sans-serif;
padding: 14px 16px;
min-width: 260px;
}
.pricing-table tbody td,
.pricing-table tbody th {
border-top: 1px solid #eef1f5;
padding: 12px 14px;
text-align: center;
vertical-align: middle;
font-size: 1rem;
}
.pricing-table tbody tr:nth-child(even) td,
.pricing-table tbody tr:nth-child(even) th.plan-col {
background: #fcfdff;
}
.pricing-table .price {
color: var(--primary-blue);
font-weight: 900;
font-family: 'Orbitron', sans-serif;
}
.pricing-table .na {
color: #000000;
font-weight: 700;
opacity: .7;
}
.tabla-nota {
font-size: 15px;
color: #000;
margin: 6px 2px 14px;
text-align: center;
/* centra el texto */
font-weight: 700;
/* negrilla (bold) */
/* opcional: ajusta tamaño si quieres */
/* font-size: 16px; */
}
/* Responsive: tipografía compacta y scroll */
@media (max-width: 768px) {
.pricing-table thead th {
font-size: .95rem;
}
.pricing-table tbody td,
.pricing-table tbody th {
font-size: .95rem;
}
}
/* ==========================
VARIABLES (colores efecto)
========================== */
:root {
--cta-g1: #e64055;
/* rojo/rosa izquierda */
--cta-g2: #7a3fab;
/* morado centro */
--cta-g3: #0e4b9f;
/* azul derecha */
--cta-shadow: rgba(14, 75, 159, .35);
}
/* ===============================================
RESET de layouts previos (grid-areas forzadas)
=============================================== */
@media (min-width: 0) {
.plans {
grid-template-areas: none !important;
}
.plans>.plan {
grid-area: auto !important;
}
}
/* ==========================
GRID DE PLANES RESPONSIVE
========================== */
/* Base: móvil (1 columna) */
.plans {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
align-items: start;
justify-content: center;
}
/* Laptop / Tablet: 2 columnas */
@media (min-width: 900px) {
.plans {
grid-template-columns: repeat(2, minmax(360px, 1fr));
}
}
/* Desktop: 3 columnas (lo ideal) */
@media (min-width: 1200px) {
.plans {
grid-template-columns: repeat(3, minmax(380px, 1fr));
}
}
/* ==========================
TARJETAS Y CONTENIDO INTERNO
========================== */
.plan {
display: flex;
flex-direction: column;
height: 100%;
}
.plan .plan-header h3 {
margin: 0 0 6px;
}
.plan .plan-price {
white-space: nowrap;
}
.plan .cta-button {
margin-top: auto;
}
/* siempre al fondo */
/* Listas internas limpias y compactas */
.feature-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.feature-list li {
break-inside: avoid;
margin-bottom: 10px;
}
.feature-list .feat-head {
font-weight: 800;
display: flex;
gap: .5rem;
}
.feature-list .feat-desc {
margin: 4px 0 0;
line-height: 1.45;
}
/* Muy ancho: reparte la lista en 2 columnas para bajar altura */
@media (min-width: 1500px) {
.feature-list {
columns: 2;
column-gap: 16px;
}
}
/* ============================================
BOTONES "Lo Quiero" — efecto pill degradado
============================================ */
.plans .cta-button {
appearance: none;
border: 0;
cursor: pointer;
width: 100%;
padding: 14px 28px;
border-radius: 9999px;
font-weight: 800;
letter-spacing: .4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
background: linear-gradient(90deg, var(--cta-g1) 0%, var(--cta-g2) 50%, var(--cta-g3) 100%);
box-shadow:
0 10px 22px var(--cta-shadow),
inset 0 -3px 0 rgba(0, 0, 0, .25);
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* Brillo/gloss como el botón flotante */
.plans .cta-button::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(120% 80% at 10% 8%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 40%, transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
mix-blend-mode: screen;
opacity: .9;
transition: opacity .18s ease, transform .18s ease;
}
.plans .cta-button:hover {
transform: translateY(-2px);
box-shadow:
0 14px 28px var(--cta-shadow),
inset 0 -3px 0 rgba(0, 0, 0, .30);
filter: saturate(1.05) brightness(1.03);
}
.plans .cta-button:hover::before {
transform: translateY(-2px);
opacity: 1;
}
.plans .cta-button:active {
transform: translateY(0);
box-shadow:
0 8px 14px var(--cta-shadow),
inset 0 -1px 0 rgba(0, 0, 0, .22);
filter: brightness(.96);
}
.plans .cta-button:focus-visible {
outline: 3px solid rgba(14, 75, 159, .35);
outline-offset: 3px;
}
/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
.plans .cta-button,
.plans .cta-button::before {
transition: none;
}
}
/* ====== Footer contact - GRID 3/2/1 con estilo "wow" ====== */
.footer-contact {
display: grid;
/* ← grid (no flex) */
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 18px;
max-width: 1200px;
margin: 22px auto 36px;
padding: 0 8px;
perspective: 900px;
/* para el tilt */
}
/* Cada contiene una tarjeta (el ) */
.footer-contact p {
margin: 0;
}
/* Tarjeta vidrio + borde neón + 3D */
.footer-contact .footer-link {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 18px;
border-radius: 16px;
text-decoration: none;
color: #fff;
/* vidrio */
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .14);
/* sombra + relieve */
box-shadow: 0 10px 24px rgba(0, 0, 0, .28),
inset 0 1px 0 rgba(255, 255, 255, .08);
/* 3D tilt */
transform: translateY(0) rotateX(0) rotateY(0);
transition: transform .25s ease, box-shadow .28s ease, filter .28s ease;
position: relative;
overflow: hidden;
}
/* Borde neón (truco con máscara) */
/* Brillo barrido */
.footer-contact .footer-link::before {
content: "";
position: absolute;
top: -160%;
left: -30%;
width: 60%;
height: 420%;
transform: rotate(25deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
opacity: 0;
transition: opacity .25s ease, transform .9s ease;
pointer-events: none;
}
.footer-contact .footer-link:hover,
.footer-contact .footer-link:focus-visible {
transform: translateY(-6px) rotateX(6deg) rotateY(-4deg);
box-shadow: 0 18px 40px rgba(0, 0, 0, .35),
0 0 26px rgba(0, 118, 255, .38);
outline: none;
}
.footer-contact .footer-link:hover::before,
.footer-contact .footer-link:focus-visible::before {
opacity: 1;
transform: translateX(220%) rotate(25deg);
}
/* Iconos */
.footer-contact .icon {
width: 28px;
height: 28px;
border-radius: 8px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
transition: transform .25s ease;
}
.footer-contact .footer-link:hover .icon {
transform: scale(1.06);
}
/* Animación de entrada escalonada */
@keyframes floatIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.footer-contact p {
opacity: 0;
animation: floatIn .6s ease forwards;
}
.footer-contact p:nth-child(1) {
animation-delay: .04s
}
.footer-contact p:nth-child(2) {
animation-delay: .08s
}
.footer-contact p:nth-child(3) {
animation-delay: .12s
}
.footer-contact p:nth-child(4) {
animation-delay: .16s
}
.footer-contact p:nth-child(5) {
animation-delay: .20s
}
.footer-contact p:nth-child(6) {
animation-delay: .24s
}
/* Las dos líneas de dirección = una fila completa centrada */
.footer-contact p:nth-last-of-type(2),
.footer-contact p:last-of-type {
grid-column: 1 / -1;
/* ocupan todo el ancho */
text-align: center;
color: #d8d8d8;
opacity: .9;
animation-delay: .28s;
}
.footer-contact p:last-of-type strong {
color: #fff;
}
/* Responsive */
@media (max-width: 1024px) {
.footer-contact {
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 16px;
}
}
@media (max-width: 580px) {
.footer-contact {
grid-template-columns: 1fr;
gap: 12px;
}
.footer-contact .footer-link {
padding: 14px 16px;
}
}
/* Accesibilidad: menos movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
.footer-contact .footer-link,
.footer-contact .footer-link::before {
transition: none;
}
.footer-contact p {
animation: none;
opacity: 1;
}
}
/* === Ajustes pedidos: iconos redondeados + flotar solos + URLs en negrita === */
/* ===== Footer: logos estilo “badge” publicitario ===== */
.footer-logos-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px 18px;
/* espacio uniforme */
padding: 8px 0 4px;
}
/* Cada logo se ve dentro de una “píldora” blanca con sombra */
.footer-logos-container img {
height: 56px;
/* tamaño consistente */
max-width: 140px;
/* evita logos demasiado largos */
object-fit: contain;
background: #fff;
/* hace la píldora */
padding: 10px 14px;
/* aire alrededor del logo */
border-radius: 14px;
/* “medio redondos” */
box-shadow:
0 8px 22px rgba(0, 0, 0, .15),
0 2px 8px rgba(0, 0, 0, .10);
outline: 1px solid rgba(0, 0, 0, .06);
outline-offset: -1px;
/* look inicial más sobrio; al hover se “encienden” */
filter: saturate(.9) contrast(.98) grayscale(.05);
transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease,
outline-color .25s ease;
}
/* Hover / focus: levanta, ilumina y satura colores */
.footer-logos-container img:hover,
.footer-logos-container img:focus-visible {
transform: translateY(-6px) scale(1.05);
box-shadow:
0 16px 34px rgba(0, 0, 0, .22),
0 6px 16px rgba(0, 0, 0, .18);
filter: none;
outline-color: rgba(0, 94, 171, .28);
/* azul corporativo suave */
}
/* Flotado sutil alternado para dar vida */
@keyframes floaty {
from {
transform: translateY(0)
}
to {
transform: translateY(-6px)
}
}
/* alterna quién flota para que no “salten” todos a la vez */
.footer-logos-container img:nth-child(odd) {
animation: floaty 6s ease-in-out infinite alternate;
}
.footer-logos-container img:nth-child(even) {
animation: floaty 7s ease-in-out 1s infinite alternate;
}
/* Respeto accesibilidad: si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
.footer-logos-container img {
animation: none !important;
transition: none;
}
}
/* Responsive fino */
@media (max-width: 768px) {
.footer-logos-container img {
height: 48px;
padding: 9px 12px;
}
}
@media (max-width: 480px) {
.footer-logos-container {
gap: 12px 14px;
}
.footer-logos-container img {
height: 42px;
padding: 8px 10px;
border-radius: 12px;
}
}
/* === Licencias M365 (2 columnas, estilo tarjetas con chips) === */
.lic-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 12px;
}
@media (max-width:992px) {
.lic-grid {
grid-template-columns: 1fr;
}
}
.lic-card {
background: #fff;
border-left: 5px solid var(--primary-blue);
border-radius: 12px;
padding: 18px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
transition: transform .25s, box-shadow .25s;
}
.lic-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 94, 171, .18);
}
.lic-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.lic-head h3 {
margin: 0;
color: var(--primary-blue);
font-family: 'Orbitron', sans-serif;
font-size: 1.25rem;
color: #ffffff;
}
.lic-badge {
background: #ffdd57;
color: #003a70;
font-weight: 800;
border-radius: 999px;
padding: 6px 10px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.lic-plan-items {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
gap: 10px;
}
.lic-plan-items li {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"name price"
"desc price";
align-items: center;
gap: 4px 10px;
padding: 12px 10px;
background: #f8fafc;
border: 1px solid #eef2f7;
border-radius: 10px;
}
.lic-plan-items li.is-reco {
border-color: #ffd54a;
background: #fffdf5;
}
.lic-plan-items .name {
grid-area: name;
font-weight: 800;
}
.lic-plan-items .price-pill {
grid-area: price;
justify-self: end;
background: #ffdd57;
color: #003a70;
font-weight: 900;
border-radius: 999px;
padding: 4px 10px;
font-size: .95rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.lic-plan-items .unit {
grid-area: price;
justify-self: end;
margin-top: 50px;
font-size: .85rem;
color: #6b7280;
}
.lic-plan-items .desc {
grid-area: desc;
font-size: .95rem;
color: #374151;
}
/* === Addons/licencias: grid de 3 columnas, tarjetas y chips de precio === */
.addons-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 12px;
}
@media (max-width: 992px) {
.addons-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.addons-grid {
grid-template-columns: 1fr;
}
}
.addon-card {
background: #fff;
border-left: 5px solid var(--primary-blue);
border-radius: 12px;
padding: 16px 16px 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
transition: transform .25s ease, box-shadow .25s ease;
}
.addon-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 94, 171, .18);
}
.addon-card h4 {
margin: 0 0 8px 0;
font-weight: 800;
color: var(--primary-blue);
font-family: 'Orbitron', sans-serif;
letter-spacing: .3px;
}
.addon-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.addon-items li {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"name price"
"desc price";
align-items: center;
gap: 4px 10px;
padding: 10px 8px;
background: #f8fafc;
border: 1px solid #eef2f7;
border-radius: 10px;
}
.addon-items .name {
grid-area: name;
font-weight: 700;
}
.addon-items .price-pill {
grid-area: price;
justify-self: end;
background: #ffdd57;
color: #003a70;
font-weight: 900;
border-radius: 999px;
padding: 4px 10px;
font-size: .95rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.addon-items .unit {
grid-area: price;
justify-self: end;
margin-top: 45px;
/* se coloca bajo el chip de precio */
font-size: .85rem;
color: #6b7280;
}
.addon-items .desc {
grid-area: desc;
font-size: .95rem;
color: #374151;
}
.addons-note {
font-size: 15px;
display: block;
/* ocupa toda la línea */
width: 100%;
/* 100% del contenedor padre */
box-sizing: border-box;
margin: 6px 0 14px;
/* sin márgenes laterales para que “pegue” a los bordes */
color: #000;
text-align: center;
font-weight: 700;
}
/* =======================
BANNER DE SECTORES PRO
(añadir al final del CSS)
======================= */
/* Fondo full-bleed y franja pro */
.panel-informativo-sectores {
/* full width real (anula límites previos) */
max-width: 100vw;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* franja con degradé sutil y bordes corporativos */
background: linear-gradient(180deg, #0b4f9e 0%, #074a90 55%, #0b4f9e 100%);
border-top: 3px solid #FFC400;
border-bottom: 3px solid #FFC400;
/* respiración */
padding: 26px 0;
position: relative;
}
/* Pista centrada dentro de la franja */
.sectores-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 22px;
display: grid;
/* auto-fit reparte bonito en anchos grandes y chicos */
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px 16px;
/* ligera entrada al aparecer */
animation: sectFade .45s ease-out both;
}
/* Tarjeta/chip “glass” */
.sector-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 72px;
padding: 14px 18px;
border-radius: 16px;
color: #fff;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .4px;
line-height: 1.25;
/* tamaño que respira en todos los anchos */
font-size: clamp(.95rem, 1.1vw + .55rem, 1.15rem);
/* efecto vidrio + profundidad */
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
border: 1px solid rgba(255, 255, 255, .18);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .06),
0 8px 22px rgba(0, 0, 0, .22);
backdrop-filter: blur(2px);
/* interacción */
cursor: default;
/* si quieres que sean clicables, usa cursor:pointer */
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
border-color .25s ease;
user-select: none;
}
/* Icono (emoji) un pelín más protagónico */
.sector-item::first-letter {
font-size: 1.25em;
}
/* Brillo diagonal que barre al hover */
.sector-item::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(120deg,
transparent 0%,
rgba(255, 255, 255, .22) 18%,
rgba(255, 255, 255, .08) 28%,
transparent 40%);
transform: translateX(-120%);
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
border-radius: inherit;
}
/* Hover/tap: levanta, aclara y saca halo */
.sector-item:hover {
transform: translateY(-4px) scale(1.01);
background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .09),
0 14px 28px rgba(0, 0, 0, .26),
0 0 0 3px rgba(0, 123, 255, .22);
/* halo azul fino */
}
.sector-item:hover::after {
transform: translateX(120%);
}
/* Active: “clic” suave */
.sector-item:active {
transform: translateY(-1px) scale(.995);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .07),
0 8px 18px rgba(0, 0, 0, .22);
}
/* Focus accesible (si los vuelves botones/enlaces) */
.sector-item:focus-visible {
outline: 3px solid #ffdd57;
outline-offset: 2px;
}
/* Pequeña variación entre tarjetas para evitar monotonía */
.sector-item:nth-child(3n) {
background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
}
.sector-item:nth-child(3n):hover {
background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .08));
}
/* Ajustes responsivos finos */
@media (max-width: 991px) {
.panel-informativo-sectores {
padding: 22px 0;
}
.sectores-wrapper {
gap: 12px 14px;
}
.sector-item {
min-height: 66px;
padding: 12px 16px;
}
}
@media (max-width: 575px) {
.sectores-wrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sector-item {
font-size: 1rem;
}
}
/* Animación de entrada */
@keyframes sectFade {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Quitar el espacio blanco encima del banner de sectores --- */
/* 1) Si el bloque anterior tiene margen inferior, quítalo sólo cuando
justo después viene el banner (soporte moderno con :has) */
:where(section, .info-container, .planes-content, .wow-wrapper, .footer-logos-container):has(+ .panel-informativo-sectores) {
margin-bottom: 0 !important;
}
/* 2) Asegura que el banner no aporte margen extra */
.panel-informativo-sectores {
margin-top: 0 !important;
}
/* 3) Fallback por si algún navegador no soporta :has:
“cose” el banner 1px hacia arriba para tapar cualquier resto */
*+.panel-informativo-sectores {
margin-top: -1px !important;
}
/* (Opcional) Si aún ves un espacio más grande, súbele este valor
de forma progresiva hasta que quede pegado:
* + .panel-informativo-sectores{ margin-top: -12px!important; }
*/
/* ===== Banner Promos (3-2-1 columnas) ===== */
.banner-promos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px);
margin: clamp(16px, 2vw, 24px) 0;
}
.promo-card {
background: #fff;
border-radius: 22px;
padding: clamp(18px, 2vw, 22px);
border: 1.5px solid rgba(10, 40, 90, .10);
box-shadow: 0 10px 28px rgba(2, 22, 50, .20);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
height: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
user-select: none;
}
.promo-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(2, 22, 50, .28);
border-color: rgba(15, 110, 220, .22);
}
.promo-title {
display: block;
font-weight: 800;
font-size: clamp(18px, 2.2vw, 22px);
color: #0b3a66;
margin-bottom: 8px;
}
.promo-sub {
color: #234a78;
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.35;
}
/* Tint suave por tarjeta (opcional) */
.promo-card.interesa {
border-color: rgba(0, 140, 255, .14);
}
.promo-card.syntex {
border-color: rgba(255, 80, 50, .14);
}
.promo-card.procesos {
border-color: rgba(50, 180, 80, .16);
}
@media (max-width:1100px) {
.banner-promos {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:680px) {
.banner-promos {
grid-template-columns: 1fr;
}
}
/* ===== Grid del modal de procesos ===== */
.proc-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 8px 0 12px;
}
.proc-col h4 {
margin: 0 0 8px;
color: #0b3a66;
font-weight: 800;
}
.icon-list.tight li {
margin-bottom: 6px;
}
.proc-note {
margin-top: 8px;
color: #1c4170;
}
@media (max-width:1100px) {
.proc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:680px) {
.proc-grid {
grid-template-columns: 1fr;
}
}
/* ==== AUTO-MODAL en blanco, título centrado y 1 sola sección visible ==== */
/* Contenedor principal blanco (mismo look del otro modal) */
#auto-modal .hs-modal-content.auto-modal {
background: #fff;
color: #1b2b3a;
border: 3px solid #1f63c6;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(8, 24, 54, .35);
padding: 22px;
}
/* Layout: menú izquierda + contenido derecha */
#auto-modal .auto-body {
margin-top: 12px;
display: grid;
grid-template-columns: 300px 1fr;
gap: 18px;
min-height: 420px;
}
@media (max-width:820px) {
#auto-modal .auto-body {
grid-template-columns: 1fr;
}
}
/* Menú de chips (izquierda) */
#auto-modal .auto-areas {
background: #0b3a6a;
border-radius: 8px;
padding: 12px 10px;
max-height: 72vh;
overflow: auto;
}
#auto-modal .area-chip {
display: inline-block;
text-decoration: none;
background: #e9f2ff;
color: #0A488E;
border: 1px solid #cfe1ff;
padding: 10px 12px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
margin: 6px 8px 6px 0;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#auto-modal .area-chip:hover {
transform: translateY(-2px);
border-color: #1f63c6;
}
/* Panel derecho — SOLO UNA visible (CSS puro con :has + :target) */
#auto-modal .auto-panel .area-detail {
display: none;
}
/* oculta todas por defecto */
/* Si hay un :target activo, muestra SOLO ese */
#auto-modal .auto-panel:has(.area-detail:target) .area-detail {
display: none;
}
#auto-modal .auto-panel:has(.area-detail:target) .area-detail:target {
display: block;
}
/* Si NO hay :target, muestra la primera como default */
#auto-modal .auto-panel:not(:has(.area-detail:target)) .area-detail:first-of-type {
display: block;
}
/* Títulos y listas del contenido */
#auto-modal .area-detail h4 {
margin: 0 0 8px;
font-size: 20px;
color: #0A488E;
}
#auto-modal .area-detail ul {
margin: 0 0 10px;
padding-left: 18px;
display: grid;
gap: 6px;
}
#auto-modal .area-detail li {
color: #2a3d52;
line-height: 1.55;
}
/* Enlaces dentro del modal */
#auto-modal a {
color: #0A488E;
text-decoration: none;
}
#auto-modal a:hover {
text-decoration: underline;
}
/* Oculta CTAs repetidos aquí */
#auto-modal .cta-row,
#auto-modal .cta-button-offer {
display: none !important;
}
/* ==== PARCHE: chips del menú con mismo tamaño ==== */
/* 1) La columna de chips usa grid de 1 columna */
#auto-modal .auto-areas {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 12px 10px !important;
}
/* 2) Cada chip ocupa el 100% del ancho y misma altura */
#auto-modal .auto-areas .area-chip {
width: 100% !important;
/* mismo ancho */
min-height: 48px !important;
/* misma altura visual */
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* centra el texto */
border-radius: 12px !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
padding: 10px 12px !important;
text-align: center !important;
white-space: normal !important;
/* permite 2 líneas máximo */
overflow: hidden !important;
}
/* 3) Opcional: limita a 2 líneas con elipsis si el texto es largo */
#auto-modal .auto-areas .area-chip {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
}
/* 4) Estado activo consistente */
#auto-modal .auto-areas .area-chip.active {
background: #1f63c6 !important;
color: #fff !important;
border-color: #1f63c6 !important;
}
/* asegura posicionamiento para el ribbon */
/* =========================================
CINTA PROMOCIONAL (RIBBON) — FIJA EN SU SITIO
(tu código + parches para que NO se mueva)
========================================= */
/* La tarjeta necesita posición/perspectiva para el 3D */
/* --- BASE DEL RIBBON (con tu posición y tamaño) --- */
/* === Centrar la tarjeta en su contenedor === */
.plan-card {
position: relative;
perspective: 900px;
/* como ya lo tienes */
margin: 0 auto;
/* centra la card en su columna/contenedor */
}
/* Si el contenedor es un grid/flex, centramos sus hijos (opcional de apoyo) */
.plans-grid,
.plans-row,
.plan-cards-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* === Ribbon/banner centrado y horizontal (derecho) sobre la card === */
.plan-ribbon {
position: absolute;
left: 50%;
top: 16px;
/* pon 50% si lo quieres al centro vertical */
transform: translateX(-50%) rotate(0deg) !important;
/* quita cualquier rotación previa */
-webkit-transform: translateX(-50%) rotate(0deg) !important;
text-align: center;
z-index: 3;
right: auto !important;
/* evita que reglas anteriores lo peguen a la derecha */
}
/* Si tu ribbon era diagonal de esquina, a veces traen skew: lo anulamos */
.plan-ribbon {
transform: translateX(-50%) rotate(0deg) skew(0deg, 0deg) !important;
}
/* Desactivar animaciones en hover/activos (como ya lo tenías) */
.plan-card:hover .plan-ribbon {
animation: none !important;
}
.plan-card.active .plan-ribbon,
.plan-card:focus-within .plan-ribbon {
animation: none !important;
}
/* (Opcional) Ribbon ancho a lo largo de la card, con márgenes internos */
.plan-ribbon--full {
width: calc(100% - 32px);
/* ajusta el margen lateral del ribbon dentro de la card */
left: 50%;
transform: translateX(-50%) rotate(0deg) !important;
}
/* (Opcional) Ribbon centrado en medio de la card (vertical + horizontal) */
.plan-card.center-ribbon .plan-ribbon {
top: 50%;
transform: translate(-50%, -50%) rotate(0deg) !important;
}
/* =========================================
ANIMACIONES (incluyo las tuyas)
========================================= */
/* (NO se usa, la dejamos por si la quieres reactivar después) */
@keyframes ribbonFloat3D {
0%,
100% {
/* Mantiene rotación original y posición */
transform: rotate(45deg) translateY(0) rotateX(0deg) scale(1);
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
}
50% {
transform: rotate(45deg) translateY(-6px) rotateX(7deg) scale(1.015);
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .25));
}
}
/* Brillo que atraviesa la cinta (no cambia su posición absoluta) */
@keyframes ribbonShine {
0% {
transform: translateZ(12px) rotate(-45deg) translateX(-60%);
opacity: 0;
}
15% {
opacity: .55;
}
50% {
transform: translateZ(12px) rotate(-45deg) translateX(60%);
opacity: 0;
}
100% {
transform: translateZ(12px) rotate(-45deg) translateX(60%);
opacity: 0;
}
}
/* Accesibilidad: si el usuario prefiere menos animación, apagamos el brillo */
@media (prefers-reduced-motion: reduce) {
.plan-ribbon,
.plan-ribbon::after {
animation: none !important;
}
}
/* =========================================
RESPONSIVE
(si quieres que en móvil siga EXACTAMENTE en el mismo sitio,
no cambies top/right aquí; mantengo el tamaño más pequeño sin moverla)
========================================= */
@media (max-width: 640px) {
.plan-ribbon {
width: 280px;
/* compacto en móvil */
height: 40px;
top: -600px;
/* MISMO ANCLAJE (no se mueve) */
right: 5px;
/* MISMO ANCLAJE (no se mueve) */
}
.plan-ribbon b {
font-size: 12px;
}
.plan-ribbon i {
font-size: 10px;
}
}
/* --- Navbar móvil: botón siempre clickeable --- */
#hamburger {
position: relative;
z-index: 10050;
/* por encima de banners/ctas */
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
/* Contenedor del menú móvil */
@media (max-width: 992px) {
#menu {
position: fixed;
top: var(--nav-h, 64px);
/* ajusta si tu header es más alto */
left: 0;
right: 0;
background: #0A488E;
/* tu azul de marca */
color: #fff;
transform: translateY(-110%);
transition: transform .25s ease;
box-shadow: 0 10px 24px rgb(255, 255, 255);
z-index: 10040;
pointer-events: none;
/* no capta clics cuando está cerrado */
}
#menu.show {
transform: translateY(0);
pointer-events: auto;
/* habilita clics al abrir */
}
/* Si tu menú es una lista vertical */
#menu ul {
margin: 0;
padding: 10px 14px;
list-style: none;
}
#menu a {
display: block;
padding: 12px 10px;
color: #fff;
text-decoration: none;
}
#menu a:active,
#menu a:focus {
background: rgb(255, 255, 255);
border-radius: 10px;
}
}
/* Evita que algo tape la barra (por si hay CTAs flotantes) */
header,
.site-header,
#topbar {
position: sticky;
top: 0;
z-index: 10060;
/* por encima del menú y cualquier overlay raro */
}
/* Bloquea scroll del body cuando el menú está abierto */
body.nav-open {
overflow: hidden;
}
/* ====== HEADER LAYOUT (logo + título) ====== */
header {
display: grid;
grid-template-columns: clamp(56px, 10vw, 96px) 1fr;
/* logo | texto */
gap: clamp(8px, 1.2vw, 16px);
align-items: center;
padding: clamp(6px, 1vw, 12px) clamp(8px, 2vw, 18px);
}
/* El contenedor del texto NO desborda */
header .header-text-container {
min-width: 0;
}
/* ====== TÍTULO 3D RESPONSIVE ====== */
.titulo-fijo-lateral {
/* colores del efecto */
--stroke: #083b7a;
--fill-top: #ffffff;
--fill-mid: #eaf2ff;
--fill-bot: #cfe0ff;
position: relative;
margin: 0;
text-transform: uppercase;
text-align: center;
/* en móvil queda alineado al texto */
line-height: .94;
letter-spacing: .01em;
font-family: 'Orbitron', system-ui, Segoe UI, Roboto, sans-serif;
font-weight: 100;
font-size: clamp(24px, 6.2vw + .2rem, 72px);
/* fluido: no se corta */
-webkit-text-stroke: 2px var(--stroke);
filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22));
word-break: normal;
}
/* Relleno degradado */
.titulo-fijo-lateral>span {
background: linear-gradient(180deg, var(--fill-top) 0%, var(--fill-mid) 45%, var(--fill-bot) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Extrusión sutil (profundidad) */
.titulo-fijo-lateral::before {
content: attr(data-title);
position: absolute;
inset: 0;
color: transparent;
text-shadow:
1px 1px 0 var(--stroke),
2px 2px 0 var(--stroke),
3px 3px 0 var(--stroke),
4px 4px 0 var(--stroke);
pointer-events: none;
opacity: .32;
}
/* Brillo (sheen) controlado */
.titulo-fijo-lateral::after {
content: "";
position: absolute;
inset: -6% -2%;
border-radius: 20px;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .75) 20%, transparent 40%);
mix-blend-mode: screen;
animation: tituloSheen 6s ease-in-out infinite;
pointer-events: none;
}
/* Balancea saltos de línea cuando el navegador lo soporta */
@supports (text-wrap: balance) {
.titulo-fijo-lateral {
text-wrap: balance;
}
}
/* Tablets y móviles: afinar contorno y evitar “grosor” excesivo */
@media (max-width: 900px) {
.titulo-fijo-lateral {
-webkit-text-stroke: 1.5px var(--stroke);
}
}
@media (max-width: 560px) {
header {
grid-template-columns: clamp(52px, 12vw, 70px) 1fr;
}
.titulo-fijo-lateral {
-webkit-text-stroke: 1.2px var(--stroke);
line-height: .98;
letter-spacing: .005em;
text-align: left;
}
/* Suaviza el brillo en pantallas pequeñas */
.titulo-fijo-lateral::after {
animation-duration: 8s;
opacity: .85;
}
}
/* Accesibilidad: respetar reduce motion */
@media (prefers-reduced-motion: reduce) {
.titulo-fijo-lateral::after {
animation: none;
}
}
/* Brillo que recorre el título */
@keyframes tituloSheen {
0% {
transform: translateX(-55%);
opacity: 0;
}
12% {
opacity: .65;
}
45% {
transform: translateX(55%);
opacity: 0;
}
100% {
transform: translateX(55%);
opacity: 0;
}
}
/* ===== Overlay del modal ===== */
.hs-modal {
position: fixed;
inset: 0;
display: none;
align-items: flex-start;
justify-content: center;
padding: 24px 12px;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
z-index: 12000;
overscroll-behavior: contain;
}
.hs-modal:not(.hidden) {
display: flex;
}
body.modal-open {
overflow: hidden;
}
/* ===== Caja que SCROLLEA ===== */
.hs-modal .hs-modal-content {
position: relative;
width: min(980px, 92vw);
max-height: calc(100dvh - 48px);
/* clave */
overflow: auto;
/* ¡aquí vive el scroll! */
-webkit-overflow-scrolling: touch;
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 48px rgba(0, 0, 0, .25);
}
/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
.hs-modal * {
animation: none !important;
}
}
/* --------- Paleta --------- */
:root {
--hs-bg: #0a2b54;
--hs-primary: #1f63c6;
--hs-accent: #36c3ff;
--hs-ink: #0A488E;
--hs-soft: #f6faff;
}
/* ===== Caja del modal (scroll intacto) ===== */
.hs-modal .hs-modal-content.auto-modal {
background: linear-gradient(180deg, #ffffff, #f9fbff 65%, #f4f8ff 100%);
border-radius: 18px;
box-shadow:
0 24px 60px rgba(0, 0, 0, .28),
0 0 0 1px rgba(31, 99, 198, .12) inset;
overflow: auto;
/* ¡El scroll vive aquí! */
max-height: calc(100dvh - 56px);
}
/* Borde superior con glow sutil */
.hs-modal .hs-modal-content.auto-modal::before {
content: "";
position: sticky;
top: 0;
display: block;
height: 6px;
border-radius: 18px 18px 0 0;
background: linear-gradient(90deg, transparent, var(--hs-primary), var(--hs-accent), transparent);
filter: blur(0.5px);
z-index: 3;
}
/* ===== Layout del cuerpo ===== */
.auto-body {
display: grid;
grid-template-columns: 320px 1fr;
/* nav izquierda | contenido derecha */
gap: 18px;
padding: 6px 14px 18px;
}
@media (max-width: 860px) {
.auto-body {
grid-template-columns: 1fr;
}
}
/* ===== Panel izquierdo (chips) con glass y glow ===== */
.auto-areas {
background: linear-gradient(180deg, #0b2e5a 0%, #0a274b 100%);
border-radius: 16px;
padding: 12px;
box-shadow:
0 12px 28px rgba(10, 40, 80, .35),
0 0 0 1px rgba(255, 255, 255, .06) inset;
position: sticky;
top: 96px;
/* queda visible al hacer scroll */
max-height: calc(100dvh - 140px);
overflow: auto;
}
/* Scrollbar suave (WebKit) */
.auto-areas::-webkit-scrollbar {
width: 10px;
}
.auto-areas::-webkit-scrollbar-thumb {
background: linear-gradient(var(--hs-primary), var(--hs-accent));
border-radius: 20px;
}
/* Chips: pill de vidrio con icono flecha y estados */
.auto-areas .area-chip {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
width: 100%;
margin: 8px 0;
border-radius: 14px;
font-weight: 900;
font-size: 14px;
text-align: center;
color: #0a2f62;
background: #eaf3ff;
box-shadow:
0 1px 0 rgba(255, 255, 255, .9) inset,
0 10px 18px rgba(0, 0, 0, .10);
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
position: relative;
}
.auto-areas .area-chip::after {
content: "›";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: #235ea5;
opacity: .65;
}
.auto-areas .area-chip:hover {
transform: translateX(3px);
box-shadow: 0 12px 22px rgba(31, 99, 198, .25);
}
.auto-areas .area-chip.active {
background: linear-gradient(180deg, #eaf3ff 0%, #d6e9ff 100%);
outline: 2px solid var(--hs-accent);
box-shadow: 0 0 0 4px rgba(54, 195, 255, .20);
}
/* ===== Panel derecho (contenido) ===== */
.auto-panel {
background: #fff;
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
border: 1px solid rgba(31, 99, 198, .12);
}
/* Cards de cada área */
.area-detail {
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border: 1px solid rgba(31, 99, 198, .15);
border-radius: 14px;
padding: 16px;
margin-bottom: 14px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}
.area-detail h4 {
margin: 0 0 10px;
color: var(--hs-ink);
font-weight: 900;
font-size: 20px;
position: relative;
}
.area-detail h4::after {
content: "";
display: block;
height: 3px;
width: 64px;
margin-top: 6px;
background: linear-gradient(90deg, var(--hs-primary), var(--hs-accent));
border-radius: 4px;
}
.area-detail ul {
margin: 0 0 8px 20px;
}
.area-detail li {
margin: 6px 0;
}
.area-detail li::marker {
color: var(--hs-primary);
}
/* CTA dentro de cada card */
.area-detail .cta-row {
margin-top: 8px;
}
.area-detail .cta-row .cta-button-offer {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
background: linear-gradient(90deg, var(--hs-accent), var(--hs-primary));
color: #fff;
font-weight: 900;
text-decoration: none;
box-shadow: 0 10px 22px rgba(31, 99, 198, .35);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.area-detail .cta-row .cta-button-offer:hover {
transform: translateY(-1px);
filter: brightness(1.04);
}
/* Botón cerrar los cuadros primeros*/
.hs-modal .hs-x {
position: absolute;
top: 1px;
right: 1px;
border-radius: 12px;
background: #eef5ff;
cursor: pointer;
z-index: 4;
font-size: 0;
box-shadow: 0 6px 14px rgba(0, 0, 0, .15), 0 0 0 3px rgba(54, 195, 255, .15);
}
.hs-modal .hs-x::before,
.hs-modal .hs-x::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 2.2px;
border-radius: 2px;
background: #0A488E;
transform-origin: center;
}
.hs-modal .hs-x::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.hs-modal .hs-x::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.hs-modal .hs-x:hover {
background: #e6f0ff;
transform: scale(1.04);
}
/* Mejora del scrollbar del contenido del modal (WebKit) */
.hs-modal .hs-modal-content::-webkit-scrollbar {
width: 12px;
}
.hs-modal .hs-modal-content::-webkit-scrollbar-thumb {
background: linear-gradient(var(--hs-primary), var(--hs-accent));
border-radius: 20px;
}
/* Asegura contexto de posición */
#auto-modal .hs-modal-content {
position: relative;
}
/* Contenedor que scrollea dentro del modal */
.hs-modal .hs-modal-content {
overflow: auto;
/* el scroll es interno al modal */
-webkit-overflow-scrolling: touch;
}
.cta-button-offer {
background: linear-gradient(90deg, #D32955 0%, #0B3E91 100%);
color: white;
border-radius: 30px;
/* mismo estilo redondeado */
padding: 10px 20px;
font-weight: bold;
border: none;
cursor: pointer;
}
.cta-button-offer:hover {
opacity: 0.9;
/* efecto hover */
}
/* ===== PARCHE MOVIL V2 – HSintaxis ===== */
@media (max-width: 768px) {
/* 0) Seguridad general */
html,
body {
max-width: 100%;
overflow-x: hidden !important;
}
* {
min-width: 0;
}
/* 1) H1 lateral: que NO se superponga en móvil */
.titulo-fijo-lateral {
position: static !important;
transform: none !important;
writing-mode: horizontal-tb !important;
text-align: center !important;
margin: 10px 0 !important;
font-size: clamp(18px, 6vw, 26px) !important;
}
/* 2) Card de “¿Cómo automatizamos…?” */
/* Opción A (recomendada): quitar sticky en móvil para que no tape las secciones */
#auto-card {
position: static !important;
/* <— clave para que no cubra el destino de las anclas */
width: 100% !important;
margin: 0 0 12px 0 !important;
padding: 12px 14px !important;
font-size: clamp(14px, 3.8vw, 18px) !important;
line-height: 1.25 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
z-index: 2 !important;
}
/* Si prefieres mantenerlo pegajoso, comenta lo de arriba y usa:
#auto-card { position: sticky !important; top: 8px !important; z-index: 3 !important; }
y ajusta --safe-top más abajo (punto 3) a la altura real.
*/
/* 3) Offset/acolchado al hacer click en chips (anclas) */
:root {
--safe-top: 100px;
}
/* Ajusta si mantienes headers o sticky: 80–120px suele ir bien */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--safe-top);
}
.area-detail {
scroll-margin-top: var(--safe-top);
}
/* 4) Menú de áreas arriba en 2 columnas, sin recortes */
.auto-areas {
position: static !important;
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
padding: 8px 6px !important;
margin: 0 0 12px 0 !important;
overflow: visible !important;
}
.area-chip {
display: block !important;
text-align: center !important;
font-size: clamp(13px, 3.4vw, 15px) !important;
padding: 10px 8px !important;
border-radius: 10px !important;
text-decoration: none;
/* Focus visible, pero sin “brincos” */
outline: none;
}
.area-chip:focus-visible {
box-shadow: 0 0 0 3px rgba(10, 72, 142, .25);
border-radius: 10px;
}
/* 5) Panel y tarjetas con layout estable */
.auto-panel {
width: 100% !important;
max-width: 100% !important;
padding: 0 8px 20px !important;
box-sizing: border-box !important;
}
.area-detail {
background: #fff !important;
border-radius: 12px !important;
padding: 14px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .06) !important;
margin-bottom: 14px !important;
font-size: 0.95rem !important;
}
.area-detail h4 {
font-size: clamp(16px, 4.2vw, 20px) !important;
margin: 0 0 8px 0 !important;
}
.area-detail ul {
padding-left: 18px !important;
}
/* 6) Botones táctiles centrados */
.cta-row {
text-align: center !important;
margin-top: 10px !important;
}
.cta-button-offer {
padding: 10px 14px !important;
font-weight: 700 !important;
}
}
/* ===== MODO MÓVIL V3 (solo CSS) – arregla superposición de chips ===== */
@media (max-width: 768px) {
/* 0) Seguridad general contra desbordes */
html,
body {
max-width: 100%;
overflow-x: hidden !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2) Card superior: sin sticky para que no tape anclas */
#auto-card {
position: static !important;
width: 100% !important;
margin: 0 0 12px 0 !important;
padding: 12px 14px !important;
font-size: clamp(14px, 3.8vw, 18px) !important;
line-height: 1.25 !important;
border-radius: 10px !important;
z-index: 0 !important;
}
/* 3) RESET fuerte del menú de áreas (venía absoluto/pegajoso en desktop) */
.auto-areas {
position: static !important;
/* Quita absolute/fixed/sticky heredado */
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
float: none !important;
width: 100% !important;
height: auto !important;
z-index: 0 !important;
/* Debajo del contenido pegado */
background: transparent !important;
box-shadow: none !important;
margin: 8px 10px 14px 10px !important;
padding: 0 !important;
/* Layout vertical seguro (sin solapes) */
display: grid !important;
grid-template-columns: 1fr !important;
/* 1 columna para máxima estabilidad */
gap: 10px !important;
overflow: visible !important;
}
/* Clearfix por si quedaron floats en reglas previas */
.auto-areas::after {
content: "";
display: block;
clear: both;
}
.area-chip {
position: static !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
/* Que el texto pueda saltar de línea */
line-height: 1.2 !important;
text-align: center !important;
padding: 12px 14px !important;
border-radius: 12px !important;
font-size: clamp(14px, 3.7vw, 16px) !important;
}
/* 4) Panel de contenido: entra al flujo y queda debajo del menú */
.auto-panel {
position: static !important;
z-index: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 10px 20px 10px !important;
padding: 0 !important;
clear: both !important;
/* Fuerza bajar bajo cualquier float */
}
.area-detail {
position: static !important;
background: #fff !important;
border-radius: 12px !important;
padding: 14px !important;
margin: 0 0 14px 0 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .06) !important;
font-size: 0.95rem !important;
scroll-margin-top: 96px;
/* anclas no quedan ocultas */
}
.area-detail h4 {
margin: 0 0 8px 0 !important;
font-size: clamp(16px, 4.2vw, 20px) !important;
}
.area-detail ul {
padding-left: 18px !important;
}
.cta-row {
text-align: center !important;
margin-top: 10px !important;
}
.cta-button-offer {
padding: 10px 14px !important;
font-weight: 700 !important;
}
/* 5) Suaviza el scroll a secciones */
html {
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
}
/* --- MENÚ RESPONSIVE --- */
@media (max-width: 768px) {
nav ul {
display: flex;
flex-direction: column;
/* que se apilen en celular */
align-items: center;
justify-content: center;
gap: 10px;
position: absolute;
top: 60px;
/* debajo del header */
left: 0;
right: 0;
background: linear-gradient(90deg, var(--cta-g1) 0%, var(--cta-g2) 50%, var(--cta-g3) 100%);
/* fondo claro */
padding: 15px 0;
margin: 0;
font-size: 14px;
/* más pequeño en celular */
}
nav ul li {
display: block;
}
nav {
position: relative;
z-index: 1000;
}
header {
position: relative;
}
}
/* =========================
INFO CONTAINER — 3D + IA
(solo afecta .info-container / .info-box)
========================= */
.info-container {
--bg: #F5F8FC;
--primary: #0A488E;
--accent: #00A896;
--card: #FFFFFF;
--text: #2A2A2A;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
perspective: 1400px;
/* PROFUNDIDAD 3D */
}
.info-container .info-box {
position: relative;
padding: 24px 22px 22px;
border-radius: 18px;
color: var(--text);
background:
linear-gradient(var(--card), var(--card)) padding-box,
linear-gradient(120deg, rgba(10, 72, 142, .35), rgba(0, 168, 150, .35)) border-box;
border: 1px solid transparent;
transform-style: preserve-3d;
/* habilita capas 3D internas */
transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
box-shadow:
0 12px 28px rgba(10, 72, 142, .10),
0 2px 0 rgba(255, 255, 255, .7) inset;
/* leve respiración */
animation: cardFloat 8s ease-in-out infinite;
}
/* Capas 3D: halo y brillo en diferentes Z */
.info-container .info-box::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(1200px 240px at -15% -10%, rgba(10, 72, 142, .26), transparent 60%),
radial-gradient(900px 200px at 115% 120%, rgba(0, 168, 150, .26), transparent 60%);
filter: blur(16px);
transform: translateZ(-8px);
/* detrás de la tarjeta */
opacity: .0;
transition: opacity .35s ease;
}
.info-container .info-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
transform: translateZ(60px) translateX(-120%);
/* por encima */
opacity: 0;
}
.info-container .info-box:hover {
transform: translateY(-10px) rotateX(2.2deg) rotateY(-2.2deg) translateZ(18px);
box-shadow:
0 24px 50px rgba(10, 72, 142, .18),
0 2px 0 rgba(255, 255, 255, .85) inset;
filter: saturate(1.05);
}
.info-container .info-box:hover::before {
opacity: .45;
}
.info-container .info-box:hover::after {
opacity: .95;
animation: cardSheen 1.1s ease forwards;
}
/* Títulos con subrayado gradiente */
.info-container .info-box h3 {
margin: 0 0 10px;
color: #0A488E;
letter-spacing: .2px;
}
.info-container .info-box h3::after {
content: "";
display: block;
width: 70px;
height: 3px;
margin-top: 8px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--primary));
}
/* Oferta: SUPER destacada (GRATIS) en 3D */
.info-container .offer-box {
--gold1: #FFB703;
--gold2: #FFD166;
--hot: #FF7A00;
cursor: pointer;
border: 2px solid transparent;
background:
linear-gradient(180deg, #FFF7EB 0%, #FFFFFF 72%) padding-box,
conic-gradient(from 180deg at 50% 50%, var(--gold1), var(--gold2), var(--accent), var(--gold1)) border-box !important;
box-shadow:
0 18px 46px rgba(255, 183, 3, .26),
0 2px 0 rgba(255, 255, 255, .85) inset;
animation: offerPulse 2.6s ease-in-out infinite;
}
.info-container .offer-box h3 {
background: linear-gradient(90deg, var(--hot) 0%, var(--gold1) 50%, var(--accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.info-container .offer-box::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
pointer-events: none;
z-index: -1;
background:
radial-gradient(1200px 240px at -8% -12%, rgba(255, 183, 3, .32), transparent 60%),
radial-gradient(900px 220px at 110% 120%, rgba(0, 168, 150, .30), transparent 60%);
filter: blur(12px);
opacity: .6;
transform: translateZ(-10px);
}
.info-container .offer-box::after {
content: "GRATIS";
position: absolute;
top: -10px;
right: -58px;
transform: rotate(45deg);
padding: 8px 62px;
font-weight: 800;
letter-spacing: .8px;
font-size: 13px;
color: #0b2a55;
background: linear-gradient(90deg, #FFE27A, #FFB703, #FFD166);
box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
pointer-events: none;
}
.info-container .offer-box:hover {
transform: translateY(-12px) rotateX(2.4deg) rotateY(-2.4deg) translateZ(22px) scale(1.01);
}
/* Responsivo suave */
@media (max-width:640px) {
.info-container {
gap: 16px;
}
.info-container .info-box {
padding: 18px;
border-radius: 16px;
}
}
/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
.info-container .info-box,
.info-container .info-box::before,
.info-container .info-box::after {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* === Animaciones === */
@keyframes cardFloat {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-6px)
}
}
@keyframes cardSheen {
0% {
transform: translateZ(60px) translateX(-120%);
opacity: 0
}
15% {
opacity: .95
}
100% {
transform: translateZ(60px) translateX(120%);
opacity: 0
}
}
@keyframes offerPulse {
0%,
100% {
box-shadow: 0 18px 46px rgba(255, 183, 3, .26), 0 2px 0 rgba(255, 255, 255, .85) inset
}
50% {
box-shadow: 0 30px 66px rgba(255, 183, 3, .34), 0 2px 0 rgba(255, 255, 255, .95) inset, 0 0 0 8px rgba(255, 183, 3, .12)
}
}
/* === CUADRO DE YOTUBE=== */
.banner-video-section {
margin-top: 0;
padding: 25px 0 35px 0;
background: linear-gradient(to bottom, #ffffff 0%, #0A488E 100%);
display: flex;
justify-content: center;
}
.banner-video-container {
max-width: 900px;
width: 100%;
background: linear-gradient(145deg, #08356A, #e63946);
border-radius: 22px;
padding: 22px 24px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.4),
inset 0 0 18px rgba(255, 255, 255, 0.03);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #1D6FA5;
}
.banner-video-container:hover {
transform: scale(1.01);
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 255, 255, 0.08);
}
.banner-video-title {
color: #FFFFFF;
font-size: 28px;
font-weight: 800;
margin-bottom: 16px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
letter-spacing: 0.5px;
}
.banner-video-frame {
position: relative;
padding-bottom: 52%;
height: 0;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
background-color: #000;
}
.banner-video-frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
border: none;
}
.banner-video-description {
color: #DFF6FF;
font-size: 15px;
margin-top: 14px;
font-weight: 400;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* HEADER: igual que lo tenías, pero ahora sí fijo */
header {
position: sticky;
top: 0;
/* <-- ancla real del sticky */
z-index: 1000;
/* <-- por encima de modales/contenido */
background: linear-gradient(135deg, var(--dark-blue), var(--primary-blue));
padding: 20px 40px;
display: grid;
grid-template-columns: auto 1fr;
/* logo | texto */
align-items: center;
width: 100%;
min-height: 180px;
box-shadow: inset 0 -5px 15px -5px rgba(0, 0, 0, .4);
border-bottom: 3px solid var(--accent-yellow);
}
header .header-image {
margin: 0 0px 0 0;
}
header .header-image img {
height: 140px;
width: 140px;
border-radius: 50%;
border: 4px solid var(--text-light);
object-fit: contain;
background-color: #004a8a;
box-shadow: 0 0 20px rgba(255, 221, 87, 0.7);
}
/* TÍTULO: se mantiene visualmente igual pero ya no “salta”.
Lo centramos dentro del header y lo desacoplamos del grid para que no se mueva. */
/* Opcional: si tu modal bloquea el scroll, evita que empuje nada */
body.modal-open {
overflow: hidden;
}
.titulo-fijo-lateral {
font-size: 60px;
position: absolute;
/* se posiciona relativo al header (que es sticky) */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
/* tus estilos de tipografía y sombras existentes siguen funcionando */
}
/* ====== CONTENEDOR MÁS ANCHO ====== */
#sector-salud.sector-container {
max-width: 1800px;
/* más ancho */
margin: 0 auto;
padding: 0 20px;
}
/* ====== GRID: 3 TARJETAS POR FILA (desktop) ====== */
#sector-salud .plans {
display: flex;
/* como ya lo tienes */
flex-wrap: wrap;
/* idem */
column-gap: 40px;
/* espacio horizontal entre tarjetas */
row-gap: 10px;
/* ⬅️ espacio vertical entre filas (ajusta a tu gusto) */
}
/* Si quieres que aplique a todos los grupos de planes del sitio: */
.plans {
column-gap: 30px;
row-gap: 56px;
}
/* ↓ Responsivo: pasa a 2 y luego 1 tarjeta cuando el viewport es menor */
@media (max-width: 1350px) {
#sector-salud .plans {
grid-template-columns: repeat(2, minmax(380px, 1fr));
}
}
@media (max-width: 820px) {
#sector-salud .plans {
grid-template-columns: 1fr;
}
}
/* ====== TARJETA: altura uniforme y sin solapes ====== */
#sector-salud .plan {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 24px rgba(10, 72, 142, .10);
padding: 28px 24px 22px;
padding-top: 40px;
/* aire para cintas o badges arriba */
overflow: hidden;
/* evita que algo se monte fuera */
box-sizing: border-box;
}
/* Encabezado y precio en flujo normal (para que no se crucen) */
#sector-salud .plan-header {
margin-bottom: 8px;
}
#sector-salud .plan-header h3 {
margin: 6px 0 2px;
line-height: 1.2;
}
#sector-salud .plan .plan-price {
position: static !important;
transform: none !important;
margin: 6px 0 0;
line-height: 1.1;
display: block;
}
#sector-salud .price-period {
font-size: .78rem;
letter-spacing: .8px;
text-transform: uppercase;
}
/* La lista ocupa el alto y empuja el botón al fondo */
#sector-salud .feature-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
flex: 1 1 auto;
}
#sector-salud .cta-button {
margin-top: auto;
width: 100%;
}
/* Badges/cintas dentro de la tarjeta (no se salen) */
#sector-salud .recommended-tag {
position: absolute;
top: 10px;
right: 14px;
background: linear-gradient(90deg, #0A488E, #00A896);
color: #fff;
padding: 6px 10px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
/* La tarjeta recorta cualquier desborde de la cinta */
#sector-salud .plan {
position: relative;
overflow: hidden;
/* clave para que la cinta no invada otras tarjetas */
}
/* Cinta diagonal: tamaño/posición seguros (antes: top:-200px, width:640px) */
.plan .plan-ribbon {
top: -58px;
/* sube/ajusta la intersección con la esquina */
right: -120px;
/* muerde un poco fuera para la diagonal */
width: clamp(300px, 70%, 480px);
/* responsiva y más contenida */
height: 56px;
/* más baja para no tapar títulos */
transform: rotate(45deg) translate3d(0, 0, 0);
transform-origin: 100% 0%;
z-index: 1;
pointer-events: none;
/* ya lo tenías (no bloquea clics) */
}
/* Tipografía interna responsiva */
.plan .plan-ribbon b {
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 900;
margin-right: 8px;
}
.plan .plan-ribbon i {
font-size: clamp(12px, 1.5vw, 14px);
font-style: normal;
opacity: .95;
}
/* Variante izquierda (si la usas) */
.plan .plan-ribbon--left {
left: -120px;
right: auto;
top: -58px;
width: clamp(300px, 70%, 480px);
height: 56px;
transform: rotate(-45deg) translate3d(0, 0, 0);
transform-origin: 0% 0%;
}
/* Ajustes cuando el grid pasa a 2 y 1 columna */
@media (max-width:1350px) {
.plan .plan-ribbon {
right: -140px;
width: clamp(280px, 80%, 420px);
height: 52px;
top: -54px;
}
.plan .plan-ribbon--left {
left: -140px;
width: clamp(280px, 80%, 420px);
height: 52px;
top: -54px;
}
}
@media (max-width:820px) {
.plan .plan-ribbon {
right: -150px;
width: clamp(260px, 90%, 380px);
height: 48px;
top: -50px;
}
.plan .plan-ribbon--left {
left: -150px;
width: clamp(260px, 90%, 380px);
height: 48px;
top: -50px;
}
}
.auto-areas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.5rem;
padding: 0.5rem;
}
.area-chip {
text-align: center;
padding: 0.5rem;
border-radius: 20px;
background: #f0f0f0;
}
/* ====== Modal base (contenedor interno) ====== */
.hs-modal .hs-modal-content.auto-modal {
max-width: 880px;
width: 90vw;
border-radius: 18px;
overflow: hidden;
}
/* Encabezado */
.modal-header {
position: sticky;
/* siempre visible al hacer scroll dentro del modal */
top: 0;
z-index: 3;
background: #fff;
padding: 16px 18px 12px;
box-shadow: 0 2px 8px rgba(10, 72, 142, .08);
}
.modal-titles h2 {
font-size: 1.25rem;
line-height: 1.25;
margin: 0 0 4px;
}
.modal-titles h3 {
font-size: .95rem;
font-weight: 600;
margin: 0;
opacity: .9;
}
/* ====== Layout principal ====== */
.auto-body {
display: grid;
grid-template-columns: 260px 1fr;
gap: 14px;
padding: 14px;
max-height: min(78vh, 720px);
/* control de alto del modal */
overflow: auto;
/* scroll interno suave */
-webkit-overflow-scrolling: touch;
}
/* ====== Columna de chips ====== */
.auto-areas {
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 6px;
position: sticky;
/* en desktop queda “pegada” al top del modal */
top: 72px;
/* coincide con altura aprox. del header */
align-self: start;
max-height: calc(78vh - 72px);
overflow: auto;
}
.area-chip {
display: block;
width: 100%;
text-align: center;
padding: 12px 14px;
border-radius: 14px;
background: #eef5ff;
color: #0a488e;
font-weight: 700;
text-decoration: none;
box-shadow: 0 3px 0 #b1d0ff inset, 0 6px 14px rgba(10, 72, 142, .08);
border: 2px solid transparent;
transition: transform .06s ease, background .2s, border-color .2s;
}
.area-chip:active {
transform: translateY(1px);
}
.area-chip.active {
background: #0a488e;
color: #fff;
border-color: #77b4ff;
box-shadow: 0 3px 0 #073566 inset, 0 8px 18px rgba(10, 72, 142, .18);
}
/* ====== Panel de contenido ====== */
.auto-panel {
position: relative;
min-height: 220px;
}
/* Ocultamos todos los artículos por defecto… */
.area-detail {
display: none;
margin: 0 2px 16px;
padding: 14px 14px 12px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 4px 18px rgba(10, 72, 142, .10);
border: 1px solid #e6ecf5;
}
/* …y mostramos solo el activo (tu JS pone esta clase) */
.area-detail.active {
display: block;
}
/* Tipografía/espaciados internos */
.area-detail h4 {
margin: 0 0 8px;
font-size: 1.05rem;
color: #0a488e;
}
.area-detail ul {
margin: 0 0 8px 18px;
padding: 0;
}
.area-legend {
margin: 8px 0;
}
.cta-row {
margin-top: 10px;
display: flex;
gap: 8px;
}
/* ====== Mejora de navegación con anclas (si usas href="#area-…") ====== */
.area-detail {
scroll-margin-top: 120px;
}
/* evita quedar “tapado” por el header sticky */
/* ====== Responsive ====== */
@media (max-width: 780px) {
.auto-body {
grid-template-columns: 1fr;
/* una sola columna en móvil */
gap: 10px;
padding: 10px;
scroll-padding-top: 120px;
}
/* En móvil: chips arriba, panel inmediatamente después del header */
.auto-areas {
position: static;
/* libera el sticky para que no “coma” espacio */
max-height: none;
overflow: visible;
order: 1;
}
.auto-panel {
order: 2;
/* aparece enseguida de los chips */
}
/* Opcional: hacer los chips más “botón grande” en móvil */
.area-chip {
padding: 13px 12px;
border-radius: 16px;
font-size: .98rem;
}
}
/* ====== Detalle: foco accesible en chips ====== */
.area-chip:focus-visible {
outline: 3px solid #00a896;
outline-offset: 2px;
border-color: #00a896;
}
/* Quitar subtitulos de los cuadros iniciales/
/* Accesible focus (esto sí va) */
.area-chip:focus-visible {
outline: 3px solid #00a896;
outline-offset: 2px;
border-color: #00a896;
}
/* Un solo contenedor para TODA caja de modal */
.hs-modal .hs-modal-content {
container-type: inline-size;
}
/* Cuando el modal mida < 560px, ocultar los h3 de esos títulos y ajustar el h2 */
@container (max-width: 560px) {
.modal-titles h2#syntex-title~h3,
.modal-titles h2#interesa-title~h3 {
display: none !important;
}
.modal-titles h2#syntex-title,
.modal-titles h2#interesa-title {
font-size: clamp(18px, 4.8vw, 28px);
line-height: 1.15;
}
}
/* Color del Demo Botones*/
a.cta-button.cta-button-offer {
background: linear-gradient(135deg, #e63946 0%, #023e8a 100%) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px;
padding: 16px 24px;
font-weight: 900;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
text-decoration: none;
box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
/* Hover/Focus */
a.cta-button.cta-button-offer:hover,
a.cta-button.cta-button-offer:focus {
filter: brightness(1.05);
transform: translateY(-2px);
text-decoration: none;
outline: none;
}
/* Si dentro del modal aparecía un halo/borde turquesa, lo neutralizamos */
.hs-modal .cta a.cta-button.cta-button-offer {
outline: none !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, .25) !important;
}
/* =========================================================
/* =========================
OVERLAY A PANTALLA COMPLETA
(compatible con tu JS actual)
========================= */
#plan-overlay{
position: fixed;
inset: 0; /* top/right/bottom/left:0 */
width: 100vw;
height: 100dvh; /* respeta barras móviles */
z-index: 10000;
background: #fff; /* tapa completamente los planes detrás */
display: none; /* tu JS añade .active */
overflow: hidden; /* el overlay NO scrollea; solo su contenido */
overscroll-behavior: contain;
}
#plan-overlay.active{ display: block; }
/* Header fijo (ajusta colores si quieres) */
#plan-overlay .po-header{
position: absolute; left:0; right:0; top:0;
z-index: 2;
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px;
color:#fff;
background: linear-gradient(135deg, var(--dark-blue, #0A2E5C), var(--primary-blue, #0A488E));
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
#plan-overlay .po-header{
position: relative;
/* sube el alto del header para que el centro quede más abajo */
padding: 18px 56px 16px; /* izq/der dejan hueco para la X */
min-height: 72px; /* asegura barra más alta */
}
#plan-overlay .po-title{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
font-size: 1.05rem;
text-align: center;
/* permite 2 líneas y evita choques con la X */
line-height: 1.25;
white-space: normal;
word-break: break-word;
max-width: calc(100% - 120px); /* deja espacio para la X */
}
#plan-overlay .po-x{
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
background: transparent; border: 0; color: #fff;
font-size: 1.8rem; line-height: 1; cursor: pointer;
padding: 4px 6px; /* área táctil un poco mayor */
}
/* Footer fijo */
#plan-overlay .po-footer{
position: absolute; left:0; right:0; bottom:0;
padding: 14px 16px;
border-top: 1px solid #e9eef5;
background: #fff;
z-index: 2;
}
#plan-overlay .po-close{
width: 100%; padding: 12px 16px;
border: 0; border-radius: 10px;
font-weight: 700;
background: linear-gradient(90deg, var(--cta-g1) 0%, var(--cta-g2) 50%, var(--cta-g3) 100%);
color: #fff; cursor: pointer;
}
/* >>> Área con SCROLL interno (dedo/rueda) <<< */
#plan-overlay .po-content{
position: absolute; left:0; right:0;
/* Tu JS calcula y setea estas variables */
top: var(--po-head, 56px);
bottom: var(--po-foot, 64px);
overflow-y: auto; /* ← scroll interno */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding: 16px;
}
/* Dentro del overlay: mostrar SIEMPRE todo del plan */
#plan-overlay .plan .feature-list,
#plan-overlay .plan .plan-content,
#plan-overlay .plan .plan-body,
#plan-overlay .plan .plan-footer,
#plan-overlay .plan .cta-button{ display: block !important; }
/* Ocultar el botón “Ver detalles” dentro del overlay */
#plan-overlay .plan .plan-details-btn{ display: none !important; }
/* Evitar “doble caja” visual del plan clonado */
#plan-overlay .plan{
border: 0; box-shadow: none; margin: 0; padding: 0;
max-width: none; width: auto;
}
/* Scroll-lock del body cuando tu JS añade .no-scroll */
/* quita el bloqueo agresivo */
html, body { height: auto; } /* o elimina esta regla por completo */
body.no-scroll{
overflow: hidden; /* solo bloquea el scroll, sin fijar el body */
position: static; /* importante: NO fixed */
width: auto;
top: auto;
}
/* =========================
LISTA COMPACTA EN MÓVIL
(solo afecta a las tarjetas de la lista, NO al overlay)
========================= */
@media (max-width: 768px) {
/* Afecta solo a la lista principal de planes */
.plans .plan{ border-radius:14px; overflow:hidden; }
.plans .plan .plan-header{ cursor:pointer; }
/* Oculta detalles en la lista (no en el overlay) */
.plans .plan .feature-list,
.plans .plan .plan-content,
.plans .plan .plan-body,
.plans .plan .plan-footer,
.plans .plan .cta-button{
display: none !important;
}
/* Botón “Ver detalles” que inserta tu JS */
.plans .plan .plan-details-btn{
display: block;
width: calc(100% - 32px);
margin: 12px auto 16px;
padding: 12px 16px;
border: 0;
border-radius: 10px;
font-weight: 700;
background: linear-gradient(90deg, var(--cta-g1) 0%, var(--cta-g2) 50%, var(--cta-g3) 100%);
color: #fff;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
}
/*,AMITO DE LOS BOTONES*/
.cta-button,
.cta-button-offer,
.open-modal {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px; /* espacio entre texto y manito */
perspective: 700px; /* profundidad 3D para el ::after */
}
/* Manito pequeña al final (sin imagen) */
.cta-button::after,
.cta-button-offer::after,
.open-modal::after {
content: "\1F448"; /* 👈 */ /* ☞ (mano apuntando a la derecha) */
font-size: 1.12em; /* tamaño relativo al texto del botón */
line-height: 1;
opacity: .95;
transform: translateY(1px) translateZ(12px); /* ya “sale” un poco del botón */
font-family: "Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji", system-ui, sans-serif;
filter: drop-shadow(0 2px 1px rgba(0,0,0,.22)); /* profundidad sutil */
text-shadow: 0 1px 0 rgba(0,0,0,.12);
backface-visibility: hidden;
will-change: transform, filter;
}
/* (Opcional) un micro ‘latido’ para llamar la atención */
@keyframes hand-pop {
0%, 100% {
transform: translateY(1px) translateZ(12px) scale(1);
filter: drop-shadow(0 2px 1px rgba(0,0,0,.22));
}
50% {
transform: translateY(0) translateZ(26px) scale(1.22); /* más grande y más “afuera” */
filter: drop-shadow(0 8px 6px rgba(0,0,0,.28)); /* sombra más marcada en el pico */
}
}
.cta-button::after,
.cta-button-offer::after,
.open-modal::after {
animation: hand-pop 1.6s ease-in-out infinite;
}