/*
 * Liquid Glass — Sistema de diseño DiiPhone
 * Ver DESIGN_SYSTEM.md para la referencia completa.
 *
 * Este archivo define SOLO la base del sistema:
 *   1. Tokens (custom properties) reutilizables en todo el sitio, incluida
 *      la tipografía de marca (Montserrat / Montserrat Black).
 *   1b. Aplicación global de la tipografía de marca.
 *   2. Una clase utilitaria .liquid-glass que aplica el efecto de vidrio.
 *   2c. Tokens y utilidades de "acento vívido" con los colores REALES de
 *       marca DiiPhone (azul + ámbar), no una referencia genérica.
 *   2d. Encabezado con acento (opt-in, no automático).
 *   2e. Insignia circular numerada para pasos/procesos.
 *   2f. Fondo decorativo de blobs de vidrio para secciones hero/servicios.
 *   3. Fallbacks para navegadores sin backdrop-filter.
 *   4. Ajustes de rendimiento/accesibilidad (móviles gama baja, reduced-transparency, reduced-motion).
 *
 * Los componentes específicos (tarjetas de producto, header, checkout, etc.)
 * se construyen en sus propios archivos y consumen estos tokens/clases.
 *
 * BREAKPOINTS DEL SISTEMA (usar estos mismos valores literales en @media
 * en todos los archivos de assets/css/components/, ya que "@media" no
 * acepta custom properties). Alineados a los valores por defecto de
 * Astra (Personalizar → Diseño → Breakpoints) para que el corte visual
 * coincida con el cambio a menú móvil del tema padre:
 *   - Móvil:    hasta 544px
 *   - Tablet:   545px – 976px
 *   - Desktop:  desde 977px
 * Si el sitio tiene esos valores personalizados en el Customizer, avisar
 * para actualizar este archivo y los de components/.
 */

/*
 * 0. BUG corregido ("las páginas no están centradas"): sin box-sizing:
 * border-box, un elemento con "width:100%" + padding propio (muy común en
 * nuestras tarjetas/contenedores) renderiza MÁS ANCHO que su contenedor real
 * (el padding se suma en vez de descontarse), lo que puede causar overflow
 * horizontal y que el contenido centrado se vea desplazado. Es el reset
 * estándar que usa la gran mayoría de themes modernos — si Astra ya lo
 * define, esto es simplemente redundante y no rompe nada.
 */
*, *::before, *::after {
	box-sizing: border-box;
}

/*
 * 1. Tokens base del sistema Liquid Glass (valores por defecto, tema claro)
 *
 * REFORZADO (el vidrio se veía "plano" comparado con la referencia visual
 * del cliente): sombra en dos capas para más profundidad, borde más
 * definido, y un brillo interior en el borde superior (inset highlight) que
 * simula la luz reflejándose en una superficie de vidrio real. Ver también
 * la regla ".liquid-glass::before" más abajo (el reflejo diagonal).
 */
