/*
 * Liquid Glass — Base compartida de las plantillas de página completas
 * (astra-child/page-templates/*.php: Home, Clientes, Nosotros, Redes
 * Sociales, Cuidado).
 *
 * Qué define: scaffolding de layout reutilizable entre las 5 plantillas
 * (contenedor, secciones, grillas, scroll-reveal). Los colores/vidrio siguen
 * viniendo de liquid-glass.css — este archivo NO redefine tokens de color.
 *
 * Depende de assets/js/page-templates.js para el comportamiento de
 * ".dp-reveal" y ".dp-counter" (ese JS agrega/quita clases; este CSS define
 * cómo se ven los estados).
 *
 * Breakpoints: iguales al resto del sistema — móvil ≤544px, tablet ≤976px
 * (ver assets/css/liquid-glass.css).
 */

/*
 * BUG corregido ("las páginas no están centradas"): nuestras plantillas
 * llaman a get_header()/get_footer() directamente, sin los divs contenedores
 * propios de Astra (#primary, .ast-container, etc.) — eso está bien, pero
 * significa que ".dp-page" queda como hijo directo de la zona de contenido
 * de Astra, que a veces trae su propio ancho/padding pensado para SU
 * estructura normal (con sidebar, columnas, etc.). Forzamos que nuestra
 * plantilla ocupe el 100% disponible y sea la ÚNICA fuente de verdad del
 * ancho/centrado — así ".dp-container" centra de forma predecible sin
 * pelear con el contenedor heredado de Astra.
 */
.dp-page {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}

/*
 * Imagen de fondo de TODA la página (opcional, campo "bg_fullpage_desktop"
 * del meta box de imágenes — ver diiphone_page_bg_style_attr() en
 * functions.php). Un velo blanco translúcido va SIEMPRE encima (así el
 * texto normal sigue siendo legible), y detrás la foto — así las tarjetas
 * ".liquid-glass" / ".liquid-glass-card-tinted" que están sobre este fondo
 * muestran de verdad el desenfoque de vidrio (blur) contra algo con
 * color/textura, en vez de blur sobre blanco liso, que no se aprecia.
 *
 * SOLO DESKTOP a propósito (2026-07): la foto de fondo de página en móvil se
 * veía recortada/distorsionada en pantallas angostas — el cliente pidió
 * quitarla del todo ahí. En móvil el único recurso decorativo de fondo son
 * los patrones de sección (".dp-pattern-1/2/3" — CSS puro, no tienen ese
 * problema porque no son una foto que recortar).
 */
.dp-page {
	background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), var(--dp-page-bg-desktop, none);
	background-size: cover, cover;
	background-position: center top, center top;
	background-repeat: no-repeat, no-repeat;
	background-attachment: fixed, fixed;
}

@media (max-width: 544px) {
	.dp-page {
		background-image: none;
		background-attachment: scroll;
	}
}

.dp-container {
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
}

.dp-section {
	padding: 72px 0;
}

.dp-section--tight {
	padding: 48px 0;
}

.dp-heading {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 16px;
	line-height: 1.2;
}

.dp-note {
	font-size: 0.8rem;
	color: rgba(30, 41, 59, 0.55);
	font-style: italic;
	margin-top: 12px;
}

/* --- Intro corta debajo de un h2 (ej. "Clientes reales", "Equipo y tienda") --- */
.dp-section-intro {
	max-width: 60ch;
	color: rgba(30, 41, 59, 0.72);
	line-height: 1.6;
	margin: -8px 0 24px;
}

.dp-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-blue-deep, #004d93);
	margin-bottom: 10px;
}

/* --- Grillas responsivas reutilizables --- */
.dp-grid {
	display: grid;
	gap: 20px;
}

.dp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dp-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* --- Scroll reveal (requiere assets/js/page-templates.js) --- */
.dp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.dp-reveal--visible {
	opacity: 1;
	transform: translateY(0);
}

/* Reveals escalonados dentro de una grilla: cada hijo se retrasa un poco */
.dp-grid > .dp-reveal:nth-child(1) { transition-delay: 0s; }
.dp-grid > .dp-reveal:nth-child(2) { transition-delay: 0.08s; }
.dp-grid > .dp-reveal:nth-child(3) { transition-delay: 0.16s; }
.dp-grid > .dp-reveal:nth-child(4) { transition-delay: 0.24s; }
.dp-grid > .dp-reveal:nth-child(5) { transition-delay: 0.32s; }
.dp-grid > .dp-reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.dp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Placeholder de foto/imagen pendiente (galerías sin foto real aún) --- */
.dp-photo-pending {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	background: rgba(0, 77, 147, 0.06);
	border: 1px dashed var(--glass-border);
	border-radius: calc(var(--glass-radius) - 8px);
	color: rgba(30, 41, 59, 0.55);
	font-size: 0.7rem;
	text-align: center;
	padding: 8px;
}

