/*!
Theme Name: Meed
Theme URI: https://josuebaloy.com
Author: jbmxcode
Author URI: https://josuebaloy.com
Description: Tema de bloques hecho a medida para Meed: una sola página, editable al completo desde Gutenberg, con formulario de contacto propio y sin depender de ningún plugin. Tipografías Baloo Bhai 2 y Nunito Sans autoalojadas.
Version: 1.4.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meed
Tags: one-column, block-patterns, full-site-editing, custom-colors, custom-logo, editor-style, accessibility-ready, translation-ready

Diseño original de Meed. Desarrollo: jbmxcode — https://josuebaloy.com
*/

/* =========================================================================
   1. Tokens
   -------------------------------------------------------------------------
   El diseño está entregado a 1920 px de ancho. `--u` es «un píxel del
   diseño»: vale 1px a 1920 y encoge de forma proporcional en pantallas más
   estrechas, con un suelo para que el texto no se quede diminuto. Así toda
   la maqueta se puede escribir con las medidas exactas del diseño
   (calc(94 * var(--u)) = los 94 px del titular) y se mantiene la proporción
   en cualquier resolución.
   ====================================================================== */

:root {
	--u: clamp(0.75px, 0.0520833vw, 1px);

	/* Color */
	--meed-azul: #1d83ff;
	--meed-azul-oscuro: #0f6fe3;
	--meed-amarillo: #ffb703;
	--meed-amarillo-oscuro: #e9a400;
	--meed-tinta: #323232;
	--meed-negro: #000;
	--meed-gris: #828282;
	--meed-gris-hondo: #5f6672;
	--meed-crema: #f1e8d7;
	--meed-blanco: #fff;

	--meed-azul-suave: #e0edfd;
	--meed-azul-tenue: #dbeaff;
	--meed-amarillo-suave: #fff1cc;
	--meed-amarillo-tenue: #fef3c6;
	--meed-verde-suave: #e3f0d4;
	--meed-verde-tenue: #eafcca;
	--meed-verde: #a5c63c;
	--meed-verde-icono: #68902d;
	--meed-verde-hondo: #1a2e05;
	--meed-violeta: #6036e2;
	--meed-violeta-suave: #ece7fe;
	--meed-ambar-icono: #b4540a;
	--meed-pizarra: #333a45;

	--meed-borde: #e3e3e3;
	--meed-sombra-tarjeta: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(23, 43, 77, .07);
	--meed-sombra-suave: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(23, 43, 77, .06);

	/* Tipografía */
	--meed-fuente-texto: var(--wp--preset--font-family--texto, "Nunito Sans", ui-sans-serif, system-ui, sans-serif);
	--meed-fuente-titulos: var(--wp--preset--font-family--titulos, "Baloo Bhai 2", "Nunito Sans", sans-serif);

	--meed-fs-h1: calc(92.5 * var(--u));
	--meed-fs-h2: calc(69 * var(--u));
	--meed-fs-h3: calc(32 * var(--u));
	--meed-fs-grande: calc(24 * var(--u));
	--meed-fs-base: calc(22 * var(--u));
	--meed-fs-media: calc(20 * var(--u));
	--meed-fs-chica: calc(16 * var(--u));
	--meed-fs-pequena: calc(15 * var(--u));
	--meed-lh-titular: 1.07;

	/* Medidas */
	--meed-contenedor: calc(1454 * var(--u));
	--meed-margen: calc(40 * var(--u));
	--meed-radio-tarjeta: calc(28 * var(--u));
	--meed-radio-pequeno: calc(18 * var(--u));
}

/* =========================================================================
   2. Base
   ====================================================================== */

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

body {
	/* El ancho de contenido de WordPress sigue la misma escala que el diseño. */
	--wp--style--global--content-size: var(--meed-contenedor);
	--wp--style--global--wide-size: var(--meed-contenedor);
	margin: 0;
	background: var(--meed-blanco);
	color: var(--meed-tinta);
	font-family: var(--meed-fuente-texto);
	font-size: var(--meed-fs-base);
	line-height: 1.55;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

img {
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--meed-fuente-titulos);
	font-weight: 800;
	line-height: 1.15;
	color: var(--meed-tinta);
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: calc(3 * var(--u)) solid var(--meed-azul);
	outline-offset: calc(3 * var(--u));
	border-radius: calc(6 * var(--u));
}

.meed-contacto :where(a, button, input, select, textarea):focus-visible,
.meed-hero :where(a, button):focus-visible,
.meed-header :where(a, button):focus-visible {
	outline-color: var(--meed-blanco);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: calc(12 * var(--u));
	left: calc(12 * var(--u));
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: calc(12 * var(--u)) calc(20 * var(--u));
	background: var(--meed-blanco);
	color: var(--meed-azul);
	border-radius: calc(10 * var(--u));
	box-shadow: var(--meed-sombra-tarjeta);
}

/* El editor no necesita el margen que WordPress da por defecto al lienzo. */
.meed-main {
	position: relative;
}

/* =========================================================================
   3. Piezas reutilizables
   ====================================================================== */

.meed-contenedor {
	width: min(var(--meed-contenedor), 100% - (var(--meed-margen) * 2));
	margin-inline: auto;
}

.meed-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* El grosor del trazo se afina según el tamaño al que se pinta cada icono,
   para que a simple vista pesen lo mismo que en el diseño. */
.meed-confianza__icono .meed-icon,
.meed-paso__icono .meed-icon {
	stroke-width: 1.5;
}

.meed-especialidad__icono .meed-icon,
.meed-nav__icono {
	stroke-width: 1.8;
}

.meed-destacado {
	background: none;
	color: var(--meed-azul);
}

.meed-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--u));
	padding: calc(15 * var(--u)) calc(38 * var(--u));
	border: 0;
	border-radius: 999px;
	font-family: var(--meed-fuente-texto);
	font-size: calc(22.5 * var(--u));
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.meed-boton--amarillo {
	background: var(--meed-amarillo);
	color: var(--meed-negro);
}

.meed-boton--amarillo:hover,
.meed-boton--amarillo:focus-visible {
	background: var(--meed-amarillo-oscuro);
	transform: translateY(calc(-2 * var(--u)));
}

/* Encabezado de sección a dos columnas: titular a la izquierda, texto a la
   derecha, tal y como aparece en el diseño. */
.meed-encabezado {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: start;
	column-gap: calc(200 * var(--u));
}

.meed-encabezado__titulo {
	font-size: var(--meed-fs-h2);
	line-height: var(--meed-lh-titular);
	letter-spacing: calc(-0.5 * var(--u));
}

.meed-encabezado__texto {
	max-width: calc(482 * var(--u));
	padding-top: calc(24 * var(--u));
	color: var(--meed-gris);
	font-size: var(--meed-fs-grande);
	line-height: 1.42;
}

.meed-encabezado__texto strong {
	color: var(--meed-azul);
	font-weight: 700;
}

/* =========================================================================
   4. Cabecera
   ====================================================================== */

/* El padding de la izquierda repite el margen del panel del hero, para que
   el menú se centre sobre la misma caja que su contenido. */
.meed-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	padding-block: calc(78 * var(--u)) 0;
	padding-left: calc(88 * var(--u));
}

/* Misma caja que el contenido del hero, para que el logo siga cayendo sobre
   el panel y el menú acompañe a los móviles. */
.meed-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(40 * var(--u));
	width: min(calc(1832 * var(--u)), 100%);
	margin-inline: auto;
	padding-left: calc(150 * var(--u));
	padding-right: calc(149 * var(--u));
}

.meed-header__logo {
	display: block;
	flex: none;
}

.meed-header__logo-img {
	width: calc(116 * var(--u));
	height: auto;
}

