/*
Theme Name:   Backbone (OceanWP Child)
Description:  Tema hijo de OceanWP para el proyecto Backbone.
Author:       Backbone
Template:     oceanwp
Version:      1.4.0
Text Domain:  oceanwp-child
*/

/* ===============================================================
   TOKENS DE DISEÑO
   Origen: Figma — Backbone / Vestigio Minis.
   Todo el CSS del tema consume estas variables, nunca valores
   literales. Cambiar el diseño = cambiar este bloque.
   =============================================================== */

:root {

	/* --- Paleta cruda (los 9 colores del Figma) ---------------- */
	--bb-white:        #FFFFFF;
	--bb-off-white:    #EDEDED;
	--bb-grey-light:   #E0E0E0;
	--bb-grey:         #ACACAC;
	--bb-pink:         #E9B4B4;
	--bb-red:          #FF0000;
	--bb-red-deep:     #450000;
	--bb-red-black:    #1F0000;
	--bb-black:        #000000;

	/* --- Transparencias --------------------------------------- */
	--bb-white-37:     rgba( 255, 255, 255, 0.37 );
	--bb-off-white-81: rgba( 237, 237, 237, 0.81 );

	/* --- Roles semánticos ------------------------------------- */
	/* Usa SIEMPRE estos en el CSS, no la paleta cruda de arriba. */
	--bb-text:            var( --bb-white );      /* títulos, precio      */
	--bb-text-soft:       var( --bb-grey-light ); /* detalles del producto*/
	--bb-text-muted:      var( --bb-pink );       /* migas, stock         */
	--bb-text-dim:        var( --bb-grey );       /* terciario            */

	--bb-accent:          var( --bb-red );        /* bordes, acentos      */
	--bb-border:          var( --bb-red );        /* borde interactivo    */
	--bb-border-soft:     var( --bb-white-37 );   /* borde suave          */

	--bb-surface:         var( --bb-red-black );  /* cajas sobre el fondo */
	--bb-surface-solid:   var( --bb-off-white );  /* botón relleno        */
	--bb-on-solid:        var( --bb-red-black );  /* texto sobre relleno  */

	/* --- Fondo general -----------------------------------------
	   Degradado lineal, paradas exactas del Figma. Observa que la
	   rampa sube de brillo hasta el 88% y se apaga a negro en el
	   último 12%.
	   Si el ángulo no coincide, se cambia solo --bb-bg-angle.
	   ------------------------------------------------------------ */
	--bb-bg-stop-1: #2F0303;
	--bb-bg-stop-2: #570000;
	--bb-bg-stop-3: #210000;
	--bb-bg-stop-4: #000000;
	--bb-bg-angle:  180deg;

	--bb-bg: linear-gradient(
		var( --bb-bg-angle ),
		var( --bb-bg-stop-1 )   0%,
		var( --bb-bg-stop-2 )  88%,
		var( --bb-bg-stop-3 )  96%,
		var( --bb-bg-stop-4 ) 100%
	);

	/* --- Tipografía ------------------------------------------- */
	/* Display: versalitas, para migas, títulos y stock.          */
	--bb-font-display: 'Baskervville SC', 'Libre Baskerville', Baskerville, Georgia, serif;
	/* Interfaz: botones, detalles del producto.                   */
	--bb-font-ui: 'Space Mono', 'Courier New', ui-monospace, monospace;
	/* Precio: geométrica, solo para cifras destacadas.            */
	--bb-font-price: 'League Spartan', 'Spartan', 'Helvetica Neue', Arial, sans-serif;

	--bb-text-xs:    0.75rem;   /* 12px — MXN, etiquetas menores   */
	--bb-text-sm:    0.875rem;  /* 14px — botones, migas           */
	--bb-text-base:  1rem;      /* 16px — detalles del producto    */
	--bb-text-lg:    1.125rem;  /* 18px — stock                    */
	--bb-text-xl:    clamp( 1.75rem, 3vw, 2.5rem );   /* 40px título  */
	--bb-text-2xl:   clamp( 2.25rem, 4vw, 3.25rem );  /* 52px precio  */

	--bb-leading-tight:  1.15;
	--bb-leading-normal: 1.6;

	/* El diseño usa mucho interletrado en las mayúsculas mono */
	--bb-tracking-ui:      0.08em;
	--bb-tracking-display: 0.02em;

	/* --- Espaciado -------------------------------------------- */
	--bb-space-1: 0.25rem;   /*  4px */
	--bb-space-2: 0.5rem;    /*  8px */
	--bb-space-3: 1rem;      /* 16px */
	--bb-space-4: 1.5rem;    /* 24px */
	--bb-space-5: 2rem;      /* 32px */
	--bb-space-6: 3rem;      /* 48px */
	--bb-space-7: 5rem;      /* 80px */

	/* --- Formas ----------------------------------------------- */
	--bb-radius:     0;       /* el diseño es de esquinas vivas    */
	--bb-radius-pill: 999px;  /* salvo los botones de variación    */
	--bb-border-width: 1px;
	--bb-container: 1440px;

	/* --- Cabecera ---------------------------------------------
	   Alto del header de Elementor (plantilla «Header», post 42).
	   Si se cambia allí, se cambia aquí: lo usan el anclaje de los
	   enlaces internos y cualquier cálculo que dependa del hueco.
	   ------------------------------------------------------------ */
	--bb-header-h: 98px;
}

