/* ===========================================
   D&M Corredores de Seguros — style.css
   Estructura: referencia HTML proporcionada
   =========================================== */

/* :root {
	--dym-font-display: 'Libre Baskerville', 'Lora', serif;
} */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--dym-font-body);
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface);
	background: var(--dym-bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

/* ===== MATERIAL SYMBOLS ===== */
.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	vertical-align: middle;
	line-height: 1;
}

/* ===== CONTENEDOR ===== */
.container {
	width: 100%;
	max-width: var(--dym-max-width);
	margin: 0 auto;
	padding: 0 var(--dym-margin-desk);
}

/* ===== NAV ===== */
.nav-glass {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	max-width: 1200px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 10px 10px 22px;
	font-family: var(--dym-font-display);

	/* Estado base: glass oscuro semi-opaco, SIEMPRE con suficiente
	   contraste para que el texto blanco se lea sobre cualquier imagen
	   de fondo del hero (clara u oscura). No depende de la imagen. */
	background: rgba(0, 27, 74, 0.42);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--dym-radius-pill);
	box-shadow: 0 6px 28px rgba(0, 20, 60, 0.25);
	transition:
		background var(--dym-dur-slow),
		box-shadow var(--dym-dur-slow),
		border-color var(--dym-dur-slow);
}

/* Estado scrolled: pill blanco opaco */
.nav-glass.scrolled {
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-color: rgba(0, 35, 98, 0.08);
	box-shadow: 0 6px 28px rgba(0, 35, 98, 0.14);
}

/* Links y logo: blancos en estado base (glass oscuro), azules al scrollear (fondo blanco) */
.nav-glass .logo-dm {
	color: var(--dym-blanco);
	transition: color var(--dym-dur-base);
}
.nav-glass .logo-sub {
	color: rgba(255, 255, 255, 0.75);
	transition: color var(--dym-dur-base);
}
.nav-glass .nav-links a {
	color: rgba(255, 255, 255, 0.92);
	transition: color var(--dym-dur-base);
}
.nav-glass .nav-links a:hover {
	color: var(--dym-blanco);
}

.nav-glass.scrolled .logo-dm {
	color: var(--dym-azul);
}
.nav-glass.scrolled .logo-sub {
	color: var(--dym-outline);
}
.nav-glass.scrolled .nav-links a {
	color: var(--dym-on-surface-var);
}
.nav-glass.scrolled .nav-links a:hover {
	color: var(--dym-azul);
}

/* Hamburger mobile */
.nav-hamburger {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	color: var(--dym-azul);
	transition: color var(--dym-dur-base);
}
.nav-hamburger span {
	font-size: 26px;
}