.meed-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	padding: 0;
	border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	background: transparent;
	color: var(--meed-blanco);
	font-size: calc(26 * var(--u));
	cursor: pointer;
}

.meed-header__toggle-cerrar {
	display: none;
}

.meed-header__toggle[aria-expanded="true"] .meed-header__toggle-abrir {
	display: none;
}

.meed-header__toggle[aria-expanded="true"] .meed-header__toggle-cerrar {
	display: block;
}

/*
 * Cabecera pegada: al bajar del hero vuelve desde arriba, pero sin barra a
 * todo el ancho. Lo único que se ve es la píldora del menú, con el azul a
 * medio gas; al pasar el ratón por encima se cierra del todo.
 */
.meed-header--fija {
	position: fixed;
	padding-block: calc(18 * var(--u));
	animation: meed-cabecera-baja .34s cubic-bezier(.2, .8, .3, 1) both;
}

.meed-header--fija .meed-header__logo {
	display: none;
}

.meed-header--fija .meed-header__inner {
	width: min(var(--meed-contenedor), 100% - (var(--meed-margen) * 2));
	margin-inline: auto;
	padding-inline: 0;
	justify-content: center;
}

.meed-header--fija .meed-nav--cabecera .meed-nav__list {
	background: rgba(20, 106, 214, .8);
	backdrop-filter: blur(calc(18 * var(--u))) saturate(140%);
	border-color: rgba(255, 255, 255, .3);
	box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(4, 30, 70, .2);
	transition: background-color .25s ease, border-color .25s ease;
}

.meed-header--fija .meed-nav--cabecera .meed-nav__list:hover,
.meed-header--fija .meed-nav--cabecera .meed-nav__list:focus-within {
	background: rgb(20, 106, 214);
	border-color: rgba(255, 255, 255, .5);
}

@keyframes meed-cabecera-baja {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.meed-header--fija {
		animation: none;
	}
}

/* --- Menú -------------------------------------------------------------- */

/*
 * Sin esto, el enlace con icono («Soy médico») se alinea por la línea base de
 * su primer hijo —el SVG, que no tiene— y queda 4 px más alto que el resto.
 */
.meed-nav__item {
	display: flex;
	align-items: center;
}

.meed-nav--cabecera .meed-nav__list {
	display: flex;
	align-items: center;
	gap: calc(36 * var(--u));
	padding: calc(12 * var(--u)) calc(16 * var(--u));
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
}

.meed-nav--cabecera .meed-nav__link {
	display: inline-flex;
	align-items: center;
	gap: calc(9 * var(--u));
	padding-inline: calc(8 * var(--u));
	color: var(--meed-blanco);
	font-size: calc(20 * var(--u));
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity .18s ease;
}

.meed-nav--cabecera .meed-nav__link:hover {
	opacity: .78;
}

.meed-nav--cabecera .meed-nav__icono {
	font-size: calc(22 * var(--u));
}

.meed-nav--cabecera .meed-nav__link--boton {
	padding: calc(11 * var(--u)) calc(17 * var(--u));
	border-radius: 999px;
	background: var(--meed-amarillo);
	color: var(--meed-negro);
	font-size: calc(19 * var(--u));
	font-weight: 800;
	transition: background-color .18s ease;
}

.meed-nav--cabecera .meed-nav__link--boton:hover {
	background: var(--meed-amarillo-oscuro);
	opacity: 1;
}

/* =========================================================================
   5. Hero
   ====================================================================== */

.meed-hero {
	position: relative;
	padding-top: calc(14 * var(--u));
}

/* El azul llega hasta donde haga falta; el que no pasa de los 1832 px del
   diseño es el contenido (ver .meed-hero__inner). */
.meed-hero__panel {
	position: relative;
	overflow: hidden;
	margin-left: calc(88 * var(--u));
	border-radius: calc(130 * var(--u)) 0 0 calc(130 * var(--u));
	background: var(--meed-azul);
	background-image:
		radial-gradient(120% 90% at 78% 18%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%),
		radial-gradient(90% 70% at 12% 92%, rgba(0, 40, 110, .10) 0%, rgba(0, 40, 110, 0) 60%);
}

/*
 * El fondo son dos circunferencias del diseño, recortadas por el panel. Se
 * dibujan con border-radius y no en SVG para que sigan siendo redondas aunque
 * el panel cambie de proporción. Centro y radio salen medidos del Home.jpg,
 * en coordenadas del panel (esquina superior izquierda).
 */
.meed-hero__deco {
	position: absolute;
	inset: 0;
	width: min(calc(1832 * var(--u)), 100%);
	margin-inline: auto;
	pointer-events: none;
}

.meed-hero__circulo {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
}

/* Centro (1677, -56), radio 751. */
.meed-hero__circulo--amarillo {
	top: calc(-807 * var(--u));
	left: calc(926 * var(--u));
	width: calc(1503 * var(--u));
	height: calc(1503 * var(--u));
	border-width: calc(2.5 * var(--u));
	border-color: var(--meed-amarillo);
}

/* Centro (-112, 1100), radio 474. */
.meed-hero__circulo--verde {
	top: calc(626 * var(--u));
	left: calc(-586 * var(--u));
	width: calc(949 * var(--u));
	height: calc(949 * var(--u));
	border-width: calc(2 * var(--u));
	border-color: var(--meed-verde);
}

/*
 * En pantallas anchas el contenido se queda en los 1832 px del diseño y se
 * centra dentro del panel: el azul es el que crece. Sin este tope los dos
 * móviles —uno anclado a la izquierda y otro a la derecha— se separaban a
 * medida que crecía la ventana. A 1920 el panel mide justo 1832, así que
 * centrar no cambia nada; solo entra en juego por encima.
 */
.meed-hero__inner {
	position: relative;
	display: block;
	width: min(calc(1832 * var(--u)), 100%);
	margin-inline: auto;
	min-height: calc(1052 * var(--u));
	padding-left: calc(150 * var(--u));
}

.meed-hero__col {
	position: relative;
	z-index: 2;
	max-width: calc(760 * var(--u));
	padding-top: calc(378 * var(--u));
	padding-bottom: calc(144 * var(--u));
}

.meed-hero__titulo {
	margin-bottom: calc(2 * var(--u));
	color: var(--meed-crema);
	font-size: var(--meed-fs-h1);
	line-height: 1.016;
	letter-spacing: calc(-1 * var(--u));
}

.meed-hero__titulo .meed-destacado {
	color: var(--meed-amarillo);
}

.meed-hero__texto {
	max-width: calc(566 * var(--u));
	margin-bottom: calc(26 * var(--u));
	color: var(--meed-blanco);
	font-size: calc(24.6 * var(--u));
	line-height: 1.75;
}

.meed-hero__acciones {
	margin-bottom: calc(37 * var(--u));
}

.meed-hero__social {
	display: flex;
	align-items: center;
	gap: calc(18 * var(--u));
}

.meed-avatares {
	display: flex;
	align-items: center;
	flex: none;
}

.meed-avatares__item + .meed-avatares__item {
	margin-left: calc(-12 * var(--u));
}

.meed-avatares__img {
	width: calc(52 * var(--u));
	height: calc(52 * var(--u));
	border-radius: 50%;
	border: calc(2 * var(--u)) solid var(--meed-azul);
	object-fit: cover;
}

.meed-hero__social-texto {
	max-width: calc(400 * var(--u));
	color: rgba(255, 255, 255, .92);
	font-size: var(--meed-fs-chica);
	line-height: 1.5;
}

.meed-hero__social-texto strong {
	font-weight: 700;
}

.meed-hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.meed-hero__movil {
	position: absolute;
}