/* ===============================================================
   BASE
   =============================================================== */

body {
	background: var( --bb-bg );
	background-attachment: fixed;
	color: var( --bb-text );
	font-family: var( --bb-font-ui );
}

h1, h2, h3, h4, h5, h6 {
	font-family: var( --bb-font-display );
	color: var( --bb-text );
	letter-spacing: var( --bb-tracking-display );
	line-height: var( --bb-leading-tight );
}

/* ===============================================================
   CABECERA PEGAJOSA

   El header lo pinta Header & Footer Elementor dentro de
   <header id="masthead">, y su contenedor raíz venía con
   position:fixed guardado desde el editor. Fijo = fuera del flujo:
   #masthead se queda con 0px de alto y todas las páginas que no
   son de Elementor (login, carrito, pedido, mi cuenta…) empiezan
   por debajo de la cabecera.

   position:sticky hace las dos cosas de una vez: reserva su hueco
   mientras está arriba del todo y se queda pegado al hacer scroll.
   =============================================================== */

/* 1. El contenedor de Elementor vuelve al flujo normal.
      Gana por especificidad (1,3,0) a la regla generada
      `.elementor .e-72aec4c { position: fixed }` (0,2,0), así que
      sigue valiendo aunque se retoque el header en el editor. */
.ehf-header #masthead > .elementor > .e-con {
	position: relative;
}

/* 2. El pegado va aquí, no en el contenedor de dentro: un sticky
      solo se desplaza dentro de su padre, y el padre del contenedor
      es #masthead, que mide exactamente lo mismo → no se pegaría
      nunca. #masthead sí cuelga de #wrap, que abarca toda la página.

      El selector lleva `body` delante para ganarle por especificidad
      a `.ehf-header #masthead { position: relative }` del plugin,
      cuyo orden de carga no está garantizado. */
body.ehf-header #masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* 3. Los enlaces del menú apuntan a anclas de la portada
      (#descargar, #tienda). Sin esto el destino queda tapado por la
      cabecera al saltar. */
html {
	scroll-padding-top: var( --bb-header-h );
}

/* 4. El nombre de la cuenta lo pone inc/header.php y su largo depende
      de quien entre. El hueco de la cabecera es estrecho, así que un
      nombre largo se recorta en lugar de descuadrar la fila. */
.ehf-header #masthead .bb-cuenta-enlace {
	display: block;
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===============================================================
   OPCIONES DE LA CUENTA

   El desplegable que se abre al pasar el ratón por el nombre. Lo
   pinta inc/header.php dentro del bloque de la cuenta y solo para
   quien haya entrado; aquí se decide cuándo se ve.

   Sin guion: `:hover` para el ratón y `:focus-within` para el
   tabulador. El segundo funciona porque un menú oculto no recibe el
   foco: primero se enfoca el nombre, eso lo abre, y a partir de ahí
   el foco ya puede entrar en él sin que se cierre.
   =============================================================== */

/* El marco al que se agarra el desplegable es el bloque de la cuenta
   (identificador 6fb647b de Elementor, el mismo que se esconde más
   abajo en móvil). */
.ehf-header #masthead .elementor-element-6fb647b {
	position: relative;
}