/* Menú mobile desplegable */
.nav-mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 35, 98, 0.97);
	z-index: 998;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s,
		visibility 0.25s;
}
.nav-mobile-menu.abierto {
	opacity: 1;
	visibility: visible;
}
.nav-mobile-menu ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 0 32px;
}
.nav-mobile-menu ul a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 22px;
	font-weight: 600;
	color: var(--dym-blanco);
	padding: 16px;
	border-radius: var(--dym-radius-md);
	transition: background var(--dym-dur-fast);
}
.nav-mobile-menu ul a:hover {
	background: rgba(255, 255, 255, 0.1);
}
.nav-mobile-cerrar {
	position: absolute;
	top: 24px;
	right: 24px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	font-size: 32px;
	line-height: 1;
}
.nav-mobile-cta {
	margin-top: 16px;
	background: var(--dym-verde);
	color: var(--dym-blanco);
	font-size: 18px;
	font-weight: 600;
	padding: 14px 48px;
	border-radius: var(--dym-radius-pill);
	border: none;
	cursor: pointer;
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.logo-mark {
	/* width: 34px; */
	height: 42px;
	object-fit: contain;
}

.logo-dm {
	font-family: var(--dym-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--dym-azul);
	letter-spacing: -0.3px;
}

.logo-sub {
	font-size: 9px;
	color: var(--dym-outline);
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.nav-links {
	display: flex;
	gap: 32px;
	list-style: none;
}

.nav-links a {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--dym-on-surface-var);
	transition: color var(--dym-dur-fast);
}

.nav-links a:hover,
.nav-links a.activo {
	color: var(--dym-azul);
}

.nav-cta {
	background: var(--dym-verde);
	color: var(--dym-blanco);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 10px 24px;
	border-radius: var(--dym-radius-pill);
	border: none;
	cursor: pointer;
	transition:
		filter var(--dym-dur-fast),
		transform var(--dym-dur-fast);
}

.nav-cta:hover {
	filter: brightness(1.1);
}
.nav-cta:active {
	transform: scale(0.97);
}

/* Declarar Siniestro: boton completo en desktop */
.nav-siniestro-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dym-rojo);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 8px 16px;
	border: 1.5px solid var(--dym-rojo);
	border-radius: var(--dym-radius-pill);
	transition:
		background var(--dym-dur-fast),
		color var(--dym-dur-fast);
}
.nav-siniestro-btn .material-symbols-outlined {
	font-size: 18px;
}
.nav-siniestro-btn:hover {
	background: var(--dym-rojo);
	color: var(--dym-blanco);
}

/* Declarar Siniestro: solo icono rojo en mobile, junto al hamburger */
.nav-siniestro-icon-mobile {
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--dym-rojo);
	text-decoration: none;
}
.nav-siniestro-icon-mobile .material-symbols-outlined {
	font-size: 25px;
}

/* ===== HERO / CARRUSEL ===== */
.hero-carrusel {
	padding-top: 0;
	/* padding-bottom: 72px; */
	background: var(--dym-bg);
	border-radius: 50px;
	padding: 45px 15px 0px;
}

.carrusel-wrap {
	max-width: 100%;
	margin: 0;
	padding: 0;
	border-radius: 50px;
}

.carrusel {
	position: relative;
	overflow: hidden;
	border-radius: 0;
	box-shadow: none;
	border-radius: 35px;
}

.carrusel-track {
	display: flex;
	transition: transform 0.5s var(--dym-ease);
}

.carrusel-slide {
	min-width: 100%;
	height: 600px;
	position: relative;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-color: var(--dym-azul);
}

/* Ken Burns en hover */
/* .carrusel-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-image: inherit;
	transition: transform var(--dym-dur-slow) var(--dym-ease);
}
.carrusel:hover .carrusel-slide::before {
	transform: scale(1.05);
} */

.carrusel-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgb(0 0 0 / 87%) 0%,
		rgb(0 0 0 / 47%) 45%,
		transparent 100%
	);
	z-index: 1;
}

.carrusel-contenido {
	position: relative;
	z-index: 2;
	padding: 100px 64px 64px; /* top extra para el nav flotante */
	max-width: 750px;
}

.carrusel-badge {
	display: inline-block;
	background: rgba(0, 225, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: var(--dym-azul);
	font-family: var(--dym-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 16px;
	border-radius: var(--dym-radius-pill);
	margin-bottom: 20px;
}

.carrusel-titulo {
	font-family: var(--dym-font-display);
	font-size: 48px;
	font-weight: 700;
	color: var(--dym-blanco);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
}

.carrusel-sub {
	font-size: var(--dym-text-body-lg);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
	margin-bottom: 32px;
	max-width: 480px;
}

.carrusel-acciones {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.carrusel-acciones > a,
.carrusel-acciones > button {
	font-size: 14px;
	padding: 10px 20px;
}

/* Botones del hero */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--dym-verde);
	color: var(--dym-blanco);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-title-lg);
	font-weight: 600;
	padding: 14px 32px;
	border-radius: var(--dym-radius-pill);
	border: none;
	cursor: pointer;
	transition:
		box-shadow var(--dym-dur-fast),
		filter var(--dym-dur-fast);
}
.btn-primary:hover {
	box-shadow: 0 4px 20px rgba(31, 127, 0, 0.3);
	filter: brightness(1.07);
}

