/*
Theme Name: Hello Elementor Child
Theme URI: https://yoyplanet.com
Template: hello-elementor
Author: Playroom
Author URI: https://playroom360.es
Description: Tema hijo de Hello Elementor para yoyplanet.com. Aquí van los estilos y funciones propias del proyecto; el tema padre se actualiza sin perderlos.
Version: 1.47.2.2
Text Domain: hello-elementor-child
*/

/* ------------------------------------------------------------------
   Tipografía de marca — Fredoka Variable, autoalojada
   ------------------------------------------------------------------
   El cliente fija «Fredoka Bold, versión Expanded» (14 sep 2026). Se sirve desde
   el propio tema en vez de desde el kit de Adobe Fonts o el CDN de Google: es la
   misma familia con licencia SIL OFL, y así no hay peticiones a terceros (RGPD)
   ni un <script> de typekit bloqueando el render.
   Es una fuente variable con dos ejes, de modo que un solo fichero cubre todos
   los estilos:  wght 300–700  y  wdth 75–125 (75 = Condensed, 125 = Expanded).
   «Bold Expanded» = font-weight:700 + font-stretch:125%.
   Los dos cortes son los subsets latin y latin-ext de Google Fonts v17. */
@font-face {
	font-family: "Fredoka";
	src: url("assets/fonts/fredoka-var-latin.woff2") format("woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fredoka";
	src: url("assets/fonts/fredoka-var-latin-ext.woff2") format("woff2");
	font-weight: 300 700;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Tokens — valores tomados del Figma «YOY Planet» (archivo nw6EE7w0…)
   ------------------------------------------------------------------ */
:root {
	/* Paleta */
	--yoy-bg:        #03171d; /* azul noche, fondo global y del header */
	--yoy-amarillo:  #eeff02; /* titulares y «Juegos» */
	--yoy-violeta:   #8200ff; /* «Promos» */
	--yoy-magenta:   #c700af; /* «Menú» */
	--yoy-rojo:      #f7001a; /* «Contacto» */
	--yoy-violeta-titulo: #9200fd; /* titular del hero en el rediseño v2 (antes iba en amarillo) */

	/* Tipografía. Fredoka sustituye a los provisionales «adineue PRO» (menú) e
	   «Inter» (titulares): la marca usa una sola familia. El ancho va en su propio
	   token porque el eje wdth se declara aparte del peso. */
	--yoy-font-marca:    "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
	--yoy-font-nav:      var(--yoy-font-marca);
	--yoy-font-titular:  var(--yoy-font-marca);
	--yoy-ancho:         125%;  /* Expanded — titulares, menú, pills y botones */
	--yoy-ancho-texto:   100%;  /* anchura normal — párrafos, formulario y footer */

	/* Medidas del header (Figma v2, nodo 60:45 — 15 sep 2026).
	   El rediseño v2 está maquetado ya con Fredoka Expanded, así que sus medidas
	   se adoptan tal cual: no hay que recalibrarlas como pasaba con el v1 (Inter). */
	/* En vw, no en píxeles fijos: el header del Figma está medido sobre 1920 y
	   escala con la página. Con valores fijos, a 1450 el menú salía más ancho de
	   lo que le toca y empezaba antes de su sitio. */
	--yoy-header-gap:    clamp(28px, 3.80vw, 73px);
	--yoy-nav-size:      clamp(16px, 1.354vw, 26px);
	--yoy-nav-tracking:  .045em;
}

/* ------------------------------------------------------------------
   Header  —  Figma nodo 60:45 (v2)
   ------------------------------------------------------------------ */
/* El relleno del header también va en proporción: el Figma marca 20/80 sobre
   1920 y, fijo en píxeles, el menú se quedaba 35px por dentro de su sitio y el
   header 10px más alto de la cuenta. */
.yoy-header {
	padding: clamp(10px, 1.04vw, 20px) clamp(20px, 4.17vw, 80px) !important;
	position: relative;                          /* ancla para la línea de abajo */
}

/* Línea divisoria entre el header y el hero (nodo 60:45).
   En el Figma es el borde inferior de la cabecera, 2px, y NO es plana: el
   `get_design_context` la reduce a un `#6c20fa` liso, pero midiendo el render se
   ve un degradado que arranca en el violeta, pasa por el rojo hacia la mitad y
   acaba en el amarillo. Va en un ::after porque un `border` no admite degradado.
   Los 2px se dejan fijos: es un filete, y escalado con la ventana se emborrona. */
.yoy-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--yoy-degradado-linea);
	pointer-events: none;
}

/* ------------------------------------------------------------------
   NADA DE SCROLL HORIZONTAL (1.40.2, 24 sep 2026)

   El diseño saca piezas fuera del lienzo a propósito: la foto del hero de
   Cumpleaños empieza en 608 y mide 1488, el rayo de Refrescos arranca en 1654 y
   mide 651, y las tarjetas giradas de Merienda asoman por el borde. En el Figma
   los recorta el marco de 1920; aquí no hay marco, y la página se podía arrastrar
   54 px a la derecha.

   El reset de Hello Elementor ya trae `body { overflow-x: clip }`, pero NO sirve:
   la especificación excluye `clip` de la propagación al viewport cuando viene del
   `body`. Desde el elemento raíz sí propaga, y por eso va aquí.

   Tiene que ser `clip` y no `hidden`: `hidden` crearía un contenedor de scroll y
   la cabecera pegajosa dejaría de pegarse. Comprobado: con `clip`, `scrollWidth`
   baja de 1974 a 1920, el scroll horizontal se queda en 0 y la cabecera sigue
   clavada arriba.
   --------------------------------------------------------------- */
html { overflow-x: clip; }

/* ---------------------------------------------------------------
   Cabecera fija al hacer scroll (1.31.0, 22 sep 2026, petición del cliente).

   Va en `sticky` y NO en `fixed`: sticky deja la cabecera en el flujo, así que
   no hay que compensar su altura con un relleno en el hero ni recalcularlo en
   cada breakpoint. Con `fixed` el hero saltaría hacia arriba al cargar.

   Se aplica al `<header class="elementor-location-header">` (la plantilla 28 del
   Theme Builder), no a `.yoy-header`: en móvil `.yoy-header` ya es `relative`
   porque de él cuelga el desplegable en absoluto, y pisarlo con sticky rompería
   ese anclaje.

   Sobrevive al `body { overflow-x: clip }` del reset de Hello Elementor porque
   `clip` NO crea contenedor de scroll — con `hidden` el sticky no funcionaría.
   Si algún día ese reset pasa a `hidden`, esto deja de pegarse: es lo primero
   que hay que mirar.

   z-index 85: por encima del contenido y de la capa de pegatinas arrastrables
   (80), por debajo del botón de volver arriba (90).
   --------------------------------------------------------------- */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 85;
}

/* Con sesión iniciada, la barra de WordPress va fija encima y tapaba el logo. Solo afecta a
   quien edita, nunca al visitante. Alturas de la propia barra: 32px en escritorio, 46px por
   debajo de 782px y, por debajo de 600px, deja de ser fija y se va con el scroll → top 0. */
.admin-bar .elementor-location-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .elementor-location-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .elementor-location-header { top: 0; } }

/* El menú navega por anclas (#juegos, #promos, #carta, #contacto). Con la cabecera
   pegada, el destino quedaba tapado por ella. `scroll-margin-top` frena el scroll
   justo debajo. La altura real la mide yoy-nav.js y la deja en --yoy-header-h; el
   valor de reserva es la altura de escritorio, por si el JS no llega a ejecutarse. */
#hero,
#juegos,
#galeria,
#promos,
#carta,
#contacto {
	scroll-margin-top: var(--yoy-header-h, 92px);
}

.yoy-header .yoy-header__nav .elementor-nav-menu {
	gap: var(--yoy-header-gap);
}

.yoy-header .yoy-header__nav .elementor-nav-menu > li > a {
	font-family: var(--yoy-font-nav);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: var(--yoy-nav-size);
	letter-spacing: var(--yoy-nav-tracking);
	text-transform: uppercase;
	padding: 0;
	white-space: nowrap;
}

/* Ancho del logo fijado aquí además de en Elementor: en tablet el control de ancho
   del widget no heredaba el valor de escritorio y el PNG salía a tamaño nativo. */
.yoy-header .yoy-header__logo img {
	/* El header del Figma está medido sobre 1920 y escala con la página, igual que
	   el resto de la maqueta. Con el logo a 131px fijos el header salía 26px más
	   alto de la cuenta a 1450 y empujaba el hero hacia abajo. */
	width: clamp(92px, 6.82vw, 131px) !important;
	max-width: 40vw;
	height: auto;
}
@media (max-width: 767px) {
	.yoy-header .yoy-header__logo img { width: 120px !important; }
}

/* Cada entrada lleva su color. Se enganchan por la clase del item de menú, no por su ID,
   para que sobrevivan a exportar/importar entre local, staging y producción. */
.yoy-nav--juegos   > a { color: var(--yoy-amarillo) !important; }
.yoy-nav--promos   > a { color: var(--yoy-violeta)  !important; }
.yoy-nav--carta    > a { color: var(--yoy-magenta)  !important; }
.yoy-nav--contacto > a { color: var(--yoy-rojo)     !important; }
/* Lo que cuelga de «Contacto» («Trabaja con nosotros») va también en rojo, en el desplegable
   de escritorio y en el panel del móvil (5 oct 2026). Al pasar el ratón sigue el patrón del
   resto: fondo violeta y texto blanco, porque rojo sobre violeta no se lee. */
.yoy-header .yoy-nav--contacto .sub-menu > li > a { color: var(--yoy-rojo) !important; }
.yoy-header .yoy-nav--contacto .sub-menu > li > a:hover,
.yoy-header .yoy-nav--contacto .sub-menu > li > a:focus-visible { color: #fff !important; }

.yoy-header .yoy-header__nav .elementor-nav-menu > li > a:hover,
.yoy-header .yoy-header__nav .elementor-nav-menu > li > a:focus-visible {
	filter: brightness(1.35);
}

/* El gap de 123px del diseño es para 1920px. Por debajo se estrecha
   progresivamente en vez de desbordar. */
/* Los dos saltos que había aquí (1600 y 1200px) sobran desde que el gap y el
   cuerpo del menú van en clamp: escalan solos y sin escalones. */

/* ------------------------------------------------------------------
   DESPLEGABLE DE «PROMOS» EN ESCRITORIO (1.41.0, 24 sep 2026)

   «Promos» pasa a tener cuatro destinos: Cumpleaños, Promos de juego, Novedades
   y Concursos. La cabecera es global, así que esto se ve en TODA la web.

   Se abre con CSS y no con el JavaScript de Elementor. Comprobado el 24 sep 2026:
   con el ratón encima del ítem, SmartMenus dejaba el submenú en `display: none` y
   `aria-expanded` en `false`. Además, hecho así el menú también funciona sin JS.

   EL ÍTEM ES ALTO, NO UNA LÍNEA. El `li` mide lo que la línea de texto: 20px dentro de una
   cabecera de 107. Dejándolo así, solo reaccionaba esa franja de 20px —apuntabas a la cabecera
   junto a «PROMOS» y no pasaba nada— y del texto al panel había 50px de vacío que cerraban el
   desplegable a medio camino. Se le da al `li` el alto de la cabecera con relleno, y se lo quita
   con un margen negativo del mismo tamaño para que el menú no crezca. Así la zona sensible es toda
   la banda de la cabecera y el panel arranca pegado a ella, sin hueco que cruzar.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children {
		position: relative;
		align-self: center;   /* sin esto el `stretch` por defecto se come el relleno de abajo */
		padding-block: calc(var(--yoy-header-h, 107px) / 2);
		margin-block: calc(var(--yoy-header-h, 107px) / -2);
	}

	.yoy-header .yoy-header__nav .elementor-nav-menu > li > ul.sub-menu {
		display: block !important;      /* anula el display:none con el que Elementor lo deja */
		position: absolute;
		/* `!important` en los dos: Elementor fija `top: 100%` y `left: 0` y gana por especificidad.
		   Ahora `100%` ya es el borde de abajo de la cabecera, porque el `li` llega hasta ahí. */
		top: 100% !important;
		left: 50% !important;
		transform: translateX(-50%) translateY(6px);
		/* El panel mide lo que su contenido, no un ancho fijo: con 230px, «Promos de juego» pedía
		   265 y el texto se salía por fuera del fondo redondeado. `max-content` lo ajusta al ítem
		   más largo, y el `max-width` es el tope por si alguien escribe un nombre kilométrico
		   —entonces esa entrada parte en dos líneas DENTRO del panel en vez de desbordarlo. */
		width: max-content;
		min-width: max(100%, 200px);
		/* 360px se quedaba corto para «TRABAJA CON NOSOTROS» (pide ~390 con la Fredoka ancha): como
		   Elementor pone los enlaces en `nowrap`, el texto se salía del panel por la derecha. */
		max-width: min(440px, 90vw);
		margin: 0;
		padding: 10px;
		border-radius: 16px;
		background: var(--yoy-bg);
		border: 1px solid rgba(255, 255, 255, .12);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/* Al cerrar espera 250ms antes de empezar a desvanecerse: si el ratón se sale un instante
		   —al pasar por encima de una letra, o por el borde del panel— no se cierra en la cara. */
		transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s linear .43s;
		z-index: 40;
	}

	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children:hover       > ul.sub-menu,
	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s;   /* al abrir, inmediato; la espera es solo para cerrar */
	}

	/* Los enlaces del submenú NO llevan la clase `elementor-item` sino `elementor-sub-item`:
	   apuntando a la primera, las reglas no enganchaban nada y los ítems salían en gris 13px. */
	.yoy-header .yoy-header__nav .sub-menu > li { width: 100%; }
	.yoy-header .yoy-header__nav .sub-menu > li > a {
		display: block;
		padding: 10px 14px !important;   /* el menú horizontal deja los enlaces con padding 0 */
		border-radius: 10px;
		font-family: var(--yoy-font-nav);
		font-stretch: var(--yoy-ancho);
		font-weight: 700;
		font-size: clamp(14px, .94vw, 18px);
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #fff;
		transition: background .18s ease, color .18s ease;
		/* Elementor mete a los `elementor-sub-item` un borde izquierdo transparente de 8px: dejaba
		   22px de aire a la izquierda y 14 a la derecha. Fuera, para que el violeta quede centrado. */
		border-inline-start: 0 !important;
		/* Elementor los deja en `nowrap`; así, si un nombre no cabe en el max-width del panel,
		   parte en dos líneas dentro del fondo en vez de salirse. */
		white-space: normal;
	}
	.yoy-header .yoy-header__nav .sub-menu > li > a:hover,
	.yoy-header .yoy-header__nav .sub-menu > li > a:focus-visible,
	.yoy-header .yoy-header__nav .sub-menu > li.current-menu-item > a {
		background: var(--yoy-violeta-pill);
		color: #fff;
	}

	/* Triangulito que avisa de que «Promos» tiene desplegable. El widget está configurado SIN icono
	   de submenú (`submenu_icon` vacío), así que lo dibuja el CSS y no hay que tocar Elementor.
	   Va relleno y no en forma de galón de dos rayas: a 18px de cuerpo, dos rayas de 2px casi no se
	   ven sobre el violeta del propio ítem.

	   DOS COSAS QUE ELEMENTOR PONE EN ESTE MISMO `::after` Y HAY QUE DESHACER:
	     · `opacity: 0` — este pseudoelemento es suyo, lo usa para el subrayado animado del puntero
	       y lo deja invisible hasta el hover. El triángulo existía y ocupaba sus 22px de sitio,
	       pero no se pintaba NUNCA. Lleva `!important` porque su declaración gana a la nuestra
	       (enumerando las hojas de estilo no aparece la regla, así que no hay selector al que
	       subirle la especificidad: el `!important` es la salida).
	     · `position: absolute` pegado abajo — heredándolo se quedaba debajo del texto.
	   El `a` es `display: flex`, así que el pseudoelemento entra como un hijo más de la fila. */
	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children > a::after {
		content: "";
		position: static;
		opacity: 1 !important;
		flex: 0 0 auto;
		align-self: center;
		width: 0; height: 0;
		margin-left: .42em;
		border-left:  .3em solid transparent;
		border-right: .3em solid transparent;
		border-top:   .34em solid currentColor;
		border-bottom: 0;
		transition: transform .2s ease;
	}
	/* Abierto, el triángulo mira hacia arriba. */
	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children:hover > a::after,
	.yoy-header .yoy-header__nav .elementor-nav-menu > li.menu-item-has-children:focus-within > a::after {
		transform: rotate(180deg);
	}
}

/* Menú desplegable en móvil: el diseño todavía no define esta versión,
   así que se deja el comportamiento por defecto de Elementor sobre el fondo de marca. */
.yoy-header nav.elementor-nav-menu--dropdown {
	background-color: var(--yoy-bg);
}
.yoy-header nav.elementor-nav-menu--dropdown a {
	font-family: var(--yoy-font-nav);
	font-stretch: var(--yoy-ancho);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Fondo global — toda la web va sobre azul noche
   ------------------------------------------------------------------ */
body,
.elementor-location-header + *,
.site-main {
	background-color: var(--yoy-bg);
}
body { color: #fff; }

/* ------------------------------------------------------------------
   Hero  —  Figma nodo 5:28. Lienzo de referencia 1920×972 (sin header).
   Las posiciones de cada pieza se fijan en Elementor (posición absoluta en %);
   aquí va lo que Elementor no controla bien: proporción, tipografía y móvil.
   ------------------------------------------------------------------ */
.yoy-hero {
	/* 937 / 1920 — el lienzo va del PIE del header (y 143,72 del Figma: 36,72 de
	   origen del frame + 107 de header) al final del frame (1080,78).
	   Todas las Y de las piezas se miden contra ESTE origen y con las
	   coordenadas del metadata, que es el único sistema coherente: las del
	   contexto de código vienen desplazadas en los nodos rotados. */
	min-height: 48.80vw;
	/* La foto de la esquina se sale por abajo y por la izquierda, igual que en el
	   diseño. `clip` la recorta contra el hero sin crear contexto de scroll. */
	overflow: clip;
}

.yoy-hero__titulo .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	/* 52px es la medida del rediseño v2 (nodo 60:52), que ya viene maquetado con
	   Fredoka Expanded: se aplica directa, sin la recalibración que pedía el v1. */
	/* 52px a 1920. El suelo del clamp NO es el mismo número que el diseño dividido
	   por la pantalla: en móvil el titular es lo único que hay en la primera
	   pantalla y tiene que mandar, así que sube a 34 (a 390 el vw daba 10px y se
	   quedaba en el suelo antiguo de 28, que competía con el subtítulo). */
	font-size: clamp(34px, 2.71vw, 52px);
	line-height: 1.08;
	/* Sin esto, a 390 parte en «DIVERSIÓN DE / OTRO / PLANETA» y deja una línea
	   suelta de una palabra. `balance` reparte las tres líneas. */
	text-wrap: balance;
	text-transform: uppercase;
	color: var(--yoy-violeta-titulo);
}

.yoy-hero__sub .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);    /* 36px a 1920 — nodo 60:53 */
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.yoy-hero__sub .yoy-acento { color: var(--yoy-amarillo); }

.yoy-hero .elementor-widget-image img { width: 100%; height: auto; display: block; }

/* Móvil y tablet: el diseño no define esta vista, así que el collage se pliega a
   una columna: título, subtítulo, START y la foto principal. Los stickers se ocultan. */
@media (max-width: 1024px) {
	.yoy-hero {
		min-height: 0;
		/* 28px abajo: el ENJOY es el último de la columna y flota (+14px, +3°) con GSAP; sin
		   relleno, el vaivén lo saca del hero y `overflow: clip` lo recorta (17 sep). */
		padding: 32px 20px 28px !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 20px;
		background-size: cover;
	}
	.yoy-hero > .elementor-element {
		position: static !important;
		width: 100% !important;
		max-width: 100%;
	}
	.yoy-hero .yoy-hero__sticker { display: none !important; }
	/* …menos el ENJOY WITH YOY. Es el rótulo de marca, y sin él el hero de móvil
	   se queda en título + botón + foto, que es cualquier landing. Cierra la
	   sección después de la foto. El vídeo y los stickers sueltos sí se quedan
	   fuera: peso y ruido en una pantalla de 390. */
	.yoy-hero .yoy-hero__enjoy { display: block !important; order: 8; }
	.yoy-hero .yoy-enjoy { font-size: clamp(30px, 8vw, 89px); }

	/* El titular tiene un <br> escrito a mano («Diversión de / otro planeta»), así
	   que el cuerpo lo manda la línea más larga: «otro planeta» mide 365px a 34px.
	   En vez de fijar un número que solo vale para un móvil, el cuerpo sale del
	   ancho disponible (pantalla menos los 20px de relleno a cada lado) por la
	   proporción de esa línea, y así entra en dos líneas a 320, 360, 390 o 414.
	   El techo de 44 lo deja por debajo de los 52 del diseño, que entran a 1025. */
	.yoy-hero .yoy-hero__titulo .elementor-heading-title {
		font-size: clamp(24px, calc((100vw - 40px) * 0.087), 44px);
	}
	/* En el DOM las fotos van antes que el texto (orden de apilado del diseño);
	   en columna hay que reordenar: título, subtítulo, START y por último la foto. */
	.yoy-hero .yoy-hero__titulo { order: 1; }
	.yoy-hero .yoy-hero__sub    { order: 2; }
	.yoy-hero .yoy-hero__start  { order: 3; }
	.yoy-hero .yoy-hero__chica  { order: 4; }
	.yoy-hero .yoy-hero__gente  { order: 5; }
	.yoy-hero .yoy-hero__start { width: 180px !important; }
	/* La barra de carga del hero se retiró el 16 sep (el hero del v2 no la lleva).
	   Si vuelve, necesita `order` y ancho propios: sin ellos el width:100% de arriba
	   la infla a toda la pantalla y cae la primera, encima del logo.
	   .yoy-hero .yoy-hero__carga { order: 4; width: 180px !important; } */
	/* A sangre por los dos lados. El `max-width: none` NO sobra: la regla de
	   plegado de arriba pone `max-width: 100%` a todos los hijos del hero y le
	   recortaba al `calc(100% + 40px)` los 40px, así que la foto sangraba por la
	   izquierda (margen negativo) y se quedaba 40px corta por la derecha. */
	.yoy-hero .yoy-hero__gente {
		order: 6;
		margin: 12px -20px 0;
		width: calc(100% + 40px) !important;
		max-width: none !important;
	}
}

/* ==================================================================
   CUERPO DE LA LANDING — Figma nodos 5:27, 5:26, 5:25, 5:24, 5:23
   Misma técnica que el hero: cada sección es un lienzo con proporción fija
   (min-height en vw) y sus piezas en posición absoluta en %; en ≤1024px
   se pliega a columna y se ocultan las piezas decorativas (.yoy-deco).
   ================================================================== */
:root {
	--yoy-violeta-pill: #5e16fa;   /* pills de Promos, Carta y botón ENVIAR */
	--yoy-amarillo-2:   #e1fb1e;   /* acento del titular de Promos */
	--yoy-rosa:         #f70155;   /* acento del titular de Carta */
	--yoy-gris:         #696969;   /* textos secundarios del footer */
	--yoy-borde:        #404040;   /* bordes de los campos del formulario */
	--yoy-font-texto:   var(--yoy-font-marca); /* también Fredoka, pero en peso y ancho normales */
}

/* --- Lienzos por sección (alto / 1920) --- */
.yoy-juegos   { min-height: 55.31vw; }  /* 1062 — lienzo del v3 (nodo 202:3) */
.yoy-promos   { min-height: 60.78vw; }  /* 1167 — lienzo del v2 (nodo 60:88) */
/* Aire entre el carrusel de Juegos y Promos. Nació con el pin (para que Promos no
   asomara mientras la última card seguía centrada); al quitar la fijación el 15 sep
   se conserva, más contenido, como respiro entre secciones. */
.yoy-promos   { margin-top: clamp(60px, 6vw, 120px); }
.yoy-galeria  { min-height: 36.23vw; }  /* 695,7 — lienzo del v2 (nodo 60:16) */
.yoy-carta    { min-height: 30.47vw; }  /* 585 — lienzo del v2 (nodo 60:19) */
/* 954 en Figma + ~55px del campo de aceptación RGPD, que el diseño no tenía, + el campo
   Teléfono (23 sep 2026). Los 170px sueltos NO son decoración: el formulario va en absoluto
   dentro de esta sección, que recorta con overflow:hidden, y su alto no empuja el de la
   sección —los 8 hijos de #contacto están todos en absoluto, así que aquí manda este
   min-height y nada más—. El alto de la sección escala con vw, pero el del formulario no del
   todo: el botón (59px), el checkbox y los huecos entre campos son px fijos, así que cuanto
   más estrecha la pantalla, más se sale. Por eso hace falta una parte en vw y otra en px.
   La proporción (45.1vw + 270px) sale de medir el alto real del formulario a varios anchos: crece
   0,344px por cada px de ventana más 182px fijos, y la sección necesita ese alto dividido por
   0,762 (el 23.8% que el formulario deja por arriba). Con 52.6vw + 170px entraba, pero dejaba 5px
   de holgura a 1025 y 283px sobrantes a 1920; así la holgura se queda CONSTANTE en todo el rango, que es lo que se buscaba.
   Los 300px (y no 270) son margen de seguridad: con 270 la holgura real medida era de 23px, un tercio
   del alto del botón, y basta con que una máquina renderice la tipografía un poco más grande para que
   vuelva a recortarse. Con 300 son ~53px.
   Comprobado a 1025, 1035, 1180, 1440, 1512 y 1920px.
   OJO: cada campo que se añada al formulario obliga a revisar este número. Si un día el botón
   «Enviar» desaparece, es esto y no el formulario. */
.yoy-contacto { min-height: calc(45.1vw + 300px); }

.yoy-seccion .elementor-widget-image img { width: 100%; height: auto; display: block; }

/* --- Pills (etiquetas de sección) — texto real, no imagen --- */
.yoy-pill .elementor-heading-title {
	display: inline-block;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	/* 52px del rediseño v2. El v1 obligaba a bajar a 44px porque estaba maquetado con
	   Inter y Fredoka Expanded desbordaba la caja; el v2 ya está hecho con Fredoka y
	   sus cajas contemplan el ancho real, así que se recupera la medida del diseño. */
	font-size: clamp(22px, 2.71vw, 52px);           /* 52px a 1920 */
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
	background: var(--yoy-magenta);
	padding: .38em .58em;                            /* 20px 30px a 52px */
	border-radius: .385em;                           /* 20px */
	white-space: nowrap;
}
.yoy-pill--violeta  .elementor-heading-title { background: var(--yoy-violeta-pill); }
.yoy-pill--amarillo .elementor-heading-title { background: var(--yoy-amarillo); color: #000; }

/* --- Titulares de sección (46px / 43px) --- */
.yoy-h .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);          /* 36px a 1920 — v2 */
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.yoy-carta .yoy-h .elementor-heading-title { font-size: clamp(18px, 1.875vw, 36px); }
.yoy-contacto .yoy-h .elementor-heading-title { font-size: clamp(22px, 2.4vw, 46px); }
.yoy-juegos   .yoy-acento { color: var(--yoy-amarillo); }
.yoy-promos   .yoy-acento { color: var(--yoy-amarillo-2); }
.yoy-carta    .yoy-acento { color: var(--yoy-rosa); }
.yoy-contacto .yoy-acento { color: var(--yoy-amarillo); }

/* --- Carrusel de Juegos: 5 tarjetas de 435px con hueco de 40 (2375px) centradas
       en el lienzo de 1920, de modo que la 1ª y la 5ª asoman cortadas por los lados --- */
/* (v2) El carrusel de Juegos se salía de pantalla a propósito. En el v3 va como el de la carta,
   así que esta regla se anula en el bloque «v3 · JUEGOS — carrusel de Máquinas» de más abajo. */
.yoy-juegos__carrusel .elementor-image-carousel-wrapper { overflow: visible; }
.yoy-juegos__carrusel .swiper-slide img { border-radius: 24px; }

/* --- Abanico de cards (efecto de las cards de amnesia.es). El JS (yoy-animations.js) destruye el
       Swiper del carrusel, añade la clase .yoy-abanico y coloca cada card él mismo: gira, baja,
       se encoge y se aleja según su distancia al centro; se mueve con el scroll y arrastrando.
       Sin JS (o con prefers-reduced-motion) la clase no se añade y el carrusel Swiper sigue igual. --- */
.yoy-abanico { --yoy-card-w: 22.66vw; }                /* 435px a 1920 */
.yoy-abanico .swiper-wrapper {
	display: block; position: relative; width: 100%;
	height: calc(var(--yoy-card-w) * 824 / 755);       /* proporción de las cards (755×824) */
	perspective: 25vw; transform: none !important; transition: none;
	cursor: grab;
}
.yoy-abanico .swiper-wrapper.is-dragging { cursor: grabbing; }
.yoy-abanico .swiper-slide {
	position: absolute; top: 0; left: 0; width: var(--yoy-card-w); height: auto; margin: 0 !important;
	will-change: transform; backface-visibility: hidden;
}
.yoy-abanico .swiper-slide-inner { display: block; margin: 0; width: 100%; aspect-ratio: 755 / 824; transform-origin: 50% 50%; will-change: transform; }
.yoy-abanico .swiper-slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* --- Carrusel de Carta: 3 tarjetas + flechas circulares de 116px fuera del carril --- */
.yoy-carta__carrusel .swiper-slide img { border-radius: 16px; }
.yoy-carta__carrusel .elementor-swiper-button {
	width: 6.04vw; height: 6.04vw; max-width: 116px; max-height: 116px;
	border: 3px solid #fff; border-radius: 50%;
	background: center / 60% no-repeat;
	color: transparent; font-size: 0;
}
.yoy-carta__carrusel .elementor-swiper-button svg, .yoy-carta__carrusel .elementor-swiper-button i { display: none; }
.yoy-carta__carrusel .elementor-swiper-button-prev { left: -7.9vw; background-image: url(/wp-content/uploads/2026/09/carta-flecha-izq.svg?v=2); } /* ?v=2: el SVG se corrigió el 14 sep (venía apuntando a la derecha) y la URL sin versión seguía sirviendo el viejo de caché */
.yoy-carta__carrusel .elementor-swiper-button-next { right: -7.9vw; background-image: url(/wp-content/uploads/2026/09/carta-flecha-der.svg); }
.yoy-carta__carrusel .elementor-swiper-button:hover { background-color: rgba(255,255,255,.12); }

/* --- Redondeos de tarjetas sueltas --- */
.yoy-promos__arcade img { border-radius: 40px; }
.yoy-contacto__corazon img { border-radius: 67px; }

/* --- Formulario de contacto (Elementor Pro Form) ---
   16 oct 2026: colores, bordes, tipografía y botón se editan en ELEMENTOR (Estilo del widget + su CSS personalizado
   para placeholder, foco y enlace de la casilla; scripts/formulario-a-elementor.php). Aquí solo queda estructura que
   el panel no ofrece. NADA de !important sobre lo que controla Elementor: si no, sus controles no hacen nada y se acaba
   parcheando en el CSS adicional (pasó el 14 oct en producción). */
