/* ==========================================================================
   Landing 30 años — template-landing-30-anos.php
   Figma: "Landing - 30 años de Senior Suites", página Landing-v02 (1860 px).

   Todo va bajo .l30 para no chocar con css/styles.css (que carga en todo el sitio).
   --u equivale a 1 px de Figma: en escritorio la landing escala en proporción al
   ancho de la ventana (tope 1860 px). Bajo 1025 px el diseño se apila.
   ========================================================================== */

@font-face {
	font-family: "PP Neue Montreal";
	src: url("../fonts/landing-campana/ppneuemontreal-book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Neue Montreal";
	src: url("../fonts/landing-campana/ppneuemontreal-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "PP Neue Montreal";
	src: url("../fonts/landing-campana/ppneuemontreal-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Benton Modern Display";
	src: url("../fonts/landing-campana/bentonmoderndisplay-semibolditalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

body.l30-body {
	background: #edeee3;
}

.l30 {
	--u: calc(min(100vw, 1860px) / 1860);
	--verde: #044539;
	--verde-medio: #066e5b;
	--menta: #94e8b4;
	--morado: #5b377e;
	--crema: #edeee3;
	--texto: #333;
	--gris: #666;
	--gris-claro: #999;
	--radio: max(20px, calc(30 * var(--u)));
	--pp: "PP Neue Montreal", "Gotham", sans-serif;
	--benton: "Benton Modern Display", Georgia, serif;
	--roboto: "Roboto", "Gotham", sans-serif;

	position: relative;
	overflow-x: hidden;
	overflow-x: clip;
	background: var(--crema);
	color: var(--texto);
	font-family: var(--roboto);
	-webkit-font-smoothing: antialiased;
}

/* Resets con :where() (especificidad 0 + elemento): neutralizan css/styles.css
   sin ganarle a las clases de los componentes. */
:where(.l30) *,
:where(.l30) *::before,
:where(.l30) *::after {
	box-sizing: border-box;
}

:where(.l30) :is(h1, h2, h3, p, ul, ol, li) {
	margin: 0;
	padding: 0;
}

:where(.l30) :is(ul, ol) {
	list-style: none;
}

:where(.l30) img {
	max-width: 100%;
	height: auto;
}

:where(.l30) a {
	text-decoration: none;
}

:where(.l30) button {
	font: inherit;
}

.l30-wrap {
	width: calc(1530 * var(--u));
	margin-inline: auto;
}

/* Con el header del sitio (fijo): la landing empieza bajo él. El JS ajusta el alto real. */
.l30--con-sitio {
	padding-top: 57px;
}

/* Paneles con borde redondeado separados 10 px del borde de la ventana */
.l30-panel,
.l30-hero__panel,
.l30-residencias__panel,
.l30-footer__panel {
	position: relative;
	z-index: 1;
	margin-inline: 10px;
	border-radius: var(--radio);
	overflow: hidden;
}

.l30-panel--verde {
	background: var(--verde);
	color: #fff;
}

/* Curvas decorativas (vectores de Figma al 50 % de opacidad) */
.l30-deco {
	position: absolute;
	z-index: 0;
	max-width: none !important;
	height: auto;
	pointer-events: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

.l30-titulo {
	font-family: var(--pp);
	font-size: max(30px, calc(48 * var(--u)));
	font-weight: 500;
	line-height: 1.17;
	letter-spacing: 0;
	color: #000;
}

.l30-titulo em {
	font-family: var(--benton);
	font-size: max(36px, calc(62 * var(--u)));
	font-weight: 600;
	font-style: italic;
	line-height: 0.97;
	color: var(--morado);
}

.l30-panel--verde .l30-titulo {
	color: #fff;
}

.l30-panel--verde .l30-titulo em {
	color: var(--menta);
}

.l30-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 50px;
	background: var(--morado);
	color: #fff;
	font-family: var(--roboto);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
}

.l30-tag img {
	width: 7px;
	height: 7px;
}

.l30-tag--menta {
	padding-block: 6px;
	background: var(--menta);
	color: var(--verde);
}

.l30-texto {
	font-family: var(--roboto);
	font-size: max(16px, calc(20 * var(--u)));
	line-height: 1.17;
	color: var(--texto);
}

.l30-texto p + p {
	margin-top: 1.17em;
}

/* Botón píldora con círculo blanco y flecha (Bottom-Primary / Nav / Secundary) */
.l30-boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 20px 5px 5px;
	border: 2px solid var(--menta);
	border-radius: 60px;
	background: var(--menta);
	color: var(--verde);
	font-family: var(--roboto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.l30-boton img {
	width: 40px;
	height: 40px;
	flex: none;
	transition: transform 0.3s ease;
}

.l30-boton:hover img,
.l30-boton:focus-visible img {
	transform: translateX(3px);
}

.l30-boton--menta:hover,
.l30-boton--menta:focus-visible {
	border-color: #b6f1cc;
	background: #b6f1cc;
	color: var(--verde);
}

.l30-boton--oscuro {
	border-color: var(--verde);
	background: var(--verde);
	color: #fff;
	font-family: var(--pp);
	font-size: 13px;
	font-weight: 500;
}

.l30-boton--oscuro:hover,
.l30-boton--oscuro:focus-visible {
	border-color: var(--verde-medio);
	background: var(--verde-medio);
	color: #fff;
}

.l30-boton--borde {
	padding-right: 12px;
	background: var(--verde);
	color: #fff;
}

.l30-boton--borde:hover,
.l30-boton--borde:focus-visible {
	background: var(--verde-medio);
	color: #fff;
}

/* Botón "Ver video" (Bottom-Video) */
.l30-boton-video {
	display: inline-flex;
	align-items: center;
	gap: 19px;
	padding: 10px 19px 10px 15px;
	border: 2px solid var(--menta);
	border-radius: 50px;
	background: var(--verde);
	color: #fff;
	font-family: var(--roboto);
	font-size: 14px;
	font-weight: 700;
	line-height: 36px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.l30-boton-video img {
	width: 10px;
	height: 12px;
	transition: transform 0.3s ease;
}

.l30-boton-video:hover,
.l30-boton-video:focus-visible {
	background: var(--verde-medio);
}

.l30-boton-video:hover img,
.l30-boton-video:focus-visible img {
	transform: translateX(3px);
}

/* Flechas de carrusel: las imágenes de Figma apuntan a la izquierda (o arriba) */
.l30-flecha {
	position: relative;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.l30-flecha img {
	display: block;
	width: 50px;
	height: 50px;
}

.l30-flecha--next img {
	transform: scaleX(-1);
}

.l30-flecha--abajo img {
	transform: scaleY(-1);
}

.l30-flecha__off {
	display: none !important;
}

.l30-flecha:disabled,
.l30-flecha.swiper-button-disabled {
	cursor: default;
}

.l30-flecha:disabled .l30-flecha__on,
.l30-flecha.swiper-button-disabled .l30-flecha__on {
	display: none;
}

.l30-flecha:disabled .l30-flecha__off,
.l30-flecha.swiper-button-disabled .l30-flecha__off {
	display: block !important;
}

.l30-flecha:not(:disabled):not(.swiper-button-disabled):hover .l30-flecha__on {
	filter: brightness(1.06) saturate(1.1);
}

.l30-flecha.swiper-button-lock {
	display: none;
}

/* Imagen que llena su marco */
.l30-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radio);
	background: #c9cbbd;
}

.l30-media > img,
.l30-media > .l30-media__loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l30-media[data-l30-video] {
	cursor: pointer;
}

.l30-media[data-l30-video] > img {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.l30-media[data-l30-video]:hover > img {
	transform: scale(1.03);
}

/* Logo con frase (header y footer) */
.l30-logo {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	color: #fff;
}

.l30-logo img {
	width: max(140px, calc(181 * var(--u)));
	height: auto;
}

.l30-logo__frase {
	font-family: var(--pp);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.l30-logo__frase em {
	font-family: var(--benton);
	font-size: 15px;
	font-weight: 600;
}

/* Sello circular "30 años" */
.l30-sello {
	position: relative;
	width: max(170px, calc(300 * var(--u)));
	aspect-ratio: 1;
	flex: none;
}

.l30-sello img {
	position: absolute;
	max-width: none;
}

.l30-sello__fondo,
.l30-sello__anillo {
	inset: 3.333%;
	width: 93.333%;
	height: 93.333%;
}

.l30-sello__anillo {
	animation: l30-girar 40s linear infinite;
}

.l30-sello__logo {
	top: 31.667%;
	left: 24.184%;
	width: 51.632%;
	height: auto;
}

@keyframes l30-girar {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------------------
   Hero + header propio
   -------------------------------------------------------------------------- */

.l30-hero {
	position: relative;
	z-index: 2;
	padding-top: 10px;
}

.l30-hero__panel {
	height: max(640px, calc(840 * var(--u)));
	background: #111;
	color: #fff;
}

.l30-hero__media {
	position: absolute;
	inset: 0;
}

.l30-hero__media picture {
	display: contents;
}

.l30-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l30-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 0, 0, 0) 56.19%, rgba(0, 0, 0, 0.6) 100%),
		linear-gradient(270deg, rgba(0, 0, 0, 0) 49.194%, rgba(0, 0, 0, 0.6) 76.989%);
}

.l30-hero__linea {
	position: absolute;
	top: calc(50% + 69.5 * var(--u));
	left: 45.4%;
	width: 63.04%;
	max-width: none !important;
	transform: translateY(-50%);
	pointer-events: none;
}

.l30-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
}

.l30-header__barra {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: calc(30 * var(--u));
}

.l30-header__nav {
	display: flex;
	align-items: center;
	height: calc(62 * var(--u));
	margin-top: calc(-11 * var(--u));
}

.l30-header__nav ul {
	display: flex;
	gap: calc(45 * var(--u));
}

.l30-header__nav a {
	color: #fff;
	font-family: var(--roboto);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.65px;
	line-height: 1.15;
	text-transform: uppercase;
	text-decoration: underline transparent 1px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.25s ease, color 0.25s ease;
}

.l30-header__nav a:hover,
.l30-header__nav a:focus-visible {
	color: var(--menta);
	text-decoration-color: currentColor;
}

.l30-header__separador {
	display: block;
	width: 22px;
	height: 1px;
	margin-inline: calc(42 * var(--u)) calc(29 * var(--u));
	transform: rotate(90deg);
}

.l30-header__web {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.l30-header__web img {
	width: 24px;
	height: 24px;
}

.l30-header__toggle {
	display: none;
}

.l30-hero__contenido {
	position: absolute;
	inset: calc(271 * var(--u)) 0 auto;
	z-index: 2;
}

.l30-hero__titulo {
	width: calc(523 * var(--u));
	min-width: 380px;
	font-family: var(--pp);
	font-size: max(46px, calc(72 * var(--u)));
	font-weight: 500;
	line-height: max(48px, calc(70 * var(--u)));
	color: #fff;
}

.l30-hero__titulo > * {
	line-height: inherit;
}

.l30-hero__grande {
	display: block;
	font-size: max(76px, calc(114 * var(--u)));
}

.l30-hero__medio {
	font-size: max(46px, calc(72 * var(--u)));
}

.l30-hero__titulo em {
	font-family: var(--benton);
	font-size: max(52px, calc(82 * var(--u)));
	font-weight: 600;
	font-style: italic;
	color: var(--menta);
}

.l30-hero__contenido .l30-boton {
	margin-top: calc(60 * var(--u));
}

/* --------------------------------------------------------------------------
   Video de campaña
   -------------------------------------------------------------------------- */

.l30-campana {
	position: relative;
	padding-block: calc(100 * var(--u));
}

.l30-deco--campana-1,
.l30-deco--campana-2,
.l30-deco--historia,
.l30-deco--contacto {
	width: calc(1295.1 * var(--u));
}

.l30-deco--campana-1 {
	top: calc(-230 * var(--u));
	left: calc(-136 * var(--u));
}

.l30-deco--campana-2 {
	top: calc(-1000 * var(--u));
	left: calc(997 * var(--u));
}

.l30-campana__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: calc(750 * var(--u)) 1fr;
	column-gap: calc(78 * var(--u));
	align-items: center;
}

.l30-campana__media {
	aspect-ratio: 750 / 540;
}

.l30-campana__sello {
	position: absolute;
	left: calc(31 * var(--u));
	bottom: calc(19 * var(--u));
	z-index: 1;
	display: flex;
	flex-direction: column;
	color: #fff;
	line-height: max(26px, calc(41 * var(--u)));
	pointer-events: none;
}

.l30-campana__sello em {
	font-family: var(--benton);
	font-size: max(40px, calc(70 * var(--u)));
	font-weight: 600;
}

.l30-campana__sello span {
	font-family: var(--pp);
	font-size: max(22px, calc(36 * var(--u)));
	font-weight: 500;
}

.l30-campana__boton {
	position: absolute;
	right: calc(20 * var(--u));
	bottom: calc(31 * var(--u));
	z-index: 1;
}

.l30-campana__info .l30-titulo {
	margin-top: calc(20 * var(--u));
	line-height: 1.125;
}

/* --------------------------------------------------------------------------
   Equipo
   -------------------------------------------------------------------------- */

.l30-equipo .l30-panel {
	padding-block: calc(80 * var(--u));
}

.l30-deco--equipo {
	top: calc(-124 * var(--u));
	left: calc(-283 * var(--u));
	width: calc(1254.5 * var(--u));
}

.l30-equipo .l30-wrap {
	position: relative;
	z-index: 1;
}

.l30-equipo__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.l30-equipo__cabecera .l30-tag {
	font-family: var(--pp);
}

.l30-equipo__cabecera .l30-titulo {
	max-width: calc(1260 * var(--u));
	margin-top: calc(20 * var(--u));
}

.l30-equipo__carrusel {
	position: relative;
	margin-top: calc(47 * var(--u));
}

.l30-equipo__swiper {
	overflow: hidden;
}

.l30-equipo__tarjeta {
	width: calc(360 * var(--u));
	min-width: 260px;
	min-height: calc(570 * var(--u));
	height: auto;
	padding: calc(10 * var(--u));
	border-radius: var(--radio);
	background: #fff;
}

.l30-equipo__foto {
	aspect-ratio: 1;
}

.l30-equipo__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 53.5%, rgba(0, 0, 0, 0.5) 100%);
	pointer-events: none;
}

.l30-equipo__foto .l30-boton-video {
	position: absolute;
	left: calc(20 * var(--u));
	bottom: calc(20 * var(--u));
	z-index: 1;
}

.l30-equipo__info {
	padding: calc(20 * var(--u)) 0 calc(20 * var(--u)) calc(20 * var(--u));
}

.l30-equipo__info h3 {
	font-family: var(--benton);
	font-size: max(22px, calc(28 * var(--u)));
	font-weight: 600;
	font-style: italic;
	line-height: 1.07;
	color: var(--morado);
}

.l30-equipo__personas {
	margin-top: calc(15 * var(--u));
}

.l30-equipo__personas li + li {
	margin-top: calc(12 * var(--u));
}

.l30-equipo__personas strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--verde);
}

.l30-equipo__personas span {
	display: block;
	font-size: 14px;
	line-height: 1.15;
	color: var(--gris);
}

.l30-equipo__personas b {
	font-weight: 700;
}

.l30-equipo__carrusel .l30-flecha {
	position: absolute;
	top: calc(257.5 * var(--u));
	z-index: 2;
}

.l30-equipo__carrusel .l30-flecha--prev {
	left: calc(-95 * var(--u));
}

.l30-equipo__carrusel .l30-flecha--next {
	right: calc(-95 * var(--u));
}

/* --------------------------------------------------------------------------
   Historia + línea de tiempo
   -------------------------------------------------------------------------- */

.l30-historia {
	position: relative;
	padding: calc(130 * var(--u)) 0 calc(100 * var(--u));
}

.l30-deco--historia {
	top: calc(-402 * var(--u));
	left: calc(710 * var(--u));
}

.l30-historia__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: calc(910 * var(--u)) calc(620 * var(--u));
}