.btn-secondary-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--dym-azul-cont);
	color: var(--dym-blanco);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-title-lg);
	font-weight: 600;
	padding: 14px 32px;
	border-radius: var(--dym-radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background var(--dym-dur-fast);
}
.btn-secondary-outline:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Flechas y dots del carrusel */
.carrusel-flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	/* backdrop-filter: blur(8px); */
	border: none;
	color: var(--dym-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--dym-dur-fast);
}
.carrusel-flecha:hover {
	background: rgba(255, 255, 255, 0.32);
}
.carrusel-prev {
	left: 20px;
}
.carrusel-next {
	right: 20px;
}

.carrusel-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}

.carrusel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: none;
	cursor: pointer;
	padding: 0;
	transition:
		background var(--dym-dur-fast),
		width var(--dym-dur-fast);
}
.carrusel-dot.activo {
	background: var(--dym-blanco);
	width: 22px;
	border-radius: var(--dym-radius-pill);
}

/* ===== STAT CARDS (flotantes, superpuestas al carrusel) ===== */
.hero-stats-wrap {
	max-width: var(--dym-max-width);
	margin: -13px auto 0;
	padding: 0 var(--dym-margin-desk);
	position: relative;
	z-index: 10;
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dym-gutter);
}

.stat-card {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--dym-radius-md);
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 55, 143, 0.18);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--dym-azul);
	background: rgb(255 255 255);
}

.stat-icon {
	font-size: 36px;
	color: var(--dym-celeste);
	margin-bottom: 10px;
}

.stat-num {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-sm);
	font-weight: 600;
	color: var(--dym-azul);
	line-height: 1.2;
}

.stat-label {
	font-size: var(--dym-text-title-lg);
	font-weight: 600;
	color: var(--dym-azul);
	margin-top: 4px;
	margin-bottom: 6px;
	font-family: var(--dym-font-display);
}

.stat-desc {
	font-size: var(--dym-text-body-md);
	color: var(--dym-azul);
	line-height: 1.5;
}

/* ===== SECCIONES GENERALES ===== */
.seccion {
	padding: var(--dym-section-gap) 0;
}
.seccion-bg {
	background: var(--dym-verde-bg);
}
.seccion-dark {
	background: var(--dym-azul);
	color: var(--dym-blanco);
}
.seccion-muted {
	background: var(--dym-surface-highest);
}

/* .seccion-post-hero {
	padding-top: 64px;
} */

.section-eyebrow {
	display: block;
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dym-azul-medio);
	margin-bottom: 10px;
}
.seccion-dark .section-eyebrow {
	color: var(--dym-celeste);
}

.section-titulo {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-md);
	font-weight: 600;
	color: var(--dym-azul);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.seccion-dark .section-titulo {
	color: var(--dym-blanco);
}

.section-sub {
	font-size: var(--dym-text-body-lg);
	color: var(--dym-on-surface-var);
	line-height: 1.65;
	max-width: 540px;
}

/* ===== POR QUE UN CORREDOR ===== */
.porque-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
	margin-top: 56px;
}

.porque-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.porque-icon-wrap {
	width: 64px;
	height: 64px;
	background: rgba(137, 226, 255, 0.2);
	border-radius: var(--dym-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	transition: transform var(--dym-dur-fast);
}
.porque-item:hover .porque-icon-wrap {
	transform: scale(1.1);
}
.porque-icon-wrap .material-symbols-outlined {
	font-size: 32px;
	color: var(--dym-azul-medio);
}

.porque-titulo {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-sm);
	font-weight: 600;
	color: var(--dym-azul);
	margin-bottom: 12px;
}

.porque-texto {
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface-var);
	line-height: 1.65;
	text-align: center;
}