.yoy-form .elementor-field-group { margin-bottom: 0; padding: 0; }
.yoy-form .elementor-form-fields-wrapper { row-gap: 1.46vw; }               /* 28px */
.yoy-form .elementor-field-textual {
	font-stretch: var(--yoy-ancho-texto);
	padding: 0 1.5em;
	min-height: 5vw;                                                            /* 96px */
	box-shadow: none;
}
.yoy-form textarea.elementor-field-textual { min-height: 13.65vw; padding: 1em 1.5em; resize: vertical; } /* 262px */
.yoy-form .elementor-field-textual:focus { outline: none; }
.yoy-form .elementor-field-type-acceptance label { font-stretch: var(--yoy-ancho-texto); }
.yoy-form .elementor-field-type-submit { margin-top: 1.72vw; }              /* 33px */
.yoy-form .elementor-button { font-stretch: var(--yoy-ancho); border: 0; }  /* Fredoka Expanded: Elementor no tiene «anchura» */
.yoy-form .elementor-button:hover { filter: brightness(1.15); }
.yoy-form .elementor-message { font-family: var(--yoy-font-texto); font-stretch: var(--yoy-ancho-texto); color: #fff; }

/* --- Columnas de enlaces del bloque de contacto --- */
.yoy-links .elementor-icon-list-items { display: flex; flex-direction: column; gap: 1.04vw; } /* 20px a 1920 */
.yoy-links .elementor-icon-list-item { line-height: 1.2; }
.yoy-links .elementor-icon-list-item a, .yoy-links .elementor-icon-list-text {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(15px, 1.3vw, 25px);
	color: var(--yoy-gris);
	white-space: nowrap;
}
.yoy-links .elementor-icon-list-item:first-child .elementor-icon-list-text,
.yoy-links .elementor-icon-list-item a:hover { color: #fff; }
.yoy-links--titulo .elementor-icon-list-item:first-child .elementor-icon-list-text { color: #fff; }

/* --- Redes (imágenes SVG 37px en fila) --- */
.yoy-redes .elementor-social-icons-wrapper { display: flex; flex-wrap: nowrap; gap: 12px; }
.yoy-redes .elementor-widget-image { width: 37px !important; }

/* --- Footer (plantilla Theme Builder) --- */
.yoy-footer {
	border-top: 1px solid rgba(255,255,255,.3);
	min-height: 116px;
	padding: 0 4.4% 0 7.8% !important;
}
.yoy-footer .elementor-heading-title,
.yoy-footer .elementor-nav-menu a {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 400;
	font-size: 18px;
	color: var(--yoy-gris);
	text-transform: none;
	letter-spacing: 0;
}
.yoy-footer .elementor-nav-menu a:hover { color: #fff; }
.yoy-footer .elementor-nav-menu { gap: 40px; }
.yoy-footer__orenes img { width: 175px; height: auto; mix-blend-mode: exclusion; }

/* --- Stickers arrastrables (GSAP Draggable, solo con puntero fino) --- */
@media (pointer: fine) {
	.yoy-drag { cursor: grab; touch-action: none; }
	.yoy-drag:active, .yoy-drag.is-dragging { cursor: grabbing; }
}

/* Capa donde se muda el sticker mientras lo arrastras, para que pueda recorrer la página
   entera. Dentro de su sección lo encerraban el `overflow: clip` del hero (que está ahí
   para recortar la foto de la esquina) y los `overflow: hidden` que Elementor pone en
   Promos y Contacto; además cada sección apila aparte, así que un sticker del hero no
   podía pasar por delante de la sección siguiente. Mide 0x0 en el origen del documento:
   no ocupa nada, solo da un sistema de coordenadas de pagina a lo que cuelga de ella.
   z-index 80: por encima de todo el contenido y por debajo del boton de subir (90). */
.yoy-drag-capa {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
	z-index: 80;
	pointer-events: none;
}
.yoy-drag-capa > * { pointer-events: auto; }
/* Mientras se arrastra, el puntero recorre titulares y párrafos: sin esto los va dejando seleccionados. */
body.yoy-arrastrando { user-select: none; -webkit-user-select: none; }

/* La batería de la carta se sirve como SVG incrustado (lo hace yoy-animations.js) para poder
   encender sus celdas de una en una. Hereda la caja que tenía el <img> al que sustituye. */
.yoy-bateria {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* --- Plegado en tablet/móvil --- */
@media (max-width: 1024px) {
	.yoy-seccion {
		min-height: 0 !important;
		padding: 48px 20px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 20px;
	}
	.yoy-seccion > .elementor-element { position: static !important; width: 100% !important; max-width: 100%; transform: none !important; }
	.yoy-seccion .yoy-deco { display: none !important; }
	/* Escala de móvil (medida a 390px, 16 sep 2026).
	   El fallo no era el `vw` sino el SUELO de cada clamp: por debajo de ~700px
	   todo tocaba suelo a la vez y la página entera se quedaba en cuerpo 20-22,
	   con la pill (22) MÁS GRANDE que el titular al que acompaña (20). Jerarquía
	   invertida. Los suelos nuevos mantienen el orden del diseño —pill por encima
	   del titular— y suben el titular a un cuerpo legible en párrafo largo. */
	.yoy-pill .elementor-heading-title { font-size: clamp(26px, 6.4vw, 36px); }
	.yoy-h .elementor-heading-title, .yoy-carta .yoy-h .elementor-heading-title, .yoy-contacto .yoy-h .elementor-heading-title {
		font-size: clamp(23px, 5.4vw, 30px);
		line-height: 1.25;                   /* 1,2 se apelmaza en versalitas a cuerpo pequeño */
	}
	.yoy-juegos__carrusel { width: 100% !important; left: auto !important; transform: none !important; }
	.yoy-abanico { --yoy-card-w: 44vw; }
	.yoy-abanico .swiper-wrapper { margin-bottom: calc(var(--yoy-card-w) * .18); } /* hueco para lo que bajan las cards de los bordes */
	.yoy-abanico .swiper-slide img { border-radius: 16px; }
	/* Las flechas del carrusel son absolutas y Elementor las centra con top:50% contra su
	   propio widget. El `position: static` de la regla de plegado se lo quitaba, así que
	   pasaban a medirse contra la sección entera y salían por encima del carril y pegadas a
	   los bordes de la pantalla. Devolverle el `relative` al widget las recoloca. */
	.yoy-seccion > .e-widget-swiper {
		position: relative !important;
		/* el `left`/`top` con el que Elementor coloca el widget en el collage de escritorio
		   deja de ser inocuo en cuanto el widget no es static, y corría el carril fuera de
		   la pantalla: hay que anular los cuatro offsets */
		top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
	}
	.yoy-carta__carrusel .elementor-swiper-button { width: 48px; height: 48px; border-width: 2px; }
	.yoy-carta__carrusel .elementor-swiper-button-prev { left: 8px; }
	.yoy-carta__carrusel .elementor-swiper-button-next { right: 8px; }
	.yoy-form .elementor-field-textual { min-height: 56px; }
	.yoy-form textarea.elementor-field-textual { min-height: 160px; }
	.yoy-form .elementor-form-fields-wrapper { row-gap: 16px; }
	.yoy-form .elementor-field-type-submit { margin-top: 20px; }
	/* Mismo caso que la foto del hero: sin `max-width: none` la banda sangra solo
	   por la izquierda y se queda corta por la derecha. */
	.yoy-galeria__banda { margin: 0 -20px; width: calc(100% + 40px) !important; max-width: none !important; }
	.yoy-footer { flex-direction: column !important; gap: 12px; padding: 24px 20px !important; text-align: center; }
	.yoy-footer .elementor-nav-menu { gap: 20px; justify-content: center; }
	.yoy-footer .elementor-nav-menu--dropdown { display: none; }
	.yoy-footer .elementor-nav-menu--main { display: flex !important; }
	.yoy-footer .elementor-menu-toggle { display: none !important; }
}

@media (max-width: 480px) {
	.yoy-abanico { --yoy-card-w: 62vw; }
}

/* Vídeo del hero (Figma 10:43): misma caja que la foto del arcade, que hace de póster. Sin controles. */
.yoy-hero__video .elementor-video, .yoy-hero__video video { border-radius: 20px; object-fit: cover; }
.yoy-hero__video .elementor-widget-container { border-radius: 20px; overflow: hidden; }
/* 17 sep: el vídeo del hero también en móvil (antes oculto por peso). Va a sangre, como la
   foto del grupo, entre la foto (6) y el ENJOY (8). El mp4 pesa 2,3 MB: si molesta en datos,
   volver a `display: none !important` aquí. */
@media (max-width: 1024px) {
	.yoy-hero .yoy-hero__video {
		display: block !important;
		order: 7;
		margin: 0 -20px;
		width: calc(100% + 40px) !important;
		max-width: none !important;
	}
}

/* ==================================================================
   «ENJOY WITH YOY» — texto real, ya no un PNG (13 sep 2026)
   Era hero-enjoy.png: 1352x635, 184 KB y 100% OPACO — con canal alfa pero
   alpha=255 en todos los pixeles y el fondo #03171D horneado en el export
   de Figma. Tapaba el video del hero con un rectangulo solido, y encima
   traia los bordes dentados del export.
   Son tres bloques amarillos escalonados con texto: eso es CSS, no una imagen.
   Anchos y sangrados medidos sobre el PNG original, en % para que el escalon
   se mantenga igual a cualquier tamano:
     bloque 1  x   0-946 de 1352  ->  ancho 70.0%, sangrado  0
     bloque 2  x 394-1164         ->  ancho 57.0%, sangrado 29.1%
     bloque 3  x 700-1350         ->  ancho 48.1%, sangrado 51.8%
   Alto de bloque 1.6em y solape vertical -0.62em: 3 bloques dan 635px de
   alto total, igual que el original.
   ================================================================== */
.yoy-enjoy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;  /* Fredoka llega hasta 700; más alto lo falsearía el navegador */
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -.01em;
	/* 89px a 1920, que es el tamano al que se veia el PNG dentro de su caja del 35.2% */
	font-size: clamp(20px, 4.6vw, 89px);
}

/* Los tres bloques se solapan en vertical. Si cada uno lleva su propio background,
   el fondo del bloque siguiente tapa el texto del anterior y «ENJOY» y «WITH» salen
   cortados. En el PNG original no pasaba porque estaba aplanado: primero los tres
   bloques y el texto encima. Se replica sacando el fondo a un ::before en z-index -1,
   asi los tres fondos pintan por debajo de los tres textos. */
.yoy-enjoy__l {
	position: relative;
	display: block;
	box-sizing: border-box;
	color: #03171d;
	padding: .30em .34em;
	text-align: center;
	white-space: nowrap;
}

.yoy-enjoy__l::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--yoy-amarillo);
	border-radius: .14em;
}

.yoy-enjoy__l:nth-child(1) { width: 70.0%; }
.yoy-enjoy__l:nth-child(2) { width: 57.0%; margin-left: 29.1%; margin-top: -.62em; }
.yoy-enjoy__l:nth-child(3) { width: 48.1%; margin-left: 51.8%; margin-top: -.62em; }

/* ==================================================================
   NAVEGACIÓN — hamburguesa pixel-art y botón de volver arriba
   (13 sep 2026). El marcado lo inyecta assets/js/yoy-nav.js.
   ================================================================== */

/* --- Hamburguesa -------------------------------------------------
   Elementor pinta dos SVG (abrir y cerrar) y alterna cuál se ve. Se ocultan
   y se pintan tres barras propias. El estado sigue siendo suyo: lo lee de
   aria-expanded, así que no hay JS de estado que se pueda desincronizar.
   Las tres barras van escalonadas como los bloques de «ENJOY WITH YOY»,
   y cada una lleva el color de una entrada del menú. */
.yoy-burger-host .elementor-menu-toggle__icon--open,
.yoy-burger-host .elementor-menu-toggle__icon--close,
.yoy-burger-host svg.e-font-icon-svg {
	display: none !important;
}

.elementor-menu-toggle.yoy-burger-host {
	background: none !important;
	padding: 6px !important;
	border: 0;
}

.yoy-burger {
	position: relative;
	display: block;
	width: 34px;
	height: 26px;
}

.yoy-burger__bar {
	position: absolute;
	left: 0;
	height: 5px;
	border-radius: 0;                       /* pixel art: esquinas vivas */
	transform-origin: 50% 50%;
	transition:
		width      .32s cubic-bezier(.34, 1.56, .64, 1),
		transform  .32s cubic-bezier(.34, 1.56, .64, 1),
		opacity    .18s linear,
		background .32s ease;
}

/* Escalón en reposo: ancho decreciente y sangrado creciente */
.yoy-burger__bar:nth-child(1) { top: 0;           width: 100%; background: var(--yoy-amarillo); }
.yoy-burger__bar:nth-child(2) { top: 10.5px;      width: 78%;  background: var(--yoy-magenta); transform: translateX(22%); }
.yoy-burger__bar:nth-child(3) { top: 21px;        width: 56%;  background: var(--yoy-violeta); transform: translateX(44%); }

/* Al pasar el ratón las barras se alinean: el escalón se «recoge» */
.elementor-menu-toggle.yoy-burger-host:hover .yoy-burger__bar:nth-child(2),
.elementor-menu-toggle.yoy-burger-host:focus-visible .yoy-burger__bar:nth-child(2) { width: 100%; transform: translateX(0); }
.elementor-menu-toggle.yoy-burger-host:hover .yoy-burger__bar:nth-child(3),
.elementor-menu-toggle.yoy-burger-host:focus-visible .yoy-burger__bar:nth-child(3) { width: 100%; transform: translateX(0); }

/* Abierto: aspa. La barra de en medio se va, las otras dos cruzan en amarillo. */
.elementor-menu-toggle[aria-expanded="true"] .yoy-burger__bar {
	width: 100%;
	background: var(--yoy-amarillo);
}
.elementor-menu-toggle[aria-expanded="true"] .yoy-burger__bar:nth-child(1) {
	transform: translateY(10.5px) rotate(45deg);
}
.elementor-menu-toggle[aria-expanded="true"] .yoy-burger__bar:nth-child(2) {
	transform: scaleX(0);
	opacity: 0;
}
.elementor-menu-toggle[aria-expanded="true"] .yoy-burger__bar:nth-child(3) {
	transform: translateY(-10.5px) rotate(-45deg);
}

/* --- Volver arriba -----------------------------------------------
   Pegatina cuadrada con sombra dura, sin difuminar: el mismo recurso visual
   que el resto de la marca. Aparece pasada media pantalla. */
.yoy-top {
	position: fixed;
	right: clamp(14px, 2vw, 28px);
	bottom: calc(clamp(14px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	display: grid;
	place-items: center;
	width: clamp(44px, 3.4vw, 58px);
	aspect-ratio: 1;
	padding: 0;
	border: 3px solid var(--yoy-bg);
	border-radius: 6px;
	background: var(--yoy-violeta-pill, #5e16fa);
	box-shadow: 4px 4px 0 var(--yoy-bg);
	cursor: pointer;
	/* Oculto hasta que se baja: sin pointer-events para que no tape nada */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(14px) scale(.85);
	transition: opacity .22s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1), visibility .22s;
}

.yoy-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.yoy-top svg { width: 58%; height: 58%; }
.yoy-top svg rect { fill: var(--yoy-amarillo); }

.yoy-top:hover,
.yoy-top:focus-visible {
	background: var(--yoy-amarillo);
	transform: translateY(-3px) scale(1.04);
	box-shadow: 6px 6px 0 var(--yoy-bg);
}
.yoy-top:hover svg rect,
.yoy-top:focus-visible svg rect { fill: var(--yoy-bg); }

.yoy-top:active { transform: translateY(0) scale(.96); box-shadow: 2px 2px 0 var(--yoy-bg); }
.yoy-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Quien pide menos movimiento no lo tiene: aparece y desaparece sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
	.yoy-burger__bar,
	.yoy-top { transition: opacity .01s linear, visibility .01s; }
	.yoy-top, .yoy-top.is-visible, .yoy-top:hover, .yoy-top:active { transform: none; }
}

/* --- Alineación del hamburguesa con el logo (13 sep 2026) ---------
   El desplegable de Elementor se queda en el flujo aunque esté cerrado: conserva
   80px de alto dentro del widget, que por eso mide 152px en vez de los 38 del botón.
   Consecuencia: el botón queda anclado arriba mientras el logo centra, y el header
   se infla a 176px. Sacando el desplegable del flujo, el widget mide lo que el botón
   y el `align-items: center` del header los alinea solo, sin tocar márgenes a ojo. */
@media (max-width: 1024px) {
	.yoy-header { position: relative; }

	/* Elementor pone `position: relative` en el propio widget de navegación, que en móvil
	   mide lo que el botón (46px). Si el desplegable se ancla ahí, sale de 46px de ancho y
	   los items se cortan. Pasando el widget a `static`, el ancestro posicionado pasa a ser
	   .yoy-header y el desplegable ocupa el ancho completo de la cabecera. */
	.yoy-header .yoy-header__nav { position: static !important; }

	/* OJO CON EL SELECTOR: `elementor-nav-menu--dropdown` NO identifica al panel del móvil.
	   Elementor le pone esa misma clase al `<ul class="sub-menu">` del desplegable de escritorio,
	   que en móvil también está en el DOM. Sin el `nav` delante, estas reglas se le aplicaban
	   también y lo sacaban en absoluto sobre el panel: al abrir el menú, «Novedades», «Concursos»,
	   «Menú» y «Contacto» desaparecían tapados por los hijos de Promos (24 sep 2026).
	   El panel es un `<nav>`; el submenú, un `<ul>`. De ahí el `nav.`.

	/* El alto lo controla esta hoja, no el `--menu-height` de Elementor: esa variable
	   solo resuelve con el panel en el flujo, y aquí va absoluto. El interruptor es la
	   clase .yoy-menu-abierto, que yoy-nav.js refleja desde su propio aria-expanded. */
	.yoy-header .yoy-header__nav nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 30;
		height: auto !important;
		max-height: 0;
		overflow: hidden;
		background: var(--yoy-bg);
		border-top: 3px solid var(--yoy-amarillo);
		transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
	}

	.yoy-header.yoy-menu-abierto .yoy-header__nav nav.elementor-nav-menu--dropdown {
		max-height: 70vh;
		overflow-y: auto;
	}

	/* Los enlaces llevan `padding: 0` por el menú horizontal de escritorio. En el
	   desplegable eso deja los items pegados al borde y sin zona de toque decente. */
	.yoy-header .yoy-header__nav nav.elementor-nav-menu--dropdown a.elementor-item {
		padding: 16px 20px !important;
		font-size: 22px;
		letter-spacing: .5px;
	}
	.yoy-header .yoy-header__nav nav.elementor-nav-menu--dropdown li + li {
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	/* Los hijos de «Promos», a la vista y sangrados. No se pliegan tras una flecha porque el
	   widget va sin icono de submenú: sin él Elementor no pinta el botón que los abriría y
	   quedarían inalcanzables desde el móvil. */
	.yoy-header .yoy-header__nav nav.elementor-nav-menu--dropdown .sub-menu {
		display: block !important;
		/* Elementor le pone fondo blanco por su cuenta: dentro del panel oscuro salía un ladrillo
		   blanco con el texto en blanco encima, o sea cuatro ítems invisibles. */
		background: none !important;
		border: 0;
	}
	.yoy-header .yoy-header__nav nav.elementor-nav-menu--dropdown .sub-menu a {
		padding: 12px 20px 12px 44px !important;
		font-family: var(--yoy-font-nav);
		font-stretch: var(--yoy-ancho);
		font-weight: 700;
		font-size: 18px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, .78);
	}

	/* El botón, a la derecha del todo: Elementor le mete márgenes automáticos
	   calculados sobre el ancho del widget inflado. */
	.yoy-header .yoy-header__nav .elementor-menu-toggle { margin: 0 !important; }
	.yoy-header .yoy-header__nav { margin-left: auto; }
}

/* ==================================================================
   Páginas legales (Aviso legal, Privacidad, Cookies) — 14 sep 2026
   Contenido clásico envuelto en .yoy-legal. Legible sobre el fondo
   de marca: columna estrecha, buen interlineado, titulares Fredoka.
   ================================================================== */
.yoy-legal {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(28px, 3vw, 44px) 24px clamp(64px, 7vw, 120px);
	font-family: var(--yoy-font-marca);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 400;
	font-size: clamp(16px, 1.15vw, 18px);
	line-height: 1.7;
	color: #cfe0e4;
}
.yoy-legal h1, .yoy-legal h2, .yoy-legal h3 {
	font-family: var(--yoy-font-marca);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.15;
}
.yoy-legal h1 { font-size: clamp(30px, 4vw, 52px); color: var(--yoy-amarillo); margin: 0 0 .6em; }
.yoy-legal h2 { font-size: clamp(20px, 2vw, 28px); margin: 1.8em 0 .5em; }
.yoy-legal h3 { font-size: clamp(18px, 1.6vw, 22px); margin: 1.4em 0 .4em; }
.yoy-legal p { margin: 0 0 1em; }
.yoy-legal ul { margin: 0 0 1.2em; padding-left: 1.4em; }
.yoy-legal li { margin: 0 0 .5em; }
.yoy-legal a { color: var(--yoy-amarillo); text-decoration: underline; text-underline-offset: 2px; }
.yoy-legal a:hover { color: #fff; }
.yoy-legal strong { color: #fff; }
/* Aviso de borrador y fecha, discretos */
.yoy-legal__nota {
	border-left: 3px solid var(--yoy-magenta);
	background: rgba(199,0,175,.08);
	padding: 14px 18px;
	border-radius: 8px;
	font-size: .9em;
	color: #e6b9dd;
}
.yoy-legal__fecha { margin-top: 2.5em; font-size: .85em; color: var(--yoy-gris); }

/* Título de página del tema en las legales: llevarlo a la columna del contenido y a la tipo de marca */
.site-main > .page-header {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(80px, 8vw, 140px) 24px 0;
}
.site-main > .page-header .entry-title {
	margin: 0;
	font-family: var(--yoy-font-marca);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--yoy-amarillo);
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.15;
}


/* --- Barra inferior del footer (5 oct 2026) ---
   Antes aquí se tapaba el texto con el logo de YOY Planet. Ahora el cliente quiere la razón
   social a la vista: el título del widget (yf_y) dice «YOY Planet Arcade Center S.L.» y sale
   como texto, con el mismo estilo que los enlaces legales (regla .yoy-footer de más arriba). */

/* El botón de volver arriba (.yoy-top, fijo abajo a la derecha) se montaba encima del logo de
   Grupo Orenes y cortaba «GRUPO». Se reserva a la derecha del footer lo que ocupa el botón:
   su `right` + su ancho + 4px de sombra + 20px de aire. Solo escritorio: hasta 1024px el footer va
   en columna centrada y el logo no llega a la esquina. */
@media (min-width: 1025px) {
	.yoy-footer {
		padding-right: max(4.4%, calc(clamp(14px, 2vw, 28px) + clamp(44px, 3.4vw, 58px) + 24px)) !important;
	}
}

/* Datos de contacto del footer (14 sep 2026): la dirección y los horarios reales son largos.
   Sin esto, el `nowrap` heredado de .yoy-links los desbordaba sobre la columna de enlaces legales.
   Se deja envolver el texto dentro de su columna (solo la columna con título de contacto). */
.yoy-links--titulo .elementor-icon-list-text,
.yoy-links--titulo .elementor-icon-list-item a { white-space: normal; }


/* ==================================================================
   REDISEÑO v2 — Figma «YOY-v2» (nodo 60:2), 15 sep 2026
   ------------------------------------------------------------------
   El cliente rehízo el Figma con Fredoka Expanded (antes estaba maquetado con
   Inter, que nunca llegó a servirse). Eso convierte las medidas del v2 en la
   recalibración buena: se aplican tal cual, sin los ajustes a ojo que pedía el v1.
   Cambios de fondo respecto al v1:
     · Promos deja de ser un collage de PNG y pasa a tres tarjetas de HTML real.
     · Carta deja de ser un carrusel de imágenes con el texto quemado y pasa a
       tres tarjetas de HTML real (entra una nueva de pizzas).
     · El degradado rojo→violeta se convierte en token de marca.
   ================================================================== */

:root {
	/* Degradado de marca. Sale del ENJOY (nodo 94:486) y de la pill LET'S PLAY
	   (nodo 94:683): los mismos siete stops, en horizontal o en diagonal. */
	--yoy-degradado: linear-gradient(90deg, #ff0000 0%, #ef0023 11%, #ce0070 36%, #b400ad 58%, #a100d9 77%, #9500f4 91%, #9100ff 100%);
	--yoy-degradado-diag: linear-gradient(290deg, #ff0000 0%, #ef0023 11%, #ce0070 36%, #b400ad 58%, #a100d9 77%, #9500f4 91%, #9100ff 100%);
	/* Degradado de las tarjetas «Arcade» (94:783) y «Combos» (94:830) */
	--yoy-degradado-card: linear-gradient(121.5deg, #fb0377 14%, #401394 102%);
	/* Filete del header (60:45). No sale del token de marca: este empieza en el
	   violeta de la tarjeta de Baile, toca el rojo pasada la mitad y termina en el
	   amarillo. Los stops están muestreados del render del nodo cada 5%. */
	--yoy-degradado-linea: linear-gradient(90deg, #6c20fa 0%, #9511d7 15%, #be01b4 30%, #d90073 40%, #f30021 50%, #ff0000 55%, #eeff02 100%);

	--yoy-violeta-baile: #6c20fa;   /* tarjeta Baile   (94:693) */
	--yoy-lima:          #defa1d;   /* tarjeta Premios (94:746) */
	--yoy-tinta:         #010a15;   /* texto sobre la tarjeta lima */
	--yoy-negro-card:    #0c1121;   /* caja «Juega + come + ahorra» (94:831) */
}

/* ------------------------------------------------------------------
   ENJOY WITH YOY — nodo 94:486
   Los tres escalones ya existían; el v2 cambia el relleno amarillo por el
   degradado de marca y el texto a blanco. El degradado es horizontal y recorre
   el bloque ENTERO, no cada línea por separado: por eso cada escalón pinta el
   degradado a la anchura del bloque (background-size) y lo desplaza a su
   posición (background-position). Los números salen de los anchos y márgenes
   de cada línea, unas líneas más abajo.
   ------------------------------------------------------------------ */
.yoy-enjoy__l { color: #fff; }

.yoy-enjoy__l::before {
	background: var(--yoy-degradado) no-repeat;
}
/* ancho del bloque / ancho de la línea  →  el degradado ocupa siempre el bloque */
.yoy-enjoy__l:nth-child(1)::before { background-size: 142.9% 100%; background-position-x: 0; }
.yoy-enjoy__l:nth-child(2)::before { background-size: 175.4% 100%; background-position-x: 67.7%; }
.yoy-enjoy__l:nth-child(3)::before { background-size: 207.9% 100%; background-position-x: 100%; }

/* ------------------------------------------------------------------
   Pill con degradado — «LET'S PLAY» (nodo 94:682)
   En el v1 era una imagen de neón; ahora es texto, como el resto de pills.
   ------------------------------------------------------------------ */
.yoy-pill--degradado .elementor-heading-title {
	background: var(--yoy-degradado-diag);
	color: #fff;
	letter-spacing: .06em;                       /* tracking 4.32px sobre 72px */
	font-size: clamp(28px, 3.75vw, 72px);        /* 72px a 1920 */
}

/* ==================================================================
   Tarjetas de Promos — nodos 94:693 (Baile), 94:746 (Premios), 94:783 (Arcade)
   El v1 eran cuatro PNG planos con el texto quemado (incluida una tarjeta
   «Socializa» que el v2 elimina). Ahora son tres tarjetas de HTML: el texto es
   texto, escala con la pantalla y se puede traducir y leer con un lector.
   ================================================================== */
.yoy-tarjeta {
	display: flex;
	align-items: stretch;
	gap: 1.2vw;                                  /* 23px */
	padding: .31vw;                              /* 6px */
	border-radius: 1.04vw;                       /* 20px */
	overflow: hidden;
	position: relative;
	color: #fff;
}
.yoy-tarjeta__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .9vw;
	padding: 1.05vw 1vw;                         /* ~20px */
}
.yoy-tarjeta__cab {
	display: flex;
	align-items: center;
	gap: .95vw;                                  /* 18px */
	margin: 0;
}
.yoy-tarjeta__icono {
	flex: none;
	height: clamp(30px, 3.85vw, 74px);
	width: auto;
}
.yoy-tarjeta__tit {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);       /* 36px a 1920 */
	line-height: 1.1;
	text-transform: uppercase;
}
.yoy-tarjeta__desc {
	margin: 0;
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.15vw, 22px);        /* 22px a 1920 */
	line-height: 1.25;
	max-width: 22ch;
}
.yoy-tarjeta__foto {
	flex: none;
	align-self: stretch;
	border-radius: 1.04vw;
	overflow: hidden;
}
.yoy-tarjeta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Baile (94:693) — violeta, foto ancha a la derecha */
.yoy-tarjeta--baile { background: var(--yoy-violeta-baile); }
.yoy-tarjeta--baile .yoy-tarjeta__foto { width: 55.1%; }        /* 430 de 781 */

/* Premios (94:746) — lima, texto en tinta y foto estrecha */
.yoy-tarjeta--premios { background: var(--yoy-lima); color: var(--yoy-tinta); }
.yoy-tarjeta--premios .yoy-tarjeta__foto { width: 39.8%; }      /* 245 de 615 */

/* Arcade (94:783) — degradado, y la máquina se sale de la tarjeta por arriba.
   La tarjeta no recorta (overflow visible) justo para dejarla asomar. */
.yoy-tarjeta--arcade {
	background: var(--yoy-degradado-card);
	overflow: visible;
	min-height: 16.72vw;                         /* 321px */
}
.yoy-tarjeta--arcade .yoy-tarjeta__info { max-width: 52.3%; }   /* 360 de 688 */
/* La máquina (94:792) mide 528px de alto sobre una tarjeta de 321: asoma por
   arriba y por abajo. Es el render del nodo, ya recortado, no la imagen original
   (que viene cuadrada y deformaba la proporción). */
.yoy-tarjeta__maquina {
	position: absolute;
	left: 52.3%;                                 /* 359.6 de 688 */
	top: -33.6%;                                 /* -107.8 de 321 */
	width: 45.8%;                                /* 314.8 de 688 */
	height: auto;
	pointer-events: none;
	z-index: 2;
}

/* ==================================================================
   Tarjetas de la Carta — nodos 94:830 (Combos), 94:807 (Pizzas), 94:815 (Resto)
   Carril con desplazamiento lateral y anclaje: en escritorio caben las tres,
   en móvil se pasan con el dedo. Sustituye al carrusel de imágenes del v1.

   Las medidas salen del Figma sobre una tarjeta de 508×273,5 y se pasan a % de
   la propia tarjeta, así que el encuadre se mantiene a cualquier ancho. Los
   cuerpos de letra van en vw porque el carril escala con la ventana.
   ================================================================== */
.yoy-carta-wrap { position: relative; }

.yoy-carril {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1.46vw;                                 /* 28px */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* La foto de Combos se sale de su tarjeta por arriba y por abajo (así está en
	   el diseño). `overflow-x: auto` recorta también en vertical, de modo que sin
	   este relleno la bebida y las patatas salían cortadas. El margen negativo
	   devuelve el hueco para que no empuje al resto de la sección. */
	padding-block: 3.2vw;
	margin-block: -3.2vw;
	/* El carril es un <ul> y traía el `padding-inline-start: 40px` del navegador,
	   asimétrico y contando como ancho: empujaba las tres tarjetas 40px a la
	   derecha y les robaba ese ancho al repartir las columnas (a 1920 salían de
	   484px en vez de 508 y arrancaban en 207 en vez de 167). `list-style: none`
	   en el <li> quita la viñeta pero NO el relleno de la lista.
	   Se sustituye por el mismo par que ya hay en vertical: relleno simétrico +
	   margen negativo. La caja de recorte de `overflow-x: auto` crece por los dos
	   lados —el combo de la primera tarjeta asoma 7,87% de tarjeta por la
	   izquierda y sin esto se cortaba en seco— y la caja de contenido se queda
	   donde estaba, así que las tarjetas no se mueven ni cambian de ancho. */
	padding-inline: 3.2vw;
	margin-inline: -3.2vw;
}
.yoy-carril::-webkit-scrollbar { display: none; }
.yoy-carril > * { scroll-snap-align: center; }

.yoy-menu-card {
	position: relative;
	aspect-ratio: 508 / 273.5;
	/* 19,26px a 1920 = 3,79% del ancho de la tarjeta, y la tarjeta mide 26,51vw:
	   sale 1vw justo. En cqw NO vale: `container-type` abre el contenedor para los
	   HIJOS, así que un cqw escrito en la propia tarjeta mide el antecesor (o la
	   ventana) y el radio se disparaba a 39px. */
	border-radius: 1vw;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
	list-style: none;
	/* La tarjeta es su propio contexto de medida: los cuerpos de letra van en cqw
	   (porcentaje del ancho de la tarjeta), así que la composición del diseño se
	   conserva igual a 1920 que a 390 sin recolocar nada por media query. Los
	   clamp en vw que hay debajo son el respaldo para navegadores sin soporte. */
	container-type: inline-size;
}

/* --- Tarjetas con foto (Pizzas y Resto de carta) ---
   El Figma NO encaja la foto: la amplía (165% y 125%) y la corre a la izquierda,
   de modo que el plato se ve grande y recortado. Con un `object-fit: cover` a
   secas la foto entra entera y el plato queda pequeño, que era el fallo. Los
   valores son los del nodo; el hueco que dejan por la derecha cae bajo el velo
   negro, así que no se ve. */
/* `img.` en el selector NO es adorno: `.elementor img { max-width: 100% }` tiene
   más especificidad (0,1,1) que una clase sola (0,1,0), así que el `max-width:
   none` no aplicaba y la foto se quedaba en el ancho de la tarjeta (381px en vez
   de 628 a 1440). Resultado: en vez de medio plato se veía una tira estrecha por
   la izquierda. Es la misma trampa que ya obligó a escribir
   `img.yoy-tarjeta__maquina` en Promos. */
img.yoy-menu-card__foto {
	position: absolute;
	z-index: -2;
	max-width: none;
	object-fit: cover;
}
.yoy-menu-card--pizzas .yoy-menu-card__foto { width: 164.77%; height: 167.09%; left: -78.69%; top: -31.61%; }
.yoy-menu-card--burger .yoy-menu-card__foto { width: 125.27%; height: 124.92%; left: -56.73%; top: -12.59%; }
/* Velo negro por el lado del texto (nodo 94:807).
   El Figma lo define en diagonal y CSS entiende exactamente esa notación: el
   ángulo y los stops van tal cual del nodo, sin convertir nada. La versión
   horizontal anterior perdía la inclinación (unos 22px de corrimiento entre el
   borde de arriba y el de abajo) y dejaba el corte 7px adelantado. */
.yoy-menu-card--pizzas::after,
.yoy-menu-card--burger::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(260.789deg, #000 49.588%, rgba(0,0,0,0) 73.795%);
}

.yoy-menu-card--pizzas .yoy-menu-card__info,
.yoy-menu-card--burger .yoy-menu-card__info {
	position: absolute;
	right: 1.14%;                                /* 5,778 de 508 */
	top: 50%;
	transform: translateY(-50%);
	width: 47.4%;                                /* 240,762 de 508 */
	height: 74.65%;                              /* 204,166 de 273,5 */
}
.yoy-menu-card--pizzas .yoy-menu-card__tit,
.yoy-menu-card--burger .yoy-menu-card__tit { position: absolute; left: 0; top: 5.13%; margin: 0; }
.yoy-menu-card--pizzas .yoy-menu-card__desc,
.yoy-menu-card--burger .yoy-menu-card__desc { position: absolute; left: 0; top: 40.72%; width: 76.68%; margin: 0; }
.yoy-menu-card--pizzas .yoy-menu-card__flecha,
.yoy-menu-card--burger .yoy-menu-card__flecha { position: absolute; left: 76%; top: 74.29%; margin: 0; }

.yoy-menu-card__tit {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(15px, 1.29vw, 25px);        /* 24,82px a 1920 */
	font-size: 4.89cqw;                          /* 24,82 de 508 */
	/* Interlineado del diseño, no uno a ojo: el bloque «Nuestra / Carta» (94:819)
	   mide 60px de alto para dos líneas de 24,82 → 30px de avance. */
	line-height: 1.21;
	text-transform: uppercase;
}
.yoy-menu-card__desc {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(13px, 1.1vw, 21px);         /* 21,19px a 1920 */
	font-size: 4.17cqw;                          /* 21,19 de 508 */
	/* Igual que el titular: sale de la caja del nodo, no de un valor cómodo.
	   «Hamburguesas, snacks…» (94:817) mide 69px para tres líneas de 21,19 → 23px
	   de avance; el reclamo de Combos (94:832), 56px para dos de 26,19 → 28px.
	   Con 1,25 la tercera línea caía 7px por debajo del diseño y se metía en la
	   flecha, que arranca justo donde acaba el párrafo. */
	line-height: 1.075;
}
.yoy-menu-card__flecha {
	display: block;
	width: clamp(30px, 2.71vw, 52px);            /* 52px a 1920 */
	width: 10.24cqw;                             /* 52 de 508 */
	height: auto;
}

/* --- Combos (94:830): degradado de marca, sin foto de fondo, y el combo asoma
       por la esquina inferior izquierda --- */
.yoy-menu-card--combos {
	background: var(--yoy-degradado-card);
	overflow: visible;
}
/* `img.` por lo mismo que en `__foto`: aquí el 72,33% no llega al tope, pero si
   alguien sube el ancho, el `max-width` de Elementor lo recortaría en silencio. */
img.yoy-menu-card__producto {
	position: absolute;
	left: -7.87%;                                /* -39,97 de 508 */
	top: -17.17%;                                /* -46,96 de 273,5 */
	width: 72.33%;                               /* 367,4 de 508 */
	aspect-ratio: 1;
	height: auto;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	z-index: 2;
}
.yoy-menu-card--combos .yoy-menu-card__tit {
	position: absolute;
	left: 46.03%;                                /* 233,8 de 508 */
	top: 20.01%;                                 /* 54,7 de 273,5 */
	margin: 0;
}
/* La caja oscura del reclamo (94:831) */
.yoy-menu-card--combos .yoy-menu-card__info {
	position: absolute;
	left: 43.63%;                                /* 221,7 de 508 */
	top: 35.37%;                                 /* 96,75 de 273,5 */
	width: 51.77%;                               /* 263 de 508 */
	height: 39.85%;                              /* 109 de 273,5 */
	background: var(--yoy-negro-card);
	border-radius: 3.94cqw;
}
.yoy-menu-card--combos .yoy-menu-card__desc {
	position: absolute;
	left: 14.22%;                                /* 37,4 de 263 */
	top: 21.48%;                                 /* 23,4 de 109 */
	width: 70.2%;                                /* 184,6 de 263 */
	margin: 0;
	/* El reclamo va más grande que la descripción de las otras dos tarjetas:
	   26,19px frente a 21,19px (nodos 94:832 y 94:809). */
	font-size: clamp(15px, 1.36vw, 26px);
	font-size: 5.16cqw;                          /* 26,19 de 508 */
	line-height: 1.2;
}
/* La flecha se sale de la caja por la derecha y por abajo, como en el diseño */
.yoy-menu-card--combos .yoy-menu-card__flecha {
	position: absolute;
	left: 84.43%;                                /* 222 de 263 */
	top: 66.97%;                                 /* 73 de 109 */
	margin: 0;
	z-index: 3;
}

/* --- Flechas del carril (reutilizan los SVG circulares del v1) ---
   El SVG ya trae su propio anillo (r 48 dentro de un lienzo de 116, o sea el
   82,8% de la caja): con el `border` del CSS encima salían DOS aros, el de fuera
   además más grande que el del diseño. Se quita el borde y el SVG se sirve a
   tamaño completo, que es como está compuesto el nodo. Cierra el pendiente del
   «doble aro» que venía del v1.
   Las flechas no van centradas con las tarjetas: en el Figma su eje queda un 5%
   del alto de la tarjeta por encima (centros en y=426,5 y 423,5 frente a los 440
   de las tarjetas). De ahí el margen negativo. */
.yoy-carril-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-top: -0.78vw;
	width: 6.04vw; height: 6.04vw;
	max-width: 116px; max-height: 116px;
	border: 0;
	border-radius: 50%;
	background: center / 100% no-repeat;
	font-size: 0;
	padding: 0;
	cursor: pointer;
	z-index: 3;
}
.yoy-carril-nav:hover { background-color: rgba(255,255,255,.12); }
/* Los desplazamientos no son simétricos porque en el diseño tampoco lo son: la
   flecha izquierda va pegada al borde del lienzo (x=0..116) y la derecha acaba
   22px antes del borde opuesto (x=1780..1896). El carril arranca en el 8,72% y
   acaba en el 91,17%, así que salen estos dos números. */
.yoy-carril-nav--prev { left: -8.72vw; background-image: url("/wp-content/uploads/2026/09/carta-flecha-izq.svg?v=2"); }
.yoy-carril-nav--next { right: -7.68vw; background-image: url("/wp-content/uploads/2026/09/carta-flecha-der.svg"); }
.yoy-carril-nav[disabled] { opacity: .35; cursor: default; }

/* ==================================================================
   Rediseño v2 — tablet y móvil
   El Figma no define estas vistas. Dos escalones en vez de uno:
     · 601–1024 (tablet): la tarjeta SIGUE siendo «foto al lado del texto»,
       a ancho completo. Apilarla aquí da fotos de 450px de alto y una sección
       de Promos de casi 3000px.
     · ≤600 (móvil): ya no caben las dos columnas, la foto pasa arriba.
   ================================================================== */
@media (max-width: 1024px) {
	/* --- Pills: en columna se quedaban sueltas, separadas por el gap de 20px de
	   la sección. Pegadas forman un bloque, como el escalonado del diseño (el
	   escalonado horizontal es un recurso de escritorio y aquí se pierde).
	   No sirve el selector de hermano adyacente: entre dos pills hay widgets
	   `.yoy-deco` que aquí van con display:none pero siguen siendo hermanos y
	   rompen la adyacencia. Se aplica a todas y se suma el escalón con un
	   sangrado por posición. --- */
	.yoy-seccion > .elementor-widget-heading.yoy-pill { margin-top: -12px; }
	.yoy-seccion > .elementor-widget-heading.yoy-pill .elementor-heading-title {
		font-size: clamp(22px, 4.4vw, 40px);
	}

	/* --- Tarjetas de Promos --- */
	.yoy-tarjeta {
		gap: 16px;
		padding: 10px;
		border-radius: 18px;
		align-items: center;
	}
	.yoy-tarjeta__info { padding: 10px 6px 10px 12px; gap: 12px; max-width: none !important; }
	.yoy-tarjeta__cab  { gap: 14px; }
	.yoy-tarjeta__icono { height: clamp(34px, 6vw, 56px); }
	.yoy-tarjeta__tit  { font-size: clamp(20px, 3.2vw, 30px); }
	/* 14px era texto corrido por debajo del mínimo cómodo de lectura en mano. */
	.yoy-tarjeta__desc { font-size: clamp(16px, 2.2vw, 18px); line-height: 1.35; max-width: none; }
	.yoy-tarjeta__foto {
		width: 42% !important;
		aspect-ratio: 4 / 3;
		border-radius: 12px;
		align-self: stretch;
	}

	/* La máquina deja de asomar por fuera: con la tarjeta a ancho completo medía
	   455x764 y desbordaba la pantalla. `img.` en el selector es necesario para
	   ganarle a `.elementor img { max-width: 100% }`, que tiene más especificidad
	   que una clase sola. */
	.yoy-tarjeta--arcade { min-height: 0; overflow: hidden; }
	.yoy-tarjeta img.yoy-tarjeta__maquina {
		position: static;
		width: auto;
		max-width: 38%;
		max-height: 230px;
		height: auto;
		object-fit: contain;
		align-self: center;
		margin-left: auto;
	}

	/* --- Carril de la Carta --- */
	.yoy-carril {
		grid-auto-columns: 62%;
		gap: 18px;
		scroll-padding-inline: 20px;
	}
	/* Las tarjetas no se tocan: van en % de sí mismas y en cqw, así que solo
	   cambia cuántas caben a la vez. */
	.yoy-menu-card { border-radius: 14px; }
	.yoy-carril-nav { display: none; }           /* en táctil se pasa con el dedo */

	.yoy-pill--degradado .elementor-heading-title { font-size: clamp(26px, 5.4vw, 44px); }

	/* La banda de la Galería va a sangre, como en el diseño: con el relleno lateral
	   de la sección se quedaba corta por la derecha. */
	.yoy-galeria .yoy-galeria__banda {
		margin-inline: -20px;
		width: calc(100% + 40px) !important;
	}

	/* El aire entre el carrusel de Juegos y Promos (clamp 100–200px) es para el pin
	   de escritorio. En táctil no hay pin y deja un vacío enorme. */
	.yoy-promos { margin-top: 40px; }
}

@media (max-width: 600px) {
	/* Móvil: la foto se va arriba y la tarjeta pasa a una columna. */
	.yoy-tarjeta { flex-direction: column; align-items: stretch; }
	.yoy-tarjeta__info { padding: 4px 8px 8px; }
	.yoy-tarjeta__foto {
		order: -1;
		width: 100% !important;
		aspect-ratio: 16 / 9;
	}
	.yoy-tarjeta img.yoy-tarjeta__maquina {
		order: -1;
		max-width: 62%;
		max-height: 260px;
		margin: 0 auto -6px;
	}

	/* --- Tarjetas de la Carta en móvil (16 sep 2026) ---
	   En escritorio el texto va en `cqw` (% del ancho de la tarjeta) y funciona
	   porque la tarjeta es ancha. En un móvil de 390 la tarjeta no pasa de ~300px
	   y ese `cqw` deja el titular en 14px y la descripción en 12 — miniaturas
	   ilegibles. Aquí se rompe el `cqw` y se pasa a px fijos, y se recolocan las
	   cajas de cada variante para que el texto quepa a ese cuerpo. La tarjeta va
	   casi a pantalla completa (90%) con un asomo de la siguiente, que además es
	   la pista de que el carril se desliza. */
	.yoy-carril { grid-auto-columns: 90%; gap: 12px; }
	.yoy-menu-card { aspect-ratio: 340 / 220; }
	.yoy-menu-card__tit  { font-size: 18px; line-height: 1.06; }
	.yoy-menu-card__desc { font-size: 14px; line-height: 1.25; }
	.yoy-menu-card__flecha { width: 34px; }

	/* Pizzas y Resto: la caja de texto ocupa algo más de la tarjeta para que la
	   descripción de tres líneas quepa a 14px sin recortarse. */
	.yoy-menu-card--pizzas .yoy-menu-card__info,
	.yoy-menu-card--burger .yoy-menu-card__info { width: 54%; height: 86%; }
	.yoy-menu-card--pizzas .yoy-menu-card__desc,
	.yoy-menu-card--burger .yoy-menu-card__desc { width: 94%; top: 48%; }

	/* Combos: el producto (bebida + hamburguesa + patatas) es enorme en pequeño y
	   pisaba la caja del reclamo. Se encoge y se pega a la esquina, el titular y la
	   caja se van a la derecha libres, y el reclamo se centra dentro con la flecha
	   anclada abajo a la derecha (con `position: static` deja de medir en % de la
	   tarjeta y el texto ya no se corta). */
	.yoy-menu-card--combos .yoy-menu-card__producto { width: 56%; left: -6%; top: auto; bottom: -6%; }
	.yoy-menu-card--combos .yoy-menu-card__tit  { left: 52%; top: 14%; }
	.yoy-menu-card--combos .yoy-menu-card__info {
		left: 50%; top: 36%; width: 47%; height: 50%;
		display: flex; align-items: center;
	}
	.yoy-menu-card--combos .yoy-menu-card__desc { position: static; width: auto; padding: 0 16% 0 12%; }
	.yoy-menu-card--combos .yoy-menu-card__flecha { left: auto; right: 6%; top: auto; bottom: 12%; }
}

/* --- Hero v2: foto nueva de la esquina inferior izquierda (nodo 94:544) ---
   El PNG ya viene girado desde Figma (-9,75°) con su transparencia, así que aquí
   no hace falta rotarlo: girarlo por CSS descuadraría la caja y el recorte. */
.yoy-hero__chica img { border-radius: 0; }
@media (max-width: 1024px) {
	.yoy-hero .yoy-hero__chica { display: none !important; }  /* en columna manda la foto del grupo */
}


/* ==================================================================
   Página 404 (plantilla 404.php del hijo)
   ------------------------------------------------------------------
   El error se cuenta como una partida perdida, con el mismo idioma que el
   resto del sitio: rótulo arcade, el degradado de marca en el número y los
   stickers pixel alrededor. Todo es texto: escala solo y se puede leer.
   ================================================================== */
.yoy-404 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(78vh, 900px);
	padding: clamp(56px, 8vw, 120px) 20px clamp(64px, 9vw, 140px);
	overflow: clip;
	background:
		linear-gradient(180deg, rgba(3,23,29,.86) 0%, rgba(3,23,29,.97) 70%, var(--yoy-bg) 100%),
		url("/wp-content/uploads/2026/09/hero-mapa-v2.jpg") center / cover no-repeat;
	text-align: center;
}

.yoy-404__inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
}

/* Rótulo arcade */
.yoy-404__over {
	margin: 0 0 clamp(14px, 1.6vw, 24px);
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(11px, 1.15vw, 20px);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--yoy-amarillo);
}

/* El número, con el degradado de marca recortado sobre el texto */
.yoy-404__code {
	margin: 0;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(96px, 17vw, 260px);
	line-height: .9;
	letter-spacing: -.02em;
	background: var(--yoy-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.yoy-404__tit {
	margin: clamp(10px, 1.4vw, 22px) 0 0;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 52px);
	line-height: 1.12;
	text-transform: uppercase;
	color: #fff;
}

.yoy-404__txt {
	margin: clamp(14px, 1.5vw, 22px) auto 0;
	max-width: 44ch;
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(15px, 1.15vw, 21px);
	line-height: 1.5;
	color: #cfe0e4;
}

/* Contador de vidas: el guiño arcade que remata el mensaje */
.yoy-404__vidas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: clamp(22px, 2.4vw, 34px) 0 0;
}
.yoy-404__vidas-txt {
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(9px, .78vw, 13px);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--yoy-gris);
}
.yoy-404__vidas-iconos { display: inline-flex; gap: 7px; }
.yoy-404__vidas-iconos img { width: clamp(18px, 1.5vw, 26px); height: auto; }
/* La tercera vida es la que se acaba de perder */
.yoy-404__vidas-iconos img:last-child { opacity: .28; filter: grayscale(1); }