.l30-historia__info {
	width: calc(748 * var(--u));
}

.l30-historia__info .l30-titulo {
	max-width: calc(580 * var(--u));
	margin-top: calc(10 * var(--u));
}

.l30-historia__bajada {
	max-width: calc(519 * var(--u));
	margin-top: calc(30 * var(--u));
}

.l30-linea {
	position: relative;
	margin-top: calc(65 * var(--u));
}

.l30-linea__ventana {
	position: relative;
	height: calc(492 * var(--u));
	overflow: hidden;
}

/* Desvanecido del último hito visible (Rectangle 3 de Figma) */
.l30-linea__ventana::after {
	content: "";
	position: absolute;
	left: calc(30 * var(--u));
	right: 0;
	bottom: 0;
	height: calc(119 * var(--u));
	background: linear-gradient(to bottom, rgba(237, 238, 227, 0) 0%, var(--crema) 74.545%);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.l30-linea.is-final .l30-linea__ventana::after {
	opacity: 0;
}

/* Desvanecido superior cuando la lista ya avanzó */
.l30-linea__ventana::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(30 * var(--u));
	right: 0;
	z-index: 1;
	height: calc(70 * var(--u));
	background: linear-gradient(to top, rgba(237, 238, 227, 0) 0%, var(--crema) 80%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.l30-linea.is-desplazada .l30-linea__ventana::before {
	opacity: 1;
}

.l30-linea__lista {
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.l30-linea__hito {
	display: grid;
	grid-template-columns: calc(184.5 * var(--u)) calc(486 * var(--u));
	padding: calc(24 * var(--u)) 0 calc(62 * var(--u)) calc(77.5 * var(--u));
}

.l30-linea__anio {
	font-family: var(--benton);
	font-size: max(34px, calc(48 * var(--u)));
	font-weight: 600;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: pre-wrap;
	color: var(--morado);
}

.l30-linea__texto {
	font-size: max(16px, calc(20 * var(--u)));
	line-height: 1.17;
	color: var(--texto);
}

.l30-linea__guia,
.l30-linea__marca {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	pointer-events: none;
}

.l30-linea__guia {
	height: calc(492 * var(--u));
	background: #ddd;
}

.l30-linea__marca {
	height: calc(112 * var(--u));
	background: var(--verde);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.l30-linea__flechas {
	display: flex;
	gap: calc(10 * var(--u));
	margin-top: calc(28 * var(--u));
}

.l30-historia__visual {
	position: relative;
	padding-top: calc(90 * var(--u));
}

.l30-historia__media {
	aspect-ratio: 620 / 780;
}

/* Encuadre del video como en Figma (243:257): corrido a la izquierda, no centrado */
.l30-historia__media > .l30-media__loop {
	object-position: 36% 50%;
}

.l30-historia__visual .l30-sello {
	position: absolute;
	top: 0;
	left: calc(-202 * var(--u));
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Franja de texto grande
   -------------------------------------------------------------------------- */

.l30-franja {
	position: relative;
	z-index: 1;
	margin: calc(9 * var(--u)) 0 calc(41 * var(--u));
	font-family: var(--pp);
	font-size: calc(160 * var(--u));
	font-weight: 500;
	line-height: calc(100 * var(--u));
	text-align: center;
	white-space: nowrap;
	color: rgba(4, 69, 57, 0.06);
	user-select: none;
}

/* --------------------------------------------------------------------------
   Autobiografías
   -------------------------------------------------------------------------- */

.l30-autobiografias {
	position: relative;
	z-index: 1;
	padding: calc(100 * var(--u)) 0 calc(110 * var(--u));
}

.l30-autobiografias__grid {
	display: grid;
	grid-template-columns: calc(488 * var(--u)) calc(1010 * var(--u));
	column-gap: calc(32 * var(--u));
}

.l30-autobiografias__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.l30-autobiografias__info .l30-titulo {
	margin-top: calc(20 * var(--u));
}

.l30-autobiografias__texto {
	margin-top: calc(50 * var(--u));
}

.l30-autobiografias__flechas {
	display: flex;
	gap: calc(20 * var(--u));
	margin-top: auto;
	padding-top: 30px;
}

.l30-autobiografias__swiper {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radio);
}

.l30-autobiografia {
	display: grid;
	grid-template-columns: calc(354.375 * var(--u)) 1fr;
	min-height: calc(650 * var(--u));
	padding: calc(10 * var(--u));
	border-radius: var(--radio);
	background: #fff;
}

.l30-autobiografia__video {
	aspect-ratio: 354.375 / 630;
}

.l30-autobiografia__info {
	display: flex;
	flex-direction: column;
	padding: calc(80 * var(--u)) calc(31 * var(--u)) calc(15 * var(--u)) calc(48 * var(--u));
}

.l30-autobiografia__cita {
	font-family: var(--benton);
	font-size: max(32px, calc(50 * var(--u)));
	font-weight: 600;
	font-style: italic;
	line-height: 1.1;
	color: var(--morado);
}

.l30-autobiografia__texto {
	margin-top: calc(30 * var(--u));
	font-size: max(17px, calc(24 * var(--u)));
	line-height: 1.17;
	color: #000;
}

.l30-autobiografia__texto strong,
.l30-autobiografia__texto b {
	font-weight: 700;
}

.l30-autobiografia__texto p + p {
	margin-top: 0.8em;
}

.l30-autobiografia__pie {
	margin-top: auto;
	padding-top: 30px;
}

.l30-autobiografia__nombre {
	font-size: max(19px, calc(24 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	color: var(--verde);
}

.l30-autobiografia__rol {
	margin-top: 1px;
	font-size: 16px;
	line-height: 1.2;
	color: var(--texto);
}

.l30-autobiografia__rol b {
	font-weight: 700;
	color: var(--gris);
}

.l30-autobiografia__pie .l30-boton-video {
	margin-top: calc(30 * var(--u));
}

/* --------------------------------------------------------------------------
   Servicios (tarjetas; carrusel cuando no caben las 3)
   -------------------------------------------------------------------------- */

.l30-servicios .l30-panel {
	padding: calc(100 * var(--u)) 0;
}

.l30-deco--servicios {
	top: calc(-200 * var(--u));
	left: calc(-310 * var(--u));
	width: calc(1295.1 * var(--u));
}

.l30-servicios__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"info flechas"
		"tarjetas tarjetas";
	align-items: end;
	column-gap: 30px;
	row-gap: calc(60 * var(--u));
}

.l30-servicios__info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: calc(1200 * var(--u));
}

.l30-servicios__info .l30-titulo {
	margin-top: calc(20 * var(--u));
}

.l30-servicios__flechas {
	grid-area: flechas;
	display: flex;
	gap: 10px;
}

.l30-servicios__swiper {
	grid-area: tarjetas;
	width: 100%;
}

/* Tarjetas del mismo alto: la caja blanca crece hasta el pie de la más alta */
.l30-servicios__swiper .swiper-slide {
	display: flex;
	flex-direction: column;
	height: auto;
}

.l30-servicio__media {
	aspect-ratio: 490 / 380;
}

.l30-servicios__tarjeta {
	position: relative;
	z-index: 1;
	flex: 1;
	margin: calc(-70 * var(--u)) calc(20 * var(--u)) 0;
	padding: calc(32 * var(--u)) calc(35 * var(--u)) calc(40 * var(--u)) calc(33 * var(--u));
	border-radius: var(--radio);
	background: #fff;
}

.l30-servicios__tarjeta h3 {
	font-family: var(--benton);
	font-size: max(26px, calc(36 * var(--u)));
	font-weight: 600;
	font-style: italic;
	line-height: 1.08;
	color: var(--verde);
}

.l30-servicios__tarjeta p {
	margin-top: calc(10 * var(--u));
	font-size: max(16px, calc(20 * var(--u)));
	line-height: 1.17;
	color: var(--texto);
}

/* --------------------------------------------------------------------------
   Residencias (mapa)
   -------------------------------------------------------------------------- */

.l30-residencias {
	position: relative;
	z-index: 1;
	padding-top: calc(100 * var(--u));
}

.l30-residencias__panel {
	height: max(760px, calc(890 * var(--u)));
	background: #dfe3dc;
}

.l30-residencias__mapa {
	position: absolute;
	inset: 0;
	z-index: 0;
	font-family: var(--roboto);
}

.l30-residencias__mapa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 250;
	background: rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.l30-pin {
	filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.4));
	transition: transform 0.3s ease;
	transform-origin: 50% 100%;
}

.l30-pin.is-activo {
	transform: scale(1.25);
}

.l30-residencias__bloque {
	position: absolute;
	top: calc(30 * var(--u));
	right: calc(155 * var(--u));
	bottom: calc(30 * var(--u));
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: max(440px, calc(500 * var(--u)));
	padding: calc(30 * var(--u));
	border-radius: var(--radio);
	background: #fff;
}

.l30-residencias__bloque .l30-tag {
	align-self: flex-start;
}

.l30-residencias__bloque .l30-titulo {
	margin-top: calc(10 * var(--u));
}

.l30-residencias__bajada {
	max-width: 420px;
	margin-top: calc(20 * var(--u));
	font-size: max(16px, calc(18 * var(--u)));
	line-height: 1.17;
	color: var(--texto);
}

.l30-select {
	position: relative;
	margin-top: calc(14 * var(--u));
}

.l30-select select {
	width: 100%;
	height: 60px;
	padding: 0 50px 0 20px;
	border: 0;
	border-radius: 50px;
	background: #eee;
	font-family: var(--roboto);
	font-size: max(16px, calc(18 * var(--u)));
	font-weight: 500;
	color: var(--gris-claro);
	appearance: none;
	cursor: pointer;
}

.l30-select select:focus-visible {
	outline: 2px solid var(--verde);
	outline-offset: 2px;
}

.l30-select select.tiene-valor {
	color: var(--texto);
}

.l30-select img {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 15px;
	height: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}

.l30-residencias__divisor {
	display: block;
	width: 100%;
	margin-top: calc(35 * var(--u));
}

.l30-residencias__swiper {
	width: 100%;
	margin-top: calc(32 * var(--u));
	overflow: hidden;
	border-radius: var(--radio);
}

.l30-residencia {
	aspect-ratio: 440 / 320;
}

.l30-residencia::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 33.437%, rgba(0, 0, 0, 0.8) 100%),
		rgba(0, 0, 0, 0.1);
	pointer-events: none;
}

