@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');
:root {
--navy: #011A4F;
--navy-dark: #010F30;
--red: #E31D1F;
--red-dark: #B51618;
--ink: #1B1F2A;
--muted: #5B6472;
--border-soft: #E4E7EE;
--bg-soft: #F5F7FB;
--shadow-soft: 0 20px 45px rgba(1, 26, 79, .12);
--radius-lg: 20px;
--radius-md: 14px;
}
* { box-sizing: border-box; }
/* scroll-behavior:smooth NO va acá — pelea con Lenis (ambos animando el
scroll a la vez lo vuelve lento/entrecortado); el suavizado de los
links con # ya lo hace lenis.scrollTo() en site.js. */
body {
margin: 0; font-family: 'Montserrat', sans-serif; color: var(--ink);
background: #fff; overflow-x: hidden; line-height: 1.6;
}
h1, h2, h3, h4, h5, .font-heading {
font-family: 'Poppins', sans-serif; color: var(--navy); font-weight: 700; margin: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
section { overflow-x: clip; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 90px 0; }
@media (max-width: 760px) {
.section { padding: 60px 0; }
}
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 3px; background: var(--red); border-radius: 3px; }
.btn {
display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px;
font-weight: 700; font-size: 15px; border: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { transform: translateY(-3px); background: var(--red-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { transform: translateY(-3px); background: var(--navy-dark); }
.btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
/* ---------- Header ---------- */
/* .is-transparent (solo en páginas con hero a pantalla completa, ej.
Inicio): arranca transparente sobre el video/imagen y pasa a blanco
sólido cuando el JS agrega .is-scrolled al hacer scroll. El resto de
páginas usa el header blanco de siempre. */
.site-header {
position: sticky; top: 0; z-index: 200; background: #fff; border-bottom: 1px solid var(--border-soft);
transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(1,26,79,.08); }
.site-header.is-transparent { background: transparent; border-bottom-color: transparent; }
.site-header.is-transparent .nav-links a { color: #fff; }
.site-header.is-transparent .nav-links a.active { color: #FF6B6D; }
.site-header.is-transparent .burger span { background: #fff; }
.site-header.is-transparent.is-scrolled {
background: #fff; border-bottom-color: var(--border-soft);
}
.site-header.is-transparent.is-scrolled .nav-links a { color: var(--ink); }
.site-header.is-transparent.is-scrolled .nav-links a.active { color: var(--red); }
.site-header.is-transparent.is-scrolled .burger span { background: var(--navy); }
@media (max-width: 900px) {
/* El menú mobile siempre se abre en un panel blanco, así que sus
links quedan oscuros aunque el header esté transparente. */
.site-header.is-transparent .nav-links a { color: var(--ink); }
.site-header.is-transparent .nav-links a.active { color: var(--red); }
}
/* .mega-open lo agrega/quita site.js al pasar el mouse por el
mega-menú de Servicios: el header se pone navy (mismo color que el
panel) para que header + menú se vean como un solo bloque continuo,
sin importar si el header ya era blanco, transparente o scrolled. */
/* !important acá: cuando el header ya está en su estado "scrolled"
(.is-transparent.is-scrolled, 3 clases) esa regla le gana en
especificidad a .mega-open (2 clases) y el fondo se quedaba blanco
mientras el logo sí pasaba a la versión blanca (pensada para fondo
navy) — quedaba invisible. Con !important, mega-open manda siempre. */
.site-header.mega-open { background: var(--navy) !important; border-bottom-color: var(--navy) !important; }
.site-header.mega-open .nav-links a { color: #fff !important; }
.site-header.mega-open .nav-links a.active { color: #FF6B6D !important; }
.site-header.mega-open .burger span { background: #fff !important; }
.site-header.mega-open .logo-img-dark { opacity: 0 !important; }
.site-header.mega-open .logo-img-light { opacity: 1 !important; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
/* Logo: dos imágenes superpuestas (oscura en flujo normal, blanca en
position:absolute) que cambian de opacidad entre sí en vez de un
filtro CSS — misma técnica en ambos estados del header. */
.logo { position: relative; display: flex; align-items: center; }
.logo-img { height: 48px; width: auto; display: block; transition: opacity .25s ease; }
.logo-img-light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.site-header.is-transparent:not(.is-scrolled) .logo-img-dark { opacity: 0; }
.site-header.is-transparent:not(.is-scrolled) .logo-img-light { opacity: 1; }
/* align-self:stretch acá (no en .nav-links, que sigue centrando sus
links normalmente) para que SOLO .nav-item-mega (el de Servicios)
mida el alto completo del header — así top:100% en el mega-menu
coincide con el borde real del header. Los demás links (Inicio,
Nosotros, Contacto) quedan con su alto natural, sin esto la línea
de hover de .after se iba al fondo de una caja mucho más alta que
el texto en vez de quedar pegada a él. */
.nav-links { display: flex; align-items: center; align-self: stretch; gap: 32px; }
.nav-links a {
font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 8px 0; position: relative; transition: color .3s ease;
}
.nav-links a::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--red);
transition: right .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--red); }
/* Mega-menú de Servicios: sale pegado al borde inferior del header
(top:100%, sin espacio entre el link y el panel) para no perder el
hover al mover el mouse entre ambos. Oculto con opacity+visibility
(no display:none) para poder animar la entrada. */
.nav-item-mega { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-mega-trigger { display: flex; align-items: center; gap: 5px; }
.nav-mega-toggle { display: flex; }
@media (max-width: 900px) { .nav-mega-toggle { padding: 10px; margin: -10px; } }
.nav-mega-trigger svg { transition: transform .25s ease; }
.nav-item-mega:hover .nav-mega-trigger svg,
.nav-item-mega.is-open .nav-mega-trigger svg { transform: rotate(180deg); }
.mega-menu {
position: absolute; top: calc(100% + 1px); left: 0; width: 620px;
opacity: 0; visibility: hidden; pointer-events: none;
z-index: 150;
}
.nav-item-mega:hover .mega-menu, .nav-item-mega:focus-within .mega-menu {
opacity: 1; visibility: visible; pointer-events: auto;
}
.mega-menu-inner {
background: #fff;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: 0 30px 60px rgba(1,15,48,.18); padding: 26px 26px 0; overflow: hidden;
}
/* Apertura "vertical unfolding / roll-down" del mega-menú (solo
desktop — en mobile es un acordeón aparte con max-height, ver más
abajo, y no debe heredar clip-path/scaleY). El contenedor se ancla
arriba (transform-origin: top) y combina scaleY + clip-path: el
clip-path es lo que realmente "revela" el contenido de arriba hacia
abajo sin que el texto se vea estirado, mientras el scaleY sutil
suma la sensación de "desenrollado". El contenido interno hace su
propio fade + translateY, con un pequeño retraso respecto al
contenedor al abrir; al cerrar no lleva retraso, para que se apague
rápido mientras el panel se enrolla hacia arriba. */
@media (min-width: 901px) {
.mega-menu {
transform-origin: top center;
transform: scaleY(.94);
clip-path: inset(0 0 100% 0);
transition: opacity .18s ease, visibility .38s, transform .38s cubic-bezier(.65, 0, .35, 1), clip-path .38s cubic-bezier(.65, 0, .35, 1);
}
.nav-item-mega:hover .mega-menu, .nav-item-mega:focus-within .mega-menu {
transform: scaleY(1);
clip-path: inset(0 0 0% 0);
}
.mega-menu-inner {
opacity: 0; transform: translateY(-10px);
transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.nav-item-mega:hover .mega-menu-inner, .nav-item-mega:focus-within .mega-menu-inner {
opacity: 1; transform: translateY(0);
transition: opacity .3s ease .1s, transform .35s cubic-bezier(.22, 1, .36, 1) .1s;
}
}
@media (prefers-reduced-motion: reduce) {
.mega-menu { transition: opacity .15s ease, visibility .15s; }
.mega-menu-inner { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.mega-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 18px; }
.mega-menu-item {
display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: 12px;
transition: background .2s ease;
}
.mega-menu-item:hover, .mega-menu-item:active { background: var(--bg-soft); }
.mega-menu-item-icon {
width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); color: var(--navy);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mega-menu-item-text { display: flex; flex-direction: column; gap: 3px; }
.mega-menu-item-text strong { color: var(--navy); font-size: 14px; }
.mega-menu-item-text small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.mega-menu-footer {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
border-top: 1px solid var(--border-soft); padding: 18px 4px;
}
.mega-menu-footer strong { display: block; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.mega-menu-footer span { color: var(--muted); font-size: 12.5px; }
.mega-menu-footer .btn {
padding: 10px 20px; font-size: 13.5px; flex-shrink: 0;
color: #fff !important; /* pisa el color oscuro heredado de .nav-links a */
}
.mega-menu-footer .btn::after { content: none; } /* sin el subrayado rojo de .nav-links a::after */
.header-actions { display: flex; align-items: center; gap: 18px; }
.burger {
display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 220;
}
.burger span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .25s ease, background .3s ease; }
body.nav-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.nav-open .burger span { background: var(--navy) !important; }
@media (max-width: 900px) {
.nav-links {
display: none; position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(320px, 84vw);
background: #fff; flex-direction: column; align-items: flex-start; gap: 4px; padding: 98px 30px 30px;
box-shadow: -14px 0 40px rgba(0,0,0,.14); transform: translateX(100%); transition: transform .3s ease; z-index: 210;
overflow-y: auto;
}
.nav-links.is-shown { display: flex; }
.nav-links.open { transform: translateX(0); }
.nav-links a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.burger { display: flex; }
.header-actions .btn-red-desktop { display: none; }
/* Mega-menú en mobile: acordeón dentro del panel del nav en vez de
dropdown flotante — el texto "Servicios" sigue yendo directo a la
página, la flecha (ver site.js) abre/cierra la lista.
OJO: .nav-item-mega es "display:flex" en desktop (fila, para que el
panel absoluto quede pegado al link) — sin forzar column acá, el
panel (ahora position:static) quedaba como un segundo ítem de esa
misma fila en vez de debajo del link, angosto y corrido a la
derecha (por eso el texto se veía cortado). */
.nav-item-mega { width: 100%; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--border-soft); }
.nav-item-mega .nav-mega-trigger { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: none; }
/* max-height animado por JS (site.js mide scrollHeight al abrir) en vez
del truco de CSS Grid 0fr/1fr: ese truco depende de que el grid hijo
encoja de forma pareja con la pista, y al tener .mega-menu-grid
anidado (display:grid también) a veces quedaba a mitad de camino —
una caja visible pero vacía en vez del acordeón completo. */
.mega-menu {
position: static; width: auto; padding-top: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
/* El fondo blanco y los colores navy ya son la base compartida con
desktop (ver arriba) — acá solo lo que cambia por ser un acordeón
inline en vez de un panel flotante: sombra y esquinas, más el CTA
de WhatsApp oculto (en mobile ese acceso directo ya sobra, el
usuario tiene el botón de WhatsApp del header a un toque). */
.mega-menu-inner { min-height: 0; margin-bottom: 12px; border-radius: 12px; box-shadow: none; border: 1px solid var(--border-soft); }
.mega-menu-grid { grid-template-columns: 1fr; }
.mega-menu-footer { display: none; }
}
/* ---------- Hero con video de fondo (Inicio) ---------- */
/* margin-top negativo + padding-top del mismo tamaño que el header:
sube la sección para que el video arranque en el borde real de la
pantalla (detrás del header transparente) sin tener que sacar el
header del flujo normal (sigue siendo sticky en toda la página). */
.hero-video {
position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
overflow: hidden; color: #fff; text-align: center;
margin-top: -84px; padding-top: 84px;
}
.hero-video-bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Frame real del video (extraído del propio archivo) que tapa el video
mientras el .mp4 (pesado) sigue bajando, y se desvanece solo cuando
ya puede reproducirse (ver 'canplay' en site.js) — sin esto se ve un
video negro/vacío durante esos segundos de carga. */
.hero-video-poster {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
opacity: 1; transition: opacity .6s ease;
}
.hero-video-poster.is-hidden { opacity: 0; }
.hero-video-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(135deg, rgba(1,15,48,.86), rgba(1,26,79,.72) 55%, rgba(1,15,48,.9));
}
.hero-video-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 90px 24px 70px; }
.hero-video-content .eyebrow { justify-content: center; color: #FF6B6D; }
.hero-video-content .eyebrow::before { background: #FF6B6D; }
.hero-video-content h1 { color: #fff; font-size: 46px; line-height: 1.18; margin-bottom: 20px; }
.hero-video-content h1 span { color: #FF6B6D; }
.hero-video-content p { font-size: 17px; color: rgba(255,255,255,.85); margin: 0 auto 34px; max-width: 560px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) {
.hero-video-content h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-video-bg { display: none; }
.hero-video-poster { opacity: 1 !important; transition: none; }
}
/* ---------- Icon box ---------- */
/* Ícono suelto (sin el cuadrado de color de antes), flotando en un
loop sutil y continuo — el color por defecto es navy; las secciones
con acento rojo lo pisan más abajo con su propio color. */
.icon-box {
display: inline-flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0;
animation: icon-float 3.2s ease-in-out infinite;
}
.icon-box svg { width: 36px; height: 36px; }
@keyframes icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .icon-box { animation: none; } }
/* ---------- Stats band ---------- */
.stats-band {
background: var(--bg-soft) url('/img/fondo-contador.png') center / cover no-repeat;
padding: 50px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 800; color: var(--navy); }
.stat-num span { color: var(--red); }
.stat-label { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }
/* ---------- Service cards ---------- */
.section-head { max-width: 640px; margin: 0 auto 50px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: 32px; margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 15.5px; }
/* Variante con foto de fondo (Auditoría y Asesoría, "Nuestro
enfoque"): degradado blanco más opaco del lado del texto y más
transparente hacia la derecha, para que la foto se note pero el
texto navy siga siendo legible sin necesitar una tarjeta. */
.enfoque-section {
background: linear-gradient(90deg, rgba(255,255,255,.85) 35%, rgba(255,255,255,.6) 60%, rgba(255,255,255,.25) 100%),
var(--enfoque-img) center / cover no-repeat;
}
/* ---------- Carrusel vertical de servicios (Inicio) ---------- */
.services-carousel-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.services-carousel-intro { text-align: left; }
.services-carousel-intro .eyebrow, .services-carousel-intro .eyebrow::before { justify-content: flex-start; }
.services-carousel-intro h2 { font-size: 32px; margin-bottom: 16px; }
.services-carousel-intro p { color: var(--muted); font-size: 15.5px; margin-bottom: 28px; }
.services-carousel-outro {
grid-column: 1 / -1; text-align: center; max-width: 720px; margin: 12px auto 0;
color: var(--navy); font-weight: 700; font-size: 16px; line-height: 1.6;
}
.services-carousel {
display: flex; flex-direction: column; align-items: center; gap: 10px;
background: var(--bg-soft); border-radius: var(--radius-lg); padding: 18px 24px;
}
.services-carousel-arrow {
width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-soft); background: #fff;
color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .15s ease; flex-shrink: 0;
}
.services-carousel-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.services-carousel-arrow:active { transform: scale(.92); }
.services-carousel-arrow.up svg { transform: rotate(180deg); }
.services-carousel-viewport {
position: relative; width: 100%; height: 420px; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.services-carousel-track {
position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; gap: 24px;
transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.services-carousel-item {
display: flex; align-items: center; gap: 18px; height: 130px; padding: 0 26px; box-sizing: border-box;
background: #fff; border: 1px solid var(--border-soft); border-radius: 16px;
opacity: .38; transform: scale(.86); transition: opacity .45s ease, transform .45s ease, box-shadow .3s ease;
}
.services-carousel-item.is-active { opacity: 1; transform: scale(1); box-shadow: var(--shadow-soft); border-color: transparent; }
.services-carousel-item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.services-carousel-item-text strong { font-size: 16px; color: var(--navy); }
.services-carousel-item-text span { font-size: 13.5px; color: var(--muted); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.services-carousel-item-link {
margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); color: var(--red);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease, transform .2s ease;
}
.services-carousel-item.is-active .services-carousel-item-link { background: var(--red); color: #fff; }
.services-carousel-item:hover .services-carousel-item-link { transform: translateX(3px); }
/* Entrada lenta y escalonada de cada tarjeta al aparecer el carrusel
en pantalla (además de su propio estado activo/inactivo). */
.services-carousel-item.is-entering { opacity: 0 !important; transform: scale(.7) translateY(24px) !important; }
@media (max-width: 900px) {
.services-carousel-wrap { grid-template-columns: 1fr; }
.services-carousel-intro { text-align: center; }
.services-carousel-intro .eyebrow, .services-carousel-intro .eyebrow::before { justify-content: center; }
}
@media (max-width: 560px) {
.services-carousel-item { padding: 0 16px; gap: 12px; }
.services-carousel-item-text span { -webkit-line-clamp: 3; }
}
/* Carrusel horizontal de "otros servicios": imagen grande sin recuadro
(sin borde ni fondo de tarjeta) con overlay de título degradado +
texto debajo, en vez de la grilla plana de ícono+texto que había
antes. El track trae el set de tarjetas duplicado una vez (ver
.is-clone en el cshtml) para poder hacer loop infinito real en
site.js: al llegar al final salta sin transición al inicio del set
clonado, que es visualmente idéntico. */
.other-services-carousel { position: relative; }
.other-services-track {
/* Sin scroll-behavior:smooth acá a propósito: con eso puesto, hasta
una asignación directa a scrollLeft (el salto "instantáneo" del
loop infinito en site.js) queda animada por el navegador y se
rompe el efecto — la suavidad la controla cada scrollBy() puntual
desde JS con { behavior: 'smooth' }. */
display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory;
padding: 4px 4px 12px; margin: 0 -4px; scrollbar-width: none; -ms-overflow-style: none;
}
.other-services-track::-webkit-scrollbar { display: none; }
/* flex-basis calculado (no un px fijo) para que siempre entren
tarjetas completas dentro del ancho visible del track, sin ninguna
a medio cortar contra el borde — 3 en desktop, 2 en tablet, y en
mobile un solo "peek" a propósito (ver media query) como affordance
de que hay más para deslizar. */
.other-service-card { scroll-snap-align: start; flex: 0 0 calc((100% - 56px) / 3); display: flex; flex-direction: column; transition: transform .3s ease; }
.other-service-card:hover { transform: translateY(-8px); }
.other-service-media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(1,26,79,.12); transition: box-shadow .3s ease;
}
.other-service-card:hover .other-service-media { box-shadow: var(--shadow-soft); }
.other-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.other-service-card:hover .other-service-media img { transform: scale(1.06); }
.other-service-media::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(1,26,79,.88), rgba(1,26,79,0) 65%);
}
.other-service-media h3 { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; color: #fff; font-size: 19px; margin: 0; }
.other-service-card p { color: var(--muted); font-size: 14px; line-height: 1.6; padding: 16px 2px 0; margin: 0; }
.other-service-card .service-link {
font-weight: 700; font-size: 13.5px; color: var(--red); display: inline-flex; align-items: center; gap: 6px;
padding: 10px 2px 4px;
}
.other-service-card .service-link svg { width: 15px; height: 15px; transition: transform .25s ease; }
.other-service-card:hover .service-link svg { transform: translateX(4px); }
.other-services-nav { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
@media (max-width: 900px) { .other-service-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 640px) { .other-service-card { flex-basis: 82%; } }
/* ---------- Página de detalle de servicio ---------- */
.service-breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.service-breadcrumb a { color: rgba(255,255,255,.85); font-weight: 600; }
.service-breadcrumb a:hover { color: #fff; }
.service-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.service-feature-item {
display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border-soft);
border-radius: 12px; padding: 16px 18px; font-weight: 600; font-size: 14.5px;
}
.service-feature-item span {
width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) { .service-feature-grid { grid-template-columns: 1fr; } }
.service-feature-grid.is-single { grid-template-columns: 1fr; }
.service-forwho {
display: flex; align-items: flex-start; gap: 22px; background: var(--bg-soft); border-radius: var(--radius-lg);
padding: 32px;
}
.service-forwho .icon-box { align-self: flex-start; }
.service-forwho h3 { font-size: 19px; margin-bottom: 10px; }
.service-forwho p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 640px) { .service-forwho { flex-direction: column; } }
/* ---------- Contacto: mapa de ubicación ---------- */
.contact-map {
margin-top: 26px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 14px 30px rgba(1,26,79,.12);
}
.contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 640px) { .contact-map iframe { height: 300px; } }
/* ---------- Libros Electrónicos: urgencia + checklist + confianza ---------- */
.urgency-section { padding: 80px 0; }
.urgency-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.urgency-text h2 { font-size: 30px; line-height: 1.28; margin: 0; }
.urgency-line-1 { color: var(--navy); }
.urgency-line-2 { color: var(--red); margin-top: 2px; }
.urgency-text p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin: 22px 0 0; }
.urgency-highlight { color: var(--navy) !important; font-weight: 700; }
/* Figura degradada asomando detrás de la imagen (offset hacia abajo a
la derecha), al estilo de una tarjeta con acento decorativo. */
.urgency-media { position: relative; }
.urgency-media::before {
content: ''; position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px;
background: linear-gradient(135deg, var(--red), var(--navy)); border-radius: var(--radius-lg); z-index: 0;
}
.urgency-media img {
position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
@media (max-width: 900px) {
.urgency-grid { grid-template-columns: 1fr; gap: 40px; }
.urgency-media { order: -1; max-width: 460px; margin: 0 auto; }
.urgency-text, .urgency-text p { text-align: left; }
}
/* Tarjetas centradas con relleno de color al hover: el fondo rojo
crece desde abajo hacia arriba (scaleY con transform-origin:bottom),
no aparece de golpe — y el ícono/textos invierten su color al mismo
ritmo para quedar legibles sobre el rojo. */
.help-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.help-card {
position: relative; overflow: hidden; background: #fff; border-radius: var(--radius-lg);
padding: 36px 28px 30px; text-align: center; box-shadow: 0 10px 26px rgba(1,26,79,.07);
border-bottom: 3px solid var(--red); transition: border-color .5s ease;
}
.help-card::before {
content: ''; position: absolute; inset: 0; background: var(--red); z-index: 0;
transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.help-card:hover::before { transform: scaleY(1); }
.help-card:hover { border-bottom-color: transparent; }
.help-card > * { position: relative; z-index: 1; }
.help-icon-frame { position: relative; width: 56px; height: 56px; margin: 0 auto 20px; }
.help-icon-frame::before, .help-icon-frame::after { content: ''; position: absolute; background: var(--border-soft); transition: background .5s ease; z-index: 0; }
.help-icon-frame::before { top: 50%; left: -10px; right: -10px; height: 1px; transform: translateY(-50%); }
.help-icon-frame::after { left: 50%; top: -10px; bottom: -10px; width: 1px; transform: translateX(-50%); }
.help-card:hover .help-icon-frame::before, .help-card:hover .help-icon-frame::after { background: rgba(255,255,255,.4); }
.help-icon-frame .icon-box {
position: relative; z-index: 1; width: 56px; height: 56px; margin: 0; color: var(--navy);
transition: color .5s ease;
}
.help-card:hover .icon-box { color: #fff; }
.help-card h4 { font-size: 16px; margin: 0 0 10px; color: var(--navy); transition: color .5s ease; }
.help-card p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; transition: color .5s ease; }
.help-card:hover h4 { color: #fff; }
.help-card:hover p { color: rgba(255,255,255,.9); }
@media (max-width: 780px) { .help-cards-grid { grid-template-columns: 1fr; } }
.trust-section { background: #fff; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; margin: 36px 0 30px; }
.trust-badge { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: var(--navy); }
.trust-badge .icon-box { color: var(--red); }
.trust-badge .icon-box svg { width: 24px; height: 24px; }
.trust-cta { text-align: center; }
.trust-cta .btn svg { width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; }
/* Variante de .reveal con un asentamiento elástico (escala en vez de
solo desplazamiento vertical) para que las listas de esta página no
se sientan como una copia más del fade-up genérico del resto del
sitio. */
.reveal.reveal-pop { transform: scale(.82) translateY(14px); }
.reveal.reveal-pop.in-view { transform: scale(1) translateY(0); transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
/* ---------- Tarjetas de riesgo/beneficio (Libros Electrónicos) ----------
Comparación enriquecida "si no regularizas" vs "trabajando con
nosotros": tarjeta con borde superior de color, badge de estado,
ítems en filas con fondo tintado y una nota final. La entrada lateral
(izquierda/derecha hacia el centro) la controla site.js mediante
[data-dual-slide], no CSS. */
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.risk-card {
background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
padding: 30px 28px 24px; border-top: 4px solid transparent;
}
.risk-card.bad { border-top-color: var(--red); }
.risk-card.good { border-top-color: var(--navy); }
.risk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.risk-card-head-left { display: flex; align-items: center; gap: 12px; }
.risk-card-head h3 { font-size: 18px; margin: 0; }
.risk-shield { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.risk-shield.bad { background: var(--red); }
.risk-shield.good { background: var(--navy); }
.risk-badge {
font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
padding: 6px 13px; border-radius: 999px; white-space: nowrap;
}
.risk-badge.bad { background: rgba(227,29,31,.12); color: var(--red); }
.risk-badge.good { background: var(--navy); color: #fff; }
.risk-card-sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.risk-items { display: flex; flex-direction: column; gap: 12px; }
.risk-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; border-radius: 14px; }
.risk-item.bad { background: rgba(227,29,31,.06); }
.risk-item.good { background: rgba(1,26,79,.05); }
.risk-item-icon {
width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; flex-shrink: 0; margin-top: 2px;
}
.risk-item-icon.bad { background: var(--red); }
.risk-item-icon.good { background: var(--navy); }
.risk-item h4 { font-size: 14.5px; margin: 0 0 4px; color: var(--navy); }
.risk-item p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.55; }
.risk-card-foot {
display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft);
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.risk-card-foot svg { width: 14px; height: 14px; flex-shrink: 0; }
.risk-card-foot.bad { color: var(--red); }
.risk-card-foot.good { color: var(--navy); }
@media (max-width: 900px) { .risk-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
.risk-card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ---------- Declaraciones Tributarias: checklist + cronograma ---------- */
.decl-grid { max-width: 720px; margin: 0 auto; }
.decl-intro h2 { font-size: 29px; margin: 10px 0 14px; }
.decl-intro p { color: var(--navy); font-size: 16px; font-weight: 700; margin: 0 0 26px; }
.decl-intro .decl-lead-text { color: var(--muted); font-size: 15.5px; font-weight: 400; line-height: 1.75; margin: 0 0 22px; }
.decl-checklist { display: flex; flex-direction: column; gap: 15px; margin-bottom: 34px; }
.decl-check-item { display: flex; align-items: center; gap: 16px; }
.decl-check-item .icon-box svg { width: 26px; height: 26px; }
.decl-check-item > span:last-child { font-size: 15.5px; font-weight: 600; color: var(--ink); }
/* El check se "dibuja" trazo por trazo al entrar en pantalla, en vez de
aparecer de golpe — reutiliza el mismo .reveal/.in-view (site.js) que
el resto del sitio, solo que acá lo que anima es el trazo del ícono. */
.check-draw svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease .15s; }
.reveal.in-view .check-draw svg path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .check-draw svg path { transition: none; stroke-dashoffset: 0; } }
.decl-outro { border-top: 1px solid var(--border-soft); padding-top: 28px; text-align: center; }
.decl-outro p { font-size: 17px; color: var(--navy); margin: 0 0 20px; }
/* ---------- Cumplimiento Tributario: carrusel 3D de recomendaciones ---------- */
.reco-carousel {
position: relative; max-width: 1120px; margin: 0 auto 34px; padding: 40px 0;
perspective: 2000px;
}
.reco-track {
position: relative; height: 580px; transform-style: preserve-3d;
}
.reco-slide {
position: absolute; top: 0; left: 50%; width: 460px; height: 580px;
border-radius: 26px; overflow: hidden; box-shadow: 0 20px 50px rgba(1,26,79,.25);
transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
backface-visibility: hidden; cursor: pointer;
}
.reco-slide.is-active { cursor: default; }
.reco-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reco-slide::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(1,26,79,.96) 0%, rgba(1,26,79,.75) 40%, rgba(1,26,79,.15) 78%);
}
.reco-slide-content {
position: absolute; left: 26px; right: 26px; bottom: 30px; z-index: 2; color: #fff;
opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease;
}
.reco-slide.is-active .reco-slide-content { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.reco-slide-content h4 { font-size: 21px; margin: 0 0 10px; color: #fff; }
.reco-slide-content p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; }
.reco-arrow {
position: absolute; top: 50%; margin-top: -22px; z-index: 6;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-soft); background: #fff;
display: flex; align-items: center; justify-content: center; color: var(--navy); cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease; box-shadow: 0 8px 20px rgba(1,26,79,.12);
}
.reco-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.reco-arrow:active { transform: translateY(-50%) scale(.92); margin-top: 0; top: 50%; }
.reco-arrow.prev { left: 0; }
.reco-arrow.next { right: 0; }
.reco-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.reco-dots button {
width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--border-soft); padding: 0; cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.reco-dots button.is-active { background: var(--red); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
.reco-slide { transition: none; }
.reco-slide-content { transition: none; }
}
@media (max-width: 900px) {
.reco-carousel { max-width: 100%; padding: 24px 0; }
.reco-track { height: 460px; }
.reco-slide { width: 340px; height: 460px; }
.reco-arrow { display: none; }
}
@media (max-width: 480px) {
.reco-track { height: 380px; }
.reco-slide { width: 270px; height: 380px; }
.reco-slide-content h4 { font-size: 18px; }
.reco-slide-content p { font-size: 13.5px; }
}
/* ---------- Outsourcing Contable: filas alternadas (texto/imagen
intercalando lados), con la imagen entrando en diagonal en forma de
"signo mayor" (>) si está a la derecha, o "menor" (<) si está a la
izquierda — y retirándose por esa misma diagonal si se sigue
bajando o se vuelve a subir (ver el scroll-linked en site.js). ---- */
.outs-alt-grid { display: flex; flex-direction: column; gap: 60px; margin-bottom: 44px; }
.outs-alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.outs-alt-row.is-reversed .outs-alt-text { grid-column: 2; grid-row: 1; }
.outs-alt-row.is-reversed .outs-alt-media { grid-column: 1; grid-row: 1; }
.outs-alt-text h3 { font-size: 24px; margin: 0 0 12px; color: var(--navy); }
.outs-alt-text p { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin: 0; }
.outs-alt-media {
position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; perspective: 1200px;
box-shadow: 0 20px 45px rgba(1,26,79,.18); will-change: transform, opacity;
}
.outs-alt-media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform .2s ease-out; will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.outs-alt-media { transform: none !important; opacity: 1 !important; }
.outs-alt-media img { transition: none; }
}
@media (max-width: 820px) {
.outs-alt-grid { gap: 40px; }
.outs-alt-row, .outs-alt-row.is-reversed { grid-template-columns: 1fr; }
.outs-alt-row .outs-alt-text, .outs-alt-row.is-reversed .outs-alt-text { grid-column: 1; grid-row: 2; }
.outs-alt-row .outs-alt-media, .outs-alt-row.is-reversed .outs-alt-media { grid-column: 1; grid-row: 1; }
}
/* Acordeón horizontal (1 fila de 4), igual que ".pilares" en Drovitech:
arrancan las 4 superpuestas en left:0 (tapadas por z-index) y se
despliegan en abanico, una detrás de otra, al entrar en pantalla
(.is-visible, disparado una sola vez desde site.js — ver el
IntersectionObserver de .decl-types-grid). Solo la animación de la
IMAGEN — el título/badge/texto quedan tal cual (siempre visibles /
el texto aparece con el hover). Se usa "left" y no
transform:translateX a propósito: un % se resuelve siempre contra
el ancho del contenedor, tanto en reposo como en la posición final,
sin importar el ancho real de cada tarjeta. */
.decl-types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.decl-type-card {
position: relative; aspect-ratio: 3 / 4; border-radius: 28px 28px 28px 90px; overflow: hidden;
box-shadow: 0 14px 30px rgba(1,26,79,.14); transition: transform .35s ease, box-shadow .35s ease;
}
.decl-type-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.decl-type-card img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
filter: blur(0) brightness(.9); transform: scale(1.02);
transition: filter .5s ease, transform .6s ease;
}
.decl-type-card:hover img {
filter: blur(6px) brightness(.55); transform: scale(1.1) !important;
transition: filter .5s ease, transform .5s ease; transition-delay: 0s !important;
}
.decl-type-card::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(1,26,79,.9), rgba(1,26,79,.1) 60%);
}
.decl-type-badge {
position: absolute; top: 18px; right: 18px; z-index: 2; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: .03em; color: #fff; background: rgba(227,29,31,.85); padding: 5px 12px; border-radius: 999px;
}
.decl-type-content { position: absolute; left: 24px; right: 24px; bottom: 54px; z-index: 2; color: #fff; }
.decl-type-content h4 { font-size: 30px; margin: 0 0 14px; color: #fff; }
.decl-type-content p {
font-size: 17px; color: rgba(255,255,255,.92); line-height: 1.6; margin: 0;
max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .3s ease;
}
.decl-type-card:hover .decl-type-content p { max-height: 160px; opacity: 1; transition: max-height .45s ease, opacity .4s ease .1s; }
@media (min-width: 901px) {
.decl-types-grid { position: relative; min-height: 410px; }
.decl-type-card {
position: absolute; top: 0; left: 0; height: 410px; aspect-ratio: unset;
width: calc((100% - 66px) / 4);
transition: left 1.4s cubic-bezier(.22,1,.36,1);
}
.decl-type-card:nth-child(1) { z-index: 4; }
.decl-type-card:nth-child(2) { z-index: 3; }
.decl-type-card:nth-child(3) { z-index: 2; }
.decl-type-card:nth-child(4) { z-index: 1; }
.decl-types-grid.is-visible .decl-type-card:nth-child(1) { left: 0; transition-delay: 0s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(2) { left: calc((100% - 66px) / 4 + 22px); transition-delay: .5s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(3) { left: calc(2 * ((100% - 66px) / 4 + 22px)); transition-delay: 1s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(4) { left: calc(3 * ((100% - 66px) / 4 + 22px)); transition-delay: 1.5s; }
/* Zoom-out sutil de la foto, sincronizado con el mismo delay de cada
tarjeta — el hover define su propia transición completa más abajo,
así nunca hereda estos delays. */
.decl-type-card img { transform: scale(1.15); transition: filter .5s ease, transform 1.4s cubic-bezier(.22,1,.36,1); }
.decl-types-grid.is-visible .decl-type-card:nth-child(1) img { transition-delay: 0s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(2) img { transition-delay: .5s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(3) img { transition-delay: 1s; }
.decl-types-grid.is-visible .decl-type-card:nth-child(4) img { transition-delay: 1.5s; }
.decl-types-grid.is-visible .decl-type-card img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.decl-type-card, .decl-type-card img { transition: none !important; }
}
@media (max-width: 900px) { .decl-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .decl-types-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.decl-type-content { bottom: 36px; }
.decl-type-content h4 { font-size: 23px; }
.decl-type-content p { font-size: 15px; }
}
@media (hover: none) {
/* Sin hover real (touch): mostrar siempre el texto, no depender de un hover que no existe. */
.decl-type-card img { filter: brightness(.65); }
.decl-type-content p { max-height: 160px; opacity: 1; }
}
/* ---------- Comparación de regímenes (Auditoría y Asesoría) ---------- */
.regime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.regime-col { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 30px; }
.regime-col h3 { display: flex; align-items: center; gap: 12px; font-size: 17px; margin-bottom: 20px; color: var(--navy); }
.regime-col-icon {
width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; flex-shrink: 0;
}
.regime-col-icon.bad { background: var(--red); }
.regime-col-icon.good { background: var(--navy); }
.regime-col ul { display: flex; flex-direction: column; gap: 14px; }
.regime-col li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
.regime-col li span {
width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; flex-shrink: 0;
}
.regime-col-bad { border-color: rgba(227,29,31,.18); }
.regime-col-bad li span { background: var(--red); }
.regime-col-good { border-color: rgba(1,26,79,.18); }
.regime-col-good li span { background: var(--navy); }
/* Entrada/salida "invertida" ligada al scroll (ver updateRegimeColumns
en site.js): a diferencia del resto del sitio (dispara una vez y
queda fijo), acá la columna de problemas sale/vuelve hacia la
izquierda y la de beneficios hacia la derecha en cada frame según el
progreso real del scroll — al bajar y pasar de largo la sección, se
revierten hacia el lado por el que entraron, en vez de quedar fijas. */
.regime-col-bad, .regime-col-good { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
.regime-col-bad, .regime-col-good { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 760px) { .regime-grid { grid-template-columns: 1fr; } }
/* Sección con foto de fondo (overlay navy para contraste) — el texto
va directo sobre la foto, sin tarjeta. La opacidad de toda la
sección queda atada al scroll vía JS (ver updateRegimeQuoteFade en
site.js): a diferencia de los .reveal normales del sitio (que
disparan una sola vez y quedan fijos), acá es un desvanecimiento
"invertido" — reversible, se desvanece de nuevo si volvés a subir. */
.regime-quote-section {
position: relative; background-size: cover; background-position: center;
padding: 130px 0; opacity: 0; will-change: opacity, transform;
}
.regime-quote-section::before {
content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(1,15,48,.82), rgba(1,26,79,.7));
}
.regime-quote-section .wrap { position: relative; z-index: 1; }
.regime-quote { max-width: 780px; margin: 0 auto; text-align: center; }
.regime-quote p { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 18px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.regime-quote strong {
display: block; font-family: 'Poppins', sans-serif; font-size: 26px; color: #fff;
text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
@media (max-width: 640px) {
.regime-quote-section { padding: 90px 0; }
.regime-quote p { font-size: 16.5px; }
.regime-quote strong { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.regime-quote-section { opacity: 1 !important; transform: none !important; }
}
/* ---------- Tarjetas de regímenes tributarios ---------- */
.regime-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; perspective: 1200px; margin-bottom: 36px; }
.regime-card {
background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 28px 22px;
text-align: center; transition: transform .3s ease, box-shadow .3s ease;
}
.regime-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.regime-card .icon-box { margin: 0 auto 16px; }
.regime-card h3 { font-size: 19px; margin-bottom: 8px; }
.regime-card-tag {
display: block; font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .03em;
margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft);
}
.regime-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }
/* Entrada tipo "flip" 3D ligada al scroll (mismo espíritu "invertido"
que .regime-quote-section/.regime-grid más arriba): cada tarjeta gira
sobre su propio eje vertical según el progreso real del scroll, no
una vez con IntersectionObserver — si se sube de nuevo, la tarjeta
vuelve a girar y ocultarse. site.js fija opacity/transform inline en
cada frame; acá solo el estado base y transform-style. */
.regime-card-scroll { opacity: 0; transform: rotateY(90deg) scale(.8); transform-style: preserve-3d; will-change: transform, opacity; }
.regime-cards-cta { text-align: center; }
.regime-cards-cta p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
@media (max-width: 980px) { .regime-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .regime-cards-grid { grid-template-columns: 1fr; } }
/* ---------- Why us / process ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { text-align: center; padding: 8px; }
.why-card .icon-box { margin: 0 auto 18px; color: var(--red); }
.why-card h4 { font-size: 16.5px; margin-bottom: 8px; }
.why-card p { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.process-list { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.process-step { display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--border-soft); }
.process-step:last-child { border-bottom: none; }
.process-step-num {
font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: var(--red);
width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--border-soft); display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.process-step h4 { font-size: 17px; margin-bottom: 6px; }
.process-step p { color: var(--muted); font-size: 14.5px; margin: 0; }
/* ---------- Section variants ---------- */
.section-alt { background: #fff; }
.section-navy { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; }
.section-navy h2 { color: #fff; }
.section-navy .section-head p { color: rgba(255,255,255,.75); }
/* ---------- Values (Nosotros): fondo con foto + Parallax Scrolling ----------
.values-parallax-bg es una capa de fondo sobredimensionada (140% de
alto, -20% arriba/abajo) para tener margen de sobra al moverla; en
cada scroll, site.js le fija un translateY proporcional a la
posición de la sección pero MÁS LENTO que el scroll real (factor
.3), así el fondo "se queda atrás" respecto al contenido de primer
plano — el efecto óptico de profundidad clásico del parallax. */
.values-parallax-section { position: relative; overflow: hidden; background: var(--navy); }
.values-parallax-bg {
position: absolute; top: -20%; left: 0; right: 0; height: 140%; z-index: 0;
background-size: cover; background-position: center; will-change: transform;
}
.values-parallax-section::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(135deg, rgba(1,26,79,.88), rgba(1,15,48,.86));
}
.values-parallax-section .wrap { position: relative; z-index: 2; }
.values-parallax-section h2 { color: #fff; }
.values-parallax-section .section-head p { color: rgba(255,255,255,.75); }
/* Checklist blanco sobre el fondo oscuro (Home: "Formaliza tu
empresa"), centrado en vez del alineado a la izquierda que usa en
Declaraciones Tributarias / Contabilidad Integral. */
.values-parallax-section .decl-checklist { max-width: 560px; margin: 0 auto 34px; }
.values-parallax-section .decl-check-item .icon-box { color: #fff; }
.values-parallax-section .decl-check-item > span:last-child { color: #fff; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card { background: transparent; padding: 6px; text-align: center; }
.value-card .icon-box { margin: 0 auto 18px; color: #fff; }
.value-card h3 { font-size: 18px; margin-bottom: 8px; color: #fff; }
.value-card p { color: rgba(255,255,255,.78); font-size: 14.5px; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }
/* Variante para grillas con un número de tarjetas que no llena
exactamente las 3 columnas (Home: 5 tarjetas) — flex en vez de grid
para que la última fila incompleta quede centrada, no pegada a la
izquierda. */
.values-grid.values-grid-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.values-grid-wrap .value-card { flex: 0 1 320px; }
@media (max-width: 900px) { .values-grid-wrap .value-card { flex-basis: 100%; max-width: 420px; } }
/* Variante 2x2 (Declaraciones Tributarias: recibos por honorarios, 4
tarjetas) — en vez de 3+1 con la última fila incompleta. */
.values-grid.values-grid-2col { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
/* Detalle de servicio (Servicios.cshtml): texto + foto real
alternando de lado — grid-column explícito (no order) para que el
lado que corresponde a cada bloque no dependa del orden en el DOM. */
.service-detail-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.service-detail-text { grid-column: 1; grid-row: 1; min-width: 0; }
.service-detail-media { grid-column: 2; grid-row: 1; }
.service-detail-grid.is-reversed { grid-template-columns: .9fr 1.1fr; }
.service-detail-grid.is-reversed .service-detail-text { grid-column: 2; }
.service-detail-grid.is-reversed .service-detail-media { grid-column: 1; }
.service-detail-media { perspective: 1200px; }
.service-detail-media img {
width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft); display: block;
}
/* Tilt 3D al mouse (ver site.js): solo se activa una vez que la fila ya
terminó de entrar (.is-visible) — antes de eso, el propio JS ignora
el mousemove. transform/box-shadow del ![]()
son independientes del
translateX de entrada, que vive en el contenedor .service-detail-media,
así que no hay conflicto entre ambas animaciones. */
.service-detail-media img {
transition: transform .2s ease-out, box-shadow .3s ease;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.service-detail-media img { transition: box-shadow .3s ease; }
}
@media (max-width: 760px) {
.service-detail-grid, .service-detail-grid.is-reversed { grid-template-columns: 1fr; }
.service-detail-grid .service-detail-text, .service-detail-grid.is-reversed .service-detail-text,
.service-detail-grid .service-detail-media, .service-detail-grid.is-reversed .service-detail-media {
grid-column: 1;
}
.service-detail-media { grid-row: 1; }
.service-detail-text { grid-row: 2; }
.service-detail-media img { height: 320px; }
}
/* Entrada lenta desde los costados (igual que .project-type-row de
Drovitech): cada bloque sale desde el extremo del lado donde termina
ubicado — el texto desde su lado, la foto desde el suyo — y
convergen al centro. % (no px) para que arranquen bien afuera de su
propia caja sin importar el ancho de pantalla. .is-visible lo
agrega el IntersectionObserver de site.js una sola vez, la primera
vez que la fila entra en pantalla. */
.service-detail-grid[data-slide-row] .service-detail-text,
.service-detail-grid[data-slide-row] .service-detail-media {
opacity: 0; transition: transform 1.6s cubic-bezier(.45,0,.15,1), opacity .8s ease-out;
}
.service-detail-grid[data-slide-row] .service-detail-text { transform: translateX(-130%); }
.service-detail-grid[data-slide-row] .service-detail-media { transform: translateX(130%); }
.service-detail-grid.is-reversed .service-detail-text { transform: translateX(130%); }
.service-detail-grid.is-reversed .service-detail-media { transform: translateX(-130%); }
.service-detail-grid.is-visible .service-detail-text,
.service-detail-grid.is-visible .service-detail-media {
opacity: 1; transform: translateX(0);
}
.service-detail-grid.is-visible .service-detail-media { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
.service-detail-grid[data-slide-row] .service-detail-text,
.service-detail-grid[data-slide-row] .service-detail-media {
transition: none; opacity: 1; transform: none;
}
}
.mv-card { background: #fff; border-radius: var(--radius-lg); padding: 34px; border: 1px solid var(--border-soft); }
.mv-card .icon-box { margin-bottom: 18px; }
.mv-card h3 { font-size: 20px; margin-bottom: 12px; }
.mv-card p { color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }
/* ---------- Nosotros: "La confianza no se promete" ----------
Reutiliza el mismo .service-detail-grid[data-slide-row] de las
vistas de servicio (texto y foto entran cada uno desde su propio
lado, disparado una sola vez al hacer scroll) — .trust-row solo
agranda la foto para el look "alargado" que pidió el cliente, sin
tocar el tamaño usado en las páginas de servicio. */
.trust-rows { display: flex; flex-direction: column; gap: 76px; }
@media (min-width: 761px) {
/* Especificidad más alta que .service-detail-grid: si no se limita a
desktop acá, le gana también al fallback de una sola columna que
.service-detail-grid trae para mobile (max-width:760px) y rompe el
layout angosto en pantallas chicas. */
.trust-row.service-detail-grid { grid-template-columns: 1.35fr .65fr; }
.trust-row.service-detail-grid.is-reversed { grid-template-columns: .65fr 1.35fr; }
}
.trust-row .service-detail-text h3 { font-size: 24px; margin-bottom: 14px; }
.trust-row .service-detail-text p { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.trust-row .service-detail-media img { height: 540px; }
.trust-outro { text-align: center; max-width: 640px; margin: 76px auto 0; }
.trust-outro p { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; }
@media (max-width: 760px) {
.trust-rows { gap: 46px; }
.trust-row .service-detail-media img { height: 340px; }
.trust-outro { margin-top: 46px; }
}
/* ---------- Final CTA ---------- */
.final-cta {
background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff;
padding: 70px 0; text-align: center;
/* Arco suave en el borde superior: radio horizontal 50% (la mitad del
ancho, para que la curva se extienda a lo largo de toda la
sección) combinado con un radio vertical chico, así queda un
"domo" bien achatado en vez de una esquina redondeada puntual. */
border-radius: 50% 50% 0 0 / 36px 36px 0 0;
}
.final-cta h2 { color: #fff; font-size: 30px; margin-bottom: 14px; }
.final-cta p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 30px; font-size: 15.5px; }
.final-cta .btn-navy { background: #fff; color: var(--red); }
.final-cta .btn-navy:hover { background: #f2f2f2; }
/* ---------- Contact page ---------- */
/* Fila de contacto rápido debajo del hero: sin tarjeta, con la
textura "fondo-contador" de fondo — cada dato queda grande y
centrado, reemplaza la antigua caja navy "Datos de contacto". */
.contact-bar-section {
background: url('/img/fondo-contador.png') center / cover no-repeat;
}
.contact-bar {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px;
}
.contact-bar a {
display: inline-flex; align-items: center; color: var(--navy); font-size: 22px; font-weight: 700;
transition: color .2s ease;
}
.contact-bar a:hover { color: var(--red); }
.contact-bar svg { width: 30px; height: 30px; flex-shrink: 0; }
/* Solo íconos por defecto: el número/correo aparece al costado recién
al pasar el mouse (o con teclado, vía :focus-visible), expandiéndose
en vez de aparecer de golpe. max-width (no width) porque el ancho
final del texto no se conoce de antemano. */
.contact-bar-text {
display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap;
opacity: 0; transition: max-width .35s ease, margin-left .35s ease, opacity .25s ease;
}
.contact-bar a:hover .contact-bar-text,
.contact-bar a:focus-visible .contact-bar-text {
max-width: 400px; margin-left: 12px; opacity: 1;
}
@media (max-width: 760px) {
.contact-bar { gap: 24px; }
.contact-bar a { font-size: 17px; }
.contact-bar svg { width: 24px; height: 24px; }
}
.contact-form-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; }
.contact-form-media { display: flex; align-items: flex-end; justify-content: center; }
.contact-form-media img { width: 100%; max-width: 420px; height: auto; display: block; }
@media (max-width: 900px) {
.contact-form-grid { display: block; }
.contact-form-media { display: none; }
}
/* Formulario "tipo lista numerada" (sin tarjeta, sin bordes de caja):
cada campo es un label grande + una línea para escribir debajo, no
un input encerrado. El envío sigue yendo a WhatsApp igual que antes
(ver #contactoForm en site.js), esto solo cambia el estilo. */
.wa-form { width: 100%; max-width: 760px; }
.wa-form h3 { font-size: 26px; margin-bottom: 34px; }
.wa-field { display: flex; align-items: flex-start; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border-soft); transition: border-color .2s ease; }
.wa-field:focus-within { border-bottom-color: var(--red); }
.wa-field-num { font-size: 13px; font-weight: 700; color: var(--muted); padding-top: 6px; flex-shrink: 0; }
.wa-field-body { flex: 1; min-width: 0; }
.wa-field-body label { display: block; font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 10px; cursor: pointer; }
.wa-field-body input, .wa-field-body textarea {
display: block; width: 100%; border: none; background: transparent; font-family: inherit;
font-size: 17px; color: var(--ink); padding: 4px 0; resize: none;
}
.wa-field-body input:focus, .wa-field-body textarea:focus { outline: none; }
.wa-field-body textarea { min-height: 56px; }
/* Selector personalizado (reemplaza el