/* Ajustes de la página Home */

/* ----- Logos de compañías ----- */
.hm-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px 34px;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 30px 20px;
	box-sizing: border-box;
}

.hm-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 80px;
	box-sizing: border-box;
	transition: transform .25s;
}

.hm-logo:hover { transform: scale(1.08); }

.hm-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Logos sin margen propio: se les da aire para igualar el tamaño visual */
.hm-logo.hm-ajustado { padding: 14px 12px; }

/* Ajustes individuales para igualar tamaños */
.hm-logo img[alt="AVLA"] { max-height: 38px; }
.hm-logo img[alt="CESCE"] { transform: scale(1.3); }
.hm-logo img[alt="Renta Nacional"] { transform: scale(1.7); }

@media (max-width: 767px) {
	.hm-logos { gap: 6px 10px; padding: 14px 12px; }
	.hm-logo { width: calc((100% - 20px) / 3); max-width: none; height: 44px; }
	.hm-logo.hm-ajustado { padding: 6px 8px; }
	.hm-logo img[alt="AVLA"] { max-height: 24px; }
	.hm-logo img[alt="Renta Nacional"] { transform: scale(1.4); }
}

/* Colores planos del logo: azul, naranjo y blanco.
   Los comparten seguros (.sv), cómo cotizar (.pp), quiénes somos (.pv),
   situaciones (.ts), preguntas frecuentes (.fq) y el pie de página (.pie) */
.sv,
.pp,
.pv,
.ts,
.fq,
.pie {
	--sv-azul: #1d2a9e;
	--sv-azul-hondo: #161f7a;
	--sv-naranjo: #df5600;
	--sv-naranjo-hondo: #c24a00;
	--sv-oscuro: #141b4d;
	--sv-texto: #4a5568;
	--sv-borde: #e6e8f2;
}

/* =========================================================
   Nuestros servicios (seguros)
   ========================================================= */
.sv {
	/* Acento de cada panel: azul en personas, naranjo en empresas */
	--sv-acento: var(--sv-azul);
	position: relative;
	width: 100%;
	padding: 100px 20px 110px;
	box-sizing: border-box;
	background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sv *, .sv *::before, .sv *::after { box-sizing: border-box; }

.sv-contenedor { position: relative; max-width: 1180px; margin: 0 auto; }

/* ----- Encabezado ----- */
.sv-cabecera { max-width: 820px; margin: 0 auto 44px; text-align: center; }

.sv-etiqueta {
	display: inline-block;
	margin-bottom: 16px;
	padding: 7px 18px;
	border-radius: 30px;
	background: rgba(223, 86, 0, .08);
	color: var(--sv-naranjo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sv-cabecera h2 {
	margin: 0 0 16px;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 700;
	line-height: 1.08;
	text-transform: none;
}

.sv-destacado { color: var(--sv-naranjo); }

.sv-cabecera p { margin: 0 0 26px; color: var(--sv-texto) !important; font-size: 18px; line-height: 1.6; }

.sv-confianza {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-confianza li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--sv-borde);
	border-radius: 30px;
	background: #fff;
	color: var(--sv-oscuro);
	font-size: 14px;
	font-weight: 600;
}

.sv-confianza svg { width: 18px; height: 18px; fill: var(--sv-azul); flex-shrink: 0; }

/* En pantallas grandes las etiquetas usan más ancho que el texto para quedar en una fila */
@media (min-width: 1100px) {
	.sv-confianza { margin: 0 -90px; }
}

/* ----- Pestañas ----- */
.sv-pestanas {
	display: flex;
	justify-content: center;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 40px;
	padding: 8px;
	border: 1px solid var(--sv-borde);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(20, 27, 77, .07);
}

.sv-pestana {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 26px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--sv-texto);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .3s, color .3s, box-shadow .3s;
}

.sv-pestana svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }

.sv-pestana .sv-cuenta {
	padding: 3px 9px;
	border-radius: 20px;
	background: rgba(20, 27, 77, .07);
	font-size: 12px;
}