.yoy-404__btn {
	display: inline-block;
	margin: clamp(26px, 2.8vw, 40px) 0 0;
	padding: .62em 1.3em;
	border-radius: 20px;
	background: var(--yoy-degradado-diag);
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(20px, 1.98vw, 38px);
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: transform .18s ease, filter .18s ease;
}
.yoy-404__btn:hover,
.yoy-404__btn:focus-visible { transform: translateY(-2px); filter: brightness(1.12); color: #fff; }

.yoy-404__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.1vw, 40px);
	margin-top: clamp(28px, 3vw, 46px);
}
.yoy-404__nav a {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(14px, 1.15vw, 21px);
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
}
.yoy-404__nav a:nth-child(1):hover { color: var(--yoy-amarillo); border-color: var(--yoy-amarillo); }
.yoy-404__nav a:nth-child(2):hover { color: var(--yoy-violeta);  border-color: var(--yoy-violeta); }
.yoy-404__nav a:nth-child(3):hover { color: var(--yoy-magenta);  border-color: var(--yoy-magenta); }
.yoy-404__nav a:nth-child(4):hover { color: var(--yoy-rojo);     border-color: var(--yoy-rojo); }

/* Desde que el 404 es una plantilla del Theme Builder, entre la sección y el
   contenido hay dos capas de Elementor. Ambas son `position: relative` por
   defecto, así que los stickers (absolutos) se anclaban al widget —una caja
   estrecha y centrada— y acababan encima del número. Se les quita el anclaje
   para que la referencia vuelva a ser la sección. */
.yoy-404 > .e-con-inner { position: static; width: 100%; max-width: none; }
.yoy-404 .elementor-widget-html,
.yoy-404 .elementor-widget-html > .elementor-widget-container,
.yoy-404 .elementor-widget-yoy-pantalla-404,
.yoy-404 .elementor-widget-yoy-pantalla-404 > .elementor-widget-container { position: static; }

/* --- Stickers pixel. Decorativos: se van en cuanto estorban al texto --- */
.yoy-404__deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.yoy-404__sticker { position: absolute; height: auto; }
.yoy-404__sticker--seta     { width: clamp(64px, 7vw, 132px);  top: 12%;  left: 8%;  animation: yoy-404-flota 5.5s ease-in-out infinite; }
.yoy-404__sticker--rayo     { width: clamp(52px, 5.6vw, 104px); top: 20%;  right: 10%; animation: yoy-404-flota 6.4s ease-in-out .4s infinite; }
.yoy-404__sticker--estrella { width: clamp(46px, 5vw, 94px);   bottom: 16%; left: 14%; animation: yoy-404-flota 7s ease-in-out .8s infinite; }
.yoy-404__sticker--corazon  { width: clamp(46px, 5vw, 94px);   bottom: 12%; right: 13%; animation: yoy-404-flota 6s ease-in-out .2s infinite; }

@keyframes yoy-404-flota {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-16px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
	.yoy-404__sticker { animation: none; }
	.yoy-404__btn { transition: none; }
}

@media (max-width: 1024px) {
	.yoy-404 { min-height: 0; padding: clamp(48px, 9vw, 90px) 20px clamp(56px, 10vw, 100px); }
	/* Los cuatro stickers se cierran sobre el texto en cuanto baja el ancho:
	   se quedan solo los dos de arriba, que no pisan nada. */
	.yoy-404__sticker--estrella,
	.yoy-404__sticker--corazon { display: none; }
	.yoy-404__sticker--seta { top: 4%; left: 2%; }
	.yoy-404__sticker--rayo { top: 6%; right: 3%; }
}

@media (max-width: 600px) {
	.yoy-404__sticker { display: none; }   /* a este ancho cualquier sticker estorba */
	.yoy-404__code { font-size: clamp(88px, 27vw, 140px); }
	.yoy-404__vidas { flex-direction: column; gap: 8px; }
	.yoy-404__nav { gap: 14px 22px; }
}


/* ==================================================================
   Pills escalonadas — una sola forma, no cajas apiladas
   ------------------------------------------------------------------
   En el Figma cada grupo («Juegos / Maquinas», «Promos / Premios / Y más»,
   «Let's / Play», «Nuestra / Carta», «Déjanos / Tu mensaje») es un **Union**:
   una única silueta en escalera. Montarlo como dos widgets sueltos hacía que
   el segundo tapara el texto del primero justo donde se solapan.

   Aquí cada línea pinta su fondo en un ::before por debajo del texto, de modo
   que se solapan las cajas pero nunca las letras. Es el mismo recurso que ya
   usa el rótulo ENJOY WITH YOY.

   El escalón de cada línea sale del Figma y viaja en dos variables (--dx y
   --dy, en em sobre el cuerpo del texto), porque cada grupo tiene el suyo.
   ================================================================== */
.yoy-pills {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(22px, 2.71vw, 52px);        /* 52px a 1920 */
	line-height: 1.2;
	text-transform: uppercase;
	margin: 0;
}

.yoy-pills__l {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	padding: .285em .525em;                      /* caja de 92px de alto sobre 52px */
	color: #fff;
	white-space: nowrap;
	margin-left: var(--dx, 0);
	margin-top: var(--dy, 0);
}
.yoy-pills__l:first-child { margin-left: 0; margin-top: 0; }

.yoy-pills__l::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;                                 /* el fondo, siempre por debajo de TODAS las letras */
	background: var(--yoy-magenta);
	border-radius: .385em;                       /* 20px sobre 52px */
}