.dp-photo-pending svg {
	width: 28px;
	height: 28px;
	opacity: 0.5;
}

/* --- Foto real de galería (una vez elegida en el meta box "Galería de imágenes") --- */
.dp-gallery-photo {
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--glass-radius) - 8px);
	overflow: hidden;
	box-shadow: var(--glass-shadow);
}

.dp-gallery-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.dp-gallery-photo:hover img {
		transform: scale(1.05);
	}
}

/*
 * --- Carrusel horizontal para fotos VERTICALES 9:16 (diiphone_render_carousel()
 * en functions.php — usado en "Envíos a Provincia" de Home). Scroll-snap
 * CSS puro, sin librerías JS (mismo criterio que el resto del sitio: evitar
 * dependencias externas que puedan fallar en silencio).
 */
.dp-carousel {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 8px 4px 16px;
	-webkit-overflow-scrolling: touch;
}

.dp-carousel::-webkit-scrollbar {
	height: 8px;
}

.dp-carousel::-webkit-scrollbar-thumb {
	background: var(--glass-border);
	border-radius: 999px;
}

.dp-carousel-photo {
	flex: 0 0 auto;
	width: clamp(150px, 32vw, 220px);
	aspect-ratio: 9 / 16;
	scroll-snap-align: start;
	border-radius: calc(var(--glass-radius) - 8px);
	overflow: hidden;
	box-shadow: var(--glass-shadow);
}

.dp-carousel-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder "foto pendiente" dentro del carrusel: mismo estilo, pero respeta el 9:16 */
.dp-photo-pending--carousel {
	flex: 0 0 auto;
	width: clamp(150px, 32vw, 220px);
	aspect-ratio: 9 / 16;
	scroll-snap-align: start;
}

/*
 * --- Íconos propios (assets: diiphone_icon() en functions.php) ---
 * SVG inline, sin dependencia de librerías externas (BUG corregido: antes
 * usaban clases de Font Awesome que no siempre estaba cargado). Heredan
 * "currentColor", así que el color se controla con la propiedad "color"
 * del elemento padre o del propio ".dp-icon".
 */
.dp-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	flex: none;
}

/*
 * --- Bloque "ícono + texto + botón" (usado en Home y Servicio Técnico) ---
 * Combinar con ".liquid-glass" o ".liquid-glass-card-tinted" para el fondo.
 */
.dp-feature {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 32px;
}

.dp-feature__icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	color: var(--brand-blue-deep, #004d93);
}

.dp-feature__icon .dp-icon {
	width: 1.6rem;
	height: 1.6rem;
}

.dp-feature__body h2 {
	margin-bottom: 10px;
}

.dp-feature__body p {
	margin: 0 0 18px;
	color: rgba(30, 41, 59, 0.75);
	line-height: 1.6;
	max-width: 60ch;
}

/*
 * --- Imagen opcional a la derecha de la tarjeta (2026-07) ---
 * BUG corregido ("hueco vacío a la derecha de la tarjeta"): ".dp-feature__body"
 * no tiene "flex-grow", así que en pantallas anchas dejaba un espacio en
 * blanco después del texto en vez de estirarse. En vez de forzar que el
 * texto ocupe todo el ancho (se vería raro con líneas kilométricas), se
 * agrega esta imagen OPCIONAL como último elemento del flex con
 * "margin-left:auto" — así ella sola ocupa justo el espacio sobrante,
 * pegada al borde derecho. Si no hay imagen (diiphone_feature_image_url()
 * devuelve vacío), el markup ni siquiera incluye este div, así que la
 * tarjeta se ve EXACTAMENTE igual que antes.
 */
.dp-feature__image {
	flex: none;
	width: 220px;
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--glass-radius) - 8px);
	overflow: hidden;
	margin-left: auto;
	box-shadow: var(--glass-shadow);
}

.dp-feature__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * --- Panel de vidrio que enmarca una grilla de fotos (galerías pendientes
 * de foto real: Home, Cuidado, Nosotros, Servicio Técnico) ---
 */