.sv-pestana:hover,
.sv-pestana:focus { background: #f3f4fa; color: var(--sv-azul); }

.sv-pestana[aria-selected="true"] {
	background: var(--sv-azul);
	color: #fff;
	box-shadow: 0 8px 20px rgba(29, 42, 158, .25);
}

.sv-pestana[data-panel="sv-empresas"][aria-selected="true"] {
	background: var(--sv-naranjo);
	box-shadow: 0 8px 20px rgba(223, 86, 0, .25);
}

.sv-pestana[aria-selected="true"] .sv-cuenta { background: rgba(255, 255, 255, .22); }

/* ----- Paneles ----- */
.sv-panel[hidden] { display: none; }
.sv-panel { animation: sv-entrar .5s ease; }
.sv-panel.empresas { --sv-acento: var(--sv-naranjo); }

@keyframes sv-entrar {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

/* Banner con foto */
.sv-banner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	min-height: 300px;
	margin-bottom: 30px;
	border-radius: 26px;
	background: var(--sv-azul);
	box-shadow: 0 20px 45px rgba(29, 42, 158, .18);
	overflow: hidden;
}

.sv-banner-foto { position: relative; min-height: 260px; background-size: cover; background-position: center; }

.sv-banner-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(29, 42, 158, 0) 55%, var(--sv-azul) 100%);
}

.sv-banner-texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 44px 48px;
	color: #fff;
}

.sv-banner-texto .sv-mini {
	margin-bottom: 10px;
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sv-banner-texto h3 {
	margin: 0 0 12px;
	color: #fff;
	font-family: "Cabin Condensed", sans-serif;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
}

.sv-banner-texto p { margin: 0 0 26px; color: rgba(255, 255, 255, .85) !important; font-size: 17px; line-height: 1.6; }

.sv-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 40px;
	background: var(--sv-naranjo);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
	transition: transform .25s, box-shadow .25s, background .25s;
}

.sv-boton:hover,
.sv-boton:focus { background: var(--sv-naranjo-hondo); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .24); }
.sv-boton svg { width: 18px; height: 18px; fill: currentColor; transition: transform .25s; }
.sv-boton:hover svg { transform: translateX(4px); }

/* Botón principal + botón de correo, uno al lado del otro */
.sv-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Botón de correo: con borde, para que el naranjo siga siendo el principal (abre el formulario de correo.js) */
.sv-boton-correo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border: 2px solid var(--sv-azul);
	border-radius: 40px;
	background: transparent;
	color: var(--sv-azul);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.sv-boton-correo svg { width: 18px; height: 18px; fill: currentColor; }