/* ===== SEGUROS ===== */
.seguros-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 48px;
}

.seguros-ver-todos {
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--dym-blanco);
	text-decoration: none;
	/* text-decoration-thickness: 2px; */
	/* text-underline-offset: 4px; */
	transition: color var(--dym-dur-fast);
	background: var(--dym-azul-medio);
	padding: 10px 21px;
	border-radius: var(--dym-radius-pill);
	transition: background var(--dym-dur-fast);
}
.seguros-ver-todos:hover {
	color: var(--dym-azul);
	background: var(--dym-bg);
}

.seguros-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dym-gutter);
}

.seguro-card {
	position: relative;
	background: var(--dym-surface-lowest);
	border: 1px solid var(--dym-outline-var);
	border-radius: var(--dym-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--dym-shadow-sm);
	transition:
		box-shadow var(--dym-dur-base),
		transform var(--dym-dur-base),
		border-color var(--dym-dur-base);
}
.seguro-card:hover {
	box-shadow: 0 16px 36px rgba(0, 55, 143, 0.2);
	transform: translateY(-6px);
	border-color: var(--dym-azul-medio);
}

/* Toda la card es clickeable: link invisible que cubre el area completa.
   Los botones internos quedan por encima (z-index 2) y siguen funcionando
   de forma independiente para ir directo a Cotizar o al detalle. */
.seguro-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.seguro-card-foto {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	transform: translateZ(0);
}
.seguro-card-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--dym-ease);
	backface-visibility: hidden;
	will-change: transform;
}
.seguro-card:hover .seguro-card-foto img {
	transform: scale(1.07);
}
/* Degradado sutil de la foto hacia el color de fondo de la card,
   para que la transicion hacia el contenido de texto no sea un corte duro. */
.seguro-card-foto::after {
	content: '';
	position: absolute;
	inset: -1px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 50%,
		var(--dym-surface-lowest, #ffffff) 100%
	);
	pointer-events: none;
}

.seguro-card-cuerpo {
	position: relative;
	padding: 20px 32px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.seguro-card-cuerpo.sin-foto {
	padding-top: 32px;
}

.seguro-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.seguro-icono .material-symbols-outlined {
	font-size: 27px;
	color: var(--dym-azul);
	transition: color var(--dym-dur-base);
}
.seguro-card:hover .seguro-icono .material-symbols-outlined {
	color: var(--dym-azul-medio);
}

.seguro-tag {
	background: rgba(0, 99, 154, 0.1);
	color: var(--dym-azul-medio);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 4px 14px;
	border-radius: var(--dym-radius-pill);
}

.seguro-nombre {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-sm);
	font-weight: 600;
	color: var(--dym-azul);
	margin-bottom: 12px;
}

.seguro-desc {
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface-var);
	line-height: 1.3;
	margin-bottom: 9px;
	flex: 1;
}

.seguro-lista {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 19px;
}

.seguro-lista li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface-var);
}

.seguro-lista li .material-symbols-outlined {
	font-size: 18px;
	color: var(--dym-verde);
}

.seguro-card-acciones {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.btn-seguro {
	display: block;
	flex: 1;
	padding: 8px;
	border: 2px solid var(--dym-azul-medio);
	border-radius: var(--dym-radius-pill);
	background: var(--dym-azul-medio);
	color: var(--dym-blanco);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-sm);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition:
		background var(--dym-dur-fast),
		color var(--dym-dur-fast),
		border-color var(--dym-dur-fast);
	text-decoration: none;
}
.btn-seguro:hover {
	background: var(--dym-azul);
	border-color: var(--dym-azul);
}

.btn-seguro-secundario {
	display: block;
	flex: 1;
	padding: 8px;
	border: 2px solid var(--dym-azul-medio);
	border-radius: var(--dym-radius-pill);
	background: transparent;
	color: var(--dym-azul-medio);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-sm);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition:
		background var(--dym-dur-fast),
		color var(--dym-dur-fast);
	text-decoration: none;
}
.btn-seguro-secundario:hover {
	background: var(--dym-azul-medio);
	color: var(--dym-blanco);
}