.l30-residencia__info {
	position: absolute;
	inset: auto max(16px, calc(18 * var(--u))) max(18px, calc(21 * var(--u))) max(18px, calc(21 * var(--u)));
	z-index: 1;
	color: #fff;
}

.l30-residencia__marca {
	font-size: 14px;
	font-weight: 700;
}

.l30-residencia__nombre {
	margin-top: 3px !important;
	font-family: var(--roboto);
	font-size: max(20px, calc(24 * var(--u)));
	font-weight: 700;
	line-height: 1.17;
	color: var(--menta);
}

.l30-residencia__datos {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}

.l30-residencia__datos li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.15;
}

.l30-residencia__datos li + li {
	margin-top: 13px;
}

.l30-residencia__datos li img {
	width: 18px;
	height: auto;
	flex: none;
}

.l30-residencia__datos a {
	color: #fff;
}

.l30-residencia__link {
	flex: none;
	padding: 7px 10px;
	border: 2px solid #fff;
	border-radius: 50px;
	font-family: var(--pp);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.l30-residencia__link:hover,
.l30-residencia__link:focus-visible {
	background: #fff;
	color: var(--verde) !important;
}

.l30-residencias__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 20px;
}

/* Botón en una línea; si el texto no cabe, baja completo bajo las flechas */
.l30-residencias__pie .l30-boton {
	white-space: nowrap;
}