.meed-hero__movil--fondo {
	top: calc(217 * var(--u));
	left: calc(1069 * var(--u));
	width: calc(355 * var(--u));
	filter: drop-shadow(0 calc(30 * var(--u)) calc(50 * var(--u)) rgba(4, 30, 70, .28));
}

.meed-hero__movil--frente {
	top: calc(190 * var(--u));
	right: calc(129 * var(--u));
	width: calc(398 * var(--u));
	filter: drop-shadow(0 calc(34 * var(--u)) calc(60 * var(--u)) rgba(4, 30, 70, .34));
}

.meed-hero__movil-img {
	width: 100%;
	height: auto;
}

/* --- Botones de tienda -------------------------------------------------- */

.meed-tiendas {
	display: flex;
	flex-wrap: wrap;
	gap: calc(21 * var(--u));
}

.meed-tiendas--centro {
	justify-content: center;
}

.meed-tiendas__btn {
	display: inline-flex;
	align-items: center;
	gap: calc(18 * var(--u));
	min-height: calc(61 * var(--u));
	padding: calc(8 * var(--u)) calc(30 * var(--u));
	border-radius: calc(14 * var(--u));
	background: var(--meed-amarillo);
	color: var(--meed-negro);
	transition: background-color .18s ease, transform .18s ease;
}

.meed-tiendas__btn:hover,
.meed-tiendas__btn:focus-visible {
	background: var(--meed-amarillo-oscuro);
	transform: translateY(calc(-2 * var(--u)));
}

.meed-tiendas__icono {
	font-size: calc(32 * var(--u));
}

.meed-tiendas__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.meed-tiendas__superior {
	font-size: calc(12.4 * var(--u));
	font-weight: 400;
}

.meed-tiendas__nombre {
	font-size: calc(16.6 * var(--u));
	font-weight: 800;
}

.meed-tiendas--compacto .meed-tiendas__btn {
	padding: calc(9 * var(--u)) calc(22 * var(--u));
	border-radius: calc(12 * var(--u));
}

.meed-tiendas--compacto .meed-tiendas__icono {
	font-size: calc(30 * var(--u));
}

.meed-tiendas--compacto .meed-tiendas__superior {
	font-size: calc(13 * var(--u));
}

.meed-tiendas--compacto .meed-tiendas__nombre {
	font-size: calc(20 * var(--u));
}

/* =========================================================================
   6. Barra de confianza
   ====================================================================== */

.meed-confianza.alignfull {
	position: relative;
	z-index: 3;
	margin-top: calc(-52 * var(--u));
	padding-left: calc(88 * var(--u));
}

/* La barra cuelga del contenido del hero, así que comparte su caja: si se
   quedara centrada en la ventana, en pantallas anchas no coincidiría con el
   texto ni con los móviles. */
.meed-confianza__contenedor {
	width: min(calc(1832 * var(--u)), 100%);
	margin-inline: auto;
}

.meed-confianza__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: calc(818 * var(--u));
	max-width: 100%;
	margin-left: calc(190 * var(--u));
	border-radius: calc(24 * var(--u));
	background: var(--meed-amarillo);
	box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(120, 82, 0, .18);
}

.meed-confianza__item {
	display: flex;
	align-items: center;
	gap: calc(16 * var(--u));
	min-height: calc(104 * var(--u));
	padding: calc(16 * var(--u)) calc(24 * var(--u));
	color: var(--meed-negro);
}

.meed-confianza__item + .meed-confianza__item {
	box-shadow: inset calc(1 * var(--u)) 0 0 rgba(0, 0, 0, .12);
}

.meed-confianza__icono {
	display: flex;
	font-size: calc(38 * var(--u));
}

.meed-confianza__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.meed-confianza__superior {
	font-size: calc(14.5 * var(--u));
}

.meed-confianza__inferior {
	font-size: calc(20.5 * var(--u));
	font-weight: 800;
}

/* =========================================================================
   7. Cómo funciona
   ====================================================================== */

.meed-pasos {
	padding-block: calc(92 * var(--u)) calc(60 * var(--u));
	counter-reset: meed-paso;
}

.meed-pasos .meed-encabezado {
	margin-bottom: calc(77 * var(--u));
	column-gap: calc(208 * var(--u));
}

.meed-pasos__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(76 * var(--u));
}

.meed-paso {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(45 * var(--u));
	padding: calc(74 * var(--u)) calc(30 * var(--u)) 0;
	border-radius: var(--meed-radio-tarjeta);
	background: var(--meed-blanco);
	box-shadow: var(--meed-sombra-tarjeta);
	counter-increment: meed-paso;
}

.meed-paso__icono {
	position: absolute;
	top: calc(-45 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(90 * var(--u));
	height: calc(90 * var(--u));
	border-radius: 50%;
	font-size: calc(47 * var(--u));
}

.meed-paso__numero {
	font-family: var(--meed-fuente-titulos);
	font-size: calc(62 * var(--u));
	font-weight: 800;
	line-height: 1;
}

.meed-paso__numero::before {
	content: counter(meed-paso, decimal-leading-zero);
}

.meed-paso__titulo {
	margin-top: calc(27 * var(--u));
	color: var(--meed-negro);
	font-size: var(--meed-fs-h3);
	text-align: center;
}

.meed-paso__raya {
	width: calc(38 * var(--u));
	height: calc(4 * var(--u));
	margin-top: calc(24 * var(--u));
	border-radius: 999px;
}

.meed-paso__texto {
	margin-top: calc(30 * var(--u));
	max-width: calc(300 * var(--u));
	color: var(--meed-gris);
	font-size: calc(22 * var(--u));
	line-height: 1.41;
	text-align: center;
}

.meed-paso__media {
	position: relative;
	display: block;
	width: 100%;
	/* El móvil queda pegado al borde inferior de la tarjeta, sea cual sea el
	   largo del texto de arriba. */
	margin-top: auto;
	padding-top: calc(48 * var(--u));
}

.meed-paso__mancha {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: calc(374 * var(--u));
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	z-index: 0;
}

.meed-paso__img {
	position: relative;
	z-index: 1;
	width: calc(294 * var(--u));
	margin-inline: auto;
	filter: drop-shadow(0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(4, 30, 70, .22));
}

.meed-paso--azul .meed-paso__icono { background: var(--meed-azul-suave); color: var(--meed-azul); }
.meed-paso--azul .meed-paso__numero { color: var(--meed-azul-suave); }
.meed-paso--azul .meed-paso__raya { background: var(--meed-azul); }
.meed-paso--azul .meed-paso__mancha { background: var(--meed-azul-suave); }

.meed-paso--amarillo .meed-paso__icono { background: var(--meed-amarillo-suave); color: var(--meed-amarillo); }
.meed-paso--amarillo .meed-paso__numero { color: var(--meed-amarillo-suave); }
.meed-paso--amarillo .meed-paso__raya { background: var(--meed-amarillo); }
.meed-paso--amarillo .meed-paso__mancha { background: var(--meed-amarillo-suave); }

.meed-paso--verde .meed-paso__icono { background: var(--meed-verde-suave); color: var(--meed-verde); }
.meed-paso--verde .meed-paso__numero { color: var(--meed-verde-suave); }
.meed-paso--verde .meed-paso__raya { background: var(--meed-verde); }
.meed-paso--verde .meed-paso__mancha { background: var(--meed-verde-suave); }

.meed-pasos__cta {
	margin-top: calc(50 * var(--u));
	text-align: center;
}

/* =========================================================================
   8. Especialidades
   ====================================================================== */

.meed-especialidades {
	padding-block: calc(61 * var(--u)) calc(98 * var(--u));
	background: linear-gradient(180deg, #fff 0%, #f4f9ff 28%, #e2eeff 66%, #cce4fc 100%);
}

.meed-especialidades .meed-encabezado {
	margin-bottom: calc(95 * var(--u));
	column-gap: calc(215 * var(--u));
}

.meed-especialidades__rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: calc(22 * var(--u));
}

.meed-especialidad__caja {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--u));
	min-height: calc(128 * var(--u));
	height: 100%;
	padding: calc(20 * var(--u)) calc(24 * var(--u));
	border-radius: calc(20 * var(--u));
	background: var(--meed-blanco);
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(23, 43, 77, .06);
	transition: transform .18s ease, box-shadow .18s ease;
}