/* ===== QUIENES SOMOS ===== */
.quienes-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.quienes-diferenciadores {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dif-item {
	display: flex;
	gap: 16px;
	padding: 16px;
	border-radius: var(--dym-radius-sm);
	background: var(--dym-surface-container);
	transition: background var(--dym-dur-fast);
}
.dif-item:hover {
	background: var(--dym-surface-high);
}

.dif-item .material-symbols-outlined {
	font-size: 24px;
	color: var(--dym-azul);
	flex-shrink: 0;
	margin-top: 1px;
}

.dif-titulo {
	font-size: var(--dym-text-body-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--dym-azul);
	margin-bottom: 3px;
}

.dif-texto {
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface-var);
}

.equipo-cards-grid {
	display: flex;
	grid-template-columns: 1fr 1fr;
	gap: var(--dym-gutter);
	align-items: start;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.persona-card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.persona-card:nth-child(2) {
	margin-top: 48px;
}

.persona-foto {
	aspect-ratio: 1 / 1;
	overflow: visible;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.persona-foto img {
	width: 350px;
	/* height: 100%; */
	object-fit: contain;
	object-position: center;
	transition: transform 0.4s ease;
}

.persona-card:hover .persona-foto img {
	transform: scale(1.04);
}

.persona-iniciales {
	font-family: var(--dym-font-display);
	font-size: 48px;
	font-weight: 700;
	color: var(--dym-blanco);
}

.persona-info {
	padding: 8px 4px 0;
}

.persona-nombre {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-sm);
	font-weight: 600;
	color: var(--dym-azul);
	margin-bottom: 2px;
}

.persona-cargo {
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	color: var(--dym-verde);
}

/* ===== PROMOCIONES (cards con imagen full + overlay) ===== */
/* ===== PROMOCIONES (cards con imagen full + overlay) ===== */
.promociones {
	background: var(--dym-bg);
}

.promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--dym-gutter);
	margin-top: 36px;
}

.promo-card {
	position: relative;
	border-radius: var(--dym-radius-md);
	overflow: hidden;
	min-height: 370px;
	max-height: 508px;
	box-shadow: var(--dym-shadow-sm);
	transition:
		box-shadow var(--dym-dur-base),
		transform var(--dym-dur-base);
	cursor: pointer;
}

.promo-card:hover {
	box-shadow: 0 12px 32px rgba(0, 55, 143, 0.18);
	transform: translateY(-3px);
}

/* Imagen de fondo ocupa toda la card */
.promo-imagen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
	transition: transform var(--dym-dur-slow) var(--dym-ease);
}
.promo-card:hover .promo-imagen {
	transform: scale(1.05);
}

/* Overlay oscuro gradiente de abajo hacia arriba */
.promo-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.7) 50%,
		rgba(0, 0, 0, 0.12) 100%
	);
	z-index: 1;
}

/* Badge: arriba a la izquierda, sobre el overlay */
.promo-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-block;
	background: rgba(1, 195, 182, 0.92);
	color: var(--dym-blanco);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--dym-radius-pill);
	backdrop-filter: blur(6px);
}

/* Contenido de texto: anclado abajo */
.promo-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 20px;
}

.promo-titulo {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-sm);
	font-weight: 700;
	color: var(--dym-blanco);
	margin-bottom: 6px;
	line-height: 1.2;
}

.promo-desc {
	font-size: var(--dym-text-body-md);
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

.promo-arrow {
	display: none;
}

/* ===== CONTACTO ===== */
.contacto-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 64px;
	align-items: start;
}

.contacto-info-titulo {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-head-md);
	font-weight: 600;
	color: var(--dym-azul);
	margin-bottom: 20px;
	line-height: 1.25;
}

