/*
Theme Name:   Hello Elementor Child · PlayOnDesk
Theme URI:    https://playondesk.com
Description:  Tema hijo de Hello Elementor para PlayOnDesk. Contiene SOLO el CSS a medida que no se
              resuelve (o no conviene resolver) con los controles nativos de Elementor.
              Los colores y las tipografías globales NO se definen aquí: viven en el Kit de
              Elementor (Elementor > Ajustes del sitio). Este archivo los consume como variables.
Author:       PlayOnDesk
Template:     hello-elementor
Version:      1.1.0
Text Domain:  hello-elementor-child
*/

/* ==========================================================================================
   ÍNDICE  ·  Busca el código entre corchetes (p. ej. "[POD-12]") para saltar al bloque.
   ------------------------------------------------------------------------------------------
   Código    Bloque                                        Páginas donde se usa
   [POD-00]  Tokens de diseño (variables)                  Toda la web
   [POD-01]  Base: anclas, scroll, párrafos, accesibilidad Toda la web
   [POD-10]  Cabecera: marquesina animada                  Toda la web (plantilla "Cabecera")
   [POD-11]  Cabecera: navegación fija y desenfoque        Toda la web (plantilla "Cabecera")
   [POD-12]  Botones de compra y selector de cantidad      Inicio (tarjetas de packs y CTA final)
   [POD-13]  Preguntas frecuentes (acordeón)               Inicio (#dudas)
   [POD-14]  Barra fija de compra en móvil                 Inicio (solo ≤ 700 px)
   [POD-15]  Imágenes de producto, precios y titular       Inicio (hero, #mochila, tarjetas)
   ------------------------------------------------------------------------------------------
   Reservados (aún sin contenido):
   [POD-30]  WooCommerce: ficha, carrito, checkout         Producto, Carrito, Finalizar compra
   [POD-40]  Páginas legales y de contenido                Legales, Contacto, Preguntas frecuentes
   ------------------------------------------------------------------------------------------
   Convenciones
   · Prefijo de clases: .pod-  (se asignan en Elementor: Avanzado > Clases CSS).
   · Breakpoints: 960px (tablet) y 700px (móvil), los mismos que la web original de Shopify
     y los mismos que hay configurados en Elementor > Ajustes del sitio > Diseño > Puntos de ruptura.
   · Nada de !important salvo para vencer estilos en línea de terceros, y siempre comentado.
   ========================================================================================== */


/* ==========================================================================================
   [POD-00] TOKENS DE DISEÑO
   Para qué: dar nombres semánticos a los colores del Kit de Elementor y a las medidas comunes.
   Fuente de verdad: Elementor > Ajustes del sitio > Colores globales. El valor tras la coma
   es solo un respaldo por si Elementor no cargase sus variables.
   Usado en: toda la web.
   ========================================================================================== */