a.meed-especialidad__caja:hover {
	transform: translateY(calc(-4 * var(--u)));
	box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(23, 43, 77, .12);
}

.meed-especialidad__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(56 * var(--u));
	height: calc(56 * var(--u));
	border-radius: calc(15 * var(--u));
	font-size: calc(30 * var(--u));
	flex: none;
}

.meed-especialidad__cuerpo {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--u));
}

.meed-especialidad__nombre {
	font-size: calc(20 * var(--u));
	font-weight: 700;
	line-height: 1.2;
	color: var(--meed-negro);
}

.meed-especialidad__texto {
	color: var(--meed-tinta);
	font-size: var(--meed-fs-pequena);
	line-height: 1.35;
}

.meed-especialidad--azul .meed-especialidad__icono { background: var(--meed-azul-tenue); color: var(--meed-azul); }
.meed-especialidad--amarillo .meed-especialidad__icono { background: var(--meed-amarillo-tenue); color: var(--meed-ambar-icono); }
.meed-especialidad--verde .meed-especialidad__icono { background: var(--meed-verde-tenue); color: var(--meed-verde-icono); }
.meed-especialidad--verde-oscuro .meed-especialidad__icono { background: var(--meed-verde-tenue); color: var(--meed-verde-hondo); }
.meed-especialidad--tinta .meed-especialidad__icono { background: var(--meed-azul-tenue); color: var(--meed-pizarra); }
.meed-especialidad--crema .meed-especialidad__icono { background: var(--meed-crema); color: var(--meed-ambar-icono); }

/* =========================================================================
   9. Verificación
   ====================================================================== */

.meed-verificacion {
	padding-block: calc(90 * var(--u)) 0;
	background: linear-gradient(180deg, #fff 0%, #fffdfa 34%, #fdf5eb 74%, #fdf0e4 100%);
	overflow: hidden;
}

.meed-verificacion__inner {
	display: grid;
	grid-template-columns: calc(700 * var(--u)) 1fr;
	align-items: start;
}

.meed-verificacion__col {
	padding-bottom: calc(54 * var(--u));
}

.meed-verificacion__titulo {
	font-size: var(--meed-fs-h2);
	line-height: var(--meed-lh-titular);
	letter-spacing: calc(-0.5 * var(--u));
}

.meed-verificacion__texto {
	max-width: calc(742 * var(--u));
	margin-top: calc(14 * var(--u));
	color: var(--meed-gris);
	font-size: var(--meed-fs-grande);
	line-height: 1.375;
}

.meed-verificacion__lista {
	display: flex;
	flex-direction: column;
	gap: calc(32 * var(--u));
	margin-top: calc(58 * var(--u));
}

.meed-garantia {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	width: calc(602 * var(--u));
	max-width: 100%;
	min-height: calc(144 * var(--u));
	padding: calc(22 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)) calc(41 * var(--u));
	border-radius: 999px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(120, 80, 30, .08);
}

.meed-garantia__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(78 * var(--u));
	height: calc(78 * var(--u));
	border-radius: 50%;
	font-size: calc(42 * var(--u));
	flex: none;
}

.meed-garantia__cuerpo {
	display: flex;
	flex-direction: column;
	gap: calc(6 * var(--u));
}

.meed-garantia__titulo {
	font-size: calc(24 * var(--u));
	font-weight: 700;
	line-height: 1.2;
}

.meed-garantia__texto {
	color: var(--meed-gris);
	font-size: var(--meed-fs-chica);
	line-height: 1.375;
}

.meed-garantia--azul .meed-garantia__icono { background: var(--meed-azul-suave); color: var(--meed-azul); }
.meed-garantia--azul .meed-garantia__titulo { color: var(--meed-azul); }
.meed-garantia--verde .meed-garantia__icono { background: var(--meed-verde-suave); color: var(--meed-verde); }
.meed-garantia--verde .meed-garantia__titulo { color: var(--meed-verde); }
.meed-garantia--violeta .meed-garantia__icono { background: var(--meed-violeta-suave); color: var(--meed-violeta); }
.meed-garantia--violeta .meed-garantia__titulo { color: var(--meed-violeta); }

.meed-verificacion__media {
	position: relative;
	align-self: stretch;
}

.meed-verificacion__foto {
	position: absolute;
	bottom: 0;
	left: calc(4 * var(--u));
	z-index: 1;
	width: calc(854 * var(--u));
	max-width: none;
}

.meed-verificacion__estrellas {
	position: absolute;
	top: calc(23 * var(--u));
	right: calc(12 * var(--u));
	z-index: 2;
	display: flex;
	gap: calc(13 * var(--u));
	color: var(--meed-amarillo);
	font-size: calc(36 * var(--u));
}

.meed-verificacion__sello {
	position: absolute;
	top: calc(409 * var(--u));
	right: calc(-71 * var(--u));
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: calc(14 * var(--u));
	padding: calc(16 * var(--u)) calc(28 * var(--u));
	border-radius: calc(18 * var(--u));
	background: var(--meed-blanco);
	box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(23, 43, 77, .14);
}

.meed-verificacion__sello-icono {
	display: flex;
	font-size: calc(40 * var(--u));
	color: var(--meed-violeta);
}

.meed-verificacion__sello-texto {
	display: flex;
	flex-direction: column;
	gap: calc(2 * var(--u));
	line-height: 1.2;
}

.meed-verificacion__sello-titulo {
	font-size: calc(21.5 * var(--u));
	font-weight: 700;
	color: var(--meed-negro);
}

.meed-verificacion__sello-subtitulo {
	font-size: calc(22 * var(--u));
	color: var(--meed-azul);
}

.meed-verificacion__sello-estado {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: calc(6 * var(--u));
	margin-top: calc(6 * var(--u));
	padding: calc(4 * var(--u)) calc(12 * var(--u));
	border-radius: 999px;
	background: #eef8e2;
	color: #6f9f22;
	font-size: calc(17 * var(--u));
	font-weight: 600;
}

.meed-verificacion__sello-estado .meed-icon {
	font-size: calc(14 * var(--u));
}

/* =========================================================================
   9 bis. Quiénes somos
   ====================================================================== */

.meed-nosotros {
	/*
	 * La sección lleva dos fondos y las tarjetas de misión/visión quedan a
	 * caballo entre los dos. Las tres medidas de abajo son las que colocan el
	 * corte y están encadenadas: el azul mide «hueco + salto + corte» por
	 * debajo de la presentación, y el bloque de misión y visión sube justo
	 * «salto + corte» para volver a nacer a un «hueco» del texto.
	 */

	/* Del final de la presentación al título «Misión». */
	--meed-nosotros-hueco: calc(80 * var(--u));
	/* Del título «Misión» al borde superior de su tarjeta (alto - solape). */
	--meed-nosotros-salto: calc(73 * var(--u));
	/* Azul que queda por debajo del borde superior de las tarjetas. */
	--meed-nosotros-corte: calc(224 * var(--u));
}

