/* ============================================================ MDS Especialistas Fiscales — sistema de movimiento (2026-08-01) ------------------------------------------------------------ Dirección: la animación de una firma fiscal tiene que leerse como PRECISIÓN, no como juego. Nada de rebotes, elásticos ni overshoot: solo salidas power/expo y revelados con máscara, como líneas de un documento asentándose. El movimiento acompaña, nunca protagoniza. GUARD ANTI-FOUC (lo más importante de este archivo): los elementos animados se ocultan SOLO bajo `.js-anim`, clase que pone un script inline en el y que se retira sola si GSAP no cargó en 2.5 s. Si el JS falla, el sitio se ve completo y estático en vez de quedar en blanco — que en un sitio institucional con SEO sería mucho peor que no tener animación. ============================================================ */ /* Estado inicial de lo animable. Sin `.js-anim` esto no aplica. */ /* Sin will-change acá: lo tenían 41 de 202 elementos, promovidos a capa de composición para siempre (6 long tasks de hasta 280 ms en móvil). GSAP ya gestiona will-change por tween mientras dura la animación. */ .js-anim [data-anim] { opacity: 0; } /* Revelado con máscara: el contenido sube desde detrás de su propio borde. Es el gesto base — se usa en titulares y bloques de texto. */ .js-anim [data-anim="mask"] { opacity: 1; } [data-anim="mask"] { display: block; overflow: hidden; } .js-anim [data-anim="mask"] > * { opacity: 0; } /* Palabras sueltas de un titular partido. inline-block es obligatorio: sin eso, transform no aplica sobre texto en línea. NO se recorta con overflow porque un titular de varias líneas se cortaría entre renglones; el desplazamiento se mantiene corto y la opacidad hace el resto. */ .mds-w { display: inline-block; } /* Texto real para lectores de pantalla: las palabras visibles van aria-hidden porque están partidas y se leerían entrecortadas. */ .mds-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Cortina de entrada ──────────────────────────────────────────── Dos hojas azules cubren la pantalla y se abren hacia los lados revelando el hero. La construye el JS, NUNCA está en el HTML: si el script no corre, el visitante jamás ve una pantalla tapada. Se muestra una sola vez por sesión — hacerla esperar en cada visita sería cobrarle al usuario por una animación que ya vio. */ .mds-curtain { position: fixed; inset: 0; z-index: 90; pointer-events: none; } .mds-curtain__leaf { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #001b3d; } .mds-curtain__leaf--l { left: 0; } .mds-curtain__leaf--r { right: 0; } .mds-curtain__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .mds-curtain__mark img { width: 200px; max-width: 46vw; height: auto; } /* Mientras la cortina está puesta, el documento no se desplaza. */ html.mds-curtain-on, html.mds-curtain-on body { overflow: hidden; } /* Barra de progreso de lectura. En un sitio de cumplimiento se lee como avance dentro de un expediente, no como adorno. */ .mds-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #775a19, #b8933f); z-index: 60; pointer-events: none; } /* Header que se compacta al bajar. La transición va acá y no en GSAP para que funcione aunque el JS de animación no cargue. */ header { transition: height .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background-color .35s ease; } header .mds-logo { transition: height .35s cubic-bezier(.16,1,.3,1); } header.mds-compact { box-shadow: 0 1px 20px rgba(0,27,61,.10); backdrop-filter: blur(8px); } header.mds-compact .mds-header-inner { height: 4rem; } header.mds-compact .mds-logo { height: 2.75rem; } /* Tarjetas: elevación al pasar el mouse. El borde dorado que ya existía se acompaña ahora de desplazamiento y sombra para que la tarjeta se sienta un objeto y no un rectángulo pintado. */ .mds-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease; } @media (hover: hover) { /* will-change solo donde hay puntero y solo al acercarse, no de entrada. */ .mds-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(0,27,61,.18); will-change: transform; } } /* Regla dorada que se traza bajo cada eyebrow — como subrayar una cláusula. La escala la anima ScrollTrigger. */ .mds-rule { display: block; height: 2px; width: 56px; margin-top: 12px; background: #775a19; transform: scaleX(0); transform-origin: 0 50%; } /* En secciones centradas la regla tiene que centrarse también, y crecer desde el medio; si no, queda colgando a la izquierda del rótulo. */ .mds-rule--center { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; } /* Brillo que recorre el borde de la tarjeta destacada del hero. Muy contenido: 6 s de ciclo, opacidad baja. */ .mds-sheen { position: relative; overflow: hidden; } .mds-sheen::after { content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(233,193,118,.10), transparent); transform: skewX(-18deg); animation: mdsSheen 6s ease-in-out infinite; } @keyframes mdsSheen { 0%, 70% { left: -60%; } 100% { left: 130%; } } /* La cita se fija a pantalla completa mientras se revela, así que su sección necesita ocupar el alto del viewport y centrar el contenido; si no, queda pegada arriba con un hueco enorme debajo. Solo en escritorio: el pin no corre en táctil. */ @media (min-width: 900px) { [data-quote-section] { min-height: 100vh; display: flex; align-items: center; } [data-quote-section] > div { width: 100%; } } /* Ancla de scroll por debajo del header sticky. */ :target { scroll-margin-top: 6rem; } /* ------------------------------------------------------------ Respeto por prefers-reduced-motion. No es opcional: parte del público de este sitio son personas mayores y el movimiento vestibular molesta de verdad. Acá se apaga TODO y el contenido queda visible y quieto. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .js-anim [data-anim], .js-anim [data-anim="mask"] > *, .mds-w { opacity: 1 !important; transform: none !important; } [data-band] { clip-path: none !important; } .mds-sheen::after { animation: none; } .mds-progress { display: none; } .mds-rule { transform: scaleX(1); } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ HERO CINEMATOGRÁFICO (solo el home) Referencia: "Daily Hero 3 — Arkkhe". Lo que se toma de ahí es la estructura —imagen a sangre completa, titular grande encima, nav transparente, sello circular— no el tono onírico, que en una firma fiscal restaría credibilidad. ============================================================ */ .mds-hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; } .mds-hero__media { position: absolute; inset: 0; z-index: 0; } .mds-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; } /* Velo en degradado, no plano: oscuro donde va el texto y casi limpio sobre la ventana, para no matar la luz ámbar que da el ambiente. */ .mds-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,10,22,.90) 0%, rgba(0,10,22,.72) 38%, rgba(0,10,22,.28) 66%, rgba(0,10,22,.42) 100%); } .mds-hero__inner { position: relative; z-index: 2; width: 100%; } .mds-hero__inner .mds-rule { background: #e9c176; } @media (max-width: 900px) { .mds-hero { min-height: 86vh; } .mds-hero__media img { object-position: 50% center; } /* En vertical el texto se apoya abajo, así que el velo va de abajo hacia arriba en vez de lateral. */ .mds-hero__scrim { background: linear-gradient(180deg, rgba(0,10,22,.55) 0%, rgba(0,10,22,.30) 35%, rgba(0,10,22,.92) 100%); } } /* ── Nav transparente sobre el hero ────────────────────────── Solo en la página con hero de imagen. Al compactarse recupera fondo. Especificidad body.clase header ⇒ gana a las clases de Tailwind. */ body.mds-hero-page header { background: transparent; border-color: transparent; box-shadow: none; } body.mds-hero-page header:not(.mds-compact) a, body.mds-hero-page header:not(.mds-compact) span { color: #fff; } body.mds-hero-page header:not(.mds-compact) a[href*="agendar"], body.mds-hero-page header:not(.mds-compact) .bg-primary-container { color: #fff; } body.mds-hero-page header.mds-compact { background: color-mix(in srgb, #fbf9f8 92%, transparent); } /* El logo oscuro desaparece sobre la imagen: se cambia por el blanco mientras la barra es transparente. */ body.mds-hero-page header .mds-logo--dark { display: none; } body.mds-hero-page header.mds-compact .mds-logo--dark { display: block; } body.mds-hero-page header.mds-compact .mds-logo--light { display: none; } /* ── Sello circular giratorio ──────────────────────────────── Sustituye al "scroll to explore" de la referencia por algo que en este negocio significa algo: la oferta de evaluación sin compromiso. */ .mds-seal { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; width: 116px; height: 116px; } .mds-seal svg { width: 100%; height: 100%; } .mds-seal__ring { animation: mdsSpin 22s linear infinite; transform-origin: 50% 50%; } .mds-seal text { fill: #e9c176; font-size: 9.2px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .mds-seal__arrow { position: absolute; inset: 0; display: grid; place-items: center; color: #e9c176; } @keyframes mdsSpin { to { transform: rotate(360deg); } } @media (max-width: 900px) { .mds-seal { width: 92px; height: 92px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .mds-seal__ring { animation: none; } } /* ── Correcciones de contraste del hero ────────────────────── La imagen sube POR DEBAJO del header: con el header sticky y transparente, arriba quedaba una franja del fondo crema de la página. Margen negativo del alto de la barra (h-20 = 5rem) + padding que devuelve el espacio para que el texto no se meta bajo el logo. */ body.mds-hero-page .mds-hero { margin-top: -5rem; padding-top: 5rem; } /* El contenido del hero hereda los colores oscuros de Tailwind pensados para fondo crema (`text-primary` es #000). Sobre la foto hay que forzarlos a claro, o el titular desaparece. */ .mds-hero__inner h2, .mds-hero__inner h1 { color: #ffffff; } .mds-hero__inner p { color: rgba(255,255,255,.82); } .mds-hero__inner .text-secondary { color: #e9c176; } /* Botón secundario: borde y texto claros en vez de negro sobre negro. */ .mds-hero__inner a[class*="border"] { color: #ffffff; border-color: rgba(233,193,118,.55); } .mds-hero__inner a[class*="border"]:hover { background: rgba(255,255,255,.08); } /* ── Ajustes del hero en móvil ─────────────────────────────── El sello quedaba justo encima de "Agendar evaluación", tapando un botón real. Nunca debe interceptar toques, y en pantallas angostas directamente no hay lugar para él. */ .mds-seal { pointer-events: none; } @media (max-width: 900px) { .mds-seal { display: none; } } /* El titular a 48px ocupaba cinco líneas y empujaba los botones fuera de la pantalla: en un hero, el CTA tiene que verse sin scrollear. */ @media (max-width: 640px) { .mds-hero__inner h2 { font-size: 34px; line-height: 1.14; } .mds-hero__inner p { font-size: 15.5px; line-height: 1.55; } .mds-hero { min-height: 92vh; } } /* ── Contraste del footer ──────────────────────────────────── El texto usaba `text-on-primary-container/80` (#6f84ac al 80%) sobre el azul #001b3d: 3.38:1 medido, por debajo del 4.5:1 de AA. Y no era texto decorativo — ahí están el teléfono, el WhatsApp y el correo. La clase .mds-footer existe solo para ganarle en especificidad a las utilidades de Tailwind sin tocar el marcado de cada enlace. */ .mds-footer p, .mds-footer a, .mds-footer div { color: #D3DCE8; } /* 11.9:1 */ .mds-footer a:hover { color: #ffffff; } .mds-footer .text-on-primary-container\/60, .mds-footer p:last-child { color: #A9B8CC; } /* 8.5:1 — el aviso legal puede ceder algo */ /* ── Párrafo del hero como tarjeta en móvil ────────────────── En vertical el texto cae sobre la parte más movida de la foto (la ventana, los papeles) y el velo no alcanza: leer un párrafo largo ahí cuesta. El titular aguanta porque es enorme y en negrita; el párrafo no. En escritorio no hace falta —ahí el texto va sobre la pared lisa del tercio izquierdo— así que la tarjeta es solo para pantallas angostas. Sin backdrop-filter a propósito: con la imagen desplazándose detrás, el desenfoque se repinta en cada cuadro y en móvil ya veníamos justos de rendimiento. Un fondo semiopaco logra lo mismo y es gratis. */ @media (max-width: 900px) { .mds-hero__inner p { background: rgba(2, 14, 28, .40); border: 1px solid rgba(233, 193, 118, .22); border-left: 2px solid rgba(233, 193, 118, .55); border-radius: 12px; padding: 16px 18px; color: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); } }