.dp-gallery-frame {
	padding: 20px;
}

.dp-gallery-frame .dp-photo-grid {
	margin: 0;
}

/*
 * --- Bloque de cierre/CTA con blob-bg (usado en Clientes y Servicio Técnico) ---
 * Combinar con ".liquid-glass-blob-bg" (liquid-glass.css).
 */
.dp-cta-banner {
	text-align: center;
	padding: 56px 32px;
	border-radius: var(--glass-radius);
}

.dp-cta-banner .dp-heading {
	max-width: 30ch;
	margin: 0 auto 20px;
}

.dp-cta-banner p {
	max-width: 50ch;
	margin: 0 auto 20px;
	color: rgba(30, 41, 59, 0.75);
}

@media (max-width: 544px) {
	.dp-cta-banner {
		padding: 36px 20px;
	}
}

/*
 * --- Lista de verificación (ítems con ícono de check) — usada en Garantía
 * ("Qué cubre tu garantía") y ¡Cuidado! ("Cómo comprar seguro"). El color
 * del ícono es el CTA ámbar por defecto; ¡Cuidado! lo sobreescribe a verde
 * con ".dp-checklist--cuidado" (ver cuidado.css) para no romper su regla de
 * "un solo acento rojo, todo lo demás en verde/neutro".
 */
.dp-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 68ch;
}

.dp-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	background: var(--glass-bg-fallback);
	border: 1px solid var(--glass-border);
	border-radius: calc(var(--glass-radius) - 8px);
	box-shadow: var(--glass-shadow);
	line-height: 1.5;
	color: #1e293b;
}

.dp-checklist__icon {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--glass-cta-gradient);
	color: var(--glass-cta-text);
	margin-top: 2px;
}

.dp-checklist__icon .dp-icon {
	width: 0.85rem;
	height: 0.85rem;
}

@media (max-width: 544px) {
	.dp-checklist li {
		padding: 14px 16px;
	}
}

/*
 * --- Fila de botones (hero, cierres CTA) — usada en Home, Servicio Técnico y
 * Garantía. Vivía duplicada solo en home.css; se mueve aquí porque varias
 * plantillas la usan.
 */
.dp-hero__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 28px;
}

@media (max-width: 544px) {
	.dp-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dp-hero__actions .liquid-glass-btn-pill,
	.dp-hero__actions .liquid-glass-btn-lime {
		width: 100%;
		text-align: center;
	}
}

/*
 * --- Tarjeta de estadística (usada en Home y Nosotros) ---
 * Combinar con ".liquid-glass-card-tinted" (liquid-glass.css) para el fondo.
 */
.dp-stat {
	padding: 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dp-stat__number {
	font-family: var(--font-mono, monospace);
	font-variant-numeric: tabular-nums;
	font-size: 2rem;
	font-weight: 700;
	color: var(--brand-blue-deep, #004d93);
}

.dp-stat__label {
	font-size: 0.85rem;
	color: rgba(30, 41, 59, 0.65);
}

/*
 * --- Bloque "texto + mapa" (usado en Home y Nosotros) ---
 */
.dp-visit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	align-items: center;
}

.dp-visit__text p {
	color: rgba(30, 41, 59, 0.7);
	margin: 0 0 20px;
}

.dp-visit__map {
	padding: 10px;
	overflow: hidden;
}

.dp-visit__map iframe {
	display: block;
	border-radius: calc(var(--glass-radius) - 8px);
}

/* --- Responsivo --- */
@media (max-width: 976px) {
	.dp-section { padding: 56px 0; }
	.dp-grid--3, .dp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.dp-grid--6 { grid-template-columns: repeat(3, 1fr); }
	.dp-visit { grid-template-columns: 1fr; }
}

@media (max-width: 544px) {
	.dp-section { padding: 40px 0; }
	.dp-container { padding: 0 18px; }
	.dp-grid--2, .dp-grid--3, .dp-grid--4 { grid-template-columns: 1fr 1fr; }
	.dp-grid--6 { grid-template-columns: repeat(3, 1fr); }

	.dp-feature {
		flex-direction: column;
		text-align: center;
		padding: 24px;
	}

	.dp-feature__image {
		width: 100%;
		aspect-ratio: 1 / 1;
		margin-left: 0;
		margin-top: 16px;
	}

	.dp-gallery-frame {
		padding: 12px;
	}
}