/* La firma de Meed queda marcada abajo a la izquierda del azul. */
.meed-nosotros__azul {
	background:
		url(images/nosotros.png) no-repeat left bottom / calc(880 * var(--u)) auto,
		linear-gradient(180deg, #1e83ff 0%, #054da7 100%);
	padding-block: calc(96 * var(--u))
		calc(var(--meed-nosotros-hueco) + var(--meed-nosotros-salto) + var(--meed-nosotros-corte));
	color: var(--meed-blanco);
}

/*
 * `flow-root` evita que el margen negativo de las tarjetas se propague hacia
 * arriba y arrastre consigo el fondo claro.
 */
.meed-nosotros__claro {
	position: relative;
	display: flow-root;
	padding-bottom: calc(55 * var(--u));
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #fef2e6 100%);
}

/* El texto largo se escribe en un solo campo y los saltos (Mayús + Intro) se
   imprimen como párrafos de verdad: al <br> no hay forma de darle margen. */
.meed-nosotros__texto + .meed-nosotros__texto {
	margin-top: calc(16 * var(--u));
}

.meed-mv__texto + .meed-mv__texto {
	margin-top: calc(14 * var(--u));
}

.meed-nosotros__cabeza {
	position: relative;
	display: grid;
	grid-template-columns: calc(320 * var(--u)) 1fr;
	column-gap: calc(88 * var(--u));
	align-items: start;
}

.meed-nosotros__titulo {
	color: var(--meed-blanco);
	font-size: var(--meed-fs-h2);
	line-height: var(--meed-lh-titular);
	letter-spacing: calc(-0.5 * var(--u));
}

.meed-nosotros__titulo .meed-destacado {
	color: var(--meed-amarillo);
}

/* El lema, en una tarjeta bajo el titular: mismo gesto que los reclamos
   amarillos del hero. */
.meed-lema-tarjeta {
	display: inline-flex;
	align-items: center;
	gap: calc(18 * var(--u));
	margin-top: calc(52 * var(--u));
	padding: calc(20 * var(--u)) calc(28 * var(--u));
	border-radius: calc(24 * var(--u));
	background: var(--meed-amarillo);
	color: var(--meed-negro);
	box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(4, 30, 70, .22);
}

.meed-lema-tarjeta__icono {
	display: flex;
	flex: none;
	font-size: calc(42 * var(--u));
}

.meed-lema-tarjeta__icono .meed-icon {
	stroke-width: 1.6;
}

.meed-lema-tarjeta__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.meed-lema-tarjeta__superior {
	font-size: calc(19 * var(--u));
}

.meed-lema-tarjeta__inferior {
	max-width: calc(230 * var(--u));
	font-size: calc(24 * var(--u));
	font-weight: 800;
}

/* El logo hace de sujeto de la frase: va encima del texto, no al lado. */
.meed-nosotros__logo {
	width: calc(76 * var(--u));
	height: auto;
	margin-bottom: calc(18 * var(--u));
}

.meed-nosotros__texto {
	font-size: calc(25 * var(--u));
	line-height: 1.4;
	color: rgba(255, 255, 255, .95);
}

.meed-nosotros__mv {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(44 * var(--u));
	margin-top: calc(-1 * (var(--meed-nosotros-salto) + var(--meed-nosotros-corte)));
}

/* Las dos tarjetas miden lo mismo aunque los textos no: la columna estira y la
   tarjeta ocupa lo que le sobra al título. */
.meed-mv {
	display: flex;
	flex-direction: column;
}

/* El título nace detrás de la tarjeta: se ve emerger de ella. */
.meed-mv__titulo {
	margin-bottom: calc(-34 * var(--u));
	color: var(--meed-blanco);
	font-size: calc(102 * var(--u));
	line-height: 1.05;
}

.meed-mv__tarjeta {
	position: relative;
	z-index: 1;
	flex: 1;
	padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));
	border-radius: calc(30 * var(--u));
	background: var(--meed-blanco);
	box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(6, 40, 100, .18);
}

.meed-mv__texto {
	color: var(--meed-tinta);
	font-size: calc(19 * var(--u));
	line-height: 1.6;
}

.meed-nosotros__valores-titulo {
	margin-top: calc(58 * var(--u));
	color: var(--meed-tinta);
	font-size: calc(50 * var(--u));
	line-height: 1.2;
	text-align: center;
}

.meed-nosotros__valores-titulo .meed-destacado {
	color: var(--meed-amarillo);
}

.meed-nosotros__valores {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(34 * var(--u)) calc(40 * var(--u));
	margin-top: calc(38 * var(--u));
}

.meed-valor {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.meed-valor__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: calc(18 * var(--u));
	color: var(--meed-amarillo);
	font-size: calc(72 * var(--u));
}

.meed-valor__icono .meed-icon {
	stroke-width: 1.6;
}

.meed-valor__titulo {
	font-size: calc(28 * var(--u));
	font-weight: 800;
	line-height: 1.25;
	color: var(--meed-tinta);
}

.meed-valor__texto {
	margin-top: calc(14 * var(--u));
	max-width: calc(260 * var(--u));
	font-size: calc(17 * var(--u));
	line-height: 1.5;
	color: var(--meed-gris-hondo);
}

/* =========================================================================
   10. Contacto
   ====================================================================== */

.meed-contacto {
	position: relative;
	padding-block: calc(136 * var(--u)) 0;
	isolation: isolate;
}

/* La foto de la consulta ya viene con el degradado violeta del diseño, así que
   se coloca tal cual. El degradado de refuerzo solo entra si se cambia la
   imagen por otra sin tratar, para que el texto blanco siga legible. */
.meed-contacto__fondo {
	position: absolute;
	inset: 0 0 calc(116 * var(--u));
	z-index: -2;
	overflow: hidden;
	background: #3b28e4;
}

.meed-contacto__fondo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.meed-contacto__inner {
	position: relative;
	text-align: center;
}

.meed-contacto__titulo {
	color: var(--meed-blanco);
	font-size: var(--meed-fs-h2);
	line-height: var(--meed-lh-titular);
}

.meed-contacto__titulo .meed-destacado {
	color: var(--meed-amarillo);
}

.meed-contacto__texto {
	max-width: calc(640 * var(--u));
	margin: 0 auto;
	color: rgba(255, 255, 255, .94);
	font-size: var(--meed-fs-grande);
	line-height: 1.375;
}

.meed-contacto__correo {
	margin-top: calc(40 * var(--u));
}

.meed-contacto__correo a {
	display: inline-block;
	padding: calc(13.5 * var(--u)) calc(45 * var(--u));
	border: calc(1.5 * var(--u)) solid var(--meed-amarillo);
	border-radius: 999px;
	color: var(--meed-amarillo);
	font-size: calc(18 * var(--u));
	line-height: 1.4;
	transition: background-color .18s ease, color .18s ease;
}

.meed-contacto__correo a:hover {
	background: var(--meed-amarillo);
	color: var(--meed-negro);
}

.meed-contacto__tarjeta {
	width: calc(812 * var(--u));
	max-width: 100%;
	margin: calc(32 * var(--u)) auto 0;
	padding: calc(56 * var(--u)) calc(72 * var(--u)) calc(58 * var(--u));
	border-radius: calc(34 * var(--u));
	background: var(--meed-blanco);
	box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(20, 12, 80, .22);
	text-align: left;
}

/* --- Formulario -------------------------------------------------------- */

.meed-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.meed-form__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(30 * var(--u));
}

.meed-campo {
	display: block;
	margin-bottom: calc(18 * var(--u));
}

.meed-campo__etiqueta {
	display: block;
	margin-bottom: calc(10 * var(--u));
	color: var(--meed-negro);
	font-size: var(--meed-fs-media);
	font-weight: 600;
	line-height: 1.2;
}

