/**
 * Componentes de interfaz de Mazaseg.
 *
 * Reglas que gobiernan este archivo, tomadas de docs/brand/direccion-visual.md:
 *
 * 1. Un CTA dominante por vista. El coral solo aparece donde queremos que se
 *    pulse; nunca dos botones de acento compitiendo en la misma pantalla.
 * 2. Nada de bandas saturadas a pantalla completa.
 * 3. Jerarquia tipografica agresiva y espacio en blanco generoso.
 * 4. Tranquilidad, nunca urgencia.
 */

@layer components {

	/* ==================================================================
	   Botones
	   ================================================================== */

	.boton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-height: var(--touch-min);
		padding: var(--space-3) var(--space-6);
		border: 2px solid transparent;
		border-radius: var(--radius-md);
		font-family: var(--font-body);
		font-size: var(--text-body);
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color var(--transition), border-color var(--transition), color var(--transition);
	}

	/* El primario usa el 500, no el 800: el azul marino daba 11.8:1, mucho mas
	   oscuro de lo que exige la accesibilidad y visualmente pesado. El 500
	   mantiene 5.64:1 con holgura y aligera la interfaz. */
	.boton--primario {
		background: var(--color-primary-500);
		border-color: var(--color-primary-500);
		color: var(--color-white);
	}

	.boton--primario:hover {
		background: var(--color-primary-700);
		border-color: var(--color-primary-700);
		color: var(--color-white);
	}

	.boton--secundario {
		background: transparent;
		border-color: var(--color-primary-500);
		color: var(--color-primary-700);
	}

	/* Acento: uno por vista.
	 *
	 * EXCEPCION DE ACCESIBILIDAD ACEPTADA (2026-07-21).
	 * Blanco sobre accent-500 da 3.02:1, por debajo del 4.5:1 que exige AA
	 * para texto normal. Se eligio conscientemente por criterio visual: con
	 * texto blanco no existe ningun coral apreciablemente mas claro que
	 * cumpla, y el 700 se veia demasiado apagado.
	 *
	 * Alternativas descartadas, por si se reconsidera:
	 *   - accent-500 con texto tinta: 5.29:1, cumple.
	 *   - accent-500 con blanco y texto de 19px en negrita: cuenta como
	 *     "texto grande", cuyo minimo es 3:1, y pasaria por 0.02.
	 *
	 * Fijado en tests/color.test.php para que el incumplimiento sea visible
	 * en cada ejecucion y no se olvide.
	 */
	.boton--acento {
		background: var(--color-accent-500);
		border-color: var(--color-accent-500);
		color: var(--color-white);
	}

	.boton--acento:hover {
		background: var(--color-accent-700);
		border-color: var(--color-accent-700);
		color: var(--color-white);
	}

	.boton--secundario:hover {
		background: var(--color-primary-50);
		color: var(--color-primary-800);
	}

	.boton--bloque {
		display: flex;
		width: 100%;
	}

	/* Enlace, no boton: para acciones secundarias que no son un CTA de
	   conversion (ir a otra pagina, ampliar informacion). Un boton con borde
	   compite con el CTA real; un subrayado acompana sin robarle el foco. */
	.boton--enlace {
		min-height: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--color-primary-700);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}

	.boton--enlace:hover {
		background: transparent;
		color: var(--color-primary-900);
	}

	.botonera {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	/* En móvil, los botones de cualquier botonera ocupan todo el ancho: más
	   fáciles de ver y pulsar (el público es de edad alta). En tablet/escritorio
	   vuelven a fila. */
	.botonera .boton {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	@media (min-width: 48rem) {
		.botonera .boton {
			width: auto;
		}
	}

	/* ==================================================================
	   Distintivos
	   ================================================================== */

	.distintivo {
		display: inline-flex;
		align-items: center;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill);
		background: var(--color-primary-100);
		color: var(--color-primary-800);
		font-size: var(--text-small);
		font-weight: 600;
	}

	/* Los distintivos usan las variantes 800: sobre fondo tenido, las 700 se
	   quedan por debajo de AA. Verificado en tests/color.test.php. */
	.distintivo--acento {
		background: var(--color-accent-100);
		color: var(--color-accent-800);
	}

	.distintivo--exito {
		background: var(--color-success-100);
		color: var(--color-success-800);
	}

	/* ==================================================================
	   Tarjeta de plan
	   ================================================================== */

	.plan {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		box-shadow: var(--shadow-sm);
		transition: box-shadow var(--transition), border-color var(--transition);
	}

	.plan:hover {
		border-color: var(--color-primary-100);
		box-shadow: var(--shadow-md);
	}

	.plan--destacado {
		border-color: var(--color-accent-500);
		border-width: 2px;
	}

	/* Cinta superior: la etiqueta destacada del plan (Mas vendido, Sin
	   copagos...). En coral cuando el plan es el recomendado, en azul el resto,
	   para que solo uno tire del ojo. */
	.plan__cinta {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		justify-content: center;
		/* Altura fija (cabe en dos líneas) e igual en todas las tarjetas, para
		   que los títulos arranquen a la misma altura aunque la etiqueta ocupe
		   una o dos líneas, o no exista. */
		min-block-size: 3.5rem;
		padding: var(--space-2) var(--space-4);
		margin: 0;
		background: var(--color-primary-500);
		color: var(--color-white);
		font-size: var(--text-small);
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-align: center;
	}

	.plan__cinta--destacada {
		background: var(--color-accent-500);
	}

	/* Sin etiqueta: en móvil las tarjetas se apilan, así que no reserva nada
	   (quitaría un hueco feo arriba). En escritorio, donde van en fila, sí
	   reserva su altura para alinear los títulos. */
	.plan__cinta--vacia {
		display: none;
		background: transparent;
	}

	@media (min-width: 48rem) {
		.plan__cinta--vacia {
			display: flex;
		}
	}

	.plan__cinta svg {
		width: 1rem;
		height: 1rem;
	}

	/* Foto del plan con el nombre superpuesto abajo, sobre un velo oscuro que
	   le da contraste al texto blanco. */
	.plan__foto {
		position: relative;
		/* El alto lo fija el contenedor (no el <img>): así el banner es 3:2 con
		   foto o con placeholder, aunque la imagen subida tenga otra proporción
		   (el atributo height del <img> se saltaría el aspect-ratio). */
		aspect-ratio: 3 / 2;
		overflow: hidden;
	}

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

	.plan__foto::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgb(5 46 72 / 78%) 0%, rgb(5 46 72 / 0%) 55%);
	}

	.plan__nombre--sobre {
		position: absolute;
		inset-block-end: var(--space-4);
		inset-inline: var(--space-6);
		z-index: 1;
		margin: 0;
		color: var(--color-white);
	}

	.plan__cuerpo {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: var(--space-6);
	}

	/* Placeholder del banner cuando el plan aún no tiene imagen destacada:
	   degradado de marca con un corazón tenue. El nombre se superpone igual
	   que sobre la foto real; al subir la imagen del plan, esta lo sustituye. */
	.plan__foto--placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 3 / 2;
		background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
	}

	.plan__foto-hueco {
		display: inline-flex;
		color: rgb(255 255 255 / 45%);
		fill: rgb(255 255 255 / 45%);
	}

	.plan__foto-hueco svg {
		width: 3.5rem;
		height: 3.5rem;
		fill: inherit;
	}

	.plan__nombre {
		margin-block-end: var(--space-2);
		font-size: var(--text-h3);
	}

	.plan__precio-bloque {
		margin-block: var(--space-4) var(--space-6);
	}

	.plan__desde {
		display: block;
		color: var(--color-muted);
		font-size: var(--text-small);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.plan__precio {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		margin: 0;
		color: var(--color-primary-800);
		font-family: var(--font-heading);
	}

	.plan__cifra {
		font-size: var(--text-h2);
		font-weight: 700;
		line-height: 1;
	}

	.plan__periodo {
		color: var(--color-muted);
		font-family: var(--font-body);
		font-size: var(--text-body);
		font-weight: 400;
	}

	/* El público es de edad alta: las coberturas se leen a tamaño normal y con
	   color de texto fuerte (no gris), para que tengan contraste y cuerpo. */
	.plan__coberturas {
		display: grid;
		gap: var(--space-3);
		/* align-content: start evita que la rejilla estire los huecos entre
		   ítems para rellenar la tarjeta: así todas las cards tienen el MISMO
		   espacio entre líneas y el hueco sobrante queda abajo, junto al botón. */
		align-content: start;
		margin-block: var(--space-2) var(--space-6);
		padding: 0;
		list-style: none;
		flex-grow: 1;
		color: var(--color-ink);
	}

	.plan__coberturas li {
		display: grid;
		grid-template-columns: 1.35rem 1fr;
		gap: var(--space-3);
		align-items: start;
		line-height: 1.5;
	}

	/* El botón cierra la tarjeta; el margen superior lo despega de las
	   coberturas cuando el plan no muestra precio. */
	/* Grupo de acciones al fondo de la tarjeta: enlace a coberturas + botón. */
	.plan__acciones {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin-block-start: auto;
	}

	/* Enlace secundario a la ficha del plan, más intuitivo que solo el botón. */
	.plan__vercoberturas {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		color: var(--color-primary-500);
		font-weight: 600;
		text-decoration: none;
	}

	.plan__vercoberturas::after {
		content: "→";
	}

	.plan__vercoberturas:hover {
		text-decoration: underline;
	}

	/* El check no es solo color: junto al texto describe la cobertura, de modo
	   que la informacion no se transmite unicamente por color. */
	.plan__coberturas li::before {
		content: "";
		width: 1.25rem;
		height: 1.25rem;
		background: var(--color-success);
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* En móvil las tarjetas eran muy altas: banner más bajo (16:9), cuerpo con
	   menos aire y coberturas más juntas. Reduce bastante el alto sin perder info. */
	@media (max-width: 47.99rem) {
		.plan__foto,
		.plan__foto--placeholder {
			aspect-ratio: 2 / 1;
		}

		.plan__cuerpo {
			padding: var(--space-3) var(--space-4) var(--space-4);
		}

		.plan__coberturas {
			gap: var(--space-2);
			margin-block: var(--space-2) var(--space-3);
		}

		.plan__coberturas li {
			line-height: 1.35;
		}

		.plan__nombre--sobre {
			inset-block-end: var(--space-3);
			inset-inline: var(--space-4);
		}
	}

	/* ==================================================================
	   Comparador de planes
	   ================================================================== */

	/* La tabla se desplaza dentro de su contenedor, no arrastra la pagina:
	   con cuatro planes no cabe en un movil, y el resto del contenido no
	   tiene por que sufrirlo. */
	.comparador {
		overflow-x: auto;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
	}

	.comparador__tabla {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--text-small);
	}

	.comparador__tabla th,
	.comparador__tabla td {
		padding: var(--space-3) var(--space-4);
		text-align: center;
		border-block-end: 1px solid var(--color-border);
	}

	.comparador__tabla thead th {
		background: var(--color-primary-50);
		color: var(--color-primary-800);
		font-family: var(--font-heading);
		font-size: var(--text-body);
	}

	/* La primera columna queda fija al desplazar: sin ella, al llegar al
	   cuarto plan ya no se sabe que fila se esta mirando. */
	.comparador__tabla tbody th {
		position: sticky;
		inset-inline-start: 0;
		min-width: 12rem;
		background: var(--color-white);
		text-align: start;
		font-weight: 600;
		color: var(--color-ink);
	}

	.comparador__precio {
		color: var(--color-primary-500);
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 700;
	}

	.comparador__si {
		color: var(--color-success);
	}

	.comparador__si svg {
		width: 1.25rem;
		height: 1.25rem;
		margin-inline: auto;
	}

	.comparador__no {
		color: var(--color-muted);
	}

	/* ==================================================================
	   Barra de confianza
	   ================================================================== */

	.confianza {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-6);
		padding: var(--space-6);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
	}

	.confianza__item {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex: 1 1 14rem;
		color: var(--color-ink);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.confianza__icono {
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		color: var(--color-primary-500);
	}

	/* Hero de la portada con foto de fondo: mismo tratamiento que los hero de
	   landing (foto <img> a sangre, velo con degradado y texto en blanco). */
	.home-hero {
		position: relative;
		isolation: isolate;
		background-color: var(--color-primary-900);
		color: var(--color-white);
	}

	.home-hero__fondo {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
	}

	@media (max-width: 47.99rem) {
		.home-hero__fondo {
			object-position: center;
		}
	}

	.home-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			100deg,
			color-mix(in srgb, var(--color-primary-900) 90%, transparent),
			color-mix(in srgb, var(--color-primary-800) 55%, transparent)
		);
	}

	.home-hero .overline,
	.home-hero h1,
	.home-hero .hero__precio,
	.home-hero .hero__precio strong {
		color: var(--color-white);
	}

	.home-hero .entradilla,
	.home-hero .hero__precio .nota {
		color: rgb(255 255 255 / 92%);
	}

	.home-hero .boton--secundario {
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-primary-800);
	}

	.home-hero .boton--secundario:hover {
		background: transparent;
		border-color: var(--color-white);
		color: var(--color-white);
	}

	/* Dos columnas: texto a la izquierda, formulario de teléfono a la derecha. */
	.home-hero__interior {
		display: grid;
		gap: var(--space-8);
	}

	.home-hero__aside {
		width: 100%;
	}

	@media (min-width: 60rem) {
		.home-hero__interior {
			grid-template-columns: 1.05fr 0.95fr;
			align-items: center;
		}
	}

	/* Bloque de la distinción Oficina Excelente: sello (PNG) + copy, sobre el
	   degradado de marca (mismo que la banda de cifras). */
	.excelente-seccion {
		background: linear-gradient(115deg, var(--color-primary-800) 0%, var(--color-primary-500) 60%, var(--color-primary-700) 100%);
		color: var(--color-white);
	}

	.excelente {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-8);
		text-align: center;
	}

	.excelente__sello {
		flex: 0 0 auto;
	}

	.excelente__sello img {
		display: block;
		width: auto;
		height: auto;
		max-width: 20rem;
		filter: drop-shadow(0 12px 28px rgb(5 46 72 / 35%));
	}

	.excelente__texto {
		flex: 1 1 24rem;
		max-width: 34rem;
	}

	.excelente-seccion .overline {
		color: var(--color-primary-100);
	}

	.excelente__texto h2 {
		margin: var(--space-2) 0 var(--space-3);
		color: var(--color-white);
	}

	.excelente__texto p {
		margin: 0;
		color: rgb(255 255 255 / 90%);
	}

	.excelente__texto p.excelente__mas {
		margin-block-start: var(--space-4);
	}

	.excelente__mas a {
		color: var(--color-white);
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		text-decoration-color: var(--color-primary-100);
	}

	.excelente__mas a:hover {
		text-decoration-color: var(--color-white);
	}

	@media (min-width: 48rem) {
		.excelente {
			flex-wrap: nowrap;
			justify-content: center;
			gap: var(--space-12);
			max-width: 62rem;
			margin-inline: auto;
			text-align: start;
		}
	}

	/* ==================================================================
	   Tarjeta de persona del equipo
	   ================================================================== */

	.persona {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		overflow: hidden;
	}

	.persona__foto {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		background: var(--color-primary-50);
	}

	.persona__cuerpo {
		padding: var(--space-4) var(--space-6) var(--space-6);
	}

	.persona__nombre {
		margin-block-end: var(--space-1);
		font-size: var(--text-h4);
	}

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

	.persona__nombre a:hover,
	.persona__nombre a:focus-visible {
		color: var(--color-primary-500);
		text-decoration: underline;
	}

	.persona__rol {
		margin-block-end: var(--space-3);
		color: var(--color-primary-500);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.persona__credenciales {
		margin: 0;
		padding: 0;
		list-style: none;
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	/* Avatar de iniciales para quien aun no tiene foto. Mantiene la misma
	   silueta 4/5 que la foto, para que la rejilla no baile. */
	.persona__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary-500);
		font-size: var(--text-h2);
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.persona__bio {
		margin-block: 0 var(--space-4);
		color: var(--color-text);
		font-size: var(--text-small);
		line-height: 1.55;
	}

	.persona__contacto {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-4);
		margin: 0;
		font-size: var(--text-small);
		font-weight: 600;
	}

	.persona__contacto a {
		color: var(--color-primary-500);
		text-decoration: none;
	}

	.persona__contacto a:hover,
	.persona__contacto a:focus-visible {
		text-decoration: underline;
	}

	/* ==================================================================
	   Resena
	   ================================================================== */

	.resena {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
	}

	.resena__estrellas {
		display: inline-flex;
		gap: 2px;
		color: var(--color-warning);
	}

	.resena__texto {
		margin: 0;
		color: var(--color-body);
	}

	/* La respuesta del negocio va visualmente subordinada a la opinion, pero
	   presente: en una critica es lo que mas convence, porque demuestra como
	   se resuelve un problema en lugar de afirmarlo. */
	.resena__respuesta {
		margin-block-start: var(--space-4);
		padding-inline-start: var(--space-4);
		border-inline-start: 3px solid var(--color-primary-100);
	}

	.resena__respuesta-quien {
		margin: 0 0 var(--space-1);
		color: var(--color-primary-800);
		font-size: var(--text-small);
		font-weight: 700;
	}

	.resena__respuesta-texto {
		margin: 0;
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	/* Las valoraciones sin comentario solo llevan estrellas, nombre y fecha.
	   Con el relleno completo quedaban como tarjetas medio vacias, asi que se
	   compactan: siguen contando, pero no reclaman la misma atencion. */
	.resena--sin-texto {
		padding-block: var(--space-4);
		background: var(--color-surface-neutra);
		border-color: transparent;
	}

	.resena__pie {
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	.resena__autor {
		display: block;
		color: var(--color-ink);
		font-weight: 600;
	}

	/* ==================================================================
	   Resumen de valoracion
	   ================================================================== */

	.valoracion {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-3);
	}

	.valoracion__nota {
		margin: 0;
		color: var(--color-primary-800);
		font-family: var(--font-heading);
		font-size: var(--text-h2);
		font-weight: 700;
		line-height: 1;
	}

	.valoracion__total,
	.valoracion__enlace {
		margin: 0;
		font-size: var(--text-small);
	}

	.valoracion__total {
		color: var(--color-muted);
	}

	.opiniones__cabecera {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		margin-block-end: var(--space-8);
	}

	.opiniones__cabecera h2 {
		margin: 0;
	}

	/* Simbolo de la ciudad: el castillo de Lorca, el mar de San Javier.
	   Va en el color de marca y a la altura de la mayuscula del titular, para
	   que acompane al nombre en vez de competir con el. */
	.opiniones__oficina {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.icono-ciudad {
		display: inline-flex;
		flex-shrink: 0;
		color: var(--color-primary-500);
	}

	.icono-ciudad svg {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* Las opiniones tienen longitudes muy dispares. La disposicion en
	   columnas evita los huecos de una rejilla, sin recortar ningun texto:
	   recortar una opinion es tanto como no publicarla entera. */
	@media (width >= 48rem) {

		.opiniones__lista {
			display: block;
			columns: 3;
			column-gap: var(--space-6);
		}

		.opiniones__lista .resena {
			margin-block-end: var(--space-6);
			break-inside: avoid;
		}
	}

	/* ==================================================================
	   Pagina de oficina
	   ================================================================== */

	/* El precio antes del primer desplazamiento. Es el patron que sacamos de
	   Mapfre, pero sale del dato y no escrito a mano, para que no quede
	   desfasado cuando Adeslas actualice tarifas. */
	.hero__precio {
		margin-block: var(--space-6);
		color: var(--color-ink);
		font-size: var(--text-body-l);
	}

	.hero__precio strong {
		color: var(--color-primary-500);
		font-family: var(--font-heading);
		font-size: var(--text-h3);
	}

	.hero__precio .nota {
		display: block;
	}

	.oficina__hero {
		display: grid;
		gap: var(--space-8);
		align-items: start;
	}

	@media (width >= 60rem) {

		.oficina__hero {
			grid-template-columns: 1.6fr 1fr;
			gap: var(--space-12);
		}
	}

	/* El simbolo de la ciudad acompana a la etiqueta superior, no al
	   titular: ahi competiria con el H1, que es lo que debe leerse primero. */
	.oficina__hero .overline {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.oficina__hero .icono-ciudad svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.oficina__ficha {
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		box-shadow: var(--shadow-sm);
	}

	.oficina__ficha-titulo {
		margin-block-end: var(--space-3);
		font-size: var(--text-h4);
	}

	.oficina__direccion {
		margin-block-end: var(--space-4);
		font-style: normal;
		line-height: var(--leading-body);
	}

	.oficina__horario {
		margin-block-end: var(--space-4);
		font-size: var(--text-small);
	}

	.oficina__mapa {
		font-weight: 600;
	}

	.oficina__ficha--zona {
		background: var(--color-primary-50);
		border-color: var(--color-primary-100);
	}

	/* ==================================================================
	   Listado de ubicaciones
	   ================================================================== */

	.ubicacion {
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		overflow: hidden;
	}

	/* La fachada sangra hasta los bordes de la tarjeta, como banner superior. */
	.ubicacion__foto {
		display: block;
		margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6);
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--color-surface-neutra);
	}

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

	.ubicacion__nombre {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-block-end: var(--space-3);
		font-size: var(--text-h3);
	}

	.ubicacion__nombre a {
		color: var(--color-ink);
		text-decoration: none;
	}

	.ubicacion__nombre a:hover {
		color: var(--color-primary-500);
	}

	.ubicacion__nombre .icono-ciudad svg {
		width: 1.75rem;
		height: 1.75rem;
	}

	.ubicacion__direccion {
		margin-block-end: var(--space-3);
		font-style: normal;
		color: var(--color-muted);
	}

	/* ==================================================================
	   Cierre tipografico
	   ================================================================== */

	.cierre {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-6);
		text-align: center;
	}

	/* Un poco más de aire entre el titular y la descripción. */
	.cierre > p:not(.cierre__titular) {
		max-width: 42rem;
		margin-block-start: var(--space-2);
	}

	.cierre__titular {
		margin: 0;
		font-size: var(--text-display);
		font-weight: 700;
		line-height: var(--leading-tight);
		letter-spacing: -0.02em;
	}

	/* Banda de cierre: degradado azul que muere en el color del pie, para
	   fundirse con el footer (sin costura) y llamar más la atención. */
	.cierre-seccion {
		background: linear-gradient(180deg, var(--color-primary-700), var(--color-primary-900));
		color: var(--color-white);
	}

	.cierre-seccion .cierre__titular,
	.cierre-seccion .cierre p {
		color: var(--color-white);
	}

	/* El secundario (azul sobre azul) no se vería: arranca blanco y al pasar
	   el ratón se invierte, igual que en el hero. */
	.cierre-seccion .boton--secundario {
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-primary-800);
	}

	.cierre-seccion .boton--secundario:hover {
		background: transparent;
		border-color: var(--color-white);
		color: var(--color-white);
	}

	/* ==================================================================
	   Buscador
	   ================================================================== */

	.buscador {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-6);
	}

	.buscador__campo {
		flex: 1 1 12rem;
		min-height: 2.75rem;
		padding-inline: var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
		color: var(--color-ink);
		font-family: inherit;
		font-size: var(--text-body);
	}

	.buscador__campo::placeholder {
		color: var(--color-muted);
	}

	.buscador__campo:focus-visible {
		border-color: var(--color-primary-500);
		outline: 2px solid var(--color-primary-500);
		outline-offset: 1px;
	}

	/* ==================================================================
	   Listados de entradas y resultados
	   ================================================================== */

	.resultados {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.resultado {
		padding-block: var(--space-6);
		border-block-end: 1px solid var(--color-border);
	}

	.resultado:first-child {
		padding-block-start: 0;
	}

	.resultado:last-child {
		border-block-end: 0;
	}

	.resultado__titulo {
		margin-block-end: var(--space-1);
		font-size: var(--text-h3);
	}

	.resultado__titulo a {
		color: var(--color-primary-900);
		text-decoration: none;
	}

	.resultado__titulo a:hover {
		color: var(--color-primary-500);
		text-decoration: underline;
	}

	.resultado__fecha,
	.resultado__extracto {
		margin-block: 0;
	}

	.resultado__fecha {
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	.resultado__extracto {
		margin-block-start: var(--space-2);
		color: var(--color-body);
	}

	/* ==================================================================
	   Entrada del blog
	   ================================================================== */

	/* Fecha y firma. Van en gris y pequenas porque acompanan, no compiten con
	   el titular; pero van visibles porque en un contenido del que depende una
	   decision de salud o de dinero, sin ellas no hay forma de juzgar lo que
	   se lee. */
	.entrada__datos {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-4);
		margin-block: calc(var(--space-4) * -1) var(--space-6);
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	.entrada__portada {
		margin: 0 0 var(--space-6);
	}

	.entrada__portada img {
		width: 100%;
		border-radius: var(--radius-lg);
	}

	/* ==================================================================
	   Paginacion
	   ================================================================== */

	.pagination {
		margin-block-start: var(--space-8);
	}

	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		align-items: center;
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding-inline: var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		color: var(--color-primary-800);
		text-decoration: none;
	}

	.pagination .page-numbers:hover {
		border-color: var(--color-primary-500);
		color: var(--color-primary-500);
	}

	.pagination .page-numbers.current {
		border-color: var(--color-primary-500);
		background: var(--color-primary-500);
		color: var(--color-white);
	}

	.pagination .page-numbers.dots {
		border-color: transparent;
	}

	/* ==================================================================
	   Ficha del seguro de viaje
	   ================================================================== */

	.viaje__bloque {
		margin-block-end: var(--space-8);
	}

	.viaje__titulo {
		margin-block-end: var(--space-3);
		font-size: var(--text-h4);
	}

	.viaje__lista {
		margin: 0 0 var(--space-6);
		padding-inline-start: var(--space-6);
	}

	.viaje__lista li {
		margin-block-end: var(--space-2);
	}

	/* Lo opcional se distingue de lo que va siempre incluido, para que no se
	   lea como si entrara en el precio base. */
	.viaje__lista--opcional {
		color: var(--color-body);
	}

	.viaje__lista--opcional li::marker {
		color: var(--color-accent-500);
	}

	/* Los capitales van alineados a la derecha: son cifras, y comparar cifras
	   es mas facil cuando las unidades caen en la misma columna. */
	.viaje__tabla td {
		text-align: end;
		font-variant-numeric: tabular-nums;
		font-weight: 600;
	}

	.viaje__fila--destacada {
		background: var(--color-primary-50);
	}

	.viaje__nota {
		margin-block-start: var(--space-4);
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	/* ==================================================================
	   Promocion (campana SegurisImos)
	   ================================================================== */

	/* Campaña Segurísimos: banda con el degradado de marca, imagen a un lado y el
	   contenido (titular, chips y CTA) al otro. Aire limpio y moderno. */
	.promo {
		overflow: hidden;
		padding: var(--space-8);
		border-radius: var(--radius-lg);
		background: linear-gradient(115deg, var(--color-primary-800) 0%, var(--color-primary-500) 60%, var(--color-primary-700) 100%);
		color: var(--color-white);
	}

	.promo__interior {
		display: grid;
		gap: var(--space-8);
		align-items: center;
	}

	@media (min-width: 48rem) {
		.promo__interior {
			grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		}
	}

	.promo__img {
		display: block;
		width: 100%;
		max-width: 18rem;
		height: auto;
		margin-inline: auto;
		border-radius: var(--radius-lg);
	}

	/* El sello deja claro desde el principio de quien es la campana: es de
	   Adeslas, no un invento de la oficina. */
	.promo__sello {
		display: inline-block;
		margin-block-end: var(--space-3);
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill);
		background: rgb(255 255 255 / 18%);
		color: var(--color-white);
		font-size: var(--text-overline);
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.promo__titular {
		margin-block-end: var(--space-3);
		font-size: var(--text-h2);
		color: var(--color-white);
	}

	.promo__entrada {
		margin: 0;
		color: rgb(255 255 255 / 90%);
		font-size: var(--text-body-l);
	}

	/* Marcas por las que se canjean los puntos, como chips translúcidos. */
	.promo__canje {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block: var(--space-6);
		padding: 0;
		list-style: none;
	}

	.promo__canje li {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 2.1rem; /* Misma altura en todas las pastillas: la marca el texto, nunca el icono. */
		padding: var(--space-1) var(--space-3);
		border-radius: 999px;
		background: var(--color-white);
		color: var(--color-primary-900);
		font-size: var(--text-small);
		font-weight: 700;
	}

	.promo__canje-icono {
		display: block;
		width: auto;
		height: 1.1rem;
		max-height: 1.1rem; /* Ningún icono puede agrandar la pastilla. */
		flex: 0 0 auto;
		object-fit: contain;
	}

	/* El logo de Netflix llena todo su cuadrado y se ve más alto; se reduce un
	   poco para igualarlo ópticamente con los demás. */
	.promo__canje-icono--compacto {
		height: 0.9rem;
		max-height: 0.9rem;
	}

	.promo__extra {
		margin: 0 0 var(--space-4);
		color: var(--color-white);
		font-weight: 700;
	}

	.promo__cta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-4);
		margin-block-start: var(--space-4);
		padding-block-start: var(--space-6);
		border-block-start: 1px solid rgb(255 255 255 / 20%);
	}

	.promo__cta-titulo {
		flex: 1 1 16rem;
		margin: 0;
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 700;
		color: var(--color-white);
	}

	/* El WhatsApp (secundario azul sobre azul) se invierte a blanco. */
	.promo .boton--secundario {
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-primary-800);
	}

	.promo .boton--secundario:hover {
		background: transparent;
		border-color: var(--color-white);
		color: var(--color-white);
	}

	/* La letra pequena se lee, no se esconde: es donde estan las condiciones que
	   evitan el engano. Sobre el azul, blanco al 72%. */
	.promo__legal {
		margin-block-start: var(--space-6);
		color: rgb(255 255 255 / 72%);
		font-size: var(--text-small);
		line-height: 1.5;
	}

	/* ==================================================================
	   Hubs de ramo (landings)
	   ================================================================== */

	.hub-hero {
		background: var(--degradado-marca);
		color: var(--color-white);
	}

	.hub-hero__interior {
		display: grid;
		gap: var(--space-8);
		align-items: center;
	}

	@media (width >= 60rem) {

		.hub-hero__interior {
			grid-template-columns: 1.1fr 0.9fr;
		}
	}

	/* Titulares y entradilla en blanco: el hero va sobre el degradado de marca,
	   donde la tinta habitual no contrastaria. */
	.hub-hero h1,
	.hub-hero .overline {
		color: var(--color-white);
	}

	.hub-hero .entradilla {
		color: rgb(255 255 255 / 92%);
	}

	/* El boton secundario (azul sobre azul) no se ve en el hero: aqui arranca
	   relleno en blanco y al pasar el raton pasa a contorno, invirtiendose. */
	.hub-hero .boton--secundario {
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-primary-800);
	}

	.hub-hero .boton--secundario:hover {
		background: transparent;
		border-color: var(--color-white);
		color: var(--color-white);
	}

	.hub-resenas__cta {
		margin-block-start: var(--space-6);
		text-align: center;
	}

	/* Planes especiales: la sección que cuelga bajo la comparativa de salud y
	   enlaza a perfiles y modalidades (autónomos, empresas, mayores…). */
	.seccion--especiales {
		margin-block-start: var(--space-12);
		padding-block-start: var(--space-8);
		border-block-start: 1px solid var(--color-border);
	}

	.opciones {
		margin-block-start: var(--space-6);
	}

	.opcion {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
	}

	/* Icono SVG en línea: hereda el color de marca (los iconos no traen fill). */
	.opcion__icono {
		display: inline-flex;
		color: var(--color-primary-500);
		fill: var(--color-primary-500);
	}

	.opcion__icono svg {
		width: 2.75rem;
		height: 2.75rem;
		fill: inherit;
	}

	.opcion__titulo {
		margin: 0;
		font-size: var(--text-h4);
	}

	.opcion__texto {
		margin: 0;
		color: var(--color-muted);
		font-size: var(--text-small);
		line-height: 1.55;
	}

	.opcion__precio {
		margin: 0;
		color: var(--color-primary-500);
		font-weight: 700;
	}

	/* El enlace se pega abajo para que las tarjetas de distinta altura alineen
	   su llamada a la acción. */
	.opcion .boton--enlace {
		margin-block-start: auto;
		align-self: flex-start;
	}

	/* El nombre del plan en la tarjeta del comparador enlaza a su ficha. */
	.plan__nombre a {
		color: inherit;
		text-decoration: none;
	}

	.plan__nombre a:hover,
	.plan__nombre a:focus-visible {
		color: var(--color-primary-500);
		text-decoration: underline;
	}

	.plan__nombre--sobre a {
		color: var(--color-white);
	}

	/* Ficha de detalle de un plan: contenido a la izquierda, precio y CTA en un
	   lateral fijo que en móvil pasa debajo. */
	.producto-ficha__interior {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-block: var(--space-8);
	}

	.producto-ficha__nombre {
		margin-block: var(--space-1) var(--space-4);
	}

	.producto-ficha__badge {
		display: inline-block;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill, 999px);
		background: var(--color-primary-50, #eef4fb);
		color: var(--color-primary-500);
		font-size: var(--text-small);
		font-weight: 700;
	}

	.producto-ficha__coberturas {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: var(--space-2);
	}

	.producto-ficha__coberturas li {
		padding-inline-start: 1.6em;
		position: relative;
		line-height: 1.5;
	}

	.producto-ficha__coberturas li::before {
		content: "✓";
		position: absolute;
		inset-inline-start: 0;
		color: var(--color-primary-500);
		font-weight: 700;
	}

	.producto-ficha__copago {
		margin-block-start: var(--space-4);
	}

	.producto-ficha__volver {
		margin-block-start: var(--space-6);
	}

	.producto-ficha__lateral {
		align-self: start;
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
	}

	@media (min-width: 48rem) {
		.producto-ficha__interior {
			grid-template-columns: 1fr minmax(15rem, 20rem);
			align-items: start;
		}
	}

	/* Bloque de especialista en las landings de perfil. */
	.perfil-especialista {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		align-items: flex-start;
	}

	.perfil-especialista__foto img {
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		object-fit: cover;
	}

	@media (min-width: 40rem) {
		.perfil-especialista {
			flex-direction: row;
			align-items: center;
			gap: var(--space-6);
		}
	}

	.hub-hero__foto img {
		width: 100%;
		height: 100%;
		max-height: 26rem;
		object-fit: cover;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}

	/* Sin foto aun, el hero va a una columna centrada, con una medida de
	   lectura, para que el texto no quede a lo ancho de toda la pantalla. */
	.hub-hero--sin-foto .hub-hero__interior {
		grid-template-columns: 1fr;
		max-width: 46rem;
	}

	/* Hero con la foto de fondo a sangre, no como imagen colocada al lado. La
	   foto se pasa por --hero-fondo (inline, desde el adjunto) y un velo de
	   marca encima garantiza el contraste AA del texto blanco sobre cualquier
	   zona de la imagen. */
	.hub-hero--fondo {
		position: relative;
		isolation: isolate;
		background-color: var(--color-primary-900);
	}

	/* La foto va como <img> real (para que el alt sea SEO) a sangre detrás del
	   velo: absoluta, cubriendo el hero, por debajo del degradado (z-index -2
	   frente al -1 del ::before) y del texto. */
	.hub-hero__fondo-img {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 28%;
	}

	.hub-hero--fondo::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			100deg,
			color-mix(in srgb, var(--color-primary-900) 88%, transparent),
			color-mix(in srgb, var(--color-primary-800) 58%, transparent)
		);
	}

	/* El interior queda a lo ancho del contenedor (mismo borde izquierdo que el
	   resto de la pagina); es el texto el que lleva la medida de lectura, para
	   que arranque pegado a la izquierda y no centrado. */
	.hub-hero--fondo .hub-hero__interior {
		grid-template-columns: 1fr;
		min-height: 22rem;
	}

	.hub-hero--fondo .hub-hero__texto {
		max-width: 46rem;
	}

	/* Factor humano y confianza: mismo patron de dos columnas, texto y foto. */
	.hub-humano,
	.hub-confianza {
		display: grid;
		gap: var(--space-8);
		align-items: center;
	}

	@media (width >= 60rem) {

		.hub-humano,
		.hub-confianza {
			grid-template-columns: 1fr 1fr;
		}

		/* La foto de la confianza va a la izquierda; la del factor humano a la
		   derecha, para que al alternar secciones no queden dos fotos pegadas. */
		.hub-confianza__foto {
			order: -1;
		}

		/* La imagen iguala la altura de su columna de texto: las dos cajas se
		   estiran a la misma altura y la foto la rellena entera. */
		.hub-humano {
			align-items: stretch;
		}

		.hub-humano__foto img {
			max-height: none;
			height: 100%;
		}
	}

	.hub-humano__foto img,
	.hub-confianza__foto img {
		width: 100%;
		max-height: 24rem;
		object-fit: cover;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
	}

	/* Los botones respiran del texto: en un bloque con lista, pegados a ella se
	   leen como una linea mas. */
	.hub-humano .botonera {
		margin-block-start: var(--space-8);
	}

	.hub-humano__lista {
		margin: var(--space-4) 0 0;
		padding: 0;
		list-style: none;
	}

	.hub-humano__lista li {
		position: relative;
		margin-block-end: var(--space-3);
		padding-inline-start: var(--space-6);
	}

	/* Marca de verificacion dibujada en CSS: el mensaje es de ventajas y una
	   palomita las refuerza sin cargar un icono por linea. */
	.hub-humano__lista li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.45em;
		width: 0.7rem;
		height: 0.4rem;
		border-inline-start: 2px solid var(--color-success);
		border-block-end: 2px solid var(--color-success);
		transform: rotate(-45deg);
	}

	/* ==================================================================
	   Preguntas frecuentes
	   ================================================================== */

	.faqs {
		margin-block-start: var(--space-6);
		border-block-start: 1px solid var(--color-border);
	}

	.faq {
		border-block-end: 1px solid var(--color-border);
	}

	.faq__pregunta {
		display: flex;
		gap: var(--space-3);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-4);
		color: var(--color-primary-900);
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}

	/* Se oculta la flecha por defecto del navegador para poner la propia. */
	.faq__pregunta::-webkit-details-marker {
		display: none;
	}

	/* Signo mas que gira a equis al abrir: dibujado en CSS, sin icono por FAQ. */
	.faq__pregunta::after {
		content: "+";
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		color: var(--color-primary-500);
		font-size: 1.5rem;
		line-height: 1.4;
		text-align: center;
		transition: transform var(--transition);
	}

	.faq[open] .faq__pregunta::after {
		transform: rotate(45deg);
	}

	.faq__respuesta {
		padding-block-end: var(--space-4);
		color: var(--color-body);
		max-width: var(--content-max);
	}

	.faq__respuesta p {
		margin: 0;
	}

	@media (prefers-reduced-motion: reduce) {

		.faq__pregunta::after {
			transition: none;
		}
	}

	/* ==================================================================
	   Slider (resenas y demas)
	   ================================================================== */

	.slider {
		position: relative;
	}

	/* La pista es un contenedor con scroll nativo: se desliza con el dedo, el
	   trackpad o el teclado sin necesidad de script. El scroll-snap hace que
	   cada tarjeta encaje en su sitio al soltar. */
	.slider__pista {
		display: flex;
		gap: var(--space-4);
		margin: var(--space-6) 0 0;
		padding-block-end: var(--space-3);
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: thin;
	}

	.slider__pista:focus-visible {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 4px;
	}

	/* Una tarjeta casi entera en movil, varias en escritorio: el mismo
	   flex-basis se adapta solo segun el ancho disponible. */
	.slider__slide {
		flex: 0 0 min(88%, 22rem);
		scroll-snap-align: start;
		/* Anula la regla global `li + li { margin-block-start }` (base.css): en la
		   pista horizontal empujaba hacia abajo a todos los slides menos al primero. */
		margin: 0;
	}

	.slider__slide > .resena,
	.slider__slide > .plan {
		height: 100%;
	}

	/* Flechas: mejora de escritorio. Nacen ocultas y las descubre el script,
	   asi no quedan botones muertos si el JavaScript falla. */
	.slider__control {
		position: absolute;
		inset-block-start: calc(50% - 1.5rem);
		z-index: 2;
		display: none;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		background: var(--color-white);
		color: var(--color-primary-700);
		box-shadow: var(--shadow-md);
		cursor: pointer;
		transition: background-color var(--transition), color var(--transition), opacity var(--transition);
	}

	.slider__control svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.slider__control:hover {
		background: var(--color-primary-50);
		color: var(--color-primary-900);
	}

	.slider__control:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.slider__control--prev {
		inset-inline-start: calc(var(--space-4) * -1);
	}

	.slider__control--next {
		inset-inline-end: calc(var(--space-4) * -1);
	}

	/* En movil se navega deslizando, no con flechas: ocuparian sitio y taparian
	   las tarjetas. A partir de tablet, donde no hay gesto tactil garantizado,
	   se muestran. */
	@media (width >= 48rem) {

		.slider__control {
			display: inline-flex;
		}
	}

	/* ==================================================================
	   Rejilla de ventajas (por que elegir Adeslas)
	   ================================================================== */

	.ventajas__titulo {
		margin-block-end: var(--space-8);
		text-align: center;
	}

	.ventajas {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: var(--space-6);
	}

	.ventaja {
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
	}

	.ventaja__icono {
		width: 2.25rem;
		height: 2.25rem;
		margin-block-end: var(--space-3);
		color: var(--color-primary-500);
	}

	.ventaja__titulo {
		margin-block-end: var(--space-2);
		font-size: var(--text-h4);
	}

	.ventaja__texto {
		margin: 0;
		color: var(--color-body);
	}

	/* ==================================================================
	   Hero de claims (formato de landing)
	   ================================================================== */

	.claims-hero__interior {
		display: grid;
		gap: var(--space-8);
		align-items: center;
	}

	@media (width >= 60rem) {

		.claims-hero__interior {
			grid-template-columns: 1fr 1fr;
		}
	}

	.claims-hero__sello {
		display: inline-block;
		margin-block-end: var(--space-3);
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill);
		background: var(--color-primary-100);
		color: var(--color-primary-800);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.claims-hero__titulo {
		margin-block-end: var(--space-2);
		font-size: var(--text-h1);
	}

	.claims-hero__claims {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		margin-block: var(--space-6);
		padding: 0;
		list-style: none;
	}

	/* Cada claim en su tarjeta: el beneficio se lee de un vistazo, con la
	   palomita a la izquierda y el detalle debajo del titular. */
	.claim {
		display: flex;
		gap: var(--space-3);
		align-items: flex-start;
		padding: var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface-neutra);
	}

	.claim__icono {
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		color: var(--color-success);
	}

	.claim__texto {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.claim__titulo {
		color: var(--color-primary-900);
	}

	.claim__detalle {
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	/* El CTA no ocupa todo el ancho en escritorio: un boton kilometrico se ve
	   menos serio que uno con medida. */
	.claims-hero__cta {
		max-width: 22rem;
	}

	.claims-hero__confianza {
		display: flex;
		gap: var(--space-2);
		align-items: center;
		margin-block-start: var(--space-4);
		color: var(--color-success-800);
		font-size: var(--text-small);
	}

	.claims-hero__confianza svg {
		flex-shrink: 0;
		width: 1rem;
		height: 1rem;
		color: var(--color-success);
	}

	.claims-hero__foto img {
		width: 100%;
		max-height: 30rem;
		object-fit: cover;
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-lg);
	}

	/* ==================================================================
	   Asistente "Calcula tu seguro" (quiz de captación)
	   ================================================================== */

	.calc-seccion {
		padding-block: var(--space-12);
		background: var(--color-primary-50);
	}

	.calc {
		max-width: 34rem;
		margin-inline: auto;
		padding: var(--space-6);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		box-shadow: var(--shadow-md);
		color: var(--color-ink);
		text-align: center;
	}

	.calc__titulo {
		margin: 0;
		color: var(--color-primary-500);
		font-size: var(--text-h3);
	}

	.calc__lema {
		margin: var(--space-2) 0 0;
		color: var(--color-accent-500);
		font-size: var(--text-small);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Barra de progreso: círculos numerados unidos por una línea. */
	/* Progreso como barra (sin porcentaje): el relleno avanza por paso. */
	.calc__progreso {
		max-width: 18rem;
		height: 6px;
		margin: var(--space-4) auto var(--space-6);
		border-radius: 999px;
		background: var(--color-border);
		overflow: hidden;
	}

	.calc__progreso-relleno {
		display: block;
		width: 33%;
		height: 100%;
		border-radius: inherit;
		background: var(--color-accent-500);
		transition: width var(--transition);
	}

	.calc__paso {
		min-inline-size: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.calc__pregunta {
		display: block;
		margin: 0 auto var(--space-2);
		padding: 0;
		font-family: var(--font-heading);
		font-size: var(--text-h3);
		font-weight: 700;
		color: var(--color-ink);
	}

	.calc__ayuda {
		max-width: 30rem;
		margin: 0 auto var(--space-6);
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	.calc__opciones {
		display: grid;
		gap: var(--space-3);
		max-width: 22rem;
		margin-inline: auto;
	}

	.calc__opcion {
		min-height: var(--touch-min);
		padding: var(--space-3) var(--space-4);
		border: 2px solid transparent;
		border-radius: var(--radius-md);
		background: var(--color-primary-500);
		color: var(--color-white);
		font-family: var(--font-body);
		font-size: var(--text-body);
		font-weight: 700;
		cursor: pointer;
		transition: background var(--transition), transform var(--transition);
	}

	.calc__opcion:hover {
		background: var(--color-primary-700);
	}

	.calc__opcion:active {
		transform: scale(0.98);
	}

	.calc__opcion.esta-elegido {
		background: var(--color-primary-900);
	}

	/* Paso "para quién": tarjetas 2×2 con icono, título y subtítulo. */
	.calc__opciones--tarjetas {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		max-width: 26rem;
	}

	.calc__opcion--tarjeta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.15rem;
		min-height: 0;
		padding: var(--space-4) var(--space-2);
		border: 2px solid var(--color-border);
		background: var(--color-white);
		color: var(--color-ink);
		font-weight: 400;
		text-align: center;
	}

	.calc__opcion--tarjeta:hover {
		background: var(--color-primary-50);
		border-color: var(--color-primary-100);
	}

	.calc__opcion--tarjeta.esta-elegido {
		background: var(--color-primary-50);
		border-color: var(--color-primary-500);
		color: var(--color-ink);
	}

	.calc__tarjeta-icono {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.6rem;
		height: 2.6rem;
		margin-bottom: var(--space-1);
		border-radius: 50%;
		background: var(--color-primary-50);
		color: var(--color-primary-500);
	}

	.calc__opcion--tarjeta.esta-elegido .calc__tarjeta-icono {
		background: var(--color-primary-100);
	}

	.calc__tarjeta-icono svg {
		width: 1.4rem;
		height: 1.4rem;
	}

	.calc__tarjeta-titulo {
		font-weight: 700;
		font-size: var(--text-body);
		line-height: 1.2;
	}

	.calc__tarjeta-sub {
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.calc__campo {
		display: grid;
		gap: var(--space-1);
		max-width: 26rem;
		margin: 0 auto var(--space-3);
		text-align: start;
	}

	.calc__campo label {
		font-size: var(--text-small);
		font-weight: 600;
		color: var(--color-ink);
	}

	.calc__campo input {
		min-height: var(--touch-min);
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
		color: var(--color-ink);
		font-family: var(--font-body);
		font-size: var(--text-body);
	}

	.calc__campo input:focus-visible {
		outline: 2px solid var(--color-primary-500);
		outline-offset: 1px;
	}

	.calc__campo input.tiene-error {
		border-color: var(--color-accent-700);
	}

	.calc__consent {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		max-width: 26rem;
		margin: var(--space-4) auto 0;
		font-size: var(--text-small);
		text-align: start;
	}

	.calc__error {
		max-width: 26rem;
		margin: var(--space-3) auto 0;
		color: var(--color-accent-700);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.calc__nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		margin-block-start: var(--space-6);
	}

	.calc__nav .boton {
		flex: 1;
		min-width: 12rem;
		max-width: 18rem;
	}

	.calc__volver {
		padding: var(--space-2) var(--space-3);
		border: 0;
		background: transparent;
		color: var(--color-muted);
		font-family: var(--font-body);
		font-weight: 600;
		cursor: pointer;
	}

	.calc__volver:hover {
		color: var(--color-ink);
	}

	.calc__gracias {
		padding-block: var(--space-6);
	}

	.calc__gracias h3 {
		margin: 0 0 var(--space-2);
		color: var(--color-primary-500);
	}

	.calc__gracias p {
		margin: 0;
		color: var(--color-muted);
	}

	/* Trampa antispam: fuera de pantalla, sin display:none (algún bot lo salta). */
	.calc__hp {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* ==================================================================
	   Centros médicos asociados (cuadro médico)
	   ================================================================== */

	.centros__titulo {
		text-align: center;
	}

	.centros__entrada {
		max-width: 42rem;
		margin: var(--space-2) auto 0;
		color: var(--color-muted);
		text-align: center;
	}

	.centros__lista {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-8) var(--space-6);
		align-items: center;
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48rem) {
		.centros__lista {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.centros__item {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.centros__logo {
		width: auto;
		max-width: 100%;
		max-height: 3.25rem;
		object-fit: contain;
	}

	.centros__texto {
		color: var(--color-muted);
		font-weight: 700;
		text-align: center;
	}

	/* --- Banda de cifras de autoridad (cuadro médico) ----------------- */
	.cifras {
		padding-block: var(--space-8);
		background: linear-gradient(115deg, var(--color-primary-800) 0%, var(--color-primary-500) 60%, var(--color-primary-700) 100%);
		color: var(--color-white);
	}

	.cifras__lista {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		gap: var(--space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48rem) {
		.cifras__lista {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* El número vive en una fila de rejilla de ALTURA FIJA en lo alto del ítem.
	   Así, aunque una etiqueta ocupe dos líneas y otra una, la fila del número
	   es idéntica en todos y ninguno (el +51.000) queda más alto que el resto. */
	.cifras__item {
		display: grid;
		grid-template-rows: 2.75rem auto;
		justify-items: center;
		align-content: start;
		row-gap: var(--space-2);
		text-align: center;
		/* Anula la regla global `li + li { margin-block-start }` (base.css): en la
		   rejilla empujaba hacia abajo a todos los ítems menos al primero, y por
		   eso el +51.000 parecía más alto. */
		margin: 0;
	}

	/* Cifras tabulares y "lining": General Sans, por defecto, asienta los dígitos
	   a distinta altura (cifras de estilo antiguo). Forzando lining + tabular
	   todos se alinean igual. */
	.cifras__num {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-heading);
		font-size: 2.25rem;
		font-weight: 800;
		line-height: 1;
		white-space: nowrap;
		color: var(--color-white);
		font-variant-numeric: lining-nums tabular-nums;
		font-feature-settings: "lnum" 1, "tnum" 1;
	}

	@media (min-width: 48rem) {
		.cifras__item {
			grid-template-rows: 3.25rem auto;
		}

		.cifras__num {
			font-size: 2.5rem;
		}
	}

	.cifras__etiqueta {
		font-size: var(--text-small);
		line-height: 1.3;
		color: rgb(255 255 255 / 90%);
	}

	.hub-resenas__titulo {
		text-align: center;
	}

	/* --- Valoración de Google (dos oficinas) ------------------------- */
	.google-valoracion__intro {
		margin: 0 0 var(--space-6);
		color: var(--color-muted);
		text-align: center;
	}

	.google-valoracion {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-8) var(--space-16);
		margin-block-end: var(--space-8);
	}

	.google-nota {
		min-width: 12rem;
		text-align: center;
	}

	.google-nota .icono-ciudad {
		display: inline-flex;
		margin-block-end: var(--space-2);
		color: var(--color-primary-500);
	}

	.google-nota .icono-ciudad svg {
		width: auto;
		height: 2.5rem;
	}

	.google-nota__oficina {
		margin: 0 0 var(--space-2);
		font-weight: 700;
		color: var(--color-ink);
	}

	.google-nota__linea {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
	}

	.google-nota__cifra {
		font-family: var(--font-heading);
		font-size: var(--text-h1);
		font-weight: 800;
		line-height: 1;
		color: var(--color-ink);
	}

	.google-nota__resenas {
		display: inline-block;
		margin: var(--space-2) 0 0;
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	a.google-nota__resenas:hover {
		color: var(--color-primary-500);
		text-decoration: underline;
	}

	/* Estrellas con relleno fraccionado (para 4,7). */
	.estrellas-media {
		position: relative;
		display: inline-block;
		font-size: 1.5rem;
		line-height: 1;
		color: var(--color-border);
	}

	.estrellas-media__fondo,
	.estrellas-media__relleno {
		letter-spacing: 2px;
	}

	.estrellas-media__relleno {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		overflow: hidden;
		white-space: nowrap;
		color: var(--color-warning);
	}

	.promo__etiqueta {
		margin: 0 0 var(--space-2);
		font-size: var(--text-small);
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-accent-700);
	}

	.promo__lista {
		display: grid;
		gap: var(--space-1);
		margin: 0;
		padding-inline-start: 1.1rem;
		color: var(--color-ink);
		font-weight: 600;
	}

	.promo__nota {
		margin: var(--space-2) 0 0;
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	/* Banda de oferta de las fichas de plan: coral, ancho completo, muy visible. */
	.promo-band {
		background: linear-gradient(120deg, var(--color-accent-700), var(--color-accent-500));
		color: var(--color-white);
	}

	.promo-band__interior {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4) var(--space-8);
	}

	.promo-band__etiqueta {
		margin: 0 0 var(--space-2);
		font-weight: 800;
		font-size: var(--text-h4);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.promo-band__lista {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-6);
		margin: 0;
		padding: 0;
		list-style: none;
		font-weight: 700;
		font-size: var(--text-body-l);
	}

	.promo-band__lista li {
		position: relative;
		padding-inline-start: 1.6rem;
	}

	.promo-band__lista li::before {
		content: "✓";
		position: absolute;
		inset-inline-start: 0;
		font-weight: 800;
	}

	.promo-band__nota {
		margin: var(--space-2) 0 0;
		font-size: var(--text-small);
		opacity: 0.9;
	}

	.promo-band .boton--acento {
		flex-shrink: 0;
		background: var(--color-white);
		border-color: var(--color-white);
		color: var(--color-accent-700);
	}

	.promo-band .boton--acento:hover {
		background: transparent;
		border-color: var(--color-white);
		color: var(--color-white);
	}

	@media (max-width: 48rem) {
		.promo-band__interior {
			flex-direction: column;
			align-items: flex-start;
		}

		.promo-band .boton--acento {
			width: 100%;
		}
	}

	/* Modal de la calculadora: lo abren los CTAs "Calcula tu seguro/precio". */
	.calc-modal {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: var(--space-6) var(--space-4);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.calc-modal[hidden] {
		display: none;
	}

	.calc-modal__fondo {
		position: fixed;
		inset: 0;
		border: 0;
		background: rgba(5, 46, 72, 0.6);
		cursor: pointer;
	}

	.calc-modal__panel {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 34rem;
		margin-block: auto;
	}

	.calc-modal__cerrar {
		position: absolute;
		top: calc(-1 * var(--space-2));
		right: calc(-1 * var(--space-2));
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--color-white);
		color: var(--color-ink);
		box-shadow: var(--shadow-md);
		cursor: pointer;
	}

	.calc-modal__cerrar svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.calc-modal__cerrar:hover {
		background: var(--color-surface-neutra);
	}

	.calc-modal .calc {
		max-width: none;
	}

	body.calc-abierta {
		overflow: hidden;
	}

	/* El pop-up de teléfono solo tiene sentido en móvil (en escritorio ya hay
	   formularios a la vista); en pantallas grandes no se muestra nunca. */
	@media (min-width: 48rem) {
		.popup-tel {
			display: none !important;
		}
	}

	/* Hero de salud con el asistente incrustado a la derecha. */
	.hub-hero--con-form .hub-hero__texto {
		max-width: 40rem;
	}

	.hub-hero__aside {
		width: 100%;
	}

	.hub-hero__aside .calc {
		max-width: none;
		margin-inline: 0;
		text-align: center;
	}

	@media (width >= 60rem) {

		.hub-hero--con-form .hub-hero__interior {
			grid-template-columns: 1.05fr 0.95fr;
			align-items: center;
		}
	}

	/* Píldora de oferta integrada en el hero (a lo ancho, bajo las columnas). */
	.hub-hero__oferta {
		grid-column: 1 / -1;
		display: flex;
		justify-content: center;
		margin-block-start: var(--space-4);
	}

	.hero-oferta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		text-align: center;
	}

	.hero-oferta__segmentos {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
		gap: var(--space-1);
	}

	.hero-oferta__seg {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		border-radius: 999px;
		color: var(--color-white);
		box-shadow: var(--shadow-md);
	}

	.hero-oferta__seg--1 {
		background: var(--color-accent-500);
	}

	.hero-oferta__seg--2 {
		background: var(--color-primary-500);
	}

	.hero-oferta__seg--3 {
		background: var(--color-primary-900);
	}

	.hero-oferta__dato {
		display: flex;
		align-items: center;
		gap: 0.28em;
		font-family: var(--font-heading);
		font-size: var(--text-h2);
		font-weight: 800;
		line-height: 1;
	}

	.hero-oferta__sup {
		font-size: 0.42em;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.92;
	}

	.hero-oferta__texto {
		max-width: 7rem;
		font-size: var(--text-small);
		font-weight: 700;
		line-height: 1.1;
		text-align: left;
		text-transform: uppercase;
	}

	.hero-oferta__mas {
		display: flex;
		align-items: center;
		padding-inline: var(--space-1);
		color: rgb(255 255 255 / 90%);
		font-size: var(--text-body);
		font-weight: 600;
		font-style: italic;
		text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
	}

	/* Claim de garantía (p. ej. "Precio garantizado 3 años"): no es la promo con
	   fecha, sino un beneficio permanente del plan, por eso va como sello aparte
	   y no como segmento "o" de la oferta. */
	.hero-oferta__garantia {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-pill);
		background: rgb(255 255 255 / 15%);
		color: var(--color-white);
		font-size: var(--text-small);
		font-weight: 700;
		text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
	}

	.hero-oferta__garantia svg {
		flex-shrink: 0;
		width: 1rem;
		height: 1rem;
		color: var(--color-primary-100);
	}

	.hero-oferta__nota {
		max-width: 34rem;
		margin: 0;
		color: rgb(255 255 255 / 85%);
		font-size: var(--text-small);
		text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
	}

	/* En los heroes de plan, el overline (El más accesible, Seguro completo…) va
	   en azul claro y subrayado, para destacarlo. */
	.hub-hero--plan .overline {
		color: var(--color-primary-100);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.22em;
	}

	/* Subtítulo del hero (gancho por plan, segunda línea del titular). */
	.hub-hero__sub {
		margin: var(--space-2) 0 0;
		color: var(--color-primary-100);
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 700;
		line-height: 1.25;
	}

	/* Señales de confianza del hero: una por fila, subrayadas. */
	.hub-hero__confianza {
		display: grid;
		gap: var(--space-2);
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;
	}

	.hub-hero__confianza li {
		width: fit-content;
		color: var(--color-white);
		font-size: var(--text-small);
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--color-primary-100);
		text-decoration-thickness: 1.5px;
		text-underline-offset: 0.2em;
	}

	@media (max-width: 48rem) {
		.hub-hero__confianza {
			justify-items: center;
		}
	}

	/* ==== Campo de teléfono con prefijo fijo +34 (España) ==================== */
	.tel-campo {
		display: flex;
		align-items: stretch;
		min-width: 0;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
		overflow: hidden;
	}

	.tel-campo:focus-within {
		border-color: var(--color-primary-500);
		box-shadow: 0 0 0 3px var(--color-primary-100);
	}

	.tel-campo:has(.tiene-error) {
		border-color: var(--color-accent-500);
	}

	.tel-campo__prefijo {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		padding-inline: var(--space-3);
		background: var(--color-surface-neutra);
		border-inline-end: 1px solid var(--color-border);
		color: var(--color-muted);
		font-size: var(--text-small);
		font-weight: 700;
		white-space: nowrap;
	}

	.tel-campo .tel-campo__input {
		flex: 1;
		min-width: 0;
		min-height: var(--touch-min);
		margin: 0;
		padding: var(--space-2) var(--space-3);
		border: 0;
		border-radius: 0;
		background: transparent;
		font-family: var(--font-body);
		font-size: var(--text-body);
		color: var(--color-ink);
	}

	.tel-campo .tel-campo__input:focus-visible {
		outline: none;
	}

	/* ==== Tarjeta "Te llamamos" (columna derecha del hero) ================== */
	.fllamada {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-6);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		box-shadow: var(--shadow-md);
		color: var(--color-ink);
		text-align: start;
	}

	.fllamada__titulo {
		margin: 0;
		color: var(--color-primary-700);
		font-family: var(--font-heading);
		font-size: var(--text-h3);
		font-weight: 800;
		line-height: 1.2;
	}

	.fllamada__ventajas {
		display: grid;
		gap: var(--space-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fllamada__ventajas li {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--color-body);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.fllamada__ventaja-icono {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 1.15rem;
		height: 1.15rem;
		color: var(--color-primary-500);
	}

	.fllamada__ventaja-icono svg {
		width: 100%;
		height: 100%;
		fill: currentColor;
	}

	.fllamada__form {
		display: grid;
		gap: var(--space-3);
	}

	/* El display:grid pisaría el atributo [hidden]; se reafirma para que el
	   paso 2 (y el paso 1 tras enviarse) queden ocultos de verdad. */
	.fllamada__form[hidden] {
		display: none;
	}

	/* Paso 2 del "Te llamamos": datos opcionales. */
	.fllamada__paso2-lema {
		margin: 0 0 var(--space-1);
		color: var(--color-body);
		font-size: var(--text-small);
		font-weight: 600;
		line-height: 1.35;
	}

	.fllamada__campo {
		display: grid;
		gap: 0.25rem;
	}

	.fllamada__campo label {
		color: var(--color-ink);
		font-size: var(--text-small);
		font-weight: 600;
	}

	.fllamada__campo input {
		min-height: var(--touch-min);
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
		color: var(--color-ink);
		font: inherit;
	}

	.fllamada__campo input:focus-visible {
		outline: none;
		border-color: var(--color-primary-500);
		box-shadow: 0 0 0 3px var(--color-primary-100);
	}

	.fllamada__campo input.tiene-error {
		border-color: var(--color-accent-500);
	}

	.fllamada__fila2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}

	.fllamada__consent {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		color: var(--color-muted);
		font-size: var(--text-small);
	}

	.fllamada__consent input {
		margin-block-start: 0.15em;
	}

	.fllamada__error {
		margin: 0;
		color: var(--color-accent-700);
		font-size: var(--text-small);
		font-weight: 600;
	}

	/* El botón de llamar es un contorno azul; se fuerza porque dentro del hero
	   .hub-hero .boton--secundario se pinta en blanco. */
	.fllamada .fllamada__llamar {
		gap: var(--space-2);
		background: transparent;
		border-color: var(--color-primary-500);
		color: var(--color-primary-700);
	}

	.fllamada .fllamada__llamar:hover {
		background: var(--color-primary-50);
		border-color: var(--color-primary-500);
		color: var(--color-primary-700);
	}

	.fllamada__llamar svg {
		width: 1.05rem;
		height: 1.05rem;
	}

	.fllamada__pie {
		margin: 0;
		color: var(--color-muted);
		font-size: var(--text-small);
		text-align: center;
	}

	.fllamada__gracias {
		margin: 0;
		font-weight: 600;
		text-align: center;
	}

	.fllamada__hp {
		position: absolute;
		left: -9999px;
	}

	/* ==== Detalle del plan: acordeón (coberturas / copagos / condiciones) ==== */
	/* Título de la sección de detalle: azul de marca y algo más grande, para
	   que separe visualmente este bloque del resto de la ficha. Se apunta con
	   :has() al h2 que precede a la intro (o al acordeón, en las landings de
	   perfil), sin tener que tocar cada plantilla. */
	.seccion h2:has(+ .detalle-plan__intro),
	.seccion h2:has(+ .detalle-plan) {
		color: var(--color-primary-700);
		font-size: var(--text-h1);
	}

	.detalle-plan__intro {
		max-width: 46rem;
		margin-block-start: var(--space-3);
		color: var(--color-muted);
		font-size: var(--text-body-l);
	}

	.detalle-plan__layout {
		display: grid;
		gap: var(--space-6);
		margin-block-start: var(--space-6);
		align-items: start;
	}

	@media (min-width: 60rem) {
		.detalle-plan__layout {
			grid-template-columns: minmax(0, 1fr) 22rem;
		}
	}

	.detalle-plan__principal {
		min-width: 0;
	}

	.detalle-plan {
		display: grid;
		gap: var(--space-3);
	}

	.detalle-plan__bloque {
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
		overflow: hidden;
	}

	.detalle-plan__titulo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-6);
		cursor: pointer;
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 700;
		color: var(--color-primary-900);
		list-style: none;
	}

	.detalle-plan__titulo::-webkit-details-marker {
		display: none;
	}

	.detalle-plan__titulo::after {
		content: "";
		flex-shrink: 0;
		width: 0.65rem;
		height: 0.65rem;
		border-right: 2px solid var(--color-primary-500);
		border-bottom: 2px solid var(--color-primary-500);
		transform: rotate(45deg);
		transition: transform var(--transition);
	}

	.detalle-plan__bloque[open] .detalle-plan__titulo::after {
		transform: rotate(-135deg);
	}

	.detalle-plan__lista {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		gap: var(--space-2) var(--space-6);
		margin: 0;
		padding: 0 var(--space-6) var(--space-6);
		list-style: none;
	}

	.detalle-plan__lista li {
		position: relative;
		padding-inline-start: 1.6rem;
		color: var(--color-body);
	}

	.detalle-plan__lista li::before {
		content: "✓";
		position: absolute;
		inset-inline-start: 0;
		color: var(--color-primary-500);
		font-weight: 800;
	}

	.detalle-plan__cuerpo {
		padding: 0 var(--space-6) var(--space-6);
		color: var(--color-body);
	}

	.tabla-copagos-envoltorio {
		overflow-x: auto;
	}

	.tabla-copagos {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--text-body);
	}

	.tabla-copagos th,
	.tabla-copagos td {
		padding: var(--space-2) var(--space-3);
		text-align: left;
		border-block-end: 1px solid var(--color-border);
	}

	.tabla-copagos thead th {
		font-size: var(--text-small);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.tabla-copagos th:last-child,
	.tabla-copagos td:last-child {
		text-align: right;
		white-space: nowrap;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		color: var(--color-primary-900);
	}

	.tabla-copagos tbody tr:nth-child(even) {
		background: var(--color-surface-neutra);
	}

	.tabla-copagos__lma td {
		border-block-start: 2px solid var(--color-primary-500);
		background: var(--color-primary-50);
		font-weight: 800;
		color: var(--color-primary-900);
	}

	.detalle-plan__cierre {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-6);
		border: 1px solid var(--color-primary-100);
		border-radius: var(--radius-lg);
		background: var(--color-primary-50);
	}

	@media (min-width: 60rem) {
		.detalle-plan__cierre {
			position: sticky;
			top: calc(var(--altura-cabecera) + var(--space-4));
		}
	}

	.detalle-plan__cierre-titulo {
		margin: 0 0 var(--space-2);
		font-size: var(--text-h3);
		color: var(--color-primary-900);
	}

	.detalle-plan__cierre-texto p {
		margin: 0;
		color: var(--color-body);
	}

	.detalle-plan__cierre .botonera--columna .boton {
		width: 100%;
	}

	.detalle-plan__comparar {
		margin-block-start: var(--space-4);
		font-weight: 600;
	}

	/* ==================================================================
	   Modalidades (mascotas): teaser en el hero + comparativa
	   ================================================================== */

	/* Tarjeta blanca en la 2.ª columna del hero: precio "desde" + las dos
	   modalidades de un vistazo + CTA. */
	.modalidades-hero {
		max-width: 32rem;
		margin-block-start: var(--space-4);
	}

	.modalidades-hero__cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}

	.modalidades-hero__card {
		padding: var(--space-4);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-white);
	}

	.modalidades-hero__card.es-destacada {
		border-color: var(--color-primary-500);
		background: var(--color-primary-50);
		box-shadow: 0 0 0 1px var(--color-primary-500);
	}

	.modalidades-hero__nombre {
		margin: 0;
		font-family: var(--font-heading);
		font-weight: 700;
		color: var(--color-primary-900);
	}

	.modalidades-hero__precio {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.25rem;
		margin: var(--space-1) 0;
	}

	.modalidades-hero__desde {
		font-size: var(--text-small);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-muted);
	}

	.modalidades-hero__cifra {
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 800;
		color: var(--color-primary-900);
	}

	.modalidades-hero__periodo {
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.modalidades-hero__lema {
		margin: 0;
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.modalidades-hero .boton {
		width: 100%;
	}

	/* Comparativa de las dos modalidades en la sección de detalle. */
	.modalidades {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}

	.modalidad {
		position: relative;
		display: flex;
		flex-direction: column;
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
	}

	.modalidad--destacada {
		border-color: var(--color-primary-500);
		box-shadow: 0 0 0 1px var(--color-primary-500);
	}

	.modalidad__sello {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: var(--space-4);
		transform: translateY(-50%);
		padding: 0.15rem var(--space-3);
		border-radius: var(--radius-pill);
		background: var(--color-primary-500);
		color: var(--color-white);
		font-size: var(--text-overline);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.modalidad__nombre {
		margin: 0;
		font-size: var(--text-h3);
		color: var(--color-primary-900);
	}

	.modalidad__precio {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 0.3rem;
		margin: var(--space-2) 0 0;
	}

	.modalidad__desde {
		font-size: var(--text-small);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-muted);
	}

	.modalidad__cifra {
		font-family: var(--font-heading);
		font-size: var(--text-h3);
		font-weight: 800;
		color: var(--color-primary-900);
	}

	.modalidad__periodo {
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.modalidad__lema {
		margin: var(--space-1) 0 var(--space-4);
		color: var(--color-muted);
	}

	.modalidad__lista {
		display: grid;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.modalidad__lista li {
		position: relative;
		padding-inline-start: 1.6rem;
		color: var(--color-body);
	}

	.modalidad__lista li::before {
		content: "✓";
		position: absolute;
		inset-inline-start: 0;
		color: var(--color-primary-500);
		font-weight: 800;
	}

	.modalidad__condiciones {
		margin-block-start: var(--space-4);
	}

	.modalidad__gancho {
		margin-block-start: var(--space-6);
		max-width: none;
	}

	/* ==================================================================
	   Blog: portada, archivos y entrada
	   ================================================================== */

	.blog-cabecera {
		padding-block-end: 0;
	}

	.blog-cabecera h1 {
		margin-block: var(--space-2) var(--space-3);
	}

	.blog-cabecera .entradilla {
		max-width: 46rem;
	}

	/* Tarjeta de entrada (portada y archivos). En la rejilla se estiran a la
	   misma altura; el flex-column deja la meta abajo. */
	.blog-card {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-white);
		transition: box-shadow var(--transition), transform var(--transition);
	}

	.blog-card:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}

	.blog-card__foto {
		display: block;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: var(--color-surface-neutra);
	}

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

	.blog-card__foto-hueco {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: rgb(255 255 255 / 55%);
		background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
	}

	.blog-card__foto-hueco svg {
		width: 3rem;
		height: 3rem;
	}

	.blog-card__cuerpo {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: var(--space-2);
		padding: var(--space-6);
	}

	.blog-card__categoria {
		align-self: start;
		font-size: var(--text-overline);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-primary-700);
		text-decoration: none;
	}

	.blog-card__categoria:hover {
		text-decoration: underline;
	}

	.blog-card__titulo {
		margin: 0;
		font-size: var(--text-h4);
		line-height: 1.25;
	}

	.blog-card__titulo a {
		color: var(--color-ink);
		text-decoration: none;
	}

	.blog-card__titulo a:hover {
		color: var(--color-primary-700);
	}

	.blog-card__extracto {
		margin: 0;
		color: var(--color-body);
	}

	.blog-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: auto;
		padding-block-start: var(--space-2);
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	/* Hero de la entrada: foto de fondo (destacada del post o la del blog),
	   velo de marca y texto en blanco, como el resto de heroes de la web. */
	.entrada-hero {
		position: relative;
		isolation: isolate;
		display: flex;
		align-items: center;
		min-height: 20rem;
		background-color: var(--color-primary-900);
		color: var(--color-white);
	}

	.entrada-hero__fondo {
		position: absolute;
		inset: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.entrada-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-primary-900) 60%, transparent) 0%,
			color-mix(in srgb, var(--color-primary-900) 86%, transparent) 100%
		);
	}

	.entrada-hero h1 {
		margin-block: var(--space-3) var(--space-4);
		color: var(--color-white);
	}

	.entrada-hero__categoria {
		display: inline-block;
		font-size: var(--text-overline);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-primary-100);
		text-decoration: none;
	}

	.entrada-hero__categoria:hover {
		text-decoration: underline;
	}

	.entrada-hero__datos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		font-size: var(--text-small);
		color: rgb(255 255 255 / 85%);
	}

	.entrada-hero__autor {
		font-weight: 600;
		color: var(--color-white);
	}

	.entrada-hero__revisado {
		font-style: italic;
	}

	/* Cuerpo de la entrada a 2 columnas en PC: artículo + CTA lateral sticky. */
	.entrada__layout {
		display: grid;
		gap: var(--space-8);
	}

	.entrada__principal {
		min-width: 0;
	}

	@media (min-width: 60rem) {
		.entrada__layout {
			grid-template-columns: minmax(0, 1fr) 21rem;
			column-gap: var(--space-8);
			align-items: start;
		}

		.entrada__lateral {
			position: sticky;
			top: calc(var(--altura-cabecera) + var(--space-4));
		}
	}

	/* Tabla de contenidos al inicio del artículo. */
	.entrada-toc {
		margin-block-end: var(--space-8);
		padding: var(--space-4) var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface-neutra);
	}

	.entrada-toc__titulo {
		margin: 0 0 var(--space-2);
		font-family: var(--font-heading);
		font-weight: 700;
		color: var(--color-primary-900);
	}

	.entrada-toc__lista {
		margin: 0;
		padding-inline-start: 1.2rem;
		color: var(--color-body);
	}

	.entrada-toc__lista a {
		color: var(--color-primary-700);
		text-decoration: none;
	}

	.entrada-toc__lista a:hover {
		text-decoration: underline;
	}

	/* Deja aire al saltar a un H2 desde el índice: descuenta la cabecera sticky
	   para que el título no quede tapado por el header. */
	.entrada__cuerpo h2 {
		scroll-margin-top: calc(var(--altura-cabecera) + var(--space-4));
	}

	/* Contenedor CTA lateral (sticky en PC). */
	.entrada-cta {
		padding: var(--space-6);
		border: 1px solid var(--color-primary-100);
		border-radius: var(--radius-lg);
		background: var(--color-primary-50);
	}

	.entrada-cta__titulo {
		margin: 0 0 var(--space-2);
		font-family: var(--font-heading);
		font-size: var(--text-h4);
		font-weight: 700;
		color: var(--color-primary-900);
	}

	.entrada-cta__texto {
		margin: 0 0 var(--space-4);
		color: var(--color-body);
	}

	.entrada-cta .botonera--columna .boton {
		width: 100%;
	}

	/* Cabecera de la entrada (estilos previos, por compatibilidad). */
	.entrada__encabezado {
		padding-block-end: 0;
	}

	.entrada__categoria {
		display: inline-block;
		margin-block-end: var(--space-3);
		font-size: var(--text-overline);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: var(--color-primary-700);
		text-decoration: none;
	}

	.entrada__categoria:hover {
		text-decoration: underline;
	}

	.entrada__encabezado h1 {
		margin-block: 0 var(--space-4);
	}

	.entrada__datos {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.entrada__autor {
		font-weight: 600;
		color: var(--color-ink);
	}

	.entrada__revisado {
		font-style: italic;
	}

	.entrada__portada {
		margin: var(--space-6) 0 0;
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	.entrada__portada img {
		display: block;
		width: 100%;
		height: auto;
	}

	.entrada__seccion-cuerpo {
		padding-block-start: var(--space-8);
	}

	.entrada__tags {
		margin-block-start: var(--space-8);
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--color-border);
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.entrada__tags-rotulo {
		font-weight: 600;
		color: var(--color-ink);
	}

	.entrada__tags a {
		display: inline-block;
		margin: 0 var(--space-1) var(--space-1) 0;
		color: var(--color-primary-700);
	}

	/* Caja de autor: señal E-E-A-T al pie de la entrada. */
	.autor-box {
		display: flex;
		gap: var(--space-4);
		margin-block-start: var(--space-8);
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-surface-neutra);
	}

	.autor-box__avatar {
		display: block;
		flex-shrink: 0;
	}

	.autor-box__nombre a {
		color: inherit;
		text-decoration: none;
	}

	.autor-box__nombre a:hover {
		text-decoration: underline;
	}

	.autor-box__img {
		display: block;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
	}

	.autor-box__rotulo {
		font-size: var(--text-small);
		color: var(--color-muted);
	}

	.autor-box__nombre {
		margin: 0;
		font-family: var(--font-heading);
		font-weight: 700;
		font-size: var(--text-body-l);
		color: var(--color-primary-900);
	}

	.autor-box__rol {
		margin: 0 0 var(--space-2);
		font-size: var(--text-small);
		font-weight: 600;
		color: var(--color-primary-700);
	}

	.autor-box__bio {
		margin: 0 0 var(--space-2);
		color: var(--color-body);
	}

	.autor-box__enlace {
		font-weight: 600;
		color: var(--color-primary-700);
		text-decoration: none;
	}

	.autor-box__enlace:hover {
		text-decoration: underline;
	}

	.relacionadas__titulo {
		margin-block-end: var(--space-6);
	}
}