.sv-boton-correo:hover,
.sv-boton-correo:focus { background: var(--sv-azul); color: #fff; transform: translateY(-3px); }

/* Versión para fondos azules */
.sv-boton-correo.claro { border-color: rgba(255, 255, 255, .7); color: #fff; }
.sv-boton-correo.claro:hover,
.sv-boton-correo.claro:focus { border-color: #fff; background: #fff; color: var(--sv-azul); }

/* Tarjetas de seguros: giran al presionarlas */
.sv-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.sv-tarjeta {
	position: relative;
	height: 280px;
	perspective: 1400px;
}

.sv-giro {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.sv-tarjeta:hover .sv-giro { transform: translateY(-8px); }
.sv-tarjeta.girada .sv-giro { transform: rotateY(180deg); }
.sv-tarjeta.girada:hover .sv-giro { transform: translateY(-8px) rotateY(180deg); }

.sv-cara {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 30px 28px 26px;
	border-radius: 22px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ----- Frente ----- */
.sv-frente {
	width: 100%;
	border: 1px solid var(--sv-borde);
	background: #fff;
	box-shadow: 0 6px 20px rgba(20, 27, 77, .06);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: box-shadow .35s;
}

.sv-frente:hover,
.sv-frente:focus { background: #fff; box-shadow: 0 22px 44px rgba(20, 27, 77, .13); }
.sv-frente:focus-visible { outline: 3px solid var(--sv-acento); outline-offset: 3px; }

/* Línea de color arriba que crece al pasar el mouse */
.sv-frente::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--sv-acento);
	transform: scaleX(.18);
	transform-origin: left;
	transition: transform .45s ease;
}

.sv-frente:hover::before { transform: scaleX(1); }

/* Ícono gigante de fondo, como marca de agua */
.sv-marca {
	position: absolute;
	right: -26px;
	bottom: -30px;
	width: 150px;
	height: 150px;
	opacity: .06;
	transition: transform .6s ease, opacity .4s;
	pointer-events: none;
}

.sv-marca svg { width: 100%; height: 100%; fill: var(--sv-acento); }
.sv-frente:hover .sv-marca { opacity: .1; transform: rotate(-12deg) scale(1.08); }

.sv-icono {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 18px;
	background: var(--sv-acento);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--sv-acento) 25%, transparent);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.sv-icono svg { width: 32px; height: 32px; fill: #fff; }
.sv-frente:hover .sv-icono { transform: rotate(-8deg) scale(1.1); }

.sv-tarjeta h4,
.sv-titulo {
	display: block;
	margin: 0 0 10px;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

.sv-ver {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	color: var(--sv-acento);
	font-size: 15px;
	font-weight: 700;
}

.sv-ver-mas {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sv-acento) 10%, transparent);
	font-size: 20px;
	line-height: 1;
	transition: transform .35s, background .35s, color .35s;
}

.sv-frente:hover .sv-ver-mas { transform: rotate(90deg); background: var(--sv-acento); color: #fff; }

/* ----- Reverso: azul del logo con una línea naranja arriba ----- */
.sv-reverso {
	transform: rotateY(180deg);
	background: linear-gradient(160deg, var(--sv-azul) 0%, var(--sv-azul-hondo) 100%);
	box-shadow: 0 22px 44px rgba(29, 42, 158, .22);
	color: #fff;
}

.sv-reverso::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--sv-naranjo);
}

.sv-reverso h4 { position: relative; color: #fff; font-size: 21px; }

.sv-reverso p {
	position: relative;
	flex: 1;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .88) !important;
	font-size: 15px;
	line-height: 1.6;
	overflow-y: auto;
}

.sv-acciones { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.sv-cotizar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 30px;
	background: #fff;
	color: var(--sv-azul);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .25s, box-shadow .25s;
}

.sv-cotizar svg { width: 18px; height: 18px; fill: currentColor; }

.sv-cotizar:hover,
.sv-cotizar:focus { color: var(--sv-azul); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }

/* Botón redondo de correo en el reverso de la tarjeta */
.sv-correo {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transition: background .25s, color .25s, transform .25s;
}

.sv-correo svg { width: 18px; height: 18px; fill: currentColor; }
.sv-correo:hover,
.sv-correo:focus { background: #fff; color: var(--sv-azul); transform: translateY(-2px); }

.sv-volver {
	margin: 0;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 30px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .25s;
}

.sv-volver:hover,
.sv-volver:focus { background: rgba(255, 255, 255, .15); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.sv-giro { transition: none; }
}

/* Aparición escalonada */
.sv-aparecer { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.sv-aparecer.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sv-panel { animation: none; }
	.sv-aparecer { opacity: 1; transform: none; transition: none; }
}

/* ----- Responsive ----- */
@media (max-width: 1023px) {
	.sv-grilla { grid-template-columns: repeat(2, 1fr); }
	.sv-banner { grid-template-columns: 1fr; }
	.sv-banner-foto { min-height: 240px; }
	.sv-banner-foto::after { background: linear-gradient(180deg, rgba(29, 42, 158, 0) 50%, var(--sv-azul) 100%); }
}

@media (max-width: 640px) {
	.sv { padding: 70px 16px 80px; }
	.sv-grilla { grid-template-columns: 1fr; }
	.sv-pestanas { width: 100%; }
	.sv-pestana { flex: 1; flex-direction: column; gap: 6px; padding: 12px 10px; font-size: 14px; text-align: center; }
	.sv-banner-texto { padding: 30px 24px; }
	.sv-tarjeta { height: 250px; }
	.sv-cara { padding: 26px 22px 22px; }
}

/* Celular: tarjetas chicas en fila; al presionar se agrandan hacia abajo y muestran la información */
@media (max-width: 640px) {
	.sv-grilla { gap: 12px; }
	.sv-tarjeta { height: auto; perspective: none; }
	.sv-giro,
	.sv-tarjeta:hover .sv-giro,
	.sv-tarjeta.girada .sv-giro,
	.sv-tarjeta.girada:hover .sv-giro { height: auto; transform: none; transform-style: flat; transition: none; }

	.sv-cara { position: relative; inset: auto; padding: 14px 16px; -webkit-backface-visibility: visible; backface-visibility: visible; }

	.sv-frente { flex-direction: row; align-items: center; gap: 14px; border-radius: 16px; }
	.sv-marca { display: none; }
	.sv-icono { flex-shrink: 0; width: 44px; height: 44px; margin: 0; border-radius: 13px; }
	.sv-icono svg { width: 24px; height: 24px; }
	.sv-frente .sv-titulo { flex: 1; margin: 0; font-size: 19px; }

	/* Solo queda el botón "+" a la derecha (el texto "Ver información" se esconde) */
	.sv-ver { gap: 0; margin: 0 0 0 auto; font-size: 0; }
	.sv-tarjeta.girada .sv-ver-mas { transform: rotate(45deg); background: var(--sv-acento); color: #fff; }

	/* La información aparece pegada debajo del título */
	.sv-reverso { display: none; transform: none; margin-top: -6px; padding: 18px 16px 16px; border-radius: 0 0 16px 16px; }
	.sv-tarjeta.girada .sv-reverso { display: flex; }
	.sv-tarjeta.girada .sv-frente { border-radius: 16px 16px 0 0; }
	.sv-reverso h4 { display: none; }
	.sv-reverso p { flex: none; margin: 0 0 14px; overflow: visible; }
}

/* =========================================================
   Cómo cotizar en 3 pasos (va justo debajo de servicios)
   Los pasos usan las tarjetas de quiénes somos (.pv-tarjeta, .pv-icono, .pv-sub)
   ========================================================= */
.pp {
	position: relative;
	width: 100%;
	padding: 20px 20px 100px;
	box-sizing: border-box;
	background: #f5f6fb;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }

.pp-contenedor { max-width: 1180px; margin: 0 auto; }

.pp-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }

.pp-pasos > li { margin: 0; }

/* Número grande de fondo en cada paso */
.pp-numero {
	position: absolute;
	top: 14px;
	right: 26px;
	color: color-mix(in srgb, var(--pv-acento) 12%, transparent);
	font-family: "Cabin Condensed", sans-serif;
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.pp-accion {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 40px;
}

.pp-nota { color: var(--sv-texto); font-size: 14px; font-weight: 600; }
.pp-accion .sv-botones { justify-content: center; }

@media (max-width: 900px) {
	.pp-pasos { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.pp { padding: 10px 16px 80px; }
}

/* =========================================================
   Quiénes somos: propuesta de valor, misión, visión, valores y principios
   Usa el mismo encabezado (.sv-cabecera) y aparición (.sv-aparecer) que servicios
   ========================================================= */
.pv {
	position: relative;
	width: 100%;
	padding: 100px 20px 110px;
	box-sizing: border-box;
	background: #fff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }

.pv-contenedor { max-width: 1180px; margin: 0 auto; }

/* Cobertura nacional bajo el encabezado */
.pv-ubicacion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--sv-borde);
	border-radius: 30px;
	background: #fff;
	color: var(--sv-oscuro);
	font-size: 14px;
	font-weight: 600;
}

.pv-ubicacion svg { width: 18px; height: 18px; fill: var(--sv-naranjo); flex-shrink: 0; }

/* ----- Atención humana: fotos del equipo y aviso "aquí no hay robots" ----- */
.pv-humano {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 30px;
	margin-bottom: 24px;
	padding: 26px 32px;
	border: 1px solid rgba(223, 86, 0, .22);
	border-radius: 22px;
	background: #fff6f0;
}

.pv-caras { display: flex; align-items: center; }

.pv-caras img {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	margin-left: -16px;
	border: 3px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 14px rgba(20, 27, 77, .15);
	transition: transform .3s;
}

.pv-caras img:first-child { margin-left: 0; }
.pv-caras img:hover { z-index: 1; transform: translateY(-4px) scale(1.06); }
.pv-caras .pv-llamada:first-child { margin-left: 0; }

/* Teléfono naranjo con un pulso suave, para reforzar "llámanos" */
.pv-llamada {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -12px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--sv-naranjo);
}

.pv-llamada svg { width: 20px; height: 20px; fill: #fff; }

.pv-llamada::after {
	content: "";
	position: absolute;
	inset: -3px;
	border: 2px solid var(--sv-naranjo);
	border-radius: 50%;
	animation: pv-pulso 2s ease-out infinite;
}

@keyframes pv-pulso {
	from { opacity: .7; transform: scale(1); }
	to { opacity: 0; transform: scale(1.7); }
}

.pv-humano h3 {
	margin: 0 0 6px;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: none;
}

.pv-humano p { margin: 0; color: var(--sv-texto) !important; font-size: 16px; line-height: 1.55; }

.pv-humano .sv-boton,
.pv-humano .sv-boton-correo { justify-content: center; white-space: nowrap; }

/* En el bloque de atención humana los dos botones van uno sobre otro */
.pv-humano-botones { flex-direction: column; align-items: stretch; }

/* ----- Propuesta de valor: bloque azul, casillas blancas y línea naranja arriba ----- */
.pv-propuesta {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 40px;
	margin-bottom: 24px;
	padding: 52px 52px 48px;
	border-radius: 26px;
	background: var(--sv-azul);
	box-shadow: 0 20px 45px rgba(29, 42, 158, .18);
	color: #fff;
	overflow: hidden;
}

.pv-propuesta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--sv-naranjo);
}

.pv-mini {
	display: block;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pv-propuesta h3 {
	margin: 0 0 14px;
	color: #fff;
	font-family: "Cabin Condensed", sans-serif;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.1;
	text-transform: none;
}

.pv-propuesta p { margin: 0 0 26px; color: rgba(255, 255, 255, .85) !important; font-size: 17px; line-height: 1.6; }

.pv-puntos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

/* Casillas blancas sobre el azul; suben un poco al pasar el mouse */
.pv-puntos li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 16px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(10, 14, 60, .25);
	color: var(--sv-texto);
	font-size: 15px;
	line-height: 1.5;
	transition: transform .3s, box-shadow .3s;
}

.pv-puntos li:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10, 14, 60, .32); }

.pv-puntos strong { display: block; color: var(--sv-azul); font-size: 16px; }

.pv-check {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sv-naranjo);
}