.meed-campo__control {
	width: 100%;
	padding: calc(10.5 * var(--u)) calc(20 * var(--u));
	border: 1px solid #dcdcdc;
	border-radius: calc(12 * var(--u));
	background: var(--meed-blanco);
	color: var(--meed-tinta);
	font-family: inherit;
	font-size: var(--meed-fs-media);
	line-height: 1.4;
	transition: border-color .18s ease, box-shadow .18s ease;
	appearance: none;
}

.meed-campo__control::placeholder {
	color: #b3b3b3;
}

.meed-campo__control:focus {
	border-color: var(--meed-azul);
	box-shadow: 0 0 0 calc(3 * var(--u)) rgba(29, 131, 255, .15);
	outline: none;
}

.meed-campo__control--area {
	min-height: calc(166 * var(--u));
	resize: vertical;
}

.meed-campo__control[aria-invalid="true"] {
	border-color: #d63638;
}

.meed-campo__select {
	position: relative;
	display: block;
}

.meed-campo__flecha {
	position: absolute;
	top: 50%;
	right: calc(22 * var(--u));
	transform: translateY(-50%);
	font-size: calc(22 * var(--u));
	color: var(--meed-negro);
	pointer-events: none;
}

.meed-campo__select .meed-campo__control {
	padding-right: calc(56 * var(--u));
	cursor: pointer;
}

.meed-form__enviar {
	margin-top: calc(17 * var(--u));
	text-align: center;
}

.meed-form__enviar .meed-boton {
	min-width: calc(262 * var(--u));
}

.meed-form__aviso {
	display: none;
	align-items: center;
	justify-content: center;
	gap: calc(14 * var(--u));
	margin-top: calc(22 * var(--u));
	padding: calc(14 * var(--u)) calc(20 * var(--u));
	border-radius: calc(12 * var(--u));
	font-size: var(--meed-fs-media);
	text-align: left;
}

.meed-form__aviso.is-visible {
	display: flex;
}

.meed-form__aviso--exito {
	background: #eef8e2;
	color: #4d7c0f;
}

.meed-form__aviso--error {
	background: #fdeceb;
	color: #b32d2e;
	justify-content: center;
	text-align: center;
}

/* El visto solo sale cuando el mensaje ha salido de verdad. */
.meed-form__aviso-icono {
	display: none;
	flex: none;
	width: calc(38 * var(--u));
	height: calc(38 * var(--u));
}

.meed-form__aviso-icono svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.meed-form__aviso--exito .meed-form__aviso-icono {
	display: block;
	animation: meed-visto-entrar .45s cubic-bezier(.2, 1.5, .5, 1) both;
}

/* Los dos trazos se dibujan solos: primero el círculo, luego el palote. */
.meed-form__aviso--exito .meed-form__aviso-circulo {
	stroke-dasharray: 145;
	stroke-dashoffset: 145;
	animation: meed-dibujar .5s ease-out .05s forwards;
}

.meed-form__aviso--exito .meed-form__aviso-visto {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: meed-dibujar .3s ease-out .42s forwards;
}

@keyframes meed-dibujar {
	to { stroke-dashoffset: 0; }
}

