/* =========================================================
MEDICCA — Rediseño 2026 (editorial premium)
Sistema de diseño: tokens, tipografía, layout, secciones
========================================================= */
/* ---------- Design Tokens ---------- */
:root {
/* Paleta */
--m-navy: #0B1733;
--m-navy-2: #142447;
--m-blue: #0193DE;
--m-blue-light: #5cc1ee;
/* --m-teal repuntado de teal #1ebaae a celeste/cyan-blue para eliminar
tonos verdosos del sitio (conserva nombre del token por compatibilidad) */
--m-teal: #18A8E0;
--m-coral: #FF6B57;
--m-amber: #F5B642;
--m-paper: #FAF8F4; /* blanco roto editorial */
--m-paper-2: #F2EFEA;
--m-ink: #0B1733; /* alias semántico de --m-navy para texto */
--m-ink-soft: #34405B;
--m-ink-muted: #6A7693;
--m-line: #E5E1D8;
--m-white: #FFFFFF;
--m-whatsapp: #25d366;
/* Tipografía */
--f-serif: "Fraunces", "Playfair Display", Georgia, serif;
--f-sans: "Inter", "Quicksand", -apple-system, Segoe UI, sans-serif;
/* Escala fluida */
--fs-base: clamp(1rem, .95rem + .25vw, 1.125rem);
--fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.35rem);
--fs-xl: clamp(1.5rem, 1.3rem + .8vw, 2rem);
--fs-2xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
--fs-3xl: clamp(2.6rem, 2rem + 2.4vw, 4.5rem);
--fs-4xl: clamp(3.2rem, 2.4rem + 3.6vw, 6.5rem);
--fs-display: clamp(3.5rem, 2.5rem + 5vw, 8rem);
/* Espaciado (--space-6 y --space-7 son los usados en el diseño) */
--space-6: 4rem;
--space-7: 6rem;
/* Otros */
--radius-sm: 8px;
--radius: 16px;
--radius-lg: 28px;
--radius-pill: 999px;
--shadow: 0 12px 40px rgba(11,23,51,.08);
--shadow-lg: 0 24px 60px rgba(11,23,51,.12);
--shadow-color: 0 30px 60px rgba(1,147,222,.25);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--container: 1280px;
--container-narrow: 980px;
--container-text: 720px;
}
/* ---------- Fuentes editoriales (Google Fonts) ----------
El @import render-blocking se movió a en el
de cada página (ver _scripts/_fix_font_loading.py) para mejorar FCP. */
/* ---------- Reset suave sobre el body original ---------- */
body.rd {
font-family: var(--f-sans);
font-size: var(--fs-base);
line-height: 1.55;
color: var(--m-ink-soft);
background: var(--m-paper);
overflow-x: hidden;
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
}
body.rd .wrapper { overflow-x: clip; }
body.rd h1, body.rd h2, body.rd h3, body.rd h4, body.rd h5, body.rd h6,
body.rd .h1, body.rd .h2, body.rd .h3 {
font-family: var(--f-serif);
font-weight: 600;
color: var(--m-ink);
letter-spacing: -.02em;
line-height: 1.05;
font-feature-settings: "ss01";
}
body.rd a { color: inherit; text-decoration: none; }
body.rd img { max-width: 100%; height: auto; display: block; }
/* Selection */
body.rd ::selection { background: var(--m-blue); color: var(--m-white); }
/* ---------- Layout helpers ---------- */
.rd .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.rd .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.rd .container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 24px; }
.rd .section { padding: var(--space-7) 0; position: relative; }
.rd .section-dark { background: var(--m-navy); color: rgba(255,255,255,.78); }
.rd .section-dark h1, .rd .section-dark h2, .rd .section-dark h3 { color: var(--m-white); }
.rd .section-paper { background: var(--m-paper); }
.rd .section-paper-2 { background: var(--m-paper-2); }
/* .section-cream eliminado — alias idéntico a .section-paper, sin uso en HTML */
/* ---------- Botones ---------- */
.rd .btn-rd {
display: inline-flex;
align-items: center;
gap: .65rem;
padding: 16px 28px;
border-radius: var(--radius-pill);
font-family: var(--f-sans);
font-weight: 600;
font-size: .98rem;
letter-spacing: -.01em;
cursor: pointer;
border: none;
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s ease, color .25s ease;
position: relative;
text-decoration: none !important;
line-height: 1;
}
.rd .btn-rd--primary {
background: var(--m-ink);
color: var(--m-white);
}
.rd .btn-rd--primary:hover {
background: var(--m-blue);
color: var(--m-white);
transform: translateY(-1px);
box-shadow: var(--shadow-color);
}
.rd .btn-rd--accent {
background: var(--m-coral);
color: var(--m-white) !important;
box-shadow: 0 6px 18px rgba(255, 107, 87, 0.35);
}
.rd .btn-rd--accent:hover,
.rd .btn-rd--accent:focus-visible {
background: #ff8470 !important; /* coral más claro y vibrante */
color: var(--m-white) !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(255, 107, 87, 0.5);
}
.rd .btn-rd--ghost {
background: transparent;
color: var(--m-ink);
border: 1.5px solid var(--m-ink);
}
.rd .btn-rd--ghost:hover {
background: var(--m-ink);
color: var(--m-white);
transform: translateY(-1px);
}
.rd .btn-rd--light {
background: rgba(255,255,255,.1);
color: var(--m-white);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px);
}
.rd .btn-rd--light:hover {
background: var(--m-white);
color: var(--m-ink);
transform: translateY(-1px);
}
.rd .btn-rd .arrow {
display: inline-block;
transition: transform .35s var(--ease-out);
}
.rd .btn-rd:hover .arrow { transform: translateX(3px); }
/* Magnetic effect helper: usa custom props --mx/--my que setea el JS */
.rd .magnetic {
display: inline-flex;
will-change: transform;
--mx: 0px;
--my: 0px;
/* transition heredada de .btn-rd; no redefinir aquí para evitar duplicado */
}
.rd .btn-rd.magnetic {
transform: translate(var(--mx), var(--my));
}
.rd .btn-rd.magnetic:hover {
transform: translate(var(--mx), calc(var(--my) - 1px));
}
/* ---------- Eyebrow / tag ---------- */
.rd .eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--f-sans);
font-weight: 600;
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-blue);
}
.rd .eyebrow::before {
content: "";
width: 28px;
height: 1.5px;
background: currentColor;
display: inline-block;
}
.rd .section-dark .eyebrow { color: var(--m-teal); }
/* =========================================================
NAVBAR override (estilo editorial)
Sticky con efecto liquid glass: backdrop-filter saturate + blur fuerte,
bg semi-transparente, sutil borde inferior, sombra interna sutil.
========================================================= */
body.rd .header.header-layout1 { background: transparent; }
body.rd .navbar.sticky-navbar {
background: rgba(250, 248, 244, 0.65);
backdrop-filter: saturate(200%) blur(22px);
-webkit-backdrop-filter: saturate(200%) blur(22px);
border-bottom: 1px solid rgba(11, 23, 51, 0.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 24px rgba(11, 23, 51, 0.04);
padding: 14px 0;
transition: background .3s ease, padding .25s ease, border-color .25s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* .is-scrolled primera definición eliminada — consolidada más abajo (línea ~472) */
body.rd .navbar .nav__item-link {
font-family: var(--f-sans);
font-weight: 500;
font-size: .92rem;
color: var(--m-ink);
letter-spacing: -.005em;
transition: color .2s ease;
}
body.rd .navbar .nav__item-link:hover { color: var(--m-blue); }
body.rd .navbar .nav__item-link.active { color: var(--m-blue); }
/* ============================================================
HEADER overlay sobre el hero (home only)
El header flota encima del hero en vez de empujarlo abajo.
Al scrollear se vuelve fijo con background crema editorial.
============================================================ */
body.rd.home-rd .header.header-layout1 {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: none;
background: transparent !important;
}
body.rd.home-rd .header.header-layout1 .navbar { pointer-events: auto; }
/* Navbar transparente sobre el hero oscuro (estado inicial home) */
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) {
background: transparent !important;
border-bottom-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
/* Solo links DEL NIVEL SUPERIOR del nav (no del dropdown que está debajo) — solo desktop.
En mobile (<992px) el menú abre en panel lateral blanco; el texto debe ser oscuro. */
@media (min-width: 992px) {
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-nav > .nav__item > .nav__item-link {
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-nav > .nav__item > .nav__item-link:hover {
color: var(--m-teal);
}
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-nav > .nav__item > .nav__item-link.active,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-nav > .nav__item.active > .nav__item-link {
color: var(--m-teal) !important;
}
}
/* ============================================================
Mobile navbar fixes (<992px)
- Logo y hamburger: corrige doble-cuenta del padding que los
descentraba ~14px abajo.
- Hamburger color: por defecto oscuro; blanco solo sobre hero.
- Menú abierto: texto ink legible (defensa en profundidad).
============================================================ */
@media (max-width: 991.98px) {
/* --- Navbar mobile: altura 64px (más compacto), centrado por flexbox --- */
body.rd .navbar.sticky-navbar,
body.rd .navbar.sticky-navbar.is-sticky,
body.rd .navbar.sticky-navbar.is-scrolled {
height: 64px !important;
min-height: 64px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
}
body.rd .navbar.sticky-navbar > .container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 100% !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* --- Logo más pequeño en mobile (era ~32px, ahora ~26px) --- */
body.rd .navbar.sticky-navbar .navbar-brand {
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
}
body.rd .navbar.sticky-navbar .navbar-brand img,
body.rd .navbar.sticky-navbar .navbar-brand .logo-dark {
max-height: 26px !important;
height: 26px !important;
width: auto !important;
display: block !important;
}
/* --- Hamburger: contenedor 44x44 centrado --- */
body.rd .navbar.sticky-navbar .navbar-toggler {
align-self: center !important;
margin: 0 !important;
line-height: 1 !important;
width: 44px !important;
height: 44px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
}
/* .menu-lines es el wrapper: centrado dentro del botón */
body.rd .navbar.sticky-navbar .navbar-toggler .menu-lines {
position: relative !important;
display: inline-block !important;
width: 24px !important;
height: 18px !important;
/* Las 3 líneas: ::before arriba, span medio, ::after abajo, separadas equidistantes */
}
/* Hamburger más grueso: 2.5px de alto (era 1px) */
body.rd .header .navbar .navbar-toggler .menu-lines::before,
body.rd .header .navbar .navbar-toggler .menu-lines::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
width: 24px !important;
height: 2.5px !important;
border-radius: 2px !important;
transition: transform .3s ease, top .3s ease, background-color .25s ease !important;
}
body.rd .header .navbar .navbar-toggler .menu-lines::before {
top: 0 !important;
}
body.rd .header .navbar .navbar-toggler .menu-lines::after {
top: auto !important;
bottom: 0 !important;
}
body.rd .header .navbar .navbar-toggler .menu-lines span {
position: absolute !important;
top: 50% !important;
left: 0 !important;
transform: translateY(-50%) !important;
width: 24px !important;
height: 2.5px !important;
border-radius: 2px !important;
transition: transform .3s ease, opacity .25s ease, background-color .25s ease !important;
}
/* --- Color de las 3 líneas: por DEFAULT oscuro --- */
body.rd .header .navbar .navbar-toggler .menu-lines,
body.rd .header .navbar .navbar-toggler .menu-lines::before,
body.rd .header .navbar .navbar-toggler .menu-lines::after,
body.rd .header .navbar .navbar-toggler .menu-lines span {
background-color: var(--m-ink) !important;
}
/* Quitar el bg del wrapper .menu-lines (es solo contenedor) */
body.rd .header .navbar .navbar-toggler .menu-lines {
background-color: transparent !important;
}
/* Logo: por DEFAULT en colores originales (no invertido) */
body.rd .header .logo-dark {
filter: none !important;
}
/* --- Excepción: navbar transparente sobre hero oscuro en home,
antes de scrollear → invertir a blanco --- */
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines::before,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines::after,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines span {
background-color: var(--m-white) !important;
}
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .logo-dark {
filter: brightness(0) invert(1) !important;
}
/* --- Menú abierto: texto ink legible (panel blanco lateral) --- */
body.rd .navbar .navbar-collapse.menu-opened .navbar-nav > .nav__item > .nav__item-link {
color: var(--m-ink) !important;
text-shadow: none !important;
}
body.rd .navbar .navbar-collapse.menu-opened .navbar-nav > .nav__item > .nav__item-link.active,
body.rd .navbar .navbar-collapse.menu-opened .navbar-nav > .nav__item.active > .nav__item-link {
color: var(--m-teal) !important;
}
body.rd .navbar .navbar-collapse.menu-opened .navbar-nav > .nav__item > .nav__item-link:hover {
color: var(--m-blue) !important;
}
/* Tap target del botón cerrar (era 35x35) */
body.rd .navbar .close-mobile-menu {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Ocultar el hamburger cuando el menú está abierto, sólo se ve la X */
body.rd .navbar .navbar-collapse.menu-opened ~ .navbar-toggler,
body.rd .navbar.menu-is-open .navbar-toggler {
visibility: hidden;
}
}
/* Reset explícito para links DENTRO del dropdown: oscuros sobre fondo blanco */
body.rd .dropdown-menu .nav__item-link,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .dropdown-menu .nav__item-link {
color: var(--m-ink) !important;
text-shadow: none !important;
}
body.rd .dropdown-menu .nav__item-link:hover {
color: var(--m-blue) !important;
background: rgba(1, 147, 222, 0.06);
}
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines,
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-toggler .menu-lines span {
background-color: var(--m-white);
}
/* Logo SVG dark se invierte sobre el hero */
body.rd.home-rd .navbar.sticky-navbar:not(.is-scrolled) .navbar-brand .logo-dark {
filter: brightness(0) invert(1);
transition: filter .25s ease;
}
body.rd.home-rd .navbar.sticky-navbar.is-scrolled .navbar-brand .logo-dark {
filter: none;
}
/* Cuando se scrollea, el navbar se vuelve sticky/fixed con fondo crema editorial.
Pisa al `.is-sticky` blanco !important del template original. */
body.rd .navbar.sticky-navbar.is-scrolled {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 1040;
background: rgba(250, 248, 244, 0.96) !important;
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgba(11,23,51,.06) !important;
height: auto !important;
}
/* .is-scrolled.is-sticky eliminado — idéntico al bloque .is-scrolled de arriba */
/* En páginas NO-home, el navbar es siempre opaco editorial desde el inicio */
body.rd:not(.home-rd) .navbar.sticky-navbar {
background: rgba(250, 248, 244, 0.95);
border-bottom: 1px solid rgba(11,23,51,.06);
}
/* =========================================================
CTA NAVBAR "Conversemos" + btn-rd--primary
Animación unificada: shimmer sweep idle + hover azul vivo
========================================================= */
/* --- Base compartida: fondo azul + shimmer pseudo --- */
body.rd .navbar .btn.btn__primary,
.rd .btn-rd--primary {
position: relative;
overflow: hidden;
}
/* Shimmer — línea diagonal brillante que barre el botón cada 3.2s */
body.rd .navbar .btn.btn__primary::before,
.rd .btn-rd--primary::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255,255,255,.22) 50%,
transparent 80%
);
transform: skewX(-20deg);
animation: btnShimmer 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes btnShimmer {
0% { left: -75%; opacity: 0; }
10% { opacity: 1; }
45% { left: 115%; opacity: 1; }
46%, 100% { left: 115%; opacity: 0; }
}
/* --- Navbar btn override (pisa estilos del template legacy) --- */
body.rd .navbar .btn.btn__primary {
background: var(--m-blue) !important;
border: none !important;
color: var(--m-white) !important;
border-radius: var(--radius-pill) !important;
padding: 11px 22px !important;
font-family: var(--f-sans) !important;
font-size: .9rem !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(1,147,222,.35);
transition:
background .25s ease,
box-shadow .3s var(--ease-out),
transform .3s var(--ease-out) !important;
}
body.rd .navbar .btn.btn__primary:hover,
body.rd .navbar .btn.btn__primary:focus-visible {
background: #0082c8 !important; /* azul 10% más oscuro — contraste claro */
box-shadow: 0 8px 24px rgba(1,147,222,.55) !important;
transform: translateY(-2px);
}
/* Flecha del navbar */
body.rd .navbar .btn.btn__primary i {
transition: transform .3s var(--ease-out);
}
body.rd .navbar .btn.btn__primary:hover i {
transform: translateX(4px);
}
/* --- btn-rd--primary: mismo sistema de shimmer, hover azul --- */
.rd .btn-rd--primary {
background: var(--m-ink);
color: var(--m-white);
box-shadow: 0 2px 10px rgba(11,23,51,.2);
transition: background .25s ease, box-shadow .3s var(--ease-out), transform .3s var(--ease-out), color .25s ease;
}
.rd .btn-rd--primary:hover,
.rd .btn-rd--primary:focus-visible {
background: var(--m-blue);
color: var(--m-white);
transform: translateY(-2px);
box-shadow: var(--shadow-color);
}
/* Reduced motion: sin shimmer, hover sólo con color */
@media (prefers-reduced-motion: reduce) {
body.rd .navbar .btn.btn__primary::before,
.rd .btn-rd--primary::before {
animation: none !important;
display: none !important;
}
}
/* =========================================================
HERO con VIDEO de fondo (100vh, split: texto izq + form der)
========================================================= */
.rd .hero-vd {
position: relative;
min-height: 100vh;
min-height: 100svh; /* small viewport unit: cuenta toolbars móviles */
background: var(--m-navy);
overflow: hidden;
display: flex;
align-items: center;
padding: 110px 0 60px;
color: var(--m-white);
}
/* Video de fondo full-bleed */
.rd .hero-vd__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.rd .hero-vd__video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%) scale(1.08);
opacity: 0;
transition: opacity 1.6s var(--ease-out);
will-change: transform, opacity;
}
.rd .hero-vd__video.is-loaded {
opacity: 1;
animation: kenBurns 30s ease-in-out infinite alternate;
}
@keyframes kenBurns {
0% { transform: translate(-50%, -50%) scale(1.08); }
100% { transform: translate(-52%, -48%) scale(1.18); }
}
/* Overlay oscuro + gradient editorial */
.rd .hero-vd__overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(135deg, rgba(11, 23, 51, 0.92) 0%, rgba(11, 23, 51, 0.7) 50%, rgba(20, 36, 71, 0.55) 100%),
radial-gradient(circle at 30% 50%, rgba(1, 147, 222, 0.15), transparent 60%);
pointer-events: none;
}
.rd .hero-vd__overlay::after {
/* Vignette sutil + textura de "noise" para evitar banding */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(11, 23, 51, 0.35) 100%);
pointer-events: none;
}
/* Contenedor del contenido */
.rd .hero-vd__inner {
position: relative;
z-index: 2;
width: 100%;
}
.rd .hero-vd__grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 70px;
align-items: center;
}
/* LADO IZQUIERDO: texto */
.rd .hero-vd__copy { color: var(--m-white); }
/* Eyebrow del hero: entrada animada + shimmer continuo (3 reglas consolidadas en 1) */
.rd .hero-vd__copy .eyebrow {
position: relative;
overflow: hidden;
background-image: linear-gradient(90deg,
var(--m-blue) 0%,
var(--m-blue-light) 50%,
var(--m-blue) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation:
eyebrowFade 1.2s var(--ease-out) .1s both,
eyebrowShimmer 5s linear 1.4s infinite;
}
.rd .hero-vd__copy .eyebrow::before {
background: var(--m-teal);
animation: eyebrowLineGrow 1s var(--ease-out) .2s both;
transform-origin: left center;
}
@keyframes eyebrowLineGrow {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
@keyframes eyebrowFade {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes eyebrowShimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
.rd .hero-vd__copy .eyebrow,
.rd .hero-vd__copy .eyebrow::before {
animation: none !important;
}
}
.rd .hero-vd__title {
font-family: var(--f-serif);
font-weight: 500;
font-size: clamp(2.4rem, 1.4rem + 4.2vw, 5.6rem);
line-height: 1.05;
letter-spacing: -.035em;
margin: 22px 0 24px;
color: var(--m-white);
}
.rd .hero-vd__title-rotator {
display: inline-block;
position: relative;
font-style: italic;
vertical-align: baseline;
}
.rd .hero-vd__title-rotator-slot {
display: inline-block;
position: relative;
vertical-align: baseline;
min-width: 5ch;
/* Sin overflow: usamos clip-path en la animación para no cortar descenders/tildes */
}
.rd .hero-vd__title-rotator-current {
display: inline-block;
vertical-align: baseline;
animation: rotIn .55s var(--ease-out) both;
/* Gradient aplicado al hijo (que es el que renderiza texto real) */
background: linear-gradient(105deg, var(--m-blue-light) 0%, var(--m-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /* fallback no-webkit */
white-space: nowrap;
/* Padding inferior extiende el background-box bajo la baseline para que
los descenders ('g' en agenda, 'p' en práctica) tengan área de pintura.
Sin esto, background-clip: text no pinta lo que cae fuera del line-box. */
padding-bottom: 0.18em;
}
/* El elemento saliente se posiciona absoluto para no causar reflow ni empujar el form de la derecha */
.rd .hero-vd__title-rotator-current.is-leaving {
position: absolute;
left: 0;
top: 0;
animation: rotOut .55s var(--ease-out) both;
pointer-events: none;
}
@keyframes rotIn {
0% { opacity: 0; transform: translateY(40%); filter: blur(4px); }
60% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rotOut {
0% { opacity: 1; transform: translateY(0); filter: blur(0); }
100% { opacity: 0; transform: translateY(-30%); filter: blur(4px); }
}
.rd .hero-vd__sub {
font-family: var(--f-sans);
font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
max-width: 560px;
margin-bottom: 26px;
}
.rd .hero-vd__sub strong { color: var(--m-white); font-weight: 700; }
.rd .hero-vd__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin-top: 30px;
font-family: var(--f-sans);
}
.rd .hero-vd__trust-stars {
color: var(--m-amber);
font-size: 1rem;
letter-spacing: 3px;
text-shadow:
0 0 8px rgba(245, 182, 66, 0.55),
0 0 16px rgba(245, 182, 66, 0.35),
0 0 24px rgba(245, 182, 66, 0.18);
animation: starGlow 2.4s ease-in-out infinite alternate;
}
@keyframes starGlow {
0% {
text-shadow:
0 0 6px rgba(245, 182, 66, 0.45),
0 0 12px rgba(245, 182, 66, 0.25),
0 0 18px rgba(245, 182, 66, 0.12);
}
100% {
text-shadow:
0 0 10px rgba(245, 182, 66, 0.7),
0 0 22px rgba(245, 182, 66, 0.45),
0 0 34px rgba(245, 182, 66, 0.25);
}
}
@media (prefers-reduced-motion: reduce) {
.rd .hero-vd__trust-stars { animation: none; }
}
.rd .hero-vd__trust-text {
color: rgba(255,255,255,0.78);
font-size: .92rem;
}
.rd .hero-vd__trust-text strong {
color: var(--m-white);
font-weight: 700;
}
/* Stats inline (badges del hero) */
.rd .hero-vd__stats {
display: flex;
gap: 30px;
margin-top: 38px;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,0.15);
flex-wrap: wrap;
}
.rd .hero-vd__stat-num {
font-family: var(--f-serif);
font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
font-weight: 500;
letter-spacing: -.03em;
line-height: 1;
color: var(--m-white);
display: flex;
align-items: baseline;
gap: 4px;
}
.rd .hero-vd__stat-num small {
font-size: .5em;
color: var(--m-teal);
font-weight: 600;
}
.rd .hero-vd__stat-label {
font-size: .8rem;
color: rgba(255,255,255,0.7);
letter-spacing: .02em;
margin-top: 6px;
}
/* Scroll indicator */
.rd .hero-vd__scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--f-sans);
font-size: .7rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
pointer-events: none;
}
.rd .hero-vd__scroll-track {
width: 1px;
height: 50px;
background: rgba(255,255,255,0.2);
position: relative;
overflow: hidden;
}
.rd .hero-vd__scroll-track::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, transparent, var(--m-blue));
animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { transform: translateY(-100%); }
50% { transform: translateY(100%); }
}
/* LADO DERECHO: formulario en glass card */
.rd .hero-vd__form-wrap {
position: relative;
background: rgba(255, 255, 255, 0.97);
border-radius: var(--radius-lg);
padding: 36px 34px 32px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.1);
color: var(--m-ink);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateY(20px);
opacity: 0;
transition: opacity .9s var(--ease-out) .3s, transform .9s var(--ease-out) .3s;
}
.rd .hero-vd__form-wrap.is-visible { opacity: 1; transform: none; }
.rd .hero-vd__form-eyebrow {
display: inline-block;
font-family: var(--f-sans);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-coral);
margin-bottom: 10px;
}
.rd .hero-vd__form-title {
font-family: var(--f-serif);
font-size: 1.55rem;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--m-ink);
margin-bottom: 6px;
}
.rd .hero-vd__form-sub {
font-size: .88rem;
color: var(--m-ink-muted);
margin-bottom: 22px;
}
.rd .hero-vd__form .form-rd { gap: 14px; }
.rd .hero-vd__form .form-rd__row { gap: 14px; }
.rd .hero-vd__form .form-rd__input,
.rd .hero-vd__form .form-rd__textarea {
padding: 12px 14px;
font-size: .94rem;
}
.rd .hero-vd__form .form-rd__textarea { min-height: 90px; }
.rd .hero-vd__form .form-rd__label { font-size: .76rem; }
.rd .hero-vd__form .form-rd__radio { font-size: .82rem; padding: 8px 14px; }
.rd .hero-vd__form .btn-rd--primary { padding: 14px 22px; font-size: .92rem; }
.rd .hero-vd__form .form-rd__submit-row { margin-top: 4px; }
/* Trust microcopy debajo del form */
.rd .hero-vd__form-foot {
text-align: center;
margin-top: 14px;
font-size: .78rem;
color: var(--m-ink-muted);
}
.rd .hero-vd__form-foot .sep { margin: 0 8px; color: var(--m-line); }
/* Responsive */
@media (max-width: 1100px) {
.rd .hero-vd__grid { gap: 50px; }
}
@media (max-width: 900px) {
.rd .hero-vd { min-height: auto; padding: 120px 0 60px; }
.rd .hero-vd__grid { grid-template-columns: 1fr; gap: 40px; }
.rd .hero-vd__scroll { display: none; }
.rd .hero-vd__form-wrap { padding: 28px 24px 26px; }
.rd .hero-vd__stats { gap: 22px; }
}
@media (max-width: 600px) {
.rd .hero-vd { padding: 100px 0 50px; }
.rd .hero-vd__title { min-height: 0; margin-bottom: 18px; }
.rd .hero-vd__stats { padding-top: 20px; margin-top: 26px; }
.rd .hero-vd__stat-num { font-size: 1.6rem; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.rd .hero-vd__video.is-loaded { animation: none; }
.rd .hero-vd__scroll-track::after { animation: none; }
.rd .hero-vd__title-rotator-current { animation: none; opacity: 1; transform: none; }
.rd .hero-vd__title-rotator-current.is-leaving { animation: none; opacity: 0; }
}
/* .hero-rd eliminado — clase legacy no usada en ningún HTML del proyecto */
/* =========================================================
Logo marquee (clientes) — fondo oscuro, logos blancos al 100%
========================================================= */
.rd .marquee {
padding: 30px 0 40px;
background: var(--m-navy);
border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
overflow: hidden;
position: relative;
}
/* Heading editorial centrado arriba del marquee */
.rd .marquee__heading {
text-align: center;
margin-bottom: 30px;
font-family: var(--f-sans);
font-size: .8rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.rd .marquee__heading::before,
.rd .marquee__heading::after {
content: "";
height: 1px;
width: 40px;
background: rgba(255, 255, 255, 0.18);
display: inline-block;
}
.rd .marquee__heading strong {
color: var(--m-teal);
font-weight: 600;
}
/* Fade laterales para indicar continuidad del scroll */
.rd .marquee::before,
.rd .marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.rd .marquee::before {
left: 0;
background: linear-gradient(90deg, var(--m-navy), transparent);
}
.rd .marquee::after {
right: 0;
background: linear-gradient(-90deg, var(--m-navy), transparent);
}
.rd .marquee-track {
display: flex;
gap: 70px;
width: max-content;
animation: marquee 40s linear infinite;
align-items: center;
}
.rd .marquee:hover .marquee-track { animation-play-state: paused; }
.rd .marquee-item {
flex: 0 0 auto;
opacity: 0.95;
/* Los PNG ya son blancos sobre transparente. Sin filter para preservar nitidez. */
transition: opacity .3s ease, transform .3s ease;
height: 56px;
display: flex;
align-items: center;
}
.rd .marquee-item:hover {
opacity: 1;
transform: scale(1.05);
}
.rd .marquee-item img {
height: 100%;
width: auto;
max-height: 56px;
display: block;
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.rd .marquee-track { animation: none; }
}
/* =========================================================
Métricas
========================================================= */
.rd .stats {
background: var(--m-ink);
color: var(--m-white);
padding: var(--space-7) 0;
}
.rd .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.rd .stat {
border-left: 1px solid rgba(255,255,255,.15);
padding: 12px 24px;
}
.rd .stat__num {
font-family: var(--f-serif);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -.04em;
color: var(--m-white);
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
}
.rd .stat__num small {
font-size: .5em;
color: var(--m-teal);
font-weight: 600;
}
.rd .stat__label {
margin-top: 14px;
font-size: .92rem;
color: rgba(255,255,255,.6);
letter-spacing: .02em;
}
@media (max-width: 860px) {
.rd .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}
/* =========================================================
Section heading (editorial)
========================================================= */
.rd .sh {
margin-bottom: 60px;
max-width: 760px;
}
.rd .sh--center { margin-left: auto; margin-right: auto; text-align: center; }
.rd .sh__title {
font-size: var(--fs-3xl);
line-height: 1;
letter-spacing: -.03em;
margin: 18px 0 18px;
font-weight: 500;
}
.rd .sh__title em {
font-style: italic;
color: var(--m-blue);
}
.rd .sh__sub {
font-size: var(--fs-lg);
color: var(--m-ink-muted);
line-height: 1.5;
}
/* =========================================================
Services grid (asimétrico)
========================================================= */
.rd .svc-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
grid-auto-flow: dense; /* rellena huecos automáticamente */
}
.rd .svc-card {
background: var(--m-white);
border-radius: var(--radius);
padding: 36px 30px;
position: relative;
overflow: hidden;
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
border: 1px solid var(--m-line);
display: flex;
flex-direction: column;
min-height: 280px;
cursor: pointer;
text-decoration: none !important;
color: inherit !important;
}
.rd .svc-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.rd .svc-card--lg { grid-column: span 6; min-height: 340px; }
.rd .svc-card--md { grid-column: span 4; }
.rd .svc-card--sm { grid-column: span 3; }
.rd .svc-card--feat {
grid-column: span 8;
background: linear-gradient(135deg, var(--m-navy) 0%, var(--m-navy-2) 100%);
color: var(--m-white) !important;
border: none;
min-height: 340px;
}
.rd .svc-card--feat .svc-card__title { color: var(--m-white); }
.rd .svc-card--feat .svc-card__desc { color: rgba(255,255,255,.75); }
.rd .svc-card--feat .svc-card__num { color: rgba(255,255,255,.3); }
.rd .svc-card--feat::after {
content: "";
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(1,147,222,.4), transparent 70%);
right: -150px; bottom: -150px;
filter: blur(10px);
}
/* Card 08 Marketing 360 — gradient azul-teal */
.rd .svc-card--gradient {
background: linear-gradient(135deg, var(--m-blue) 0%, var(--m-blue-light) 100%) !important;
color: var(--m-white) !important;
border: none !important;
}
.rd .svc-card--gradient .svc-card__title { color: var(--m-white); }
.rd .svc-card--gradient .svc-card__desc { color: rgba(255, 255, 255, 0.85); }
.rd .svc-card--gradient .svc-card__num { color: rgba(255, 255, 255, 0.55); }
.rd .svc-card--gradient .svc-card__arrow { color: var(--m-white); }
/* Card CTA "Ver todos" — estilo distintivo en navy */
.rd .svc-card--cta {
background: var(--m-ink) !important;
color: var(--m-white) !important;
border: none !important;
}
.rd .svc-card--cta .svc-card__title { color: var(--m-white); }
.rd .svc-card--cta .svc-card__desc { color: rgba(255, 255, 255, 0.75); }
.rd .svc-card--cta .svc-card__num {
color: var(--m-teal);
font-size: 2.4rem;
font-weight: 400;
}
.rd .svc-card--cta .svc-card__arrow { color: var(--m-teal); }
.rd .svc-card__num {
font-family: var(--f-serif);
font-size: 1.1rem;
font-weight: 400;
color: var(--m-ink-muted);
margin-bottom: auto;
letter-spacing: -.02em;
}
.rd .svc-card__title {
font-family: var(--f-serif);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -.025em;
margin: 16px 0 8px;
line-height: 1.1;
}
.rd .svc-card--lg .svc-card__title,
.rd .svc-card--feat .svc-card__title { font-size: 1.9rem; }
.rd .svc-card__desc {
font-size: .95rem;
color: var(--m-ink-muted);
line-height: 1.55;
margin-bottom: 18px;
}
.rd .svc-card__arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .85rem;
font-weight: 600;
color: var(--m-blue);
font-family: var(--f-sans);
margin-top: auto;
transition: gap .3s ease;
}
.rd .svc-card--feat .svc-card__arrow { color: var(--m-teal); }
.rd .svc-card:hover .svc-card__arrow { gap: 12px; }
@media (max-width: 860px) {
.rd .svc-grid { grid-template-columns: 1fr; }
.rd .svc-card,
.rd .svc-card--lg,
.rd .svc-card--md,
.rd .svc-card--sm,
.rd .svc-card--feat { grid-column: span 1; min-height: auto; }
}
/* =========================================================
Sobre Medicca — split foto + texto
========================================================= */
.rd .about-split {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .about-split__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.rd .about-split__media {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
isolation: isolate;
}
/* Slides apilados, el activo en opacity:1 */
.rd .about-split__slides {
position: absolute;
inset: 0;
z-index: 0;
}
.rd .about-split__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .8s var(--ease-out), transform 6s linear;
transform: scale(1);
pointer-events: none;
}
.rd .about-split__slide.is-active {
opacity: 1;
pointer-events: auto;
/* Ken Burns sutil mientras está activo */
transform: scale(1.08);
}
.rd .about-split__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Overlay sutil que aparece al hover del contenedor */
.rd .about-split__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(11, 23, 51, 0.55) 100%);
z-index: 1;
pointer-events: none;
}
/* Badge con info del slide activo */
.rd .about-split__media-badge {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
background: rgba(11, 23, 51, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 18px 22px;
border-radius: var(--radius);
color: var(--m-white);
z-index: 2;
transition: transform .5s var(--ease-out), opacity .4s ease;
}
.rd .about-split__media-badge strong {
display: block;
font-family: var(--f-serif);
font-size: 1.1rem;
margin-bottom: 4px;
transition: opacity .35s ease, transform .35s ease;
}
.rd .about-split__media-badge span {
font-size: .85rem;
color: rgba(255, 255, 255, 0.78);
transition: opacity .35s ease, transform .35s ease;
}
.rd .about-split__media-badge.is-changing strong,
.rd .about-split__media-badge.is-changing span {
opacity: 0;
transform: translateY(6px);
}
/* Indicadores numerados (vertical, lado derecho de la foto) */
.rd .about-split__dots {
position: absolute;
top: 24px;
right: 24px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 4px;
}
.rd .about-split__dot {
appearance: none;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius-pill);
color: rgba(255, 255, 255, 0.55);
font-family: var(--f-sans);
font-size: .82rem;
font-weight: 600;
letter-spacing: .02em;
transition:
color .25s ease,
background .25s ease,
transform .35s var(--ease-spring);
}
.rd .about-split__dot::after {
content: "";
width: 18px;
height: 1.5px;
background: currentColor;
transition: width .35s var(--ease-out), background .25s ease;
border-radius: 1px;
}
/* Hover */
.rd .about-split__dot:hover {
color: var(--m-white);
background: rgba(255, 255, 255, 0.08);
transform: translateX(-4px);
}
.rd .about-split__dot:hover::after {
width: 28px;
background: var(--m-teal);
}
/* Active */
.rd .about-split__dot.is-active {
color: var(--m-white);
background: rgba(30, 186, 174, 0.18);
}
.rd .about-split__dot.is-active::after {
width: 34px;
background: var(--m-teal);
box-shadow: 0 0 8px rgba(30, 186, 174, 0.5);
}
/* Focus visible (accesibilidad) */
.rd .about-split__dot:focus-visible {
outline: 2px solid var(--m-teal);
outline-offset: 3px;
}
/* Progress bar sutil debajo del badge que muestra el tiempo del slide */
.rd .about-split__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
z-index: 4;
background: rgba(255, 255, 255, 0.08);
}
.rd .about-split__progress-bar {
height: 100%;
width: 0%;
background: var(--m-teal);
transition: width .12s linear;
}
.rd .about-split__media.is-paused .about-split__progress-bar { background: rgba(255,255,255,0.3); }
@media (prefers-reduced-motion: reduce) {
.rd .about-split__slide.is-active { transform: none; }
.rd .about-split__slide { transition: opacity .3s ease; }
}
.rd .about-split__copy h2 {
font-size: var(--fs-3xl);
line-height: 1.05;
letter-spacing: -.03em;
margin: 18px 0 22px;
font-weight: 500;
}
.rd .about-split__copy h2 em {
font-style: italic;
color: var(--m-blue);
}
.rd .about-split__copy > p {
font-size: var(--fs-lg);
color: var(--m-ink-soft);
line-height: 1.55;
margin-bottom: 22px;
}
.rd .about-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 30px;
}
.rd .about-point {
border-left: 2px solid var(--m-teal);
padding-left: 14px;
}
.rd .about-point strong {
display: block;
font-family: var(--f-serif);
font-size: 1.4rem;
font-weight: 600;
color: var(--m-ink);
margin-bottom: 4px;
letter-spacing: -.02em;
}
.rd .about-point span {
font-size: .9rem;
color: var(--m-ink-muted);
}
@media (max-width: 900px) {
.rd .about-split__grid { grid-template-columns: 1fr; gap: 40px; }
.rd .about-split__media {
max-width: 480px;
margin: 0 auto;
width: 100%;
aspect-ratio: 4 / 5;
}
.rd .about-split__dots { top: 16px; right: 16px; }
.rd .about-split__dot { font-size: .78rem; padding: 6px 10px; }
.rd .about-split__media-badge { left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; }
}
/* =========================================================
Galería "Nuestro trabajo" — masonry-like grid
========================================================= */
.rd .work-gallery {
padding: var(--space-7) 0;
background: var(--m-paper-2);
}
.rd .gallery-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
gap: 16px;
grid-auto-flow: dense;
}
.rd .gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--m-line);
cursor: pointer;
}
.rd .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease-out);
}
.rd .gallery-item:hover img { transform: scale(1.06); }
.rd .gallery-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(11, 23, 51, 0.65) 100%);
opacity: 0;
transition: opacity .3s ease;
}
.rd .gallery-item:hover::after { opacity: 1; }
.rd .gallery-item__label {
position: absolute;
bottom: 16px;
left: 18px;
right: 18px;
z-index: 1;
color: var(--m-white);
font-family: var(--f-sans);
font-weight: 600;
font-size: .92rem;
opacity: 0;
transform: translateY(8px);
transition: opacity .3s ease, transform .3s ease;
}
.rd .gallery-item:hover .gallery-item__label {
opacity: 1;
transform: translateY(0);
}
/* Tamaños — diseñados para grid 6-col que cierre simétricamente con 7 items */
.rd .gallery-item { grid-column: span 2; grid-row: span 1; } /* default 2×1 */
.rd .gallery-item--tall { grid-column: span 2; grid-row: span 2; }
.rd .gallery-item--wide { grid-column: span 3; grid-row: span 1; }
.rd .gallery-item--big { grid-column: span 4; grid-row: span 2; }
/* Distribución resultante con 7 items:
Fila 1-2: [big 4×2] [tall 2×2] = 6 ✓
Fila 3: [item 2×1][item 2×1][item 2×1] = 6 ✓
Fila 4: [wide 3×1][wide 3×1] = 6 ✓
Total: filas pares, sin huecos */
@media (max-width: 900px) {
.rd .gallery-grid { grid-template-columns: repeat(2, 1fr); }
.rd .gallery-item,
.rd .gallery-item--wide,
.rd .gallery-item--big,
.rd .gallery-item--tall { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 500px) {
.rd .gallery-grid { grid-template-columns: 1fr; }
}
/* =========================================================
Service card thumbnail (variante con foto)
========================================================= */
.rd .svc-card__thumb {
margin: -36px -30px 22px;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--m-line);
}
.rd .svc-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease-out);
}
.rd .svc-card:hover .svc-card__thumb img {
transform: scale(1.06);
}
/* =========================================================
Proceso (Cómo trabajamos)
========================================================= */
.rd .process {
background: var(--m-paper-2);
padding: var(--space-7) 0;
}
.rd .process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
counter-reset: step;
margin-top: 50px;
}
.rd .process-step {
position: relative;
padding: 36px 18px 24px;
margin: 0 -18px;
border-radius: var(--radius);
cursor: default;
transition:
transform .5s var(--ease-out),
background-color .35s ease,
box-shadow .5s var(--ease-out);
}
/* Línea superior (era border-top, ahora pseudo para animarla) */
.rd .process-step::before {
content: "";
position: absolute;
top: 0;
left: 18px;
right: 18px;
height: 1.5px;
background: var(--m-ink);
transform-origin: left center;
transition: transform .55s var(--ease-out), background .35s ease;
}
/* Número con counter (generado vía pseudo-elemento ::after) */
.rd .process-step::after {
counter-increment: step;
content: "0" counter(step);
position: absolute;
top: -18px;
left: 18px;
background: var(--m-paper-2);
padding: 0 12px 0 0;
font-family: var(--f-serif);
font-size: 2rem;
font-weight: 500;
letter-spacing: -.04em;
color: var(--m-blue);
line-height: 1;
transition:
color .35s ease,
transform .5s var(--ease-spring),
text-shadow .35s ease;
transform-origin: left center;
}
.rd .process-step h3 {
font-family: var(--f-serif);
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.15;
transition: color .3s ease, transform .45s var(--ease-out);
}
.rd .process-step p {
font-size: .92rem;
color: var(--m-ink-muted);
line-height: 1.55;
transition: color .3s ease;
}
/* ========== Hover: efecto rico (solo en desktop con hover real) ========== */
@media (hover: hover) and (pointer: fine) {
/* Hover individual: lift + número crece y se vuelve teal con glow */
.rd .process-step:hover {
transform: translateY(-6px);
background: var(--m-white);
box-shadow: 0 18px 40px rgba(11, 23, 51, 0.08);
}
.rd .process-step:hover::before {
transform: scaleX(1.08);
background: var(--m-teal);
}
.rd .process-step:hover::after {
color: var(--m-teal);
transform: scale(1.18) translateY(-2px);
text-shadow: 0 8px 24px rgba(30, 186, 174, 0.35);
background: var(--m-white);
}
.rd .process-step:hover h3 {
color: var(--m-navy);
transform: translateX(4px);
}
.rd .process-step:hover p {
color: var(--m-ink);
}
/* Foco selectivo: al hacer hover sobre uno, los demás se atenúan */
.rd .process-grid:hover .process-step:not(:hover) {
opacity: 0.55;
}
.rd .process-grid:hover .process-step:not(:hover) h3 {
color: var(--m-ink-muted);
}
/* Aplicar transición a opacity para que el dim/undim sea suave */
.rd .process-step {
transition:
transform .5s var(--ease-out),
background-color .35s ease,
box-shadow .5s var(--ease-out),
opacity .4s ease;
}
}
/* Mobile: efecto suave en :active (touch) */
@media (max-width: 860px), (hover: none) {
.rd .process-step:active::after {
color: var(--m-teal);
transform: scale(1.1);
}
}
@media (max-width: 860px) {
.rd .process-grid { grid-template-columns: 1fr; gap: 40px; }
.rd .process-step { margin: 0; padding: 36px 0 0; }
.rd .process-step::before { left: 0; right: 0; }
.rd .process-step::after { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.rd .process-step,
.rd .process-step::before,
.rd .process-step::after,
.rd .process-step h3,
.rd .process-step p {
transition: none !important;
}
}
/* =========================================================
Testimonios destacados
========================================================= */
.rd .testi {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .testi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.rd .testi-card {
background: var(--m-white);
border-radius: var(--radius);
padding: 40px 36px;
border: 1px solid var(--m-line);
position: relative;
transition: transform .4s var(--ease-out);
}
.rd .testi-card:hover { transform: translateY(-4px); }
.rd .testi-card__quote {
font-family: var(--f-serif);
font-size: 1.2rem;
font-style: italic;
line-height: 1.45;
color: var(--m-ink);
margin-bottom: 28px;
position: relative;
}
.rd .testi-card__quote::before {
content: "“";
position: absolute;
top: -12px;
left: -4px;
font-family: var(--f-serif);
font-size: 5rem;
color: var(--m-blue);
opacity: .15;
line-height: 1;
pointer-events: none;
}
.rd .testi-card__author {
display: flex;
align-items: center;
gap: 14px;
}
.rd .testi-card__avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--m-blue), var(--m-blue-light));
display: flex;
align-items: center;
justify-content: center;
color: var(--m-white);
font-family: var(--f-serif);
font-weight: 600;
font-size: 1.1rem;
flex-shrink: 0;
}
.rd .testi-card__name {
font-weight: 700;
color: var(--m-ink);
font-size: .98rem;
}
.rd .testi-card__role {
font-size: .85rem;
color: var(--m-ink-muted);
margin-top: 2px;
}
@media (max-width: 860px) {
.rd .testi-grid { grid-template-columns: 1fr; }
}
/* =========================================================
FAQ acordeón
========================================================= */
.rd .faq {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .faq-list {
max-width: 900px;
margin: 0 auto;
border-top: 1px solid var(--m-line);
}
.rd .faq-item {
border-bottom: 1px solid var(--m-line);
}
.rd .faq-q {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 26px 0;
font-family: var(--f-serif);
font-size: 1.25rem;
font-weight: 500;
color: var(--m-ink);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
letter-spacing: -.015em;
transition: color .25s ease;
}
.rd .faq-q:hover { color: var(--m-blue); }
.rd .faq-q__icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
border: 1.5px solid var(--m-ink);
display: flex;
align-items: center;
justify-content: center;
transition: transform .35s var(--ease-spring), background .25s ease, border-color .25s ease;
position: relative;
}
.rd .faq-q__icon::before,
.rd .faq-q__icon::after {
content: "";
position: absolute;
background: var(--m-ink);
border-radius: 1px;
transition: opacity .3s, background .25s;
}
.rd .faq-q__icon::before { width: 14px; height: 1.5px; }
.rd .faq-q__icon::after { width: 1.5px; height: 14px; }
.rd .faq-item.is-open .faq-q__icon {
background: var(--m-ink);
border-color: var(--m-ink);
transform: rotate(45deg);
}
.rd .faq-item.is-open .faq-q__icon::before,
.rd .faq-item.is-open .faq-q__icon::after { background: var(--m-white); }
.rd .faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .4s var(--ease-out);
}
.rd .faq-a > .faq-a__inner {
overflow: hidden;
min-height: 0;
}
.rd .faq-a__inner {
padding: 0 60px 0 0;
color: var(--m-ink-muted);
font-size: 1rem;
line-height: 1.6;
}
.rd .faq-item.is-open .faq-a {
grid-template-rows: 1fr;
}
.rd .faq-item.is-open .faq-a__inner {
padding-bottom: 30px;
transition: padding-bottom .4s var(--ease-out);
}
/* =========================================================
CTA final
========================================================= */
.rd .cta-final {
background: var(--m-ink);
color: var(--m-white);
padding: var(--space-7) 0;
position: relative;
overflow: hidden;
}
.rd .cta-final__bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.rd .cta-final__bg::before {
content: "";
position: absolute;
top: -200px; right: -100px;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(1,147,222,.4), transparent 70%);
filter: blur(40px);
animation: pulseGlow 8s ease-in-out infinite;
}
.rd .cta-final__bg::after {
content: "";
position: absolute;
bottom: -200px; left: -100px;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(30,186,174,.3), transparent 70%);
filter: blur(40px);
animation: pulseGlow 10s ease-in-out infinite reverse;
}
@keyframes pulseGlow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .6; transform: scale(1.15); }
}
.rd .cta-final__inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.rd .cta-final__title {
font-size: var(--fs-3xl);
line-height: 1;
letter-spacing: -.035em;
margin: 14px 0 24px;
color: var(--m-white);
}
.rd .cta-final__title em {
font-style: italic;
background: linear-gradient(105deg, var(--m-blue-light), var(--m-blue));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rd .cta-final__sub {
color: rgba(255,255,255,.7);
font-size: var(--fs-lg);
margin-bottom: 36px;
}
.rd .cta-final .eyebrow { color: var(--m-teal); }
/* =========================================================
Footer (editorial) — densidad y jerarquía optimizadas
========================================================= */
body.rd footer.footer {
background: var(--m-navy) !important;
color: rgba(255, 255, 255, 0.72);
padding-top: 60px;
}
/* Wrappers internos transparentes — el bg navy del outer manda */
body.rd footer.footer .footer-primary,
body.rd footer.footer .footer-widget-contact,
body.rd footer.footer .footer-widget-about,
body.rd footer.footer .footer-widget-nav {
background: transparent !important;
}
body.rd footer.footer .footer-primary {
padding-top: 0 !important;
padding-bottom: 24px;
}
body.rd footer.footer .footer-primary .row {
align-items: flex-start;
/* Spacing vertical entre columnas cuando se apilan en mobile/tablet */
row-gap: 36px;
}
/* En mobile: footer más compacto + jerarquía visual clara */
@media (max-width: 767.98px) {
body.rd footer.footer {
padding-top: 36px;
}
body.rd footer.footer .footer-primary {
padding-bottom: 18px;
}
body.rd footer.footer .footer-primary .row {
row-gap: 30px;
}
body.rd footer.footer .footer-widget-about,
body.rd footer.footer .footer-widget-nav,
body.rd footer.footer .footer-widget-contact,
body.rd footer.footer .ig-widget {
margin: 0 !important;
}
/* Logo más compacto en mobile (era 49px) */
body.rd footer.footer .footer-widget-about img.mb-20:not(.logo-adic) {
height: 36px !important;
width: auto !important;
margin-bottom: 12px !important;
}
}
/* En tablet (grid 2x2): ajuste de padding */
@media (min-width: 768px) and (max-width: 991.98px) {
body.rd footer.footer {
padding-top: 48px;
}
/* row-gap: 36px es el valor base — no se repite */
}
body.rd footer.footer .footer-widget-contact::after,
body.rd footer.footer .footer-widget-contact::before {
display: none;
}
/* Logo Medicca: invertir a blanco sobre navy */
body.rd footer.footer .footer-widget-about img.mb-20:not(.logo-adic) {
filter: brightness(0) invert(1);
}
/* "Certificadora:" label como eyebrow encima del sello WMA */
body.rd footer.footer .footer-widget-about p.color-gray.mb-5 {
font-family: var(--f-sans) !important;
font-size: .68rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.45) !important;
margin: 18px 0 8px !important;
}
/* Sello WMA: mini-card con borde sutil para destacarlo del fondo */
body.rd footer.footer .footer-widget-about a:has(img.logo-adic) {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
margin-top: 0;
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
body.rd footer.footer .footer-widget-about a:has(img.logo-adic):hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
}
body.rd footer.footer img.logo-adic {
display: block;
height: 36px;
width: auto;
}
/* Headings de las columnas: contraste WCAG AA + mejor escaneo visual */
body.rd footer.footer .footer-widget__title,
body.rd footer.footer .footer-widget__title.color-heading,
body.rd footer.footer h1.color-heading,
body.rd footer.footer h2.color-heading,
body.rd footer.footer h3.color-heading,
body.rd footer.footer h4.color-heading,
body.rd footer.footer h5.color-heading,
body.rd footer.footer h6.color-heading {
font-family: var(--f-sans);
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255, 255, 255, 0.78) !important; /* sube de .5 a .78 (AA) */
margin-bottom: 14px; /* baja de 22 a 14 */
}
/* Texto general del footer */
body.rd footer.footer .contact-list li,
body.rd footer.footer .contact-list a,
body.rd footer.footer p,
body.rd footer.footer .color-gray {
color: rgba(255, 255, 255, 0.78) !important;
font-family: var(--f-sans);
font-size: .95rem;
}
/* Nav: tap targets 44px reales (era 24px) */
body.rd footer.footer .footer-widget-nav ul {
margin: 0;
padding: 0;
}
body.rd footer.footer .footer-widget-nav ul li {
margin-bottom: 0;
list-style: none;
}
body.rd footer.footer .footer-widget-nav ul li a {
display: block;
min-height: 40px;
padding: 9px 0;
color: rgba(255, 255, 255, 0.82) !important;
font-family: var(--f-sans);
font-size: .95rem;
line-height: 1.3;
transition: color .2s ease, transform .2s ease, padding-left .2s ease;
}
body.rd footer.footer .footer-widget-nav ul li a:hover {
color: var(--m-teal) !important;
padding-left: 6px;
}
/* En mobile: tap targets aún más cómodos pero compactos */
@media (max-width: 767.98px) {
body.rd footer.footer .footer-widget-nav ul li a {
min-height: 44px;
padding: 11px 0;
font-size: 1rem;
}
}
/* Card de contacto con fondo sutil (para que se sienta como card real) */
body.rd footer.footer .footer-widget-contact {
padding: 18px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.rd footer.footer .footer-widget-contact .footer-widget__title {
margin-top: 0;
}
/* Tel + email del footer */
body.rd footer.footer .phone__number,
body.rd footer.footer .phone__number span,
body.rd footer.footer .cta-email,
body.rd footer.footer .cta-email span {
color: rgba(255, 255, 255, 0.92) !important;
}
body.rd footer.footer .phone__number:hover,
body.rd footer.footer .cta-email:hover {
color: var(--m-teal) !important;
}
body.rd footer.footer .phone__number i,
body.rd footer.footer .cta-email i {
color: var(--m-teal) !important;
}
body.rd footer.footer .contact-list {
padding-left: 0;
margin-bottom: 14px;
}
body.rd footer.footer .contact-list li {
margin-bottom: 6px;
}
/* Footer secondary: con safe-area para iPhones con notch */
body.rd footer.footer .footer-secondary {
background: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 24px;
padding: 18px 0;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
color: rgba(255, 255, 255, 0.5);
}
body.rd footer.footer .footer-secondary .fz-14 {
color: rgba(255, 255, 255, 0.5) !important;
}
/* Social icons */
body.rd footer.footer .social-icons li a {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
transition: background .25s, color .25s, transform .25s, border-color .25s;
}
body.rd footer.footer .social-icons li a:hover {
background: var(--m-teal) !important;
color: var(--m-navy) !important;
border-color: var(--m-teal) !important;
transform: translateY(-3px);
}
/* =========================================================
Instagram widget (footer)
========================================================= */
body.rd footer.footer .ig-widget {
padding: 0;
}
body.rd footer.footer .ig-widget__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
body.rd footer.footer .ig-widget__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
flex-shrink: 0;
}
body.rd footer.footer .ig-widget__avatar-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--m-navy);
display: flex;
align-items: center;
justify-content: center;
color: var(--m-white);
font-family: var(--f-sans);
font-weight: 700;
font-size: .75rem;
letter-spacing: -.02em;
}
body.rd footer.footer .ig-widget__handle {
display: flex;
flex-direction: column;
min-width: 0;
}
body.rd footer.footer .ig-widget__handle a {
font-family: var(--f-sans);
font-weight: 600;
font-size: .9rem;
color: var(--m-white) !important;
text-decoration: none;
line-height: 1.2;
margin-bottom: 2px;
transition: color .25s ease;
}
body.rd footer.footer .ig-widget__handle a:hover {
color: var(--m-teal) !important;
}
body.rd footer.footer .ig-widget__meta {
font-size: .72rem;
color: rgba(255, 255, 255, 0.5) !important;
font-family: var(--f-sans);
}
/* Grid de fotos 3×2 */
body.rd footer.footer .ig-widget__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 14px;
}
body.rd footer.footer .ig-widget__item {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
display: block;
}
body.rd footer.footer .ig-widget__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease-out), filter .3s ease;
}
body.rd footer.footer .ig-widget__item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(220, 39, 67, 0), rgba(188, 24, 136, 0.45));
opacity: 0;
transition: opacity .3s ease;
}
body.rd footer.footer .ig-widget__item:hover img {
transform: scale(1.08);
}
body.rd footer.footer .ig-widget__item:hover::after {
opacity: 1;
}
body.rd footer.footer .ig-widget__item-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.6);
color: var(--m-white);
font-size: 1.2rem;
opacity: 0;
transition: opacity .3s ease, transform .3s ease;
z-index: 2;
}
body.rd footer.footer .ig-widget__item:hover .ig-widget__item-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* CTA "Síguenos" */
body.rd footer.footer .ig-widget__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--f-sans);
font-weight: 600;
font-size: .82rem;
color: rgba(255, 255, 255, 0.78) !important;
text-decoration: none !important;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all .25s ease;
}
body.rd footer.footer .ig-widget__cta:hover {
background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
color: var(--m-white) !important;
border-color: transparent;
transform: translateY(-2px);
}
body.rd footer.footer .ig-widget__cta i {
font-size: 1rem;
}
@media (max-width: 991px) {
body.rd footer.footer .ig-widget { margin-top: 30px; }
}
/* =========================================================
Override del .page-title original (para páginas internas)
========================================================= */
body.rd .page-title.page-title-layout5,
body.rd .page-title {
background: var(--m-paper) !important;
background-image: none !important;
/* Navbar 100px ya está absolute encima — el title section empieza desde y=0.
Necesitamos compensar la altura del navbar (100px) y dejar ~20px de aire.
Pero como el navbar es position:absolute en home y position:relative en internas,
en internas el navbar SÍ empuja el contenido. Padding 50px cubre el aire visual. */
padding: 50px 0 30px !important;
position: relative;
overflow: hidden;
}
body.rd .page-title::before {
content: "";
position: absolute;
top: -300px; right: -300px;
width: 800px; height: 800px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(1,147,222,.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
body.rd .page-title .container { position: relative; z-index: 1; }
body.rd .page-title .pagetitle__heading,
body.rd .page-title h1,
body.rd .page-title h2,
body.rd .page-title h3 {
font-family: var(--f-serif) !important;
font-size: var(--fs-2xl) !important;
font-weight: 500 !important;
letter-spacing: -.035em !important;
color: var(--m-ink) !important;
line-height: 1.05 !important;
margin-bottom: 10px !important;
margin-top: 0 !important;
}
body.rd .page-title p {
font-family: var(--f-sans) !important;
font-size: var(--fs-base) !important;
color: var(--m-ink-muted) !important;
max-width: 640px;
margin: 0 auto !important;
}
body.rd .page-title .breadcrumb {
background: transparent !important;
margin-bottom: 8px !important;
margin-top: 0 !important;
padding: 0 !important;
font-family: var(--f-sans) !important;
font-size: .82rem !important;
}
body.rd .page-title .breadcrumb-item,
body.rd .page-title .breadcrumb-item a {
color: var(--m-ink-muted) !important;
}
body.rd .page-title .breadcrumb-item a:hover { color: var(--m-blue) !important; }
body.rd .page-title .breadcrumb-item.active { color: var(--m-ink) !important; }
/* Secciones internas: tipografía Fraunces + paleta */
body.rd .heading__title,
body.rd .heading h2,
body.rd .heading h3 {
font-family: var(--f-serif) !important;
font-weight: 500 !important;
letter-spacing: -.025em !important;
color: var(--m-ink) !important;
}
body.rd .heading__subtitle {
font-family: var(--f-sans) !important;
font-weight: 600 !important;
color: var(--m-blue) !important;
letter-spacing: .12em !important;
font-size: .78rem !important;
text-transform: uppercase !important;
}
body.rd .heading__desc,
body.rd .heading p {
font-family: var(--f-sans) !important;
color: var(--m-ink-muted) !important;
}
/* Botones internos (alineados con btn-rd) */
body.rd .btn:not(.navbar-toggler):not(.close-mobile-menu):not(#scrollTopBtn) {
font-family: var(--f-sans) !important;
letter-spacing: -.005em !important;
}
/* Botones de fondo color necesitan texto blanco explícito (el reset de body { color }
del rediseño hereda color oscuro que rompe la legibilidad sobre azul/coral/teal) */
body.rd .btn.btn__primary,
body.rd .btn__primary,
body.rd .btn.btn__secondary,
body.rd .btn.btn__primary:hover,
body.rd .btn__primary:hover,
body.rd .btn.btn__secondary:hover {
color: var(--m-white) !important;
}
/* CTA contacto cards: bordes editoriales */
body.rd .feature-item,
body.rd .info-box,
body.rd .service-item {
border-radius: var(--radius) !important;
}
/* Background gris original → papel */
body.rd .bg-gray,
body.rd section.bg-gray,
body.rd .bg-gray-light,
body.rd section[style*="background-color: #f"] {
background: var(--m-paper-2) !important;
}
/* contact-layout3 (sección "Un historial de éxito" en clientes.html y similares):
el legacy usa bg-overlay + heading-light pero el overlay queda mal contrastado.
Reemplazamos con navy sólido editorial + texto claro fuerte. */
body.rd .contact-layout3.bg-overlay,
body.rd .contact-layout3 {
background: var(--m-navy) !important;
position: relative;
padding: 70px 0 !important;
}
body.rd .contact-layout3 .bg-img,
body.rd .contact-layout3::before {
display: none !important;
}
body.rd .contact-layout3 .heading.heading-light .heading__title,
body.rd .contact-layout3 .heading.heading-light h1,
body.rd .contact-layout3 .heading.heading-light h2 {
color: var(--m-white) !important;
font-family: var(--f-serif) !important;
font-weight: 500 !important;
letter-spacing: -.03em !important;
font-size: var(--fs-2xl) !important;
line-height: 1.1 !important;
}
body.rd .contact-layout3 .heading.heading-light .heading__desc,
body.rd .contact-layout3 .heading.heading-light p {
color: rgba(255, 255, 255, 0.82) !important;
font-family: var(--f-sans) !important;
font-size: 1rem !important;
line-height: 1.55 !important;
}
/* Logos de clientes dentro de esta sección: blanco invertido y semitransparente */
body.rd .contact-layout3 .client img,
body.rd .contact-layout3 .clients-light img {
filter: brightness(0) invert(1);
opacity: 0.7;
transition: opacity .25s ease;
}
body.rd .contact-layout3 .client:hover img {
opacity: 1;
}
/* =========================================================
Visor de TikTok — videos en iframe oficial
Desktop: grid 4 columnas. Mobile: carrusel horizontal con scroll-snap.
========================================================= */
.rd .tiktok-showcase {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .tiktok-showcase__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.rd .tiktok-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 40px;
}
.rd .tiktok-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--m-navy);
/* TikTok player aspect ratio nativo es ~9:16 con UI extra → 9:16 + chrome */
aspect-ratio: 9 / 16;
box-shadow: var(--shadow);
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.rd .tiktok-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.rd .tiktok-card iframe {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
border: none;
display: block;
}
/* Skeleton mientras carga */
.rd .tiktok-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1a1a1a 0%, #25101f 50%, #1a1a1a 100%);
z-index: 0;
}
/* Mobile: carrusel scroll-snap horizontal */
@media (max-width: 900px) {
.rd .tiktok-grid {
grid-template-columns: none;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 24px;
gap: 16px;
/* Sangrado lateral para que se vea peek del siguiente */
margin: 40px -24px 0;
padding: 0 24px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.rd .tiktok-card {
flex: 0 0 calc(100vw - 88px); /* 88 = 24px padding + 24px peek + 40px del scrollbar/safe area */
max-width: 340px;
scroll-snap-align: center;
aspect-ratio: 9 / 16;
}
/* Indicador visual de scrollabilidad */
.rd .tiktok-grid::-webkit-scrollbar {
height: 4px;
}
.rd .tiktok-grid::-webkit-scrollbar-track {
background: rgba(11, 23, 51, 0.08);
border-radius: 2px;
}
.rd .tiktok-grid::-webkit-scrollbar-thumb {
background: var(--m-teal);
border-radius: 2px;
}
}
/* Pista visual: "Desliza para ver más" en mobile */
.rd .tiktok-hint {
display: none;
margin-top: 12px;
font-family: var(--f-sans);
font-size: .85rem;
color: var(--m-ink-muted);
text-align: center;
}
.rd .tiktok-hint::after {
content: " →";
color: var(--m-teal);
font-weight: 700;
display: inline-block;
animation: tiktokHintArrow 1.6s ease-in-out infinite;
}
@keyframes tiktokHintArrow {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
@media (max-width: 900px) {
.rd .tiktok-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.rd .tiktok-hint::after { animation: none; }
}
/* =========================================================
PÁGINA DE SERVICIO/ESPECIALIDAD — Layout de conversión
Componentes: intro-split, audience-grid, includes-grid,
metric-banner, mid-cta, service-faq, service-form-section
========================================================= */
/* Intro split: foto izq + descripción + lead CTA */
.rd .svc-intro {
padding: var(--space-6) 0;
background: var(--m-paper);
}
.rd .svc-intro__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
.rd .svc-intro__media {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.rd .svc-intro__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s var(--ease-out);
}
.rd .svc-intro__media:hover img { transform: scale(1.04); }
.rd .svc-intro__copy .eyebrow { margin-bottom: 18px; }
.rd .svc-intro__title {
font-size: var(--fs-2xl);
line-height: 1.1;
letter-spacing: -.025em;
margin: 0 0 18px;
font-weight: 500;
color: var(--m-ink);
}
.rd .svc-intro__title em { font-style: italic; color: var(--m-blue); }
.rd .svc-intro__lead {
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--m-ink-soft);
margin-bottom: 24px;
}
.rd .svc-intro__cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.rd .svc-intro__grid { grid-template-columns: 1fr; gap: 36px; }
.rd .svc-intro__media { max-width: 480px; margin: 0 auto; }
}
/* Audience: 3 perfiles ideales */
.rd .svc-audience {
padding: var(--space-7) 0;
background: var(--m-paper-2);
}
.rd .svc-audience__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.rd .svc-audience__card {
background: var(--m-white);
border-radius: var(--radius);
padding: 32px 28px;
border: 1px solid var(--m-line);
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.rd .svc-audience__card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.rd .svc-audience__icon {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--m-blue), var(--m-blue-light));
color: var(--m-white);
font-size: 1.2rem;
margin-bottom: 18px;
}
.rd .svc-audience__title {
font-family: var(--f-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--m-ink);
margin-bottom: 8px;
line-height: 1.2;
}
.rd .svc-audience__desc {
font-size: .95rem;
color: var(--m-ink-muted);
line-height: 1.55;
}
@media (max-width: 900px) {
.rd .svc-audience__grid { grid-template-columns: 1fr; }
}
/* Includes: qué incluye el servicio */
.rd .svc-includes {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .svc-includes__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 40px;
max-width: 980px;
margin: 40px auto 0;
}
.rd .svc-includes__item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--m-line);
}
.rd .svc-includes__check {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(30, 186, 174, 0.14);
color: var(--m-teal);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: .95rem;
margin-top: 2px;
}
.rd .svc-includes__text {
font-size: 1rem;
color: var(--m-ink);
line-height: 1.5;
font-family: var(--f-sans);
}
.rd .svc-includes__text strong {
font-weight: 700;
color: var(--m-ink);
}
@media (max-width: 700px) {
.rd .svc-includes__grid { grid-template-columns: 1fr; }
}
/* Métrica/caso destacado */
.rd .svc-metric {
background: var(--m-ink);
color: var(--m-white);
padding: var(--space-6) 0;
position: relative;
overflow: hidden;
}
.rd .svc-metric::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(30,186,174,.25), transparent 70%);
filter: blur(40px);
}
.rd .svc-metric__inner {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.rd .svc-metric__big {
font-family: var(--f-serif);
font-size: clamp(3rem, 2rem + 4vw, 5.6rem);
line-height: 1.1;
letter-spacing: -.04em;
font-weight: 500;
background: linear-gradient(105deg, var(--m-blue-light), var(--m-blue));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 18px 0 14px;
padding-bottom: 0.1em; /* evita que descenders (g, p, y) queden recortados por overflow:hidden del padre */
}
.rd .svc-metric__quote {
font-family: var(--f-serif);
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.88);
max-width: 720px;
margin: 0 auto 14px;
}
.rd .svc-metric__author {
font-family: var(--f-sans);
font-size: .9rem;
color: rgba(255, 255, 255, 0.6);
}
.rd .svc-metric .eyebrow { color: var(--m-teal); }
/* Mid CTA banner: barra horizontal entre secciones */
.rd .svc-midcta {
padding: 40px 0;
background: var(--m-paper-2);
border-top: 1px solid var(--m-line);
border-bottom: 1px solid var(--m-line);
}
.rd .svc-midcta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.rd .svc-midcta__text {
flex: 1 1 400px;
}
.rd .svc-midcta__title {
font-family: var(--f-serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.02em;
color: var(--m-ink);
line-height: 1.2;
margin: 0 0 6px;
}
.rd .svc-midcta__sub {
font-size: .95rem;
color: var(--m-ink-muted);
margin: 0;
}
.rd .svc-midcta__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* FAQ del servicio (reusa .faq pero con menos padding) */
.rd .svc-faq {
padding: var(--space-6) 0;
background: var(--m-paper);
}
.rd .svc-faq .faq-list { max-width: 880px; margin: 32px auto 0; }
/* Formulario express + lateral con CTAs directos */
.rd .svc-form-section {
padding: var(--space-7) 0;
background: var(--m-paper-2);
}
.rd .svc-form-section__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 50px;
align-items: start;
}
.rd .svc-form-section__copy h2 {
font-family: var(--f-serif);
font-size: var(--fs-2xl);
font-weight: 500;
letter-spacing: -.025em;
line-height: 1.1;
margin: 16px 0 16px;
}
.rd .svc-form-section__copy h2 em { font-style: italic; color: var(--m-blue); }
.rd .svc-form-section__copy > p {
font-size: var(--fs-base);
color: var(--m-ink-soft);
line-height: 1.55;
margin-bottom: 24px;
}
.rd .svc-form-section__trust {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
font-size: .9rem;
color: var(--m-ink-muted);
margin-bottom: 24px;
}
.rd .svc-form-section__trust span::before {
content: "✓";
color: var(--m-teal);
margin-right: 6px;
font-weight: 700;
}
.rd .svc-form-section__contacts {
display: grid;
gap: 14px;
margin-top: 24px;
}
.rd .svc-form-section__contact {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--m-white);
border: 1px solid var(--m-line);
border-radius: var(--radius);
color: var(--m-ink);
font-family: var(--f-sans);
font-weight: 500;
text-decoration: none !important;
transition: transform .25s ease, border-color .25s ease;
}
.rd .svc-form-section__contact:hover {
transform: translateX(4px);
border-color: var(--m-blue);
color: var(--m-ink) !important;
}
.rd .svc-form-section__contact i {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(1, 147, 222, 0.08);
color: var(--m-blue);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.rd .svc-form-section__contact:nth-child(2) i {
background: rgba(37, 211, 102, 0.12);
color: #25d366;
}
/* Form card en el lado derecho */
.rd .svc-form-wrap {
background: var(--m-white);
border-radius: var(--radius-lg);
padding: 32px 30px 28px;
box-shadow: var(--shadow-lg);
border: 1px solid var(--m-line);
}
.rd .svc-form-wrap__eyebrow {
display: inline-block;
font-family: var(--f-sans);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-coral);
margin-bottom: 10px;
}
.rd .svc-form-wrap__title {
font-family: var(--f-serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--m-ink);
margin-bottom: 6px;
}
.rd .svc-form-wrap__sub {
font-size: .9rem;
color: var(--m-ink-muted);
margin-bottom: 22px;
}
@media (max-width: 900px) {
.rd .svc-form-section__grid { grid-template-columns: 1fr; gap: 36px; }
}
/* =========================================================
Page-hero (componente nuevo para páginas internas: servicios/especialidades/clientes/contacto)
========================================================= */
.rd .page-hero {
padding: 160px 0 80px;
background: var(--m-paper);
position: relative;
overflow: hidden;
}
.rd .page-hero::before {
content: "";
position: absolute;
top: -300px; right: -300px;
width: 800px; height: 800px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(1,147,222,.12), transparent 70%);
pointer-events: none;
}
.rd .page-hero__inner {
position: relative;
z-index: 1;
max-width: 900px;
}
.rd .page-hero__crumb {
font-family: var(--f-sans);
font-size: .85rem;
color: var(--m-ink-muted);
margin-bottom: 24px;
}
.rd .page-hero__crumb a { color: var(--m-blue); }
.rd .page-hero__crumb .sep { margin: 0 8px; color: var(--m-line); }
.rd .page-hero__title {
font-size: var(--fs-3xl);
line-height: 1;
letter-spacing: -.035em;
margin-bottom: 22px;
font-weight: 500;
}
.rd .page-hero__title em { font-style: italic; color: var(--m-blue); }
.rd .page-hero__sub {
font-size: var(--fs-lg);
color: var(--m-ink-muted);
max-width: 640px;
line-height: 1.5;
}
/* =========================================================
BLOG (estilo magazine)
========================================================= */
.rd .blog-hero-rd {
padding: 160px 0 60px;
background: var(--m-paper);
position: relative;
}
.rd .blog-hero-rd__inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
align-items: end;
}
.rd .blog-hero-rd__title {
font-size: var(--fs-4xl);
line-height: .95;
letter-spacing: -.04em;
font-weight: 500;
}
.rd .blog-hero-rd__title em { font-style: italic; color: var(--m-blue); }
.rd .blog-hero-rd__sub {
color: var(--m-ink-muted);
font-size: var(--fs-lg);
padding-bottom: 12px;
}
/* Featured post (primer post grande) */
.rd .blog-featured {
padding: 30px 0 var(--space-6);
}
.rd .blog-featured__card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
background: var(--m-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--m-line);
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.rd .blog-featured__card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.rd .blog-featured__media {
aspect-ratio: 4/3;
overflow: hidden;
}
.rd .blog-featured__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s var(--ease-out);
}
.rd .blog-featured__card:hover .blog-featured__media img { transform: scale(1.04); }
.rd .blog-featured__body {
padding: 40px 50px 40px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.rd .blog-featured__tag {
display: inline-block;
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-blue);
margin-bottom: 16px;
}
.rd .blog-featured__title {
font-size: var(--fs-2xl);
line-height: 1.05;
letter-spacing: -.025em;
margin-bottom: 16px;
font-weight: 500;
}
.rd .blog-featured__excerpt {
color: var(--m-ink-muted);
font-size: 1.05rem;
line-height: 1.55;
margin-bottom: 22px;
}
.rd .blog-featured__meta {
font-size: .88rem;
color: var(--m-ink-muted);
}
@media (max-width: 860px) {
.rd .blog-hero-rd__inner { grid-template-columns: 1fr; gap: 30px; }
.rd .blog-featured__card { grid-template-columns: 1fr; }
.rd .blog-featured__body { padding: 0 30px 36px; }
}
/* Blog grid (cards después del featured) */
.rd .blog-grid-rd {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 26px;
padding-bottom: var(--space-7);
}
.rd .post-card-rd {
display: flex;
flex-direction: column;
text-decoration: none !important;
color: inherit !important;
border-radius: var(--radius);
overflow: hidden;
transition: transform .4s var(--ease-out);
}
.rd .post-card-rd:hover { transform: translateY(-6px); }
.rd .post-card-rd__media {
aspect-ratio: 4/3;
overflow: hidden;
border-radius: var(--radius);
margin-bottom: 18px;
background: var(--m-line);
}
.rd .post-card-rd__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease-out);
}
.rd .post-card-rd:hover .post-card-rd__media img { transform: scale(1.05); }
.rd .post-card-rd__tag {
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--m-blue);
margin-bottom: 10px;
}
.rd .post-card-rd__title {
font-family: var(--f-serif);
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.2;
color: var(--m-ink);
margin-bottom: 10px;
}
.rd .post-card-rd__excerpt {
font-size: .92rem;
color: var(--m-ink-muted);
line-height: 1.55;
margin-bottom: 12px;
}
.rd .post-card-rd__meta {
font-size: .82rem;
color: var(--m-ink-muted);
margin-top: auto;
}
@media (max-width: 1100px) {
.rd .blog-grid-rd { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.rd .blog-grid-rd { grid-template-columns: 1fr; }
}
/* =========================================================
Article (post page) editorial
========================================================= */
.rd .article {
padding: 140px 0 var(--space-7);
background: var(--m-paper);
}
.rd .article__header {
max-width: 760px;
margin: 0 auto 40px;
padding: 0 24px;
text-align: center;
}
.rd .article__tag {
display: inline-block;
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 700;
color: var(--m-blue);
margin-bottom: 18px;
}
.rd .article__title {
font-size: var(--fs-3xl);
line-height: 1.05;
letter-spacing: -.03em;
font-weight: 500;
margin-bottom: 18px;
}
.rd .article__title em { font-style: italic; color: var(--m-blue); }
.rd .article__meta {
font-size: .9rem;
color: var(--m-ink-muted);
}
.rd .article__cover {
max-width: 1100px;
margin: 0 auto 60px;
padding: 0 24px;
}
.rd .article__cover-inner {
aspect-ratio: 16/9;
border-radius: var(--radius-lg);
overflow: hidden;
}
.rd .article__cover-inner img { width: 100%; height: 100%; object-fit: cover; }
.rd .article__body {
max-width: var(--container-text);
margin: 0 auto;
padding: 0 24px;
}
.rd .article__body p,
.rd .article__body ul,
.rd .article__body ol {
font-family: var(--f-sans);
font-size: 1.08rem;
line-height: 1.75;
color: var(--m-ink-soft);
margin-bottom: 22px;
}
.rd .article__body p:first-of-type::first-letter {
font-family: var(--f-serif);
font-size: 4.2rem;
font-weight: 600;
float: left;
line-height: .85;
padding: 6px 14px 0 0;
color: var(--m-blue);
}
.rd .article__body h2 {
font-family: var(--f-serif);
font-size: 1.9rem;
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.15;
margin: 50px 0 18px;
}
.rd .article__body h3 {
font-family: var(--f-serif);
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.2;
margin: 36px 0 12px;
}
.rd .article__body ul, .rd .article__body ol { padding-left: 22px; }
.rd .article__body li { margin-bottom: 8px; }
.rd .article__body blockquote {
font-family: var(--f-serif);
font-style: italic;
font-size: 1.45rem;
line-height: 1.4;
color: var(--m-ink);
border-left: 3px solid var(--m-blue);
padding: 12px 0 12px 28px;
margin: 36px 0;
}
.rd .article__body a {
color: var(--m-blue);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
.rd .article__body strong { color: var(--m-ink); font-weight: 700; }
.rd .article__cta {
max-width: var(--container-text);
margin: 60px auto 0;
padding: 50px;
background: var(--m-ink);
color: var(--m-white);
border-radius: var(--radius-lg);
text-align: center;
}
.rd .article__cta h3 {
font-family: var(--f-serif);
font-size: 1.8rem;
color: var(--m-white);
margin-bottom: 14px;
font-weight: 600;
letter-spacing: -.025em;
}
.rd .article__cta p { color: rgba(255,255,255,.78); margin-bottom: 24px; }
@media (max-width: 700px) {
.rd .article__cta { padding: 36px 26px; margin-left: 24px; margin-right: 24px; }
.rd .article__body p:first-of-type::first-letter { font-size: 3.2rem; }
}
/* =========================================================
Animaciones de entrada (más notorias)
========================================================= */
@media (prefers-reduced-motion: no-preference) {
.rd .reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
/* Sin will-change global: se aplica via JS justo antes de animar y se quita post-transición */
}
.rd .reveal-up.is-visible { opacity: 1; transform: none; }
.rd .reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rd .reveal-left.is-visible { opacity: 1; transform: none; }
.rd .reveal-right {
opacity: 0;
transform: translateX(40px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rd .reveal-right.is-visible { opacity: 1; transform: none; }
.rd .reveal-scale {
opacity: 0;
transform: scale(.92);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rd .reveal-scale.is-visible { opacity: 1; transform: none; }
/* Stagger por hijos directos */
.rd .reveal-stagger > * {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.rd .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.rd .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.rd .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.rd .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.rd .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.rd .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.rd .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
/* Cursor custom (sólo desktop con hover real) */
@media (hover: hover) and (pointer: fine) {
.rd-cursor {
position: fixed;
top: 0; left: 0;
width: 24px; height: 24px;
border: 1.5px solid var(--m-ink);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform .25s var(--ease-out), border-color .2s ease, opacity .2s ease;
opacity: .7;
/* NO usar mix-blend-mode: difference — produce tonos inesperados (naranja sobre azul,
cian sobre rojo, etc.) que se ven como artefactos sobre nav/CTAs coloreados. */
}
.rd-cursor.is-hover {
transform: translate(-50%, -50%) scale(1.6);
border-color: var(--m-blue);
opacity: 1;
}
/* Ocultar cursor custom cuando está sobre el navbar transparente del hero
(el difference daba pelotita naranja sobre items azules) */
body.rd.home-rd .header.header-layout1:hover ~ * .rd-cursor,
.rd-cursor.is-on-nav { opacity: 0; }
}
}
/* Hide nothing for reduced motion users */
@media (prefers-reduced-motion: reduce) {
.rd .reveal-up, .rd .reveal-left, .rd .reveal-right, .rd .reveal-scale,
.rd .reveal-stagger > * {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================================
Pequeños ajustes finales
========================================================= */
.rd .visually-hidden,
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0);
border: 0;
}
/* =========================================================
Accesibilidad: focus-visible (sobrescribe el `* { outline: none }` del CSS original)
========================================================= */
body.rd a:focus-visible,
body.rd button:focus-visible,
body.rd input:focus-visible,
body.rd textarea:focus-visible,
body.rd select:focus-visible,
body.rd .btn:focus-visible,
body.rd .btn-rd:focus-visible,
body.rd .nav__item-link:focus-visible,
body.rd .svc-card:focus-visible,
body.rd .post-card-rd:focus-visible,
body.rd .faq-q:focus-visible,
body.rd .wa-float:focus-visible,
body.rd #scrollTopBtn:focus-visible {
outline: 2px solid var(--m-blue) !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 4px rgba(1, 147, 222, 0.18) !important;
border-radius: 4px;
}
body.rd .btn-rd:focus-visible,
body.rd .wa-float:focus-visible {
border-radius: var(--radius-pill);
}
body.rd .svc-card:focus-visible,
body.rd .post-card-rd:focus-visible {
border-radius: var(--radius);
}
/* Skip link */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--m-ink);
color: var(--m-white);
padding: 12px 20px;
border-radius: var(--radius-sm);
font-family: var(--f-sans);
font-weight: 600;
font-size: .92rem;
z-index: 10000;
transition: top .2s var(--ease-out);
text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 16px;
color: var(--m-white);
outline: 2px solid var(--m-teal);
outline-offset: 2px;
}
/* Tap targets y feedback táctil mobile */
body.rd .btn-rd,
body.rd .svc-card,
body.rd .post-card-rd,
body.rd .nav__item-link,
body.rd .faq-q,
body.rd .wa-float {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Estados :active para feedback táctil */
body.rd .btn-rd:active { transform: translateY(1px) scale(.98); }
body.rd .svc-card:active,
body.rd .post-card-rd:active { transform: translateY(-3px) scale(.99); }
/* Tabular nums para números animados (counters, badges) */
.rd .stat__num,
.rd .stat__num span,
.rd .hero-rd__badge-value {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* =========================================================
Reduced motion: cubrir animaciones infinitas que faltaban
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Consolidado con el bloque de marquee más arriba; solo cubre animaciones del cta-final */
.rd .cta-final__bg::before,
.rd .cta-final__bg::after {
animation: none !important;
}
}
/* .hero-rd__badge, .hero-rd__scroll-line eliminados — clase .hero-rd ya no existe en HTML */
/* =========================================================
Sección "¿Te suena?" — Problema/agitación (homepage)
========================================================= */
.rd .pain-points {
padding: var(--space-7) 0;
background: var(--m-paper);
border-top: 1px solid var(--m-line);
border-bottom: 1px solid var(--m-line);
}
.rd .pain-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 28px;
margin-top: 36px;
}
.rd .pain-item {
display: flex;
align-items: center; /* centra ícono con texto (antes flex-start desalineaba) */
gap: 16px;
padding: 16px 12px;
margin: 0 -12px; /* compensa padding horizontal para mantener alineación visual */
border-bottom: 1px solid var(--m-line);
border-radius: 10px;
transition:
transform .3s var(--ease-out),
background-color .25s ease,
border-color .25s ease;
}
.rd .pain-item:nth-last-child(-n+2) { border-bottom: none; }
.rd .pain-item:hover {
background-color: rgba(255, 107, 87, .05); /* coral muy sutil */
transform: translateX(6px);
border-bottom-color: var(--m-coral);
}
.rd .pain-item:hover .pain-item__icon {
background: var(--m-coral);
color: var(--m-white);
transform: scale(1.08) rotate(-4deg);
}
.rd .pain-item:hover .pain-item__text {
color: var(--m-ink);
}
.rd .pain-item__icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--m-paper-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--m-coral);
font-weight: 700;
font-size: 1.1rem;
transition:
background-color .25s ease,
color .25s ease,
transform .35s var(--ease-spring);
}
.rd .pain-item__text {
font-family: var(--f-sans);
font-size: 1rem;
color: var(--m-ink);
line-height: 1.45;
margin: 0; /* el trae margin default que añadía altura */
}
@media (prefers-reduced-motion: reduce) {
.rd .pain-item,
.rd .pain-item__icon { transition: none !important; }
.rd .pain-item:hover { transform: none !important; }
.rd .pain-item:hover .pain-item__icon { transform: none !important; }
}
@media (max-width: 700px) {
.rd .pain-grid { grid-template-columns: 1fr; }
.rd .pain-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--m-line); }
.rd .pain-item:last-child { border-bottom: none; }
}
/* =========================================================
Sección "Lo que NO hacemos" — risk reversal
========================================================= */
.rd .no-list {
padding: var(--space-6) 0;
background: var(--m-paper-2);
}
.rd .no-list__inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.rd .no-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 32px;
text-align: left;
}
.rd .no-item {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
background: var(--m-white);
border-radius: var(--radius);
border: 1px solid var(--m-line);
}
.rd .no-item__mark {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255, 107, 87, 0.12);
color: var(--m-coral);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .9rem;
}
.rd .no-item__text {
font-size: .95rem;
color: var(--m-ink);
font-family: var(--f-sans);
line-height: 1.4;
}
@media (max-width: 700px) {
.rd .no-grid { grid-template-columns: 1fr; }
}
/* Microcopy para CTAs (trust line) */
.rd .cta-microcopy {
display: block;
margin-top: 12px;
font-size: .82rem;
color: var(--m-ink-muted);
font-family: var(--f-sans);
}
.rd .cta-microcopy::before {
content: "✓";
color: var(--m-teal);
font-weight: 700;
margin-right: 6px;
}
/* =========================================================
Formulario de contacto editorial
========================================================= */
.rd .form-rd {
display: grid;
gap: 18px;
max-width: 640px;
}
.rd .form-rd__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 600px) {
.rd .form-rd__row { grid-template-columns: 1fr; }
}
.rd .form-rd__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.rd .form-rd__label {
font-family: var(--f-sans);
font-size: .82rem;
font-weight: 600;
color: var(--m-ink);
letter-spacing: -.005em;
}
.rd .form-rd__label .req { color: var(--m-coral); margin-left: 2px; }
.rd .form-rd__label .form-rd__optional {
color: var(--m-ink-muted);
font-weight: 400;
font-size: .9em;
margin-left: 2px;
}
.rd .form-rd__input,
.rd .form-rd__select,
.rd .form-rd__textarea {
font-family: var(--f-sans);
font-size: 1rem;
padding: 14px 16px;
border: 1.5px solid var(--m-line);
border-radius: var(--radius-sm);
background: var(--m-white);
color: var(--m-ink);
transition: border-color .2s ease, box-shadow .2s ease;
width: 100%;
}
.rd .form-rd__textarea {
resize: vertical;
min-height: 130px;
font-family: var(--f-sans);
}
.rd .form-rd__input:focus,
.rd .form-rd__select:focus,
.rd .form-rd__textarea:focus {
outline: none;
border-color: var(--m-blue);
box-shadow: 0 0 0 4px rgba(1, 147, 222, 0.15);
}
.rd .form-rd__input[aria-invalid="true"],
.rd .form-rd__textarea[aria-invalid="true"] {
border-color: var(--m-coral);
}
.rd .form-rd__help {
font-size: .8rem;
color: var(--m-ink-muted);
font-family: var(--f-sans);
}
.rd .form-rd__error {
font-size: .82rem;
color: var(--m-coral);
font-family: var(--f-sans);
display: none;
}
.rd .form-rd__field.has-error .form-rd__error { display: block; }
.rd .form-rd__radios {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rd .form-rd__radio {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--m-white);
border: 1.5px solid var(--m-line);
border-radius: var(--radius-pill);
cursor: pointer;
font-size: .9rem;
color: var(--m-ink);
font-family: var(--f-sans);
transition: all .2s ease;
}
.rd .form-rd__radio input { position: absolute; opacity: 0; pointer-events: none; }
.rd .form-rd__radio:has(input:checked) {
background: var(--m-ink);
color: var(--m-white);
border-color: var(--m-ink);
}
.rd .form-rd__honeypot {
position: absolute !important;
left: -10000px;
top: auto;
width: 1px; height: 1px;
overflow: hidden;
}
.rd .form-rd__submit-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-top: 6px;
}
.rd .form-rd__status {
font-size: .92rem;
font-family: var(--f-sans);
padding: 12px 16px;
border-radius: var(--radius-sm);
display: none;
}
.rd .form-rd__status.is-success {
display: block;
background: rgba(30, 186, 174, 0.12);
color: #0f7e75;
border: 1px solid rgba(30, 186, 174, 0.4);
}
.rd .form-rd__status.is-error {
display: block;
background: rgba(255, 107, 87, 0.08);
color: #c44530;
border: 1px solid rgba(255, 107, 87, 0.3);
}
/* Hero contact split */
.rd .contact-split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: start;
}
@media (max-width: 900px) {
.rd .contact-split { grid-template-columns: 1fr; gap: 36px; }
}
.rd .contact-info {
background: var(--m-paper-2);
padding: 36px;
border-radius: var(--radius-lg);
border: 1px solid var(--m-line);
}
.rd .contact-info h3 {
font-family: var(--f-serif);
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 600;
}
.rd .contact-info ul {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: grid;
gap: 14px;
}
.rd .contact-info li a {
display: flex;
align-items: center;
gap: 12px;
color: var(--m-ink);
font-family: var(--f-sans);
font-size: 1rem;
font-weight: 500;
}
.rd .contact-info li a:hover { color: var(--m-blue); }
.rd .contact-info li i {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--m-white);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--m-blue);
}
/* Overrides al preloader original para que combine con nuevo look */
body.rd .preloader { background: var(--m-paper); }
body.rd .preloader .loading span { background-color: var(--m-blue); }
/* Hide things del style original que ya no necesitamos en pages redesigned */
body.rd.home-rd .slider,
body.rd.home-rd .promo-block,
body.rd.home-rd .feature-list,
body.rd.home-rd .promo-banner { display: none !important; }
/* Performance: promueve capas de parallax al compositor GPU */
/* =========================================================
Carrusel de logos de clientes (reemplaza Slick — vanilla CSS)
========================================================= */
.rd .slick-carousel.logo-carousel {
overflow: hidden;
width: 100%;
position: relative;
}
.rd .logo-carousel .logo-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: max-content;
animation: logoScroll calc(var(--logo-count, 7) * 3s) linear infinite;
}
.rd .logo-carousel:hover .logo-track { animation-play-state: paused; }
.rd .logo-carousel .client {
flex: 0 0 auto;
width: 180px;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes logoScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.rd .logo-carousel { overflow-x: auto; }
.rd .logo-carousel .logo-track { animation: none; }
}
/* =========================================================
Sección editorial "En profundidad" (contenido SEO servicios)
========================================================= */
.rd .svc-editorial {
padding: var(--space-7) 0;
background: var(--m-paper);
}
.rd .svc-editorial__inner {
max-width: 760px;
margin: 0 auto;
}
.rd .svc-editorial__title {
font-family: var(--f-serif);
font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--m-ink);
margin: 14px 0 22px;
}
.rd .svc-editorial__h3 {
font-family: var(--f-serif);
font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
font-weight: 600;
color: var(--m-ink);
margin: 30px 0 12px;
letter-spacing: -.01em;
}
.rd .svc-editorial__inner p {
font-family: var(--f-sans);
font-size: 1.05rem;
line-height: 1.7;
color: var(--m-ink-soft);
margin-bottom: 16px;
}
.rd .svc-editorial__inner strong { color: var(--m-ink); font-weight: 600; }