.pv-check svg { width: 18px; height: 18px; fill: #fff; }

/* ----- Misión, visión, valores y principios ----- */
.pv-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.pv-tarjeta {
	--pv-acento: var(--sv-azul);
	position: relative;
	padding: 34px 32px 30px;
	border: 1px solid var(--sv-borde);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(20, 27, 77, .06);
	overflow: hidden;
	/* opacity y transform también sirven para la aparición escalonada */
	transition: opacity .6s ease, transform .4s ease, box-shadow .35s;
}

.pv-tarjeta.naranjo { --pv-acento: var(--sv-naranjo); }

.pv-tarjeta:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 27, 77, .13); }

/* Línea de color arriba que crece al pasar el mouse, como en las tarjetas de seguros */
.pv-tarjeta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--pv-acento);
	transform: scaleX(.18);
	transform-origin: left;
	transition: transform .45s ease;
}

.pv-tarjeta:hover::before { transform: scaleX(1); }

.pv-icono {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	border-radius: 16px;
	background: var(--pv-acento);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--pv-acento) 25%, transparent);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.pv-icono svg { width: 28px; height: 28px; fill: #fff; }
.pv-tarjeta:hover .pv-icono { transform: rotate(-8deg) scale(1.1); }

/* Frase corta sobre el título que le habla a la persona */
.pv-sub {
	display: block;
	margin-bottom: 4px;
	color: var(--pv-acento);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pv-tarjeta h3 {
	margin: 0 0 10px;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
}

.pv-tarjeta p { margin: 0; color: var(--sv-texto) !important; font-size: 16px; line-height: 1.65; }

.pv-lista { display: grid; gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }

.pv-lista li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	color: var(--sv-texto);
	font-size: 15px;
	line-height: 1.55;
}

.pv-lista strong { display: block; margin-bottom: 2px; color: var(--sv-oscuro); font-size: 16px; }

.pv-lista-ico {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--pv-acento) 10%, transparent);
}