.bb-cuenta-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;

	/* Relleno transparente en vez de un margen: el desplegable queda
	   separado del nombre pero sin hueco muerto entre los dos, que es
	   por donde se escaparía el ratón camino de las opciones. */
	padding-top: var( --bb-space-3 );

	/* Cerrado. No vale `display: none` porque no se puede animar: se
	   esconde con `visibility`, que sí deja transición y que —igual que
	   `display`— saca del tabulador lo que hay dentro, así que el
	   apaño del foco de arriba sigue en pie. */
	visibility: hidden;
	opacity: 0;
	transform: translateY( -6px );

	/* Al cerrarse la visibilidad espera a que acabe el desvanecido, por
	   eso su retardo es de 0,18s; si cambiara al instante el menú
	   desaparecería de golpe y no se vería la salida. */
	transition:
		opacity 0.18s ease-out,
		transform 0.18s ease-out,
		visibility 0s linear 0.18s;
}

.ehf-header #masthead .elementor-element-6fb647b:hover .bb-cuenta-menu,
.ehf-header #masthead .elementor-element-6fb647b:focus-within .bb-cuenta-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY( 0 );

	/* Al abrirse, en cambio, se ve desde el primer fotograma: sin
	   retardo, para que se pueda pinchar y tabular ya. */
	transition:
		opacity 0.18s ease-out,
		transform 0.18s ease-out,
		visibility 0s;
}

/* A quien haya pedido menos movimiento se le deja el desvanecido, que
   es lo que evita el sobresalto, y se le quita el deslizamiento. */
@media ( prefers-reduced-motion: reduce ) {

	.bb-cuenta-menu,
	.ehf-header #masthead .elementor-element-6fb647b:hover .bb-cuenta-menu,
	.ehf-header #masthead .elementor-element-6fb647b:focus-within .bb-cuenta-menu {
		transform: none;
	}
}

.bb-cuenta-menu__caja {
	display: flex;
	flex-direction: column;
	min-width: 11rem;

	background: var( --bb-surface );
	border: var( --bb-border-width ) solid var( --bb-border-soft );
	padding: var( --bb-space-2 ) 0;
}

.bb-cuenta-menu__enlace {
	/* En píxeles y no con los tokens de espaciado: --bb-space-4 debería
	   ser 24px pero se queda en 15px por lo mismo que la tipografía de
	   aquí abajo. Mientras la escala esté encogida, el valor literal es
	   el único que dice la verdad. */
	padding: 6px 24px;

	font-family: var( --bb-font-ui );

	/* En `em`, no en `rem`: OceanWP deja la raíz en 10px, así que
	   --bb-text-sm se queda en 8,75px. Con `1em` se heredan los 14px de
	   la cabecera y el desplegable se lee igual que el nombre del que
	   cuelga. */
	font-size: 1em;

	letter-spacing: var( --bb-tracking-ui );
	color: var( --bb-text );
	text-decoration: none;
	white-space: nowrap;

	transition:
		color 0.2s ease-out,
		background-color 0.2s ease-out;
}

.bb-cuenta-menu__enlace:hover,
.bb-cuenta-menu__enlace:focus-visible {
	color: var( --bb-text-muted );
	background: rgba( 255, 255, 255, 0.06 );
}

/* ===============================================================
   PIE PEGADO AL FONDO DE LA VENTANA

   En páginas cortas (mi cuenta, carrito vacío, 404…) el contenido
   no llena la ventana: el pie termina a media pantalla y por debajo
   asoma el degradado rojo del body.

   La estructura de OceanWP es
     #outer-wrap > #wrap > ( #masthead, #main, pie )
   —el pie es hermano de #main, no va aparte—, así que basta con que
   la columna mida la ventana entera y #main se quede el sobrante.
   =============================================================== */