:root {
	--glass-bg: rgba(255, 255, 255, 0.18);
	--glass-border: rgba(255, 255, 255, 0.45);
	--glass-blur: 20px;
	--glass-radius: 24px;
	--glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	--glass-highlight: rgba(255, 255, 255, 0.6);

	/* Color sólido de respaldo para navegadores sin soporte de backdrop-filter */
	--glass-bg-fallback: rgba(255, 255, 255, 0.92);

	/*
	 * Paleta REAL de marca DiiPhone (reemplaza la exploración "azul cristal +
	 * lima" con los colores/degradados oficiales del logo):
	 *   --brand-blue-light: #5271ff
	 *   --brand-blue-deep:  #004d93
	 *   --brand-amber:      #ffb923
	 *   --brand-black:      #000000
	 *   --brand-white:      #ffffff
	 * Dos roles separados, igual que antes, pero con estos colores:
	 *   - "accent" → degradado azul (igual al isotipo azul de la marca):
	 *                texto/datos destacados, tintes de tarjeta. "Premium".
	 *   - "cta"    → degradado ámbar (igual al isotipo ámbar de la marca):
	 *                botones y enlaces de acción. Usa texto NEGRO encima
	 *                (el ámbar es claro; blanco no pasa contraste AA).
	 * El segundo stop del degradado CTA (#FF8A00) es una aproximación del
	 * naranja que se ve en el isotipo ámbar — no tengo el hex exacto de ese
	 * extremo del degradado; confirmar contra el archivo fuente del logo.
	 */
	--glass-accent-gradient: linear-gradient(135deg, #004d93, #5271ff);
	--glass-accent-gradient-vivid: linear-gradient(135deg, #004d93, #5271ff, #ffb923);
	--glass-pill-radius: 999px;
	--glass-glow: 0 0 24px rgba(82, 113, 255, 0.35);
	--glass-tint-blue: rgba(82, 113, 255, 0.12);
	--glass-tint-amber: rgba(255, 185, 35, 0.14);

	--glass-cta-gradient: linear-gradient(135deg, #ffb923, #ff8a00);
	--glass-cta-glow: 0 0 24px rgba(255, 185, 35, 0.4);
	--glass-cta-glow-hover: 0 0 32px rgba(255, 185, 35, 0.5);
	--glass-cta-text: #000000;

	/* Fallback sólido para .liquid-glass-card-tinted en navegadores sin backdrop-filter */
	--glass-tint-bg-fallback: #EAF0FF;

	/*
	 * Tipografía de marca: Montserrat para texto, Montserrat Black (900)
	 * para títulos grandes. La fuente se enqueue desde Google Fonts en
	 * functions.php (handle "diiphone-fonts"), cargada antes que este archivo.
	 */
	--font-body: 'Montserrat', -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-display: 'Montserrat', -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/*
 * 1b. Aplicación global de la tipografía de marca (Montserrat / Montserrat
 * Black), sitio completo — no solo en las páginas con acento vívido.
 *
 * Usa !important en font-family/font-weight ÚNICAMENTE aquí: Astra imprime
 * su CSS de tipografía del Customizer como <style> inline en wp_head, que
 * puede quedar DESPUÉS de este archivo encolado en el <head> y ganar el
 * empate de especificidad por orden de aparición. Sin !important, Astra
 * podría revertir la fuente de marca de forma intermitente según cómo esté
 * configurado el Customizer. Es una excepción deliberada, no un hábito.
 */
body,
input,
select,
textarea,
button,
.elementor-widget-text-editor,
.elementor-button,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .summary.entry-summary {
	font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--font-display) !important;
}

/* Títulos principales: Montserrat Black (900), como pide la marca */
h1, h2,
.elementor-heading-title.elementor-size-large,
.elementor-heading-title.elementor-size-xl,
.elementor-heading-title.elementor-size-xxl {
	font-weight: 900 !important;
}

/* Subtítulos (h3–h6): bold, no Black, para no saturar la jerarquía visual */
h3, h4, h5, h6 {
	font-weight: 700 !important;
}

/*
 * 2. Clase base reutilizable.
 * Uso: <div class="liquid-glass"> ... </div>
 * Por defecto usa el fallback sólido; si el navegador soporta backdrop-filter,
 * la regla @supports de abajo activa el vidrio translúcido real.
 */
.liquid-glass {
	position: relative;
	overflow: hidden;
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
}

/* Vidrio translúcido real solo si el navegador soporta backdrop-filter */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.liquid-glass {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
		backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	}
}

/*
 * Reflejo diagonal de vidrio ("sheen"): una franja de luz sutil en la
 * esquina superior, igual que en la referencia visual del cliente. Aplica
 * también a ".liquid-glass-card-tinted" (definida más abajo). Puramente
 * decorativo — "pointer-events: none" para no interferir con clics.
 */
.liquid-glass::before,
.liquid-glass-card-tinted::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1; /* detrás del contenido real (texto/íconos), encima del fondo del propio contenedor */
	pointer-events: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 45%);
}