.pv-lista-ico svg { width: 20px; height: 20px; fill: var(--pv-acento); }

@media (prefers-reduced-motion: reduce) {
	.pv-tarjeta { transition: none; }
	.pv-llamada::after { animation: none; }
}

@media (max-width: 1023px) {
	.pv-propuesta { grid-template-columns: 1fr; gap: 28px; padding: 44px 36px 36px; }
	.pv-humano { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 28px 24px; text-align: center; }
}

@media (max-width: 767px) {
	.pv { padding: 70px 16px 80px; }
	.pv-grilla { grid-template-columns: 1fr; }
	.pv-propuesta { padding: 36px 22px 24px; }
	.pv-tarjeta { padding: 30px 22px 26px; }
}

/* =========================================================
   Situaciones como la tuya: una situación grande a la vez, que avanza sola
   (barras como historias de Instagram). Reemplaza a los testimonios antiguos.
   ========================================================= */
.ts {
	/* Naranjo del logo aclarado para que se lea bien sobre el azul */
	--ts-naranjo-claro: #ff8a3d;
	position: relative;
	width: 100%;
	padding: 100px 20px 110px;
	box-sizing: border-box;
	background: var(--sv-azul);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: hidden;
}

.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }

/* Comillas gigantes de fondo */
.ts::before {
	content: "\201C";
	position: absolute;
	top: -70px;
	left: 3%;
	color: rgba(255, 255, 255, .06);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 520px;
	line-height: 1;
	pointer-events: none;
}