.contacto-info-sub {
	font-size: var(--dym-text-body-lg);
	color: var(--dym-on-surface-var);
	line-height: 1.65;
	margin-bottom: 32px;
}

.contacto-datos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.contacto-dato {
	display: flex;
	align-items: center;
	gap: 16px;
}

.contacto-dato-icono {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 35, 98, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.contacto-dato-icono .material-symbols-outlined {
	color: var(--dym-azul);
	font-size: 22px;
}
.contacto-dato-valor {
	font-size: var(--dym-text-body-md);
	font-weight: 700;
	color: var(--dym-azul);
}

.contacto-wa-box {
	padding: 28px;
	background: rgba(31, 127, 0, 0.08);
	border: 1px solid rgba(31, 127, 0, 0.2);
	border-radius: var(--dym-radius-md);
}

.contacto-wa-titulo {
	font-size: var(--dym-text-title-lg);
	font-weight: 600;
	color: var(--dym-verde);
	margin-bottom: 8px;
}

.contacto-wa-sub {
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface-var);
	line-height: 1.5;
	margin-bottom: 18px;
}

.btn-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--dym-verde);
	color: var(--dym-blanco);
	font-family: var(--dym-font-body);
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 12px 24px;
	border-radius: var(--dym-radius-pill);
	transition: filter var(--dym-dur-fast);
}
.btn-wa:hover {
	filter: brightness(1.1);
}

/* Formulario de contacto */
.form-contacto-card {
	background: var(--dym-surface-lowest);
	/* border: 1px solid var(--dym-outline-var); */
	border-radius: var(--dym-radius-md);
	padding: 44px;
	box-shadow: 0 8px 32px rgba(0, 35, 98, 0.08);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.form-full {
	grid-column: 1 / -1;
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.campo label {
	font-size: var(--dym-text-body-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--dym-on-surface-var);
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	background: var(--dym-surface-lowest);
	border: 1.5px solid var(--dym-outline-var);
	border-radius: var(--dym-radius-sm);
	padding: 12px 16px;
	font-family: var(--dym-font-body);
	font-size: var(--dym-text-body-md);
	color: var(--dym-on-surface);
	outline: none;
	transition:
		border-color var(--dym-dur-fast),
		box-shadow var(--dym-dur-fast);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	border-color: var(--dym-azul-medio);
	box-shadow: 0 0 0 3px rgba(0, 99, 154, 0.12);
}
.campo input::placeholder,
.campo textarea::placeholder {
	color: var(--dym-outline);
}

.btn-enviar {
	width: 100%;
	padding: 15px;
	background: var(--dym-verde);
	color: var(--dym-blanco);
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-md);
	border: none;
	font-weight: 800;
	border-radius: var(--dym-radius-pill);
	cursor: pointer;
	transition:
		box-shadow var(--dym-dur-fast),
		filter var(--dym-dur-fast);
}
.btn-enviar:hover {
	box-shadow: 0 8px 24px rgba(31, 127, 0, 0.3);
	filter: brightness(1.07);
}
.btn-enviar:disabled {
	opacity: 0.6;
	cursor: default;
}

.form-mensaje {
	margin-top: 16px;
	font-size: var(--dym-text-body-md);
	padding: 12px 16px;
	border-radius: var(--dym-radius-sm);
	display: none;
}
.form-mensaje.ok {
	display: block;
	background: rgba(31, 127, 0, 0.1);
	color: var(--dym-verde-oscuro);
}
.form-mensaje.error {
	display: block;
	background: rgba(186, 26, 26, 0.08);
	color: var(--dym-rojo);
}

/* ===== ASEGURADORAS (Trabajamos con) ===== */
.aseguradoras {
	background: var(--dym-surface-low);
}

.aseguradoras-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	margin-top: 40px;
	align-items: center;
}

.aseguradora-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 16px;
}