.l30-residencias__flechas {
	display: flex;
	gap: 8px;
}

/* --------------------------------------------------------------------------
   Contacto (Contact Form 7)
   -------------------------------------------------------------------------- */

.l30-contacto {
	position: relative;
	padding: calc(100 * var(--u)) 0 calc(110 * var(--u));
}

.l30-deco--contacto {
	top: calc(-561 * var(--u));
	left: calc(-525 * var(--u));
}

.l30-contacto__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: calc(30 * var(--u));
}

.l30-contacto__imagen {
	min-height: calc(890 * var(--u));
}

.l30-contacto__form {
	padding: calc(40 * var(--u)) calc(49 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
	border-radius: var(--radio);
	background: #fff;
}

.l30-contacto__bajada {
	max-width: 622px;
	margin-top: 6px;
	font-size: max(16px, calc(18 * var(--u)));
	line-height: 1.17;
	color: var(--texto);
}

.l30-contacto .wpcf7 {
	margin-top: calc(33 * var(--u));
}

.l30-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(31 * var(--u)) 30px;
	max-width: 630px;
}

.l30-form__campo--ancho {
	grid-column: 1 / -1;
}

.l30-form__campo label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--roboto);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
}

.l30-contacto .wpcf7-form-control-wrap {
	display: block;
}

