/* ==========================================================================
   Astra Infoproductos Javi — diseño
   Sobrescribe variables globales de Astra sin tocar el contenido de las páginas.
   ========================================================================== */

:root {
	--ip-bg: #ffffff;
	--ip-surface: #f6f7fb;
	--ip-text: #14161f;
	--ip-muted: #5b6072;
	--ip-primary: #4f46e5;
	--ip-primary-dark: #3730a3;
	--ip-accent: #f59e0b;
	--ip-border: #e4e6ef;
	--ip-radius: 14px;
	--ip-shadow: 0 6px 24px rgba(20, 22, 31, 0.08);
	--ip-shadow-hover: 0 14px 34px rgba(79, 70, 229, 0.18);
	--ip-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Variables globales de Astra */
	--ast-global-color-0: var(--ip-primary);
	--ast-global-color-1: var(--ip-primary-dark);
	--ast-global-color-2: var(--ip-text);
	--ast-global-color-3: var(--ip-muted);
	--ast-global-color-4: var(--ip-surface);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--ip-font);
	color: var(--ip-text);
	background: var(--ip-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--ip-font);
	color: var(--ip-text);
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

p, li {
	line-height: 1.7;
}

a {
	color: var(--ip-primary);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--ip-primary-dark);
}

/* Accesibilidad: foco visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--ip-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Cabecera ------------------------------------------------------------- */
.site-header,
.main-header-bar {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--ip-border);
}

.ast-site-identity .site-title a {
	font-weight: 800;
	letter-spacing: -0.02em;
}

.main-header-menu .menu-link {
	font-weight: 600;
}

/* Botones (Astra, Gutenberg, WooCommerce, SureCart, SureForms) --------- */
.wp-block-button__link,
.ast-button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.srfm-submit-button {
	background: linear-gradient(135deg, var(--ip-primary), var(--ip-primary-dark));
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	padding: 0.85em 1.8em;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.srfm-submit-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--ip-shadow-hover);
	filter: brightness(1.05);
	color: #ffffff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ip-primary);
	border: 2px solid var(--ip-primary);
	box-shadow: none;
}

/* Tarjetas de producto (WooCommerce) ----------------------------------- */
.woocommerce ul.products li.product,
.ast-article-post .ast-post-thumb-wrap,
.wp-block-post,
.wc-block-grid__product {
	background: var(--ip-bg);
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow);
	padding: 1rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover,
.wp-block-post:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow-hover);
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	border-radius: calc(var(--ip-radius) - 4px);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ip-primary-dark);
	font-weight: 800;
}

.woocommerce span.onsale {
	background: var(--ip-accent);
	color: #1a1200;
	font-weight: 800;
	border-radius: 999px;
	min-height: auto;
	min-width: auto;
	padding: 0.35em 0.9em;
	line-height: 1.2;
}

/* SureCart: tarjetas y formularios ------------------------------------- */
:root {
	--sc-color-primary-500: var(--ip-primary);
	--sc-color-primary-600: var(--ip-primary-dark);
	--sc-input-border-radius-medium: 10px;
	--sc-border-radius-medium: var(--ip-radius);
}

/* Campos de formulario ------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
	border: 1.5px solid var(--ip-border);
	border-radius: 10px;
	padding: 0.8em 1em;
	background: var(--ip-bg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ip-primary);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

/* Secciones de Spectra / Gutenberg ------------------------------------- */
.wp-block-cover,
.uagb-container {
	border-radius: var(--ip-radius);
}

.wp-block-group.has-background,
.has-background {
	border-radius: var(--ip-radius);
}

.wp-block-image img,
.entry-content img {
	border-radius: var(--ip-radius);
	height: auto;
}

blockquote,
.wp-block-quote {
	border-left: 4px solid var(--ip-accent);
	background: var(--ip-surface);
	padding: 1.2rem 1.6rem;
	border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
	font-style: normal;
}

