/*
 * Capa premium de las plantillas (body.hww-premium). Solo CSS, sin JS ni librerías, y sin tocar el marcado:
 * se engancha a las clases hwx-* que pone el motor y a las animaciones de entrada nativas de Elementor.
 *
 * 1. Entradas con más oficio: las fadeInUp / fadeIn / zoomIn de Elementor pasan a subir con desenfoque, y las
 *    fotos se destapan desde un recorte rectangular. Se sustituye la animación, no se añade otra encima.
 * 2. Movimiento ligado al scroll (animation-timeline): las fotos se desplazan dentro de su marco (object-position,
 *    así no se salen ni rompen esquinas), el fondo de la portada baja más despacio y su texto se aleja al salir.
 * 3. Fotos menos cuadradas: marco desplazado detrás de la foto de los bloques a dos columnas, grano fino sobre la
 *    portada y sombra larga en las fotos superpuestas.
 * 4. Tarjetas que se levantan, transición suave entre páginas.
 *
 * Las webs con perfil de movimiento (body.hwm, assets/movimiento.css|js) usan su propio movimiento al scroll; aquí
 * solo queda para las que no lo tienen.
 * Reglas de MOTION.md: lo ligado al scroll va dentro de @supports + prefers-reduced-motion + fuera del editor; se
 * animan scale/translate sueltos (no transform) para sumarse al hover. Sin soporte o con movimiento reducido, la web
 * queda como sin esta capa.
 */

/* ── 3. Fotos menos cuadradas (estático) ─────────────────────────────────────────────────────────────────────── */
.hww-premium .hwx-split-media{isolation:isolate}
.hww-premium .hwx-split-media::before{
	content:"";position:absolute;z-index:-1;pointer-events:none;
	inset:34px -26px -26px 34px;
	border:1px solid color-mix(in srgb,var(--a) 60%,transparent);
	border-radius:var(--r);
}
.hww-premium .hwx-split-media:has(> .hwx-flota[class*="elementor-widget"]:not(:first-child))::before{inset:34px 34px -26px -26px}
.hww-premium .hwx-flota img{box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 12px 24px -12px rgba(0,0,0,.25)}

/* Grano fino sobre la portada: las fotos dejan de verse «de banco». Encima de todo, sin capturar clics. */
.hww-premium .hwx-hero::after,.hww-premium .hwx-band::after,.hww-premium .hwx-cab-pag.hwx-hero-dark::after{
	content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hww-premium .hwx-band{position:relative}

/* Mosaico: velo suave al pasar por encima, la foto respira. */
.hww-premium .hwx-tesela::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));opacity:0;transition:opacity .6s var(--ease)}
.hww-premium .hwx-tesela:hover::after{opacity:1}
.hww-premium .hwx-tesela img{transition:transform 1.4s var(--ease),scale 1.4s var(--ease)}

