/**
 * BERSSAC — Señalización Minera y Vial en Perú
 * Hoja de estilos principal para el Widget de Elementor.
 *
 * Arquitectura: BEM con scope estricto en .berssac-senalizacion (y .berssac-landing para compatibilidad).
 * Cumplimiento: CSS 100% puro para interacción visual (:hover, :focus-visible, :active).
 * Cero dependencias de JavaScript para estilos, cero librerías externas de animación.
 *
 * @package BerssacElementor
 * @version 1.1.0
 */

/* ==========================================================================
   01. VARIABLES & CASCADA SISTÉMICA (Elementor Override -> Tema Bersoft -> Fallback)
   ========================================================================== */
.berssac-senalizacion,
.berssac-landing {
	/* Colores de Marca y Superficies */
	--berssac-primary: var(--berssac-override-primary, var(--bersoft-color-primary, #0c2340));
	--berssac-secondary: var(--berssac-override-secondary, var(--bersoft-color-secondary, #1e3a8a));
	--berssac-accent: var(--berssac-override-accent, var(--bersoft-color-accent, #f59e0b));
	--berssac-dark: var(--berssac-override-dark, var(--bersoft-color-dark, #0b1523));
	--berssac-light: var(--berssac-override-light, var(--bersoft-color-light, #f8fafc));
	--berssac-surface: var(--berssac-override-surface, var(--bersoft-color-surface, #ffffff));
	--berssac-surface-card: var(--berssac-override-surface-card, var(--bersoft-color-card, #ffffff));
	--berssac-text: var(--berssac-override-text, var(--bersoft-color-text, #1e293b));
	--berssac-text-light: var(--berssac-override-text-light, var(--bersoft-color-text-light, #64748b));
	--berssac-border: var(--berssac-override-border, var(--bersoft-color-border, #e2e8f0));

	/* Radios y Transiciones Físicas */
	--berssac-radius-sm: 4px;
	--berssac-radius-md: 8px;
	--berssac-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

	/* Tipografías: Tema Bersoft -> Sistema Nativo */
	--berssac-font-primary: var(--berssac-override-font-primary, var(--bersoft-font-primary, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
	--berssac-font-secondary: var(--berssac-override-font-secondary, var(--bersoft-font-secondary, var(--berssac-font-primary)));

	font-family: var(--berssac-font-primary);
	color: var(--berssac-text);
	background-color: var(--berssac-surface);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.berssac-senalizacion *,
.berssac-senalizacion *::before,
.berssac-senalizacion *::after,
.berssac-landing *,
.berssac-landing *::before,
.berssac-landing *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   02. ESTRUCTURA BASE, CONTENEDORES Y TIPOGRAFÍA
   ========================================================================== */
.berssac-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.berssac-hero .berssac-container {
	max-width: 1320px;
}

.berssac-container--full {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.berssac-container--boxed {
	max-width: 1080px;
}

.berssac-section {
	padding: 80px 0;
	position: relative;
	border-bottom: 1px solid var(--berssac-border);
}

.berssac-bg--alt {
	background-color: var(--berssac-light);
}

.berssac-bg--dark {
	background-color: var(--berssac-dark);
	color: #ffffff;
}

/* Encabezados y Eyebrows */
.berssac-section__header {
	margin-bottom: 48px;
}

.berssac-align--center {
	text-align: center;
}

.berssac-align--left {
	text-align: left;
}

.berssac-eyebrow {
	display: inline-block;
	font-family: var(--berssac-font-primary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--berssac-secondary);
	background: rgba(12, 35, 64, 0.06);
	border: 1px solid rgba(12, 35, 64, 0.12);
	padding: 4px 10px;
	border-radius: var(--berssac-radius-sm);
	margin-bottom: 14px;
}

.berssac-bg--dark .berssac-eyebrow {
	color: var(--berssac-accent);
	background: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.25);
}

.berssac-section__title {
	font-family: var(--berssac-font-secondary);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.22;
	color: var(--berssac-primary);
}

.berssac-bg--dark .berssac-section__title {
	color: #ffffff;
}

.berssac-section__subtitle {
	font-size: 1.0625rem;
	color: var(--berssac-text-light);
	margin-top: 14px;
	max-width: 720px;
}

.berssac-align--center .berssac-section__subtitle {
	margin-left: auto;
	margin-right: auto;
}

.berssac-bg--dark .berssac-section__subtitle {
	color: #94a3b8;
}

/* ==========================================================================
   03. BOTONES (100% CSS PURO, SIN JAVASCRIPT, SIN GLOW GENÉRICO)
   ========================================================================== */
.berssac-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--berssac-font-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 13px 26px;
	border-radius: var(--berssac-radius-sm);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--berssac-transition),
				color var(--berssac-transition),
				border-color var(--berssac-transition),
				transform var(--berssac-transition),
				box-shadow var(--berssac-transition);
}

.berssac-btn--primary {
	background-color: var(--berssac-primary);
	color: #ffffff;
}

.berssac-btn--accent {
	background-color: var(--berssac-accent);
	color: #091322;
	font-weight: 700;
}

.berssac-btn--primary:hover {
	background-color: var(--berssac-secondary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(12, 35, 64, 0.2);
}

.berssac-btn--accent:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.berssac-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.berssac-btn:focus-visible {
	outline: 2px solid var(--berssac-accent);
	outline-offset: 2px;
}

/* Badges Técnicos */
.berssac-badge--tech {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--berssac-font-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--berssac-primary);
	background: #edf2f7;
	border: 1px solid #cbd5e1;
	padding: 2px 7px;
	border-radius: var(--berssac-radius-sm);
	margin-bottom: 8px;
	text-transform: uppercase;
}

/* ==========================================================================
   04. MARCOS DE IMAGEN (ANTI-CLS, DIMENSIONES RESERVADAS)
   ========================================================================== */
.berssac-img-frame {
	width: 100%;
	border-radius: var(--berssac-radius-sm);
	overflow: hidden;
	background: #f8fafc;
	position: relative;
	border: 1px solid var(--berssac-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.berssac-img-frame--contain img {
	object-fit: contain;
	padding: 14px;
	background-color: #ffffff;
}

.berssac-img-frame--16-9 { aspect-ratio: 16 / 9; }
.berssac-img-frame--4-3 { aspect-ratio: 4 / 3; }
.berssac-img-frame--hero { aspect-ratio: 16 / 10; }

.berssac-img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #0f172a;
	color: #94a3b8;
	text-align: center;
	box-sizing: border-box;
}

.berssac-img-placeholder__badge {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--berssac-accent);
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.3);
	padding: 3px 8px;
	border-radius: var(--berssac-radius-sm);
	margin-bottom: 6px;
}

.berssac-img-placeholder__spec {
	font-size: 0.8125rem;
	color: #cbd5e1;
}

/* ==========================================================================
   05. HERO INDUSTRIAL (AMPLIO, PROTAGONISMO VISUAL, 1 BOTÓN)
   ========================================================================== */
.berssac-hero {
	background-color: var(--berssac-dark);
	color: #ffffff;
	padding: 88px 0 96px;
	border-bottom: 3px solid var(--berssac-accent);
}

.berssac-hero__split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}

.berssac-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.berssac-hero__h1 {
	font-family: var(--berssac-font-secondary);
	font-size: 2.875rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #ffffff;
	margin-bottom: 18px;
}

.berssac-hero__h1 span {
	color: var(--berssac-accent);
}

.berssac-hero__lead {
	font-size: 1.1875rem;
	color: #cbd5e1;
	line-height: 1.6;
	margin-bottom: 32px;
	max-width: 580px;
}

.berssac-hero__actions {
	display: flex;
}

.berssac-hero__visual-card {
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
	box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   06. SECCIÓN 02: CAPACIDAD PROPIA (SPLIT EDITORIAL, CERO CARDS)
   ========================================================================== */
.berssac-capacidad-intro {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: center;
}

.berssac-capacidad-intro__specs {
	display: flex;
	flex-direction: column;
	border-top: 2px solid var(--berssac-primary);
}

.berssac-capacidad-intro__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--berssac-border);
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 20px;
	align-items: baseline;
}

.berssac-capacidad-intro__num {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--berssac-secondary);
	line-height: 1;
}

.berssac-capacidad-intro__heading {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--berssac-primary);
	margin-bottom: 4px;
}

.berssac-capacidad-intro__desc {
	font-size: 0.9375rem;
	color: var(--berssac-text-light);
	line-height: 1.5;
}

/* ==========================================================================
   07. SECCIÓN 03: CAPACIDADES DE TALLER (FOTO ANCLA + LISTA ESTRUCTURADA)
   ========================================================================== */
.berssac-taller-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}

.berssac-taller-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.berssac-taller-item {
	background: #ffffff;
	border-left: 3px solid var(--berssac-secondary);
	padding: 18px 24px;
	border-radius: 0 var(--berssac-radius-sm) var(--berssac-radius-sm) 0;
	border-top: 1px solid var(--berssac-border);
	border-right: 1px solid var(--berssac-border);
	border-bottom: 1px solid var(--berssac-border);
}

.berssac-taller-item__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--berssac-primary);
	margin-bottom: 4px;
}

.berssac-taller-item__desc {
	font-size: 0.9375rem;
	color: var(--berssac-text-light);
	line-height: 1.5;
}

/* ==========================================================================
   08. SECCIÓN 04: PROCESO DE FABRICACIÓN (PIPELINE HORIZONTAL CONTINUO)
   ========================================================================== */
.berssac-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
	margin-top: 40px;
}

.berssac-timeline::before {
	content: '';
	position: absolute;
	top: 24px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--berssac-border);
	z-index: 0;
}

.berssac-timeline__step {
	position: relative;
	z-index: 1;
	padding-top: 12px;
}

.berssac-timeline__node {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid var(--berssac-primary);
	color: var(--berssac-primary);
	font-size: 0.875rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	box-shadow: 0 0 0 4px #ffffff;
}

.berssac-timeline__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--berssac-primary);
	margin-bottom: 6px;
}

.berssac-timeline__desc {
	font-size: 0.875rem;
	color: var(--berssac-text-light);
	line-height: 1.5;
}

/* ==========================================================================
   09. SECCIÓN 05: TECNOLOGÍA (EDITORIAL: 1 PRINCIPAL + 3 SECUNDARIOS)
   ========================================================================== */
.berssac-tech-layout {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 32px;
	align-items: stretch;
}

.berssac-tech-main {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.berssac-tech-main__body {
	padding: 28px;
	flex-grow: 1;
}

.berssac-tech-sub {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.berssac-tech-sub__item {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	padding: 16px;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	align-items: center;
}

/* ==========================================================================
   10. SECCIÓN 06: CATÁLOGO REGLAMENTARIO (FOTO REAL + ÍNDICE TÉCNICO)
   ========================================================================== */
.berssac-catalog-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
}

.berssac-catalog-index {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.berssac-catalog-item {
	padding: 16px;
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-sm);
	border-top: 3px solid var(--berssac-secondary);
}

.berssac-catalog-item__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--berssac-primary);
	margin-bottom: 4px;
}

.berssac-catalog-item__desc {
	font-size: 0.8125rem;
	color: var(--berssac-text-light);
	line-height: 1.45;
}

/* ==========================================================================
   11. SECCIONES 07 Y 08: SECTORES MINERÍA Y VIAL (ALTERNANCIA EDITORIAL)
   ========================================================================== */
.berssac-sector-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.berssac-sector-split--reverse {
	direction: rtl;
}

.berssac-sector-split--reverse > * {
	direction: ltr;
}

.berssac-sector-specs {
	list-style: none;
	margin-top: 20px;
}

.berssac-sector-specs li {
	position: relative;
	padding-left: 20px;
	font-size: 0.9375rem;
	color: var(--berssac-text);
	margin-bottom: 10px;
}

.berssac-sector-specs li::before {
	content: '▪';
	position: absolute;
	left: 0;
	color: var(--berssac-accent);
	font-size: 1.1rem;
	line-height: 1;
}

/* ==========================================================================
   12. SECCIÓN 09: SEGURIDAD INDUSTRIAL (PANEL INTEGRADO, CERO CARDS)
   ========================================================================== */
.berssac-industrial-panel {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
}

.berssac-industrial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.berssac-industrial-cell {
	padding: 32px;
	border-bottom: 1px solid var(--berssac-border);
	border-right: 1px solid var(--berssac-border);
}

.berssac-industrial-cell:nth-child(2n) {
	border-right: none;
}

.berssac-industrial-cell:nth-last-child(-n+2) {
	border-bottom: none;
}

/* ==========================================================================
   13. SECCIÓN 10: GUARDAVÍAS (JERARQUÍA: 1 DOMINANTE + 2 SUBORDINADOS)
   ========================================================================== */
.berssac-guardavias-layout {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 32px;
	align-items: stretch;
}

.berssac-guardavia-hero-card {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-top: 3px solid var(--berssac-primary);
}

.berssac-guardavia-sub-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.berssac-guardavia-sub-card {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	padding: 20px;
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 20px;
	align-items: center;
}

/* ==========================================================================
   14. SECCIÓN 11: NORMATIVAS (MÓDULOS COMPACTOS SOBRIOS)
   ========================================================================== */
.berssac-normativas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.berssac-norm-card {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	padding: 24px;
}

.berssac-notice-box {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--berssac-radius-sm);
	padding: 12px 18px;
	margin-top: 28px;
	font-size: 0.875rem;
	color: #92400e;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   15. SECCIÓN 12: EXPERIENCIA (ÍNDICE TÉCNICO DE SECTORES)
   ========================================================================== */
.berssac-exp-table {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
}

.berssac-exp-row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	padding: 24px 32px;
	border-bottom: 1px solid var(--berssac-border);
	align-items: baseline;
}

.berssac-exp-row:last-child {
	border-bottom: none;
}

/* ==========================================================================
   16. SECCIÓN 13: METODOLOGÍA (TIMELINE DE 5 PASOS CONECTADO)
   ========================================================================== */
.berssac-workflow-flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	position: relative;
	margin-top: 40px;
}

.berssac-workflow-flow::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--berssac-border);
	z-index: 0;
}

.berssac-workflow-step {
	position: relative;
	z-index: 1;
}

.berssac-workflow-node {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--berssac-primary);
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	box-shadow: 0 0 0 4px #ffffff;
}

/* ==========================================================================
   17. SECCIÓN 14: FAQ (BOTONES ARIA ACCESIBLES, CERO H3)
   ========================================================================== */
.berssac-faq-list {
	max-width: 860px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.berssac-faq-item {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	overflow: hidden;
}

.berssac-faq-trigger {
	width: 100%;
	text-align: left;
	padding: 20px 24px;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--berssac-font-primary);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--berssac-primary);
	cursor: pointer;
	transition: background-color var(--berssac-transition);
}

.berssac-faq-trigger:hover {
	background-color: var(--berssac-light);
}

.berssac-faq-trigger:focus-visible {
	outline: 2px solid var(--berssac-accent);
	outline-offset: -2px;
}

.berssac-faq-icon {
	font-size: 1.25rem;
	color: var(--berssac-secondary);
	transition: transform var(--berssac-transition);
}

.berssac-faq-trigger[aria-expanded="true"] .berssac-faq-icon {
	transform: rotate(45deg);
}

.berssac-faq-answer {
	padding: 0 24px 20px;
	font-size: 0.9375rem;
	color: var(--berssac-text-light);
	line-height: 1.55;
}

.berssac-faq-answer[hidden] {
	display: none;
}

/* ==========================================================================
   18. SECCIÓN 15: CIERRE DIRECTO SOBRIO
   ========================================================================== */
.berssac-cta-final {
	background-color: var(--berssac-dark);
	color: #ffffff;
	padding: 80px 0;
	text-align: center;
	border-top: 3px solid var(--berssac-accent);
}

.berssac-cta-final__box {
	max-width: 760px;
	margin: 0 auto;
}

.berssac-cta-final__channels {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.9375rem;
	color: #94a3b8;
}

.berssac-cta-final__channels strong {
	color: #ffffff;
}

/* Tarjetas y textos genéricos para compatibilidad */
.berssac-card__title {
	font-family: var(--berssac-font-secondary);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--berssac-primary);
	margin-bottom: 6px;
	line-height: 1.35;
}

.berssac-card__desc {
	font-size: 0.875rem;
	color: var(--berssac-text-light);
	line-height: 1.5;
}

/* Contenedores Personalizados */
.berssac-custom-container {
	padding: 60px 0;
}

.berssac-custom-container__content {
	background: #ffffff;
	border: 1px solid var(--berssac-border);
	border-radius: var(--berssac-radius-md);
	padding: 32px;
}

/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS (TABLET 768PX & MOBILE 390PX)
   Mobile no es Desktop apilado: padding vertical reducido, timeline vertical
   ========================================================================== */
@media (max-width: 1024px) {
	.berssac-capacidad-intro { grid-template-columns: 1fr; gap: 40px; }
	.berssac-taller-layout { grid-template-columns: 1fr; gap: 40px; }
	.berssac-tech-layout { grid-template-columns: 1fr; }
	.berssac-catalog-layout { grid-template-columns: 1fr; }
	.berssac-guardavias-layout { grid-template-columns: 1fr; }
	.berssac-timeline { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.berssac-timeline::before { display: none; }
	.berssac-workflow-flow { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.berssac-workflow-flow::before { display: none; }
}

@media (max-width: 768px) {
	.berssac-section { padding: 60px 0; }
	.berssac-hero { padding: 60px 0 68px; }
	.berssac-hero__split { grid-template-columns: 1fr; gap: 36px; }
	.berssac-hero__h1 { font-size: 2.25rem; }
	.berssac-sector-split { grid-template-columns: 1fr; gap: 32px; }
	.berssac-sector-split--reverse { direction: ltr; }
	.berssac-industrial-grid { grid-template-columns: 1fr; }
	.berssac-industrial-cell { border-right: none; padding: 24px; }
	.berssac-normativas-grid { grid-template-columns: 1fr; }
	.berssac-exp-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
	.berssac-workflow-flow { grid-template-columns: 1fr; }
	.berssac-cta-final__channels { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
	.berssac-container { padding: 0 20px; }
	.berssac-section { padding: 44px 0; }
	.berssac-section__header { margin-bottom: 28px; }
	.berssac-section__title { font-size: 1.625rem; }
	.berssac-hero__h1 { font-size: 1.8125rem; }
	.berssac-hero__lead { font-size: 1rem; margin-bottom: 24px; }
	.berssac-btn { width: 100%; }
	.berssac-hero__actions { width: 100%; }

	/* Timeline vertical compacta para mobile */
	.berssac-timeline {
		grid-template-columns: 1fr;
		gap: 20px;
		border-left: 2px solid var(--berssac-primary);
		padding-left: 20px;
		margin-left: 8px;
	}
	.berssac-timeline__node {
		margin-left: -31px;
		width: 24px;
		height: 24px;
		font-size: 0.75rem;
		margin-bottom: 6px;
	}

	.berssac-workflow-flow {
		border-left: 2px solid var(--berssac-primary);
		padding-left: 20px;
		margin-left: 8px;
		gap: 20px;
	}
	.berssac-workflow-node {
		margin-left: -31px;
		width: 24px;
		height: 24px;
		font-size: 0.75rem;
		margin-bottom: 6px;
	}

	.berssac-tech-sub__item { grid-template-columns: 1fr; }
	.berssac-guardavia-sub-card { grid-template-columns: 1fr; }
	.berssac-catalog-index { grid-template-columns: 1fr; }
}