.aseguradora-item img {
	max-width: 130px;
	max-height: 48px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.65;
	transition:
		filter var(--dym-dur-base),
		opacity var(--dym-dur-base);
}

.aseguradora-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.aseguradora-item-nombre {
	font-family: var(--dym-font-display);
	font-size: var(--dym-text-body-lg);
	font-weight: 600;
	color: var(--dym-on-surface-var);
	text-align: center;
	opacity: 0.75;
}

.aseguradoras-nota {
	margin-top: 36px;
	text-align: center;
	font-size: 13px;
	color: var(--dym-on-surface-var);
	opacity: 0.75;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

/* ===== FOOTER ===== */
footer {
	padding: 32px var(--dym-margin-desk);
	background: var(--dym-surface-lowest);
	border-top: 1px solid var(--dym-outline-var);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-brand .logo-dm {
	font-size: 18px;
	margin-bottom: 4px;
}
.footer-copy {
	font-size: 13px;
	color: var(--dym-on-surface-var);
}

.footer-credito {
	font-size: 11px;
	color: var(--dym-outline);
	margin-top: 6px;
}
.footer-credito a {
	color: var(--dym-outline);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dym-dur-fast);
}
.footer-credito a:hover {
	color: var(--dym-azul-medio);
}

.footer-links {
	display: flex;
	gap: 32px;
	list-style: none;
}
.footer-links a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--dym-on-surface-var);
	transition: color var(--dym-dur-fast);
}
.footer-links a:hover {
	color: var(--dym-azul-medio);
}

.footer-social {
	display: flex;
	gap: 10px;
}

.social-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dym-azul);
	color: var(--dym-blanco);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	transition: background var(--dym-dur-fast);
}
.social-btn:hover {
	background: var(--dym-azul-medio);
}
.social-btn i {
	font-size: 17px;
}
.social-btn-whatsapp:hover {
	background: #25d366;
}
.social-btn-instagram:hover {
	background: #e1306c;
}
.social-btn-facebook:hover {
	background: #1877f2;
}

/* ===== BOTON WA FLOTANTE ===== */
.wa-flotante {
	position: fixed;
	bottom: 32px;
	right: 32px;
	width: 56px;
	height: 56px;
	background: var(--dym-verde);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(31, 127, 0, 0.35);
	z-index: 100;
	transition:
		transform var(--dym-dur-fast),
		filter var(--dym-dur-fast);
}
.wa-flotante:hover {
	transform: scale(1.1);
	filter: brightness(1.1);
}
.wa-flotante i {
	font-size: 26px;
	color: var(--dym-blanco);
}