.l30-contacto input[type="text"],
.l30-contacto input[type="email"],
.l30-contacto input[type="tel"],
.l30-contacto select,
.l30-contacto textarea {
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #ccc;
	border-radius: 60px;
	background: #fff;
	box-shadow: none;
	font-family: var(--roboto);
	font-size: max(16px, calc(18 * var(--u)));
	color: var(--texto);
	transition: border-color 0.2s ease;
}

.l30-contacto select {
	padding-right: 44px;
	background: #fff url("../images/landing-30/chevron-form.svg") no-repeat right 13.5px center / 14px 8px;
	appearance: none;
	cursor: pointer;
}

.l30-contacto textarea {
	height: 200px;
	padding: 18px 20px;
	border-radius: 30px;
	resize: vertical;
}

.l30-contacto select:has(option[value=""]:checked) {
	color: var(--gris-claro);
}

.l30-contacto input::placeholder,
.l30-contacto textarea::placeholder {
	color: var(--gris-claro);
	opacity: 1;
}

.l30-contacto input:focus,
.l30-contacto select:focus,
.l30-contacto textarea:focus {
	border-color: var(--verde);
	outline: none;
}

.l30-form__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 630px;
	margin-top: calc(30 * var(--u));
}

.l30-contacto .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.l30-contacto .wpcf7-acceptance label {
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--pp);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--gris);
	cursor: pointer;
}

