/* * comportamiento.css — SOLO comportamiento, cero diseno. * * Aqui no hay ni un color, ni un tamano, ni una separacion. Todo eso son * controles del panel de Elementor y el cliente tiene que poder cambiarlos. * Lo que hay aqui es lo que no se puede expresar como ajuste de widget: * ocultar las plantillas de clonado y hacer clicables los elementos. */ /* Las plantillas de punto existen para que el cliente las estilice en el editor; en el sitio publicado el JS las clona y no deben verse. */ .elementor-editor-active .carrusel-punto-plantilla { outline: 1px dashed currentColor; } body:not(.elementor-editor-active) .carrusel-punto-plantilla { display: none !important; } /* Si el JS no llego a montar (Swiper no aparecio), las plantillas se quedarian ocultas y la fila de puntos vacia. Mejor que se vean: un carrusel sin puntos es un fallo visible, no uno silencioso. */ body:not(.elementor-editor-active) .carrusel[data-carrusel-error] .carrusel-punto-plantilla { display: block !important; } .carrusel-prev, .carrusel-next, .carrusel-punto { cursor: pointer; -webkit-user-select: none; user-select: none; } .carrusel-prev:focus-visible, .carrusel-next:focus-visible, .carrusel-punto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Extremos sin loop. La opacidad es lo minimo para que se note que no responde; si el diseno del React marca el estado de otra forma, maquetalo en Elementor y sobreescribe esto desde ahi. */ .carrusel-desactivada { opacity: .35; pointer-events: none; } /* El relleno de la barra de progreso lo mueve el JS via style.width. */ .carrusel-progreso { overflow: hidden; } .carrusel-progreso-relleno { transition: width .3s ease; } /* ══ Humaniza ════════════════════════════════════════════════════ * Solo comportamiento: qué se ve según el estado, cómo se mueve y qué se * puede pulsar. Ningún color ni medida de diseño: eso vive en el panel * (y lo que no tiene control, en las formas del constructor). * Curva y duración únicas del React (tokens.css → --ease / --dur): 600 ms y * cubic-bezier(0.16, 1, 0.3, 1); 360 ms y 50 ms de escalonado en móvil. */ :root { --hz-ease: cubic-bezier(0.16, 1, 0.3, 1); --hz-dur: 600ms; --hz-stagger: 80ms; --hz-dist: 24px; } @media (max-width: 767px) { :root { --hz-dur: 360ms; --hz-stagger: 50ms; --hz-dist: 12px; } } /* Entradas al entrar en pantalla, una sola vez. Solo con JS: sin él todo se ve. */ html.js-motion .rv { transition: opacity var(--hz-dur) var(--hz-ease), transform var(--hz-dur) var(--hz-ease); transition-delay: calc(var(--rv-i, 0) * var(--hz-stagger)); } html.js-motion .rv-up:not(.is-in) { opacity: 0; transform: translateY(var(--hz-dist)); } html.js-motion .rv-fade:not(.is-in) { opacity: 0; } html.js-motion .rv-left:not(.is-in) { opacity: 0; transform: translateX(calc(var(--hz-dist) * -1)); } html.js-motion .rv-right:not(.is-in) { opacity: 0; transform: translateX(var(--hz-dist)); } html.js-motion .rv-zoom:not(.is-in) { opacity: 0; transform: scale(.96); } html.js-motion .rv-clip-up, html.js-motion .rv-clip-left { transition: clip-path calc(var(--hz-dur) * 1.5) var(--hz-ease); } html.js-motion .rv-clip-up:not(.is-in) { clip-path: inset(100% 0 0 0); } html.js-motion .rv-clip-left:not(.is-in) { clip-path: inset(0 100% 0 0); } /* Titular por líneas (Lines.jsx): cada .hz-linea sube desde su máscara. */ .rv-lines .hz-linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .rv-lines .hz-linea > span { display: inline-block; } html.js-motion .rv-lines .hz-linea > span { transition: transform calc(var(--hz-dur) * 1.5) var(--hz-ease); transition-delay: calc(250ms + var(--l, 0) * var(--hz-stagger) * 1.5); } html.js-motion .rv-lines:not(.is-in) .hz-linea > span { transform: translateY(110%); } .hz-linea-2 { --l: 1; } .hz-linea-3 { --l: 2; } @media (max-width: 767px) { .rv-lines .hz-linea, .rv-lines .hz-linea > span { display: inline; overflow: visible; } html.js-motion .rv-lines .hz-linea > span { transform: none; } } .rv-i1 { --rv-i: 1; } .rv-i2 { --rv-i: 2; } .rv-i3 { --rv-i: 3; } .rv-i4 { --rv-i: 4; } .rv-i5 { --rv-i: 5; } .rv-i6 { --rv-i: 6; } .rv-i8 { --rv-i: 8; } html.js-motion .hz-escalona > .elementor-loop-container > .e-loop-item { transition: opacity var(--hz-dur) var(--hz-ease), transform var(--hz-dur) var(--hz-ease); transition-delay: calc(var(--rv-i, 0) * var(--hz-stagger)); } html.js-motion .hz-escalona:not(.is-in) > .elementor-loop-container > .e-loop-item { opacity: 0; transform: translateY(var(--hz-dist)); } @keyframes hz-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .hz-anim-sube { animation: hz-sube var(--hz-dur) var(--hz-ease) both; } /* Utilidades de maquetación sin control nativo */ .hz-min0 { min-width: 0; } /* El último párrafo de un bloque de texto no deja margen debajo (en el React, space-y-*). */ .elementor-widget-text-editor.hz-parrafo p:last-child { margin-bottom: 0; } .e-loop-item > .hz-alto-completo { height: 100%; } .hz-oculto, [hidden].e-loop-item { display: none !important; } .hz-medio { position: relative; } .elementor-loop-container > .e-loop-item, .hz-min0 > .e-con-inner { min-width: 0; } .hz-si-vacio:has(.elementor-heading-title:empty), .hz-si-vacio:not(:has(.elementor-heading-title)) { display: none; } .hz-si-sin-items:not(:has(.e-loop-item)) { display: none !important; } .elementor-widget-icon .elementor-icon-wrapper { line-height: 0; } /* Iconos de trazo (lucide): el widget Icono rellena el SVG con su color; los de trazo se pintan con el contorno. Los de relleno no llevan stroke-linecap. */ .elementor-icon svg[stroke-linecap], .elementor-button-icon svg[stroke-linecap], .elementor-icon-list-icon svg[stroke-linecap], .e-n-accordion-item-title-icon svg[stroke-linecap] { fill: none !important; stroke: currentColor; } /* Títulos equilibrados y párrafos sin viudas (base.css del React) */ .elementor-widget-heading :is(h1, h2, h3, h4) { text-wrap: balance; } .elementor-widget-heading p, .elementor-widget-text-editor p { text-wrap: pretty; } /* Lo que se puede pulsar: la flecha de los botones se desplaza 3 px */ .hz-btn .elementor-button-icon svg, .hz-flecha-desliza svg { transition: transform var(--hz-dur) var(--hz-ease); } .hz-btn-flecha .elementor-button:hover .elementor-button-icon svg, .hz-flecha-enlace:hover .hz-flecha-desliza svg { transform: translateX(3px); } .hz-volver:hover .hz-flecha-desliza svg { transform: translateX(-3px); } .hz-btn .elementor-button:active { transform: translateY(1px); } .hz-mm-boton, .hz-mm-cerrar, .hz-wa-abrir, .hz-wa-cerrar, .hz-interes, .hz-punto-boton { cursor: pointer; -webkit-user-select: none; user-select: none; } .hz-tarjeta-hover, .hz-zoom, .hz-lift { transition-timing-function: var(--hz-ease) !important; } /* Icono que sube 2 px al pasar el ratón por su ítem («¿Qué encontrarás en RIBEA?»). */ .hz-sube-ico .elementor-icon { transition: transform var(--hz-dur) var(--hz-ease); } .hz-sube-ico:hover .elementor-icon { transform: translateY(-2px); } /* «Psicología Positiva · Educación Emocional · Neurociencias»: en móvil, una por línea y sin puntos. */ @media (max-width: 767px) { .hz-tres-lineas .hz-sep { display: none; } .hz-tres-lineas .hz-l { display: block; } } /* Carrusel móvil de los pilares (MobileSlider.jsx): una tarjeta por vista con el borde de la siguiente asomando; desde tablet vuelve a ser la rejilla nativa. */ @media (max-width: 767px) { .hz-slider { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 84% !important; grid-template-columns: none !important; grid-template-rows: none !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 8px 16px 16px !important; margin-inline: -16px; scrollbar-width: none; } .hz-slider::-webkit-scrollbar { display: none; } .hz-slider > * { scroll-snap-align: start; scroll-snap-stop: always; } } .hz-puntos { display: none; } @media (max-width: 767px) { .hz-puntos { display: flex; justify-content: center; gap: 4px; margin-top: 8px; } } .hz-punto-boton { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; } /* El tema base pinta los