/* Tooltip del WA flotante */
.wa-flotante-tooltip {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%);
	background: var(--dym-surface-lowest);
	color: var(--dym-on-surface);
	padding: 8px 14px;
	border-radius: var(--dym-radius-sm);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--dym-shadow-md);
	border: 1px solid var(--dym-outline-var);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dym-dur-fast);
}
.wa-flotante:hover .wa-flotante-tooltip {
	opacity: 1;
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
	.carrusel-titulo {
		font-size: 36px;
	}
	.quienes-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.contacto-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 768px) {
	/* Nav: mostrar hamburger, ocultar links y CTA */
	.nav-links {
		display: none;
	}
	.nav-cta {
		display: none;
	}
	.nav-hamburger {
		display: flex;
	}
	.nav-mobile-menu {
		display: flex;
	}
	.logo-sub {
		display: none;
	}
	.nav-siniestro-btn {
		display: none;
	}
	.nav-siniestro-icon-mobile {
		display: flex;
	}

	/* Nav más compacto en mobile */
	.nav-glass {
		top: 10px;
		width: calc(100% - 24px);
		padding: 8px 8px 8px 16px;
		height: 44px;
	}

	.nav-hamburger span {
		color: var(--dym-azul);
	}
	.nav-glass .logo-dm {
		color: white;
	}

	/* Hero: sin padding-top (nav es transparente y flota) */
	.carrusel {
		border-radius: 0;
	}
	.hero-carrusel {
		padding-top: 0;
		padding: 0px 0px 60px 0px;
	}
	.carrusel-wrap {
		padding: 0;
	}
	.carrusel-slide {
		min-height: 520px;
		align-items: flex-start;
	}
	.carrusel-contenido {
		align-items: start;
		padding: 88px 20px 40px;
		max-width: 100%;
	}
	.carrusel-titulo {
		font-size: 28px;
		line-height: 1.2;
	}
	.carrusel-badge {
		font-size: 10px;
	}
	.carrusel-sub {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.carrusel-acciones {
		gap: 10px;
	}
	.carrusel-acciones > a,
	.carrusel-acciones > button {
		font-size: 14px;
		padding: 10px 20px;
	}

	/* Flechas más pequeñas y alejadas del contenido */
	.carrusel-flecha {
		width: 36px;
		height: 36px;
		top: 40%;
	}
	.carrusel-prev {
		left: 0px;
	}
	.carrusel-next {
		right: 0px;
	}

	/* Stat cards: fila horizontal compacta */
	.hero-stats-wrap {
		padding: 0 12px;
		margin-top: -32px;
	}
	.hero-stats {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.stat-card {
		flex-direction: row;
		text-align: left;
		padding: 14px 16px;
		gap: 12px;
	}
	.stat-icon {
		margin-bottom: 0;
		font-size: 22px;
		flex-shrink: 0;
	}
	.stat-label {
		font-size: 14px;
		margin: 0;
	}
	.stat-num {
		font-size: 18px;
		line-height: 1.2;
	}
	.stat-desc {
		display: none;
	}

	.seccion-post-hero {
		padding-top: 56px !important;
	}

	.container {
		padding: 0 var(--dym-margin-mob);
	}
	.seccion {
		padding: 44px 0;
	}

	.porque-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.seguros-grid {
		grid-template-columns: 1fr;
	}
	.seguros-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.quienes-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.equipo-cards-grid {
		grid-template-columns: 1fr;
	}
	.persona-card:nth-child(2) {
		margin-top: 0;
	}
	.promo-grid {
		grid-template-columns: 1fr;
	}
	.contacto-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.form-grid {
		grid-template-columns: 1fr;
	}
	.form-full {
		grid-column: 1;
	}
	.form-contacto-card {
		padding: 24px 18px;
	}
	footer {
		flex-direction: column;
		text-align: center;
	}
	.footer-links {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
	}
	.aseguradoras-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.aseguradora-item {
		min-height: 60px;
		padding: 10px;
	}
	.aseguradora-item img {
		max-width: 110px;
		max-height: 40px;
	}
}
.nav-acciones {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cta-siniestro {
	padding: 8px 0 56px;
	background: var(--dym-surface-low);
}

.cta-siniestro-inner {
	background: var(--dym-rojo);
	border-radius: var(--dym-radius-lg);
	padding: 32px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.cta-siniestro-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 6px;
}

.cta-siniestro-titulo {
	font-family: var(--dym-font-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--dym-blanco);
	margin-bottom: 6px;
}

.cta-siniestro-desc {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	max-width: 480px;
	line-height: 1.5;
}

.cta-siniestro-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--dym-blanco);
	color: var(--dym-rojo);
	font-family: var(--dym-font-display);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 28px;
	border-radius: var(--dym-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform var(--dym-dur-fast),
		box-shadow var(--dym-dur-fast);
}
.cta-siniestro-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.cta-siniestro-btn .material-symbols-outlined {
	font-size: 20px;
}

@media (max-width: 768px) {
	.cta-siniestro-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 24px;
		border-radius: 24px;
	}
	.cta-siniestro-btn {
		width: 100%;
		justify-content: center;
	}
	.cta-siniestro-titulo {
		font-size: 22px;
	}
}