:root {
	/* Colores (ids fijados en el Kit de Elementor) */
	--pod-ink:        var(--e-global-color-primary,   #14161A); /* Texto principal, botones   */
	--pod-teal:       var(--e-global-color-secondary, #1B9C99); /* Acento: eyebrow, cursiva   */
	--pod-ink-soft:   var(--e-global-color-text,      #5A6169); /* Texto secundario           */
	--pod-coral:      var(--e-global-color-accent,    #C4442F); /* Etiquetas, contador        */
	--pod-cream:      var(--e-global-color-podcrema,  #FAF8F5); /* Fondo general              */
	--pod-line:       var(--e-global-color-podlinea,  #E7E2DA); /* Bordes y separadores       */
	--pod-coral-bg:   var(--e-global-color-podcoralc, #FBE9E4); /* Fondo del badge            */
	--pod-white:      var(--e-global-color-podblanco, #FFFFFF);
	--pod-black:      var(--e-global-color-podnegro,  #000000); /* Hover de botones           */
	--pod-marquee-bg: var(--e-global-color-podmarque, #0F1115); /* Fondo de la marquesina     */
	--pod-media-bg:   var(--e-global-color-podmedia,  #EFEAE3); /* Fondo contenedor de imagen */
	--pod-dash:       var(--e-global-color-podpunte,  #D6CFC4); /* Borde punteado de imagen   */
	--pod-faint:      var(--e-global-color-podtenue,  #9A9187); /* Texto muy tenue            */
	--pod-bone:       var(--e-global-color-podhovbl,  #F0EDE8); /* Hover del botón blanco     */

	/* Medidas comunes de la web original */
	--pod-max:         1180px; /* Ancho máximo del contenido               */
	--pod-nav-h:       74px;   /* Alto de la barra de navegación           */
	--pod-marquee-h:   44px;   /* Alto de la marquesina (13 + 18 + 13 px)   */
	--pod-radius:      20px;   /* Radio de tarjetas                        */
	--pod-radius-pill: 999px;  /* Radio de botones y píldoras              */
	--pod-shadow-card: 0 14px 40px rgba(20, 22, 26, .08);
}


/* ==========================================================================================
   [POD-01] BASE: ANCLAS, SCROLL, PÁRRAFOS Y ACCESIBILIDAD
   Para qué:
   · Que los enlaces del menú (#producto, #packs, #dudas, #mochila) no queden tapados por la
     barra de navegación fija, con desplazamiento suave salvo si el sistema pide menos movimiento.
   · Quitar el margen inferior del último párrafo de los widgets "Editor de texto" para que el
     espaciado lo controle Elementor (márgenes del widget) y no el reset del tema.
   · Los enlaces dentro de textos heredan el color del texto, como en la web original.
   Usado en: toda la web.
   ========================================================================================== */
html {
	scroll-behavior: smooth;
}

[id] {
	scroll-margin-top: calc(var(--pod-nav-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor a {
	color: inherit;
}


/* ==========================================================================================
   [POD-10] CABECERA: MARQUESINA ANIMADA
   Para qué: la cinta negra superior con 5 mensajes en bucle. Es un widget HTML porque Elementor
   no tiene un widget de marquesina; los mensajes van duplicados en el HTML para que el bucle
   sea continuo (la animación desplaza la cinta un 50 %). Se detiene si el sistema pide menos
   movimiento. Su alto (--pod-marquee-h) se usa también en [POD-11].
   Usado en: toda la web (plantilla de Theme Builder "Cabecera", widget con clase pod-marquee-w).
   Para cambiar los mensajes: editar el widget HTML de la cabecera (están escritos dos veces).
   ========================================================================================== */
.pod-marquee {
	overflow: hidden;
	height: var(--pod-marquee-h);
	padding: 13px 0;
	color: var(--pod-white);
}

.pod-marquee-track {
	display: flex;
	width: max-content;
	animation: pod-slide 32s linear infinite;
}

.pod-marquee-track span {
	padding: 0 34px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

@keyframes pod-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.pod-marquee-track {
		animation: none;
	}
}


/* ==========================================================================================
   [POD-11] CABECERA: NAVEGACIÓN FIJA Y DESENFOQUE
   Para qué: como en el original, al bajar la marquesina se va y la barra de navegación se queda
   pegada arriba. Se hace con CSS puro (position: sticky) sobre toda la cabecera, desplazada hacia
   arriba el alto de la marquesina; sin JavaScript. Compensa la barra de administración de
   WordPress cuando hay sesión iniciada (32 px; 46 px en pantallas ≤ 782 px; en ≤ 600 px esa barra
   deja de ser fija y no hay que compensarla).
   El fondo translúcido con desenfoque (backdrop-filter) no existe como control en Elementor.
   Usado en: toda la web (plantilla "Cabecera", contenedor con clase pod-nav).
   ========================================================================================== */
.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--pod-marquee-h));
	z-index: 50;
}

.admin-bar .elementor-location-header {
	top: calc(32px - var(--pod-marquee-h));
}

@media (max-width: 782px) {
	.admin-bar .elementor-location-header {
		top: calc(46px - var(--pod-marquee-h));
	}
}

@media (max-width: 600px) {
	.admin-bar .elementor-location-header {
		top: calc(-1 * var(--pod-marquee-h));
	}
}

/* El desenfoque va en un pseudo-elemento y no en .pod-nav: un backdrop-filter en el contenedor
   convertiría a .pod-nav en el marco de referencia de sus hijos "fixed", y el carrito lateral
   (que vive dentro de la cabecera) quedaría recortado al alto de la barra. */
.pod-nav {
	position: relative;
	isolation: isolate;
}

.pod-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	pointer-events: none;
}

/* Contador del carrito: oculto mientras el carrito está vacío, como en el original. */
.pod-cart .elementor-button-icon-qty[data-counter="0"] {
	display: none;
}

.pod-logo a {
	color: inherit;
}

/* Icono del carrito (widget nativo "Carrito de menú" de Elementor Pro): el estilo global de
   botones del Kit lo pintaba como un botón negro; en el original es solo el icono, sin fondo.
   El contador coral se configura en el propio widget. */
.pod-cart .elementor-menu-cart__toggle_button,
.pod-cart .elementor-menu-cart__toggle_button:hover,
.pod-cart .elementor-menu-cart__toggle_button:focus {
	border: 0;
	background: transparent;
	color: var(--pod-ink);
}

/* Todos los botones nativos de Elementor con la clase pod-btn-w: micro-elevación al pasar el
   ratón, igual que la web original. */
.pod-btn-w .elementor-button {
	transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pod-btn-w .elementor-button:hover,
.pod-btn-w .elementor-button:focus-visible {
	transform: translateY(-1px);
}


/* ==========================================================================================
   [POD-12] BOTONES DE COMPRA Y SELECTOR DE CANTIDAD
   Para qué: el formulario de "añadir al carrito" con selector − / + de cada tarjeta de pack.
   Es un widget HTML (clase pod-buy-w) porque necesita un formulario con cantidad que añada una
   variación concreta del producto; el resto de la tarjeta son widgets nativos. Sin JavaScript
   el formulario funciona igual (envía al carrito); con JavaScript añade sin recargar y abre el
   carrito lateral (ver functions.php, bloque [F-41]).
   Los selectores llevan .pod-buy delante para ganar a los estilos genéricos de botones y campos
   del tema Hello (reset.css), que pintarían bordes y colores rosas.
   Usado en: Inicio (las 4 tarjetas de packs y el botón "Comprar ahora" del bloque final).
   ========================================================================================== */
.pod-pack {
	position: relative;
}

.pod-pack .pod-buy-w {
	margin-top: auto; /* empuja el formulario al fondo de la tarjeta: botones alineados */
}

.pod-buy {
	margin: 0;
}

.pod-buy .pod-qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0;
}

.pod-buy .pod-qty-btn,
.pod-buy .pod-qty-btn:hover,
.pod-buy .pod-qty-btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--pod-line);
	border-radius: 10px;
	background: var(--pod-white);
	color: var(--pod-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.pod-buy .pod-qty-btn:hover {
	border-color: var(--pod-ink);
}

.pod-buy .pod-qty-input {
	width: 52px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--pod-line);
	border-radius: 10px;
	background: var(--pod-white);
	color: var(--pod-ink);
	font-size: 15px;
	text-align: center;
}

.pod-buy .pod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--pod-radius-pill);
	background: var(--pod-ink);
	color: var(--pod-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.pod-buy .pod-btn:hover,
.pod-buy .pod-btn:focus-visible {
	background: var(--pod-black);
	color: var(--pod-white);
	transform: translateY(-1px);
}

.pod-buy .pod-btn-lg {
	width: 100%;
	padding: 18px 34px;
	font-size: 17px;
}

.pod-buy .pod-btn-ghost {
	border: 1.5px solid var(--pod-ink);
	background: transparent;
	color: var(--pod-ink);
}

.pod-buy .pod-btn-ghost:hover,
.pod-buy .pod-btn-ghost:focus-visible {
	background: var(--pod-ink);
	color: var(--pod-white);
}

/* Variante clara para el bloque oscuro final ("Comprar ahora · 35€"). */
.pod-buy .pod-btn-light {
	background: var(--pod-white);
	color: var(--pod-ink);
}

.pod-buy .pod-btn-light:hover,
.pod-buy .pod-btn-light:focus-visible {
	background: var(--pod-bone);
	color: var(--pod-ink);
}

/* Estado mientras se añade al carrito por AJAX, y confirmación breve al terminar. */
.pod-buy .pod-btn.is-loading {
	opacity: .65;
	pointer-events: none;
}

.pod-buy .pod-btn.is-added::after {
	content: "✓";
}


/* ==========================================================================================
   [POD-13] PREGUNTAS FRECUENTES (ACORDEÓN)
   Para qué: ajustes finos del widget nativo "Acordeón" (anidado) para que se vea como el FAQ
   original: título y signo +/− separados al máximo y sin fondo en la cabecera de cada pregunta.
   Usado en: Inicio (#dudas, widget con clase pod-faq).
   ========================================================================================== */
.pod-faq .e-n-accordion-item-title {
	justify-content: space-between;
	background: transparent;
}

.pod-faq .e-n-accordion-item-title-header {
	flex: 1;
}

.pod-faq .e-n-accordion-item > .e-con,
.pod-faq .e-n-accordion-item > [role="region"] {
	border: 0; /* sin recuadro alrededor de la respuesta, como en el original */
}


/* ==========================================================================================
   [POD-14] BARRA FIJA DE COMPRA EN MÓVIL
   Para qué: la barra blanca pegada abajo con "Estuche Escolar Bicolor Gamer · Comprar". En
   Elementor está oculta en escritorio y tablet (Avanzado > Responsive); aquí se fija abajo y se
   le da la sombra superior del original.
   Usado en: Inicio (contenedor con clase pod-sticky), solo en pantallas ≤ 700 px.
   ========================================================================================== */
@media (max-width: 700px) {
	.pod-sticky {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		border-top: 1px solid var(--pod-line);
		box-shadow: 0 -6px 24px rgba(20, 22, 26, .08);
	}
}

.pod-sticky-btn .elementor-button {
	white-space: nowrap;
}


/* ==========================================================================================
   [POD-15] IMÁGENES DE PRODUCTO, PRECIOS Y TITULAR
   Para qué:
   · Caja de imagen cuadrada (aspect-ratio 1:1) con la foto contenida y 18 px de aire, como en
     el original. Elementor no tiene control de proporción para contenedores.
   · La palabra "sí" del titular en cursiva turquesa (va en <em> dentro del widget Título).
   · La palabra "total" pequeña junto a cada importe de las tarjetas (va en <span>).
   Usado en: Inicio (hero, sección #mochila y tarjetas de packs).
   ========================================================================================== */
.pod-media {
	aspect-ratio: 1 / 1;
}

.pod-media .elementor-widget-image {
	width: 100%;
	height: 100%;
}

.pod-media .elementor-widget-image > *,
.pod-media .elementor-widget-image a {
	height: 100%;
}

.pod-media img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 18px;
	object-fit: contain;
}

.pod-h1 em {
	font-style: italic;
	color: var(--pod-teal);
}

.pod-amt span {
	margin-left: 6px;
	color: var(--pod-ink-soft);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
}