/* Pie ------------------------------------------------------------------ */
.site-footer,
.site-below-footer-wrap {
	background: #0f1120;
	color: #c9cce0;
}

.site-footer a {
	color: #ffffff;
}

/* Móvil ---------------------------------------------------------------- */
@media (max-width: 768px) {
	h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
	h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }

	.wp-block-button__link,
	.ast-button,
	button,
	input[type="submit"] {
		width: 100%;
		text-align: center;
	}

	.woocommerce ul.products li.product {
		padding: 0.8rem;
	}
}

/* Respeto a usuarios que reducen el movimiento ------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   v1.1 — Correcciones tras revisar la web real (Spectra + cabecera transparente)
   ========================================================================== */

/* Cabecera: el menú de esta web usa enlaces blancos, así que el fondo debe ser oscuro */
.site-header,
.main-header-bar,
.ast-primary-header-bar {
	background: rgba(15, 17, 32, 0.86) !important;
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.main-header-menu .menu-link,
.ast-header-sections-navigation .menu-link,
.site-title a {
	color: #ffffff !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.82rem;
}

.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--ip-accent) !important;
}

.custom-logo {
	height: auto;
	max-height: 56px;
	width: auto;
}

/* El botón del menú móvil y los iconos NO deben heredar el estilo de botón */
.menu-toggle,
button.menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-search-icon,
.ast-header-search button,
button.ast-search-submit,
.slick-arrow {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0.4em !important;
	width: auto !important;
	transform: none !important;
	filter: none !important;
}

/* Títulos: tamaños fluidos y sin cortar palabras a mitad */
h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3 {
	overflow-wrap: normal !important;
	word-break: normal !important;
	hyphens: none !important;
	text-wrap: balance;
}

h1,
.entry-content h1,
.wp-block-heading h1 {
	font-size: clamp(2.1rem, 6.2vw, 4.6rem) !important;
	line-height: 1.05 !important;
}

h2,
.entry-content h2 {
	font-size: clamp(1.7rem, 4.2vw, 3rem) !important;
	line-height: 1.12 !important;
}

h3,
.entry-content h3 {
	font-size: clamp(1.25rem, 2.6vw, 1.7rem) !important;
}

/* Botones de Spectra / Gutenberg: redondeados y con el mismo degradado */
.wp-block-button__link,
.wp-element-button,
.uagb-buttons-repeater,
.spectra-border-hover-override {
	border-radius: 999px !important;
	padding: 0.95em 2.1em !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(79, 70, 229, 0.38) !important;
	filter: brightness(1.08);
}

/* Párrafos de lectura más cómodos */
.entry-content p,
.entry-content li {
	font-size: clamp(1rem, 1.1vw + 0.7rem, 1.15rem);
	line-height: 1.7;
}

/* Imágenes de producto con esquinas y sombra suaves */
.entry-content img,
.woocommerce ul.products li.product img {
	border-radius: 14px;
}

.entry-content .wp-block-image img,
.woocommerce ul.products li.product img {
	box-shadow: 0 8px 28px rgba(20, 22, 31, 0.14);
}

@media (max-width: 768px) {
	/* En móvil solo los botones de contenido van a ancho completo */
	.menu-toggle,
	button.menu-toggle {
		width: auto !important;
	}
}

/* v1.2 — Título de portada más largo: tamaño contenido; y sin desbordamiento horizontal de Spectra */
h1,
.entry-content h1,
.wp-block-heading h1 {
	font-size: clamp(1.9rem, 4.2vw, 3.4rem) !important;
	line-height: 1.08 !important;
	max-width: 22ch;
}

html,
body {
	overflow-x: clip;
}

/* v1.3 — Spectra deja el H1 con 660px de relleno a la derecha (texto de ~140px): se anula */
h1,
.entry-content h1,
.wp-block-heading h1 {
	padding-right: 0 !important;
	max-width: min(22ch, 100%) !important;
}