#outer-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* En móvil, descontando la barra del navegador. */
	min-height: 100dvh;
}

#outer-wrap > #wrap {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

/* El sobrante se lo queda el contenido… */
#outer-wrap > #wrap > #main {
	flex: 1 0 auto;
}

/* …y cabecera y pie conservan su alto natural: sin esto el
   flex-shrink por defecto los comprimiría cuando falte sitio.
   .footer-width-fixer es el envoltorio que pone Header & Footer
   Elementor; #footer, el de OceanWP si algún día se vuelve a él. */
#outer-wrap > #wrap > #masthead,
#outer-wrap > #wrap > .footer-width-fixer,
#outer-wrap > #wrap > #footer {
	flex: 0 0 auto;
}

/* ===============================================================
   MENÚ MÓVIL

   La fila de la cabecera es de ancho fijo y con los enlaces al
   centro: en cuanto la pantalla se estrecha, los textos se pisan.
   Por debajo de 1024px —el corte de tableta de Elementor— se queda
   solo el logotipo a la izquierda y la hamburguesa a la derecha, y
   todo lo demás se ve en un panel a pantalla completa.

   El botón y el panel los pinta inc/header.php; abrirlos y cerrarlos,
   assets/js/menu-movil.js.
   =============================================================== */

/* En escritorio no hay hamburguesa: la fila entera se ve. */
.bb-hamburguesa {
	display: none;
}

@media ( max-width: 1024px ) {

	/* Los dos bloques de la derecha de la fila: los enlaces (9465f91) y
	   la cuenta (6fb647b). Se usa la clase `elementor-element-<id>`, que
	   es la que Elementor pone siempre y solo depende del identificador
	   del bloque —no del hash de estilos, que cambia al retocarlos—.
	   Si se rehacen esos bloques en el editor, los identificadores
	   nuevos van aquí y en las constantes de inc/header.php. */
	.ehf-header #masthead .elementor-element-9465f91,
	.ehf-header #masthead .elementor-element-6fb647b {
		display: none;
	}

	.ehf-header #masthead .bb-hamburguesa {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;

		/* Área de toque cómoda aunque el dibujo sea pequeño. */
		width: 44px;
		height: 44px;
		padding: 0 10px;
		align-self: center;

		background: none;
		border: 0;
		cursor: pointer;
	}

	.bb-hamburguesa__barra {
		display: block;
		height: 2px;
		background: var( --bb-text );
	}
}

/* El fondo del panel: translúcido, se adivina la página por debajo. */
.bb-menu-movil {
	position: fixed;
	inset: 0;
	z-index: 1000;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: rgba( 31, 0, 0, 0.92 );
	backdrop-filter: blur( 6px );
	animation: bb-menu-aparecer 0.18s ease-out;
}

/* El atributo `hidden` manda sobre el display de arriba. */
.bb-menu-movil[hidden] {
	display: none;
}

@keyframes bb-menu-aparecer {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Mientras el panel está abierto, la página de detrás no se mueve. */
body.bb-menu-abierto {
	overflow: hidden;
}

/* La equis, arriba a la derecha: justo donde estaba la hamburguesa. */
.bb-menu-movil__cerrar {
	position: absolute;
	top: calc( ( var( --bb-header-h ) - 44px ) / 2 );
	right: 10%;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;

	background: none;
	border: 0;
	color: var( --bb-text );
	cursor: pointer;
}

.bb-menu-movil__cerrar svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
	fill: none;
}

.bb-menu-movil__lista {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --bb-space-4 );
	text-align: center;
}