/*
 * 2b. Modificadores opcionales para usar junto con ".liquid-glass" en el
 * campo "Clases CSS" (pestaña Avanzado) de cualquier sección/widget de
 * Elementor, sin tocar el contenido de la página:
 *   - .liquid-glass--padded  → agrega espacio interno (la base no trae padding
 *                              porque Elementor ya controla el padding de sus
 *                              propias secciones/columnas).
 *   - .liquid-glass--dark    → variante para usar sobre fondos oscuros/fotos
 *                              con mucho contraste, manteniendo AA en el texto.
 */
.liquid-glass--padded {
	padding: 24px;
}

.liquid-glass--dark {
	--glass-bg: rgba(20, 20, 20, 0.35);
	--glass-border: rgba(255, 255, 255, 0.18);
	--glass-highlight: rgba(255, 255, 255, 0.25);
	--glass-bg-fallback: rgba(20, 20, 20, 0.85);
	color: #fff;
}

/*
 * 2c. Utilidades de acento vívido (colores reales de marca), para usar junto
 * con (o en vez de) ".liquid-glass" en el campo "Clases CSS" de Elementor:
 *   - .liquid-glass-btn-pill    → botón píldora de ACCIÓN: relleno ámbar con
 *                                 glow y texto negro (buen contraste sobre
 *                                 un color tan claro).
 *   - .liquid-glass-btn-lime    → CTA alternativo (ej. WhatsApp): verde
 *                                 oficial de WhatsApp (#25D366), no un lima
 *                                 genérico fuera de la paleta de marca.
 *   - .liquid-glass-card-tinted → tarjeta de vidrio con tinte de color sutil
 *                                 (degradado azul→ámbar) en vez de blanco/gris puro.
 */
.liquid-glass-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--glass-pill-radius);
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: var(--glass-cta-gradient);
	box-shadow: var(--glass-cta-glow);
	color: var(--glass-cta-text);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.liquid-glass-btn-pill:hover {
		transform: translateY(-2px);
		box-shadow: var(--glass-cta-glow-hover);
		color: var(--glass-cta-text);
	}
}

/*
 * .liquid-glass-btn-lime — CTA alternativo de alto contraste (ej. WhatsApp),
 * separado del CTA ámbar principal. Usa el verde OFICIAL de la marca
 * WhatsApp (#25D366), no un lima genérico: así es reconocible al instante
 * como "esto abre WhatsApp" sin sumar un color fuera de la paleta de DiiPhone.
 */
.liquid-glass-btn-lime {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--glass-pill-radius);
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: #25D366;
	box-shadow: 0 0 24px rgba(37, 211, 102, 0.4);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.liquid-glass-btn-lime:hover {
		transform: translateY(-2px);
		box-shadow: 0 0 32px rgba(37, 211, 102, 0.5);
		color: #fff;
	}
}

.liquid-glass-card-tinted {
	position: relative;
	overflow: hidden;
	background: var(--glass-tint-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
	/* Texto oscuro explícito (hereda a todo el contenido: cita, nombre, etc.)
	   para que se lea bien sobre el tinte claro — ej. tarjetas de testimonio
	   (foto/avatar + cita + nombre). */
	color: #1e293b;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.liquid-glass-card-tinted {
		background: linear-gradient(135deg, var(--glass-tint-blue), var(--glass-tint-amber));
		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
		backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	}
}

/*
 * 2d. Encabezado con acento en degradado — OPT-IN, no automático.
 * Uso: agregar ".liquid-glass-heading-accent" en Elementor → widget de
 * encabezado → pestaña Avanzado → Clases CSS, ÚNICAMENTE en encabezados
 * que estén sobre fondo blanco/claro. NO usar sobre fondos oscuros o fotos
 * con overlay: el color de respaldo (#004d93) se fundiría con esos fondos.
 * (Antes esto se aplicaba automáticamente a todos los encabezados de varias
 * páginas vía CSS global; eso rompía encabezados diseñados en blanco sobre
 * fondo oscuro y se corrigió — ver DESIGN_SYSTEM.md / historial del proyecto.)
 */
.liquid-glass-heading-accent {
	background: var(--glass-accent-gradient-vivid);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #004d93; /* fallback si el navegador no soporta background-clip:text */
}