/* Tarjetas que se levantan (translate suelto: se suma a la animación de entrada). */
.hww-premium .hwx-tarjeta{transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.hww-premium .hwx-tarjeta:hover{translate:0 -6px;box-shadow:0 28px 50px -28px rgba(0,0,0,.35)}

/* Botones: un punto de vida al pasar. */
.hww-premium .hwx-btn .elementor-button{transition:translate .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s}
.hww-premium .hwx-btn .elementor-button:hover{translate:0 -2px;box-shadow:0 14px 26px -14px rgba(0,0,0,.45)}

/* ── 1. Entradas con más oficio (sustituyen a las de Elementor) ──────────────────────────────────────────────── */
@keyframes hwp-sube{from{opacity:0;translate:0 24px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes hwp-aparece{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes hwp-destapa{from{opacity:.001;clip-path:inset(14% 10% 14% 10%)}to{opacity:1;clip-path:inset(0)}}
@keyframes hwp-acerca{from{scale:1.16}to{scale:1}}

@media (prefers-reduced-motion:no-preference){
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.fadeInUp,
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.zoomIn{
		animation-name:hwp-sube;animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
	body.hww-premium:not(.elementor-editor-active) .elementor-element.animated.fadeIn{
		animation-name:hwp-aparece;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
	/* Las fotos (teselas del mosaico, imágenes sueltas que entran) se destapan y se acercan a la vez. */
	body.hww-premium:not(.elementor-editor-active) .hwx-tesela.animated,
	body.hww-premium:not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota){
		animation-name:hwp-destapa;animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.15,1)}
	body.hww-premium:not(.elementor-editor-active) .hwx-tesela.animated img,
	body.hww-premium:not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota) img{
		animation:hwp-acerca 1.2s cubic-bezier(.2,.75,.15,1) both;animation-delay:inherit}
	/* La foto superpuesta llega flotando, más tarde. */
	body.hww-premium:not(.elementor-editor-active) .hwx-flota.animated{animation-name:hwp-sube;animation-duration:.8s}

	/* Transición suave entre páginas de la misma web (las demos son varias páginas). */
	@view-transition{navigation:auto}
	::view-transition-old(root){animation:.25s cubic-bezier(.4,0,1,1) both hwp-vt-sale}
	::view-transition-new(root){animation:.5s cubic-bezier(.2,.8,.2,1) .06s both hwp-vt-entra}
}
@keyframes hwp-vt-sale{to{opacity:0}}
@keyframes hwp-vt-entra{from{opacity:0;translate:0 16px}}

/* ── 2. Movimiento ligado al scroll ─────────────────────────────────────────────────────────────────────────── */
@keyframes hwp-paralaje{from{object-position:50% 18%}to{object-position:50% 82%}}
@keyframes hwp-fondo{from{background-position-y:50%}to{background-position-y:85%}}
@keyframes hwp-aleja{to{translate:0 -70px;opacity:.15}}
@keyframes hwp-flota{from{translate:0 40px}to{translate:0 -40px}}
@keyframes hwp-marco{from{translate:-14px -14px}to{translate:10px 10px}}

@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		/* Cada foto recortada (object-fit: cover) se desliza dentro de su marco al cruzar la pantalla. En las
		   fotos sin recorte object-position no hace nada, así que no hace falta distinguirlas. */
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .elementor-widget-image:not(.hwx-flota) img{
			animation:hwp-paralaje linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
		/* …salvo mientras se destapa al entrar: primero la entrada, luego el desplazamiento. */
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .hwx-tesela.animated img,
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .elementor-widget-image.animated:not(.hwx-flota) img{
			animation:hwp-acerca 1.2s cubic-bezier(.2,.75,.15,1) both,hwp-paralaje linear both;
			animation-timeline:auto,view();animation-range:normal,cover 0% cover 100%}

		/* Portada con foto fija de fondo: la foto baja más despacio que la página y el texto se aleja al salir. */
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .hwx-hero:not(:has(.elementor-background-video-container,.elementor-background-slideshow)){
			animation:hwp-fondo linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .hwx-hero.hwx-hero-dark > .e-con-inner{
			animation:hwp-aleja linear both;animation-timeline:view();animation-range:exit 5% exit 90%}

		/* La foto superpuesta va a otro ritmo que la principal, y el marco desplazado se mueve un poco. */
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .hwx-flota .elementor-widget-container{
			animation:hwp-flota linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
		body.hww-premium:not(.hwm):not(.elementor-editor-active) .hwx-split-media::before{
			animation:hwp-marco linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
	}
}

@media (max-width:767px){
	.hww-premium .hwx-split-media::before{inset:22px -12px -14px 22px}
	.hww-premium .hwx-split-media:has(> .hwx-flota[class*="elementor-widget"]:not(:first-child))::before{inset:22px 22px -14px -12px}
}
@media (prefers-reduced-motion:reduce){
	.hww-premium .hwx-tarjeta,.hww-premium .hwx-btn .elementor-button,.hww-premium .hwx-tesela img{transition:none}
}

/* ══ Estilos de la tanda de 50 (N0, 10/11/2026) ═════════════════════════════════════════════════════════════════════
   Una plantilla activa uno con `estilo: '<nombre>'` en su ficha (plantillas/estilos.mjs): class-tema.php pone
   `hww-est-<nombre>` en el body. Solo cambian el trato (filetes, bordes, sombras, esquinas, fotos, rótulos); los colores
   y las fuentes siguen siendo los de la plantilla. Cada estilo se apoya en los tokens --p --a --bg --surface --soft
   --ink --mut --line --r, así que vale con cualquier paleta. */

/* 1. oscuro con dorado contenido: filetes finos del acento, nada de sombras, botones rectos con borde */
.hww-est-oscuro-dorado .hwx-tarjeta,.hww-est-oscuro-dorado .hwx-plan,.hww-est-oscuro-dorado .hwc-pl,.hww-est-oscuro-dorado .hwx-celda,.hww-est-oscuro-dorado .hwh-celda,.hww-est-oscuro-dorado .hwx-prog-libro{border:1px solid color-mix(in srgb,var(--a) 42%,transparent);box-shadow:none}
.hww-est-oscuro-dorado .hwx-btn .elementor-button{border:1px solid var(--a);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;box-shadow:none}
.hww-est-oscuro-dorado .elementor-widget-heading:not(.hwx-num) p.elementor-heading-title{letter-spacing:.28em}
.hww-est-oscuro-dorado .hwx-fase,.hww-est-oscuro-dorado .hwx-ficha-dl,.hww-est-oscuro-dorado .hwx-ficha-dl>div{border-color:color-mix(in srgb,var(--a) 40%,transparent)}
.hww-est-oscuro-dorado .elementor-widget-image img{filter:saturate(.9) contrast(1.04)}
.hww-est-oscuro-dorado .hwx-split-media::before{border-color:color-mix(in srgb,var(--a) 75%,transparent)}
.hww-est-oscuro-dorado .elementor-widget-divider{--divider-color:var(--a)}

/* 2. monocromo: blanco y negro y un solo acento (las fotos pierden el color y lo recuperan al pasar) */
.hww-est-monocromo .elementor-widget-image img,.hww-est-monocromo .hwc-ds-foto img,.hww-est-monocromo .hwc-lado img{filter:grayscale(1) contrast(1.06);transition:filter .6s var(--ease)}
.hww-est-monocromo .elementor-widget-image:hover img,.hww-est-monocromo .hwc-ds:hover img{filter:grayscale(0) contrast(1)}
/* heroeDatos.fotoColor (heroes.mjs): el héroe que lo pide deja sus fotos en color. */
.hww-est-monocromo .hwh-color .elementor-widget-image img{filter:none}
.hww-est-monocromo .hwx-tarjeta,.hww-est-monocromo .hwx-plan,.hww-est-monocromo .hwh-celda{border:1px solid var(--ink);box-shadow:none;border-radius:0}
.hww-est-monocromo .hwx-btn .elementor-button{border-radius:0;box-shadow:none}
/* p50 · N2: la destacada del monocromo conserva el color de la plantilla (antes, tinta a la fuerza: tapaba el color y el
   texto calculado para el primary se quedaba sin contraste). Solo se le quita el borde de tinta. */
.hww-est-monocromo .hwx-plan-dest{border-color:transparent}
.hww-est-monocromo .hwx-fase::before,.hww-est-monocromo .hwx-ruta-ol li::before{background:var(--a)}

/* 3. suizo: rejilla dura, esquinas rectas, rótulos pequeños apretados */
.hww-est-suizo .e-con,.hww-est-suizo .elementor-widget-image img,.hww-est-suizo .hwx-btn .elementor-button{border-radius:0!important}
/* El titular de portada (h1) toma el tracking y el interlineado de la ficha (heroLs/heroLh → --hw-h1-ls/--hw-h1-lh, HWW_Tema::tokens_css) si los pide; si no, los del suizo. */
.hww-est-suizo .elementor-widget-heading h1.elementor-heading-title{letter-spacing:var(--hw-h1-ls,-.035em)!important;line-height:var(--hw-h1-lh,.98)!important}
.hww-est-suizo .elementor-widget-heading h2.elementor-heading-title{letter-spacing:-.035em!important;line-height:.98!important}
.hww-est-suizo .elementor-widget-heading:not(.hwx-num):not(.hwx-cifras .elementor-widget-heading) p.elementor-heading-title{font-size:.75rem!important;letter-spacing:.2em;font-weight:700} /* N1: 12 px como mínimo; las cifras (hwx-cifras, también las del héroe) no se encogen */
.hww-est-suizo .hwx-tarjeta,.hww-est-suizo .hwx-plan,.hww-est-suizo .hwh-celda,.hww-est-suizo .hwx-persona{border-top:3px solid var(--ink);border-radius:0;box-shadow:none}
.hww-est-suizo .hwx-rasgos .hwx-rasgo,.hww-est-suizo .hwx-fase{border-top:3px solid var(--ink)}
.hww-est-suizo .hwx-split-media::before{display:none}
.hww-est-suizo .hwx-btn .elementor-button{box-shadow:none}

/* 4. brutalista: bordes gruesos, sombra dura sin desenfoque, mayúsculas */
.hww-est-brutalista .elementor-widget-heading h1.elementor-heading-title,.hww-est-brutalista .elementor-widget-heading h2.elementor-heading-title{text-transform:uppercase;letter-spacing:-.01em!important}
.hww-est-brutalista .e-con,.hww-est-brutalista .elementor-widget-image img,.hww-est-brutalista .hwx-btn .elementor-button{border-radius:0!important}
.hww-est-brutalista .elementor-widget-image img{border:3px solid var(--ink)}
.hww-est-brutalista .hwx-tarjeta,.hww-est-brutalista .hwx-plan,.hww-est-brutalista .hwh-celda,.hww-est-brutalista .hwx-prog-libro,.hww-est-brutalista .hwx-persona .elementor-widget-image{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.hww-est-brutalista .hwx-btn .elementor-button{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;font-weight:800;transition:translate .15s,box-shadow .15s}
.hww-est-brutalista .hwx-btn .elementor-button:hover{translate:3px 3px;box-shadow:2px 2px 0 var(--ink)}
.hww-est-brutalista .hwx-split-media::before{border:3px solid var(--ink);border-radius:0}
.hww-est-brutalista .hwx-ficha-dl{border-top-width:4px}

/* 5. japonés minimalista: aire, filetes finísimos, fotos suaves y nada de sombras */
.hww-est-japones .elementor-widget-image img{filter:saturate(.82) brightness(1.03)}
.hww-est-japones .hwx-tarjeta,.hww-est-japones .hwx-plan,.hww-est-japones .hwh-celda,.hww-est-japones .hwx-prog-libro{box-shadow:none;border:1px solid var(--line);border-radius:0}
.hww-est-japones .elementor-widget-heading:not(.hwx-num) p.elementor-heading-title{letter-spacing:.42em;font-weight:500}
.hww-est-japones .elementor-widget-heading h1.elementor-heading-title,.hww-est-japones .elementor-widget-heading h2.elementor-heading-title{font-weight:500;letter-spacing:.02em!important}
/* p50 · N2: el japonés solo cambia la forma y la letra de los botones; cada botón conserva su fondo y su color (antes todos
   quedaban transparentes y de color tinta, y en las portadas oscuras o con foto no se veían). */
.hww-est-japones .hwx-btn .elementor-button{border-radius:0;box-shadow:none;letter-spacing:.2em;font-size:.78rem}
.hww-est-japones .hwx-split-media::before{display:none}
.hww-est-japones .hwx-flota img{box-shadow:none}

/* 6. mediterráneo de azulejo: marco doble en las tarjetas y cenefa de baldosas en bandas y cintas */
.hww-est-mediterraneo{--hwb-baldosa:repeating-conic-gradient(from 45deg,var(--p) 0 25%,var(--bg) 0 50%)}
.hww-est-mediterraneo .hwx-tarjeta,.hww-est-mediterraneo .hwx-plan,.hww-est-mediterraneo .hwh-celda,.hww-est-mediterraneo .hwx-prog-libro{border:2px solid var(--p);outline:1px solid var(--p);outline-offset:-8px;box-shadow:none}
.hww-est-mediterraneo .hwx-band::before,.hww-est-mediterraneo .hwx-cinta-sec::before,.hww-est-mediterraneo .hwx-proceso::before{content:"";display:block;position:absolute;left:0;right:0;top:0;height:18px;z-index:4;background:linear-gradient(45deg,var(--a) 25%,transparent 25% 75%,var(--a) 75%) 0 0/18px 18px,linear-gradient(45deg,var(--a) 25%,var(--p) 25% 75%,var(--a) 75%) 9px 9px/18px 18px;opacity:.92}
.hww-est-mediterraneo .hwx-cinta-sec,.hww-est-mediterraneo .hwx-proceso{position:relative}
.hww-est-mediterraneo .hwx-btn .elementor-button{border-radius:4px;box-shadow:0 3px 0 color-mix(in srgb,var(--p) 55%,#000)}
.hww-est-mediterraneo .elementor-widget-image img{border-radius:var(--r)}
.hww-est-mediterraneo .elementor-widget-divider{--divider-color:var(--a)}

/* 7. nórdico: esquinas grandes, fondos suaves, botones en píldora, sombras casi invisibles */
.hww-est-nordico .hwx-tarjeta,.hww-est-nordico .hwx-plan,.hww-est-nordico .hwh-celda,.hww-est-nordico .hwx-prog-libro{border:0;border-radius:22px;background:var(--surface);box-shadow:0 18px 40px -28px rgba(30,40,45,.22)}
.hww-est-nordico .elementor-widget-image img{border-radius:22px}
.hww-est-nordico .hwx-btn .elementor-button{border-radius:999px!important;box-shadow:none}
.hww-est-nordico .hwx-split-media::before{display:none}
.hww-est-nordico .elementor-widget-heading h1.elementor-heading-title,.hww-est-nordico .elementor-widget-heading h2.elementor-heading-title{font-weight:500}
.hww-est-nordico .hwx-fase::before,.hww-est-nordico .hwx-ruta-ol li::before{border-radius:50%}
.hww-est-nordico .hwx-ad,.hww-est-nordico .hwh-reel-marco{border-radius:22px}

/* 8. retro de los 70: franjas de color, rótulos con sombra desplazada, botones gruesos */
/* N1: sombra del rótulo proporcional al cuerpo, más suave y solo en titulares grandes (los 3 px duros ensuciaban h2 y móvil) */
.hww-est-retro70 .elementor-widget-heading h1.elementor-heading-title{text-shadow:.045em .045em 1px color-mix(in srgb,var(--a) 42%,transparent)}
.hww-est-retro70 .elementor-widget-heading h2.elementor-heading-title{text-shadow:.03em .03em 1px color-mix(in srgb,var(--a) 30%,transparent)}
.hww-est-retro70 .hwx-hero-dark .elementor-heading-title,.hww-est-retro70 .hwx-band .elementor-heading-title{text-shadow:.04em .04em 1px color-mix(in srgb,var(--a) 60%,transparent)}
.hww-est-retro70 p.elementor-heading-title{text-shadow:none!important}
@media(max-width:767px){.hww-est-retro70 .elementor-widget-heading h2.elementor-heading-title{text-shadow:none}}
.hww-est-retro70 .hwx-btn .elementor-button{border-radius:999px;border:3px solid var(--ink);font-weight:800;box-shadow:4px 4px 0 var(--ink)}
.hww-est-retro70 .hwx-tarjeta,.hww-est-retro70 .hwx-plan,.hww-est-retro70 .hwh-celda,.hww-est-retro70 .hwx-prog-libro{border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--a)}
.hww-est-retro70 .hwx-band::before,.hww-est-retro70 .hwx-cinta-sec::before,.hww-est-retro70 .hwx-proceso::before{content:"";display:block;position:absolute;left:0;right:0;top:0;height:14px;z-index:4;background:linear-gradient(180deg,var(--p) 0 33%,var(--a) 33% 66%,var(--soft) 66%)}
.hww-est-retro70 .hwx-cinta-sec,.hww-est-retro70 .hwx-proceso{position:relative}
.hww-est-retro70 .elementor-widget-image img{border-radius:14px}

/* 9. revista: regla doble sobre los titulares, antetítulos en cursiva y filetes entre columnas */
.hww-est-revista .elementor-widget-heading h2.elementor-heading-title{border-top:3px double var(--ink);padding-top:.5em}
.hww-est-revista .elementor-widget-heading:not(.hwx-num) p.elementor-heading-title{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:1rem}
/* La capitular ya no va en la entradilla del héroe: en una entradilla corta dejaba hueco («T e deriva»). */
.hww-est-revista .hwx-rasgo,.hww-est-revista .hwx-fase,.hww-est-revista .hwx-persona{border-left:1px solid var(--ink);padding-left:22px}
.hww-est-revista .hwx-tarjeta,.hww-est-revista .hwx-plan,.hww-est-revista .hwh-celda{border:1px solid var(--ink);border-radius:0;box-shadow:none}
.hww-est-revista .hwx-btn .elementor-button{border-radius:0;box-shadow:none;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
.hww-est-revista .elementor-widget-image img{border-radius:0}
.hww-est-revista .hwx-split-media::before{border-color:var(--ink);border-radius:0}
/* p50 · N2: las dos fotos del comparador (héroe antesdespues y secciones) no entran ni se desplazan con las animaciones de
   foto: en el móvil, el destape y el paralaje las dejaban en una tira con un hueco gris debajo. Siempre llenan el marco. */
body.hww-premium .hwx-ad .elementor-widget-image,body.hww-premium .hwx-ad .elementor-widget-image img{animation:none!important;scale:none!important}
body.hww-premium .hwx-ad .elementor-widget-image img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 50%}
@media(max-width:767px){.hwx-ad{min-height:320px}}