/* ==========================================================================
   Repaso de estilo de toda la web (24-09-2026)

   Un solo archivo para poder quitarlo de golpe (ver estilo-global.php). Casi todo
   corrige lo mismo: el kit global de Elementor (.elementor-kit-3039 h1/h2/h3) y Astra
   imponen tamaños, mayúsculas e interlineados pensados para otra web, y en las
   páginas sin diseño propio se notaba.
   ========================================================================== */

:root {
	--fs-tinta: #1d1f23;
	--fs-texto: #3b3f46;
	--fs-suave: #6b7078;
	--fs-borde: #e4e5e7;
	--fs-fondo-suave: #f6f6f4;
	--fs-negro: #0d0d0d;
}

/* --- 1. Páginas de texto: aviso legal, privacidad, cookies, condiciones… -------
   Astra las pinta a todo el ancho y sin márgenes: el texto tocaba el borde de la
   pantalla, en ordenador llegaba a líneas de 200 caracteres, y los títulos salían a
   48px en mayúsculas («3. CONDICIONES DE USO» ocupaba tres líneas en el móvil).
   Ahora: columna de lectura de 780px, títulos proporcionados y en minúscula. */

body.fs-documento .site-content .ast-container {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px 72px;
}

/* Arriba sumaban dos huecos: 140-150px de relleno en #content (para que la cabecera
   fija no tape el texto, style.css) y 150px de margen en .site-main. Con el margen solo
   ya queda aire bajo la cabecera. */
body.fs-documento #content { padding-top: 24px !important; }
@media (min-width: 1025px) {
	/* En ordenador el margen de .site-main es menor (100px) y la cabecera más alta. */
	body.fs-documento #content { padding-top: 64px !important; }
}
/* .site-main lleva un gris #fafafa que, con la columna estrecha, se veía como una tira
   gris sobre la página blanca. */
body.fs-documento main.site-main { background: transparent !important; }

body.fs-documento .entry-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--fs-texto);
}

body.fs-documento .entry-content p,
body.fs-documento .entry-content li { font-size: 16px; line-height: 1.7; color: var(--fs-texto); }
body.fs-documento .entry-content p { margin: 0 0 1em; }
body.fs-documento .entry-content ul,
body.fs-documento .entry-content ol { margin: 0 0 1.2em 1.3em; padding: 0; }
body.fs-documento .entry-content li { margin-bottom: 0.35em; }
body.fs-documento .entry-content strong { color: var(--fs-tinta); }
body.fs-documento .entry-content a { color: var(--fs-tinta); text-decoration: underline; text-underline-offset: 2px; }

body.fs-documento .entry-content h1,
body.fs-documento .entry-content h2,
body.fs-documento .entry-content h3,
body.fs-documento .entry-content h4 {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--fs-tinta);
}

body.fs-documento .entry-content h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.35em;
}

/* La primera línea tras el título es la fecha de «Última actualización». */
body.fs-documento .entry-content h1 + p {
	font-size: 14px;
	color: var(--fs-suave);
	margin-bottom: 2.2em;
}

body.fs-documento .entry-content h2 {
	font-size: clamp(1.2rem, 2vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 2.2em 0 0.7em;
	padding-top: 1.1em;
	border-top: 1px solid var(--fs-borde);
}

body.fs-documento .entry-content h3 {
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 1.6em 0 0.5em;
}

body.fs-documento .entry-content h4 { font-size: 1rem; font-weight: 600; margin: 1.4em 0 0.4em; }

body.fs-documento .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 14px;
	display: block;
	overflow-x: auto;
}
body.fs-documento .entry-content th,
body.fs-documento .entry-content td { border: 1px solid var(--fs-borde); padding: 8px 10px; text-align: left; vertical-align: top; }
body.fs-documento .entry-content th { background: var(--fs-fondo-suave); color: var(--fs-tinta); }

/* --- 2. Ficha de producto ------------------------------------------------------ */

/* Las opciones (capacidad, color, grado) salían DEBAJO del botón de comprar: el «CSS
   adicional» del personalizador lleva `.variations { order: 2 }`. Primero se elige y
   luego se compra. */
.single-product form.variations_form table.variations { order: 1; margin-top: 0; }
.single-product form.variations_form .single_variation_wrap { order: 2; }

/* Categorías debajo del título: «iPhone, iPhone 16, iPhone 16» (dos categorías con el
   mismo nombre). Se quedan en pequeño y gris: dan enlaces útiles pero no son
   información para el comprador. */
.single-product .product_meta { font-size: 13px; color: var(--fs-suave); }
.single-product .product_meta .detail-label { display: none; }
.single-product .product_meta a {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	background: var(--fs-fondo-suave);
	color: var(--fs-suave) !important;
	text-decoration: none;
	font-size: 12px;
}
.single-product .product_meta .sku_wrapper { display: none; }

