/* ========================================================================= BS Motion — estados iniciales. REGLA CRÍTICA: todo vive bajo html.bs-motion-ready (clase que pone el JS del antes de pintar). Sin JS, con JS bloqueado o con prefers-reduced-motion, NADA de esto aplica: la web se ve exactamente igual que sin el plugin. Los selectores son de COMPONENTE (ids compartidos por toda la web), por eso el estado inicial ya está en el CSS y no hay parpadeo. ========================================================================= */ /* ---------- fade-up: secciones de contenido ---------- */ html.bs-motion-ready .elementor-element-6973c4e, /* landing: intro */ html.bs-motion-ready .elementor-element-97dab96, /* landing: ¿en qué consiste? */ html.bs-motion-ready .elementor-element-c78c735, /* landing: evolución */ html.bs-motion-ready .elementor-element-e7be664, /* home: belleza que respeta */ html.bs-motion-ready .elementor-element-e16318b, /* home: un método */ html.bs-motion-ready .elementor-element-5ef014e, /* home: bio */ html.bs-motion-ready .elementor-element-c73b135, /* home: manifiesto */ html.bs-motion-ready .elementor-element-f601063, /* home: testimonios */ html.bs-motion-ready .elementor-element-eddb07c { /* home: clínica */ opacity: 0; transform: translateY(24px); } /* ---------- home: hero con vídeo (antetítulo, subtítulo y CTA) ---------- */ html.bs-motion-ready .bs-hero-antetitulo, html.bs-motion-ready .bs-hero-sub, html.bs-motion-ready .elementor-element-2395968 { opacity: 0; transform: translateY(24px); } /* El H1 puede ser el elemento LCP: solo opacidad, sin desplazamiento. */ html.bs-motion-ready .elementor-element-7b2f264, html.bs-motion-ready .bs-hero-pie { opacity: 0; } /* ---------- fade-up escalonado: hero (subtítulo y CTA) ---------- */ html.bs-motion-ready .elementor-element-de0a4bb, html.bs-motion-ready .elementor-element-42fe5aa, html.bs-motion-ready .elementor-element-1c5c86c, html.bs-motion-ready .elementor-element-6ddcdac { opacity: 0; transform: translateY(24px); } /* ---------- stagger: rejillas (hijos en cascada) ---------- */ html.bs-motion-ready .elementor-element-87c9d60 > .e-con-inner > .e-con, html.bs-motion-ready .elementor-element-87c9d60 > .e-con, html.bs-motion-ready .elementor-element-e3ec09e > .e-con-inner > .e-con, html.bs-motion-ready .elementor-element-e3ec09e > .e-con { opacity: 0; transform: translateY(24px); } /* ---------- image-reveal: imágenes de contenido ---------- */ html.bs-motion-ready .elementor-element-6973c4e .elementor-widget-image .elementor-widget-container, html.bs-motion-ready .elementor-element-97dab96 .elementor-widget-image .elementor-widget-container, html.bs-motion-ready .elementor-element-5ef014e .elementor-widget-image .elementor-widget-container { clip-path: inset(0 0 100% 0); } html.bs-motion-ready .elementor-element-6973c4e .elementor-widget-image img, html.bs-motion-ready .elementor-element-97dab96 .elementor-widget-image img, html.bs-motion-ready .elementor-element-5ef014e .elementor-widget-image img { /* GSAP 3.13 anima la propiedad CSS independiente "scale", no el shorthand "transform". Se usa la independiente para que el tween realmente la mueva (ver hallazgo fase 2). */ scale: 1.06; } /* ========================================================================= PROPAGACIÓN (Tanda 3, fase 2) — hub, Beauty Coach, Clínica y CTA de landings. Mismo principio: todo bajo html.bs-motion-ready, nada de opacity:0 fuera de esa clase. ========================================================================= */ /* ---------- Landings: CTA final (id común a las 40) ---------- */ html.bs-motion-ready .elementor-element-3463b9a { opacity: 0; transform: translateY(24px); } /* ---------- Hub / Tratamiento (1561) ---------- */ html.bs-motion-ready .bs-portada-contenido > p, html.bs-motion-ready .bs-portada-contenido .bs-boton, html.bs-motion-ready .bs-categoria-cabecera, html.bs-motion-ready .bs-cta-final-interior { opacity: 0; transform: translateY(24px); } /* ---------- Beauty Coach (1634) ---------- */ html.bs-motion-ready .bc-redesign .hero .eyebrow, html.bs-motion-ready .bc-redesign .hero-copy > p, html.bs-motion-ready .bc-redesign .hero-actions, html.bs-motion-ready .bc-redesign section.wrap.intro, html.bs-motion-ready .bc-redesign .options .section-head, html.bs-motion-ready .bc-redesign .quote blockquote, html.bs-motion-ready .bc-redesign .quote p, html.bs-motion-ready .bc-redesign section.cta { opacity: 0; transform: translateY(24px); } html.bs-motion-ready .bc-redesign .trust > div, html.bs-motion-ready .bc-redesign .cards > .card { opacity: 0; transform: translateY(24px); } html.bs-motion-ready .bc-redesign .intro-visual { clip-path: inset(0 0 100% 0); } html.bs-motion-ready .bc-redesign .intro-visual img { scale: 1.06; } /* ---------- Clínica (1676) ---------- */ html.bs-motion-ready .elementor-element-9a8b62c, html.bs-motion-ready .elementor-element-f94dbeb, html.bs-motion-ready .elementor-element-f601003, html.bs-motion-ready .elementor-element-f601005, html.bs-motion-ready .elementor-element-f60103f { opacity: 0; transform: translateY(24px); } /* .elementor-element-f601004 (titular del metodo) usa reveal-text: el propio motor pone el bloque en opacity:1 y separa/oculta cada palabra por JS en tiempo real, por eso aqui NO lleva opacity:0 — sin JS el titular se ve normal, entero, legible. */ html.bs-motion-ready .elementor-element-f601022 > .e-con-inner > .e-con, html.bs-motion-ready .elementor-element-f601022 > .e-con { opacity: 0; transform: translateY(24px); } html.bs-motion-ready .elementor-element-3cdfa12 .elementor-widget-container { clip-path: inset(0 0 100% 0); } html.bs-motion-ready .elementor-element-3cdfa12 img { scale: 1.06; } /* ========================================================================= EQUIPO DE CLÍNICA — baraja en cascada. La clase .bs-equipo-deck la pone el JS, y solo en escritorio y solo si la sección cabe en pantalla. Sin JS, con reduced-motion o con el interruptor apagado, nada de esto aplica: queda la rejilla de siempre. ========================================================================= */ .equipo-grid.bs-equipo-deck { --bs-deck-foto: clamp(260px, 58vh, 600px); display: block !important; position: relative; } .equipo-grid.bs-equipo-deck .equipo-card { position: absolute; top: 0; left: 0; right: 0; /* El ancho se deriva de la altura de la foto para que siga siendo vertical (4:5) aunque el guardia de altura recorte la foto en pantallas bajas. */ width: min(430px, calc(var(--bs-deck-foto) * 0.8)); margin-inline: auto; transform-origin: 50% 26%; will-change: transform, opacity; backface-visibility: hidden; } /* Sombra sutil: da cuerpo al apilado sin marcar una caja. La altura va en el contenedor: la imagen del equipo trae height:100%!important desde el CSS de la página y no se deja gobernar directamente. */ .bs-equipo-deck .equipo-foto { height: var(--bs-deck-foto); box-shadow: 0 22px 48px -26px rgba(24, 21, 19, .34); } .bs-equipo-deck .equipo-foto img { min-height: 0 !important; height: 100% !important; } /* Mientras la sección está fijada: texto e imágenes centrados vertical y horizontalmente, como un bloque, en vez de pegados a los extremos. */ .bs-equipo-escena { position: relative; } .equipo-seccion.bs-equipo-pin { position: sticky; top: var(--bs-cab, 0px); height: calc(100vh - var(--bs-cab, 0px)); align-items: center !important; justify-content: center !important; gap: clamp(40px, 5vw, 90px); } .equipo-seccion.bs-equipo-pin .equipo-intro { position: static !important; /* la página fuerza align-self:flex-start; aquí manda el centrado */ align-self: center !important; flex: 0 1 460px; } .equipo-seccion.bs-equipo-pin .bs-equipo-col { align-self: center !important; } /* La columna del mazo se ciñe a la tarjeta: si no, ocupa todo el ancho libre y la imagen queda descolgada en el extremo derecho. */ .equipo-seccion.bs-equipo-pin .bs-equipo-col { flex: 0 0 auto; width: auto; } .equipo-grid.bs-equipo-deck { width: min(430px, calc(var(--bs-deck-foto) * 0.8)); margin-inline: auto; } /* Aviso discreto de que la ficha se abre al pulsar: sobre la foto, abajo a la derecha */ .bs-equipo-pista { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 6px 11px; border-radius: 2px; background: rgba(247, 241, 237, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #6F6965; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1; white-space: nowrap; pointer-events: none; /* el clic lo gestiona la tarjeta entera */ transition: color .3s ease, background .3s ease; } .equipo-card:hover .bs-equipo-pista { background: rgba(247, 241, 237, .96); color: #9B513C; } /* ========================================================================= HOME — CARRUSEL DE SERVICIOS (coverflow). La clase .bs-cover la pone el JS. Sin JS, con reduced-motion o con el interruptor apagado NADA de esto aplica: queda la fila con scroll horizontal nativo de la página, con las 8 tarjetas visibles y accesibles. ========================================================================= */ .servicios-carrusel.bs-cover { position: relative; display: block !important; overflow: hidden !important; overflow-x: hidden !important; scroll-snap-type: none !important; touch-action: pan-y; /* el scroll vertical del móvil manda */ cursor: grab; /* Al arrastrar no debe seleccionarse el texto de las tarjetas: además de verse mal, la selección se quedaba con el gesto y el carrusel se bloqueaba. */ -webkit-user-select: none; user-select: none; } .servicios-carrusel.bs-cover:active { cursor: grabbing; } .bs-cover .servicio-card { position: absolute !important; /* separadas del borde superior: si no, la elevación del hover se recorta */ top: var(--bs-cover-aire, 18px); left: 50%; margin-left: calc(var(--bs-cover-ancho, 390px) / -2); width: var(--bs-cover-ancho, 390px) !important; /* El CSS del sitio pide width:76vw en movil pero lo recorta con max-width:310px, y ese techo era el que dejaba a las vecinas justo fuera de pantalla: a 390px de viewport la tarjeta seguia midiendo 310 y no asomaba nada por los lados. Aqui manda el ancho que calcula medir(), asi que se retira el tope. */ max-width: none !important; /* todas a la misma altura: así ninguna queda más arriba o más abajo */ height: var(--bs-cover-alto, auto); min-width: 0 !important; min-height: 0 !important; flex: none !important; will-change: transform, opacity; transition: none !important; /* manda GSAP, no las transiciones del tema */ } /* ---- maqueta interna de la tarjeta ---- El boton "VER MAS" es el elemento critico: no puede quedar fuera pase lo que pase con la longitud del texto. Se ancla abajo (margin-top:auto) y el texto se acomoda en lo que queda; ademas titulo y subtitulo se limitan a dos lineas en movil, de modo que la altura del contenido tiene un tope y no puede crecer por encima de la altura comun que se impone a las 8 tarjetas. */ .bs-cover .servicio-card { /* CLAVE: las tarjetas vienen de Elementor con flex-wrap:wrap. En un contenedor en columna y con altura fija, el contenido que no cabe NO desborda hacia abajo: abre una segunda columna y empuja el ultimo hijo -el boton- fuera de la tarjeta por la derecha, donde overflow:hidden lo hace desaparecer. Eso es lo que dejaba sin "VER MAS" a las tarjetas de subtitulo mas largo. */ flex-wrap: nowrap !important; } .bs-cover .servicio-card > * { min-height: 0; } .bs-cover .servicio-card > *:last-child { margin-top: auto !important; flex: 0 0 auto !important; } @media (max-width: 767px) { /* 1px menos de cuerpo y el interlineado algo mas corto: se prueba esto antes de recortar, y con ello los subtitulos largos entran en dos lineas. */ .bs-cover .servicio-card p { font-size: 12px !important; line-height: 1.45 !important; } .bs-cover .servicio-card p, .bs-cover .servicio-card h1, .bs-cover .servicio-card h2, .bs-cover .servicio-card h3, .bs-cover .servicio-card h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* aire entre el boton y el borde inferior */ .bs-cover .servicio-card { padding-bottom: 20px !important; } } /* la central se lee con un punto más de presencia */ .bs-cover .servicio-card.es-central { box-shadow: 0 26px 60px -30px rgba(24, 21, 19, .45); } /* Elevación suave al pasar el ratón (la sombra va en CSS; el movimiento lo aplica el propio carrusel junto al resto del transform, para no pisarse) */ .bs-cover .servicio-card { transition: box-shadow .45s cubic-bezier(.16, 1, .3, 1); } .bs-cover .servicio-card.es-hover { box-shadow: 0 30px 64px -28px rgba(24, 21, 19, .55); } /* Indicador de progreso: abajo y centrado, dentro del propio carrusel */ .bs-cover-progreso { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; } .bs-cover-barra { display: block; width: min(190px, 34vw); height: 1px; background: rgba(24, 21, 19, .14); } .bs-cover-barra i { display: block; height: 100%; background: #9B513C; transform-origin: left center; transform: scaleX(.125); } .bs-cover-contador { color: #6F6965; font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .1em; font-variant-numeric: tabular-nums; } /* ========================================================================= CARRUSEL DE LOGOS DE MEDIOS — cinta continua. La estructura la crea el JS; sin JS se queda el widget original de Elementor, con los logos visibles. Aquí no se oculta nada en ningún caso. ========================================================================= */ .bs-logos { width: 100%; overflow: hidden; } .bs-logos-pista { display: flex; align-items: center; gap: var(--bs-logo-gap, 99px); width: max-content; will-change: transform; } .bs-logos-item { flex: 0 0 var(--bs-logo-ancho, 119px); } .bs-logos-item img { display: block; width: 100%; height: auto; } /* Sin movimiento: los logos se reparten en filas, todos visibles */ .bs-logos--estatico .bs-logos-pista { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 30px; } /* ---------- Ficha ampliada (modal del equipo) ---------- Los originales del equipo son pequeños (467x700 el menor), y la ficha los estiraba a pantalla completa con object-fit:cover: se ampliaban ~2x y se veían blandos. Aquí se muestran a su tamaño real, centrados y sin recortar. */ #equipo-modal-global .equipo-modal__visual { display: grid; place-items: center; background: #EDE7E2; } #equipo-modal-global .equipo-modal__imagen { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* Indicador de progreso (lo inyecta el JS; sin JS no existe) */ .bs-deck-pasos { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; gap: 9px; justify-content: center; } .bs-deck-punto { width: 6px; height: 6px; border-radius: 50%; background: rgba(24, 21, 19, .17); transition: background .35s ease, transform .35s ease; } .bs-deck-punto.es-activa { background: #9B513C; transform: scale(1.4); } /* ---------- Tablet y móvil: lista vertical, sin baraja ni pin ---------- */ @media (max-width: 1023px) { .equipo-grid { grid-template-columns: 1fr !important; } .equipo-grid .equipo-card { width: 100%; max-width: 460px; margin-inline: auto; } /* Estado inicial del fade-up escalonado (solo bajo la clase del sistema) */ html.bs-motion-ready .equipo-card { opacity: 0; transform: translateY(24px); } } html.bs-motion-ready .bs-cabecera-tarjetas { opacity: 0; transform: translateY(24px); } /* ---------- Cifras de la home ---------- El bloque entra con fade-up y las dos cifras escalonadas entre sí. El número NUNCA se oculta: sin JS muestra su valor final. */ html.bs-motion-ready .bs-cifras, html.bs-motion-ready .bs-cifra { opacity: 0; transform: translateY(24px); } /* ---------- Testimonios de la home (bloque editorial) ---------- */ /* Los data-anim van en el propio HTML del bloque; aqui solo el estado inicial. OJO: la frase destacada usa reveal-text (SplitText separa palabras en runtime), por eso NO lleva opacity:0 — sin JS se lee entera y normal. */ html.bs-motion-ready .bs-testi { opacity: 0; transform: translateY(24px); } html.bs-motion-ready .bs-testi-foto { clip-path: inset(0 0 100% 0); } html.bs-motion-ready .bs-testi-foto img { scale: 1.06; } /* ---------- Red de seguridad ---------- */ /* Si por lo que sea el JS no llega a animar en 3s, se muestra todo igualmente. */ html.bs-motion-ready.bs-motion-failsafe [class*="elementor-element-"], html.bs-motion-ready.bs-motion-failsafe [class*="elementor-element-"] img, html.bs-motion-ready.bs-motion-failsafe .bs-portada-contenido > p, html.bs-motion-ready.bs-motion-failsafe .bs-portada-contenido .bs-boton, html.bs-motion-ready.bs-motion-failsafe .bs-categoria-cabecera, html.bs-motion-ready.bs-motion-failsafe .bs-hero-antetitulo, html.bs-motion-ready.bs-motion-failsafe .bs-hero-sub, html.bs-motion-ready.bs-motion-failsafe .bs-hero-pie, html.bs-motion-ready.bs-motion-failsafe .bs-cabecera-tarjetas, html.bs-motion-ready.bs-motion-failsafe .bs-cifras, html.bs-motion-ready.bs-motion-failsafe .bs-cifra, html.bs-motion-ready.bs-motion-failsafe .bs-testi, html.bs-motion-ready.bs-motion-failsafe .bs-testi-foto, html.bs-motion-ready.bs-motion-failsafe .bs-testi-foto img, html.bs-motion-ready.bs-motion-failsafe .bs-cta-final-interior, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .hero .eyebrow, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .hero-copy > p, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .hero-actions, html.bs-motion-ready.bs-motion-failsafe .bc-redesign section.wrap.intro, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .options .section-head, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .quote blockquote, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .quote p, html.bs-motion-ready.bs-motion-failsafe .bc-redesign section.cta, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .trust > div, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .cards > .card, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .intro-visual, html.bs-motion-ready.bs-motion-failsafe .bc-redesign .intro-visual img { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; } @media (prefers-reduced-motion: reduce) { html.bs-motion-ready [class*="elementor-element-"], html.bs-motion-ready [class*="elementor-element-"] img, html.bs-motion-ready .bs-portada-contenido > p, html.bs-motion-ready .bs-portada-contenido .bs-boton, html.bs-motion-ready .bs-categoria-cabecera, html.bs-motion-ready .bs-hero-antetitulo, html.bs-motion-ready .bs-hero-sub, html.bs-motion-ready .bs-hero-pie, html.bs-motion-ready .bs-cabecera-tarjetas, html.bs-motion-ready .bs-cifras, html.bs-motion-ready .bs-cifra, html.bs-motion-ready .bs-testi, html.bs-motion-ready .bs-testi-foto, html.bs-motion-ready .bs-testi-foto img, html.bs-motion-ready .bs-cta-final-interior, html.bs-motion-ready .bc-redesign .hero .eyebrow, html.bs-motion-ready .bc-redesign .hero-copy > p, html.bs-motion-ready .bc-redesign .hero-actions, html.bs-motion-ready .bc-redesign section.wrap.intro, html.bs-motion-ready .bc-redesign .options .section-head, html.bs-motion-ready .bc-redesign .quote blockquote, html.bs-motion-ready .bc-redesign .quote p, html.bs-motion-ready .bc-redesign section.cta, html.bs-motion-ready .bc-redesign .trust > div, html.bs-motion-ready .bc-redesign .cards > .card, html.bs-motion-ready .bc-redesign .intro-visual, html.bs-motion-ready .bc-redesign .intro-visual img { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; } } /* Elementor aplica una transition genérica a transform en sus contenedores; se solapa con GSAP y ablanda el movimiento. Mientras hay motion, manda GSAP. */ html.bs-motion-ready [data-anim], html.bs-motion-ready .elementor-element-6973c4e, html.bs-motion-ready .elementor-element-97dab96, html.bs-motion-ready .elementor-element-c78c735, html.bs-motion-ready .elementor-element-e7be664, html.bs-motion-ready .elementor-element-e16318b, html.bs-motion-ready .elementor-element-5ef014e, html.bs-motion-ready .elementor-element-c73b135, html.bs-motion-ready .elementor-element-f601063, html.bs-motion-ready .elementor-element-eddb07c, html.bs-motion-ready .elementor-element-6ddcdac, html.bs-motion-ready .elementor-element-87c9d60 > .e-con-inner > .e-con, html.bs-motion-ready .elementor-element-87c9d60 > .e-con, html.bs-motion-ready .elementor-element-e3ec09e > .e-con-inner > .e-con, html.bs-motion-ready .elementor-element-e3ec09e > .e-con, html.bs-motion-ready .elementor-element-f60105b { transition: none !important; }