.ts-contenedor { position: relative; max-width: 1180px; margin: 0 auto; }

.ts .sv-etiqueta { background: rgba(255, 255, 255, .14); color: #fff; }
.ts .sv-cabecera h2 { color: #fff; }
.ts .sv-cabecera p { color: rgba(255, 255, 255, .82) !important; }
.ts-destacado { color: var(--ts-naranjo-claro); }

/* Filtros Todas / Personas / Empresas */
.ts-filtros { display: inline-flex; gap: 6px; padding: 6px; border-radius: 40px; background: rgba(255, 255, 255, .1); }

.ts-filtro {
	margin: 0;
	padding: 10px 22px;
	border: 0;
	border-radius: 30px;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .25s, color .25s;
}

.ts-filtro:hover,
.ts-filtro:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.ts-filtro[aria-pressed="true"] { background: #fff; color: var(--sv-azul); }

/* ----- Tarjeta grande ----- */
.ts-escena {
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(8, 12, 60, .35);
	overflow: hidden;
}

.ts-arriba { display: flex; align-items: center; gap: 16px; padding: 22px 28px 0 36px; }

/* Barras de avance: las anteriores llenas y la actual se va llenando */
.ts-barras { display: flex; flex: 1; gap: 6px; }
.ts-barra { flex: 1; height: 4px; border-radius: 4px; background: #e6e8f2; overflow: hidden; }
.ts-barra[hidden] { display: none; }
.ts-barra i { display: block; width: 0; height: 100%; background: var(--sv-naranjo); }
.ts-barra.vista i { width: 100%; }
.ts-barra.actual i { animation: ts-avance 8s linear forwards; }
.ts-escena.pausa .ts-barra.actual i { animation-play-state: paused; }
.ts-escena.ts-sin-auto .ts-barra.actual i { width: 100%; animation: none; }

@keyframes ts-avance {
	from { width: 0; }
	to { width: 100%; }
}

.ts-flecha {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sv-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--sv-azul);
	cursor: pointer;
	transition: background .25s, color .25s, border-color .25s;
}

.ts-flecha svg { width: 22px; height: 22px; fill: currentColor; }
.ts-flecha:hover,
.ts-flecha:focus { border-color: var(--sv-azul); background: var(--sv-azul); color: #fff; }

.ts-historia {
	display: grid;
	grid-template-columns: 360px 1fr;
	align-items: center;
	gap: 52px;
	padding: 28px 52px 48px 36px;
}

.ts-historia[hidden] { display: none; }
.ts-historia.entrando { animation: ts-entrar .5s ease; }

@keyframes ts-entrar {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: none; }
}

/* Foto con el seguro encima */
.ts-visual { position: relative; }

.ts-visual img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	object-fit: cover;
	box-shadow: 0 18px 40px rgba(20, 27, 77, .18);
}

.ts-seguro {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(20, 27, 77, .2);
	color: var(--sv-oscuro);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.ts-seguro-icono {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--sv-azul);
}

.ts-historia[data-grupo="empresas"] .ts-seguro-icono { background: var(--sv-naranjo); }
.ts-seguro-icono svg { width: 20px; height: 20px; fill: #fff; }

/* Lo que piensa la persona y cómo ayudamos */
.ts-mini {
	display: block;
	margin-bottom: 8px;
	color: var(--sv-naranjo);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ts-mini-azul { margin-top: 26px; color: var(--sv-azul); }

/* Es un h3: el tema fuerza tamaño y fuente de todos los <p> de esta zona */
.ts-frase {
	margin: 0;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.12;
	text-transform: none;
}

.ts-texto { margin: 0 0 28px; color: var(--sv-texto) !important; font-size: 17px; line-height: 1.7; }

/* ----- Botones para elegir una situación ----- */
.ts-selectores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

.ts-selector {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 20px 11px 14px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 40px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.ts-selector[hidden] { display: none; }
.ts-selector svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.ts-selector:hover,
.ts-selector:focus { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); }
.ts-selector[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--sv-azul); }

@media (prefers-reduced-motion: reduce) {
	.ts-historia.entrando { animation: none; }
}

@media (max-width: 960px) {
	.ts-historia { grid-template-columns: 1fr; gap: 26px; padding: 22px 24px 32px; }
	.ts-visual img { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
	.ts { padding: 70px 16px 80px; }
	.ts::before { font-size: 300px; top: -40px; }
	.ts-arriba { padding: 18px 18px 0 22px; }
	.ts-historia { padding: 18px 18px 28px; }
	/* Las situaciones se deslizan de lado en celular */
	.ts-selectores { flex-wrap: nowrap; justify-content: flex-start; margin: 22px -16px 0; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; }
	.ts-selectores::-webkit-scrollbar { display: none; }
}

/* =========================================================
   Preguntas frecuentes: título a la izquierda, preguntas que se abren a la derecha
   ========================================================= */
.fq {
	position: relative;
	width: 100%;
	padding: 100px 20px 110px;
	box-sizing: border-box;
	background: #f5f6fb;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fq *, .fq *::before, .fq *::after { box-sizing: border-box; }

.fq-contenedor {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	align-items: start;
	gap: 60px;
	max-width: 1180px;
	margin: 0 auto;
}

/* El encabezado queda fijo mientras se leen las preguntas */
.fq .sv-cabecera { position: sticky; top: 110px; max-width: none; margin: 0; text-align: left; }

.fq-lista { display: grid; gap: 14px; }

.fq-item {
	border: 1px solid var(--sv-borde);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(20, 27, 77, .05);
	overflow: hidden;
	/* opacity y transform también sirven para la aparición escalonada */
	transition: opacity .6s ease, transform .4s ease, border-color .3s, box-shadow .3s;
}

.fq-item[open] { border-color: color-mix(in srgb, var(--sv-azul) 35%, transparent); box-shadow: 0 14px 34px rgba(20, 27, 77, .1); }

.fq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	color: var(--sv-oscuro);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:focus-visible { outline: 3px solid var(--sv-azul); outline-offset: -3px; border-radius: 18px; }

/* "+" que gira a "×" al abrir */
.fq-mas {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sv-azul) 10%, transparent);
	color: var(--sv-azul);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	transition: transform .35s, background .35s, color .35s;
}

.fq-item summary:hover .fq-mas { background: var(--sv-azul); color: #fff; }
.fq-item[open] .fq-mas { background: var(--sv-naranjo); color: #fff; transform: rotate(45deg); }

.fq-respuesta { padding: 0 24px 22px; }
.fq-respuesta p { margin: 0; color: var(--sv-texto) !important; font-size: 16px; line-height: 1.65; }
.fq-item[open] .fq-respuesta { animation: fq-abrir .35s ease; }

@keyframes fq-abrir {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fq-item { transition: none; }
	.fq-item[open] .fq-respuesta { animation: none; }
}

@media (max-width: 900px) {
	.fq-contenedor { grid-template-columns: 1fr; gap: 36px; }
	.fq .sv-cabecera { position: static; text-align: center; }
}

@media (max-width: 640px) {
	.fq { padding: 70px 16px 80px; }
	.fq-item summary { padding: 18px 18px; font-size: 16px; }
	.fq-respuesta { padding: 0 18px 20px; }
}

/* =========================================================
   Pie de página: marca, enlaces, contacto y franja azul final
   ========================================================= */
.pie {
	border-top: 1px solid var(--sv-borde);
	background: #fff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pie *, .pie *::before, .pie *::after { box-sizing: border-box; }

.pie-contenedor {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
	gap: 40px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 20px 48px;
}

.pie-marca img { display: block; width: auto; height: 64px; margin-bottom: 16px; }
.pie-marca p { max-width: 300px; margin: 0; color: var(--sv-texto) !important; font-size: 15px; line-height: 1.6; }

.pie h3 {
	margin: 0 0 16px;
	color: var(--sv-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
}

.pie-col > a {
	display: block;
	padding: 5px 0;
	color: var(--sv-texto);
	font-size: 15px;
	text-decoration: none;
	transition: color .2s;
}

.pie-col > a:hover,
.pie-col > a:focus { color: var(--sv-naranjo); }

.pie-contacto { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.pie-contacto li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--sv-texto);
	font-size: 15px;
	line-height: 1.45;
}

.pie-contacto svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; fill: var(--sv-naranjo); }
.pie-contacto a { color: var(--sv-oscuro); font-weight: 600; text-decoration: none; transition: color .2s; }
.pie-contacto a:hover,
.pie-contacto a:focus { color: var(--sv-naranjo); }

.pie-final {
	padding: 18px 20px;
	background: var(--sv-azul);
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	text-align: center;
}

@media (max-width: 900px) {
	.pie-contenedor { grid-template-columns: 1fr 1fr; }
}

/* Espacio para que los botones flotantes (WhatsApp y correo) no tapen el texto final */
@media (max-width: 767px) {
	.pie-final { padding-bottom: 124px; }
}

@media (max-width: 560px) {
	.pie-contenedor { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px 36px; }
}

/* =========================================================
   Celular: secciones largas más compactas
   ========================================================= */
@media (max-width: 640px) {
	/* Cómo cotizar: cada paso en una tarjeta baja, con el ícono al lado del texto */
	.pp-pasos { gap: 10px; }
	.pp-pasos > li.pv-tarjeta {
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 14px;
		align-items: start;
		padding: 16px 16px 16px;
		border-radius: 16px;
	}
	.pp-pasos > li.pv-tarjeta:hover { transform: none; }
	.pp-pasos .pv-icono { grid-row: 1 / 4; width: 44px; height: 44px; margin: 0; border-radius: 13px; }
	.pp-pasos .pv-icono svg { width: 24px; height: 24px; }
	.pp-pasos .pv-sub { grid-column: 2; margin: 0; font-size: 11px; }
	.pp-pasos li h3 { grid-column: 2; margin: 0 0 6px; font-size: 20px; }
	.pp-pasos li p { grid-column: 2; font-size: 14px; line-height: 1.55; }
	.pp-numero { top: 6px; right: 14px; font-size: 44px; }
	.pp-accion { margin-top: 26px; }

	/* Misión, visión, valores y principios: filas chicas que se abren al presionar */
	.pv-grilla { gap: 10px; }
	.pv-grilla .pv-tarjeta {
		display: grid;
		grid-template-columns: 44px 1fr 28px;
		column-gap: 14px;
		align-items: center;
		padding: 14px 16px;
		border-radius: 16px;
		cursor: pointer;
	}
	.pv-grilla .pv-tarjeta:hover { transform: none; }
	.pv-grilla .pv-icono { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 13px; }
	.pv-grilla .pv-icono svg { width: 24px; height: 24px; }
	.pv-grilla .pv-sub { grid-column: 2; margin: 0; font-size: 11px; }
	.pv-grilla .pv-tarjeta h3 { grid-column: 2; margin: 0; font-size: 21px; }
	.pv-grilla .pv-tarjeta::after {
		content: "+";
		grid-column: 3;
		grid-row: 1 / 3;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: color-mix(in srgb, var(--pv-acento) 10%, transparent);
		color: var(--pv-acento);
		font-size: 20px;
		line-height: 1;
		transition: transform .35s;
	}
	.pv-grilla .pv-tarjeta.abierta::after { transform: rotate(45deg); }
	.pv-grilla .pv-tarjeta > p,
	.pv-grilla .pv-tarjeta > .pv-lista { display: none; grid-column: 1 / -1; margin-top: 14px; }
	.pv-grilla .pv-tarjeta.abierta > p { display: block; font-size: 15px; }
	.pv-grilla .pv-tarjeta.abierta > .pv-lista { display: grid; gap: 14px; }
}