.yoy-pills--violeta   .yoy-pills__l::before { background: var(--yoy-violeta-pill); }
.yoy-pills--amarillo  .yoy-pills__l::before { background: var(--yoy-amarillo); }
.yoy-pills--amarillo  .yoy-pills__l          { color: #000; }
.yoy-pills--degradado { font-size: clamp(28px, 3.75vw, 72px); letter-spacing: .06em; }
/* El degradado recorre el grupo ENTERO, no cada línea: en el Figma «LET'S» sale
   violeta y «PLAY» acaba en rojo, es una sola pasada de color sobre la escalera.
   Cada línea pinta el degradado a la anchura del bloque y lo desplaza a su sitio,
   igual que el rótulo ENJOY WITH YOY. */
.yoy-pills--degradado .yoy-pills__l::before {
	background: var(--yoy-degradado-diag) no-repeat;
	background-size: 121.07% 100%;
	background-position-x: 0;
}
.yoy-pills--degradado .yoy-pills__l:nth-child(2)::before {
	background-size: 118.39% 100%;
	background-position-x: 100%;
}

@media (max-width: 1024px) {
	/* Las pills son la etiqueta de la sección y van por encima del titular, como
	   en el diseño (52 contra 36 a 1920). Con el suelo antiguo en 22 quedaban por
	   DEBAJO del titular de sección y se perdía ese orden. */
	/* El suelo baja de 30 a 28: con 30 fijos, a 360 px la línea larga del contacto («Tu mensaje»,
	   10em de ancho) se comía el margen derecho entero. Con 7,4vw el cuerpo acompaña al ancho
	   real de la pantalla y a 1024 sigue topando en 40. (17 sep 2026) */
	.yoy-pills { font-size: clamp(28px, 7.4vw, 40px); }
	.yoy-pills--degradado { font-size: clamp(32px, 8vw, 44px); }
}

/* --- Hero v2: las dos fotos van giradas, como en el diseño ---------------
   El render del nodo venía con el fondo azul del lienzo pegado en las esquinas
   (al girar la foto, Figma rellena el hueco con el fondo del frame) y no hay
   forma de quitarlo por color: la foto tiene ese mismo azul dentro. Se usan las
   fotos originales, limpias y sin girar, y el giro lo pone el CSS con el ángulo
   del diseño. La caja del widget es la del contenido sin girar, no la del
   rectángulo que lo envuelve. */
.yoy-hero__gente img {
	aspect-ratio: 881 / 601.5;
	object-fit: cover;
	transform: rotate(-6.13deg);
}
.yoy-hero__chica img {
	aspect-ratio: 406 / 349;
	object-fit: cover;
	object-position: 42% center;
	border-radius: 1.04vw;                       /* 20px */
	transform: rotate(-9.75deg);
}
@media (max-width: 1024px) {
	/* En columna las fotos van rectas: girarlas deja cuñas vacías arriba y abajo. */
	.yoy-hero__gente img, .yoy-hero__chica img { transform: none; aspect-ratio: 16 / 10; }
}

/* ==================================================================
   v3 · PROMOS y CARTA editables (17 sep 2026, frame 202:2 «YOY-v3»)
   Las tarjetas las pinta Elementor Pro (Loop Grid / Loop Carousel) con las plantillas
   «Loop · Tarjeta de promo» y «Loop · Tarjeta de plato»; el color y las variantes llegan
   como clases de post_class() desde inc/yoy-cpt.php. Medidas del Figma sobre 1920.
   ================================================================== */
:root {
	--yoy-promo-amarillo:  #defa1d;
	--yoy-promo-violeta:   #6c20fa;
	--yoy-promo-rojo:      #ef0023;
	--yoy-promo-degradado: linear-gradient(121.5deg, #fb0377 14.1%, #401394 102.3%);
	--yoy-plato-fondo:     #0c1c23;
	--yoy-plato-degradado: linear-gradient(120.5deg, #ff0000 6.5%, #8200ff 100%);
	--yoy-etiqueta-degradado: linear-gradient(144.3deg, #ff0000 6.5%, #8200ff 100%);
}
/* Lienzos del v3 (alto de sección / 1920) */
.yoy-promos { min-height: 70.99vw; }   /* 1363 — nodo 202:175 */
.yoy-carta  { min-height: 42.34vw; }   /* 813  — nodo 202:32  */
.yoy-hero .yoy-hero__titulo .elementor-heading-title { color: var(--yoy-amarillo); }  /* v3: el titular vuelve al amarillo (202:97) */

/* --- Pill de tres líneas «Lo que / Te espera / Y más» (60:96): 551×221, textos a 52px --- */
.yoy-pills--3l .yoy-pills__l:nth-child(2) { --dx: 1.08em; }   /* 56px de 52 */
.yoy-pills--3l .yoy-pills__l:nth-child(3) { --dx: 5.48em; }   /* 285px */
/* --- Pill LET'S PLAY grande de la banda de fotos (243:301): texto 87px de caja ≈ 72px --- */
.yoy-pills--xl { font-size: clamp(28px, 3.75vw, 72px); }

/* --- Rejilla de promos: 2 columnas de 793 y 826 con 30 de calle, 65 entre filas --- */
.yoy-promos-grid .elementor-loop-container {
	display: grid;
	grid-template-columns: 793fr 826fr;
	column-gap: 1.5625vw;   /* 30px */
	row-gap: 3.385vw;       /* 65px */
	align-items: start;
}
/* El Loop Grid mete un primer hijo oculto en el contenedor, así que nth-child no vale: las medidas
   especiales van por variante de color, que es lo que el cliente elige en la promo. */
.yoy-promos-grid .e-loop-item { min-height: 14.11vw; }                                                         /* 271 */
.yoy-promos-grid .e-loop-item.yoy-promo--degradado { width: 86.76%; justify-self: end; min-height: 16.72vw; }  /* Novedades 688×321, a la derecha de su columna */
.yoy-promos-grid .e-loop-item.yoy-promo--rojo      { width: 72.64%; min-height: 16.09vw; }                    /* Concursos 600×309; el logo YOY se le monta encima a la derecha */

/* --- Tarjeta de promo --- */
.yoy-promo .yoy-promo-card { height: 100%; border-radius: 1.04vw; padding: .3125vw; gap: 1.2vw; color: #fff; overflow: visible; }
.yoy-promo--amarillo  .yoy-promo-card { background: var(--yoy-promo-amarillo); color: #0a1017; }
.yoy-promo--violeta   .yoy-promo-card { background: var(--yoy-promo-violeta); }
.yoy-promo--rojo      .yoy-promo-card { background: var(--yoy-promo-rojo); }
.yoy-promo--degradado .yoy-promo-card { background: var(--yoy-promo-degradado); }
.yoy-promo-card .yoy-promo-card__texto { padding: 1.25vw .5vw 1.25vw 1.6vw; gap: .83vw; justify-content: center; }   /* 31px de margen izq, 16 de gap */
.yoy-promo-card .yoy-promo-card__icono img { width: auto; height: 3.75vw; max-height: 82px; }   /* iconos de 63-82px */
.yoy-promo-card .yoy-promo-card__titulo .elementor-heading-title {
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: clamp(22px, 1.98vw, 38px); line-height: 1.2; text-transform: uppercase; color: inherit;
}
.yoy-promo-card .yoy-promo-card__desc { font-family: var(--yoy-font-marca); font-stretch: var(--yoy-ancho-texto); font-weight: 400; font-size: clamp(14px, 1.146vw, 22px); line-height: 1.35; color: inherit; max-width: 376px; }
.yoy-promo-card .yoy-promo-card__desc p { margin: 0; }
.yoy-promo-card .yoy-promo-card__foto { align-self: stretch; }
.yoy-promo-card .yoy-promo-card__foto img { width: 100%; height: 100%; min-height: 13.49vw; object-fit: cover; border-radius: 1.04vw; display: block; }   /* 330×259 */
/* Novedades: la máquina arcade sale de la tarjeta por arriba y por abajo (Asset 1-1, 248×416 en x411 y-50 de 688×321) */
.yoy-promo--degradado .yoy-promo-card { position: relative; }
.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__foto { position: absolute; left: 59.7%; top: -15.6%; width: 36%; height: auto; }
.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__foto img { min-height: 0; height: auto; border-radius: 0; object-fit: contain; }
/* Concursos: sin foto, el texto ocupa la tarjeta */
.yoy-promo--rojo .yoy-promo-card .yoy-promo-card__texto { width: 100%; }

/* --- Carrusel de la carta: tarjetas 500×280, calle de 61 --- */
.yoy-plato .yoy-plato-card {
	position: relative; aspect-ratio: 500 / 280; min-height: 0; border-radius: 1.003vw; padding: .52vw;
	background: var(--yoy-plato-fondo); color: #fff; overflow: hidden; isolation: isolate;
}
.yoy-plato--degradado .yoy-plato-card { background: var(--yoy-plato-degradado); }
.yoy-plato .yoy-plato-card::before {   /* vector decorativo de fondo (247:644): 672×557 en (-256,-148), blanco al 8% */
	content: ""; position: absolute; left: -51.3%; top: -52.9%; width: 134.5%; height: 199%;
	background: url("assets/img/carta-fondo.svg") no-repeat center / 100% 100%; opacity: .08; pointer-events: none; z-index: 0;
}
.yoy-plato .yoy-plato-card .yoy-plato-card__foto { position: absolute; inset: 0; width: 100% !important; max-width: none; z-index: 1; }
.yoy-plato .yoy-plato-card .yoy-plato-card__foto img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* El encuadre se resuelve recortando la foto en origen, no aquí: la etiqueta del precio ocupa
	   la esquina inferior derecha y cada plato necesita su propio recorte. */
	object-position: center center;
}
.yoy-plato .yoy-plato-card .yoy-plato-card__tag {
	position: relative; z-index: 2; width: auto; margin: 0 0 0 auto;
	padding: 1.04vw; gap: 1.5625vw; border-radius: 1.04vw; background: var(--yoy-etiqueta-degradado); color: #fff;
}
.yoy-plato--etiqueta-amarillo .yoy-plato-card .yoy-plato-card__tag { background: var(--yoy-amarillo); color: #000; }
.yoy-plato-card .yoy-plato-card__nombre .elementor-heading-title {
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: clamp(11px, .833vw, 16px); line-height: 1.2; text-transform: uppercase; color: inherit; max-width: 11.5em;
}
.yoy-plato-card .yoy-plato-card__precio .elementor-heading-title {
	font-family: var(--yoy-font-marca); font-weight: 700; font-size: clamp(22px, 1.98vw, 38px); line-height: 1; letter-spacing: -.06em; color: inherit; white-space: nowrap;
}
.yoy-plato-card .yoy-plato-card__precio .elementor-heading-title::after { content: "€"; font-size: .645em; letter-spacing: 0; }   /* 24,5px de 38 */
/* --- Cinta diagonal de OFERTA (casilla del plato): cruza la esquina superior izquierda y la recorta el overflow de la tarjeta --- */
.yoy-plato--oferta .yoy-plato-card::after {
	content: "OFERTA"; position: absolute; z-index: 3; top: 1.35vw; left: -3.65vw; width: 13vw; padding: .42vw 0;
	background: var(--yoy-amarillo); color: var(--yoy-plato-fondo);
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: clamp(11px, .833vw, 16px); line-height: 1.2; letter-spacing: .06em; text-align: center;
	transform: rotate(-45deg); pointer-events: none;
}
.yoy-carta .yoy-carta__carrusel .swiper-slide { height: auto; }

/* --- Carta v4 · tarjetas por categoría (29 sep 2026, Figma 864:2 «CARDS WEB 500×280») ---
   La categoría del plato (campo ACF → clase `yoy-plato--cat-*`) decide fondo, etiqueta de arriba y
   estilo del precio. La foto destacada ya trae el patrón de estrellas, la sombra y el producto en
   un PNG transparente de 1000×560 a sangre, así que aquí solo va el color de fondo: el vector
   `::before` de las tarjetas v3 se sustituye por la etiqueta de categoría.
   Medidas en cqw sobre la tarjeta (1 px de una tarjeta de 500 = 0,2cqw): se ve igual a cualquier ancho.
   Tipografía: el Figma usa Poppins; la web va en Fredoka Expanded, la de marca. */
/* Solo el contenedor: su relleno (10) y redondeo (19) siguen siendo los de la v3, en vw, porque un cqw escrito en
   el propio contenedor se mide contra el de fuera, no contra la tarjeta. */
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card { container-type: inline-size; }
.yoy-plato--cat-oferta   .yoy-plato-card { background: linear-gradient(136.97deg, #ff0000 8.333%, #8200ff 91.667%); }
.yoy-plato--cat-healthy  .yoy-plato-card { background: #0a2a33; }
.yoy-plato--cat-raciones .yoy-plato-card { background: #26083f; }
.yoy-plato--cat-bebidas  .yoy-plato-card { background: linear-gradient(141.9deg, #4d0aa8 8.333%, #24085c 91.667%); }

/* Etiqueta de categoría: 16/16 de la esquina, relleno 6/12, redondeo 8, 12px con tracking 1,2. Las ofertas no llevan. */
.yoy-plato.yoy-plato--cat-oferta .yoy-plato-card::before { content: none; }
.yoy-plato.yoy-plato--cat-healthy .yoy-plato-card::before,
.yoy-plato.yoy-plato--cat-raciones .yoy-plato-card::before,
.yoy-plato.yoy-plato--cat-bebidas .yoy-plato-card::before {
	position: absolute; left: 3.2cqw; top: 3.2cqw; z-index: 2;
	width: auto; height: auto; opacity: 1;
	padding: 1.2cqw 2.4cqw; border-radius: 1.6cqw;
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: 2.4cqw; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
	background: none;
}
.yoy-plato.yoy-plato--cat-healthy  .yoy-plato-card::before { content: "Healthy";  background: #c600af; color: #fff; }
.yoy-plato.yoy-plato--cat-raciones .yoy-plato-card::before { content: "Raciones"; background: #8200ff; color: #fff; }
.yoy-plato.yoy-plato--cat-bebidas  .yoy-plato-card::before { content: "Bebidas";  background: #edff00; color: #0c1c23; }

/* La cinta diagonal de OFERTA (casilla del plato) SÍ va en las ofertas, aunque el Figma 864:2 no la pinte:
   la pidió el usuario el 29 sep 2026. La marca carta-v4.php en la categoría «oferta». */

/* Etiqueta del precio: relleno 16/20, 22 entre nombre y precio, redondeo 20, a 10 del borde. */
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card .yoy-plato-card__tag {
	padding: 3.2cqw 4cqw !important; gap: 4.4cqw !important; border-radius: 4cqw;
	background: #fff; color: #0c1c23;
}
.yoy-plato.yoy-plato--cat-oferta .yoy-plato-card .yoy-plato-card__tag { background: #edff00; }
/* El nombre va en Fredoka de ancho normal, no Expanded: en esta etiqueta de 15px la Expanded es un 40 %
   más ancha que la Poppins del Figma y partía en tres líneas lo que el diseño pone en dos. */
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card__nombre .elementor-heading-title {
	font-stretch: var(--yoy-ancho-texto);
	font-size: 3cqw; line-height: 1.12; letter-spacing: .03em; max-width: 38cqw;   /* 15px, caja de 190 */
}
/* En las ofertas el Figma corta «HAMBURGUESA / + BEBIDA + PATATAS»: con 33cqw la primera línea no admite más. */
.yoy-plato.yoy-plato--cat-oferta .yoy-plato-card__nombre .elementor-heading-title { max-width: 33cqw; }
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card__precio .elementor-heading-title {
	font-size: 7.6cqw; letter-spacing: -.04em;                                  /* 38px, € a 26 */
}
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card__precio .elementor-heading-title::after { font-size: .684em; }
/* En los productos el precio va en degradado rojo → violeta sobre blanco. */
.yoy-plato--cat-healthy .yoy-plato-card__precio .elementor-heading-title,
.yoy-plato--cat-raciones .yoy-plato-card__precio .elementor-heading-title,
.yoy-plato--cat-bebidas .yoy-plato-card__precio .elementor-heading-title {
	background: linear-gradient(90deg, #ff0000, #8200ff);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Sin precio (8 oct 2026, petición del usuario): la etiqueta lleva solo el nombre, centrado. El campo
   «Precio» se queda en cada plato; para volver a enseñarlo basta con quitar este bloque. Sin el precio
   al lado, el nombre tiene sitio para 46cqw (230 px de una tarjeta de 500). */
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card__precio { display: none; }
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card .yoy-plato-card__tag { justify-content: center; }
.yoy-plato[class*="yoy-plato--cat-"] .yoy-plato-card__nombre .elementor-heading-title,
.yoy-plato.yoy-plato--cat-oferta .yoy-plato-card__nombre .elementor-heading-title { max-width: 46cqw; text-align: center; }

/* Chips de filtro de la Carta (yoy-carta-filtro.js). Mismo lenguaje que las pastillas: Fredoka
   Expanded en mayúsculas; el activo, en amarillo de marca. */
.yoy-carta-filtros { display: flex; flex-wrap: wrap; gap: .625vw; }
.yoy-carta-filtro {
	margin: 0; padding: .52vw 1.25vw;
	border: 2px solid #fff; border-radius: 999px; background: transparent; color: #fff;
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: clamp(12px, .9375vw, 18px); line-height: 1.2; text-transform: uppercase; white-space: nowrap;
	cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.yoy-carta-filtro[hidden] { display: none; }
.yoy-carta-filtro:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.yoy-carta-filtro.is-activo,
.yoy-carta-filtro.is-activo:hover { border-color: var(--yoy-amarillo); background: var(--yoy-amarillo); color: var(--yoy-bg); }
.yoy-carta-filtro:focus-visible { outline: 2px solid var(--yoy-amarillo); outline-offset: 3px; }
/* En móvil los cuatro chips van en una fila. Con «Para picar» (nombre del 29 sep, ya revertido) no cabían en Expanded (414 px en 351):
   aquí van en Fredoka de ancho normal y con 8 de relleno lateral. */
@media (max-width: 1024px) {
	.yoy-carta-filtros { flex-wrap: nowrap; gap: calc(6 * 100vw / 391); }
	.yoy-carta-filtro { padding: calc(5 * 100vw / 391) calc(8 * 100vw / 391); border-width: 1.5px; font-size: calc(11 * 100vw / 391); font-stretch: var(--yoy-ancho-texto); }
}

/* --- Volteo de la tarjeta de plato: el reverso lleva los valores nutricionales (21 sep 2026) ---
   Giran las dos caras a la vez (el frente de 0 a 180 y el reverso de -180 a 0) en lugar de un
   `preserve-3d` sobre la tarjeta: `.yoy-plato-card` necesita `overflow: hidden` para recortar la
   cinta de OFERTA, y el overflow aplana el 3D. El <article> del Loop hace de escena.
   Solo giran los platos con valores escritos, que son los que traen la clase --volteable. */
.yoy-plato--volteable { position: relative; perspective: 1200px; }
.yoy-plato--volteable .yoy-plato-card {
	cursor: pointer; backface-visibility: hidden;
	transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}
.yoy-plato--volteable.is-volteada .yoy-plato-card { transform: rotateY(180deg); }

.yoy-plato-card__dorso {
	position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 500 / 280; z-index: 4;
	container-type: inline-size;   /* todo lo de dentro se mide contra el ancho de la tarjeta */
	display: flex; flex-direction: column; justify-content: center;
	padding: 3cqw 3.6cqw; border-radius: 1.003vw; overflow: hidden; cursor: pointer;
	background: var(--yoy-plato-fondo); color: #fff;
	transform: rotateY(-180deg); backface-visibility: hidden;
	transition: transform .65s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;   /* de espaldas no debe tapar el botón del frente */
}
.yoy-plato--degradado .yoy-plato-card__dorso { background: var(--yoy-plato-degradado); }
.yoy-plato--volteable.is-volteada .yoy-plato-card__dorso { transform: rotateY(0deg); pointer-events: auto; }

/* Las medidas van en cqw (porcentaje del ancho de la tarjeta) y no en vw: la tarjeta tiene
   proporción fija, así que así el reverso ocupa exactamente lo mismo en escritorio que en
   móvil y no aparece scroll dentro de la tarjeta, que es justo lo que molestaba. */
.yoy-plato-card__dorso-titulo {
	margin: 0 0 1.2cqw; padding-right: 9cqw;   /* hueco para el botón de volver */
	color: var(--yoy-amarillo);
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: 4.2cqw; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em;
}
.yoy-plato-card__valores {
	display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 3cqw; margin: 0;
	font-family: var(--yoy-font-marca); font-stretch: var(--yoy-ancho-texto);
	font-size: 3.4cqw; line-height: 1.3;
}
.yoy-plato-card__valores dt,
.yoy-plato-card__valores dd {
	margin: 0; padding: .4cqw 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.yoy-plato-card__valores dt { opacity: .78; }
.yoy-plato-card__valores dd { font-weight: 700; text-align: right; white-space: nowrap; }
/* Fichas con muchos valores: el JS marca la lista y se aprieta un poco más. */
.yoy-plato-card__valores--largo { font-size: 3cqw; }
.yoy-plato-card__valores--largo dt, .yoy-plato-card__valores--largo dd { padding: .15cqw 0; }
.yoy-plato-card__dorso-nota {
	margin: 1.2cqw 0 0; opacity: .6;
	font-family: var(--yoy-font-marca); font-stretch: var(--yoy-ancho-texto);
	font-size: 2.6cqw; line-height: 1.25;
}

/* Pista de que la tarjeta gira: sin ella nadie lo descubre. Es un <button> de verdad para que
   funcione con teclado; el clic en el resto de la tarjeta lo añade yoy-flip.js. */
.yoy-plato-card__girar {
	position: absolute; z-index: 5; top: .9vw; right: .9vw;
	display: inline-flex; align-items: center; gap: .3em; padding: .42em .72em;
	border: 0; border-radius: 999px; cursor: pointer;
	/* Amarillo de marca y texto oscuro: es el único par que se lee igual sobre la foto del plato,
	   sobre el degradado y sobre el fondo oscuro. Con blanco al 20% desaparecía en las fotos claras. */
	background: var(--yoy-amarillo); color: var(--yoy-plato-fondo);
	/* Sin backdrop-filter: crea capa propia y el botón del reverso se colaba por el frente.
	   El backface-visibility explícito remata el recorte en Safari. */
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	font-family: var(--yoy-font-titular); font-stretch: var(--yoy-ancho); font-weight: 700;
	font-size: clamp(9px, .68vw, 13px); line-height: 1; text-transform: uppercase; letter-spacing: .03em;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.yoy-plato-card__girar::before { content: "\21BB"; font-size: 1.15em; line-height: 1; }   /* ↻ */
.yoy-plato-card__girar:hover { transform: scale(1.06); background: #fff; }
.yoy-plato-card__girar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* El de volver es solo el símbolo, en el mismo sitio: se gira y se vuelve desde la misma esquina. */
.yoy-plato-card__girar--volver {
	padding: 0; width: 1.9vw; height: 1.9vw; min-width: 30px; min-height: 30px;
	justify-content: center; border-radius: 50%;
	background: rgba(255, 255, 255, .18); color: #fff;
}
.yoy-plato-card__girar--volver::before { content: "\2190"; font-size: 1em; }
.yoy-plato-card__girar--volver:hover { background: var(--yoy-amarillo); color: var(--yoy-plato-fondo); }

@media (max-width: 768px) {
	.yoy-plato-card__dorso { border-radius: 19px; }
	.yoy-plato-card__girar { top: 10px; right: 10px; }
	.yoy-plato-card__girar--volver { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
}

/* Con el sistema en «menos movimiento» no se gira nada: las caras se cruzan en opacidad. */
@media (prefers-reduced-motion: reduce) {
	.yoy-plato--volteable .yoy-plato-card,
	.yoy-plato-card__dorso {
		transform: none !important; backface-visibility: visible;
		transition: opacity .25s linear;
	}
	.yoy-plato-card__dorso { opacity: 0; }
	.yoy-plato--volteable.is-volteada .yoy-plato-card { opacity: 0; pointer-events: none; }
	.yoy-plato--volteable.is-volteada .yoy-plato-card__dorso { opacity: 1; pointer-events: auto; }
}

/* --- Plegado en móvil (≤1024): las mismas reglas que el resto de secciones --- */
@media (max-width: 1024px) {
	.yoy-promos-grid .elementor-loop-container { grid-template-columns: 1fr; row-gap: 20px; }
	.yoy-promos-grid .e-loop-item, .yoy-promos-grid .e-loop-item.yoy-promo--degradado, .yoy-promos-grid .e-loop-item.yoy-promo--rojo { width: 100%; justify-self: stretch; min-height: 0; }
	.yoy-promo .yoy-promo-card { border-radius: 20px; padding: 6px; gap: 16px; flex-direction: column; }
	.yoy-promo-card .yoy-promo-card__texto { width: 100%; padding: 20px 18px 8px; gap: 12px; }
	.yoy-promo-card .yoy-promo-card__icono img { height: 56px; }
	.yoy-promo-card .yoy-promo-card__foto { width: 100% !important; }
	.yoy-promo-card .yoy-promo-card__foto img { min-height: 0; aspect-ratio: 330 / 200; border-radius: 16px; }
	.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__foto { position: static; width: 60% !important; margin: -40px auto 0; }
	.yoy-plato .yoy-plato-card { border-radius: 19px; padding: 10px; }
	.yoy-plato .yoy-plato-card .yoy-plato-card__tag { padding: 12px 14px; gap: 14px; border-radius: 14px; }
	.yoy-plato--oferta .yoy-plato-card::after { top: 17px; left: -47px; width: 167px; padding: 5px 0; font-size: 11px; }   /* la tarjeta baja a 335px: la cinta se escala igual (67%) o cruza demasiado */
	.yoy-pills--3l .yoy-pills__l:nth-child(3) { --dx: 3.2em; }
}
/* v3 · ajustes tras la primera comprobación a 1920 (17 sep) */
.yoy-promos-grid .e-loop-item { display: flex; }                       /* el article manda el alto; la tarjeta lo llena (height:100% necesita flex) */
.yoy-promo .yoy-promo-card { width: 100%; }
.yoy-promo-card .yoy-promo-card__icono img { width: 4.27vw; height: 3.75vw; object-fit: contain; object-position: left center; }   /* caja de 82×72; los SVG de Figma llevan preserveAspectRatio=none y sin caja se aplastan */
/* El `nowrap` que había aquí (17 sep) venía de la primera revisión a 1920, cuando los cuatro
   títulos eran de una palabra y partían feo. Al renombrar «Promos» → «Promos de juego»
   (23 sep 2026) se volvió en contra: el texto de esta tarjeta ocupa el 60% del ancho —la
   máquina va en absoluto sobre el otro 40%— y el título no cabía, así que se salía por
   debajo de la foto y se leía «PROMOS DE JUE…». Se deja partir: los títulos de una palabra
   siguen entrando en una línea, y los largos bajan a dos en vez de recortarse.
   `text-wrap: balance` reparte las dos líneas en vez de dejar una palabra suelta abajo. */
.yoy-promo-card .yoy-promo-card__titulo .elementor-heading-title {
	white-space: normal;
	text-wrap: balance;
}
.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__texto { width: 60%; }   /* 370 de 688: la máquina es absoluta, no compite por el ancho */
/* La galería deja salir la seta por arriba y el LET'S PLAY por abajo (en Figma invaden las secciones vecinas) */
.yoy-galeria { overflow: visible !important; position: relative; z-index: 3; }
.yoy-promos  { position: relative; z-index: 1; }
/* v3 · segunda comprobación a 1920 */
.yoy-promos-grid .e-loop-item > .yoy-promo-card { align-self: stretch; height: auto; min-height: 100%; }   /* la tarjeta llena el alto del article (321/309 en la fila 2) */
.yoy-promo .yoy-promo-card .yoy-promo-card__desc { max-width: 19.6vw !important; }   /* 376px: las descripciones parten en dos líneas como en Figma. Con el marcado optimizado de Elementor no hay .elementor-widget-container, así que va sobre el widget */
.yoy-promo-card .yoy-promo-card__icono { width: auto; }
.yoy-promo-card .yoy-promo-card__icono img { width: auto; height: 3.75vw; max-height: none; object-fit: contain; object-position: left center; }
/* v3 · «en Coslada!» del subtítulo del hero: MORADO PLANO. El Figma lo dibuja en degradado
   (nodo 202:98 y su gemelo móvil 297:22) pero el cliente lo quiere en color liso (17 sep 2026). */
.yoy-hero .yoy-hero__sub .yoy-acento {
	background: none;
	-webkit-background-clip: border-box; background-clip: border-box;
	color: var(--yoy-violeta-titulo); -webkit-text-fill-color: var(--yoy-violeta-titulo);
}
/* v3 · MÓVIL de las tarjetas de «Lo que te espera» — nodo 277:8 «M1 · Premios & Promos» (391×1066).
   Filas de 352×131: icono pixel a la izquierda, título a su derecha y la descripción debajo,
   alineada con el título. Sin fotos; la única imagen es la máquina de Novedades, que asoma por la
   derecha. Va al final del fichero para ganar a las reglas de escritorio. (17 sep 2026) */
@media (max-width: 1024px) {
	.yoy-promos-grid .elementor-loop-container { row-gap: 2.6vw; }            /* 10px sobre 391 */
	.yoy-promos-grid .e-loop-item { min-height: 0; }
	.yoy-promo .yoy-promo-card {
		flex-direction: row !important; align-items: stretch;
		gap: 0; padding: 0; border-radius: 18px; min-height: 33.5vw;          /* 131px */
		overflow: hidden;
	}
	/* El texto es una rejilla: icono a la izquierda ocupando las dos filas, título arriba y
	   descripción debajo, las dos alineadas al mismo margen (66px en el diseño). */
	.yoy-promo-card .yoy-promo-card__texto {
		width: 100% !important;
		display: grid !important;
		grid-template-columns: 7.7vw 1fr;                                     /* icono de 30px */
		column-gap: 4.1vw; row-gap: 1.6vw;
		align-content: center;
		padding: 5.1vw 5.1vw 5.1vw 5.1vw;                                     /* 20px */
	}
	.yoy-promo-card .yoy-promo-card__icono { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 100% !important; margin: 0; }
	.yoy-promo-card .yoy-promo-card__icono img { width: 100%; height: auto; max-height: none; object-fit: contain; }
	.yoy-promo-card .yoy-promo-card__titulo { grid-column: 2; grid-row: 1; }
	.yoy-promo-card .yoy-promo-card__desc   { grid-column: 2; grid-row: 2; }
	.yoy-promo-card .yoy-promo-card__titulo .elementor-heading-title { font-size: 5.6vw; line-height: 1.05; white-space: normal; }
	.yoy-promo .yoy-promo-card .yoy-promo-card__desc { font-size: 3.7vw; line-height: 1.3; max-width: 100% !important; }
	/* Sin fotos, salvo la máquina de Novedades (88×147 en el diseño, asomando por la derecha) */
	.yoy-promo-card .yoy-promo-card__foto { display: none !important; }
	.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__foto {
		display: block !important; position: absolute; right: 0; top: 0; left: auto; bottom: auto;
		width: 22.5vw !important; margin: 0; z-index: 2;
	}
	.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__foto img { width: 100%; height: auto; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: top right; border-radius: 0; }
	.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__texto { padding-right: 24vw; }
	.yoy-plato-card .yoy-plato-card__nombre .elementor-heading-title { font-size: 12px; }
	.yoy-plato-card .yoy-plato-card__precio .elementor-heading-title { font-size: 26px; }
}
/* v3 · flechas del carrusel de la carta donde las pone el Figma (202:33 y 202:36, 116px, y=499 de la sección; carrusel en x141,5-1778,5) */
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button { width: 6.04vw; height: 6.04vw; top: 50%; transform: translateY(-50%); }
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-prev { left: -1.33vw; }   /* 116 - 141,5 */
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-next { right: -5.6vw; }   /* 1886 - 1778,5 */
/* v3 · las flechas: prioridad sobre las reglas del v2 de arriba */
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button { width: 6.04vw !important; height: 6.04vw !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin: 0 !important; }
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-prev { left: -1.33vw !important; right: auto !important; }
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-next { right: -5.6vw !important; left: auto !important; }

/* ==================================================================
   v3 · JUEGOS — carrusel de Máquinas (17 sep 2026)
   Mismo widget y misma navegación que «Nuestra carta»: flechas fuera de las tarjetas en escritorio,
   puntos en móvil y bucle infinito (con avance automático lento que se para al tocarlo).
   Tarjeta 435×475 sobre 1920 (nodo 202:4), calle de 40.
   ================================================================== */
@media (min-width: 1025px) {
	.yoy-juegos .yoy-juegos__carrusel { left: 7.37% !important; width: 85.26vw !important; max-width: none !important; transform: none !important; }
}
/* En móvil el carril va a todo el ancho de la sección: con el 85% heredado de escritorio la
   tarjeta se apilaba a la derecha y se salía de la pantalla (17 sep 2026). */
@media (max-width: 1024px) {
	.yoy-juegos .yoy-juegos__carrusel { left: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important; }
}
.yoy-juegos .yoy-juegos__carrusel .swiper { overflow: hidden; }
.yoy-juegos .yoy-juegos__carrusel .swiper-slide { height: auto; }
.yoy-maquina .yoy-maquina-card { border-radius: 1.25vw; overflow: hidden; }
.yoy-maquina .yoy-maquina-card .yoy-maquina-card__img img {
	display: block; width: 100%; height: auto; aspect-ratio: 755 / 824; object-fit: cover;
}
/* Flechas fuera, igual que en la carta (el carril va de 141 a 1778 sobre 1920) */
.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button { width: 6.04vw; height: 6.04vw; max-width: 116px; max-height: 116px; top: 50%; transform: translateY(-50%); border: 3px solid #fff; border-radius: 50%; background: center / 60% no-repeat; color: transparent; font-size: 0; }
.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button svg, .yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button i { display: none; }
/* Sin !important gana el left:0 que Elementor imprime para el widget y los círculos se
   montaban encima de la primera y la última tarjeta. El carril de Juegos es más ancho que
   el de la carta (7,37vw de margen contra 7,29), así que los desplazamientos difieren un
   pelo para que las flechas caigan EXACTAMENTE donde las de «Nuestra carta» (8→124 y
   1781→1897 a 1920). (17 sep 2026) */
.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button-prev { left: -6.95vw !important; right: auto !important; background-image: url(/wp-content/uploads/2026/09/carta-flecha-izq.svg?v=2); }
.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button-next { right: -6.17vw !important; left: auto !important; background-image: url(/wp-content/uploads/2026/09/carta-flecha-der.svg); }
.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button:hover { background-color: rgba(255,255,255,.12); }
@media (max-width: 1024px) {
	.yoy-maquina .yoy-maquina-card { border-radius: 16px; }
}

/* ==================================================================
   v3 · BANDA DE FOTOS (galería) — tres fotos sueltas, no una imagen pegada
   (17 sep 2026). Antes era un JPEG con las tres montadas: las costuras se veían y en móvil
   quedaban tres tiras de 130px. Ahora son tres <img> y cada tamaño las coloca a su manera.
   ================================================================== */
.yoy-banda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; }
.yoy-banda__foto { display: block; width: 100%; height: 27.55vw; object-fit: cover; }   /* 529px sobre 1920 */
@media (max-width: 1024px) {
	/* En móvil tres columnas dejan tiras inservibles: pasa a carril deslizable con el dedo.
	   SIN margen negativo: el widget que la envuelve (`.yoy-galeria__banda`) ya sangra
	   -20px para anular el relleno de la sección, así que repetirlo aquí sacaba el carril
	   20px por cada lado y el documento medía 20px más que la pantalla. Eso es lo que
	   dejaba la franja vacía a la derecha en el móvil al hacer zoom out o arrastrar
	   (19 sep 2026): `body { overflow-x: clip }` del reset de Hello Elementor lo tapa en
	   escritorio, pero el área de scroll sigue siendo más ancha y iOS sí la enseña.
	   El `padding-inline` se queda: es el aire de la primera y la última foto. */
	.yoy-banda {
		display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 20px;
		margin-inline: 0; width: 100%;
	}
	.yoy-banda::-webkit-scrollbar { display: none; }
	/* 78vw para que asome la siguiente y se entienda que el carril sigue */
	.yoy-banda__foto { flex: 0 0 78vw; width: 78vw; height: 52vw; border-radius: 14px; scroll-snap-align: center; }
}

/* v3 · Flechas del carrusel de la carta: SIEMPRE fuera de las tarjetas, nunca a caballo
   (17 sep 2026, petición del cliente). El carril va de 141 a 1778 sobre 1920, así que las flechas
   caben en los márgenes con 16px de aire. */
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-prev { left: -6.9vw !important; }
.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-next { right: -6.9vw !important; }


/* v3 · móvil: menos aire entre secciones (en vertical el respiro de 1920 se hace hueco muerto).
   Entre «Let's play» y «Lo que te espera» había 124px: 48 de cierre de la galería + 28 de
   separación + 48 de apertura de promos. (17 sep 2026) */
@media (max-width: 1024px) {
	.yoy-seccion { padding-top: 24px !important; padding-bottom: 24px !important; }
	.yoy-promos { margin-top: 0; }
	/* La pill de promos se va a la derecha: con «Let's play» a la izquierda justo encima, el zigzag
	   llena el espacio y se lee mejor que dos bloques alineados al mismo lado. La escalera mantiene
	   la diagonal del diseño, pero anclada al borde derecho. */
	.yoy-promos .yoy-pills { align-items: flex-end; }
	.yoy-promos .yoy-pills__l { margin-left: 0; margin-right: var(--dxr, 0); }
	.yoy-promos .yoy-pills--3l .yoy-pills__l:nth-child(1) { --dxr: 1.5em; }
	.yoy-promos .yoy-pills--3l .yoy-pills__l:nth-child(2) { --dxr: .7em; }
	.yoy-promos .yoy-pills--3l .yoy-pills__l:nth-child(3) { --dxr: 0; }
}

/* v3 · menú móvil: el desplegable traía su propio borde amarillo de 3px y 10px de separación,
   que dejaban una línea suelta y un hueco justo debajo del filete del header (17 sep 2026).
   El separador es el filete del header; el desplegable arranca pegado a él. */
@media (max-width: 1024px) {
	nav.elementor-nav-menu--dropdown {
		margin-top: 0 !important;
		border-top: 0 !important;
	}
}

/* v3 · carta: los puntos solo en móvil (17 sep 2026). En escritorio manda con las flechas, que ya
   están fuera de las tarjetas; en móvil no hay margen lateral donde ponerlas y sin nada no se
   entendía que el carril se pudiera pasar. */
.yoy-carta .yoy-carta__carrusel .swiper-pagination,
.yoy-juegos .yoy-juegos__carrusel .swiper-pagination { display: none; }

/* ==================================================================
   v3 · HERO EN MÓVIL — maqueta propia del diseño (nodo 277:5 «M1 · Hero», 391×777)
   (17 sep 2026). Hasta ahora el hero se plegaba a una columna automática porque el diseño no
   definía la vista móvil; ya la define, así que se replica pieza a pieza. Todas las medidas son
   del nodo, en vw sobre 390. El hero vuelve a colocar por coordenadas, como en escritorio.
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-hero {
		position: relative;
		height: 199.2vw;                 /* 777 sobre 390 */
		min-height: 0;
		padding: 0 !important;
		display: block !important;
		overflow: clip;
	}
	.yoy-hero > .elementor-element { position: absolute !important; width: auto !important; max-width: none !important; }

	/* Foto del grupo: a sangre arriba, girada como en el diseño, y fundida con el fondo */
	.yoy-hero .yoy-hero__gente {
		order: 0; left: 0 !important; top: -10.7vw !important; width: 106.9vw !important; margin: 0 !important;
		transform: rotate(-6.13deg); transform-origin: 50% 50%; z-index: 1;
	}
	.yoy-hero .yoy-hero__gente img { width: 100%; height: 80vw; object-fit: cover; }
	/* Scrim: el degradado que funde la foto con el fondo (nodo 297:17, 140px desde y=132) */
	.yoy-hero::after {
		content: ""; position: absolute; left: 0; top: 33.8vw; width: 100%; height: 35.9vw;
		background: linear-gradient(180deg, rgba(3,23,29,0) 0%, #03171d 100%); z-index: 2; pointer-events: none;
	}

	.yoy-hero .yoy-hero__enjoy   { left: 11% !important; top: 38.5vw !important; width: 77.4vw !important; z-index: 4; }
	/* El cuerpo sale de la proporción del rótulo en escritorio (89px para 767px de caja = 0,116):
	   con 12.8vw el texto desbordaba su caja y «YOY» se salía por la derecha. */
	.yoy-hero .yoy-enjoy         { font-size: 8.6vw; }
	.yoy-hero .yoy-hero__pin     { display: block !important; left: 30.3% !important; top: 78.2vw !important; width: 13.8vw !important; z-index: 4; }
	.yoy-hero .yoy-hero__pin-sticker { display: block !important; left: 19.6% !important; top: 83.6vw !important; width: 34.4vw !important; z-index: 3; }
	.yoy-hero .yoy-hero__titulo  { left: 5.13% !important; top: 116.9vw !important; width: 89.7vw !important; z-index: 5; }
	.yoy-hero .yoy-hero__titulo .elementor-heading-title { font-size: 6.9vw; line-height: 1.1; }
	.yoy-hero .yoy-hero__sub     { left: 5.13% !important; top: 136.6vw !important; width: 89.7vw !important; z-index: 5; }
	.yoy-hero .yoy-hero__sub .elementor-heading-title { font-size: 5.33vw; line-height: 1.25; }
	.yoy-hero .yoy-hero__start   { left: 5.13% !important; top: 168.1vw !important; width: 39.1vw !important; z-index: 5; }
	.yoy-hero .yoy-hero__rayo    { display: block !important; left: 60.1% !important; top: 158.4vw !important; width: 14.9vw !important; z-index: 4; }
	/* El vídeo no está en la maqueta móvil: fuera (y se ahorran 2,3 MB en datos) */
	.yoy-hero .yoy-hero__video   { display: none !important; }
	.yoy-hero .yoy-hero__chica   { display: none !important; }
}

/* v3 · móvil: el texto que va bajo la pill de cada sección era demasiado grande (18px de mínimo
   del clamp de escritorio, en mayúsculas y con Fredoka Expanded ocupaba media pantalla).
   (17 sep 2026, petición del cliente) */
@media (max-width: 1024px) {
	.yoy-h .elementor-heading-title { font-size: clamp(13px, 3.9vw, 16px); line-height: 1.25; }
	.yoy-carta .yoy-h .elementor-heading-title,
	.yoy-contacto .yoy-h .elementor-heading-title { font-size: clamp(13px, 3.9vw, 16px); }
}

/* ==================================================================
   v3 · MÓVIL — carruseles de Carta y Máquinas
   El 17 sep se pusieron puntos en lugar de las flechas del diseño (nodo 277:9), pero con 40
   platos y 13 máquinas la fila de puntos no servía para nada. El 19 oct el usuario pide flechas a
   los lados. En móvil no hay margen fuera de la tarjeta (20 px), así que van sobre sus bordes,
   centradas en vertical: el mismo SVG de escritorio (ya trae su anillo blanco) a 44 px, el
   mínimo cómodo para el dedo. !important: los bloques de escritorio de más arriba fijan medida y
   posición con !important. El CSS personalizado del widget de Máquinas (Elementor) pone las
   flechas al 59 % del alto; en móvil se centran como las de la carta (el usuario, 19 oct), con un
   selector de más peso que el suyo. Su fondo transparente se respeta.
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-carta .yoy-carta__carrusel .swiper-pagination,
	.yoy-juegos .yoy-juegos__carrusel .swiper-pagination { display: none !important; }
	.yoy-carta .yoy-carta__carrusel .elementor-swiper-button,
	.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button {
		display: flex !important; width: 44px !important; height: 44px !important;
		top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; margin: 0 !important;
		border: 0; border-radius: 50%; background-position: center; background-size: 100%; background-repeat: no-repeat;
		z-index: 5;
	}
	.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-prev,
	.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button-prev { left: 8px !important; right: auto !important; }
	.yoy-carta .yoy-carta__carrusel .elementor-swiper-button-next,
	.yoy-juegos .yoy-juegos__carrusel .elementor-swiper-button-next { right: 8px !important; left: auto !important; }
	.yoy-juegos .elementor-element.yoy-juegos__carrusel.e-widget-swiper .elementor-swiper-button { top: 50% !important; }
}

/* ==================================================================
   v3 · MÓVIL — el escalón de las pills
   El desplazamiento de cada línea (--dx) sale del Figma de 1920 y en vertical se come
   el margen: a 390 px «Tu mensaje» acababa en 393 de 390, fuera de pantalla. Se limita
   el escalón a 1,2em, que conserva la escalera y deja el mismo aire a los dos lados.
   (17 sep 2026)
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-pills__l { margin-left: min(var(--dx, 0px), 1.2em); }
}



/* ---------------------------------------------------------------
   LANDING DE CUMPLEAÑOS (1.34.0, 24 sep 2026 · Figma nodo 321:364)

   Mismo patrón que las secciones de la home: el lienzo lleva la proporción en vw y las piezas van
   en absoluto en % desde Elementor. Aquí solo va lo que Elementor no controla bien.
   Hero: nodo 321:380, 1920×853 → 853/1920 = 44.43vw.
   --------------------------------------------------------------- */
.yoy-cumple-hero { min-height: 44.43vw; }

/* El hero NO recorta: la tarta se sale 104px por abajo y entra en la sección siguiente, tal como en
   el Figma (acaba en y=957 dentro de un lienzo de 853). Quien recorta es la foto, que sí tiene que
   cortarse limpia en el borde de la sección. Al dejar de recortar hay que ordenar el apilamiento
   con la sección de abajo, o la tarta quedaría tapada por ella. */
.yoy-cumple-hero  { overflow: visible !important; position: relative; z-index: 2; }
.yoy-cumple-pasos { position: relative; z-index: 1; }
.yoy-cumple-hero__foto { max-height: 100%; overflow: hidden; }

/* La foto está dibujada para que la recorte el marco: en el Figma mide 1488 y empieza en 608, o sea
   que se sale 176px por la derecha de un lienzo de 1920. Aquí no hay marco que recorte —la sección
   no puede llevar `overflow: hidden` porque la tarta se sale 104px por abajo a propósito— y esos
   176px hacían que la página se pudiera arrastrar en horizontal (comprobado: 156px de scroll).
   `clip-path` no vale: recorta lo que se pinta, pero no el área desplazable. Así que se recorta la
   caja: llega justo al borde (100% − 31,66%) y la imagen conserva dentro su tamaño original. */
.yoy-cumple-hero__foto {
	/* `!important` porque la regla de Elementor lleva tres clases (`.elementor-226
	   .elementor-element.elementor-element-cmp_hero_foto`) y gana a cualquier selector nuestro,
	   incluidas las variables: también las custom properties siguen la cascada. */
	width:     68.34% !important;
	max-width: 68.34% !important;
}
.yoy-cumple-hero__foto img { width: 77.52vw !important; max-width: none; }

/* La foto. El Figma la recorta a 1488×894, así que hay que imponer la proporción o se come el alto de
   la sección y tapa la tarta. Desde la revisión 731:677 (29 sep 2026) es una foto real de 2000×1336
   (`cumple2-hero-fondo.jpg`) que el Figma encaja con `cover` centrado; la anterior era cuadrada y
   se anclaba a la derecha. */
.yoy-cumple-hero__foto img {
	aspect-ratio: 1488 / 894;
	object-fit: cover;
	object-position: center center;
}

/* El diseño funde la foto con el fondo por su lado izquierdo (86°, opaca hasta el 18% y
   transparente al 47%). Es un velo SOBRE la imagen, no un fondo de contenedor.
   Va sobre el propio widget: esta versión de Elementor no envuelve las imágenes en
   `.elementor-widget-container`, así que ese selector no engancha nada. */
.yoy-cumple-hero__foto { position: relative; }
.yoy-cumple-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(86deg, var(--yoy-bg) 20.4%, rgba(3, 23, 29, 0) 53.3%); /* 268px y 699px sobre los 1312 de la caja */
	pointer-events: none;
}

/* Sin esto el subtítulo hereda el #333 del reset de Hello Elementor y se pierde sobre el fondo. */
.yoy-cumple-hero__sub { color: #fff; }

/* 68px sobre 1920 (nodos 395:376 y 395:377). El suelo de 30px evita que en portátiles pequeños la
   pastilla acabe más pequeña que el subtítulo, que es el fallo que ya dio la home. */
.yoy-cumple-hero__pill .yoy-pills { font-size: clamp(30px, 3.54vw, 68px); }

/* En el Figma esta pieza va espejada (nodo 401:1409). */
.yoy-cumple-hero__deco2 img { transform: scaleX(-1); }

/* Móvil: SUPERADO el 29 sep 2026 por el bloque «CUMPLEAÑOS · MÓVIL» (Figma 731:1518), que coloca el
   hero por coordenadas; este `order` ya no tiene efecto (la sección pasa a `display: block`). */
@media (max-width: 1024px) {
	.yoy-cumple-hero__pill  { order: 1; }
	.yoy-cumple-hero__sub   { order: 2; }
	.yoy-cumple-hero__tarta { order: 3; }
	.yoy-cumple-hero__foto  { order: 4; }
}

/* --- Sección 2 · Reserva en 3 pasos (nodo 395:407, 1920×813 → 42.34vw) --- */
.yoy-cumple-pasos { min-height: 42.34vw; }

/* Los números van en la pixelada de la marca, no en la «Minecraft» del Figma: mismo lenguaje y
   ya viene autoalojada (yoy-v2.css). 92,52px sobre 1920 → 4.82vw. */
.yoy-cumple-paso__num .elementor-heading-title {
	font-family: "Press Start 2P", "Courier New", monospace;
	font-size: clamp(30px, 4.82vw, 93px);
	line-height: 1;
	color: var(--yoy-amarillo);
}

/* 36px sobre 1920: lo mismo que `.yoy-h`, así que hereda y solo se le da color. */
.yoy-cumple-paso__tit .elementor-heading-title { color: #fff; }

/* 23px sobre 1920. El gris del Figma (#b8c4c7) es más claro que el --yoy-gris del pie, que se
   usa sobre fondo negro puro; aquí el fondo es el azul oscuro de marca y necesita más luz. */
.yoy-cumple-paso__desc {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(15px, 1.198vw, 23px);
	line-height: 1.5;
	color: #b8c4c7;
}
.yoy-cumple-paso__desc p { margin: 0; }

/* Las tres columnas se reparten solas; en móvil el patrón de .yoy-seccion las apila. */
.yoy-cumple-pasos__fila > .yoy-cumple-paso { flex: 1 1 0; min-width: 0; }

@media (max-width: 1024px) {
	.yoy-cumple-pasos__fila { flex-direction: column !important; }
	.yoy-cumple-pasos__pill { order: 1; }
	.yoy-cumple-pasos__fila { order: 2; }
}

/* --- Sección 3 · Agenda (nodo 395:223, 1920×734 → 38.23vw) ---
   El lienzo del Figma mide 734, pero su propio bloque de filas termina en 744: no cabe ni en el
   diseño. Y por debajo de 1512px el problema crece, porque los `clamp` del distintivo y del relleno
   dejan de encoger al ritmo del vw mientras el alto de la sección sí lo hace: el pie se comía la
   última fila. Así que el alto se calcula a partir de lo que miden de verdad las filas.
   Las filas arrancan al 26,7% del alto, luego para que quepan enteras con 8px de aire hace falta
   (filas + 8) / (1 − 0,267). El `max()` conserva la proporción del Figma cuando ya es suficiente. */
.yoy-cumple-agenda { min-height: 38.23vw; padding: 0; }

/* El bloque de filas es la única pieza de la landing que va en el flujo y no en absoluto.
   El motivo: su alto no se puede calcular. Por debajo de 1512px los títulos parten en dos líneas
   (medido a 1180: la fila pasa de 78 a 82px) y ninguna fórmula en vw lo adivina; en absoluto la
   sección no se enteraba y el pie se comía la última fila. En el flujo, la sección crece con ella.
   La colocación va en vw —196, 1075 y 173 sobre 1920— y por eso la sección se queda sin relleno:
   los 10px que Elementor pone por defecto desplazaban las cuatro filas. */
.yoy-cumple-agenda__filas {
	--width: 55.99vw;
	margin: 10.21vw 0 1.04vw 9.01vw;
	padding: 0;
}

/* La pastilla de esta sección es roja y el tema solo traía violeta, amarillo y degradado. */
.yoy-pills--rojo .yoy-pills__l::before { background: var(--yoy-rojo); }
.yoy-pills--rojo .yoy-pills__l          { color: #fff; }
.yoy-cumple-agenda__pill .yoy-pills     { font-size: clamp(30px, 3.54vw, 68px); }

/* Cada fila: distintivo cuadrado, texto que crece y chip de precio a la derecha.
   El alto NO se fija: sale de los 92px del distintivo más 18px arriba y abajo, que es como está
   armado el Figma (18+92+18 = 128). Así el texto nunca se sale si el cliente escribe de más.
   El fondo #04161C es casi el del lienzo a propósito: solo insinúa la fila, no la encajona. */
.yoy-cumple-agenda__fila {
	background: #04161c;
	border-radius: clamp(12px, 1.25vw, 24px);
	padding: clamp(10px, .94vw, 18px) clamp(14px, 1.46vw, 28px) clamp(10px, .94vw, 18px) clamp(10px, .94vw, 18px);
}

/* El reparto de la fila hay que pedírselo a Elementor por sus variables, no por `flex`.
   Un contenedor interno sale con `--flex-basis: auto`, `--flex-shrink: 0` y `--width: 100%`, y esas
   reglas ganan a las nuestras por especificidad: el bloque de texto se quedaba con los 1009px
   enteros, el envoltorio del distintivo en 0 —el título se montaba encima— y el chip se salía por
   la derecha. Tocando las variables se juega con el sistema de Elementor en vez de contra él. */
.yoy-cumple-agenda__badge-wrap { flex: 0 0 auto; width: clamp(56px, 4.79vw, 92px); }
.yoy-cumple-agenda__texto {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 0%;
	--width: auto;
	min-width: 0;
}

/* Distintivo amarillo: dos líneas, la de arriba grande y la de abajo pequeña en mayúsculas. */
.yoy-cumple-agenda__badge {
	display: grid;
	place-content: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: clamp(8px, .63vw, 12px);
	background: var(--yoy-amarillo);
	color: var(--yoy-bg);
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 700;
	text-align: center;
	gap: 2px;
}
.yoy-cumple-agenda__badge b { display: block; font-weight: 700; font-size: clamp(14px, 1.46vw, 28px); line-height: 1; }
.yoy-cumple-agenda__badge i {
	display: block; font-style: normal; font-weight: 700;
	font-size: clamp(8px, .573vw, 11px); line-height: 1.15;
	text-transform: uppercase; letter-spacing: .06em;
}

.yoy-cumple-agenda__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(16px, 1.534vw, 29px);
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.yoy-cumple-agenda__nota {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(12px, .833vw, 16px);
	line-height: 1.15;
	color: #b8c4c7;
}
.yoy-cumple-agenda__nota p { margin: 0; }

/* Chip de precio: rojo, redondeado, nunca parte en dos líneas. */
.yoy-cumple-agenda__chip {
	flex: 0 0 auto;
	background: var(--yoy-rojo);
	color: #fff;
	border-radius: 999px;
	padding: clamp(4px, .365vw, 7px) clamp(10px, .729vw, 14px);
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(13px, 1.378vw, 26px);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.yoy-cumple-agenda__chip p { margin: 0; }

@media (max-width: 1024px) {
	.yoy-cumple-agenda__pill  { order: 1; }
	.yoy-cumple-agenda__filas { order: 2; margin: 0; --width: 100%; }
	/* El chip baja debajo del texto: a lo ancho del móvil no caben distintivo, texto y precio. */
	.yoy-cumple-agenda__fila  { flex-wrap: wrap !important; }
	.yoy-cumple-agenda__chip  { margin-left: calc(clamp(56px, 4.79vw, 92px) + 32px); }
}

/* --- Secciones 4, 5 y 6 · Merienda, Snack Time y Refrescos --------------
   (nodos 321:408 1920×866, 321:852 1920×761 y 321:899 1920×1091)

   Las tres comparten el componente TARJETA DE ARTÍCULO, que pinta una sola plantilla de Loop. Lo
   que cambia de una fila a otra —si hay cartón de color, si el nombre va en pastilla y de qué
   color— llega por la clase `yoy-articulo--fila-<fila>` que `post_class()` cuelga del artículo.
   -------------------------------------------------------------------------- */
.yoy-cumple-merienda  { min-height: 45.10vw; }
.yoy-cumple-snack     { min-height: 39.64vw; }
.yoy-cumple-refrescos { min-height: 56.82vw; overflow: hidden; }

/* Las tarjetas de Merienda se salen 40px por abajo, como en el Figma, así que esa sección no
   recorta y hay que ordenarla por encima de la siguiente para que no se la coma. */
.yoy-cumple-merienda { overflow: visible !important; position: relative; z-index: 2; }
.yoy-cumple-snack    { position: relative; z-index: 1; }

/* Revisión 731:677: la pastilla de Merienda pasa del degradado a amarillo, con el texto en el azul
   oscuro de marca (#03171d), no en el negro que trae `yoy-pills--amarillo`. */
.yoy-cumple-merienda .yoy-cumple-arts__pill .yoy-pills__l { color: var(--yoy-bg); }

/* El reclamo de cada sección. La revisión 731:677 ya da los cuerpos: 36px en Merienda y 46px en
   Snack y Refrescos, con interlínea «normal» de Fredoka (132/3 y 168/3 → 1,22). */
.yoy-cumple-arts__claim {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);
	line-height: 1.22;
	text-transform: uppercase;
	color: #fff;
}
.yoy-cumple-arts__claim p      { margin: 0; }
.yoy-cumple-arts__claim strong { color: var(--yoy-amarillo); font-weight: inherit; }
.yoy-cumple-snack     .yoy-cumple-arts__claim,
.yoy-cumple-refrescos .yoy-cumple-arts__claim { font-size: clamp(20px, 2.396vw, 46px); }

/* --- La rejilla --------------------------------------------------------- */
/* Columnas iguales. Sin esto el Loop Grid las dimensiona por el contenido y salían de cuatro
   anchos distintos (378, 480, 506, 462). */
.yoy-articulos-grid .elementor-grid { gap: 0; }
.yoy-articulos-grid .e-loop-item    { display: flex; justify-content: center; align-items: flex-start; }
.yoy-cumple-merienda  .elementor-grid { grid-template-columns: repeat(4, 1fr); }
.yoy-cumple-snack     .elementor-grid { grid-template-columns: repeat(2, 1fr); }
.yoy-cumple-refrescos .elementor-grid { grid-template-columns: repeat(3, 1fr); }

/* --- La tarjeta, base --------------------------------------------------- */
.yoy-articulo-card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}
.yoy-articulo-card__foto img {
	width: 100%;
	/* `!important` porque `.elementor-widget-image img` de Elementor lleva dos clases y gana: sin
	   esto la foto se queda en su alto natural (658 sobre una caja de 517) y se sale de la tarjeta. */
	height: 100% !important;
	object-fit: contain;
}
.yoy-articulo-card__nombre .elementor-heading-title {
	display: inline-block;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	/* Elementor trae `word-break: break-word` y partía «SÁNDWICH» en «SÁNDWIC / H». Que salte de
	   palabra, no de letra: si un nombre no cabe, mejor dos líneas que una palabra rota. */
	word-break: normal;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* --- Variante MERIENDA: cartón de color girado y pastilla oscura --------- */
/* El lado del cartón sale de deshacer el giro del Figma: los marcos miden 434 y 406 porque son la
   caja EXTERIOR de un cuadrado de ~378 girado 9,3° y 4,3°.
   Va en vw y no en % de la columna: con `aspect-ratio` y un ancho en % el navegador entra en un
   bucle —la columna mide lo que mida el contenido y el contenido lo que mida la columna—. */
.yoy-articulo--fila-merienda .yoy-articulo-card {
	width: 19.69vw;               /* 378 sobre 1920 */
	aspect-ratio: 1;
	border-radius: 7.4%;          /* 28 sobre 378 */
	padding: 0 0 14%;
	background: var(--yoy-degradado-art);
	transform: rotate(var(--giro, -9.3deg));
}
:root { --yoy-degradado-art: linear-gradient(110deg, #ff0000 0%, #ce0070 36%, #a100d9 77%, #9100ff 100%); }

.yoy-articulo--amarillo.yoy-articulo--fila-merienda .yoy-articulo-card { background: var(--yoy-amarillo); }
.yoy-articulo--rojo.yoy-articulo--fila-merienda     .yoy-articulo-card { background: var(--yoy-rojo); }
/* 731:677: el violeta es liso (#8200ff), ya no degradado. El «degradado» sigue disponible como estilo. */
.yoy-articulo--violeta.yoy-articulo--fila-merienda  .yoy-articulo-card { background: var(--yoy-violeta); }

/* Giro y altura por puesto en la fila. Cuatro valores que se repiten: un quinto artículo hereda el
   de la primera tarjeta y la fila sigue teniendo ritmo sin tocar nada. */
.yoy-articulo--fila-merienda.yoy-articulo--pos-1 .yoy-articulo-card { --giro: -9.3deg; }
.yoy-articulo--fila-merienda.yoy-articulo--pos-2 .yoy-articulo-card { --giro:  4.3deg; }
.yoy-articulo--fila-merienda.yoy-articulo--pos-3 .yoy-articulo-card { --giro: -4.3deg; }
.yoy-articulo--fila-merienda.yoy-articulo--pos-4 .yoy-articulo-card { --giro:  9.3deg; }
.yoy-articulo--fila-merienda.yoy-articulo--pos-1 { margin-top:  4.09vw; }  /* centros del Figma:  */
.yoy-articulo--fila-merienda.yoy-articulo--pos-2 { margin-top: -1.22vw; }  /* 689,7 · 587,5 ·     */
.yoy-articulo--fila-merienda.yoy-articulo--pos-3 { margin-top: -2.58vw; }  /* 561,4 · 605,5,      */
.yoy-articulo--fila-merienda.yoy-articulo--pos-4 { margin-top: -0.29vw; }  /* contra los 611 medios */

/* La foto se sale por arriba del cartón y NO gira con él: en el diseño el producto está derecho y
   lo torcido es el cartón de detrás. De ahí el giro contrario. */
.yoy-articulo--fila-merienda .yoy-articulo-card__foto {
	position: absolute;
	left: -12%; top: -14%;
	width: 124% !important;
	max-width: none !important;
	height: 72%;
	transform: rotate(calc(-1 * var(--giro, -9.3deg)));
}
.yoy-articulo--fila-merienda .yoy-articulo-card__foto img { object-position: center bottom; }

/* El nombre: pastilla oscura que crece hacia arriba si ocupa dos líneas. Se le deja desbordar el
   cartón por los lados, como en el Figma, para que quepan los nombres largos. */
.yoy-articulo--fila-merienda .yoy-articulo-card__nombre { width: 110%; }
.yoy-articulo--fila-merienda .yoy-articulo-card__nombre .elementor-heading-title {
	background: var(--yoy-bg);
	border-radius: 999px;
	padding: clamp(8px, .976vw, 19px) clamp(12px, 1.464vw, 28px);
	font-size: clamp(15px, 1.953vw, 37px);
}

/* --- Variante SNACK: sin cartón, el nombre suelto debajo -----------------
   Foto en una caja de 517 (nodo 321:880) y el nombre 23px más abajo (321:894). */
.yoy-articulo--fila-snack .yoy-articulo-card { gap: 1.18vw; }
.yoy-articulo--fila-snack .yoy-articulo-card__foto {
	width: 100% !important;
	max-width: none !important;
	height: 26.93vw;
}
.yoy-articulo--fila-snack .yoy-articulo-card__nombre .elementor-heading-title {
	font-size: clamp(14px, 1.46vw, 28px);
	line-height: 1.25;
}

/* --- Variante REFRESCOS: pastilla amarilla montada sobre el pie -----------
   La caja va de 331,9 a 875,7 (543,8 de alto) y la pastilla se apoya en su borde inferior, que es
   donde el Figma la monta encima de las botellas (nodos 410:8, 393:17/25/29). */
.yoy-articulo--fila-refresco .yoy-articulo-card { height: 28.32vw; }
.yoy-articulo--fila-refresco .yoy-articulo-card__foto {
	position: absolute;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
}
.yoy-articulo--fila-refresco .yoy-articulo-card__foto img { object-position: center bottom; }
.yoy-articulo--fila-refresco .yoy-articulo-card__nombre { position: relative; }
.yoy-articulo--fila-refresco .yoy-articulo-card__nombre .elementor-heading-title {
	background: var(--yoy-amarillo);
	color: var(--yoy-bg);
	border-radius: clamp(8px, .83vw, 16px);
	padding: clamp(8px, .87vw, 17px) clamp(12px, 1.26vw, 24px);
	font-size: clamp(14px, 1.56vw, 30px);
}

@media (max-width: 1024px) {
	.yoy-cumple-arts__pill  { order: 1; }
	.yoy-cumple-arts__claim { order: 2; }
	.yoy-articulos-grid     { order: 3; }
	.yoy-cumple-merienda .elementor-grid,
	.yoy-cumple-snack    .elementor-grid,
	.yoy-cumple-refrescos .elementor-grid { grid-template-columns: 1fr; }
	/* Sin giros ni escalones: en columna no hay fila que ritmar y la tarjeta girada se sale. */
	.yoy-articulo--fila-merienda .yoy-articulo-card { --giro: 0deg; width: min(78vw, 360px); }
	.yoy-articulo--fila-merienda[class*="yoy-articulo--pos-"] { margin-top: 0; }
	.yoy-articulo--fila-snack    .yoy-articulo-card__foto { height: min(70vw, 340px); }
	.yoy-articulo--fila-refresco .yoy-articulo-card       { height: min(74vw, 360px); }
}

/* --- Revisión 29 sep 2026 · Figma 731:677 «YOY-Cumpleaños» ---------------------------------------
   Ajustes sobre lo montado, no una maqueta nueva. Todo va colgado de clases que SOLO tiene esta
   landing: `yoy-cumple-pasos--cumple` y `yoy-cumple-agenda--cumple` porque Concursos reutiliza
   `yoy-cumple-pasos` y Promos/Concursos `yoy-cumple-agenda`; hero y artículos ya eran exclusivos. */

/* «Panini (pan pizza)»: la aclaración baja de línea a 21,5 sobre 39,35 (lo envuelve inc/yoy-cumple.php). */
.yoy-articulo-card__aclaracion { display: block; font-size: .548em; line-height: 1.2; }

/* Las filas de la Agenda van en su tarjeta #0a2a33 (antes #04161c, casi invisible) y arrancan en x=160. */
.yoy-cumple-agenda--cumple .yoy-cumple-agenda__fila { background: #0a2a33; }

@media (min-width: 1025px) {
	/* Pastillas. En el 731:677 TODAS miden 110,8px de alto, lleven el cuerpo que lleven (62,5, 68 o
	   72,5), con el texto a 31px del borde y 108 entre el alto de una línea y el de la siguiente (se
	   solapan 3px). Con el relleno general en em salían de 92 a 127 según el cuerpo. */
	.yoy-cumple-hero .yoy-pills__l,
	.yoy-cumple-pasos--cumple .yoy-pills__l,
	.yoy-cumple-agenda--cumple .yoy-pills__l,
	.yoy-cumple-arts .yoy-pills__l {
		padding: calc((min(5.771vw, 110.8px) - 1.2em) / 2) min(1.8vw, 35px) calc((min(5.771vw, 110.8px) - 1.2em) / 2) min(1.618vw, 31px);
	}
	.yoy-cumple-hero .yoy-pills__l:nth-child(2),
	.yoy-cumple-pasos--cumple .yoy-pills__l:nth-child(2),
	.yoy-cumple-arts .yoy-pills__l:nth-child(2) { --dy: max(-0.151vw, -2.9px) !important; }
	.yoy-cumple-pasos--cumple .yoy-cumple-pasos__pill .yoy-pills,
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__pill .yoy-pills { font-size: clamp(28px, 3.256vw, 62.5px); }
	.yoy-cumple-arts .yoy-cumple-arts__pill .yoy-pills { font-size: clamp(30px, 3.777vw, 72.5px); letter-spacing: normal; }

	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__filas { margin-left: 8.333vw; }

	/* Pasos: la tarjeta del medio mide 492 y las otras dos se reparten el resto (530 cada una). */
	.yoy-cumple-pasos--cumple .yoy-cumple-pasos__fila > .yoy-cumple-paso:nth-child(2) { flex: 0 0 25.625vw; }
}

/* ==================================================================
   CUMPLEAÑOS · MÓVIL — nodo 731:1518 «YOY-Cumpleaños · MOBILE» (391×4609), 29 sep 2026

   Sustituye al plegado a columna de antes («hasta que llegue la pantalla de Figma»). Mismo criterio
   que Promos y Concursos: `--u` es un píxel del diseño sobre 391, cada sección es un lienzo con el
   alto del Figma y las piezas van en absoluto con sus coordenadas. Las rejillas de artículos (Loop
   Grid) también: cada tarjeta se coloca por su clase `yoy-articulo--pos-N`.
   Especificidad: `.yoy-seccion.yoy-cumple-X > .pieza` (0,3,0) + `!important` gana a la regla de
   plegado general y a la colocación en % que Elementor escribe para escritorio.
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-seccion[class*="yoy-cumple-"] { --u: calc(100vw / 391); }
	.yoy-seccion.yoy-cumple-hero,
	.yoy-seccion.yoy-cumple-pasos--cumple,
	.yoy-seccion.yoy-cumple-agenda--cumple,
	.yoy-seccion.yoy-cumple-arts {
		display: block !important;
		position: relative;
		padding: 0 !important;
		overflow: clip !important;
	}
	.yoy-seccion.yoy-cumple-hero         { height: calc(642.5 * var(--u)); }
	.yoy-seccion.yoy-cumple-pasos--cumple  { height: calc(475.8 * var(--u)); }
	.yoy-seccion.yoy-cumple-agenda--cumple { height: calc(682.3 * var(--u)); }
	.yoy-seccion.yoy-cumple-merienda     { height: calc(632.8 * var(--u)); }
	.yoy-seccion.yoy-cumple-snack        { height: calc(576.1 * var(--u)); }
	.yoy-seccion.yoy-cumple-refrescos    { height: calc(439 * var(--u)); }
	.yoy-seccion.yoy-cumple-hero > .elementor-element,
	.yoy-seccion.yoy-cumple-pasos--cumple > .elementor-element,
	.yoy-seccion.yoy-cumple-agenda--cumple > .elementor-element,
	.yoy-seccion.yoy-cumple-arts > .elementor-element {
		position: absolute !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		right: auto !important;
		bottom: auto !important;
	}
	/* Los decorativos que el móvil SÍ lleva (el resto sigue oculto por la regla general de `.yoy-deco`). */
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__rayo,
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__tarta-ico,
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco1,
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco2,
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco3,
	.yoy-seccion.yoy-cumple-pasos--cumple > .yoy-cumple-pasos__mano,
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__corazon,
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__logo,
	.yoy-seccion.yoy-cumple-merienda > .elementor-element-cmp_merienda_deco1,
	.yoy-seccion.yoy-cumple-snack > .elementor-element-cmp_snack_deco1,
	.yoy-seccion.yoy-cumple-refrescos > .elementor-element-cmp_refrescos_deco1 { display: block !important; z-index: 4; }

	/* --- Pastillas: alto de caja, sangrías y escalón del Figma, por sección ---
	   `:not(.yoy-cnc-torneos)`: «Torneos» de Concursos y «Promos habituales» también llevan
	   `yoy-cumple-agenda` (reutilizan la Agenda) y sin esto heredaban estas pastillas. */
	.yoy-seccion[class*="yoy-cumple-"]:not(.yoy-cnc-torneos) .yoy-pills { font-size: calc(var(--fs) * var(--u)); letter-spacing: normal; }
	.yoy-seccion[class*="yoy-cumple-"]:not(.yoy-cnc-torneos) .yoy-pills__l {
		padding: calc((var(--h) * var(--u) - 1.2em) / 2) calc(var(--pr) * var(--u)) calc((var(--h) * var(--u) - 1.2em) / 2) calc(var(--pl) * var(--u));
		margin: 0;
	}
	.yoy-seccion[class*="yoy-cumple-"]:not(.yoy-cnc-torneos) .yoy-pills__l::before { border-radius: calc(var(--h) * .19 * var(--u)); }
	.yoy-seccion[class*="yoy-cumple-"]:not(.yoy-cnc-torneos) .yoy-pills__l:nth-child(2) {
		margin-left: calc(var(--dx2, 0) * var(--u)) !important;
		margin-top: calc(var(--dy2, 0) * var(--u)) !important;
	}
	.yoy-cumple-hero__pill      { --fs: 29.01; --h: 47.28; --pl: 13.0;  --pr: 25.9; --dx2: 82.23; --dy2: -1.25; }
	.yoy-cumple-pasos__pill     { --fs: 23.53; --h: 41.72; --pl: 11.5;  --pr: 10.5; --dx2: 72.56; --dy2: -1.11; }
	.yoy-cumple-agenda__pill    { --fs: 28.17; --h: 49.95; --pl: 13.75; --pr: 28.8; }
	.yoy-cumple-merienda .yoy-cumple-arts__pill  { --fs: 30.06; --h: 45.94; --pl: 12.64; --pr: 16.3; }
	.yoy-cumple-snack .yoy-cumple-arts__pill     { --fs: 31.91; --h: 48.12; --pl: 13.42; --pr: 13.4; --dx2: 85.58; --dy2: -4.03; }
	.yoy-cumple-refrescos .yoy-cumple-arts__pill { --fs: 26.25; --h: 41.03; --pl: 7.55;  --pr: 8.35; }
	.yoy-cumple-hero .yoy-pills__l,
	.yoy-cumple-merienda .yoy-cumple-arts__pill .yoy-pills__l { color: var(--yoy-bg); }

	/* --- Hero (731:1534, 391×642,5) --- */
	/* La foto: 715×430 desde x=−300, con el velo lateral del Figma (18,2% → 47,4%) y el «Fade»
	   (731:1536): 200px a lo ancho de la pantalla desde y=240, del fondo a transparente. */
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__foto {
		left: calc(-300 * var(--u)) !important; top: 0 !important;
		width: calc(715.46 * var(--u)) !important; max-width: none !important; max-height: none;
		z-index: 1; overflow: visible;
	}
	.yoy-seccion.yoy-cumple-hero .yoy-cumple-hero__foto img {
		width: 100% !important; height: calc(430 * var(--u)) !important; aspect-ratio: auto;
		object-fit: cover; object-position: center center;
	}
	.yoy-seccion.yoy-cumple-hero .yoy-cumple-hero__foto::after { background: linear-gradient(86deg, var(--yoy-bg) 18.18%, rgba(3, 23, 29, 0) 47.44%); }
	.yoy-seccion.yoy-cumple-hero .yoy-cumple-hero__foto::before {
		content: ""; position: absolute; z-index: 1; pointer-events: none;
		left: calc(300 * var(--u)); top: calc(240 * var(--u)); width: calc(391 * var(--u)); height: calc(200 * var(--u));
		background: linear-gradient(180deg, var(--yoy-bg) 0%, rgba(3, 23, 29, 0) 100%);
	}
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__tarta     { left: calc(110 * var(--u)) !important; top: calc(150 * var(--u)) !important; width: calc(260 * var(--u)) !important; z-index: 3; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__tarta-ico { left: calc(20 * var(--u)) !important;  top: calc(25 * var(--u)) !important;  width: calc(84 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco3     { left: calc(118 * var(--u)) !important; top: calc(18.07 * var(--u)) !important; width: calc(38 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco2     { left: calc(56 * var(--u)) !important;  top: calc(110.4 * var(--u)) !important; width: calc(30 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__rayo      { left: calc(300 * var(--u)) !important; top: calc(24.1 * var(--u)) !important;  width: calc(72 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__deco1     { left: calc(20 * var(--u)) !important;  top: calc(538 * var(--u)) !important;   width: calc(46 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__pill      { left: calc(20 * var(--u)) !important;  top: calc(420 * var(--u)) !important;   z-index: 5; }
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__sub       { left: calc(80 * var(--u)) !important;  top: calc(535.85 * var(--u)) !important; width: calc(228 * var(--u)) !important; z-index: 5; }
	.yoy-seccion.yoy-cumple-hero .yoy-cumple-hero__sub .elementor-heading-title { font-size: calc(16 * var(--u)) !important; line-height: 1.22 !important; }

	/* --- Reserva en 3 pasos (731:1550, 391×475,8): número a la izquierda y texto a su derecha --- */
	.yoy-seccion.yoy-cumple-pasos--cumple > .yoy-cumple-pasos__pill { left: calc(20 * var(--u)) !important; top: calc(40 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-pasos--cumple > .yoy-cumple-pasos__mano { left: calc(318 * var(--u)) !important; top: calc(28.55 * var(--u)) !important; width: calc(52 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-pasos--cumple > .yoy-cumple-pasos__fila {
		left: calc(20 * var(--u)) !important; top: calc(162.8 * var(--u)) !important; width: calc(351 * var(--u)) !important;
		padding: 0 !important; gap: calc(32 * var(--u)) !important;
	}
	.yoy-cumple-pasos--cumple .yoy-cumple-pasos__fila > .yoy-cumple-paso.e-con {
		display: grid !important;
		grid-template-columns: calc(76 * var(--u)) 1fr;
		align-content: start;
		row-gap: calc(6 * var(--u)) !important;
		column-gap: 0 !important;
		padding: 0 !important;
		min-height: calc(67 * var(--u));
	}
	.yoy-cumple-pasos--cumple .yoy-cumple-paso > .yoy-cumple-paso__num { grid-column: 1; grid-row: 1 / span 2; margin-top: calc(8 * var(--u)) !important; }
	.yoy-cumple-pasos--cumple .yoy-cumple-paso > .yoy-cumple-paso__tit,
	.yoy-cumple-pasos--cumple .yoy-cumple-paso > .yoy-cumple-paso__desc { grid-column: 2; }
	/* Press Start 2P en vez de la «Minecraft» del Figma: a 26 ocupa los mismos ~52px de ancho que el 46 de allí. */
	.yoy-cumple-pasos--cumple .yoy-cumple-paso__num .elementor-heading-title { font-size: calc(26 * var(--u)); }
	.yoy-cumple-pasos--cumple .yoy-cumple-paso__tit .elementor-heading-title { font-size: calc(17 * var(--u)) !important; line-height: 1.22 !important; }
	.yoy-cumple-pasos--cumple .yoy-cumple-paso__desc { font-size: calc(14 * var(--u)); line-height: 1.45; }

	/* --- Agenda (731:1570, 391×682,3) --- */
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__pill    { left: calc(20 * var(--u)) !important;  top: calc(36 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__corazon { left: calc(305 * var(--u)) !important; top: calc(23.4 * var(--u)) !important; width: calc(66 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__logo    { left: calc(120 * var(--u)) !important; top: calc(555.5 * var(--u)) !important; width: calc(150 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-agenda--cumple > .yoy-cumple-agenda__filas {
		left: calc(20 * var(--u)) !important; top: calc(122.5 * var(--u)) !important; width: calc(351 * var(--u)) !important;
		--width: auto; gap: calc(10 * var(--u)) !important; padding: 0 !important;
	}
	/* Fila: distintivo de 60 a la izquierda ocupando dos pisos, y a su derecha el texto con el chip
	   debajo (en el Figma el chip va DENTRO del bloque de texto; aquí es hermano y se coloca en la rejilla). */
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__fila.e-con {
		display: grid !important;
		grid-template-columns: calc(60 * var(--u)) 1fr;
		align-items: center;
		column-gap: calc(14 * var(--u)) !important;
		row-gap: calc(6 * var(--u)) !important;
		padding: calc(12 * var(--u)) !important;
		border-radius: calc(12 * var(--u));
	}
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__badge-wrap { grid-row: 1 / span 2; width: calc(60 * var(--u)); }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__badge { border-radius: 0; gap: 0; }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__badge b { font-size: calc(18 * var(--u)); }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__badge i { font-size: calc(8 * var(--u)); }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__texto { align-self: end; padding: 0 !important; gap: calc(6 * var(--u)) !important; }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__tit .elementor-heading-title { font-size: calc(12 * var(--u)); line-height: 1.22; }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__nota { font-size: calc(11 * var(--u)); line-height: 1.4; }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__chip {
		grid-column: 2; align-self: start; justify-self: start;
		margin: 0 !important;
		padding: calc(4 * var(--u)) calc(10 * var(--u));
		border-radius: calc(6 * var(--u));
		font-size: calc(11 * var(--u));
		color: var(--yoy-bg);
	}

	/* --- Artículos: reclamo y decorativo comunes; las rejillas ocupan el lienzo entero --- */
	.yoy-seccion.yoy-cumple-arts > .yoy-cumple-arts__pill { left: calc(20 * var(--u)) !important; top: calc(40 * var(--u)) !important; z-index: 5; }
	.yoy-seccion.yoy-cumple-arts > .yoy-cumple-arts__claim { left: calc(20 * var(--u)) !important; z-index: 5; }
	.yoy-seccion.yoy-cumple-arts .yoy-cumple-arts__claim { font-size: calc(16 * var(--u)); line-height: 1.22; }
	.yoy-seccion.yoy-cumple-arts > .yoy-articulos-grid {
		left: 0 !important; top: 0 !important; width: 100% !important; height: 100%; z-index: 3;
	}
	.yoy-seccion.yoy-cumple-arts .yoy-articulos-grid .elementor-widget-container,
	.yoy-seccion.yoy-cumple-arts .yoy-articulos-grid .elementor-grid { position: relative; display: block !important; height: 100%; }
	.yoy-seccion.yoy-cumple-arts .yoy-articulos-grid .e-loop-item { position: absolute; display: block; margin: 0 !important; }

	/* Merienda (731:1622, 391×632,8): cuatro cartones de 168 girados −10, −5, 5 y 10° en dos filas. */
	.yoy-seccion.yoy-cumple-merienda > .yoy-cumple-arts__claim { top: calc(110.4 * var(--u)) !important; width: calc(237 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-merienda > .elementor-element-cmp_merienda_deco1 { left: calc(310 * var(--u)) !important; top: calc(47.46 * var(--u)) !important; width: calc(60 * var(--u)) !important; }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda .yoy-articulo-card { width: calc(168 * var(--u)); }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda .yoy-articulo-card__nombre .elementor-heading-title {
		padding: calc(8 * var(--u)) calc(12 * var(--u));
		border-radius: calc(16 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.yoy-cumple-merienda .yoy-articulo--pos-1 { left: calc(26.7 * var(--u));  top: calc(208.7 * var(--u)); }
	.yoy-cumple-merienda .yoy-articulo--pos-2 { left: calc(211 * var(--u));   top: calc(206.1 * var(--u)); }
	.yoy-cumple-merienda .yoy-articulo--pos-3 { left: calc(21 * var(--u));    top: calc(400.7 * var(--u)); }
	.yoy-cumple-merienda .yoy-articulo--pos-4 { left: calc(216.9 * var(--u)); top: calc(404.4 * var(--u)); }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda.yoy-articulo--pos-1 .yoy-articulo-card { --giro: -10deg; }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda.yoy-articulo--pos-2 .yoy-articulo-card { --giro: -5deg; }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda.yoy-articulo--pos-3 .yoy-articulo-card { --giro: 5deg; }
	.yoy-cumple-merienda .yoy-articulo--fila-merienda.yoy-articulo--pos-4 .yoy-articulo-card { --giro: 10deg; }
	/* En el móvil la foto gira CON su cartón (va dentro del marco girado del Figma) y cada producto
	   asoma lo suyo: cajas de los nodos 731:1631, 1636, 1641 y 1646, en % del cartón. */
	.yoy-cumple-merienda .yoy-articulo--fila-merienda .yoy-articulo-card__foto { transform: none; }
	.yoy-cumple-merienda .yoy-articulo--pos-1 .yoy-articulo-card__foto { left: -4.35%;  top: -7.04%; width: 111.11% !important; height: 64.24%; }
	.yoy-cumple-merienda .yoy-articulo--pos-2 .yoy-articulo-card__foto { left: 4.3%;    top: 4.05%;  width: 91.35% !important;  height: 61.05%; }
	.yoy-cumple-merienda .yoy-articulo--pos-3 .yoy-articulo-card__foto { left: -10.89%; top: -9.99%; width: 118.76% !important; height: 72.07%; }
	.yoy-cumple-merienda .yoy-articulo--pos-4 .yoy-articulo-card__foto { left: -2.24%;  top: 3.69%;  width: 100.96% !important; height: 65.84%; }

	/* Snack time (731:1649, 391×576,1): patatas (157×224 desde 34,242) y Kit Kat (215×133 desde 168,305),
	   con el nombre en dos columnas de 170 a y=496. */
	.yoy-seccion.yoy-cumple-snack > .yoy-cumple-arts__claim { top: calc(160.8 * var(--u)) !important; width: calc(222 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-snack > .elementor-element-cmp_snack_deco1 { left: calc(318 * var(--u)) !important; top: calc(44.17 * var(--u)) !important; width: calc(50 * var(--u)) !important; }
	.yoy-cumple-snack .yoy-articulo--pos-1 { left: calc(24 * var(--u));  top: calc(242 * var(--u)); width: calc(170 * var(--u)); }
	.yoy-cumple-snack .yoy-articulo--pos-2 { left: calc(196 * var(--u)); top: calc(242 * var(--u)); width: calc(170 * var(--u)); }
	.yoy-cumple-snack .yoy-articulo--fila-snack .yoy-articulo-card { gap: calc(30 * var(--u)); }
	.yoy-cumple-snack .yoy-articulo--fila-snack .yoy-articulo-card__foto { height: calc(224 * var(--u)) !important; }
	/* La bolsa del tema es 391×488 (0,8) y la del Figma 157×224 (0,7): con la caja de 157 salía a 150×187.
	   Se ensancha la caja para que la foto llegue a los 224 de alto. */
	.yoy-cumple-snack .yoy-articulo--fila-snack.yoy-articulo--pos-1 .yoy-articulo-card__foto { width: calc(180 * var(--u)) !important; margin-left: calc(-5 * var(--u)) !important; align-self: flex-start; }
	.yoy-cumple-snack .yoy-articulo--fila-snack.yoy-articulo--pos-2 .yoy-articulo-card { gap: calc(57.4 * var(--u)); }
	.yoy-cumple-snack .yoy-articulo--fila-snack.yoy-articulo--pos-2 .yoy-articulo-card__foto {
		width: calc(215 * var(--u)) !important; height: calc(133.5 * var(--u)) !important;
		margin: calc(63.2 * var(--u)) 0 0 calc(-28 * var(--u)) !important; align-self: flex-start;
	}
	.yoy-cumple-snack .yoy-articulo--fila-snack .yoy-articulo-card__nombre .elementor-heading-title { font-size: calc(11 * var(--u)); line-height: 1.35; }

	/* Refrescos (731:1662, 391×439): tres columnas de 195,75 de alto a y=193,3 con la pastilla amarilla al pie. */
	.yoy-seccion.yoy-cumple-refrescos > .yoy-cumple-arts__claim { top: calc(105.4 * var(--u)) !important; width: calc(201 * var(--u)) !important; }
	.yoy-seccion.yoy-cumple-refrescos > .elementor-element-cmp_refrescos_deco1 { left: calc(250 * var(--u)) !important; top: calc(10.23 * var(--u)) !important; width: calc(220 * var(--u)) !important; z-index: 1; }
	.yoy-cumple-refrescos .yoy-articulo--pos-1 { left: calc(14 * var(--u));  top: calc(193.3 * var(--u)); width: calc(65.84 * var(--u)); }
	.yoy-cumple-refrescos .yoy-articulo--pos-2 { left: calc(88 * var(--u));  top: calc(193.3 * var(--u)); width: calc(122.35 * var(--u)); }
	.yoy-cumple-refrescos .yoy-articulo--pos-3 { left: calc(202 * var(--u)); top: calc(193.3 * var(--u)); width: calc(171.2 * var(--u)); }
	.yoy-cumple-refrescos .yoy-articulo--fila-refresco .yoy-articulo-card { height: calc(195.75 * var(--u)); }
	.yoy-cumple-refrescos .yoy-articulo--fila-refresco .yoy-articulo-card__nombre .elementor-heading-title {
		padding: calc(6.2 * var(--u)) calc(8.7 * var(--u));
		border-radius: calc(5 * var(--u));
		font-size: calc(11.24 * var(--u));
		white-space: nowrap;                      /* «COCA-COLA» partía por el guion en 122px */
	}
	/* Los reclamos cortan donde el Figma («EL COMPLEMENTO / PERFECTO PARA / TU FIESTA.»): con el ancho
	   de su caja de texto, «TU» subía a la segunda línea. */
	.yoy-seccion.yoy-cumple-merienda > .yoy-cumple-arts__claim,
	.yoy-seccion.yoy-cumple-snack > .yoy-cumple-arts__claim { width: calc(215 * var(--u)) !important; }   /* «EL COMPLEMENTO» mide 209 y «PERFECTO PARA TU», 222 */
	.yoy-seccion.yoy-cumple-hero > .yoy-cumple-hero__sub { width: calc(190 * var(--u)) !important; }
	.yoy-cumple-agenda--cumple .yoy-cumple-agenda__badge b { text-transform: uppercase; }   /* «FEST», no «Fest» */
}


/* ---------------------------------------------------------------
   LANDING DE CONCURSOS (1.43.0, 25 sep 2026 · Figma nodo 395:479 «YOY-Concursos»)

   Generada por `scripts/landing-concursos.php`, con el mismo patrón que Cumpleaños: cada sección es
   un lienzo con la proporción del Figma en vw y las piezas van en absoluto en % desde Elementor.
   «Torneos» y «Participa en 3 pasos» reutilizan las clases de la Agenda y de los Pasos de
   Cumpleaños; aquí solo va lo que cambia.

   Los tamaños de letra de escritorio van dentro de `min-width: 1025px` a propósito: fuera de esa
   consulta ganarían por especificidad a la escala de móvil de `.yoy-pills` y `.yoy-h`.
   --------------------------------------------------------------- */

/* --- Lienzos (alto / 1920) --- */
.yoy-cnc-hero       { min-height: 45.83vw; }   /* 880  · nodo 395:520 */
.yoy-cnc-premios    { min-height: 78.125vw; }  /* 1500 · 395:712 más los 6px que lo separan del hero */
.yoy-cnc-categorias { min-height: 61.46vw; }   /* 1180 · 395:1166 */
.yoy-cnc-pasos      { min-height: 39.84vw; }   /* 765  · 395:496 */

/* La estrella de «Elige tu torneo» sube 125px dentro de Premios, como en el Figma: esta sección no
   recorta y va por encima de la anterior. */
.yoy-cnc-premios    { position: relative; z-index: 1; }
.yoy-cnc-categorias { position: relative; z-index: 2; overflow: visible !important; }

/* --- Pastillas: color y cuerpo de cada una --- */
.yoy-cnc-pill--degradado .yoy-pills__l::before {
	/* El degradado del Figma mide 834px sobre una escalera de 690: recorre el grupo entero y no
	   llega a su violeta final dentro de la pastilla. Cada línea lo pinta a esa anchura y lo
	   desplaza a su sitio (556 y 584px de caja; la segunda empieza 107px más a la derecha). */
	background: linear-gradient(90deg, #ff0000 0%, #ce0070 50%, #9100ff 100%) no-repeat;
	background-size: 150% 100%;
	background-position-x: 0;
}
.yoy-cnc-pill--degradado .yoy-pills__l:nth-child(2)::before {
	background-size: 143% 100%;
	background-position-x: 42.7%;
}
/* 29 sep 2026 · Figma 731:920: Premios en amarillo con letra oscura; «Elige tu torneo» y
   «Participa» en el violeta puro del diseño (#8200ff), no en el de las pills de la portada. */
.yoy-cnc-pill--amarillo .yoy-pills__l::before { background: #edff00; }
.yoy-cnc-pill--amarillo .yoy-pills__l          { color: var(--yoy-bg); }
.yoy-cnc-pill--violeta  .yoy-pills__l::before { background: #8200ff; }

@media (min-width: 1025px) {
	.yoy-cnc-hero__pill .yoy-pills     { font-size: clamp(30px, 3.54vw, 68px); }   /* 68    */
	.yoy-cnc-premios__pill .yoy-pills,
	.yoy-cnc-cat__pill .yoy-pills      { font-size: clamp(30px, 3.78vw, 73px); }   /* 72,5  */
	.yoy-cnc-torneos__pill .yoy-pills,
	.yoy-cnc-pasos__pill .yoy-pills    { font-size: clamp(28px, 3.26vw, 63px); }   /* 62,5  */
}

/* --- Sección 1 · Hero ------------------------------------------------------ */
/* La foto llega ya recortada a lo que se ve. El Figma la funde con el fondo por la izquierda
   (81,7°, opaca hasta el 8% y transparente al 24% de una capa de 1553px); pasado a la caja
   recortada de 1312px son el 9,7% y el 28,1%. */
.yoy-cnc-hero__foto { position: relative; }
/* Desde el 29 sep (731:978) los fundidos vienen pintados en la foto: sin velo encima. */
.yoy-cnc-hero__foto--fundida::after { content: none !important; }
/* La chica se sale 162px por abajo y pisa Premios: el hero no recorta y va por encima (como la
   tarta de Cumpleaños). La foto ya llega recortada al lienzo, así que no hay scroll lateral. */
@media (min-width: 1025px) {
	.yoy-cnc-hero { overflow: visible !important; position: relative; z-index: 3; }
}
.yoy-cnc-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(82deg, var(--yoy-bg) 9.7%, rgba(3, 23, 29, 0) 28.1%);
	pointer-events: none;
}

/* Cuadro del trofeo (nodo 395:742): 300×300, redondeo 60 y el trofeo de 168×156 a 66/72 del borde.
   El relleno va en vw y no en %: un % de relleno se mide contra la SECCIÓN, no contra el widget. */
.yoy-cnc-hero__tile {
	box-sizing: border-box;
	padding: 3.75vw 3.4375vw;
	border-radius: 3.125vw;
	background: linear-gradient(90deg, #ff0000 0%, #ce0070 50%, #9100ff 100%);
}
.yoy-cnc-hero__sub .elementor-heading-title { color: #fff; }


/* --- Sección 2 · Premios a los TOP ------------------------------------------ */
/* El podio (395:717): tres columnas de 440 con calle de 30, pegadas por abajo. */
.yoy-cnc-podio.e-con  { gap: 1.5625vw !important; padding: 0 !important; }
.yoy-cnc-extras.e-con { gap: 1.5625vw !important; padding: 0 !important; }

.yoy-cnc-podio__puesto.e-con {
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 4.167vw 1.875vw !important;           /* 80 / 36 */
	gap: .729vw !important;                         /* 14 */
	border-radius: 2.604vw 2.604vw 0 0;             /* 50 */
	color: #fff;
	text-align: center;
}
.yoy-cnc-podio__puesto--1.e-con { gap: 1.25vw !important; color: var(--yoy-bg); background: var(--yoy-amarillo); }  /* 24 */
/* Segundo y tercero miden lo mismo en el Figma (449). Sin suelo, el tercero salía más bajo en cuanto
   su premio cabía en una línea y el del segundo no. */
@media (min-width: 1025px) {
	.yoy-cnc-podio__puesto--2.e-con,
	.yoy-cnc-podio__puesto--3.e-con { min-height: 23.39vw; }
}
.yoy-cnc-podio__puesto--2.e-con { background: #ff0000; }
.yoy-cnc-podio__puesto--3.e-con { background: #8200ff; }   /* 731:958 (29 sep) */
.yoy-cnc-podio__puesto .elementor-heading-title,
.yoy-cnc-podio__puesto .elementor-widget-text-editor { color: inherit; }

/* Los números en la pixelada de la marca (el Figma pide «Minecraft»; ver Cumpleaños). La caja
   conserva los 109px de la línea del diseño para que el podio mida lo mismo: 449 y 777. */
.yoy-cnc-podio__num .elementor-heading-title {
	font-family: "Press Start 2P", "Courier New", monospace;
	/* 68px y no los 100 del Figma: Press Start 2P es cuadrada y mucho más ancha que Minecraft; a cuerpo
	   igual el «02» salía el doble de ancho. Con 68 la mancha de tinta mide lo mismo que en el diseño. */
	font-size: clamp(30px, 3.54vw, 68px);
	line-height: 5.68vw;
}
.yoy-cnc-podio__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.927vw, 37px);
	line-height: 1.22;
	text-transform: uppercase;
}
/* `!important`: los widgets dentro de un contenedor flex salen con `max-width: 100%` de Elementor. */
.yoy-cnc-podio__premio {
	max-width: 15.625vw !important;                 /* 300 */
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 600;
	font-size: clamp(13px, 1.146vw, 22px);
	line-height: 1.4;
}
.yoy-cnc-podio__premio p { margin: 0; }
/* `img.` no es adorno: `.elementor img { max-width: 100% }` gana a una clase sola. */
.yoy-cnc-podio__logo   { width: 17.6vw !important; max-width: none !important; }    /* 338 */
.yoy-cnc-podio__trofeo { width: 8.75vw !important; max-width: none !important; }    /* 168 */

/* Premios extra (395:732): dos tarjetas de 685 con calle de 30. */
.yoy-cnc-extra.e-con {
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 1.354vw 1.667vw !important;            /* 26 / 32 */
	gap: .417vw !important;                         /* 8 */
	border-radius: 1.04vw;
	background: #0a2a33;
}
.yoy-cnc-extra__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(17px, 1.875vw, 36px);
	line-height: 1.22;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}
.yoy-cnc-extra__txt {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(13px, .99vw, 19px);
	line-height: 1.4;
	color: #fff;
}
.yoy-cnc-extra__txt p { margin: 0; }

/* La escalera va girada 180° en el Figma (nodo 395:952). Se gira la imagen, no el widget, para no
   pelearse con la flotación de GSAP, que anima el transform del widget. */
.yoy-cnc-premios__escalera img { transform: rotate(180deg); }


/* --- Sección 3 · Elige tu torneo -------------------------------------------- */
.yoy-cnc-cat__intro {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);
	line-height: 1.22;
	text-transform: uppercase;
	color: #fff;
}
.yoy-cnc-cat__intro p      { margin: 0; }
.yoy-cnc-cat__intro strong { color: #ef0023; font-weight: inherit; }

/* Las tarjetas (395:1172…1213): 450 de ancho, relleno 40, 20 entre piezas y redondeo 20. */
.yoy-cnc-cat.e-con {
	padding: 2.083vw !important;
	gap: 1.04vw !important;
	border-radius: 1.04vw;
	color: #fff;
}
/* Colores planos de la 731:1006 (29 sep 2026): el Baile deja el degradado. */
.yoy-cnc-cat--futbolin.e-con { background: #edff00; color: #000; }
.yoy-cnc-cat--billar.e-con   { background: #8200ff; }
.yoy-cnc-cat--baile.e-con    { background: #c600af; }
.yoy-cnc-cat--dardos.e-con   { background: #ff0000; }
/* En Dardos las etiquetas van en oscuro sobre el rojo, no en blanco (731:1040). */
.yoy-cnc-cat--dardos .yoy-cnc-cat__tags li { color: var(--yoy-bg); }

.yoy-cnc-cat__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 50px);
	line-height: 1.22;
	text-transform: uppercase;
	color: inherit;
}
.yoy-cnc-cat__txt {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(13px, .99vw, 19px);
	line-height: 1.4;
	color: inherit;
}
.yoy-cnc-cat__txt p { margin: 0; }

/* Etiquetas: una lista normal en el editor, pintada como pastillas con borde del color del texto. */
.yoy-cnc-cat__tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: .52vw;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yoy-cnc-cat__tags li {
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: .3125vw .729vw;                        /* 6 / 14 */
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 600;
	font-size: clamp(11px, .729vw, 14px);
	line-height: 1.2;
	white-space: nowrap;
	color: inherit;
}

/* Sello «Ideal para peques» (395:1211): girado -6° y montado sobre la esquina inferior derecha de la
   tarjeta de Baile, de la que se sale. Centro del Figma a 350/450 y 9,7px sobre el borde de abajo. */
.yoy-cnc-cat__sello {
	position: absolute !important;
	left: 77.8%;
	bottom: -2.29vw;                                /* 731:1033: centro 44px por debajo de la tarjeta */
	width: auto !important;
	transform: translate(-50%, 50%) rotate(-6deg);
	z-index: 2;
}
.yoy-cnc-cat__sello .elementor-heading-title {
	display: inline-block;
	padding: .52vw .9375vw;                         /* 10 / 18 */
	border-radius: .625vw;
	background: #defa1d;
	color: #000;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(11px, .833vw, 16px);
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}


/* --- Sección 4 · Banda de fotos (401:1436): 53px de aire, 507 de foto y otros 53 --- */
.yoy-cnc-fotos.e-con      { padding: 2.76vw 0 !important; min-height: 31.93vw; }
.yoy-cnc-fotos__fila.e-con { padding: 0 !important; gap: 0 !important; flex-wrap: nowrap !important; }
.yoy-cnc-fotos__foto img {
	height: 26.41vw !important;                     /* 507 */
	object-fit: cover;
}

/* --- Sección 5 · Torneos (395:889, 1920×909 → 47.34vw) ----------------------
   Es la Agenda de Cumpleaños con otro lienzo: filas de 1232 desde x=173 e y=246. */
@media (min-width: 1025px) {
	.yoy-cnc-torneos { min-height: 47.34vw; }
	.yoy-cnc-torneos .yoy-cumple-agenda__filas {
		--width: 64.17vw;
		margin: 12.81vw 0 5.99vw 9.01vw;
	}
}
/* El distintivo es la fecha: rojo, número grande en semi y el mes debajo. */
.yoy-cumple-agenda__badge.yoy-cnc-fecha {
	background: #fe0000;
	color: #fff;
	font-stretch: var(--yoy-ancho);
}
.yoy-cumple-agenda__badge.yoy-cnc-fecha b { font-weight: 600; font-size: clamp(16px, 1.93vw, 37px); }

/* Un color de chip por disciplina, los mismos que las tarjetas de «Elige tu torneo». */
.yoy-cumple-agenda__chip.yoy-cnc-chip--amarillo  { background: var(--yoy-amarillo); color: var(--yoy-bg); }
.yoy-cumple-agenda__chip.yoy-cnc-chip--degradado { background: linear-gradient(90deg, #fb0377 0%, #401394 100%); }
.yoy-cumple-agenda__chip.yoy-cnc-chip--violeta   { background: #9100ff; }
.yoy-cumple-agenda__chip.yoy-cnc-chip--rojo      { background: #ff0000; }
.yoy-cumple-agenda__chip.yoy-cnc-chip--magenta   { background: #c600af; }
/* El violeta de Torneos pasa a #8200ff (731:1087). Acotado a Concursos: Promos de juego reutiliza
   esta sección con la clase `yoy-pj-habituales` y lleva su propia paleta. */
.yoy-cnc-torneos:not(.yoy-pj-habituales) .yoy-cumple-agenda__chip.yoy-cnc-chip--violeta { background: #8200ff; }
/* Filas en #0a2a33 (el de Cumpleaños) y el mes de la fecha en oscuro sobre el rojo (731:1062…1065). */
.yoy-cnc-torneos:not(.yoy-pj-habituales) .yoy-cumple-agenda__fila { background: #0a2a33; }
.yoy-cumple-agenda__badge.yoy-cnc-fecha i { color: var(--yoy-bg); }

/* START va girado -1,94° en el Figma (nodo 401:1388). */
.yoy-cnc-torneos__start img { transform: rotate(-1.94deg); }

/* --- Sección 6 · Participa en 3 pasos (395:496) — los Pasos de Cumpleaños con el número en rojo --- */
.yoy-cnc-paso__num .elementor-heading-title {
	color: #ff0000;
	/* Mismo ajuste que el podio: 62px en vez de 92,5 para que la tinta mida lo del Figma, con la caja
	   de línea del diseño (101px) para que la tarjeta no cambie de alto. */
	font-size: clamp(26px, 3.23vw, 62px);
	line-height: 5.26vw;
}
/* La mano va girada -90° y espejada (nodo 395:519). */
.yoy-cnc-pasos__mano img { transform: rotate(-90deg) scaleX(-1); }


/* La foto móvil del hero solo existe en móvil. */
@media (min-width: 1025px) {
	.yoy-cnc-hero__foto-m { display: none !important; }
}

/* ==================================================================
   CONCURSOS · MÓVIL — maqueta propia del diseño (nodo 495:2 «YOY-Concursos · MOBILE», 391 de ancho)

   Mismo criterio que el hero móvil de la portada: todas las medidas son las del nodo, en vw sobre
   391, así que la composición es la misma a 360, 390 o 430. `--u` es un píxel del diseño.

   El hero va por coordenadas, como en escritorio. El resto de secciones va EN EL FLUJO, porque su
   alto depende del texto que escriba el cliente, y solo los decorativos que el diseño conserva en
   móvil se colocan en absoluto (el resto sigue oculto por la regla general de `.yoy-deco`).

   Especificidad: la regla de plegado general (`.yoy-seccion > .elementor-element { position:
   static !important; width: 100% !important }`) tiene dos clases; aquí se escribe con tres para
   ganarle, y los offsets llevan `!important` porque Elementor imprime los suyos con tres clases.
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-seccion[class*="yoy-cnc-"],
	.yoy-seccion.yoy-cnc-torneos,
	.yoy-seccion.yoy-cnc-pasos { --u: calc(100vw / 391); }

	/* --- Hero (495:18, 391×623) --- */
	.yoy-seccion.yoy-cnc-hero {
		display: block !important;
		position: relative;
		height: calc(623 * var(--u));
		padding: 0 !important;
		overflow: clip;
	}
	.yoy-seccion.yoy-cnc-hero > .elementor-element { position: absolute !important; max-width: none !important; margin: 0 !important; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__foto { display: none !important; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__foto-m {
		left: 0 !important; top: 0 !important; width: 100% !important; z-index: 1;
	}
	.yoy-cnc-hero__foto-m img { width: 100%; height: calc(440 * var(--u)) !important; object-fit: cover; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__tile {
		left: calc(20 * var(--u)) !important; top: calc(30 * var(--u)) !important;
		width: calc(110 * var(--u)) !important;
		padding: calc(26.4 * var(--u)) calc(24.2 * var(--u));
		border-radius: calc(22 * var(--u));
		z-index: 4;
	}
	/* 29 sep 2026 · hero móvil del nodo 731:1767 (391×623): trofeo 84×78 en 20/25, la chica
	   190×310 en 190/110 por encima del fundido, estrella violeta junto al subtítulo y la seta nueva. */
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__trofeo {
		left: calc(20 * var(--u)) !important; top: calc(25 * var(--u)) !important;
		width: calc(84 * var(--u)) !important;
		z-index: 4;
	}
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__chica {
		display: block !important;
		left: calc(190 * var(--u)) !important; top: calc(110 * var(--u)) !important;
		width: calc(190 * var(--u)) !important;
		z-index: 3;
	}
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__estrella-v {
		display: block !important;
		left: calc(20 * var(--u)) !important; top: calc(536 * var(--u)) !important;
		width: calc(46 * var(--u)) !important;
		z-index: 4;
	}
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__estrella,
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__rayo,
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__seta { display: block !important; z-index: 4; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__estrella { left: calc(144 * var(--u)) !important; top: calc(30.3 * var(--u)) !important;  width: calc(40 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__rayo     { left: calc(130 * var(--u)) !important; top: calc(169.1 * var(--u)) !important; width: calc(80 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__seta     { left: calc(306 * var(--u)) !important; top: calc(17.8 * var(--u)) !important;  width: calc(70 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__pill {
		left: calc(20 * var(--u)) !important; top: calc(420 * var(--u)) !important; width: calc(351 * var(--u)) !important; z-index: 5;
	}
	.yoy-cnc-hero__pill .yoy-pills { font-size: calc(29 * var(--u)); }
	.yoy-seccion.yoy-cnc-hero > .yoy-cnc-hero__sub {
		left: calc(70 * var(--u)) !important; top: calc(539.9 * var(--u)) !important; width: calc(238 * var(--u)) !important; z-index: 5;
	}
	.yoy-cnc-hero__sub .elementor-heading-title { font-size: calc(16 * var(--u)) !important; line-height: 1.22 !important; }

	/* Escalón de las pastillas: en móvil el diseño SÍ conserva el del escritorio (2,835em, 1,476em,
	   3,083em…) y cabe, así que se levanta el tope de 1,2em que la portada necesita. */
	.yoy-seccion[class*="yoy-cnc-"] .yoy-pills__l,
	.yoy-seccion.yoy-cnc-pasos .yoy-pills__l { margin-left: var(--dx, 0); }
	.yoy-seccion[class*="yoy-cnc-"] .yoy-pills__l:first-child { margin-left: 0; }

	/* --- Premios (495:47, 391×1087) --- */
	.yoy-seccion.yoy-cnc-premios {
		position: relative;
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(52 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.yoy-cnc-premios__pill .yoy-pills { font-size: calc(31.44 * var(--u)); }
	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-podio  { margin-top: calc(36 * var(--u)); }
	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-extras { margin-top: calc(24 * var(--u)); }

	/* El campeón arriba, centrado y más estrecho; segundo y tercero debajo, lado a lado. */
	.yoy-cnc-podio.e-con {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "p1 p1" "p2 p3";
		align-items: end;
		column-gap: calc(7 * var(--u)) !important;
		row-gap: calc(12 * var(--u)) !important;
	}
	.yoy-cnc-podio__puesto--1 { grid-area: p1; justify-self: center; width: calc(220 * var(--u)) !important; }
	.yoy-cnc-podio__puesto--2 { grid-area: p2; }
	.yoy-cnc-podio__puesto--3 { grid-area: p3; }
	.yoy-cnc-podio__puesto.e-con {
		padding: calc(31.3 * var(--u)) calc(14 * var(--u)) !important;
		gap: calc(5.5 * var(--u)) !important;
		border-radius: calc(19.5 * var(--u)) calc(19.5 * var(--u)) 0 0;
		height: 100%;
	}
	/* 731:1819 y 731:1823: 172×230, número arriba y el premio al pie; en el 2º, título y premio en oscuro. */
	.yoy-cnc-podio__puesto--2.e-con,
	.yoy-cnc-podio__puesto--3.e-con { min-height: calc(230.1 * var(--u)); justify-content: flex-start !important; }
	.yoy-cnc-podio__puesto--2 .yoy-cnc-podio__premio,
	.yoy-cnc-podio__puesto--3 .yoy-cnc-podio__premio { margin-top: auto !important; }
	.yoy-cnc-podio__puesto--2 .yoy-cnc-podio__tit .elementor-heading-title,
	.yoy-cnc-podio__puesto--2 .yoy-cnc-podio__premio { color: var(--yoy-bg); }
	.yoy-cnc-podio__puesto--1.e-con {
		padding: calc(40 * var(--u)) calc(18 * var(--u)) !important;
		gap: calc(12 * var(--u)) !important;
		border-radius: calc(25 * var(--u)) calc(25 * var(--u)) 0 0;
	}
	.yoy-cnc-podio__num .elementor-heading-title { font-size: calc(26 * var(--u)); line-height: 1.4; }
	.yoy-cnc-podio__puesto--1 .yoy-cnc-podio__num .elementor-heading-title { font-size: calc(34 * var(--u)); line-height: 1.1; }
	.yoy-cnc-podio__tit .elementor-heading-title { font-size: calc(14.46 * var(--u)); }
	.yoy-cnc-podio__puesto--1 .yoy-cnc-podio__tit .elementor-heading-title { font-size: calc(18.5 * var(--u)); }
	/* 8,6px en el Figma no se lee en un móvil: suelo de 10px. */
	.yoy-cnc-podio__premio { max-width: calc(117 * var(--u)) !important; font-size: max(10px, calc(8.6 * var(--u))); }
	.yoy-cnc-podio__puesto--1 .yoy-cnc-podio__premio { max-width: calc(150 * var(--u)) !important; font-size: max(11px, calc(11 * var(--u))); }
	.yoy-cnc-podio__logo   { width: calc(169 * var(--u)) !important; }
	.yoy-cnc-podio__trofeo { width: calc(84 * var(--u)) !important; }

	.yoy-cnc-extras.e-con { flex-direction: column !important; gap: calc(12 * var(--u)) !important; }
	.yoy-cnc-extra.e-con  { padding: calc(18 * var(--u)) !important; gap: calc(6 * var(--u)) !important; border-radius: calc(12 * var(--u)); }
	.yoy-cnc-extra__tit .elementor-heading-title { font-size: calc(15 * var(--u)); white-space: normal; }
	.yoy-cnc-extra__txt { font-size: max(12px, calc(12 * var(--u))); }

	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-premios__escalera,
	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-premios__invader { display: block !important; position: absolute !important; }
	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-premios__escalera { left: calc(322 * var(--u)) !important; top: calc(70 * var(--u)) !important;    width: calc(48 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-premios > .yoy-cnc-premios__invader  { left: calc(24 * var(--u)) !important;  top: calc(211.3 * var(--u)) !important; width: calc(52 * var(--u)) !important; }

	/* --- Elige tu torneo (495:86, 391×1325) --- */
	.yoy-seccion.yoy-cnc-categorias {
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(50 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.yoy-cnc-cat__pill .yoy-pills { font-size: calc(29.7 * var(--u)); }
	.yoy-seccion.yoy-cnc-categorias > .yoy-cnc-cat__intro { margin-top: calc(22 * var(--u)); width: calc(266 * var(--u)) !important; font-size: calc(15 * var(--u)); }
	/* 731:1835: 35 entre tarjetas y 68 antes de Dardos, que deja sitio al sello de Baile; 71 al pie. */
	.yoy-seccion.yoy-cnc-categorias { padding-bottom: calc(71 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-categorias > .yoy-cnc-cat { margin-top: calc(35 * var(--u)); }
	.yoy-seccion.yoy-cnc-categorias > .yoy-cnc-cat--futbolin { margin-top: calc(26 * var(--u)); }
	.yoy-seccion.yoy-cnc-categorias > .yoy-cnc-cat--dardos { margin-top: calc(68 * var(--u)); }
	.yoy-cnc-cat--dardos .yoy-cnc-cat__txt { color: var(--yoy-bg); }
	/* Las cuatro tarjetas van a lo ancho, en el orden del escritorio. El `order` que Elementor no
	   pone ya lo da el DOM: futbolín, billar, baile, dardos. */
	/* `relative` para anclar el sello, y por eso hay que anular los offsets con que Elementor la
	   coloca en el collage de escritorio: sin eso cada tarjeta salía corrida a la derecha. */
	.yoy-cnc-cat.e-con {
		position: relative !important;
		top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
		padding: calc(31.2 * var(--u)) !important;
		gap: calc(15.6 * var(--u)) !important;
		border-radius: calc(15.6 * var(--u));
	}
	.yoy-cnc-cat__tit .elementor-heading-title { font-size: calc(39 * var(--u)); line-height: calc(61 * var(--u)); }   /* caja de 61 del Figma */
	.yoy-cnc-cat__txt { font-size: max(13px, calc(14.82 * var(--u))); }
	.yoy-cnc-cat__tags ul { gap: calc(7.8 * var(--u)); }
	.yoy-cnc-cat__tags li { padding: calc(4.7 * var(--u)) calc(10.9 * var(--u)); border-width: 1.17px; font-size: max(10px, calc(10.92 * var(--u))); }
	/* El sello se sale por la derecha de la tarjeta, como en el diseño; el `overflow-x: clip` del
	   body impide que eso abra scroll horizontal. */
	.yoy-cnc-cat__sello {
		position: absolute !important;
		left: 71.3%;                                /* 731:1869: centro en 250/351 y 21,6px bajo la tarjeta */
		bottom: calc(-21.6 * var(--u));
		transform: translate(-50%, 50%) rotate(-6deg) !important;
	}
	.yoy-cnc-cat__sello .elementor-heading-title {
		padding: calc(7.8 * var(--u)) calc(14 * var(--u));
		border-radius: calc(9.4 * var(--u));
		font-size: calc(12.48 * var(--u));
	}
	.yoy-seccion.yoy-cnc-categorias > .yoy-cnc-cat__balon {
		display: block !important; position: absolute !important;
		left: calc(321 * var(--u)) !important; top: calc(44 * var(--u)) !important; width: calc(54 * var(--u)) !important;
	}

	/* --- Banda de fotos (495:131, 391×200): la misma banda de escritorio a 200 de alto, centrada
	   en la foto del baile (empieza 170px a la izquierda de la pantalla). --- */
	.yoy-seccion.yoy-cnc-fotos { padding: 0 !important; overflow: hidden; }
	.yoy-seccion.yoy-cnc-fotos > .yoy-cnc-fotos__fila {
		width: calc(757.4 * var(--u)) !important;
		max-width: none !important;
		margin-left: calc(-170 * var(--u));
	}
	.yoy-cnc-fotos__foto img { height: calc(200 * var(--u)) !important; }

	/* --- Torneos (495:136, 391×693) --- */
	.yoy-seccion.yoy-cnc-torneos {
		position: relative;
		/* abajo quedan logotipo y START, que van en absoluto contra el pie de la sección */
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(167 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.yoy-cnc-torneos__pill .yoy-pills { font-size: calc(26.8 * var(--u)); }
	.yoy-seccion.yoy-cnc-torneos > .yoy-cumple-agenda__filas { margin-top: calc(30 * var(--u)) !important; gap: calc(10 * var(--u)) !important; }
	.yoy-cnc-torneos .yoy-cumple-agenda__fila {
		flex-wrap: nowrap !important;
		gap: calc(14 * var(--u)) !important;
		padding: calc(12 * var(--u)) !important;
		border-radius: calc(12 * var(--u));
	}
	.yoy-cnc-torneos .yoy-cumple-agenda__badge-wrap { width: calc(60 * var(--u)); }
	.yoy-cnc-torneos .yoy-cumple-agenda__badge { border-radius: 0; gap: 0; }
	.yoy-cnc-torneos .yoy-cumple-agenda__badge b { font-size: calc(18 * var(--u)); font-weight: 700; }
	.yoy-cnc-torneos .yoy-cumple-agenda__badge i { font-size: calc(8 * var(--u)); }
	/* El chip baja a la columna del texto, debajo de la nota. Está fuera de esa columna en el HTML
	   (es el tercer hijo de la fila), así que la fila pasa a rejilla. */
	.yoy-cnc-torneos .yoy-cumple-agenda__fila.e-con {
		display: grid !important;
		grid-template-columns: calc(60 * var(--u)) 1fr;
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: calc(14 * var(--u)) !important;
		row-gap: calc(6 * var(--u)) !important;
	}
	.yoy-cnc-torneos .yoy-cumple-agenda__badge-wrap { grid-row: 1 / span 2; }
	/* Sin el relleno de 10px que Elementor pone a todo contenedor: se comía 20px del ancho del título. */
	.yoy-cnc-torneos .yoy-cumple-agenda__texto { align-self: end; gap: calc(6 * var(--u)) !important; padding: 0 !important; }
	.yoy-cnc-torneos .yoy-cumple-agenda__chip {
		grid-column: 2; align-self: start; justify-self: start;
		margin: 0 !important;
		border-radius: calc(6 * var(--u));
		padding: calc(4 * var(--u)) calc(10 * var(--u));
		font-size: calc(11 * var(--u));
	}
	.yoy-cnc-torneos .yoy-cnc-chip--degradado { background: linear-gradient(90deg, #ff0000 0%, #9100ff 100%) !important; }
	.yoy-cnc-torneos .yoy-cumple-agenda__tit .elementor-heading-title { font-size: calc(12 * var(--u)); line-height: 1.25; }
	.yoy-cnc-torneos .yoy-cumple-agenda__nota { font-size: max(11px, calc(11 * var(--u))); line-height: 1.4; }
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__pixel,
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__logo,
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__start { display: block !important; position: absolute !important; top: auto !important; }
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__pixel { left: calc(320 * var(--u)) !important; top: calc(40 * var(--u)) !important; width: calc(50 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__logo  { left: calc(40 * var(--u)) !important;  bottom: calc(50 * var(--u)) !important;  width: calc(150 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-torneos > .yoy-cnc-torneos__start { left: calc(221 * var(--u)) !important; bottom: calc(125.6 * var(--u)) !important; width: calc(130 * var(--u)) !important; }

	/* --- Participa en 3 pasos (495:200, 391×546): número a la izquierda y texto a la derecha --- */
	.yoy-seccion.yoy-cnc-pasos {
		position: relative;
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(118 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.yoy-cnc-pasos__pill .yoy-pills { font-size: calc(23.5 * var(--u)); }
	.yoy-seccion.yoy-cnc-pasos > .yoy-cumple-pasos__fila { margin-top: calc(36 * var(--u)); gap: calc(32 * var(--u)) !important; }
	.yoy-cnc-pasos .yoy-cumple-paso.e-con {
		display: grid !important;
		grid-template-columns: calc(76 * var(--u)) 1fr;
		grid-template-rows: auto 1fr;
		column-gap: 0 !important;
		row-gap: calc(6 * var(--u)) !important;
		padding: 0 !important;
	}
	.yoy-cnc-pasos .yoy-cumple-paso__num { grid-row: 1 / span 2; }
	.yoy-cnc-pasos .yoy-cnc-paso__num .elementor-heading-title { font-size: calc(31 * var(--u)); line-height: 1.2; }
	.yoy-cnc-pasos .yoy-cumple-paso__tit .elementor-heading-title { font-size: calc(17 * var(--u)); line-height: 1.22; }
	.yoy-cnc-pasos .yoy-cumple-paso__desc { font-size: max(13px, calc(14 * var(--u))); line-height: 1.45; }
	.yoy-seccion.yoy-cnc-pasos > .yoy-cnc-pasos__mano,
	.yoy-seccion.yoy-cnc-pasos > .yoy-cnc-pasos__invader { display: block !important; position: absolute !important; }
	.yoy-seccion.yoy-cnc-pasos > .yoy-cnc-pasos__mano    { left: calc(325.8 * var(--u)) !important; top: calc(41.7 * var(--u)) !important; width: calc(45.5 * var(--u)) !important; }
	.yoy-seccion.yoy-cnc-pasos > .yoy-cnc-pasos__invader { left: calc(280 * var(--u)) !important; top: auto !important; bottom: calc(24.6 * var(--u)) !important; width: calc(90 * var(--u)) !important; }
}

/* --- Concursos · móvil: pastillas y etiquetas al píxel del Figma 731:1751 (29 sep 2026) ---
   Relleno, sangrías y escalón medidos en cada Union del Figma (caja de línea 1,2em). Con la escala
   general la segunda línea caía 8 px más abajo y las cajas salían más altas. */
@media (max-width: 1024px) {
	.yoy-seccion.yoy-cnc-hero    .yoy-cnc-hero__pill    .yoy-pills__l { padding: .215em .92em  .215em .452em; }
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-premios__pill .yoy-pills__l { padding: .245em .887em .245em .506em; }
	.yoy-seccion.yoy-cnc-categorias .yoy-cnc-cat__pill     .yoy-pills__l { padding: .164em .814em .164em .42em; }
	.yoy-seccion.yoy-cnc-pasos   .yoy-cnc-pasos__pill   .yoy-pills__l { padding: .286em .833em .286em .489em; }
	.yoy-seccion.yoy-cnc-hero    .yoy-cnc-hero__pill    .yoy-pills__l:nth-child(2) { --dx: 2.837em !important; --dy: -.041em !important; }
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-premios__pill .yoy-pills__l:nth-child(2) { --dx: 1.476em !important; --dy: -.045em !important; }
	.yoy-seccion.yoy-cnc-categorias .yoy-cnc-cat__pill     .yoy-pills__l:nth-child(2) { --dx: 1.285em !important; --dy: -.04em !important; }
	.yoy-seccion.yoy-cnc-pasos   .yoy-cnc-pasos__pill   .yoy-pills__l:nth-child(2) { --dx: 3.085em !important; --dy: -.047em !important; }
	.yoy-seccion[class*="yoy-cnc-"] .yoy-pills__l:nth-child(2) { margin-top: var(--dy, 0) !important; }
	/* Etiquetas de las tarjetas: texto normal, no negrita (Gotham Book 10,9 en el Figma). */
	.yoy-seccion.yoy-cnc-categorias .yoy-cnc-cat__tags li {
		font-family: var(--yoy-font-texto);
		font-stretch: var(--yoy-ancho-texto);
		font-weight: 400;
	}
	/* Podio: el número del Figma (Minecraft) mide 54,5 de alto en el 1º y 42,6 en el 2º y 3º; con
	   Press Start 2P la caja quedaba en 37 y 36, y título y premio subían 17 y 6 px. */
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-podio__num .elementor-heading-title { line-height: calc(42.6 * var(--u)); }
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-podio__puesto--1 .yoy-cnc-podio__num .elementor-heading-title { line-height: calc(54.5 * var(--u)); }
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-podio__premio,
	.yoy-seccion.yoy-cnc-premios .yoy-cnc-podio__premio p { font-weight: 400; }
	/* Fredoka es más estrecha que la Gotham del Figma: con 252 de caja Futbolín y Billar cortan
	   donde el diseño (Baile necesita 258 y va en una línea, así que no se toca). */
	.yoy-seccion.yoy-cnc-categorias .yoy-cnc-cat--futbolin .yoy-cnc-cat__txt,
	.yoy-seccion.yoy-cnc-categorias .yoy-cnc-cat--billar .yoy-cnc-cat__txt { max-width: calc(252 * var(--u)) !important; }
}

/* ==================================================================
   LANDING DE NOVEDADES (29 sep 2026 · Figma nodo 731:2651, móvil 731:2883)

   Generada por `scripts/landing-novedades.php`, con el patrón de las otras landings: cada sección es
   un lienzo en vw con las piezas sueltas en absoluto (% desde Elementor) y los bloques de contenido
   —tarjeta destacada, rejilla de noticias, avisos— EN EL FLUJO, porque su alto depende de los textos
   del cliente. 1 px del diseño a 1920 = 0,05208vw. Todo va acotado con `yoy-nv-*`.
   Las etiquetas «⚠ … validar con cliente» del Figma son notas de diseño y no se pintan; el aire que
   ocupaban se conserva en los márgenes para que las secciones midan lo mismo que en el diseño.
   ------------------------------------------------------------------ */
.yoy-seccion[class*="yoy-nv-"] {
	--nv-rojo:     #ff0000;
	--nv-violeta:  #8200ff;
	--nv-magenta:  #c600af;
	--nv-amarillo: #edff00;
	--nv-gris:     #b8c4c7;
	--nv-tarjeta:  #0a2a33;
}
.yoy-nv-amarillo { color: var(--nv-amarillo); }

/* --- Lienzos (alto / 1920) --- */
.yoy-nv-hero { min-height: 46.875vw; overflow: clip; }   /* 900 · 731:2667 */
.yoy-nv-prox { min-height: 29.167vw; }                   /* 560 · 731:2804 */

/* --- Pastillas: relleno y redondeo del Union del Figma (24 sobre 68 → .353em) --- */
.yoy-nv-pill .yoy-pills__l { padding: .216em .441em; letter-spacing: .02em; }
.yoy-nv-pill .yoy-pills__l::before { border-radius: .353em; }
.yoy-nv-pill--magenta  .yoy-pills__l::before { background: var(--nv-magenta); }
.yoy-nv-pill--violeta  .yoy-pills__l::before { background: var(--nv-violeta); }
.yoy-nv-pill--rojo     .yoy-pills__l::before { background: var(--nv-rojo); }
.yoy-nv-pill--amarillo .yoy-pills__l::before { background: var(--nv-amarillo); border-radius: .357em; }
.yoy-nv-pill--amarillo .yoy-pills__l { color: #03171d; padding: .321em .643em; }   /* DESTACADO: 18/36 sobre 56 */
@media (min-width: 1025px) {
	.yoy-nv-hero__pill .yoy-pills { font-size: clamp(34px, 3.958vw, 76px); }   /* 76 */
	.yoy-nv-dest__pill .yoy-pills,
	.yoy-nv-not__pill  .yoy-pills,
	.yoy-nv-av__pill   .yoy-pills { font-size: clamp(26px, 2.917vw, 56px); }   /* 56 */
	.yoy-nv-solo-movil { display: none !important; }
}

/* Piezas de texto comunes */
.yoy-nv-meta.e-con { --width: auto; padding: 0 !important; gap: .833vw !important; }
.yoy-nv-chip .elementor-heading-title {
	padding: .417vw .9375vw;
	border-radius: 999px;
	color: #fff;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(10px, .729vw, 14px);
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.yoy-nv-chip--violeta  .elementor-heading-title { background: var(--nv-violeta); }
.yoy-nv-chip--magenta  .elementor-heading-title { background: var(--nv-magenta); }
.yoy-nv-chip--rojo     .elementor-heading-title { background: var(--nv-rojo); }
.yoy-nv-chip--amarillo .elementor-heading-title { background: var(--nv-amarillo); color: #000; }
.yoy-nv-fecha .elementor-heading-title {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-weight: 400;
	font-size: clamp(11px, .833vw, 16px);
	line-height: 1.2;
	color: var(--nv-gris);
	white-space: nowrap;
}
/* Botones en Tiny5, la pixelada del diseño (autoalojada con las de Promos de juego). */
.elementor .yoy-nv-boton .elementor-button {
	display: inline-block;
	border: 0;
	font-family: "Tiny5", var(--yoy-font-titular);
	font-weight: 400;
	font-stretch: normal;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .15s ease, filter .15s ease;
}
.elementor .yoy-nv-boton .elementor-button:hover,
.elementor .yoy-nv-boton .elementor-button:focus-visible { transform: translateY(-2px); filter: brightness(1.15); }


/* --- Sección 1 · Hero (731:2667) ------------------------------------------ */
/* Foto de 1488×895 desde x=608, fundida por la izquierda (86°: opaca hasta el 18,2%, transparente al 47,4%). */
.yoy-nv-hero__foto { position: relative; }
.yoy-nv-hero__foto img { width: 100% !important; aspect-ratio: 1488.46 / 894.58; object-fit: cover; }
.yoy-nv-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(86.03deg, var(--yoy-bg) 18.18%, rgba(3, 23, 29, 0) 47.444%);
	pointer-events: none;
}
.yoy-nv-hero__amigos img { width: 100% !important; aspect-ratio: 700 / 664; object-fit: contain; }
.yoy-nv-hero__sub .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(16px, 1.875vw, 36px);    /* 36 */
	line-height: 1.22;
	text-transform: uppercase;
	color: #fff;
}


/* --- Sección 2 · Noticia destacada (731:2682, 1920×800) ------------------- */
/* Tarjeta de 1600×500 a 190 del borde: foto de 800 a la izquierda y texto con 60 de aire. */
.yoy-nv-dest__card.e-con {
	--width: 83.333vw;
	flex-direction: row !important;
	min-height: 26.042vw;
	margin: 9.896vw 0 5.729vw 8.333vw;
	padding: 0 !important;
	gap: 0 !important;
	border-radius: 1.458vw;
	background: var(--nv-tarjeta);
	overflow: hidden;
}
/* La foto no marca el alto (es vertical y estiraba la tarjeta a 1.100): llena su mitad en absoluto
   y el alto lo pone la tarjeta (500 de mínimo) o el texto si el cliente escribe de más. */
.yoy-nv-dest__card > .yoy-nv-dest__img { position: relative; flex: 0 0 50%; align-self: stretch; width: 50% !important; max-width: none !important; margin: 0 !important; background: #000; }
.yoy-nv-dest__card > .yoy-nv-dest__img img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.yoy-nv-dest__texto.e-con {
	--width: auto;
	flex: 1 1 0 !important;
	min-width: 0;
	padding: 3.125vw !important;
	gap: 1.042vw !important;
}
.yoy-nv-dest__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(22px, 2.292vw, 44px);    /* 44 */
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.yoy-nv-dest__desc {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.094vw, 21px);    /* 21 */
	line-height: 1.5;
	color: #fff;
}
.yoy-nv-dest__desc p { margin: 0; }
.yoy-nv-dest__cta { width: auto !important; align-self: flex-start; }
.elementor .yoy-nv-dest__cta .elementor-button {
	padding: .9375vw 1.667vw;
	border-radius: .729vw;
	background: linear-gradient(90deg, var(--nv-rojo) 0%, var(--nv-magenta) 100%);
	color: #fff;
	font-size: clamp(13px, 1.094vw, 21px);
}


/* --- Sección 3 · Últimas noticias (731:2698, 1920×1568) -------------------- */
.yoy-nv-not__intro {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(15px, 1.458vw, 28px);    /* 28 */
	line-height: 1.35;
	text-transform: uppercase;
	color: #fff;
}
.yoy-nv-not__intro p      { margin: 0; }
.yoy-nv-not__intro strong { color: var(--nv-amarillo); font-weight: inherit; }
/* Rejilla: tres columnas de 516 con calle de 26, filas cada 30, desde y=320. */
.yoy-nv-rejilla.e-con {
	--width: auto;
	display: grid !important;
	grid-template-columns: repeat(3, 26.875vw);
	column-gap: 1.354vw !important;
	row-gap: 1.5625vw !important;
	margin: 16.667vw 0 8.125vw 8.333vw;
	padding: 0 !important;
}
.yoy-nv-noticia.e-con {
	--width: auto;
	padding: 0 !important;
	gap: 0 !important;
	border-radius: 1.25vw;
	background: var(--nv-tarjeta);
	overflow: hidden;
}
.yoy-nv-noticia > .yoy-nv-noticia__img { width: 100% !important; max-width: none !important; margin: 0 !important; }
.yoy-nv-noticia > .yoy-nv-noticia__img img { display: block; width: 100% !important; height: 15.104vw !important; max-width: none; object-fit: cover; }   /* 290 */
.yoy-nv-noticia__texto.e-con {
	--width: 100%;
	padding: 1.354vw 1.5625vw 1.5625vw !important;    /* 26 · 30 · 30 */
	gap: .729vw !important;
}
.yoy-nv-noticia .yoy-nv-meta.e-con { gap: .729vw !important; }
.yoy-nv-noticia .yoy-nv-chip .elementor-heading-title { padding: .3125vw .729vw; font-size: clamp(9px, .625vw, 12px); }
.yoy-nv-noticia .yoy-nv-fecha .elementor-heading-title { font-size: clamp(10px, .729vw, 14px); }
.yoy-nv-noticia__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(14px, 1.25vw, 24px);     /* 24 */
	line-height: 1.25;
	text-transform: uppercase;
	color: #fff;
}
.yoy-nv-noticia__desc {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(12px, .885vw, 17px);     /* 17 */
	line-height: 1.5;
	color: #fff;
}
.yoy-nv-noticia__desc p { margin: 0; }
/* Fredoka es más estrecha que la Gotham del Figma: con la caja entera de 456 las descripciones cortaban
   una línea antes. A 400 cortan donde el diseño (y ninguna de una línea se parte). */
@media (min-width: 1025px) { .yoy-nv-noticia__desc { max-width: 20.833vw !important; } }
.yoy-nv-noticia__mas .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(10px, .729vw, 14px);
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: pre;
	color: var(--nv-amarillo);
}


/* --- Sección 4 · Avisos del centro (731:2778, 1920×581) -------------------- */
.yoy-nv-avisos__lista.e-con {
	--width: 83.333vw;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 1.354vw !important;
	margin: 15.104vw 0 6.302vw 8.333vw;
	padding: 0 !important;
}
.yoy-nv-aviso.e-con {
	--width: 26.875vw;
	flex-direction: row !important;
	padding: 1.458vw !important;
	gap: 1.146vw !important;
	border: 2px solid var(--nv-amarillo);
	border-radius: 1.042vw;
	background: var(--nv-tarjeta);
}
.yoy-nv-aviso > .yoy-nv-aviso__ico { flex: 0 0 auto; width: 3.125vw !important; max-width: none !important; margin: 0 !important; }
.yoy-nv-aviso__texto.e-con { --width: auto; flex: 1 1 0 !important; min-width: 0; padding: 0 !important; gap: .417vw !important; }
.yoy-nv-aviso__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(13px, 1.042vw, 20px);    /* 20 */
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--nv-amarillo);
}
.yoy-nv-aviso__desc {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(12px, .885vw, 17px);     /* 17 */
	line-height: 1.5;
	color: #fff;
}
.yoy-nv-aviso__desc p { margin: 0; }
@media (min-width: 1025px) { .yoy-nv-aviso__desc { max-width: 17.708vw !important; } }   /* 340 de 374, mismo motivo */


/* --- Sección 5 · Próximamente (731:2804, 1920×560) ------------------------- */
/* Banner de 1600×380 en degradado rojo→magenta, relleno 60/80, redondeo 40. */
.yoy-nv-prox__banner.e-con {
	height: 19.792vw;
	padding: 3.125vw 4.167vw !important;
	gap: 0 !important;
	border-radius: 2.083vw;
	background: linear-gradient(90deg, var(--nv-rojo) 0%, var(--nv-magenta) 100%);
}
.yoy-nv-prox__chip { width: auto !important; align-self: flex-start; }
.yoy-nv-prox__chip .elementor-heading-title {
	padding: .417vw .9375vw;
	border-radius: 999px;
	background: #000;
	color: var(--nv-amarillo);
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(10px, .729vw, 14px);
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* Dos líneas de 60 cada 80 (y=120 y 200), a 27 del chip. */
.yoy-nv-prox__tit { margin-top: 1.406vw !important; }
.yoy-nv-prox__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(24px, 3.125vw, 60px);    /* 60 */
	line-height: 1.333;
	text-transform: uppercase;
	color: #fff;
}
.yoy-nv-prox__tit .yoy-nv-amarillo { display: block; }
.yoy-nv-prox__txt {
	margin-top: .938vw !important;
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(13px, 1.146vw, 22px);    /* 22 */
	line-height: 1.2;
	color: #fff;
}
.yoy-nv-prox__txt p { margin: 0; }
/* Las redes van a la derecha del texto (x=1000, y=290 del banner). */
.yoy-nv-prox__redes.e-con {
	--width: auto;
	position: absolute;
	left: 62.5%;
	top: 76.316%;
	flex-direction: row !important;
	padding: 0 !important;
	gap: .729vw !important;
}
.yoy-nv-prox__redes .yoy-nv-red { width: auto !important; }
.elementor .yoy-nv-red .elementor-button {
	padding: .729vw 1.042vw;
	border-radius: .625vw;
	background: #000;
	color: #fff;
	font-size: clamp(11px, .833vw, 16px);
}


/* ==================================================================
   NOVEDADES · MÓVIL — nodo 731:2883 (391 de ancho). `--u` = 1 px del diseño.
   El hero va por coordenadas; el resto en el flujo con los márgenes del Figma.
   ================================================================== */
@media (max-width: 1024px) {
	.yoy-seccion[class*="yoy-nv-"] { --u: calc(100vw / 391); }
	.yoy-seccion[class*="yoy-nv-"] .yoy-pills__l { margin-left: var(--dx, 0); }
	.yoy-seccion[class*="yoy-nv-"] .yoy-pills__l:first-child { margin-left: 0; }

	/* --- Hero (731:2899, 391×623) --- */
	.yoy-seccion.yoy-nv-hero {
		display: block !important;
		position: relative;
		height: calc(623 * var(--u));
		padding: 0 !important;
	}
	.yoy-seccion.yoy-nv-hero > .elementor-element { position: absolute !important; max-width: none !important; margin: 0 !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__amigos,
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__rayo { display: none !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__foto { left: calc(-300 * var(--u)) !important; top: 0 !important; width: calc(715.46 * var(--u)) !important; z-index: 1; }
	.yoy-nv-hero__foto img { aspect-ratio: 715.46 / 430; }
	/* El «Fade» del Figma: banda de 200 desde y=240, del fondo a transparente hacia abajo. */
	.yoy-seccion.yoy-nv-hero::after {
		content: "";
		position: absolute;
		left: 0;
		top: calc(240 * var(--u));
		width: 100%;
		height: calc(200 * var(--u));
		background: linear-gradient(to bottom, var(--yoy-bg), rgba(3, 23, 29, 0));
		z-index: 2;
		pointer-events: none;
	}
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__padres { left: calc(110 * var(--u)) !important; top: calc(160 * var(--u)) !important; width: calc(260 * var(--u)) !important; z-index: 3; }
	.yoy-nv-hero__padres img { width: 100% !important; aspect-ratio: 260 / 250; object-fit: contain; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__icono    { left: calc(20 * var(--u)) !important;  top: calc(25 * var(--u)) !important; width: calc(84 * var(--u)) !important; z-index: 4; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__estrella,
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__ovni,
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__flecha { display: block !important; z-index: 4; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__estrella { left: calc(118 * var(--u)) !important; top: calc(18 * var(--u)) !important;  width: calc(42 * var(--u)) !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__ovni     { left: calc(300 * var(--u)) !important; top: calc(30 * var(--u)) !important;  width: calc(72 * var(--u)) !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__flecha   { left: calc(20 * var(--u)) !important;  top: calc(538 * var(--u)) !important; width: calc(46 * var(--u)) !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__pill { left: calc(22.76 * var(--u)) !important; top: calc(422.26 * var(--u)) !important; width: calc(351 * var(--u)) !important; z-index: 5; }
	.yoy-nv-hero__pill .yoy-pills { font-size: calc(30 * var(--u)); }
	.yoy-nv-hero__pill .yoy-pills__l:nth-child(2) { --dx: 1.333em !important; }
	.yoy-seccion.yoy-nv-hero > .yoy-nv-hero__sub { left: calc(70 * var(--u)) !important; top: calc(540 * var(--u)) !important; width: calc(260 * var(--u)) !important; z-index: 5; }
	.yoy-nv-hero__sub .elementor-heading-title { font-size: calc(16 * var(--u)); }

	/* Pastillas de sección a 28 */
	.yoy-nv-dest__pill .yoy-pills,
	.yoy-nv-not__pill  .yoy-pills,
	.yoy-nv-av__pill   .yoy-pills { font-size: calc(28 * var(--u)); }
	.yoy-nv-pill--amarillo .yoy-pills__l { padding: .286em .571em; }            /* 8/16 sobre 28 */
	.yoy-nv-pill--amarillo .yoy-pills__l::before { border-radius: .429em; }
	.yoy-nv-not__pill .yoy-pills__l:nth-child(2) { --dx: 1.786em !important; }
	.yoy-nv-av__pill  .yoy-pills__l:nth-child(2) { --dx: 1.429em !important; }

	/* Chips, fechas y botones */
	.yoy-nv-meta.e-con { gap: calc(10 * var(--u)) !important; }
	.yoy-nv-chip .elementor-heading-title,
	.yoy-nv-noticia .yoy-nv-chip .elementor-heading-title { padding: calc(4 * var(--u)) calc(10 * var(--u)); font-size: calc(10 * var(--u)); }
	.yoy-nv-fecha .elementor-heading-title,
	.yoy-nv-noticia .yoy-nv-fecha .elementor-heading-title { font-size: calc(11 * var(--u)); }

	/* --- Noticia destacada (731:2914, 391×702) --- */
	.yoy-seccion.yoy-nv-dest { padding: calc(48 * var(--u)) calc(20 * var(--u)) calc(92 * var(--u)) !important; gap: calc(16 * var(--u)) !important; align-items: stretch !important; }
	.yoy-nv-dest__card.e-con { --width: 100%; flex-direction: column !important; min-height: 0; margin: 0; border-radius: calc(20 * var(--u)); }
	.yoy-nv-dest__card > .yoy-nv-dest__img { flex: none; width: 100% !important; }
	.yoy-nv-dest__card > .yoy-nv-dest__img { height: calc(200 * var(--u)); }
	.yoy-nv-dest__texto.e-con { flex: none !important; padding: calc(20 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u)) !important; gap: calc(12 * var(--u)) !important; }
	.yoy-nv-dest__tit .elementor-heading-title { font-size: calc(22 * var(--u)); line-height: 1.25; }
	/* Tope de 290 (de 315): con Fredoka el texto cortaba una línea antes que la Gotham del Figma. */
	.yoy-nv-dest__desc { max-width: calc(290 * var(--u)) !important; font-size: calc(14 * var(--u)); }
	.yoy-nv-dest__cta { width: 100% !important; align-self: stretch; }
	.elementor .yoy-nv-dest__cta .elementor-button { display: block; width: 100%; padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(17 * var(--u)); text-align: center; }

	/* --- Últimas noticias (731:2930, 391×1415): lista de tarjetas horizontales --- */
	.yoy-seccion.yoy-nv-noticias { padding: calc(48 * var(--u)) calc(20 * var(--u)) calc(92 * var(--u)) !important; gap: calc(16 * var(--u)) !important; align-items: stretch !important; }
	.yoy-nv-not__intro { font-size: calc(15 * var(--u)); line-height: 1.4; }
	.yoy-seccion.yoy-nv-noticias > .yoy-nv-rejilla.e-con {
		grid-template-columns: 100%;
		row-gap: calc(16 * var(--u)) !important;
		margin: 0;
	}
	.yoy-nv-noticia.e-con { flex-direction: row !important; border-radius: calc(16 * var(--u)); }
	.yoy-nv-noticia > .yoy-nv-noticia__img { flex: 0 0 calc(116 * var(--u)); width: calc(116 * var(--u)) !important; align-self: stretch; }
	.yoy-nv-noticia > .yoy-nv-noticia__img img { height: 100% !important; min-height: 100%; }
	.yoy-nv-noticia__texto.e-con { --width: auto; flex: 1 1 0 !important; min-width: 0; padding: calc(14 * var(--u)) !important; gap: calc(8 * var(--u)) !important; }
	.yoy-nv-noticia .yoy-nv-meta.e-con { flex-wrap: wrap !important; row-gap: calc(6 * var(--u)) !important; column-gap: calc(8 * var(--u)) !important; }
	.yoy-nv-noticia__tit .elementor-heading-title { font-size: calc(14 * var(--u)); }
	.yoy-nv-noticia__desc { font-size: calc(12 * var(--u)); line-height: 1.45; }
	.yoy-nv-noticia__mas .elementor-heading-title { font-size: calc(11 * var(--u)); }

	/* --- Avisos del centro (731:3005, 391×593) --- */
	.yoy-seccion.yoy-nv-avisos { padding: calc(48 * var(--u)) calc(20 * var(--u)) calc(90 * var(--u)) !important; gap: calc(14 * var(--u)) !important; align-items: stretch !important; }
	.yoy-nv-avisos__lista.e-con { --width: 100%; flex-direction: column !important; align-items: stretch !important; gap: calc(14 * var(--u)) !important; margin: 0; }
	.yoy-nv-aviso.e-con { --width: 100%; padding: calc(18 * var(--u)) !important; gap: calc(14 * var(--u)) !important; border-width: 1.5px; border-radius: calc(16 * var(--u)); }
	.yoy-nv-aviso > .yoy-nv-aviso__ico { width: calc(36 * var(--u)) !important; }
	.yoy-nv-aviso__texto.e-con { gap: calc(6 * var(--u)) !important; }
	.yoy-nv-aviso__tit .elementor-heading-title { font-size: calc(14 * var(--u)); }
	.yoy-nv-aviso__desc { font-size: calc(13 * var(--u)); line-height: 1.45; }

	/* --- Próximamente (731:3031, 391×381): banner magenta liso --- */
	.yoy-seccion.yoy-nv-prox { padding: calc(56 * var(--u)) calc(20 * var(--u)) !important; align-items: stretch !important; }
	/* En móvil va en el flujo: fuera los offsets y el ancho del absoluto de escritorio. */
	.yoy-nv-prox__banner.e-con {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		--width: 100%;
		width: 100% !important;
		height: auto;
		padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)) !important;
		border-radius: calc(24 * var(--u));
		background: var(--nv-magenta);
	}
	.yoy-nv-prox__chip .elementor-heading-title { padding: calc(6 * var(--u)) calc(12 * var(--u)); font-size: calc(11 * var(--u)); }
	.yoy-nv-prox__tit { margin-top: calc(20 * var(--u)) !important; }
	/* «NUEVAS ATRACCIONES» va en una línea y asoma del relleno, como en el Figma (caja de 349 en 307). */
	.yoy-nv-prox__tit .elementor-heading-title { font-size: calc(22 * var(--u)); line-height: 1.2; white-space: nowrap; }
	.yoy-nv-prox__tit .yoy-nv-amarillo { margin-top: calc(8 * var(--u)); }
	.yoy-nv-prox__txt { max-width: calc(260 * var(--u)) !important; margin-top: calc(8 * var(--u)) !important; font-size: calc(14 * var(--u)); line-height: 1.45; }
	.yoy-nv-prox__redes.e-con { position: static; --width: 100%; margin-top: calc(24 * var(--u)); gap: calc(8 * var(--u)) !important; }
	.yoy-nv-prox__redes .yoy-nv-red { flex: 1 1 0; width: auto !important; }
	.elementor .yoy-nv-red .elementor-button { display: block; width: 100%; padding: calc(12 * var(--u)) 0; border-radius: calc(10 * var(--u)); font-size: calc(12 * var(--u)); text-align: center; }
	.yoy-nv-prox__banner > .yoy-nv-prox__ovni { display: block !important; position: absolute !important; left: calc(250 * var(--u)) !important; top: calc(-30 * var(--u)) !important; width: calc(104 * var(--u)) !important; }
}

/* ==================================================================
   LANDING DE PROMOS DE JUEGO (29 sep 2026 · Figma nodo 731:2034)

   Generada por `scripts/landing-promos-juego.php`, con el patrón de Cumpleaños y Concursos: cada
   sección es un lienzo con la proporción del Figma en vw y las piezas van en absoluto en % desde
   Elementor. Remaquetada el 29 sep sobre la versión 731:2034 del diseño; la del 26 sep (517:3 +
   fichas 481:34, con filtro y precios) queda superada.
   «Promos habituales» sigue siendo la Agenda/«Torneos» (`yoy-cumple-agenda` + `yoy-cnc-torneos`),
   pero todo lo que cambia de aspecto va acotado bajo `.yoy-pj-habituales` para no tocar las otras
   landings. La banda de fotos ya NO es la de Concursos: tiene fotos y encuadre propios.

   Medidas: 1 px del diseño a 1920 = 0,05208vw. Las fichas de máquinas son `container-type:
   inline-size` y sus piezas van en cqw (1 px de una ficha de 516 = 0,1938cqw), para que la ficha
   se vea igual a cualquier ancho.
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Tiny5";
	src: url("assets/fonts/tiny5-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Tiny5";
	src: url("assets/fonts/tiny5-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Colores de esta versión del Figma (literales: el archivo no tiene variables). */
.yoy-seccion[class*="yoy-pj-"] {
	--pj-rojo:     #ff0000;
	--pj-violeta:  #8200ff;
	--pj-magenta:  #c600af;
	--pj-amarillo: #edff00;
	--pj-gris:     #b8c4c7;
	--pj-fila:     #0a2a33;
}

/* --- Lienzos (alto / 1920) --- */
.yoy-pj-hero       { min-height: 54.69vw; overflow: clip; }   /* 1050 · 731:2052 */
.yoy-pj-maquinas   { min-height: 103.39vw; }                  /* 1985 · 731:2085 (la rejilla va en el flujo) */
.yoy-pj-temporada  { min-height: 59.84vw; }                   /* 1149 · 731:2171 */
.yoy-pj-rest       { min-height: 32.34vw; }                   /* 621  · 731:2272 */

/* --- Pastillas ---------------------------------------------------------------
   Cada una trae su cuerpo, su relleno y su escalón del Union del Figma (el resto lo pone
   `.yoy-pills`). El redondeo del Union es de 24px sobre 68. */
.yoy-pj-pill .yoy-pills__l::before { border-radius: .354em; }
.yoy-pj-pill.yoy-pills--rojo  .yoy-pills__l::before { background: var(--pj-rojo); }
.yoy-pj-pill--violeta .yoy-pills__l::before { background: var(--pj-violeta); }
.yoy-pj-pill--magenta .yoy-pills__l::before { background: var(--pj-magenta); }
.yoy-pj-hero__pill .yoy-pills__l { padding: .21em  .449em; }   /* 111 de alto sobre 68   */
.yoy-pj-maq__pill  .yoy-pills__l { padding: .221em .453em; }   /* 111 sobre 67,35        */
.yoy-pj-temp__pill .yoy-pills__l { padding: .278em .488em; }   /* 111 sobre 62,5         */
.yoy-pj-hab__pill  .yoy-pills__l { padding: .214em .441em; }   /* 95 sobre 58,2          */

@media (min-width: 1025px) {
	.yoy-pj-hero__pill .yoy-pills { font-size: clamp(30px, 3.542vw, 68px); }
	.yoy-pj-maq__pill  .yoy-pills { font-size: clamp(30px, 3.508vw, 67.35px); }
	.yoy-pj-temp__pill .yoy-pills { font-size: clamp(28px, 3.256vw, 62.5px); }
	.yoy-pj-hab__pill  .yoy-pills { font-size: clamp(26px, 3.029vw, 58.2px); }

	/* «Promos habituales»: filas de 1232 desde x=160 e y=361; 41 de aire debajo. */
	.yoy-pj-habituales { min-height: 42.19vw; }
	.yoy-pj-habituales .yoy-cumple-agenda__filas {
		--width: 64.17vw;
		margin: 18.80vw 0 2.14vw 8.333vw;
	}
}

/* Subtítulos de sección: 23px, gris de marca. */
.yoy-pj-sub {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.198vw, 23px);
	line-height: 1.5;
	color: var(--pj-gris);
}
.yoy-pj-sub p { margin: 0; }
.yoy-pj-amarillo { color: #eeff02; }

/* Botón del banner. `.elementor` delante para ganar a los estilos de botón del kit. */
.elementor .yoy-pj-boton .elementor-button {
	display: inline-block;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	border: 0;
	transition: transform .15s ease, filter .15s ease;
}
.elementor .yoy-pj-boton .elementor-button:hover,
.elementor .yoy-pj-boton .elementor-button:focus-visible { transform: translateY(-2px); filter: brightness(1.15); }


/* --- Sección 1 · Hero (731:2052) ------------------------------------------ */
/* La foto es una caja de 1499×886 que se sale por la derecha; el velo la funde por la izquierda
   (83,75°: opaco hasta el 15,6% y transparente al 27,7%, medidos sobre esa caja). */
.yoy-pj-hero__foto { position: relative; }
.yoy-pj-hero__foto img {
	width: 100% !important;
	aspect-ratio: 1498.7 / 885.8;
	object-fit: cover;
}
.yoy-pj-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(83.75deg, var(--yoy-bg) 15.568%, rgba(3, 23, 29, 0) 27.657%);
	pointer-events: none;
}
/* La etiqueta pixelada va espejada en vertical en el Figma (nodo 739:364). */
.yoy-pj-hero__icono img { transform: scaleY(-1); }
.yoy-pj-hero__sub .elementor-heading-title {
	font-size: clamp(18px, 1.875vw, 36px) !important;   /* 36 */
	line-height: 1.22 !important;
	color: #fff;
}
.yoy-pj-hero__txt {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.302vw, 25px);                 /* 25 */
	line-height: 1.2;
	color: var(--pj-gris);
}
.yoy-pj-hero__txt p { margin: 0; }


/* --- Sección 2 · Máquinas en promo (731:2085) --------------------------------- */
.yoy-pj-maq__intro {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(16px, 1.875vw, 36px);                 /* 36 */
	line-height: 1.22;
	text-transform: uppercase;
	color: #fff;
}
.yoy-pj-maq__intro p      { margin: 0; }
.yoy-pj-maq__intro strong { color: var(--pj-rojo); font-weight: inherit; }

/* La rejilla va en el flujo: tres columnas de 516 (la ficha sin girar) con 41 de calle desde
   x=151, filas cada 728 (167 de calle) y la primera ficha a 514 del borde de la sección.
   El Figma coloca cada ficha a mano con algún píxel de baile; ese baile va en `--t`. */
.yoy-pj-rejilla.e-con {
	--width: auto;
	display: grid !important;
	grid-template-columns: repeat(3, 26.875vw);
	column-gap: 2.125vw !important;
	row-gap: 8.734vw !important;
	margin: 26.77vw 0 9.33vw 7.885vw;
	padding: 0 !important;
}

/* La ficha: 516×560, redondeo 20 (46,8 las lisas), girada ±1,5–2°. */
.yoy-pj-ficha.e-con {
	--width: auto;
	--t: rotate(2deg);
	position: relative;
	container-type: inline-size;
	aspect-ratio: 516 / 560;
	padding: 0 !important;
	gap: 0 !important;
	border-radius: 1.042vw;
	transform: var(--t);
	transition: transform .2s ease;
}
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(1) { --t: translate(.51vw, -.27vw) rotate(2deg); }
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(2) { --t: translate(-.385vw, .667vw) rotate(-2deg); }
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(3) { --t: translate(.385vw, -.38vw) rotate(1.5deg); }
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(4) { --t: translate(-.51vw, .667vw) rotate(-2deg); }
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(5) { --t: translate(.635vw, -.27vw) rotate(2deg); }
.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(6) { --t: translate(-.38vw, .323vw) rotate(-1.5deg); }
@media (hover: hover) {
	.yoy-pj-rejilla > .yoy-pj-ficha:hover { transform: rotate(0) scale(1.02); }
}

/* Fondos: las rojas y violetas llevan la cuadrícula retro (522×647 al 18%); las lisas, no. */
.yoy-pj-ficha--rojo,
.yoy-pj-ficha--violeta {
	background-image: url("assets/img/promos-cuadricula.svg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 101.16% auto;
}
.yoy-pj-ficha--rojo     { background-color: var(--pj-rojo); }
.yoy-pj-ficha--violeta  { background-color: var(--pj-violeta); }
.yoy-pj-ficha--amarillo { background-color: var(--pj-amarillo); border-radius: 2.44vw; }
.yoy-pj-ficha--magenta  { background-color: var(--pj-magenta);  border-radius: 2.44vw; }

/* Las tres piezas, en absoluto sobre la ficha. */
.yoy-pj-ficha > .elementor-element {
	position: absolute !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
/* La foto: caja de 484×500 que asoma 90 por arriba, a 16 del borde. `img.` para ganar a
   `.elementor img { max-width: 100% }`. */
.yoy-pj-ficha > .yoy-pj-ficha__img { left: 3.1cqw; top: -17.44cqw; width: 93.8cqw !important; z-index: 1; }
.yoy-pj-ficha > .yoy-pj-ficha__img img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 96.9cqw !important;
	object-fit: contain;
}
/* Dos fotos van descolocadas en el Figma a propósito. Stepmaniax, más baja. Pinshot va girada
   -176° y espejada en vertical (nodo 731:3434), con la foto a 9/25 dentro de su caja: el giro lo
   pone el CSS sobre el original transparente (el export del nodo sale con fondo opaco). */
.yoy-pj-ficha > .elementor-element-pj_f1_img { left: 2.43cqw; top: -13.03cqw; }
.yoy-pj-ficha > .elementor-element-pj_f2_img { left: 2.986cqw; top: -14.17cqw; height: 96.9cqw; transform: rotate(-176deg) scaleY(-1); }
.yoy-pj-ficha > .elementor-element-pj_f2_img img {
	width: 90.44cqw !important;
	height: 92.13cqw !important;
	margin: 4.777cqw 0 0 1.678cqw;
	object-fit: fill;
}

/* Chip de descuento: blanco, a 26/28 de la esquina, 26px. */
.yoy-pj-ficha > .yoy-pj-ficha__dto { left: 5.04cqw; top: 5.43cqw; z-index: 2; }
.yoy-pj-ficha__dto .elementor-heading-title {
	padding: 1.938cqw 3.876cqw;
	border-radius: 999px;
	background: #fff;
	color: var(--yoy-bg);
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: 5.04cqw;
	line-height: 1.3;
	white-space: nowrap;
}
/* Nombre: pastilla oscura centrada a 468 del borde superior, 30px. */
.yoy-pj-ficha > .yoy-pj-ficha__nombre { left: 50%; top: 90.7cqw; transform: translateX(-50%); z-index: 2; }
.yoy-pj-ficha__nombre .elementor-heading-title {
	padding: 2.713cqw 6.202cqw;
	border-radius: 5.039cqw;
	background: var(--yoy-bg);
	color: #fff;
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: 5.814cqw;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}


/* --- Sección 3 · Banda de fotos (731:2166) ------------------------------------ */
/* Franja de 507 con 53 de aire arriba y abajo; las tres fotos son cajas mayores que lo que se ve. */
.yoy-seccion.yoy-pj-fotos { padding: 2.76vw 0 !important; }
.yoy-pj-fotos__franja.e-con {
	--width: 100%;
	position: relative;
	height: 26.41vw;
	padding: 0 !important;
	overflow: hidden;
}
.yoy-pj-fotos__franja > .yoy-pj-fotos__foto { max-width: none !important; margin: 0 !important; }
.yoy-pj-fotos__franja img.attachment-full,
.yoy-pj-fotos__franja .yoy-pj-fotos__foto img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	object-fit: cover;
}
.yoy-pj-fotos__foto.pj_foto1 img { aspect-ratio: 743.35 / 710.15; }
.yoy-pj-fotos__foto.pj_foto2 img { aspect-ratio: 1168 / 1016.43; }
.yoy-pj-fotos__foto.pj_foto3 img { aspect-ratio: 811.55 / 669.96; }


/* --- Sección 4 · Promociones por tiempo limitado (731:2171) ------------------- */
/* Tres tarjetas de color de 517×452 con calle de 24: relleno 44, 14 entre piezas, redondeo 24. */
.yoy-pj-temp__fila.e-con { padding: 0 !important; gap: 1.25vw !important; }
.yoy-pj-temp.e-con {
	--pj-tinta: #fff;
	--pj-filete: rgba(255, 255, 255, .3);
	flex: 1 1 0 !important;
	min-width: 0;
	min-height: 23.54vw;
	padding: 2.29vw !important;
	gap: .729vw !important;
	border-radius: 1.25vw;
	overflow: hidden;
}
.yoy-pj-temp--violeta.e-con  { background: var(--pj-violeta); }
.yoy-pj-temp--magenta.e-con  { background: var(--pj-magenta); }
.yoy-pj-temp--amarillo.e-con {
	--pj-tinta: var(--yoy-bg);
	--pj-filete: rgba(3, 23, 29, .3);
	background: var(--pj-amarillo);
	border-radius: 2.44vw;
}
.yoy-pj-temp .yoy-pj-temp__ico { width: 3.75vw !important; max-width: none !important; }
.yoy-pj-temp__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(18px, 1.875vw, 36px);
	line-height: 1.22;
	text-transform: uppercase;
	color: var(--pj-tinta);
}
.yoy-pj-temp__txt {
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.198vw, 23px);
	line-height: 1.5;
	color: var(--pj-tinta);
}
/* La nota va al pie de la tarjeta, bajo un filete de 1px (el «Spacer» y el «Divisor» del Figma). */
.yoy-pj-temp__nota {
	margin-top: auto;
	padding-top: .729vw;
	border-top: 1px solid var(--pj-filete);
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(11px, .885vw, 17px);
	line-height: 1.2;
	color: var(--pj-tinta);
}
.yoy-pj-temp__txt p,
.yoy-pj-temp__nota p { margin: 0; }


/* --- Sección 5 · Promos habituales (731:2210) — la Agenda, acotada a esta landing --- */
.yoy-pj-habituales .yoy-cumple-agenda__fila { background: var(--pj-fila); }
.yoy-cumple-agenda__badge.yoy-pj-icono { background: var(--pj-rojo); }
/* 54 de 92. En px de diseño y no en %: el distintivo es un grid y el % se medía contra la celda,
   que toma el tamaño del propio SVG (salía a 32). */
.yoy-cumple-agenda__badge.yoy-pj-icono img { display: block; width: clamp(33px, 2.8125vw, 54px); height: auto; margin: auto; }
.yoy-pj-habituales .yoy-cumple-agenda__nota { font-size: clamp(12px, .99vw, 19px); }       /* 19 */
.yoy-pj-habituales .yoy-cumple-agenda__chip.yoy-pj-chip--amarillo { background: var(--pj-amarillo); color: var(--yoy-bg); }
.yoy-pj-habituales .yoy-cumple-agenda__chip.yoy-pj-chip--magenta  { background: var(--pj-magenta);  color: #fff; }
.yoy-pj-habituales .yoy-cumple-agenda__chip.yoy-pj-chip--violeta  { background: var(--pj-violeta);  color: #fff; }


/* --- Sección 6 · Banner de restauración (731:2272) ----------------------------- */
/* Panel de 1640 en degradado rojo→magenta: relleno 80/90, 26 entre piezas, redondeo 40. */
.yoy-pj-rest__panel.e-con {
	padding: 4.167vw 4.6875vw !important;
	gap: 1.354vw !important;
	border-radius: 2.083vw;
	background: linear-gradient(90deg, var(--pj-rojo) 0%, var(--pj-magenta) 100%);
}
.yoy-pj-rest__tit { max-width: 46.875vw !important; }   /* 900 */
.yoy-pj-rest__tit .elementor-heading-title {
	font-family: var(--yoy-font-titular);
	font-stretch: var(--yoy-ancho);
	font-weight: 700;
	font-size: clamp(24px, 3.125vw, 60px);
	line-height: 1.22;
	text-transform: uppercase;
	color: #fff;
}
.yoy-pj-rest__txt {
	max-width: 42.7vw !important;                       /* 820 */
	font-family: var(--yoy-font-texto);
	font-stretch: var(--yoy-ancho-texto);
	font-size: clamp(14px, 1.198vw, 23px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}
.yoy-pj-rest__txt p { margin: 0; }
.yoy-pj-rest__cta { width: auto !important; align-self: flex-start; }
/* Botón oscuro en Tiny5, la pixelada del diseño (nodo 731:2276): 25px, relleno 22/32, redondeo 20. */
.elementor .yoy-pj-rest__cta .elementor-button {
	padding: 1.146vw 1.667vw;
	border-radius: 1.042vw;
	background: var(--yoy-bg);
	color: #fff;
	font-family: "Tiny5", var(--yoy-font-titular);
	font-weight: 400;
	font-stretch: normal;
	font-size: clamp(13px, 1.302vw, 25px);
	letter-spacing: .02em;
}


/* ==================================================================
   PROMOS DE JUEGO · MÓVIL — nodo 731:2355 «YOY-Promos · MOBILE» (391 de ancho)

   `--u` es un píxel del diseño sobre 391. El hero va por coordenadas; el resto, EN EL FLUJO
   (su alto depende de los textos del cliente) con los márgenes medidos en el Figma. Las fichas de
   máquinas son otras en móvil: una columna, 324×359, alternando a izquierda y derecha, con la
   cuadrícula en las seis. Las piezas «solo móvil» (`yoy-pj-solo-movil`) no se pintan en escritorio.
   ================================================================== */
@media (min-width: 1025px) {
	.yoy-pj-solo-movil { display: none !important; }
}

@media (max-width: 1024px) {
	.yoy-seccion[class*="yoy-pj-"] { --u: calc(100vw / 391); }

	/* El escalón de las pastillas se conserva en móvil, como en Concursos. */
	.yoy-seccion[class*="yoy-pj-"] .yoy-pills__l { margin-left: var(--dx, 0); }
	.yoy-seccion[class*="yoy-pj-"] .yoy-pills__l:first-child { margin-left: 0; }
	.yoy-seccion[class*="yoy-pj-"] .yoy-deco.yoy-pj-solo-movil,
	.yoy-seccion[class*="yoy-pj-"] > .yoy-pj-hero__invasor,
	.yoy-seccion[class*="yoy-pj-"] > .yoy-pj-maq__invader,
	.yoy-seccion[class*="yoy-pj-"] > .yoy-pj-temp__invader { display: block !important; position: absolute !important; }

	.yoy-pj-sub { font-size: max(13px, calc(14 * var(--u))); }

	/* --- Hero (731:2371, 391×680) --------------------------------------------- */
	.yoy-seccion.yoy-pj-hero {
		display: block !important;
		position: relative;
		height: calc(680 * var(--u));
		min-height: 0;
		padding: 0 !important;
	}
	.yoy-seccion.yoy-pj-hero > .elementor-element { position: absolute !important; max-width: none !important; margin: 0 !important; }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__estrella,
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__rayo { display: none !important; }
	/* La foto: caja de 744×440 desde x=-330, con su propio velo (81,7°: 8,2% → 23,8%). */
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__foto { left: calc(-330 * var(--u)) !important; top: 0 !important; width: calc(744.42 * var(--u)) !important; z-index: 1; }
	.yoy-pj-hero__foto img { aspect-ratio: 744.42 / 440; }
	.yoy-pj-hero__foto::after { background: linear-gradient(81.7deg, var(--yoy-bg) 8.157%, rgba(3, 23, 29, 0) 23.755%); }
	/* El «Fade» del Figma: una banda de 200 desde y=250, del fondo a transparente hacia abajo. */
	.yoy-seccion.yoy-pj-hero::after {
		content: "";
		position: absolute;
		left: 0;
		top: calc(250 * var(--u));
		width: 100%;
		height: calc(200 * var(--u));
		background: linear-gradient(to bottom, var(--yoy-bg), rgba(3, 23, 29, 0));
		z-index: 2;
		pointer-events: none;
	}
	/* La máquina: el mismo recorte del escritorio, donde cae dentro de la caja de 240×402 del Figma. */
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__maquina { left: calc(206.3 * var(--u)) !important; top: calc(104.1 * var(--u)) !important; width: calc(127.5 * var(--u)) !important; z-index: 3; }
	/* En móvil la etiqueta NO va espejada (nodo 740:376). */
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__icono   { left: calc(20 * var(--u)) !important;  top: calc(25 * var(--u)) !important; width: calc(84 * var(--u)) !important; z-index: 4; }
	.yoy-pj-hero__icono img { transform: none; }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__invasor { left: calc(118 * var(--u)) !important; top: calc(22 * var(--u)) !important; width: calc(44 * var(--u)) !important; z-index: 4; }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__rayo-m  { left: calc(300 * var(--u)) !important; top: calc(24 * var(--u)) !important; width: calc(72 * var(--u)) !important; z-index: 4; }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__pill { left: calc(20 * var(--u)) !important; top: calc(420 * var(--u)) !important; width: calc(351 * var(--u)) !important; z-index: 5; }
	.yoy-pj-hero__pill .yoy-pills { font-size: calc(29 * var(--u)); }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__sub { left: calc(20 * var(--u)) !important; top: calc(534 * var(--u)) !important; width: calc(351 * var(--u)) !important; z-index: 5; }
	.yoy-pj-hero__sub .elementor-heading-title { font-size: calc(16 * var(--u)) !important; }
	/* En el móvil del Figma el precio va en blanco, sin resaltar. */
	.yoy-pj-hero__sub .yoy-pj-amarillo { color: inherit; }
	.yoy-seccion.yoy-pj-hero > .yoy-pj-hero__txt { left: calc(20 * var(--u)) !important; top: calc(586 * var(--u)) !important; width: calc(351 * var(--u)) !important; z-index: 5; }
	.yoy-pj-hero__txt { font-size: calc(15 * var(--u)); line-height: 1.5; color: #fff; }

	/* --- Máquinas en promo (731:2404, 391×3026) --------------------------------- */
	.yoy-seccion.yoy-pj-maquinas {
		position: relative;
		min-height: 0;
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(92 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
		overflow: visible;
		z-index: 2;
	}
	.yoy-pj-maq__pill .yoy-pills { font-size: calc(22.14 * var(--u)); }
	.yoy-pj-maq__pill .yoy-pills__l:nth-child(2) { --dx: 2.981em !important; }   /* 66 sobre 22 */
	.yoy-seccion.yoy-pj-maquinas > .yoy-pj-maq__intro { margin-top: calc(20 * var(--u)) !important; }
	.yoy-pj-maq__intro { font-size: calc(15 * var(--u)); line-height: 1.3; }
	.yoy-pj-maq__intro strong { color: var(--pj-amarillo); }
	.yoy-pj-maq__intro br { display: none; }
	.yoy-seccion.yoy-pj-maquinas > .yoy-pj-maq__invader  { left: calc(320 * var(--u)) !important; top: calc(331.2 * var(--u)) !important; width: calc(52 * var(--u)) !important; }
	/* La mano va girada (su caja sin girar: 128×53, centrada sobre la del Figma) y se sale por abajo. */
	.yoy-seccion.yoy-pj-maquinas > .yoy-pj-maq__mano     { left: calc(-13.5 * var(--u)) !important; top: auto !important; bottom: calc(-17.5 * var(--u)) !important; width: calc(128.12 * var(--u)) !important; z-index: 6; }
	.yoy-pj-maq__mano img { transform: scaleX(-1) rotate(90deg); }
	.yoy-seccion.yoy-pj-maquinas > .yoy-pj-maq__estrella { left: calc(330 * var(--u)) !important; top: auto !important; bottom: calc(19.7 * var(--u)) !important; width: calc(40 * var(--u)) !important; }

	/* Rejilla: una columna; la primera ficha a 296 del borde, una cada 456. */
	.yoy-seccion.yoy-pj-maquinas > .yoy-pj-rejilla.e-con {
		grid-template-columns: 100%;
		justify-content: start;
		row-gap: calc(97.4 * var(--u)) !important;
		margin: calc(124 * var(--u)) 0 0;
	}
	/* Ancho fijo: con solo el margen, la ficha encogía lo que se desplaza (las pares medían 290). */
	.yoy-pj-rejilla > .yoy-pj-ficha { width: calc(324 * var(--u)) !important; }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(odd)  { margin-left: calc(6.2 * var(--u)) !important; }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(even) { margin-left: calc(34.2 * var(--u)) !important; }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(1) { --t: rotate(2deg); }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(2) { --t: rotate(-2deg); }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(3) { --t: rotate(1.5deg); }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(4) { --t: rotate(-2deg); }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(5) { --t: rotate(2deg); }
	.yoy-pj-rejilla > .yoy-pj-ficha:nth-child(6) { --t: rotate(-1.5deg); }
	.yoy-pj-ficha.e-con,
	.yoy-pj-ficha--amarillo.e-con,
	.yoy-pj-ficha--magenta.e-con {
		aspect-ratio: 324 / 358.6;
		border-radius: calc(20 * var(--u));
		background-image: url("assets/img/promos-cuadricula.svg");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	/* Piezas de la ficha en cqw sobre 324. */
	.yoy-pj-ficha > .yoy-pj-ficha__img,
	.yoy-pj-ficha > .elementor-element-pj_f1_img,
	.yoy-pj-ficha > .elementor-element-pj_f2_img { left: 4.938cqw; top: -18.52cqw; width: 90.12cqw !important; height: auto; }
	.yoy-pj-ficha > .yoy-pj-ficha__img img,
	.yoy-pj-ficha > .elementor-element-pj_f2_img img {
		width: 100% !important;
		height: 98.77cqw !important;
		margin: 0;
		object-fit: contain;
	}
	.yoy-pj-ficha > .yoy-pj-ficha__dto { left: 4.938cqw; top: 5.556cqw; }
	.yoy-pj-ficha__dto .elementor-heading-title { padding: 2.16cqw 4.32cqw; font-size: 5.247cqw; }
	.yoy-pj-ficha > .yoy-pj-ficha__nombre { top: 92.59cqw; }
	.yoy-pj-ficha__nombre .elementor-heading-title { padding: 3.086cqw 6.79cqw; border-radius: 8.02cqw; font-size: 5.741cqw; }

	/* --- Banda de fotos (731:2483, 391×200): otro encuadre, las tres en u --- */
	/* Por encima de Máquinas: en el Figma la franja tapa lo que la mano de allí asoma por abajo. */
	.yoy-seccion.yoy-pj-fotos { position: relative; z-index: 3; padding: 0 !important; overflow: hidden; }
	.yoy-pj-fotos__franja.e-con { height: calc(200 * var(--u)); }
	.yoy-pj-fotos__franja > .pj_foto2 { left: calc(-69.09 * var(--u)) !important;  top: calc(-178.95 * var(--u)) !important; width: calc(460.75 * var(--u)) !important; }
	.yoy-pj-fotos__franja > .pj_foto1 { left: calc(-232.19 * var(--u)) !important; top: calc(-40.61 * var(--u)) !important;  width: calc(293.23 * var(--u)) !important; }
	.yoy-pj-fotos__franja > .pj_foto3 { left: calc(340.78 * var(--u)) !important;  top: calc(-56.37 * var(--u)) !important;  width: calc(320.14 * var(--u)) !important; }

	/* --- Promociones por tiempo limitado (731:2488, 391×923) ---------------------- */
	.yoy-seccion.yoy-pj-temporada {
		position: relative;
		min-height: 0;
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(106 * var(--u)) !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	/* Pastilla de tres líneas: caja de 27 sobre 16,6 y escalón de 50 por línea. */
	.yoy-pj-temp__pill .yoy-pills { font-size: calc(16.59 * var(--u)); }
	.yoy-pj-temp__pill .yoy-pills__l { padding: .216em .454em; }
	.yoy-pj-temp__pill .yoy-pills__l:nth-child(2) { --dx: 3.014em !important; --dy: -.058em !important; }
	.yoy-pj-temp__pill .yoy-pills__l:nth-child(3) { --dx: 6.029em !important; --dy: -.058em !important; }
	.yoy-seccion.yoy-pj-temporada > .yoy-pj-sub { margin-top: calc(16 * var(--u)) !important; }
	.yoy-seccion.yoy-pj-temporada > .yoy-pj-temp__fila.e-con {
		flex-direction: column !important;
		gap: calc(16 * var(--u)) !important;
		margin-top: calc(30 * var(--u));
	}
	/* `flex: none`: el `1 1 0` de escritorio reparte el ANCHO entre las tres; apiladas en columna
	   repartiría el alto y las dejaba a 0 px, unas encima de otras. */
	.yoy-pj-temp.e-con,
	.yoy-pj-temp--amarillo.e-con {
		flex: none !important;
		min-height: 0;
		padding: calc(22 * var(--u)) !important;
		gap: calc(10 * var(--u)) !important;
		border-radius: calc(20 * var(--u));
	}
	.yoy-pj-temp .yoy-pj-temp__ico { width: calc(40 * var(--u)) !important; }
	/* Caja de 270 y no de 307: Fredoka es más estrecha que la Gotham del Figma y con el ancho entero
	   los títulos y textos cortaban una línea antes (tarjetas 20 px más bajas). Así cortan donde el diseño. */
	.yoy-pj-temp__tit,
	.yoy-pj-temp__txt { max-width: calc(270 * var(--u)) !important; }
	.yoy-pj-temp__tit .elementor-heading-title { font-size: calc(16 * var(--u)); }
	.yoy-pj-temp__txt { font-size: calc(14 * var(--u)); line-height: 1.45; }
	.yoy-pj-temp__nota { margin-top: 0; padding-top: 0; border-top: 0; font-size: calc(11 * var(--u)); }
	/* La mano: 58×53 sin girar, centrada sobre la caja girada del Figma (320, 10 · 53×58). */
	.yoy-seccion.yoy-pj-temporada > .yoy-pj-temp__mano    { left: calc(317.5 * var(--u)) !important; top: calc(12.7 * var(--u)) !important; width: calc(58.19 * var(--u)) !important; }
	.yoy-pj-temp__mano img { transform: rotate(-90deg) scaleX(-1); }
	.yoy-seccion.yoy-pj-temporada > .yoy-pj-temp__invader { left: calc(300 * var(--u)) !important; top: auto !important; bottom: calc(14.6 * var(--u)) !important; width: calc(90 * var(--u)) !important; }

	/* --- Promos habituales (731:2519, 391×699) ------------------------------------
	   Todo bajo `.yoy-seccion.yoy-pj-habituales`: la base es la Agenda de Cumpleaños y el montaje
	   móvil de «Torneos» de Concursos, y así lo de aquí no depende de cómo evolucionen allí. */
	.yoy-seccion.yoy-pj-habituales {
		min-height: 0;
		padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(187 * var(--u)) !important;
	}
	.yoy-pj-hab__pill .yoy-pills { font-size: calc(19.2 * var(--u)); }
	.yoy-pj-hab__pill .yoy-pills__l:nth-child(2) { --dx: 5em !important; }
	.yoy-seccion.yoy-pj-habituales > .yoy-pj-hab__sub { order: 1; margin-top: calc(16 * var(--u)) !important; }
	.yoy-seccion.yoy-pj-habituales > .yoy-cumple-agenda__filas { margin-top: calc(45 * var(--u)) !important; gap: calc(10 * var(--u)) !important; }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__fila.e-con {
		display: grid !important;
		grid-template-columns: calc(60 * var(--u)) 1fr;
		grid-template-rows: auto auto;
		align-items: start;
		column-gap: calc(14 * var(--u)) !important;
		row-gap: calc(6 * var(--u)) !important;
		padding: calc(12 * var(--u)) !important;
		border-radius: calc(12 * var(--u));
	}
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__badge-wrap { grid-row: 1 / span 2; align-self: center; width: calc(60 * var(--u)); }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__badge { border-radius: 0; }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__badge.yoy-pj-icono img { width: calc(36 * var(--u)); }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__texto { align-self: end; gap: calc(6 * var(--u)) !important; padding: 0 !important; }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__tit .elementor-heading-title { font-size: calc(12 * var(--u)); line-height: 1.25; text-transform: none; }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__nota { font-size: max(11px, calc(11 * var(--u))); line-height: 1.4; }
	.yoy-seccion.yoy-pj-habituales .yoy-cumple-agenda__chip {
		grid-column: 2;
		justify-self: start;
		margin: 0 !important;
		padding: calc(4 * var(--u)) calc(10 * var(--u));
		border-radius: calc(6 * var(--u));
		font-size: calc(11 * var(--u));
		line-height: 1.2;
		text-transform: none;
	}
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__pixel,
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__logo,
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__start { display: block !important; position: absolute !important; }
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__pixel { left: calc(320 * var(--u)) !important; top: calc(40 * var(--u)) !important; bottom: auto !important; width: calc(50 * var(--u)) !important; }
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__logo  { left: calc(40 * var(--u)) !important;  top: auto !important; bottom: calc(40 * var(--u)) !important;  width: calc(150 * var(--u)) !important; }
	.yoy-seccion.yoy-pj-habituales > .yoy-cnc-torneos__start { left: calc(220 * var(--u)) !important; top: auto !important; bottom: calc(122 * var(--u)) !important; width: calc(131.6 * var(--u)) !important; }

	/* --- Banner de restauración (731:2581, 391×388): panel violeta, botón en degradado --- */
	.yoy-seccion.yoy-pj-rest { min-height: 0; padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(73 * var(--u)) !important; }
	.yoy-pj-rest__panel.e-con {
		padding: calc(32 * var(--u)) calc(24 * var(--u)) !important;
		gap: calc(16 * var(--u)) !important;
		border-radius: calc(28 * var(--u));
		background: var(--pj-violeta);
	}
	.yoy-pj-rest__seta { display: none !important; }
	.yoy-pj-rest__tit,
	.yoy-pj-rest__txt { max-width: none !important; }
	.yoy-pj-rest__tit .elementor-heading-title { font-size: calc(24 * var(--u)); }
	.yoy-pj-rest__txt { font-size: calc(14 * var(--u)); }
	.yoy-pj-rest__cta { width: 100% !important; align-self: stretch; }
	.elementor .yoy-pj-rest__cta .elementor-button {
		display: block;
		width: 100%;
		padding: calc(14 * var(--u)) calc(16 * var(--u));
		border-radius: calc(14 * var(--u));
		background: linear-gradient(90deg, var(--pj-rojo) 0%, var(--pj-magenta) 100%);
		font-size: calc(14 * var(--u));
		text-align: left;
		white-space: normal;
	}
}


/* Tarjetas de Promos: que los títulos no partan palabras («NOVEDADE-S»); Elementor aplica word-break:break-word a todo
   .e-loop-item. Estaba en el CSS adicional de producción (28 sep 2026); es un arreglo técnico, va en el tema. */
.yoy-promo-card .yoy-promo-card__titulo .elementor-heading-title { word-break: normal !important; overflow-wrap: normal !important; hyphens: none; }
@media (max-width: 1024px) {
	/* La máquina de Novedades le quita 24vw de ancho al texto: título un punto más pequeño para que «NOVEDADES» quepa */
	.yoy-promo--degradado .yoy-promo-card .yoy-promo-card__titulo .elementor-heading-title { font-size: 5vw; }
}