/**
* Theme Name:        avanam-sporties
* Theme URI:         https://templatemela.com/
* Template:          avanam
* Author:            TemplateMela
* Author URI:        #
* Description:       This is a child theme of Avanam, generated by TemplateMela.
* Version:           1.0.15
* License:           GNU General Public License v3.0 (or later)
* License URI:       https://www.gnu.org/licenses/gpl-3.0.html
* Text Domain:       avanam-sporties
* Requires at least: 6.2
* Tested up to:      6.6
* Requires PHP:      7.4
* Tags: translation-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce

*/

/* ==========================================================================
 *  LEER ESTO ANTES DE TOCAR NADA DEL TEMA
 * ==========================================================================
 *
 *  1) TIPOGRAFIAS AUTOALOJADAS
 *     Las fuentes se sirven desde avanam-sporties/fuentes/, NO desde Google.
 *     Solo hay cuatro variantes: Montserrat 600 y 700, Inter 400 y 500.
 *     Si cambias una tipografia o anades un peso, HAY QUE REGENERAR esa
 *     carpeta o el texto se vera con la fuente del sistema, sin ningun aviso.
 *     Instrucciones completas en la cabecera de fuentes/fuentes.css.
 *
 *  2) EL BANNER DE COOKIES ESTA BLINDADO
 *     functions.php fuerza el banner de Complianz a desactivado en cada
 *     escritura. El interruptor del escritorio NO RESPONDERA hasta que se
 *     retire ese bloque. Esta ahi a proposito: las paginas legales siguen
 *     pendientes de revision profesional. Ver el comentario del bloque
 *     «BLINDAJE DEL BANNER DE COOKIES» en functions.php.
 *
 *  3) AL EDITAR ESTE FICHERO, SUBE LA Version: DE LA CABECERA
 *     Se usa como cache-buster del encolado. Si no la subes, el navegador
 *     sigue sirviendo el CSS anterior y parece que el cambio no ha entrado.
 * ==========================================================================
 */

/* ==================================================================
   Kustomiza2 — identidad de marca
   ------------------------------------------------------------------
   Sin hex literales. Todo sale del Kit global de Elementor (ID 28)
   y de la paleta global del tema (base_global_palette).
   Las variables --e-global-color-* estan definidas por Elementor en
   .elementor-kit-28, que es una clase de <body>: por eso los alias
   se declaran sobre body y no sobre :root.
   ================================================================== */

body {
	--k2-teal:       var(--global-palette1);
	--k2-teal-hover: var(--global-palette2);
	--k2-texto:      var(--e-global-color-text);
	--k2-coral:      var(--e-global-color-secondary);
	--k2-arena:      var(--e-global-color-accent);
	--k2-fondo-alt:  var(--e-global-color-k2bgalt);
}

/* Badge de oferta: coral de fondo con texto oscuro (5,85:1).
   Nunca texto blanco sobre coral: se queda en 2,89:1. */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale {
	background-color: var(--k2-coral);
	color: var(--k2-texto);
}

/* Separadores de la linea creativa. El arena es decorativo:
   no lleva texto encima ni se usa como fondo de bloques con copy. */
.k2-separador {
	border: 0;
	border-top: 2px solid var(--k2-arena);
}

/* Precio: coral de texto, definido en el Kit como k2coral-texto.
   4,930:1 sobre el fondo blanco del sitio. Sobre el fondo alterno
   baja a 4,483:1, que cumple AA solo como texto grande (>=3:1): si algún
   día se pone un precio a tamaño de texto normal sobre fondo alterno,
   ese caso concreto va en var(--k2-texto). */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .price ins {
	color: var(--e-global-color-k2coral-texto);
	text-decoration: none;
}

/* Precio anterior tachado: gris de la paleta, no coral. */
.woocommerce .price del,
.woocommerce .price del .amount {
	color: var(--global-palette6);
}

/* ==================================================================
   Pantalla de «próximamente» de WooCommerce
   ------------------------------------------------------------------
   Dos causas reales del desbordamiento horizontal a 360 px:

   1. La fila de cabecera (nombre del sitio + botón «Acceso») trae
      flex-wrap: nowrap desde el bloque de WooCommerce. Por debajo de
      unos 600 px sus dos hijos no caben, la fila se ensancha más que
      la ventana y arrastra el área de scroll. El titular y el párrafo
      están centrados, así que se centran respecto a esa caja más
      ancha y aparecen recortados por la derecha.

   2. El tema referencia --global-calc-wide-content-width pero no la
      define en ningún sitio. Eso deja
      --wp--style--global--wide-size inválida, y el max-width de los
      bloques .alignwide se queda en «none».
   ================================================================== */

body.k2-coming-soon {
	/* Repara la variable que el tema deja sin definir. */
	--global-calc-wide-content-width: var(--global-calc-content-width);
}

body.k2-coming-soon .woocommerce-coming-soon-banner-container,
body.k2-coming-soon .woocommerce-coming-soon-banner,
body.k2-coming-soon .wp-block-cover__inner-container {
	max-width: 100%;
}