/* La foto en móvil salía 14px corrida a la derecha y recortada por los lados. */
.single-product .wpgs-for .wpgs_image img.img-attr {
	margin: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: #fff;
}

/* La descripción iba de borde a borde: en ordenador, líneas de 1.400px. */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fs-texto);
}
.single-product .woocommerce-tabs ul.tabs { justify-content: center; }
@media (max-width: 767px) {
	.single-product .woocommerce-tabs .woocommerce-Tabs-panel { padding-left: 4px; padding-right: 4px; }
}

/* Y el recorte de la foto en móvil venía de su contenedor (0e92604): medía 226px con
   overflow oculto para una galería de 522px, así que el título se montaba encima de la
   mitad de abajo de la foto. En ordenador va en su columna y no pasa. */
@media (max-width: 1024px) {
	.single-product .elementor-element.elementor-element-0e92604 {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
	}
}

/* Con la foto entera vuelven a verse las miniaturas de colores, y sus flechas llevaban
   el texto «PREVIOUS / NEXT» encima de las fotos. Las miniaturas se pasan tocándolas. */
.single-product .wpgs-nav .slick-prev,
.single-product .wpgs-nav .slick-next { display: none !important; }

/* Las comas sueltas entre las categorías («iPhone , iPhone 16 ,»): el texto de fuera
   de los enlaces se queda sin tamaño y los enlaces llevan su propio espacio. */
.single-product .product_meta .detail-content { font-size: 0; }
.single-product .product_meta .detail-content a { margin: 0 4px 4px 0; }

/* --- 3. Contacto --------------------------------------------------------------
   En ordenador la fila de «Datos de contacto» + formulario iba de borde a borde (los
   datos pegados al margen izquierdo) y la columna de datos flotaba centrada a media
   altura del formulario. Ahora comparten ancho con el resto de la web y los dos
   bloques empiezan arriba, a la misma altura. */
@media (min-width: 1025px) {
	.page-id-5117 .elementor-element.elementor-element-d68d9c2 {
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
		gap: 56px;
	}
	.page-id-5117 .elementor-element.elementor-element-c1a2f92 {
		justify-content: flex-start !important;
		padding-top: 36px;
	}
}

/* --- 4. Los dos amarillos -------------------------------------------------------
   Decisión del usuario (24-09-2026): el dorado #FFC700 es el color de la web, pero el
   logo es limón #F1E356, así que conviven con degradados de uno a otro.
     - Logo: limón, sin tocar (es la imagen).
     - Lo que está junto al logo (botón «Pedir presupuesto», cuadro del carrito):
       degradado limón → dorado. Hace de puente entre el logo y el resto.
     - Un filete limón → dorado bajo la cabecera, en todas las páginas.
     - Franja de ahorro de la portada: degradado horizontal.
     - Botones de acción: dorado liso, como en la portada. */
:root {
	--fs-limon: #F1E356;
	--fs-dorado: #FFC700;
	--fs-degradado: linear-gradient(120deg, #F1E356 0%, #FFC700 100%);
}

.elementor-location-header .fs-header-presupuesto,
.elementor-location-header .fs-header-presupuesto:focus {
	background: var(--fs-degradado);
	color: #1d1f23;
	transition: background-position 0.3s ease, box-shadow 0.18s ease;
	background-size: 160% 100%;
	background-position: 0 0;
}
.elementor-location-header .fs-header-presupuesto:hover {
	background: var(--fs-degradado);
	background-size: 160% 100%;
	background-position: 100% 0;
	color: #1d1f23;
	box-shadow: 0 4px 14px rgba(255, 199, 0, 0.35);
}

@media (min-width: 1025px) {
	.elementor-location-header .fs-header-acciones .elementor-icon-wrapper,
	.elementor-location-header .fs-header-acciones .elementor-menu-cart__toggle_button,
	.elementor-location-header .fs-header-acciones .elementor-menu-cart__toggle_button:hover,
	.elementor-location-header .fs-header-acciones .elementor-menu-cart__toggle_button:focus {
		background: var(--fs-degradado);
	}
}

/* El filete de marca bajo la cabecera. */
.elementor-location-header .elementor-element.elementor-element-390e1c4 {
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, #F1E356 0%, #FFC700 60%) 1;
}

/* Franja de ahorro de la portada (inicio-v2.php): de limón a dorado. */
.fs-home .fs-ahorro {
	background: linear-gradient(100deg, #F1E356 0%, #FFC700 60%);
}

/* El formulario de presupuesto en la página de Contacto salía con el botón limón. */
.fs-contacto .fs-form__enviar .fs-btn {
	background: var(--fs-dorado) !important;
	color: #0D0D0D !important;
}
.fs-contacto .fs-form__enviar .fs-btn:hover,
.fs-contacto .fs-form__enviar .fs-btn:focus { background: #ffffff !important; }