.l30-contacto .wpcf7-acceptance input {
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--gris-claro);
	border-radius: 4px;
	accent-color: var(--verde);
}

.l30-contacto .wpcf7-acceptance a {
	color: var(--verde);
	text-decoration: underline;
}

.l30-contacto input[type="submit"] {
	flex: none;
	width: auto;
	height: 54px;
	padding: 0 20px 0 55px;
	border: 2px solid var(--verde);
	border-radius: 60px;
	background: var(--verde) url("../images/landing-30/flecha-boton-oscuro.svg") no-repeat 5px center / 40px 40px;
	font-family: var(--pp);
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.l30-contacto input[type="submit"]:hover,
.l30-contacto input[type="submit"]:focus-visible {
	border-color: var(--verde-medio);
	background-color: var(--verde-medio);
}

.l30-contacto .wpcf7-spinner {
	position: absolute;
	margin: 0;
}

.l30-contacto .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
}

.l30-contacto .wpcf7-response-output {
	max-width: 630px;
	margin: 20px 0 0 !important;
	border-radius: 16px;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.l30-footer {
	position: relative;
	z-index: 1;
	padding-bottom: 10px;
}

.l30-footer__panel {
	min-height: calc(660 * var(--u));
	border-radius: max(28px, calc(50 * var(--u)));
	background: var(--verde);
	color: #fff;
}

.l30-footer__media {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(1300 * var(--u));
	height: calc(530 * var(--u));
	overflow: hidden;
	border-top-right-radius: max(28px, calc(50 * var(--u)));
}

.l30-footer__media img,
.l30-footer__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video en loop: el velo claro de Figma (243:57) equivale a 0,67 × video + 75.
   Va como filtro solo en el video porque la imagen fija ya lo trae incluido. */
.l30-footer__media .l30-media__loop {
	position: absolute;
	inset: 0;
	filter: contrast(0.533) brightness(1.258);
}

/* En escritorio, el encuadre y los fundidos se midieron contra el relleno de Figma:
   el video ocupa 1118 de los 1300 px y sube 59 px; el resto es el verde del panel. */
@media (min-width: 1025px) {
	.l30-footer__media .l30-media__loop {
		inset: calc(-59 / 530 * 100%) auto auto 0;
		width: calc(1118 / 1300 * 100%);
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.l30-footer__media:has(.l30-media__loop)::after {
		background:
			linear-gradient(to top, var(--verde) 0%, rgba(4, 69, 57, 0) 60%),
			linear-gradient(90deg, var(--verde) 0%, rgba(4, 69, 57, 0) 28%, rgba(4, 69, 57, 0) 62%, var(--verde) 86%);
	}
}

/* Fundido con el verde, como en el diseño */
.l30-footer__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--verde) 0%, rgba(4, 69, 57, 0) 45%),
		linear-gradient(90deg, var(--verde) 0%, rgba(4, 69, 57, 0) 30%, rgba(4, 69, 57, 0) 62%, var(--verde) 92%);
}

.l30-deco--footer {
	top: calc(-1171 * var(--u));
	left: calc(-500 * var(--u));
	width: calc(1295.1 * var(--u));
}

.l30-footer__cierre {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: calc(120 * var(--u));
	min-height: calc(530 * var(--u));
}

.l30-footer__info {
	max-width: calc(620 * var(--u));
	padding-bottom: 40px;
}

.l30-footer__titulo {
	display: flex;
	flex-direction: column;
	font-family: var(--benton);
	font-weight: 600;
	font-style: italic;
}

.l30-footer__titulo span {
	font-size: max(60px, calc(100 * var(--u)));
	line-height: 0.82;
	color: #fff;
}

.l30-footer__titulo em {
	font-size: max(38px, calc(62 * var(--u)));
	line-height: 0.97;
	color: var(--menta);
}

.l30-footer__texto {
	margin-top: calc(30 * var(--u));
	font-size: max(17px, calc(20 * var(--u)));
	line-height: 1.3;
}

.l30-footer__info .l30-boton {
	margin-top: calc(41 * var(--u));
}

.l30-footer__cierre .l30-sello {
	margin-top: calc(-15 * var(--u));
}

