/* ========================================================= Rosana Noce — Psicóloga Gestáltica Paleta "Sorbet" + sistema tipográfico Satoshi/Instrument Serif ========================================================= */ :root { --blanco: #FEFEFE; --gris-claro: #EDECEC; --gris-borde: #CCCCCC; --verde-suave: #E0E7D7; --verde-salvia: #B7C396; --rosa-tierra-texto: #8A6A60; /* rosa-tierra oscurecido para cumplir AA como texto sobre blanco (~4.9:1) */ --verde-profundo: #3F4A2E; /* derivado de --verde-salvia, para íconos lineales */ --verde-oscuro: #4E5A3A; /* Verde propio para botones primarios: independiente de --verde-salvia (que sigue usándose en bordes/badges/detalles) para poder ajustar el contraste de los CTAs sin afectar esos otros usos. */ --verde-cta: #52643F; --verde-cta-hover: #465635; /* Flor de loto del hero: monocromática en salvia (como el logo, pero sin el dorado/rosa del isotipo), variando solo opacidad entre capas para dar profundidad. Token propio para ajustarla sin tocar el resto de la paleta. */ --lotus-sage: var(--verde-salvia); --ink: #20241c; --ink-muted: rgba(32, 36, 28, 0.72); --on-dark: #FEFEFE; --on-dark-muted: rgba(254, 254, 254, 0.78); --font-sans: "Plus Jakarta Sans", sans-serif; --font-serif: "Instrument Serif", serif; --container: 1200px; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; /* 40px logo mobile / 44px desktop dejan >=12px de aire arriba y abajo sin pasar de ~68px de altura total. */ --header-height: 68px; } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--blanco); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } ul { margin: 0; padding: 0; } button { font-family: inherit; } section { scroll-margin-top: var(--header-height); } .section-inner { max-width: var(--container); margin: 0 auto; padding: 4.5rem 1.5rem; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--verde-oscuro); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0; z-index: 200; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Scroll reveal (progressive enhancement) ---------- Por defecto todo es visible: si JS no carga o el usuario prefiere motion reducido, .reveal nunca se oculta. Solo cuando main.js confirma soporte de IntersectionObserver y ausencia de prefers-reduced-motion agrega ".js-reveal-enabled" a , momento en el que .reveal pasa a ocultarse hasta entrar en viewport. */ .reveal { opacity: 1; transform: none; } html.js-reveal-enabled .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } html.js-reveal-enabled .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js-reveal-enabled .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Typography ---------- */ h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; } h1 { font-size: clamp(2.1rem, 5vw + 0.5rem, 3.6rem); } h2 { font-size: clamp(1.75rem, 3.4vw + 0.5rem, 2.6rem); } .text-ink { color: var(--ink); } .text-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--verde-oscuro); } .text-accent-on-dark { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--verde-suave); } .lead { font-size: 1.1rem; color: var(--ink-muted); max-width: 62ch; } .section-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; } .section-head .lead { margin: 1rem auto 0; } /* Badge de convocatoria: discreto, no compite con el h2. */ .supervision-badge { display: inline-block; margin: 1rem 0 0; background: var(--verde-suave); color: var(--verde-oscuro); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 1rem; border-radius: 999px; } /* CTA temprano: liviano, tipo link destacado, no es el botón primario. */ .supervision-cta-early { display: block; margin: 0.85rem auto 0; width: fit-content; font-weight: 700; font-size: 0.98rem; color: var(--verde-cta); text-decoration: none; border-bottom: 1.5px solid var(--verde-cta); padding-bottom: 2px; transition: opacity 0.2s ease; } .supervision-cta-early:hover { opacity: 0.7; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.85rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--verde-cta); color: #FFFFFF; } .btn-primary:hover { background: var(--verde-cta-hover); } .btn-outline-dark { background: transparent; border-color: var(--verde-oscuro); color: var(--verde-oscuro); } .btn-outline-dark:hover { background: var(--verde-oscuro); color: #fff; } .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; } .text-link { display: inline-block; margin-top: 0.5rem; color: var(--verde-oscuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--verde-oscuro); } .nav-wrap { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .logo img { height: 40px; width: auto; } .nav-toggle { background: none; border: none; cursor: pointer; width: 32px; height: 32px; padding: 0; position: relative; z-index: 110; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: #fff; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle span { top: 15px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); } .nav-menu { display: flex; align-items: center; gap: 2.25rem; } .nav-menu ul { display: flex; list-style: none; gap: 2.25rem; } .nav-menu ul a { color: #fff; opacity: 0.85; text-decoration: none; font-weight: 500; font-size: 1.05rem; } .nav-menu ul a:hover { opacity: 1; } .nav-cta { flex-shrink: 0; padding: 0.65rem 1.4rem; transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out; } .nav-cta-icon { flex-shrink: 0; } /* Sin movimiento en el hover: solo cambio de color (fondo verde suave del logo, texto verde oscuro para mantener contraste). Sobrescribe el translateY(-2px) y el fondo/color que trae .btn-outline-light. */ .nav-cta:hover { transform: none; background: var(--verde-suave); border-color: var(--verde-suave); color: var(--verde-oscuro); } /* Bloquea el scroll del body detrás del menú mobile abierto (ver main.js, clase agregada/quitada junto con "is-open"). Solo aplica en el breakpoint donde el menú es el overlay fijo de abajo. */ @media (max-width: 899px) { body.nav-open-lock { overflow: hidden; } } @media (max-width: 899px) { .nav-toggle { display: block; } .nav-menu { position: fixed; inset: var(--header-height) 0 auto 0; background: var(--verde-oscuro); flex-direction: column; align-items: flex-start; padding: 1.5rem; gap: 1.5rem; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .nav-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-menu ul { flex-direction: column; gap: 1.1rem; width: 100%; } .nav-cta { width: 100%; } } @media (min-width: 900px) { .nav-toggle { display: none; } /* El logo crece un poco solo en desktop; en mobile queda igual para no apretar el header contra el toggle y el botón de WhatsApp. */ .logo img { height: 44px; } } /* ---------- Hero ---------- */ .hero { background: linear-gradient(160deg, var(--verde-suave) 0%, var(--blanco) 60%); } .hero-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding-top: 3.5rem; padding-bottom: 3.5rem; } .hero-content h1 { margin-bottom: 1.5rem; } .hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .hero-media { position: relative; width: min(70vw, 340px); margin-inline: auto; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 45%, rgba(224, 231, 215, 0.35) 0%, transparent 72%); } @media (min-width: 960px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; padding-top: 5rem; padding-bottom: 5rem; } .hero-media { width: min(42vw, 520px); margin-inline: 0; } } /* ---------- Hero: Flor de loto generativa ---------- Geometría inspirada en el isotipo (loto dentro de un corazón, ver assets/Recurso_6.png): 1 pétalo central + 2 alas grandes (dan la silueta de "corazón") + 2 exteriores + 1 brote inferior central + 2 brotes inferiores laterales, todos como rotados/escalados alrededor de un mismo pivote (transform-origin, base de la flor), más 3 puntos que flotan sobre el pétalo central. Monocromática en salvia, variando solo opacidad entre capas. Fases: 1) trazo (stroke-dashoffset, pathLength="1" normalizado), 2) apertura (rotación/escala desde una posición semicerrada hasta la final, con delay escalonado), 3) respiración + flotación en loop infinito. En mobile/touch la apertura se controla por scroll (ver main.js). */ .hero-lotus { width: 100%; height: 100%; display: block; } /* Pivote compartido por todos los pétalos: base de la flor. */ .lotus-petal { transform-box: view-box; transform-origin: 120px 170px; animation-name: lotus-open; animation-duration: 1.6s; animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); animation-delay: var(--open-delay, 0s); animation-fill-mode: both; will-change: transform; } @keyframes lotus-open { from { transform: rotate(var(--rot-from)); } to { transform: rotate(var(--rot-to)); } } /* Los dos pétalos sobre el eje vertical (central, arriba, y el brote inferior, abajo) no rotan: nacen apenas encogidos y crecen a su tamaño final, en vez de abrirse en ángulo. */ .lotus-petal--central { animation-name: lotus-open-central; } @keyframes lotus-open-central { from { transform: scale(0.92); } to { transform: scale(1); } } /* Capa interna para el parallax de cursor (desktop): JS anima su transform frame a frame, independiente de la animación de apertura que corre en el padre (.lotus-petal), para que no se pisen. */ .lotus-parallax { transform-box: view-box; transform-origin: 120px 170px; will-change: transform; } .lotus-path { fill: var(--path-color, none); fill-opacity: var(--path-fill-opacity, 0); stroke: var(--path-color, var(--lotus-sage)); stroke-width: var(--path-stroke-width, 2); stroke-linecap: round; stroke-linejoin: round; opacity: var(--path-opacity, 0.8); stroke-dasharray: 1; stroke-dashoffset: 1; /* 3 animaciones independientes en el mismo elemento (listas posicionales, mismo orden en cada propiedad longhand): 1) lotus-draw: el trazo de siempre. 2) lotus-glow: resplandor que acompaña la apertura de ESE pétalo (usa --open-delay, el mismo delay que ya usa .lotus-petal para abrirse, heredado por custom property desde el padre) y se apaga solo via fill-mode:forwards, sin JS. 3) lotus-stroke-warmth: loop de color en reposo (ver más abajo). */ animation-name: lotus-draw, lotus-glow, lotus-stroke-warmth; animation-duration: 1s, 1.6s, 7.4s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease-out, ease-in-out; animation-delay: var(--draw-delay, 0s), var(--open-delay, 0s), 3.5s; animation-iteration-count: 1, 1, infinite; animation-direction: normal, normal, alternate; animation-fill-mode: both, forwards, both; } @keyframes lotus-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Resplandor que recorre la flor a medida que se ensambla: arranca fuerte apenas el pétalo empieza a abrirse y decae a 0 al terminar. Sujeto solo al trazo (drop-shadow, no toca layout/transform). */ @keyframes lotus-glow { 0% { filter: drop-shadow(0 0 6px rgba(183, 195, 150, 0.85)); } 100% { filter: drop-shadow(0 0 0 rgba(183, 195, 150, 0)); } } /* Respiración de color en reposo: oscila apenas entre el verde salvia y un tono levemente más cálido (nunca dorado pleno), alternando ida y vuelta para siempre. Duración (7.4s) deliberadamente distinta a la de .lotus-breathe (5.1s) para que nunca queden en fase. */ @keyframes lotus-stroke-warmth { from { stroke: var(--lotus-sage); } to { stroke: #C3BC85; } } .lotus-dot { fill: var(--lotus-sage); opacity: 0; transform-box: fill-box; transform-origin: center; animation-name: lotus-dot-in, lotus-float; animation-duration: 0.8s, var(--float-duration, 6s); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease-in-out; animation-delay: var(--draw-delay, 0s), var(--float-delay, 3.2s); animation-iteration-count: 1, infinite; animation-fill-mode: both, none; } @keyframes lotus-dot-in { from { opacity: 0; transform: scale(0.4); } to { opacity: var(--dot-opacity, 0.85); transform: scale(1); } } @keyframes lotus-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } } /* Fase 3: respiración permanente de todo el conjunto. */ .lotus-breathe { transform-box: view-box; transform-origin: 120px 130px; animation: lotus-breathe 5.1s ease-in-out 3.5s infinite; will-change: transform; } @keyframes lotus-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* Partículas sutiles orbitando alrededor de la flor: un por partícula, rotando muy despacio (transform, sin JS) alrededor del mismo centro que la respiración. Cada una parte ya distribuida en un ángulo/radio distinto (via su propia posición) para no verse sincronizadas entre sí. */ .lotus-orbit { transform-box: view-box; transform-origin: 120px 130px; animation-name: lotus-orbit-spin; animation-duration: var(--orbit-duration, 30s); animation-direction: var(--orbit-direction, normal); animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } @keyframes lotus-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .lotus-particle { fill: var(--lotus-sage); opacity: 0; animation: lotus-particle-in 1.2s ease-out var(--particle-delay, 2.8s) both; } @keyframes lotus-particle-in { from { opacity: 0; } to { opacity: var(--particle-opacity, 0.35); } } /* Pausa (no reinicia) las animaciones en loop cuando el hero sale del viewport o la pestaña queda oculta: ahorra CPU/batería sin alterar el estado ya alcanzado. No afecta la apertura inicial, que ya terminó para cuando esto podría aplicar en un uso normal. */ .hero-lotus.lotus--paused .lotus-breathe, .hero-lotus.lotus--paused .lotus-dot, .hero-lotus.lotus--paused .lotus-orbit { animation-play-state: paused; } /* Mobile / puntero táctil: la apertura la controla JS según el scroll (ver main.js), no el timing fijo de arriba. Se anula la animación de rotación y de trazo; JS setea transform/dashoffset directamente en cada elemento según el progreso de scroll. */ .hero-lotus.lotus--scroll-driven .lotus-petal, .hero-lotus.lotus--scroll-driven .lotus-path { animation: none; } /* prefers-reduced-motion: estado final estático, sin animación de entrada, respiración, flotación ni parallax (el parallax y el modo scroll ni siquiera se inicializan en JS, ver main.js). */ @media (prefers-reduced-motion: reduce) { .lotus-petal { animation: none; transform: rotate(var(--rot-to)); } .lotus-petal--central { transform: scale(1); } .lotus-path { animation: none; stroke-dashoffset: 0; } .lotus-dot { animation: none; opacity: var(--dot-opacity, 0.85); transform: none; } .lotus-orbit { animation: none; } .lotus-particle { animation: none; opacity: var(--particle-opacity, 0.35); } .lotus-breathe { animation: none; } } /* ---------- Formación y trayectoria (marquee) ---------- */ .trayectoria { background: var(--gris-claro); border-top: 1px solid var(--gris-borde); border-bottom: 1px solid var(--gris-borde); padding: 1.75rem 0; overflow: hidden; } .marquee { width: 100%; overflow: hidden; } .marquee-track { display: flex; width: max-content; gap: 2.5rem; } .marquee-item { flex-shrink: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--verde-oscuro); white-space: nowrap; transition: color 0.3s ease; } .marquee-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-salvia); flex-shrink: 0; transition: background 0.3s ease; } /* "Linterna": el ítem bajo el cursor (detectado por JS vía elementFromPoint) */ .marquee-item--active { color: var(--ink); } .marquee-item--active::before { background: #D4B96A; } /* Sin animación: la cinta se reemplaza por la lista real (antes sr-only), envuelta y estática, sin overflow horizontal. */ @media (prefers-reduced-motion: reduce) { .marquee { display: none; } .trayectoria-list { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; list-style: none; padding: 0; } .trayectoria-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--verde-oscuro); white-space: nowrap; } .trayectoria-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-salvia); flex-shrink: 0; } } /* ---------- Benefit cards (Supervisión) ---------- */ .benefit-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .benefit-card { background: var(--verde-suave); border: 1px solid var(--gris-borde); border-radius: var(--radius-md); padding: 2rem; } .benefit-card h3 { font-size: 1.2rem; color: var(--verde-oscuro); margin-bottom: 0.65rem; } .benefit-card p { color: var(--ink-muted); font-size: 0.97rem; margin: 0; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .benefit-card { transition: transform 0.3s ease-out; } .benefit-card:hover { transform: scale(1.03); } } .how-it-works { margin-top: 3.5rem; background: var(--gris-claro); border-radius: var(--radius-lg); padding: 2.5rem 1.75rem; } .how-title { text-align: center; font-size: 1.3rem; margin-bottom: 2rem; } .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.75rem; text-align: center; } .stat-value { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 1.9rem; color: var(--verde-oscuro); } .stat-label { display: block; font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.35rem; } /* Zoom leve al hover: el transform vive en el ítem (su propia celda de grid), así que no empuja a los vecinos ni cambia el layout. */ @media (prefers-reduced-motion: no-preference) { .stat-item { transform-origin: center; transition: transform 0.3s ease-out; } .stat-value { transition: color 0.3s ease-out; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .stat-item { cursor: default; } .stat-item:hover { transform: scale(1.06); } .stat-item:hover .stat-value { color: var(--verde-profundo); } } /* Tarjeta de cierre unificada (convocatoria + CTA principal + nota): destaca sin gritar — mismo verde suave y radio de las cards, sin rojos ni urgencia agresiva. Full-width dentro de .section-inner, así que en mobile no hace falta nada extra para que no desborde. */ .supervision-callout { margin-top: 3.5rem; background: var(--verde-suave); border-radius: var(--radius-md); padding: 2rem; text-align: center; } .supervision-callout-title { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--verde-oscuro); } .supervision-callout-subtitle { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--ink-muted); } .supervision-callout .btn { margin-top: 1.5rem; } .section-cta-note { margin: 0.85rem 0 0; font-size: 0.88rem; color: var(--ink-muted); } .video-block { margin-top: 3.5rem; text-align: center; } .video-title { font-size: 1.3rem; margin-bottom: 0.75rem; } .video-block .lead { margin: 0 auto; text-align: center; } .video-container { position: relative; max-width: 900px; margin: 2rem auto 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); background: var(--gris-claro); } .video-container iframe { width: 100%; height: 100%; border: 0; display: block; } /* Lite-embed: miniatura + botón de play superpuesto; el iframe real (con autoplay) recién se crea al hacer clic (ver main.js). */ .video-lite-thumb { width: 100%; height: 100%; object-fit: cover; } .video-lite-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.15); border: none; padding: 0; cursor: pointer; } .video-lite-play svg { width: 68px; height: 48px; } .video-lite-play:focus-visible { outline: 2px solid var(--blanco); outline-offset: -6px; } @media (prefers-reduced-motion: no-preference) { .video-lite-play svg { transition: transform 0.2s ease-out; } .video-lite-play:hover svg, .video-lite-play:focus-visible svg { transform: scale(1.1); } } @media (min-width: 700px) { .benefit-cards { grid-template-columns: repeat(3, 1fr); } } /* ---------- FAQ ---------- */ .faq { background: var(--gris-claro); } .accordion { border-top: 1px solid var(--gris-borde); } .accordion-item { border-bottom: 1px solid var(--gris-borde); } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; background: none; border: none; padding: 1.4rem 0.25rem; text-align: left; font-size: 1.02rem; font-weight: 600; color: var(--ink); cursor: pointer; } .accordion-panel { padding: 0 0.25rem 1.5rem; } .accordion-panel p { margin: 0; max-width: 68ch; color: var(--ink-muted); } .accordion-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; background: var(--verde-oscuro); top: 50%; left: 50%; transform: translate(-50%, -50%); } .accordion-icon::before { width: 100%; height: 2px; } .accordion-icon::after { width: 2px; height: 100%; transition: transform 0.25s ease; } .accordion-trigger[aria-expanded="true"] .accordion-icon::after { transform: translate(-50%, -50%) scaleY(0); } /* ---------- Talleres ---------- */ .photo-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } .photo-card { background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 2px 14px rgba(32, 36, 28, 0.05); display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .photo-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -18px rgba(63, 74, 46, 0.28); border-color: var(--verde-salvia); } .photo-card-image { aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; } .photo-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .photo-card:hover .photo-card-image img { transform: scale(1.06); } .photo-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem; } .photo-card-body h3 { font-size: 1.15rem; color: var(--verde-oscuro); margin-bottom: 0.6rem; } .photo-card-body p { color: var(--ink-muted); font-size: 0.96rem; margin: 0; } .card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 0.94rem; color: var(--verde-profundo); text-decoration: none; } .card-more span { display: inline-block; transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .photo-card:hover .card-more span { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .photo-card, .photo-card-image img, .card-more span { transition: none !important; } .photo-card:hover { transform: none; box-shadow: 0 2px 14px rgba(32, 36, 28, 0.05); border-color: var(--gris-borde); } .photo-card:hover .photo-card-image img { transform: none; } .photo-card:hover .card-more span { transform: none; } } .email-capture { background: var(--verde-suave); border-radius: var(--radius-lg); padding: 2.5rem 1.75rem; } .email-capture-header h3 { margin: 0 0 0.5rem; font-size: 1.4rem; } .email-capture-header p { color: var(--ink-muted); margin: 0; } .capture-form { display: flex; flex-direction: column; margin-top: 1.75rem; } .interest-chips { margin: 0; border: none; padding: 0; } .interest-chips legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--ink); } .interest-chips .hint { font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); } .chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { position: relative; display: inline-flex; cursor: pointer; } .chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .chip span { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--gris-borde); background: var(--blanco); font-size: 0.92rem; color: var(--ink); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; user-select: none; } .chip:hover span { border-color: var(--verde-salvia); } .chip input:checked+span { background: var(--verde-salvia); color: var(--blanco); font-weight: 600; border-color: var(--verde-salvia); } .chip input:focus-visible+span { outline: 2px solid var(--verde-profundo); outline-offset: 2px; } /* Separador sutil entre la elección de intereses y los datos de contacto: son dos pasos distintos del mismo formulario. */ .capture-fields { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(63, 74, 46, 0.12); } .capture-fields .btn { width: 100%; } @media (min-width: 720px) { .capture-fields { flex-direction: row; align-items: flex-end; } .capture-fields .field { flex: 1; } .capture-fields .btn { width: auto; flex-shrink: 0; } } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field span { font-size: 0.85rem; font-weight: 600; } .field input { padding: 0.8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--gris-borde); font: inherit; background: var(--blanco); color: var(--ink); } .field input:focus { outline: 2px solid var(--verde-oscuro); outline-offset: 1px; } .form-success { margin-top: 1.25rem; color: var(--verde-oscuro); font-weight: 600; } .form-error { margin-top: 1.25rem; color: var(--rosa-tierra-texto); font-weight: 600; } .form-error a { color: inherit; text-decoration: underline; } /* Desde 900px hay lugar de sobra: el encabezado pasa a ser una columna angosta fija a la izquierda (el "prompt") y el formulario entero (chips + campos) ocupa el resto a la derecha, en vez de que todo quede apilado en una sola columna ancha. */ @media (min-width: 900px) { .email-capture { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 3rem; align-items: start; padding: 3rem 2.5rem; } .capture-form { margin-top: 0; } /* Sin esto, al ser hijos directos de .email-capture sin columna asignada, caerían bajo el encabezado (columna 1) en vez de bajo el formulario, que es donde el usuario acaba de interactuar. */ .form-success, .form-error { grid-column: 2; } } @media (min-width: 700px) { .photo-cards { grid-template-columns: repeat(3, 1fr); } } /* ---------- Tres maneras de vivir la experiencia (stacking cards) ---------- */ .experiencias { background: var(--blanco); } .experiencias-inner { display: grid; grid-template-columns: 1fr; gap: 3rem; /* Sin padding inferior propio: el sticky (texto y cards) usa el padding-box de este contenedor como límite de recorrido, así que cualquier padding extra acá abajo se traduce en que el texto queda "pegado" después de que la pila ya terminó. El .email-capture vive en su propio .section-inner, fuera de este grid, y aporta su propio espaciado con su padding-top habitual. */ padding-bottom: 0; } .eyebrow { display: inline-block; margin-bottom: 1rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rosa-tierra-texto); } .experiencias-intro h2 { margin-bottom: 1.25rem; } .experiencias-stack { display: flex; flex-direction: column; gap: 1.75rem; } .stack-card-wrap { position: static; } .stack-card { background: var(--verde-suave); border: 1px solid var(--gris-borde); border-radius: var(--radius-lg); padding: 2.25rem; /* Compartido entre las 3 cards para que todas queden a la altura de la más alta (hoy, la de más texto), sin tocar el padding. */ min-height: 27rem; box-shadow: 0 8px 30px rgba(32, 36, 28, 0.06); } .stack-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blanco); color: var(--verde-profundo); margin-bottom: 1.25rem; } .stack-card h3 { font-size: 1.35rem; color: var(--verde-oscuro); margin-bottom: 0.85rem; } .stack-card p { margin: 0; color: var(--ink-muted); font-size: 0.98rem; } @media (min-width: 960px) { .experiencias-inner { grid-template-columns: 1fr 0.8fr; gap: 4.5rem; align-items: start; } .experiencias-sticky-col { grid-column: 2; grid-row: 1; } .experiencias-stack { grid-column: 1; grid-row: 1; } } /* Efecto de apilado con sticky: solo en desktop y sin motion reducido. En mobile y con prefers-reduced-motion, las reglas de arriba ya dejan todo en flujo estático normal (position: static, columna simple). */ @media (min-width: 960px) and (prefers-reduced-motion: no-preference) { /* El top del texto sticky coincide exactamente con el de la card 1: ambos arrancan a la misma altura. */ .experiencias-sticky-col { position: sticky; top: calc(var(--header-height) + 24px); align-self: start; } .experiencias-stack { gap: 0; } /* Piso fijo en rem (no dependiente de vh): evita que la altura de reserva de cada wrap varíe según la altura de pantalla, que es lo que descalibraba el solape entre cards en algunos viewports. El sliver visible entre cada card y la siguiente depende solo del paso de "top" entre ellas (16px, siempre igual), nunca de esto. Este colchón (por encima de la card de 27rem) le da a las cards 1 y 2 la pista necesaria para seguir "stuck" mientras la siguiente se desliza encima; la card 3 no lo necesita (ver más abajo, no hay una 4ª card que la tape) y por eso se anula ahí. */ .stack-card-wrap { position: sticky; min-height: 28.5rem; } .stack-card-wrap:nth-of-type(1) { top: calc(var(--header-height) + 24px); } .stack-card-wrap:nth-of-type(2) { top: calc(var(--header-height) + 40px); } /* La última card no tiene nada que la tape encima: no necesita pista de scroll propia más allá de su propia altura. Cualquier colchón extra ahí no sirve para el efecto de apilado, solo alarga el alto total de .experiencias-stack y retrasa la liberación del sticky (tanto de esta card como de la columna de texto) sin motivo. */ .stack-card-wrap:nth-of-type(3) { top: calc(var(--header-height) + 56px); min-height: 0; } .stack-card { transition: transform 0.35s ease; } .stack-card-wrap.is-behind .stack-card { transform: scale(0.97); } } /* ---------- Sobre Rosana ---------- */ .sobre-rosana-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } /* El contenedor (no la imagen) define la forma: aspect-ratio fijo, nunca una altura en px ni una altura derivada del contenido de la imagen. Así el alto renderizado siempre es 1.25x el ancho (4:5), sin importar la resolución real de la foto. */ .sobre-foto { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(122, 138, 90, 0.10); } .sobre-foto img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 15%; } @media (prefers-reduced-motion: no-preference) { .sobre-foto img { transition: transform 0.4s ease-out; } .sobre-foto:hover img { transform: scale(1.04); } } .credential-list { list-style: none; margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; } .credential-list li { position: relative; padding-left: 1.75rem; font-weight: 500; } .credential-list li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 9px; height: 9px; border-radius: 50%; background: var(--verde-salvia); } @media (min-width: 900px) { .sobre-rosana-inner { grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; } } /* ---------- Testimonios ---------- */ .testimonios { background: var(--gris-claro); padding-top: 4.5rem; padding-bottom: 4.5rem; } .testimonios .section-inner { padding-bottom: 0; } /* ---------- Carrusel de testimonios: marquee continuo (una fila) ---------- */ /* Desplazamiento constante, sin pausas ni pasos, igual que la versión original de dos filas pero condensada a una. Loop infinito: el track duplica el set completo una vez (N reales + N clones) y se traslada -50% de su ancho por ciclo — con exactamente 2 copias el reinicio es matemáticamente invisible (no hace falta más que una duplicación). El hover/foco pausa (animation-play-state) y el zoom de lectura es puro CSS, en un elemento distinto (la card) del que anima el desplazamiento (el track), así que no compiten por transform. */ .testimonial-carousel { position: relative; margin-top: 3rem; } .testimonial-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .testimonial-track { display: flex; width: max-content; padding: 14px 0; } /* El espaciado va como margin-right en cada card (no como gap en el track): con gap habría 13 espacios para 14 cards y el track tendría padding lateral, así que translateX(-50%) caería 6px antes del punto exacto de reinicio → salto visible al final de cada ciclo (el "corte" después de la última card). Con margin-right el ancho del track es exactamente 2 sets y el -50% coincide 1:1 con un período: loop perfectamente continuo. */ .testimonial-track>.testimonial-card { margin-right: 1.25rem; } @media (prefers-reduced-motion: no-preference) { .testimonial-track { animation: testimonial-marquee 45s linear infinite; } .testimonial-viewport:hover .testimonial-track, .testimonial-viewport.is-touch-paused .testimonial-track { animation-play-state: paused; } } /* El foco por teclado también pausa, pero solo con puntero fino (mouse real). En touch-only un tap deja la card enfocada sin un "blur" limpio — si esta regla aplicara ahí, el marquee quedaría pausado para siempre después del primer toque. Ese era el bug real detrás de "no es un loop infinito" en mobile. */ @media (prefers-reduced-motion: no-preference) and (pointer: fine) { .testimonial-viewport:focus-within .testimonial-track { animation-play-state: paused; } } /* En mobile se ve una sola card por vez (en desktop entran 3-4), así que a la misma velocidad lineal cada testimonio dispone de ~4x menos tiempo en pantalla. Se compensa alargando la duración del ciclo solo en este breakpoint; desktop queda en 45s. */ @media (max-width: 699px) and (prefers-reduced-motion: no-preference) { .testimonial-track { animation-duration: 100s; } } @keyframes testimonial-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Foco por teclado (ver main.js): la animación en loop no garantiza que la card enfocada esté dentro del viewport visible al pausarse (puede haber quedado tapada por la máscara). Al enfocar con teclado, JS corta la animación (esta clase gana por especificidad) y fija el transform a mano para traer esa card a la vista; la transition la desliza en vez de saltar de golpe. */ .testimonial-track.is-focus-jump { animation: none; transition: transform 0.3s ease-out; } .testimonial-card { flex: 0 0 300px; background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 14px rgba(32, 36, 28, 0.05); } /* Zoom de lectura al hover/foco: no empuja a las vecinas (transform no afecta layout) y se superpone levemente gracias al z-index. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .testimonial-card { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; } .testimonial-card:hover { position: relative; z-index: 2; transform: scale(1.05); box-shadow: 0 10px 28px rgba(32, 36, 28, 0.12); } } @media (prefers-reduced-motion: no-preference) and (pointer: fine) { .testimonial-card { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; } .testimonial-card:focus-within { position: relative; z-index: 2; transform: scale(1.05); box-shadow: 0 10px 28px rgba(32, 36, 28, 0.12); } } .testimonial-card:focus-visible { outline: 2px solid var(--verde-oscuro); outline-offset: 2px; } .testimonial-top { display: flex; align-items: center; gap: 0.75rem; } .testimonial-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--gris-claro); border: 1px solid var(--gris-borde); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); overflow: hidden; } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Avatar de iniciales para testimonios que todavía no tienen foto cargada (ver assets/): mismo tamaño que los avatares con foto real, listo para reemplazarse el día que se sume una imagen. */ .testimonial-avatar--initials { background: var(--verde-suave); color: var(--verde-oscuro); font-weight: 700; font-size: 0.8rem; } .testimonial-person { display: flex; flex-direction: column; gap: 0.2rem; } .testimonial-name { font-weight: 700; font-size: 0.9rem; color: var(--ink); } .testimonial-role { font-size: 0.75rem; color: var(--ink-muted); } .testimonial-text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-muted); font-style: italic; /* Empuja el tag al fondo de la card: con esto, el espacio sobrante de una card más corta que sus vecinas queda entre el texto y el tag, nunca debajo del tag. */ flex-grow: 1; } /* Un tag por categoría, misma tipografía/padding/radio en todos — cambia solo el color. Toda la gama en verdes: blanco sobre salvia no llega a un contraste legible en texto chico (1.85:1), así que ese tag usa --ink (verde casi negro) en vez de blanco. Siempre anclado al borde inferior de la card (ver .testimonial-text más arriba). */ .testimonial-tag { align-self: flex-start; margin-top: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--verde-oscuro); background: var(--verde-suave); border-radius: 999px; padding: 3px 10px; } .testimonial-tag--supervision { background: var(--verde-salvia); color: var(--ink); } .testimonial-tag--mixto { background: var(--verde-suave); color: var(--verde-oscuro); border: 1px solid var(--verde-salvia); } /* prefers-reduced-motion: sin marquee, sin zoom, sin clones — grilla estática (2 columnas en desktop, apilada en mobile), todo el contenido visible de una. */ @media (prefers-reduced-motion: reduce) { .testimonial-viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; } .testimonial-track { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: auto; padding: 0; transform: none !important; } .testimonial-card { flex: none; margin-right: 0; /* en grilla estática el espaciado lo da el gap del grid */ } .testimonial-card[aria-hidden="true"] { display: none; } } @media (prefers-reduced-motion: reduce) and (min-width: 700px) { .testimonial-track { grid-template-columns: 1fr 1fr; align-items: stretch; } } /* ---------- Terapia de pareja ---------- */ .terapia { background: var(--verde-suave); } .terapia-inner { padding-top: clamp(72px, 10vh, 120px); padding-bottom: clamp(72px, 10vh, 120px); } .terapia-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } .terapia-main .lead { margin: 1.1rem 0 1.75rem; } .terapia-image-wrap { width: 100%; } .reveal-wrap { overflow: hidden; } .terapia-image { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(122, 138, 90, 0.10); border: 1px solid rgba(204, 204, 204, 0.4); } /* ---- Reveal de cortina atado al scroll: JS puro (main.js), sin scroll-driven animations de CSS (soporte de navegador desparejo). El estado inicial oculto vive acá; JS solo recalcula clip-path/transform en cada scroll a partir de la posición real de la sección. */ @media (prefers-reduced-motion: no-preference) { .terapia-image { clip-path: inset(0 0 100% 0); transform: translateY(40px); will-change: clip-path, transform; } } @media (prefers-reduced-motion: reduce) { .terapia-image { clip-path: none; transform: none; } } /* ---- Reveal repetible: eyebrow/título/copy/CTA de "Terapia de pareja" y título/copy/link de "Terapia individual" comparten el mismo mecanismo y el mismo lenguaje de movimiento. El estado oculto/visible lo controla la clase "is-revealed" en el ".terapia-reveal-group" más cercano (ver main.js): se agrega al entrar ~25% en viewport y se QUITA al salir por completo, así la animación se repite en cada pasada de scroll en vez de dispararse una sola vez. El orden del stagger lo fija "--reveal-delay" inline en cada máscara. */ .terapia-reveal-mask { overflow: visible; } html.js-reveal-enabled .terapia-reveal-mask { overflow: hidden; } html.js-reveal-enabled .terapia-reveal-inner { display: inline-block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } html.js-reveal-enabled .terapia-reveal-group.is-revealed .terapia-reveal-inner { transform: translateY(0); } /* Buffer para no clipear el lift/foco del botón mientras está revelado */ html.js-reveal-enabled .terapia-reveal-mask--cta { padding: 8px; margin: -8px; } html.js-reveal-enabled .terapia-reveal-mask--cta.is-done { overflow: visible; } /* ---------- Terapia individual (sección final, antes del footer) ---------- */ .terapia-solo { background: var(--blanco); } .terapia-solo-inner { padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(56px, 8vh, 96px); } .terapia-solo-title { font-size: 1.6rem; margin: 0 0 1rem; } .terapia-solo-content p { color: var(--ink-muted); margin: 0 0 0.75rem; max-width: 60ch; } @media (min-width: 900px) { .terapia-solo-inner { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 3rem; } .terapia-solo-title { margin: 0; } } @media (min-width: 900px) { .terapia-grid { grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(48px, 6vw, 96px); } .terapia-main { order: 1; } .terapia-image-wrap { order: 2; } } /* ---------- Footer ---------- */ .site-footer { background: var(--verde-oscuro); color: var(--on-dark); } .footer-inner { padding-top: 4rem; padding-bottom: 2rem; } .footer-main { display: flex; flex-direction: column; gap: 2.5rem; justify-content: space-between; } .footer-logo { height: 34px; width: auto; margin-bottom: 1.1rem; } .footer-email { display: inline-block; color: #fff; opacity: 0.88; text-decoration: none; margin-bottom: 1.1rem; } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; } .footer-social a:hover { background: rgba(255, 255, 255, 0.12); } .footer-links h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; margin-bottom: 1rem; font-weight: 700; } .footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .footer-links a { color: #fff; opacity: 0.88; text-decoration: none; } .footer-links a:hover { opacity: 1; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.85rem; opacity: 0.7; } @media (min-width: 700px) { .footer-main { flex-direction: row; } } /* ---------- Botón flotante de WhatsApp ---------- */ /* Oculto por defecto (opacity/visibility, no display, para poder animar el fade-in): main.js lo revela recién después de ~300px de scroll, para no competir con el hero apenas carga la página. */ #whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; pointer-events: none; } #whatsapp-float.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } @media (prefers-reduced-motion: no-preference) { #whatsapp-float { transition: opacity 0.4s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out; } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { #whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); } } /* Más pegado a la esquina en pantallas chicas, para no comerse espacio sobre CTAs o el formulario de talleres. */ @media (max-width: 480px) { #whatsapp-float { bottom: 16px; right: 16px; } }