/**
 * PERWTEL Design System
 *
 * Orden de trabajo del proyecto:
 *  1. Módulos y opciones nativas de Divi 5 (diseño, presets, colores globales, Grid/Flex).
 *  2. CSS nativo de Divi: Free-Form CSS del módulo o CSS personalizado de Opciones del tema.
 *  3. Este archivo, solo para lo que no se pueda resolver con lo anterior.
 * WBS Dominios
 * https://www.wbsdominios.com/
 */

:root {
	/* Colores oficiales (16/10/2026). En Divi se usan los Colores globales equivalentes. */
	--pwt-blue: #305CDE;
	--pwt-blue-dark: #274AB3;     /* Azul oscuro auxiliar: solo hover */
	--pwt-black: #0F0F0F;
	--pwt-white: #FFFFFF;
	--pwt-bg-soft: #F0F0F0;
	--pwt-line: #E3E5EA;
	--pwt-text-secondary: #5B6472;
	--pwt-text-tertiary: #8A93A1;

	--pwt-radius-sm: 4px;
	--pwt-radius-md: 10px;

	--pwt-container: 1280px;
	--pwt-gutter-desktop: 40px;
	--pwt-gutter-tablet: 28px;
	--pwt-gutter-mobile: 20px;

	--pwt-space-1: 8px;
	--pwt-space-2: 12px;
	--pwt-space-3: 16px;
	--pwt-space-4: 24px;
	--pwt-space-5: 32px;
	--pwt-space-6: 48px;
	--pwt-space-7: 64px;
	--pwt-space-8: 80px;
	--pwt-space-9: 96px;
	--pwt-space-10: 112px;
}

/* Contenedor reutilizable */
.pwt-container {
	width: min(calc(100% - (var(--pwt-gutter-desktop) * 2)), var(--pwt-container));
	margin-inline: auto;
}

/* Header */
.pwt-header {
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--pwt-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Botones */
.pwt-btn-primary,
.pwt-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: var(--pwt-radius-sm);
	text-decoration: none;
	transition: all .18s ease;
}

.pwt-btn-primary {
	background: var(--pwt-black);
	color: var(--pwt-white);
}

.pwt-btn-primary:hover {
	background: var(--pwt-blue);
	color: var(--pwt-white);
}

.pwt-btn-secondary {
	background: transparent;
	border: 1px solid var(--pwt-line);
	color: var(--pwt-black);
}

.pwt-btn-secondary:hover {
	border-color: var(--pwt-blue);
	color: var(--pwt-blue);
}

/* Títulos editoriales */
.pwt-eyebrow {
	color: var(--pwt-blue);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Superficies */
.pwt-soft-section {
	background: var(--pwt-bg-soft);
}

.pwt-dark-section {
	background: var(--pwt-black);
	color: var(--pwt-white);
}

/* Tarjetas */
.pwt-card {
	background: var(--pwt-white);
	border: 1px solid var(--pwt-line);
	border-radius: var(--pwt-radius-md);
	transition: border-color .18s ease, transform .18s ease;
}

.pwt-card:hover {
	border-color: var(--pwt-blue);
	transform: translateY(-2px);
}

/* Crédito WBS */
.wbs-credit {
	font-size: 12.5px;
	color: rgba(255,255,255,.48);
}

.wbs-credit a {
	color: rgba(255,255,255,.72);
	text-decoration: none;
	transition: color .18s ease;
}

.wbs-credit a:hover {
	color: var(--pwt-white);
}

/* Accesibilidad */
:focus-visible {
	outline: 2px solid var(--pwt-blue);
	outline-offset: 3px;
}

@media (max-width: 1024px) {
	.pwt-container {
		width: min(calc(100% - (var(--pwt-gutter-tablet) * 2)), var(--pwt-container));
	}
}

@media (max-width: 480px) {
	.pwt-container {
		width: min(calc(100% - (var(--pwt-gutter-mobile) * 2)), var(--pwt-container));
	}
}

/* Libro de Reclamaciones: aviso identificable en el footer (07/11/2026).
   Icono: assets/pwt-icono-libro.svg (mismo sistema que los pwt-icono). */
.et-l--footer a[href*="libro-de-reclamaciones"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 6px 4px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #ffffff !important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  vertical-align: middle;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.et-l--footer a[href*="libro-de-reclamaciones"]::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: #305CDE;
  -webkit-mask: url("../pwt-icono-libro.svg") no-repeat center / contain;
  mask: url("../pwt-icono-libro.svg") no-repeat center / contain;
}
.et-l--footer a[href*="libro-de-reclamaciones"]:hover,
.et-l--footer a[href*="libro-de-reclamaciones"]:focus-visible {
  border-color: #305CDE;
  background-color: rgba(48, 92, 222, 0.12);
}