@keyframes meed-visto-entrar {
	from { transform: scale(.4); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* Botón mientras se envía: rueda girando y el texto contando lo que pasa. */
.meed-form__cargador {
	display: none;
	flex: none;
	width: calc(21 * var(--u));
	height: calc(21 * var(--u));
	border: calc(3 * var(--u)) solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: meed-girar .7s linear infinite;
}

.meed-form.is-enviando .meed-form__cargador {
	display: block;
}

.meed-form.is-enviando .meed-boton {
	opacity: .8;
	pointer-events: none;
	transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
	.meed-form__cargador,
	.meed-form__aviso--exito .meed-form__aviso-icono,
	.meed-form__aviso--exito .meed-form__aviso-circulo,
	.meed-form__aviso--exito .meed-form__aviso-visto {
		animation-duration: .01ms;
		animation-iteration-count: 1;
	}

	.meed-form__aviso--exito .meed-form__aviso-circulo,
	.meed-form__aviso--exito .meed-form__aviso-visto {
		stroke-dashoffset: 0;
	}
}

/* =========================================================================
   11. Llamada final
   ====================================================================== */

.meed-descarga {
	padding-block: calc(141 * var(--u)) calc(14 * var(--u));
	text-align: center;
}

.meed-descarga__antetitulo {
	color: var(--meed-tinta);
	font-size: var(--meed-fs-media);
}

.meed-descarga__titulo {
	margin-top: calc(8 * var(--u));
	font-size: var(--meed-fs-h2);
	line-height: 1.29;
}

.meed-descarga__texto {
	margin-top: 0;
	color: var(--meed-tinta);
	font-size: var(--meed-fs-grande);
	line-height: 1.96;
}

.meed-descarga__acciones {
	margin-top: calc(27 * var(--u));
}

/* =========================================================================
   12. Pie
   ====================================================================== */

.meed-pie {
	position: relative;
	padding-block: calc(183 * var(--u)) calc(384 * var(--u));
	overflow: hidden;
}

.meed-pie__marca {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(calc(-50% + 60 * var(--u)));
	width: calc(1240 * var(--u));
	z-index: 0;
	pointer-events: none;
}

.meed-pie__marca-img {
	width: 100%;
	height: auto;
}

.meed-pie .meed-contenedor {
	position: relative;
	z-index: 1;
	/* La barra del pie es más ancha que el contenedor del resto de secciones. */
	width: min(calc(1534 * var(--u)), 100% - (var(--meed-margen) * 2));
}

.meed-pie__barra {
	display: flex;
	align-items: center;
	gap: calc(28 * var(--u));
	width: calc(1534 * var(--u));
	max-width: 100%;
	margin-inline: auto;
	min-height: calc(130 * var(--u));
	padding: calc(11 * var(--u)) calc(84 * var(--u));
	border-radius: 999px;
	background: var(--meed-amarillo);
}

.meed-pie__logo {
	flex: none;
}

.meed-pie__logo-img {
	width: calc(78 * var(--u));
	height: auto;
}

.meed-pie__aviso {
	white-space: nowrap;
	color: var(--meed-tinta);
	font-size: var(--meed-fs-chica);
}

.meed-pie__menu {
	margin-left: auto;
}

.meed-nav--pie .meed-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(38 * var(--u));
}

.meed-nav--pie .meed-nav__link {
	color: var(--meed-tinta);
	font-size: calc(18 * var(--u));
	white-space: nowrap;
	transition: opacity .18s ease;
}

.meed-nav--pie .meed-nav__link:hover {
	opacity: .7;
	text-decoration: underline;
}

/* =========================================================================
   13. Páginas interiores (404, blog, páginas sueltas)
   ====================================================================== */

/* Fuera de la portada no hay bloque azul detrás de la cabecera, así que deja
   de flotar y se apoya sobre su propio fondo. */
body:not(.home) .meed-header {
	position: relative;
	background: var(--meed-azul);
	padding-block: calc(26 * var(--u));
	padding-left: 0;
}

body:not(.home) .meed-header__inner {
	width: auto;
	margin-left: 0;
	padding-inline: calc(90 * var(--u));
}

.meed-main--interior {
	padding-block: calc(90 * var(--u)) calc(120 * var(--u));
}

.meed-main--interior > * {
	max-width: var(--meed-contenedor);
}

.meed-main--interior :where(h1, h2, h3) {
	margin-bottom: calc(24 * var(--u));
}

.meed-main--interior :where(p, ul, ol) {
	margin-bottom: calc(20 * var(--u));
}

.meed-main--interior .wp-block-buttons {
	margin-top: calc(28 * var(--u));
}

.meed-titulo-interior {
	font-size: var(--meed-fs-h2);
}

/* =========================================================================
   14. Adaptación a pantallas menores
   ====================================================================== */

@media (max-width: 1200px) {
	.meed-header__inner {
		padding-left: calc(150 * var(--u));
		padding-right: calc(60 * var(--u));
	}

	.meed-pasos .meed-encabezado,
	.meed-especialidades .meed-encabezado {
		padding-left: 0;
		column-gap: calc(60 * var(--u));
	}

	.meed-verificacion__inner {
		grid-template-columns: 1fr calc(520 * var(--u));
	}

	.meed-verificacion__foto {
		width: calc(560 * var(--u));
	}
}

@media (max-width: 1023px) {
	:root {
		--u: 1px;
		--meed-fs-h1: clamp(40px, 13.8vw, 62px);
		--meed-fs-h2: clamp(32px, 5.4vw, 48px);
		--meed-fs-h3: 24px;
		--meed-fs-grande: 18px;
		--meed-fs-base: 17px;
		--meed-fs-media: 16px;
		--meed-fs-chica: 15px;
		--meed-fs-pequena: 14px;
		--meed-margen: 24px;
		--meed-contenedor: 720px;
	}

	/* Los círculos del hero, a escala de tableta. */
	.meed-hero__circulo--amarillo {
		top: -420px;
		left: 40px;
		width: 760px;
		height: 760px;
		border-width: 2px;
	}

	.meed-hero__circulo--verde {
		top: 320px;
		left: -300px;
		width: 480px;
		height: 480px;
		border-width: 1.5px;
	}

	/* Cabecera: menú desplegable */
	.meed-header {
		padding-block: 0;
		padding-left: 0;
	}

	/* Aquí el menú es un desplegable, no una píldora: la cabecera pegada
	   vuelve a ser una franja con su logo. */
	.meed-header--fija {
		padding-block: 0;
		background: rgba(20, 106, 214, .94);
		backdrop-filter: blur(12px);
		box-shadow: 0 10px 26px rgba(4, 30, 70, .18);
	}

	.meed-header--fija .meed-header__logo {
		display: block;
	}

	.meed-header--fija .meed-header__inner {
		width: auto;
		margin-inline: 0;
		padding: 12px var(--meed-margen);
		justify-content: space-between;
	}

	.meed-header__inner {
		width: auto;
		margin-left: 0;
		align-items: center;
		padding: 18px var(--meed-margen);
	}

	.meed-header__logo-img {
		width: 74px;
	}

	.meed-header__toggle {
		display: inline-flex;
		width: 46px;
		height: 46px;
		font-size: 22px;
	}

	.meed-header__menu {
		position: absolute;
		top: calc(100% - 6px);
		left: var(--meed-margen);
		right: var(--meed-margen);
		display: none;
		padding: 12px;
		border-radius: 22px;
		background: var(--meed-blanco);
		box-shadow: 0 24px 50px rgba(4, 30, 70, .22);
	}

	.meed-header__menu.is-open {
		display: block;
	}

	.meed-nav--cabecera .meed-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 0;
		border: 0;
	}

	.meed-nav--cabecera .meed-nav__link {
		justify-content: flex-start;
		padding: 14px 16px;
		border-radius: 14px;
		color: var(--meed-tinta);
		font-size: 17px;
	}

	.meed-nav--cabecera .meed-nav__link:hover {
		background: #f3f7ff;
		opacity: 1;
	}

	.meed-nav--cabecera .meed-nav__icono {
		font-size: 20px;
		color: var(--meed-azul);
	}

	.meed-nav--cabecera .meed-nav__link--boton {
		margin-top: 6px;
		justify-content: center;
		padding: 14px 20px;
	}

	/* Hero */
	.meed-hero {
		padding-top: 0;
	}

	.meed-hero__panel {
		margin-left: 0;
		border-radius: 0 0 40px 40px;
	}

	.meed-hero__inner {
		width: auto;
		margin-left: 0;
		min-height: 0;
		padding-left: 0;
	}

	.meed-hero__col {
		width: min(720px, 100% - (var(--meed-margen) * 2));
		max-width: none;
		margin-inline: auto;
		padding-top: 120px;
		padding-bottom: 24px;
		text-align: center;
	}

	.meed-hero__titulo {
		letter-spacing: -1px;
	}

	.meed-hero__texto {
		margin-inline: auto;
		max-width: 460px;
		font-size: 16px;
		line-height: 1.55;
	}

	.meed-tiendas {
		justify-content: center;
	}

	.meed-hero__social {
		flex-direction: column;
		gap: 14px;
	}

	.meed-hero__social-texto {
		max-width: 420px;
		font-size: 16px;
	}

	.meed-avatares__img {
		width: 44px;
		height: 44px;
	}

	.meed-hero__media {
		position: static;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 0;
		padding: 20px var(--meed-margen) 0;
	}

	.meed-hero__movil {
		position: relative;
		inset: auto;
	}

	.meed-hero__movil--fondo {
		width: min(38vw, 220px);
		margin-right: -8%;
		margin-bottom: 26px;
	}

	.meed-hero__movil--frente {
		width: min(46vw, 260px);
	}

	.meed-tiendas__btn {
		padding: 10px 20px;
		border-radius: 12px;
	}

	.meed-tiendas__icono {
		font-size: 28px;
	}

	.meed-tiendas__superior {
		font-size: 12px;
	}

	.meed-tiendas__nombre {
		font-size: 18px;
	}

	/* Confianza */
	.meed-confianza {
		margin-top: -34px;
	}

	/* .alignfull pesa más que la clase suelta: hay que repetirlo. */
	.meed-confianza.alignfull {
		padding-left: 0;
	}

	.meed-confianza__contenedor {
		width: min(var(--meed-contenedor), 100% - (var(--meed-margen) * 2));
		margin-inline: auto;
	}

	.meed-confianza__lista {
		width: 100%;
		margin-left: 0;
		border-radius: 20px;
	}

	/* En móvil los tres reclamos se leen mejor alineados a la izquierda. */
	.meed-confianza__item {
		min-height: 0;
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		padding: 16px 18px;
		text-align: left;
	}

	.meed-confianza__texto {
		align-items: flex-start;
	}

	/* Ancho fijo para que el texto de las tres filas arranque a la misma
	   sangría, en columna o en fila. */
	.meed-confianza__icono {
		width: 32px;
		justify-content: center;
		font-size: 28px;
	}

	.meed-confianza__superior {
		font-size: 14px;
	}

	.meed-confianza__inferior {
		font-size: 17px;
	}

	/* Encabezados de sección */
	.meed-encabezado {
		grid-template-columns: 1fr;
		row-gap: 18px;
		justify-content: stretch;
		text-align: center;
	}

	.meed-encabezado__texto {
		max-width: 620px;
		margin-inline: auto;
		padding-top: 0;
	}

	/* Pasos */
	.meed-pasos {
		padding-block: 64px 72px;
	}

	.meed-pasos .meed-encabezado {
		margin-bottom: 80px;
	}

	.meed-pasos__lista {
		grid-template-columns: 1fr;
		gap: 76px;
	}

	.meed-paso {
		margin-top: 40px;
		padding: 70px 24px 0;
		border-radius: 24px;
	}

	.meed-paso__icono {
		top: -40px;
		width: 80px;
		height: 80px;
		font-size: 36px;
	}

	.meed-paso__numero {
		font-size: 52px;
	}

	.meed-paso__titulo {
		margin-top: 26px;
	}

	.meed-paso__texto {
		margin-top: 20px;
		max-width: 320px;
	}

	.meed-paso__media {
		padding-top: 34px;
	}

	.meed-paso__img {
		width: min(240px, 70%);
	}

	.meed-paso__mancha {
		width: min(300px, 100%);
		bottom: 0;
	}

	.meed-pasos__cta {
		margin-top: 40px;
	}

	.meed-boton {
		padding: 14px 30px;
		font-size: 18px;
	}

	/* Especialidades */
	.meed-especialidades {
		padding-block: 72px 72px;
	}

	.meed-especialidades .meed-encabezado {
		margin-bottom: 48px;
	}

	.meed-especialidades__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.meed-especialidad__caja {
		min-height: 0;
		gap: 14px;
		padding: 18px;
		border-radius: 18px;
	}

	.meed-especialidad__icono {
		width: 46px;
		height: 46px;
		border-radius: 13px;
		font-size: 24px;
	}

	.meed-especialidad__nombre {
		font-size: 18px;
	}

	.meed-especialidad__texto {
		font-size: 15px;
	}

	/* Verificación */
	.meed-verificacion {
		padding-block: 64px 0;
	}

	.meed-verificacion__inner {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.meed-verificacion__col {
		padding-bottom: 0;
		text-align: center;
	}

	.meed-verificacion__texto {
		margin-inline: auto;
	}

	.meed-verificacion__lista {
		margin-top: 34px;
		gap: 16px;
	}

	.meed-garantia {
		width: 100%;
		min-height: 0;
		gap: 16px;
		padding: 18px 22px;
		border-radius: 26px;
		text-align: left;
	}

	.meed-garantia__icono {
		width: 56px;
		height: 56px;
		font-size: 30px;
	}

	.meed-garantia__titulo {
		font-size: 19px;
	}

	.meed-garantia__texto {
		font-size: 15px;
	}

	.meed-verificacion__media {
		display: flex;
		justify-content: center;
	}

	.meed-verificacion__foto {
		position: relative;
		bottom: auto;
		left: auto;
		width: min(420px, 88%);
		margin-left: 0;
		/* En móvil la foto pasa por delante de las estrellas. */
		z-index: 3;
	}

	.meed-verificacion__estrellas {
		top: 10px;
		right: 4%;
		z-index: 1;
		font-size: 26px;
	}

	.meed-verificacion__sello {
		top: auto;
		bottom: 12%;
		right: 0;
		/* Por delante de la foto, que en móvil sube por encima de las estrellas. */
		z-index: 4;
		padding: 12px 16px;
		border-radius: 14px;
	}

	.meed-verificacion__sello-icono {
		font-size: 30px;
	}

	.meed-verificacion__sello-titulo {
		font-size: 16px;
	}

	.meed-verificacion__sello-subtitulo {
		font-size: 15px;
	}

	.meed-verificacion__sello-estado {
		font-size: 13px;
	}

	/* Quiénes somos */
	/*
	 * Apiladas, las tarjetas ya no caben las dos sobre el corte: la segunda
	 * caería entera en el fondo claro con el título en blanco. En móvil el azul
	 * termina con la presentación y los títulos pasan a tinta.
	 */
	.meed-nosotros {
		--meed-nosotros-hueco: 44px;
		--meed-nosotros-salto: 0px;
		--meed-nosotros-corte: 0px;
	}

	.meed-nosotros__azul {
		background-size: 460px auto, auto;
	}

	.meed-nosotros__azul {
		padding-top: 64px;
	}

	.meed-nosotros__claro {
		padding-bottom: 72px;
	}

	.meed-nosotros__cabeza {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	.meed-nosotros__titulo {
		text-align: center;
	}

	.meed-nosotros__logo {
		width: 64px;
		margin-bottom: 12px;
	}

	.meed-nosotros__texto {
		font-size: 17px;
	}

	.meed-nosotros__texto + .meed-nosotros__texto,
	.meed-mv__texto + .meed-mv__texto {
		margin-top: 12px;
	}

	.meed-nosotros__mv {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.meed-mv__titulo {
		margin-bottom: -14px;
		color: var(--meed-tinta);
		font-size: 40px;
	}

	.meed-mv__tarjeta {
		padding: 28px 22px;
		border-radius: 22px;
	}

	.meed-mv__texto {
		font-size: 15px;
	}

	.meed-nosotros__valores-titulo {
		margin-top: 56px;
		font-size: 30px;
	}

	.meed-nosotros__valores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
		margin-top: 34px;
	}

	.meed-valor__icono {
		margin-bottom: 12px;
		font-size: 40px;
	}

	.meed-valor__titulo {
		font-size: 18px;
	}

	.meed-valor__texto {
		font-size: 14px;
	}

	/* Contacto */
	.meed-contacto {
		padding-block: 72px 0;
	}

	.meed-contacto__fondo {
		inset: 0 0 90px;
	}

	.meed-contacto__texto {
		font-size: 17px;
	}

	/* El correo nunca debe empujar el ancho de la pantalla. */
	.meed-contacto__correo a {
		display: block;
		max-width: 100%;
		padding: 11px 18px;
		font-size: 15px;
		overflow-wrap: anywhere;
	}

	.meed-contacto__tarjeta {
		width: 100%;
		margin-top: 30px;
		padding: 28px 22px 34px;
		border-radius: 26px;
	}

	.meed-form__fila {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.meed-campo {
		margin-bottom: 18px;
	}

	.meed-campo__etiqueta {
		margin-bottom: 8px;
		font-size: 16px;
	}

	.meed-campo__control {
		padding: 13px 16px;
		border-radius: 12px;
		font-size: 16px;
	}

	.meed-campo__control--area {
		min-height: 140px;
	}

	.meed-form__enviar .meed-boton {
		width: 100%;
		min-width: 0;
	}

	/* Llamada final y pie */
	.meed-descarga {
		padding-block: 120px 0;
	}

	.meed-descarga__texto {
		font-size: 17px;
		line-height: 1.6;
	}

	.meed-descarga__acciones {
		margin-top: 30px;
	}

	.meed-pie {
		padding-block: 90px 120px;
	}

	.meed-pie__marca {
		width: 130%;
		transform: translateX(-50%);
		opacity: .8;
	}

	.meed-pie__barra {
		width: 100%;
		flex-direction: column;
		gap: 16px;
		padding: 28px 24px;
		border-radius: 34px;
		text-align: center;
	}

	.meed-pie__menu {
		margin-left: 0;
	}

	.meed-nav--pie .meed-nav__list {
		justify-content: center;
		gap: 14px 22px;
	}

	.meed-nav--pie .meed-nav__link {
		font-size: 15px;
	}

	.meed-pie__aviso {
		white-space: normal;
		font-size: 15px;
	}

	.meed-main--interior {
		padding-block: 60px 60px;
	}
}

@media (max-width: 600px) {
	:root {
		--meed-margen: 20px;
	}

	.meed-hero__col {
		padding-top: 104px;
	}

	.meed-confianza__lista {
		grid-template-columns: 1fr;
	}

	/* Centrar cada fila por su cuenta dejaba los iconos a distinta sangría,
	   según lo largo que fuera cada texto. Apiladas van todas a la izquierda. */
	.meed-confianza__item {
		flex-direction: row;
		justify-content: flex-start;
		gap: 14px;
		padding: 16px 26px;
	}

	.meed-confianza__item + .meed-confianza__item {
		box-shadow: inset 0 1px 0 rgba(0, 0, 0, .12);
	}

	.meed-confianza__texto {
		align-items: flex-start;
	}

	.meed-especialidades__rejilla {
		grid-template-columns: 1fr;
	}

	.meed-verificacion__sello {
		bottom: 6%;
		right: 0;
	}

	.meed-descarga__acciones .meed-tiendas {
		flex-direction: column;
		align-items: center;
	}
}

/* =========================================================================
   15. Preferencias del sistema
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.meed-header,
	.meed-hero__deco,
	.meed-pie__marca {
		display: none !important;
	}
}