@media (max-width: 600px) {
	/* Que la cabecera pueda envolver. */
	body.k2-coming-soon .woocommerce-coming-soon-header .is-nowrap {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	/* El titular viene con line-height fijo de 58px y tamaño mínimo de
	   27px: a 360 px deja un hueco enorme entre líneas. */
	body.k2-coming-soon .woocommerce-coming-soon-banner {
		line-height: 1.25;
	}
}

/* ==================================================================
   tmcore-image-box usado SIN imagen — clase k2-caja
   ------------------------------------------------------------------
   El widget está diseñado como una tarjeta que flota SOBRE la imagen:

     .tmcore-image-framed  { position: relative }
     .tmcore-image-box-content { position: absolute; bottom: 0;
                                 left: 35px; right: 35px;
                                 background-color: blanco fijo }

   Sin imagen la <figure> mide 0, el contenido queda fuera del flujo y
   el widget aporta 0 de altura: por eso las cajas se montaban unas
   sobre otras y solo se leía la última.

   Estos selectores tienen 2 clases frente a 1 del plugin, así que
   ganan por especificidad aunque su CSS se cargue después.
   El fondo y el padding de las cajas con color los sigue poniendo
   Elementor, que tiene 4 clases y gana sobre esto.
   ================================================================== */

.k2-caja .tmcore-image-framed {
	position: static;
}

.k2-caja .tmcore-image-box-content {
	position: static;
	inset: auto;
	background: transparent;
}

/* Texto descriptivo a la izquierda: centrado en móvil es ilegible. */
.elementor-widget-tmcore-image-box.k2-caja {
	text-align: left;
}

/* El widget de categoría también centra por defecto. */
.elementor-widget-tmcore-product-categories .cat-title {
	text-align: left;
}

/* ==================================================================
   Fallo del tema padre: --global-calc-wide-content-width
   ------------------------------------------------------------------
   avanam declara en theme.json  "wideSize": var(--global-calc-wide-content-width)
   pero solo define esa variable en generate_editor_css(), es decir en
   el editor de bloques. En el front NO existe, así que
   --wp--style--global--wide-size queda inválida y CUALQUIER bloque
   .alignwide del sitio se queda sin max-width.

   Se define aquí con la misma fórmula que usa el propio tema en el
   editor, para que el front y el editor coincidan.
   ================================================================== */

:root {
	--global-calc-wide-content-width: calc( var(--global-content-width) + 160px );
}

/* ==================================================================
   Formulario de contacto (CF7, post 4)
   ================================================================== */

/* Cláusula informativa de protección de datos bajo el formulario. */
.k2-legal-form {
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--global-palette6);
}

/* Trampa antispam: campo señuelo fuera de la vista. NO se usa display:none
   a propósito, para que los bots lo encuentren y lo rellenen. Quien lo
   rellena se marca como spam en inc/cf7-antispam.php. */
.k2-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ==================================================================
   Página «Sobre nosotros» (ID 47)
   ==================================================================
   Esta página usa la plantilla elementor_header_footer, así que NO pasa
   por .single-content y por tanto NO recibe la normalización de párrafos
   de Avanam: los <p> conservan el margin de 1em de la hoja del navegador
   (17 px con la tipografía base). Eso metía 17 px de más encima de cada
   párrafo y dejaba 16 px de cola debajo del último.

   ACOTADO A ESTA PÁGINA A PROPÓSITO. La home lleva 12 bloques de texto
   viéndose de una manera; si se quita «.elementor-47» todos suben 17 px.
   Decidido el 11 de septiembre de 2026. Si algún día se unifica, se amplía.

   Por qué dos selectores con especificidad distinta:
     · El primero solo compite con la hoja del navegador. Sobra con poco.
     · El segundo compite con
       «.elementor-47 .elementor-element.elementor-element-a100005 p»
       de post-47.css, que es (0,3,1) y además carga DESPUÉS que esta hoja.
       Añadiendo «.elementor-widget» subo a (0,4,1) y gano por
       especificidad, sin !important, para no bloquear futuros ajustes
       desde el propio Elementor.
   ================================================================== */
.elementor-47 .elementor-widget-text-editor p {
	margin-block-start: 0;
}

.elementor-47 .elementor-widget.elementor-widget-text-editor p:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
 * TABLAS DE BLOQUE EN MOVIL
 *
 * Solo se anade el min-width. El desbordamiento horizontal NO hace falta
 * declararlo: lo trae el nucleo de WordPress en
 * wp-includes/css/dist/block-library/style.min.css con
 * `.wp-block-table{overflow-x:auto}`, y esa hoja se sirve en estas paginas
 * (comprobado en el HTML del front). El tema padre no toca el overflow de
 * las tablas y Elementor tampoco.
 *
 * Lo que faltaba era el ancho minimo: sin el, la tabla se comprime hasta
 * caber en la pantalla y el overflow-x nunca llega a activarse, asi que las
 * columnas quedan ilegibles en vez de poder desplazarse.
 *
 * Alcance real: las tablas de las dos paginas legales con tablas de bloque,
 * la 41 (una) y la 42 (tres). No hay tablas de bloque en ningun otro
 * contenido ni en ninguna pagina de Elementor.
 * ========================================================================== */

.wp-block-table table {
	min-width: 560px;
}