.bb-menu-movil__enlace {
	font-family: var( --bb-font-ui );
	font-size: var( --bb-text-lg );
	letter-spacing: var( --bb-tracking-ui );
	text-transform: uppercase;
	color: var( --bb-text );
	text-decoration: none;

	/* Otra vez el nombre de la cuenta: aquí hay sitio de sobra, pero
	   no tanto como para dejarlo correr en pantallas pequeñas. */
	max-width: 80vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bb-menu-movil__enlace:hover,
.bb-menu-movil__enlace:focus-visible {
	color: var( --bb-text-muted );
}

/* ===============================================================
   IMAGEN DE IDENTIDAD VISUAL DE LA PORTADA

   La imagen viene con fondo negro propio y encima del degradado rojo
   se recorta como un rectángulo. Con el modo de fusión «aclarar» cada
   píxel se queda con el más claro de los dos —el suyo o el del fondo—,
   así que su negro desaparece y el dibujo flota sobre la portada.

   El selector va por el ID del adjunto (wp-image-120), que WordPress
   pone en la propia etiqueta y es único en todo el sitio.

   Si dejara de hacer efecto, casi seguro es que un antepasado de
   Elementor abrió contexto de apilamiento propio (un `transform`, un
   `filter` o un `z-index`) y la fusión ya solo alcanza hasta ahí: el
   arreglo es quitar ese fondo/efecto en la sección que la contiene.
   =============================================================== */

img.wp-image-120 {
	mix-blend-mode: lighten;
}

/* ===============================================================
   BOTONES DE COMPRA SOBRE ELEMENTOS DE ELEMENTOR

   inc/comprar.php convierte en enlace de compra el botón #minibox y
   los iconos de carrito de los minis digitales.
   =============================================================== */

/* A los iconos les hace falta un enlace nuevo alrededor. Un enlace es
   en línea y el icono es un bloque: sin esto la caja del enlace no
   coincide con la del icono y el área de click se descuadra. */
.bb-comprar--envoltorio {
	display: block;
	color: inherit;
}

/* WooCommerce cuelga un «Ver carrito» detrás del botón al añadir. Los
   dos sitios donde cae son filas ya cerradas —el precio de la tarjeta
   y la pareja de botones de la caja—, así que se cuela a presión entre
   sus vecinos. Se oculta y el aviso lo damos nosotros, aquí abajo. */
.bb-comprar + .added_to_cart {
	display: none;
}

/* --- El aviso de «Añadido» ----------------------------------------

   Una etiqueta pequeña que asoma justo encima del botón y se va sola.
   Va en un ::after y en posición absoluta, así que no empuja nada:
   ni la fila del precio de las tarjetas ni la pareja de botones de la
   caja cambian de tamaño cuando aparece.

   El texto viene del atributo que pone inc/comprar.php; la clase que
   lanza la animación, de assets/js/comprar.js. */

.bb-comprar {
	position: relative;
}

.bb-comprar::after {
	content: attr( data-bb-aviso );

	position: absolute;
	bottom: calc( 100% + var( --bb-space-2 ) );
	left: 50%;
	transform: translateX( -50% );

	padding: var( --bb-space-1 ) var( --bb-space-2 );
	background: var( --bb-surface );
	border: var( --bb-border-width ) solid var( --bb-border );

	font-family: var( --bb-font-ui );

	/* En `em`, no con --bb-text-xs: ese token se queda en 7,5px porque
	   OceanWP deja la raíz en 10px. Con `em` el aviso se mide contra el
	   botón del que sale, así que sale proporcionado tanto sobre el
	   botón grande como sobre los iconos de las tarjetas. */
	font-size: 0.8em;

	letter-spacing: var( --bb-tracking-ui );
	text-transform: uppercase;
	color: var( --bb-text );
	white-space: nowrap;

	/* En reposo no se ve y no estorba al puntero. */
	opacity: 0;
	pointer-events: none;
}

.bb-comprar--anadido::after {
	animation: bb-aviso-anadido 1.8s ease-out;
}

/* Entre el click y la respuesta de WooCommerce pasa más de un segundo,
   y sin nada que lo acuse el click parece perdido. La clase `loading`
   la pone el propio WooCommerce mientras espera. */
.bb-comprar.loading {
	opacity: 0.55;
}

@keyframes bb-aviso-anadido {
	0%   { opacity: 0; transform: translate( -50%, 4px ); }
	12%  { opacity: 1; transform: translate( -50%, 0 ); }
	72%  { opacity: 1; transform: translate( -50%, 0 ); }
	100% { opacity: 0; transform: translate( -50%, -4px ); }
}

/* A quien haya pedido menos movimiento se le deja el aviso, pero solo
   apareciendo y desapareciendo. */
@media ( prefers-reduced-motion: reduce ) {

	/* El centrado también vive en `transform`, así que hay que repetirlo:
	   sin él la etiqueta se iría media anchura a la derecha. */
	@keyframes bb-aviso-anadido {
		0%   { opacity: 0; transform: translateX( -50% ); }
		12%  { opacity: 1; transform: translateX( -50% ); }
		72%  { opacity: 1; transform: translateX( -50% ); }
		100% { opacity: 0; transform: translateX( -50% ); }
	}
}

/* ===============================================================
   PÁGINAS LEGALES

   Términos, Aviso de Privacidad y Aviso Legal salen con la plantilla
   suelta de OceanWP (`content-full-screen` en el Customizer), así que
   sin esto el texto cruza la pantalla de lado a lado. La clase la
   pone `oceanwp_child_clase_paginas_legales()` en functions.php.

   Ojo con los tokens `rem`: OceanWP deja la raíz en 10px, así que
   --bb-text-base valdría 10px. Aquí el tamaño se fija en px en la
   caja y todo lo de dentro se mide en `em` contra ella.
   =============================================================== */

.bb-legal .entry {
	max-width: 68ch;
	margin: 0 auto;
	padding: var( --bb-space-6 ) var( --bb-space-3 ) var( --bb-space-7 );
	font-family: var( --bb-font-ui );
	font-size: 16px;
	line-height: var( --bb-leading-normal );
	color: var( --bb-text-soft );
}

.bb-legal .entry h1 {
	font-size: 2.2em;
	margin: 0 0 var( --bb-space-5 );
	text-align: center;
}

/* Regla fina bajo el título, del mismo rojo que el resto de la marca. */
.bb-legal .entry h1::after {
	content: "";
	display: block;
	width: 4em;
	height: var( --bb-border-width );
	margin: var( --bb-space-4 ) auto 0;
	background: var( --bb-accent );
}

.bb-legal .entry h2 {
	font-size: 1.45em;
	margin: var( --bb-space-6 ) 0 var( --bb-space-3 );
	color: var( --bb-text );
}

.bb-legal .entry h3 {
	font-size: 1.15em;
	margin: var( --bb-space-5 ) 0 var( --bb-space-2 );
	color: var( --bb-text-muted );
}

.bb-legal .entry p,
.bb-legal .entry li {
	font-size: 1em;
	line-height: var( --bb-leading-normal );
}

.bb-legal .entry p {
	margin: 0 0 var( --bb-space-3 );
}

.bb-legal .entry ul,
.bb-legal .entry ol {
	margin: 0 0 var( --bb-space-4 );
	padding-left: var( --bb-space-4 );
}

.bb-legal .entry li {
	margin-bottom: var( --bb-space-2 );
}

.bb-legal .entry ul li::marker {
	color: var( --bb-accent );
}

.bb-legal .entry strong {
	color: var( --bb-text );
	font-weight: 700;
}

/* La fecha de actualización, en gris y separada del cuerpo. */
.bb-legal .entry > p:first-of-type em {
	display: block;
	color: var( --bb-text-dim );
	font-size: 0.85em;
	letter-spacing: var( --bb-tracking-ui );
	text-align: center;
	margin-bottom: var( --bb-space-5 );
}

.bb-legal .entry a {
	color: var( --bb-text-muted );
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bb-legal .entry a:hover,
.bb-legal .entry a:focus {
	color: var( --bb-accent );
}

@media ( max-width: 767px ) {

	.bb-legal .entry {
		padding: var( --bb-space-5 ) var( --bb-space-3 ) var( --bb-space-6 );
		font-size: 15px;
	}

	.bb-legal .entry h1 {
		font-size: 1.8em;
	}
}