@supports not (background-clip: text) {
	.liquid-glass-heading-accent {
		-webkit-text-fill-color: unset;
		color: #004d93;
	}
}

/*
 * 2e. Insignia circular numerada para pasos/procesos (ej. "01", "02"...).
 * Anillo en degradado azul de marca alrededor de un círculo blanco con el
 * número. Uso: <div class="liquid-glass-step-badge">01</div>
 */
.liquid-glass-step-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	color: var(--brand-blue-deep, #004d93);
	font-weight: 700;
	font-size: 1.1rem;
}

.liquid-glass-step-badge::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	padding: 3px;
	background: var(--glass-accent-gradient);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/*
 * 2f. Fondo decorativo de "blobs" de vidrio desenfocados, para secciones
 * hero o de "servicios". Requiere que el contenedor donde se use tenga
 * "position: relative; overflow: hidden;" para que los blobs no se salgan
 * de la sección. Uso: agregar ".liquid-glass-blob-bg" a la sección/columna
 * en Elementor (Avanzado → Clases CSS); el contenido normal de la sección
 * queda encima (z-index de los blobs es -1).
 *
 * Colores: se usan los tonos REALES de marca (azul + ámbar), no los
 * azul/púrpura de la referencia de agencia que compartiste — esos no son
 * parte de la paleta oficial de DiiPhone. Avísame si preferías esos tonos
 * específicos para este efecto puntual y los cambio.
 */
.liquid-glass-blob-bg {
	position: relative;
	overflow: hidden;
	/*
	 * Imagen de fondo opcional: si la página tiene Imagen destacada
	 * asignada, la plantilla PHP fija "--dp-hero-image" inline en esta
	 * misma sección (ver template-home.php / template-servicio-tecnico.php).
	 * Si no hay imagen, "none" en la 2da capa deja solo el velo blanco (casi
	 * invisible sobre el fondo claro de siempre). Se usan DOS capas de
	 * "background" (no pseudo-elementos) porque ::before/::after ya están
	 * ocupados por los dos blobs decorativos de abajo.
	 */
	background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), var(--dp-hero-image, none);
	background-size: cover, cover;
	background-position: center, center;
}

.liquid-glass-blob-bg::before,
.liquid-glass-blob-bg::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	pointer-events: none;
}

.liquid-glass-blob-bg::before {
	width: 380px;
	height: 380px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle at 35% 35%, var(--brand-blue-light, #5271ff), var(--brand-blue-deep, #004d93) 65%, transparent 75%);
}

.liquid-glass-blob-bg::after {
	width: 320px;
	height: 320px;
	bottom: -100px;
	right: -60px;
	background: radial-gradient(circle at 60% 60%, var(--brand-amber, #ffb923), transparent 75%);
}

@media (prefers-reduced-motion: reduce), (max-width: 544px) {
	.liquid-glass-blob-bg::before,
	.liquid-glass-blob-bg::after {
		filter: blur(40px);
		opacity: 0.35;
	}
}

/*
 * 3. Fallback explícito para navegadores SIN backdrop-filter.
 * (Redundante con el bloque base de arriba, pero se deja explícito
 * para que quede claro que es intencional y no un olvido.)
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.liquid-glass {
		background: var(--glass-bg-fallback);
	}
}

/*
 * 4a. Rendimiento: reducir el blur progresivamente en pantallas más chicas
 * (menos densidad de píxeles/GPU disponible en tablets y, sobre todo, en
 * móviles de gama baja).
 */
@media (max-width: 976px) {
	:root {
		--glass-blur: 14px;
	}
}

@media (max-width: 544px) {
	:root {
		--glass-blur: 8px;
	}
}

/*
 * 4b. Accesibilidad: respetar prefers-reduced-transparency cuando el
 * navegador lo soporte (soporte aún limitado, pero se declara igual).
 */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass-bg: var(--glass-bg-fallback);
		--glass-blur: 0px;
		--glass-glow: none;
		--glass-cta-glow: none;
		--glass-cta-glow-hover: none;
	}

	.liquid-glass,
	.liquid-glass-card-tinted {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--glass-bg-fallback);
	}
}