.l30-footer__barra {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: calc(30 * var(--u)) 0 calc(27 * var(--u));
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.l30-footer__marca {
	display: flex;
	align-items: center;
	gap: calc(32 * var(--u));
}

.l30-footer__marca .l30-logo {
	padding-right: calc(20 * var(--u));
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.l30-footer__redes {
	display: flex;
	gap: 15px;
}

.l30-footer__redes a {
	display: block;
	border-radius: 16px;
	transition: background-color 0.25s ease;
}

.l30-footer__redes a:hover,
.l30-footer__redes a:focus-visible {
	background: rgba(148, 232, 180, 0.18);
}

.l30-footer__redes img {
	display: block;
	width: 50px;
	height: 50px;
}

.l30-footer__copy {
	font-size: 14px;
	line-height: 1.2;
	text-align: right;
	color: #04a789;
}

.l30-footer__copy b {
	font-weight: 500;
	color: #fff;
}

.l30-footer--solo-cierre .l30-footer__panel {
	min-height: calc(530 * var(--u));
}

/* --------------------------------------------------------------------------
   Modal de video
   -------------------------------------------------------------------------- */

.l30-modal {
	inset: 0;
	margin: auto;
	width: min(1200px, 92vw);
	max-width: none;
	max-height: 90vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.l30-modal::backdrop {
	background: rgba(4, 30, 25, 0.88);
}

.l30-modal__video iframe,
.l30-modal__video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 86vh;
	border: 0;
	border-radius: 20px;
	background: #000;
}

/* YouTube Shorts (9:16): el ancho sale del alto (80vh) para que quepan el video
   y el botón de cerrar, que va 52 px por encima. */
.l30-modal--vertical {
	width: min(480px, 92vw, calc(80vh * 9 / 16));
}

.l30-modal--vertical .l30-modal__video iframe {
	aspect-ratio: 9 / 16;
}

.l30-modal__cerrar {
	position: absolute;
	top: -52px;
	right: 0;
	width: 44px;
	height: 44px;
	border: 2px solid var(--menta);
	border-radius: 50%;
	background: var(--verde);
	font-size: 28px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Animaciones (GSAP): el JS agrega .l30--anima solo si GSAP y SplitText cargaron.
   Los títulos se ocultan hasta que SplitText los divide en líneas con máscara.
   -------------------------------------------------------------------------- */

.l30--anima .l30-titulo,
.l30--anima [data-l30-reveal] {
	visibility: hidden;
}

/* Máscaras de SplitText (títulos): más altas arriba y abajo para no cortar
   acentos ni colas; los márgenes negativos dejan cada línea donde estaba.
   --l30-holgura la fija el JS (0,3 × la letra más grande del título).
   flow-root: sin él, los márgenes de la primera y la última máscara atraviesan
   el título y lo agrandan (hasta 70 px en el hero). */
.l30-titulo,
.l30-hero__titulo {
	display: flow-root;
}

.l30-mascara {
	--l30-h: var(--l30-holgura, 0.3em);
	padding-block: var(--l30-h);
	margin-bottom: calc(var(--l30-h) * -2);
}

.l30-mascara:first-child {
	margin-top: calc(var(--l30-h) * -1);
}

.l30-mascara:last-child {
	margin-bottom: calc(var(--l30-h) * -1);
}

@media (prefers-reduced-motion: reduce) {
	.l30-sello__anillo {
		animation: none;
	}

	.l30-linea__lista,
	.l30-linea__marca {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Tablet y móvil (bajo 1025 px): el diseño se apila
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.l30 {
		--radio: 20px;
	}

	.l30-wrap {
		width: auto;
		padding-inline: 20px;
	}

	.l30-panel,
	.l30-hero__panel,
	.l30-residencias__panel,
	.l30-footer__panel {
		margin-inline: 8px;
	}

	.l30-deco {
		display: none;
	}

	/* Hero y header */
	.l30-hero {
		padding-top: 8px;
	}

	.l30-hero__panel {
		height: auto;
		min-height: min(760px, calc(100svh - 16px));
		display: flex;
		flex-direction: column;
	}

	.l30-hero__media::after {
		background:
			linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 30%);
	}

	.l30-hero__media img {
		object-position: 62% center;
	}

	.l30-hero__linea {
		display: none;
	}

	.l30-header {
		position: relative;
	}

	.l30-header__barra {
		align-items: center;
		padding-top: 20px;
	}

	.l30-logo img {
		width: 140px;
	}

	.l30-header__toggle {
		position: relative;
		z-index: 6;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 48px;
		height: 48px;
		padding: 0 12px;
		border: 2px solid var(--menta);
		border-radius: 50%;
		background: var(--verde);
		cursor: pointer;
	}

	.l30-header__toggle span {
		display: block;
		height: 2px;
		background: #fff;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	.l30-header__toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.l30-header__toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.l30-header__toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.l30-header__nav {
		position: fixed;
		inset: 0;
		z-index: 5;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 32px;
		height: auto;
		margin: 0;
		padding: 90px 32px 40px;
		background: var(--verde);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s;
	}

	.l30-header.is-abierto .l30-header__nav {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
	}

	.l30-header__nav ul {
		flex-direction: column;
		gap: 22px;
	}

	.l30-header__nav a {
		font-family: var(--pp);
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}

	.l30-header__separador {
		display: none;
	}

	.l30-header__web {
		font-size: 16px !important;
	}

	.l30-hero__contenido {
		position: relative;
		inset: auto;
		margin-top: auto;
		padding-top: 140px;
		padding-bottom: 36px;
	}

	.l30-hero__titulo {
		width: auto;
		min-width: 0;
		max-width: 520px;
		line-height: 1;
	}

	.l30-hero__grande {
		font-size: clamp(62px, 17vw, 96px);
	}

	.l30-hero__medio {
		font-size: clamp(38px, 10.4vw, 60px);
	}

	.l30-hero__titulo em {
		font-size: clamp(42px, 11.6vw, 66px);
		line-height: 1;
	}

	.l30-hero__contenido .l30-boton {
		margin-top: 28px;
	}

	/* Video de campaña */
	.l30-campana {
		padding-block: 56px;
	}

	.l30-campana__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.l30-campana__info {
		order: -1;
	}

	.l30-campana__sello {
		left: 18px;
		bottom: 16px;
	}

	.l30-campana__boton {
		right: 14px;
		bottom: 16px;
	}

	.l30-tag {
		font-size: 12px;
	}

	/* Equipo */
	.l30-equipo .l30-panel {
		padding-block: 52px 40px;
	}

	.l30-equipo__cabecera .l30-titulo {
		margin-top: 16px;
	}

	.l30-equipo__carrusel {
		margin-top: 32px;
	}

	.l30-equipo__swiper {
		overflow: visible;
	}

	.l30-equipo__tarjeta {
		width: min(320px, 82vw);
		min-height: 0;
		padding: 8px;
	}

	.l30-equipo__info {
		padding: 16px 12px 18px;
	}

	.l30-equipo__personas {
		margin-top: 12px;
	}

	.l30-equipo__carrusel .l30-flecha {
		position: static;
		margin-top: 24px;
	}

	.l30-equipo__carrusel .l30-flecha--prev {
		margin-right: 10px;
	}

	.l30-equipo__carrusel {
		text-align: center;
	}

	.l30-equipo__swiper {
		text-align: left;
	}

	/* Historia */
	.l30-historia {
		padding-block: 56px 40px;
	}

	.l30-historia__grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}

	.l30-historia__info,
	.l30-historia__info .l30-titulo,
	.l30-historia__bajada {
		width: auto;
		max-width: none;
	}

	.l30-historia__bajada {
		margin-top: 18px;
	}

	.l30-linea {
		margin-top: 28px;
	}

	.l30-linea__ventana,
	.l30-linea__guia {
		height: 440px;
	}

	.l30-linea__hito {
		grid-template-columns: 1fr;
		row-gap: 8px;
		padding: 18px 0 34px 28px;
	}

	.l30-linea__ventana::after {
		left: 20px;
		height: 90px;
	}

	.l30-linea__flechas {
		gap: 10px;
		margin-top: 20px;
	}

	.l30-historia__visual {
		padding-top: 70px;
	}

	.l30-historia__media {
		aspect-ratio: 4 / 5;
	}

	.l30-historia__visual .l30-sello {
		left: auto;
		right: -6px;
		width: 160px;
	}

	/* Franja */
	.l30-franja {
		margin: 0;
		padding-inline: 12px;
		font-size: 12vw;
		line-height: 0.92;
		white-space: normal;
	}

	/* Autobiografías */
	.l30-autobiografias {
		padding: 40px 0 56px;
	}

	/* Sin row-gap: __info usa display: contents y el gap se sumaría a los márgenes */
	.l30-autobiografias__grid {
		grid-template-columns: 1fr;
	}

	.l30-autobiografias__info .l30-titulo {
		margin-top: 16px;
	}

	.l30-autobiografias__texto {
		margin-top: 18px;
	}

	.l30-autobiografias__flechas {
		order: 3;
		padding-top: 0;
		margin-top: 20px;
	}

	.l30-autobiografias__info {
		display: contents;
	}

	/* __info usa display: contents, pero el selector sigue al DOM */
	.l30-autobiografias__info > .l30-tag {
		justify-self: start;
	}

	.l30-autobiografias__grid > .l30-autobiografias__swiper {
		order: 2;
		margin-top: 28px;
	}

	.l30-autobiografias__grid > * {
		min-width: 0;
	}

	.l30-autobiografia {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 8px;
	}

	.l30-autobiografia__video {
		aspect-ratio: 4 / 5;
	}

	.l30-autobiografia__info {
		padding: 24px 14px 18px;
	}

	.l30-autobiografia__texto {
		margin-top: 16px;
	}

	.l30-autobiografia__pie .l30-boton-video {
		margin-top: 18px;
	}

	/* Servicios */
	.l30-servicios .l30-panel {
		padding: 52px 0 40px;
	}

	.l30-servicios__grid {
		row-gap: 28px;
	}

	.l30-servicios__info {
		max-width: none;
	}

	.l30-servicios__tarjeta {
		margin: -40px 12px 0;
		padding: 22px 20px 24px;
	}

	/* Residencias */
	.l30-residencias {
		padding-top: 56px;
	}

	.l30-residencias__panel {
		height: auto;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	/* En móvil y tablet solo van las tarjetas; el mapa queda para escritorio. */
	.l30-residencias__mapa {
		display: none;
	}

	.l30-residencias__bloque {
		position: relative;
		inset: auto;
		width: auto;
		padding: 28px 16px 20px;
		border-radius: 0;
	}

	.l30-select {
		margin-top: 18px;
	}

	.l30-residencias__divisor {
		margin-top: 24px;
	}

	.l30-residencias__swiper {
		margin-top: 24px;
	}

	.l30-residencia {
		aspect-ratio: 4 / 3.4;
	}

	/* Con --u el margen quedaba en ~4 px y el texto tocaba el borde. */
	.l30-residencia__info {
		inset: auto 18px 20px 20px;
	}

	.l30-residencias__pie {
		flex-wrap: wrap;
	}

	/* Contacto */
	.l30-contacto {
		padding: 56px 0;
	}

	.l30-contacto__grid {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	.l30-contacto__imagen {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.l30-contacto__form {
		padding: 28px 20px;
	}

	.l30-contacto .wpcf7 {
		margin-top: 20px;
	}

	.l30-form__grid {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}

	.l30-form__pie {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 22px;
	}

	/* Footer */
	.l30-footer__panel {
		min-height: 0;
	}

	.l30-footer__media {
		position: relative;
		width: 100%;
		height: 260px;
		border-radius: 0;
	}

	.l30-footer__media::after {
		background: linear-gradient(to top, var(--verde) 0%, rgba(4, 69, 57, 0) 60%);
	}

	.l30-footer__cierre {
		flex-direction: column;
		gap: 28px;
		min-height: 0;
		margin-top: -110px;
		padding-top: 0;
	}

	.l30-footer__info {
		max-width: none;
		padding-bottom: 0;
	}

	.l30-footer__texto {
		margin-top: 18px;
	}

	.l30-footer__info .l30-boton {
		margin-top: 24px;
	}

	.l30-footer__cierre .l30-sello {
		width: 170px;
		margin: 0 0 24px;
	}

	.l30-footer__barra {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding: 28px 20px 24px;
	}

	.l30-footer__marca {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.l30-footer__marca .l30-logo {
		padding-right: 0;
		border-right: 0;
	}

	.l30-footer__redes {
		flex-wrap: wrap;
		gap: 10px;
	}

	.l30-footer__copy {
		text-align: left;
	}
}

@media (max-width: 699px) {
	/* La imagen vertical de móvil ya viene encuadrada. */
	.l30-hero__media--movil img {
		object-position: center;
	}

	.l30-servicios__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"info"
			"tarjetas"
			"flechas";
	}
}

@media (max-width: 480px) {
	.l30-campana__media {
		aspect-ratio: 4 / 3.6;
	}

	/* El sello sube sobre el botón: lado a lado no caben */
	.l30-campana__sello {
		bottom: 82px;
	}

	.l30-campana__boton {
		left: 18px;
		right: auto;
		font-size: 12px;
		padding-inline: 12px;
		gap: 10px;
	}

	.l30-boton-video {
		line-height: 30px;
	}
}