/**
 * PSLEGAL 2026 — hoja de estilo.
 *
 * Escrita desde cero sobre la maqueta que aprobó la firma en septiembre de
 * 2026. Las medidas de aquí salen de medir esa imagen, no de heredar el tema
 * anterior: el titular de la portada mide 46 px y no 64, los títulos de sección
 * 30 y no 48, y las tarjetas son planas. Esa diferencia de escala es la razón
 * por la que la versión anterior «no se parecía».
 *
 * Orden del archivo:
 *   0. Variables y base
 *   1. Composición y utilidades
 *   2. Tipografía
 *   3. Botones y enlaces
 *   4. Cabecera, menú y buscador
 *   5. Portada
 *   6. Encabezados de sección
 *   7. Tarjetas: especialidades, equipo, servicios, ayuda
 *   8. Imágenes
 *   9. Blog, formularios y preguntas
 *  10. Pie y WhatsApp flotante
 *  11. Animaciones
 *  12. Responsive
 */

/* =========================================================================
 * 0. Variables y base
 * ========================================================================= */

:root {
	/* Los cuatro colores del manual. El panel vuelve a escribirlos en cada
	   página, así que esto es solo lo que se ve si nadie toca nada. */
	--ps-navy: #1F2D52;
	--ps-navy-deep: #182340;
	--ps-navy-soft: #3A4A7A;
	--ps-paper: #FFFFFF;
	--ps-bone: #F6F7F9;
	--ps-gray-700: #4A4F5A;
	--ps-gray-500: #767C88;
	--ps-gray-200: #E6E6EA;
	--ps-gray-100: #F2F3F5;

	--ps-accent: #FF7A00;
	--ps-accent-ink: #B75700;
	--ps-accent-soft: #FFE3C9;
	--ps-metal: linear-gradient(135deg, #FFB870 0%, #FF7A00 45%, #FFCA9E 60%, #DB6900 100%);

	--ps-cta: #FF7A00;
	--ps-cta-deep: #D66600;
	--ps-cta-soft: #FFD7B2;
	/*
	 * Tinta oscura y no blanca. Sobre el naranja #FF7A00 el blanco da 2,61 de
	 * contraste —el mínimo legible es 4,5— y el azul marino da 6,15. La maqueta
	 * lleva el texto en blanco; en un teléfono al sol no se lee.
	 */
	--ps-cta-ink: #16203C;

	--ps-wa: var(--ps-cta);
	--ps-wa-deep: var(--ps-cta-deep);
	--ps-wa-ink: var(--ps-cta-ink);

	--ps-radius: 4px;
	--ps-shell: 1220px;
	--ps-gutter: clamp(18px, 4vw, 48px);
	--ps-header-h: 118px;
	--ps-header-real: var(--ps-header-h);
	--ps-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ps-shadow: 0 1px 2px rgba(24, 35, 64, .04), 0 8px 24px rgba(24, 35, 64, .06);
	--ps-shadow-lg: 0 18px 46px rgba(24, 35, 64, .13);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ps-header-real) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ps-paper);
	color: var(--ps-navy);
	font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: .95rem;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--ps-cta);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Salto al contenido, para quien navega con el teclado. */
.ps-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ps-navy);
	color: #fff;
	padding: 12px 20px;
}
.ps-skip:focus { left: 12px; top: 12px; }

/* Texto solo para lectores de pantalla. */
.ps-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =========================================================================
 * 1. Composición y utilidades
 * ========================================================================= */

.ps-shell {
	width: 100%;
	max-width: var(--ps-shell);
	margin-inline: auto;
	padding-inline: var(--ps-gutter);
}

.ps-section { padding-block: clamp(52px, 6.4vw, 94px); }
.ps-section--tight { padding-block: clamp(34px, 4vw, 54px); }

.ps-band-bone { background: var(--ps-bone); }
.ps-band-navy { background: var(--ps-navy); color: #fff; }
.ps-band-navy :where(h1, h2, h3, .ps-h2, .ps-h3, .ps-display) { color: #fff; }
.ps-band-navy .ps-lead { color: rgba(255, 255, 255, .82); }
.ps-band-navy .ps-eyebrow { color: #fff; }

/* Retícula de dos columnas de texto e imagen, la de las páginas interiores. */
.ps-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

.ps-rule {
	width: 52px;
	height: 3px;
	background: var(--ps-accent);
	border-radius: 2px;
}

/* =========================================================================
 * 2. Tipografía
 * ========================================================================= */

/*
 * El antetítulo con la rayita naranja delante. En la maqueta aparece cinco
 * veces y es lo que marca el comienzo de cada bloque, así que va dentro del
 * propio antetítulo y no como elemento suelto que se pueda quedar huérfano.
 */
.ps-eyebrow {
	display: flex;
	align-items: center;
	gap: 13px;
	font-family: Poppins, sans-serif;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--ps-navy-soft);
	margin: 0 0 14px;
}
.ps-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	flex: none;
	background: var(--ps-accent);
}
.ps-sechead--center .ps-eyebrow,
.has-text-align-center.ps-eyebrow { justify-content: center; }

.ps-display {
	font-family: Lora, Georgia, serif;
	font-weight: 600;
	font-size: clamp(2.1rem, 3.45vw, 2.95rem);
	line-height: 1.16;
	letter-spacing: -.012em;
	color: var(--ps-navy);
	margin: 0;
}

.ps-h2 {
	font-family: Lora, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--ps-navy);
	margin: 0;
}

.ps-h3 {
	font-family: Lora, Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	line-height: 1.3;
	color: var(--ps-navy);
	margin: 0;
}

.ps-lead {
	font-size: clamp(.98rem, 1.1vw, 1.06rem);
	line-height: 1.72;
	color: var(--ps-gray-700);
	margin: 0;
}

.ps-body { font-size: .95rem; line-height: 1.78; color: var(--ps-gray-700); margin: 0; }
.ps-small { font-size: .82rem; line-height: 1.7; color: var(--ps-gray-500); margin: 0; }

.ps-disclaimer {
	font-size: .8rem;
	line-height: 1.7;
	color: var(--ps-gray-500);
	border-left: 2px solid var(--ps-gray-200);
	padding-left: 16px;
}

/* Cita destacada, la del recuadro claro de la maqueta. */
.ps-quote {
	background: var(--ps-bone);
	border-left: 3px solid var(--ps-accent);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 2.6vw, 30px);
}
.ps-quote__t {
	font-family: Lora, Georgia, serif;
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.55;
	color: var(--ps-navy);
	margin: 0;
}
/*
 * Quién lo dice. No tenía NINGUNA regla de color, así que heredaba el
 * `color: #fff` de la banda azul que lo envuelve... sobre una tarjeta clara.
 * Blanco sobre casi blanco: el nombre estaba ahí y no se leía.
 */
.ps-quote__a {
	display: block;
	margin-top: 12px;
	font-size: .78rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ps-accent-ink);
}

/* =========================================================================
 * 3. Botones y enlaces
 * ========================================================================= */

.ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: Poppins, sans-serif;
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	padding: .85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--ps-radius);
	background: var(--ps-cta);
	color: var(--ps-cta-ink);
	cursor: pointer;
	transition: background .3s, color .3s, border-color .3s, transform .3s var(--ps-ease);
}
.ps-btn:hover { background: var(--ps-cta-deep); color: var(--ps-cta-ink); transform: translateY(-1px); }

.ps-btn--grande { padding: 1rem 1.9rem; font-size: .94rem; }

/* Contorno, para el segundo camino. */
.ps-btn--ghost {
	background: transparent;
	color: var(--ps-navy);
	border-color: var(--ps-gray-200);
}
.ps-btn--ghost:hover {
	background: transparent;
	color: var(--ps-cta-deep);
	border-color: var(--ps-cta);
}

/* Azul sólido: el «Conoce más» oscuro de la maqueta. */
.ps-btn--navy { background: var(--ps-navy); color: #fff; }
.ps-btn--navy:hover { background: var(--ps-navy-deep); color: #fff; }

/* WhatsApp sigue al color de conversión salvo que el panel pida su verde. */
.ps-btn--wa { background: var(--ps-wa); color: var(--ps-wa-ink); }
.ps-btn--wa:hover { background: var(--ps-wa-deep); color: var(--ps-wa-ink); }
.ps-btn--wa .ps-wa-ico { width: 18px; height: 18px; flex: none; }

/* Contorno y WhatsApp a la vez: dos clases, para que no dependa del orden. */
.ps-btn--wa.ps-btn--ghost { background: transparent; color: var(--ps-navy); border-color: var(--ps-gray-200); }
.ps-btn--wa.ps-btn--ghost:hover { background: transparent; color: var(--ps-cta-deep); border-color: var(--ps-cta); }

/* Sobre cualquier banda azul, en blanco: el azul sobre azul no se ve. Va tanto
   para el hero como para las llamadas a la acción del final de cada página. */
.ps-hero .ps-btn--ghost,
.ps-band-navy .ps-btn--ghost,
.ps-hero .ps-btn--wa.ps-btn--ghost,
.ps-band-navy .ps-btn--wa.ps-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.ps-hero .ps-btn--ghost:hover,
.ps-band-navy .ps-btn--ghost:hover,
.ps-hero .ps-btn--wa.ps-btn--ghost:hover,
.ps-band-navy .ps-btn--wa.ps-btn--ghost:hover { color: var(--ps-cta); border-color: var(--ps-cta); }

/* Los iconos dentro de un botón, a tamaño de icono. Sin esto, un SVG sin
   ancho propio se estira hasta el tamaño del botón: pasó con el calendario de
   «Pide una videollamada». */
.ps-btn svg { width: 18px; height: 18px; flex: none; }
.ps-btn--grande svg { width: 20px; height: 20px; }
.ps-btn__fl { transition: transform .35s var(--ps-ease); }
.ps-btn:hover .ps-btn__fl { transform: translateX(4px); }

/* Fila de botones: centrada en ancho, a todo el ancho en el teléfono. */
.ps-btnrow {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* Enlace con flecha: «Ver todos los servicios →». */
.ps-verlink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: Poppins, sans-serif;
	font-size: .84rem;
	font-weight: 500;
	color: var(--ps-accent-ink);
	white-space: nowrap;
	transition: gap .35s var(--ps-ease), color .3s;
}
.ps-verlink:hover { gap: 14px; color: var(--ps-navy); }

/* Los botones del editor de bloques, con el mismo aspecto. */
.wp-block-button__link {
	font-family: Poppins, sans-serif;
	font-size: .86rem;
	font-weight: 600;
	border-radius: var(--ps-radius);
	padding: .85rem 1.6rem;
}
.is-style-ps-ghost .wp-block-button__link {
	background: transparent;
	color: var(--ps-navy);
	border: 1px solid var(--ps-gray-200);
}
.is-style-ps-ghost .wp-block-button__link:hover { color: var(--ps-cta-deep); border-color: var(--ps-cta); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================================
 * 4. Cabecera, menú y buscador
 * ========================================================================= */

.ps-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ps-paper);
	border-bottom: 1px solid var(--ps-gray-200);
	transition: box-shadow .35s, border-color .35s;
}
.ps-header.is-stuck { box-shadow: var(--ps-shadow); }

.ps-header__in {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 34px);
	min-height: var(--ps-header-h);
	padding-block: 10px;
}

/* --- Logotipo ---
   Grande a propósito: en la maqueta ocupa casi toda la altura de la cabecera y
   es la única marca que hay ahí arriba. */
.ps-logo { display: inline-flex; align-items: center; flex: none; }
.ps-logo-img {
	display: block;
	width: auto;
	height: clamp(72px, 7.2vw, 100px);
	max-height: 106px;
	transition: height .35s var(--ps-ease);
}
.ps-header.is-stuck .ps-logo-img { height: clamp(52px, 5.2vw, 68px); }

/* Si no hay logotipo cargado, el nombre escrito. */
.ps-logo:not(.ps-logo--img) {
	font-family: Lora, Georgia, serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ps-navy);
}

/* --- Menú --- */
.ps-nav { margin-left: auto; }

.ps-header .ps-nav :where(a, .wp-block-navigation-item__content) {
	font-family: Poppins, sans-serif;
	font-size: .86rem;
	font-weight: 500;
	color: var(--ps-navy);
	padding: 6px 0;
	position: relative;
	transition: color .3s;
}
.ps-nav .wp-block-navigation__container { gap: clamp(14px, 1.9vw, 28px); }
.ps-header .ps-nav :where(a, .wp-block-navigation-item__content):hover { color: var(--ps-cta-deep); }

/* El subrayado naranja de la página en la que estás, como en la maqueta. */
.ps-nav .current-menu-item > a::after,
.ps-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--ps-accent);
}

/*
 * WordPress trae CSS propio para su menú, con especificidad alta y pensado
 * para su propio panel superpuesto. Estas tres reglas lo desmontan. Están
 * documentadas en la bitácora del proyecto: son la causa de tres fallos
 * distintos que ya nos costaron semanas.
 */
.ps-nav .wp-block-navigation__responsive-container-open,
.ps-nav .wp-block-navigation__responsive-container-close { display: none !important; }

.ps-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; }

/* Desplegables del escritorio. */
.ps-nav .wp-block-navigation__submenu-container {
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-top: 2px solid var(--ps-accent);
	border-radius: 0 0 var(--ps-radius) var(--ps-radius);
	box-shadow: var(--ps-shadow-lg);
	padding: 6px 0;
	min-width: 232px;
}
.ps-header .ps-nav .wp-block-navigation__submenu-container :where(a, .wp-block-navigation-item__content) {
	display: block;
	padding: 9px 18px;
	font-size: .84rem;
	color: var(--ps-navy);
}
.ps-header .ps-nav .wp-block-navigation__submenu-container :where(a, .wp-block-navigation-item__content):hover {
	background: var(--ps-bone);
	color: var(--ps-cta-deep);
}

/* --- Buscador --- */
.ps-busca { position: relative; display: flex; align-items: center; flex: none; }
.ps-busca__b {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--ps-navy);
	cursor: pointer;
	border-radius: 50%;
	transition: background .3s, color .3s;
}
.ps-busca__b:hover { background: var(--ps-bone); color: var(--ps-cta-deep); }
.ps-busca__b svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ps-busca__x { display: none; }
.ps-busca.is-open .ps-busca__ico { display: none; }
.ps-busca.is-open .ps-busca__x { display: block; }

.ps-busca__f {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	display: none;
	align-items: center;
	gap: 6px;
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	box-shadow: var(--ps-shadow-lg);
	padding: 8px 10px;
	z-index: 30;
}
.ps-busca.is-open .ps-busca__f { display: flex; }
.ps-busca__f input {
	width: min(280px, 52vw);
	border: 0;
	outline: 0;
	font-family: Poppins, sans-serif;
	font-size: .92rem;
	color: var(--ps-navy);
	background: transparent;
	padding: 6px 4px;
}
.ps-busca__f button {
	border: 0;
	background: var(--ps-cta);
	color: var(--ps-cta-ink);
	width: 34px;
	height: 34px;
	border-radius: var(--ps-radius);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: none;
}
.ps-busca__f button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* --- Botón de la cabecera --- */
.ps-header__cta { flex: none; }
.ps-header__cta .ps-btn { padding: .82rem 1.5rem; }

/* Accesos rápidos del móvil y hamburguesa. */
.ps-header__quick { display: none; gap: 8px; margin-left: auto; }
.ps-quick {
	display: grid;
	place-items: center;
	height: 42px;
	padding-inline: 12px;
	gap: 8px;
	grid-auto-flow: column;
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	color: var(--ps-navy);
	font-size: .78rem;
	font-weight: 500;
}
.ps-quick--wa { background: var(--ps-wa); color: var(--ps-wa-ink); border-color: transparent; }
.ps-quick svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ps-quick--wa svg { fill: currentColor; stroke: none; }

.ps-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	background: transparent;
	cursor: pointer;
}
.ps-burger span { display: block; height: 2px; background: var(--ps-navy); transition: transform .3s, opacity .3s; }
.ps-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-burger.is-open span:nth-child(2) { opacity: 0; }
.ps-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El bloque de contacto que se mete dentro del menú abierto. */
.ps-menufoot { display: none; }
.ps-menufoot__datos { display: grid; gap: 10px; margin-top: 18px; }
.ps-menufoot__datos :where(a, span) { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.ps-menufoot svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }

/* =========================================================================
 * 5. Portada
 * ========================================================================= */

/*
 * El hero de la maqueta: banda azul de lado a lado, texto a la izquierda,
 * fotografía a la derecha sangrando hasta el borde y, pegada al margen, la
 * frase de confianza en líneas apiladas.
 */
.ps-hero {
	position: relative;
	background: var(--ps-navy);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.ps-hero__in {
	display: grid;
	/*
	 * Algo más de sitio para el texto que para la foto. Con las columnas casi
	 * iguales, «proteger tus derechos» no cabía en una línea y el titular se
	 * partía en tres, con «derechos» solo en la última.
	 */
	grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(24px, 3.2vw, 48px);
	min-height: clamp(400px, 46vw, 560px);
	/* Sin padding a la derecha: la foto tiene que llegar al borde. */
	padding-right: 0;
}
.ps-hero__text { padding-block: clamp(40px, 5vw, 68px); max-width: 100%; }
.ps-hero .ps-eyebrow { color: #fff; }
.ps-hero .ps-display { color: #fff; }
.ps-hero .ps-lead { color: rgba(255, 255, 255, .8); max-width: 44ch; margin-top: 20px; }

/* La palabra en color del titular.
   --ps-hl y no --ps-cta: el panel calcula --ps-hl comprobando que se lea sobre
   el azul. Con --ps-cta a secas, un color de botón azulado dejaba el titular
   con un hueco en medio. */
.ps-hl { color: var(--ps-hl, var(--ps-cta)); }

.ps-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/*
 * La fotografía ocupa toda la altura de la banda y se funde con el azul por su
 * borde izquierdo. Sin marco ni filete: en la maqueta no hay ninguno, y el
 * marco era lo que hacía que la versión anterior pareciera otra cosa.
 */
.ps-hero__media {
	position: relative;
	align-self: stretch;
	min-height: clamp(280px, 34vw, 460px);
	/*
	 * De la segunda columna hasta el borde: en la maqueta la fotografía llega
	 * al final de la banda y la frase de confianza va encima, no al lado. Con
	 * la foto parada antes quedaba un rectángulo de azul plano a la derecha que
	 * era justo lo que hacía que «no se pareciera».
	 */
	grid-column: 2 / -1;
	grid-row: 1;
}
.ps-hero__media .ps-media,
.ps-hero__media figure {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	aspect-ratio: auto !important;
	background: transparent;
}
.ps-hero__media img,
.ps-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El degradado que funde la foto con la banda. */
.ps-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, var(--ps-navy) 0%, rgba(31, 45, 82, .8) 20%, rgba(31, 45, 82, .1) 58%, rgba(31, 45, 82, .5) 88%, rgba(31, 45, 82, .72) 100%);
}

/*
 * La frase de la derecha. En líneas apiladas, no girada: en la maqueta se lee
 * de izquierda a derecha, una palabra por línea.
 */
.ps-hero__vert {
	position: relative;
	grid-column: 3;
	grid-row: 1;
	z-index: 3;
	margin: 0 var(--ps-gutter) 0 0;
	padding-left: 18px;
	border-left: 2px solid var(--ps-cta);
	font-family: Poppins, sans-serif;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .24em;
	line-height: 2.2;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
	white-space: nowrap;
}

/* Retícula tenue de fondo. */
.ps-grid-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .5;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 96px 96px;
}

/* --- Banda de valores --- */
.ps-valores { background: var(--ps-navy); color: #fff; padding-block: clamp(18px, 2.4vw, 28px); }
.ps-valores__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2.8vw, 40px);
	flex-wrap: wrap;
}
.ps-valores__lista {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(12px, 2.4vw, 34px);
	flex: 1 1 auto;
}
.ps-valor {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: Poppins, sans-serif;
	font-size: .85rem;
	color: rgba(255, 255, 255, .93);
	padding-right: clamp(12px, 2.4vw, 34px);
	border-right: 1px solid rgba(255, 255, 255, .2);
}
.ps-valor:last-child { border-right: 0; padding-right: 0; }
.ps-valor svg { width: 22px; height: 22px; flex: none; stroke: #fff; fill: none; stroke-width: 1.4; }

.ps-valores__marca {
	margin: 0;
	padding-left: clamp(14px, 2.2vw, 28px);
	border-left: 2px solid var(--ps-cta);
	font-family: Lora, Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .11em;
	line-height: 1.2;
	color: #fff;
}
.ps-valores__marca span {
	display: block;
	font-family: Poppins, sans-serif;
	font-size: .55rem;
	font-weight: 400;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
	margin-top: 5px;
}

/* Pasos numerados. */
.ps-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.ps-step {
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 2.6vw, 30px);
	text-align: center;
}
.ps-step__n {
	width: 42px;
	height: 42px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ps-navy);
	color: #fff;
	font-family: Lora, Georgia, serif;
	font-weight: 600;
}
.ps-step:last-child .ps-step__n { background: var(--ps-cta); color: var(--ps-cta-ink); }
.ps-step__t { font-family: Lora, Georgia, serif; font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.ps-step__d { font-size: .88rem; line-height: 1.7; color: var(--ps-gray-500); margin: 0; }

/* =========================================================================
 * 6. Encabezados de sección
 * ========================================================================= */

.ps-sechead { margin-bottom: clamp(28px, 3.4vw, 42px); }
.ps-sechead .ps-lead { margin-top: 14px; max-width: 68ch; }
.ps-sechead--center { text-align: center; margin-inline: auto; }
.ps-sechead--center .ps-lead { margin-inline: auto; }

/* Título a la izquierda y enlace a la derecha, como en la maqueta. */
.ps-sechead--fila {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

/* Cabecera de las páginas interiores: banda azul corta. */
.ps-pagehead {
	background: var(--ps-navy);
	color: #fff;
	padding-block: clamp(44px, 5.4vw, 78px);
	position: relative;
	overflow: hidden;
}
.ps-pagehead :where(h1, .ps-display) { color: #fff; }
.ps-pagehead .ps-eyebrow { color: #fff; }
.ps-pagehead .ps-lead { color: rgba(255, 255, 255, .8); margin-top: 16px; max-width: 70ch; }

/* =========================================================================
 * 7. Tarjetas
 * ========================================================================= */

/* --- Especialidades ---
   Planas: fondo muy claro, filete de un píxel, icono naranja suelto. En la
   maqueta no hay sombras ni bordes marcados. */
.ps-areas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(14px, 1.7vw, 22px);
}
.ps-area {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 2.3vw, 26px);
	background: var(--ps-bone);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	transition: background .35s, border-color .35s, transform .45s var(--ps-ease);
}
.ps-area:hover { background: var(--ps-paper); border-color: var(--ps-accent); transform: translateY(-4px); }
.ps-area__ico { width: 34px; height: 34px; color: var(--ps-accent); }
.ps-area__ico svg { width: 32px; height: 32px; stroke: var(--ps-accent); fill: none; stroke-width: 1.4; }
.ps-area__t {
	font-family: Lora, Georgia, serif;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--ps-navy);
}
.ps-area__d { font-size: .84rem; line-height: 1.66; color: var(--ps-gray-500); }
.ps-area__go {
	margin-top: auto;
	padding-top: 6px;
	font-size: .78rem;
	font-weight: 500;
	color: var(--ps-accent-ink);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: gap .35s var(--ps-ease);
}
.ps-area:hover .ps-area__go { gap: 12px; }

.ps-areas-total { margin-top: 20px; font-size: .82rem; color: var(--ps-gray-500); }

/* Lista larga de especialidades, en filas numeradas. */
.ps-rows { border-top: 1px solid var(--ps-gray-200); }
.ps-row {
	display: grid;
	grid-template-columns: 48px 110px minmax(0, 1fr) minmax(0, 1.05fr) 24px;
	align-items: center;
	gap: 18px;
	padding: clamp(18px, 2vw, 26px) 0;
	border-bottom: 1px solid var(--ps-gray-200);
	transition: background .35s, padding-left .35s var(--ps-ease);
}
.ps-row:hover { background: var(--ps-bone); padding-left: 12px; }
.ps-row__n { font-family: Lora, Georgia, serif; font-size: .95rem; color: var(--ps-accent-ink); }

/* La miniatura de cada especialidad. La columna está siempre, haya foto o no:
   si apareciera solo en unas filas, el listado se desalinearía entero. Sin
   foto va el icono de la materia sobre fondo claro. */
.ps-row__ph {
	display: block;
	width: 110px;
	aspect-ratio: 4 / 3;
	border-radius: var(--ps-radius);
	overflow: hidden;
	background: var(--ps-bone);
	border: 1px solid var(--ps-gray-200);
}
.ps-row__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-row__ph--ico { display: grid; place-items: center; color: var(--ps-accent-ink); }
.ps-row__ph--ico svg { width: 30px; height: 30px; flex: none; }

.ps-row__t { font-family: Lora, Georgia, serif; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 600; color: var(--ps-navy); }
.ps-row__d { font-size: .86rem; line-height: 1.66; color: var(--ps-gray-500); }
.ps-row__go { color: var(--ps-accent-ink); justify-self: end; transition: transform .45s var(--ps-ease); }
.ps-row:hover .ps-row__go { transform: translateX(6px); }

/* Página de una especialidad. */
/*
 * Texto y fotografía en dos columnas, NO con flotación.
 *
 * Con `float: right` el texto envuelve la imagen: los primeros párrafos salen
 * cortos y, al pasar la altura de la foto, se alargan de golpe. Un mismo
 * bloque con dos anchos distintos se lee desordenado, y así estaba. Una
 * rejilla le da al texto un ancho constante de arriba abajo.
 */
/*
 * La página de la especialidad, en columna estrecha y centrada.
 *
 * No es solo estética. Las fotografías que tenemos miden unos 415 px de ancho
 * en origen; a 1120 px había que ampliarlas casi tres veces y se veían
 * blandas. A 760 px la ampliación baja a menos del doble y aguantan. Si algún
 * día llegan los originales a tamaño completo, esta medida se puede subir.
 */
.ps-area-detalle { max-width: 760px; margin-inline: auto; }
.ps-area-detalle__top { display: block; }
/*
 * Texto justificado, con partición de palabras.
 *
 * Lo pidió Juanka. Justificar sin `hyphens: auto` es una mala idea: para
 * cuadrar los dos bordes el navegador estira los espacios y aparecen los
 * «ríos» blancos que atraviesan el párrafo. Con la partición activada —y el
 * documento en español, que ya lo declara el <html lang="es">— el navegador
 * corta las palabras largas y los espacios se quedan quietos.
 */
.ps-area-detalle__texto {
	min-width: 0;
	/* Columna de lectura centrada bajo la banda. A todo lo ancho (1120 px) un
	   párrafo pasa de 110 caracteres por línea y el ojo se pierde al saltar de
	   renglón; 72ch deja unos 70, que es la medida cómoda de toda la vida. */
	max-width: 72ch;
	margin-inline: auto;
}
.ps-area-detalle__texto p {
	text-align: justify;
	hyphens: auto;
}

/*
 * La clase va DOBLADA a propósito, y esto no es un capricho de estilo.
 *
 * La figura lleva también la clase `.ps-media`, que más abajo en este mismo
 * archivo declara `width: 100%`. Las dos reglas tenían la misma especificidad
 * (una clase), así que ganaba la que está después: `.ps-media`. Doblar la
 * clase sube la especificidad a dos y la regla gana. Es el mismo recurso que
 * ya usa la cabecera contra el CSS del bloque de navegación del núcleo.
 */
/*
 * La fotografía, como banda ancha bajo el titular.
 *
 * Tercera versión, y la primera que se sostiene. Flotando a la derecha partía
 * el texto en dos anchos. En una columna lateral fija dejaba un hueco vacío
 * enorme debajo cuando el texto era largo, y estrechaba la lectura. Como banda
 * a todo lo ancho no deja huecos, ilustra de qué va la página antes de leer
 * una línea —que es justo lo que pidió la firma— y el texto recupera un ancho
 * cómodo debajo.
 *
 * La proporción es panorámica a propósito: una imagen de 3:2 a 1120 px de
 * ancho mide 745 px de alto y se come la pantalla entera.
 */
.ps-area-detalle__foto.ps-area-detalle__foto {
	width: 100%;
	margin: 0 0 clamp(26px, 3vw, 38px);
	aspect-ratio: 2.6 / 1;
	border-radius: var(--ps-radius);
	overflow: hidden;
	/* Nada de `position: sticky` aquí. Lo probé y, al estar la foto más arriba
	   en la página que el desplazamiento pegajoso, el navegador la empuja
	   hacia abajo ya en reposo: quedaba 41 px por debajo del texto sin que
	   nadie hubiera movido la rueda. */
}
.ps-area-detalle__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-area-puntos { clear: both; text-align: center; margin-top: 8px; }
.ps-area-puntos .ps-rule { margin: 34px auto 24px; }
.ps-area-puntos__t { margin-bottom: 20px; }
.ps-area-puntos .ps-cards { text-align: left; max-width: 860px; margin-inline: auto; }

.ps-cards { display: grid; gap: 0 clamp(20px, 3vw, 44px); }
.ps-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Fila de dato con icono: contacto, «qué incluye». */
.ps-contact__i {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ps-gray-200);
}
.ps-contact__i svg { width: 19px; height: 19px; flex: none; margin-top: 3px; stroke: var(--ps-accent); fill: none; stroke-width: 1.5; }
.ps-contact__l { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ps-gray-500); }
.ps-contact__v { display: block; font-size: .94rem; color: var(--ps-navy); }

/* --- Equipo: rostro en círculo --- */
.ps-people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(24px, 3vw, 44px);
	max-width: 980px;
	margin-inline: auto;
}
/*
 * Ficha del abogado: retrato a la izquierda, texto a la derecha.
 *
 * Estaba todo centrado —nombre, cargo y biografía— debajo de un retrato
 * redondo. Centrar un párrafo de cinco líneas deja los dos bordes dentados y
 * la línea de especialidades partiéndose por donde cae; se veía descuidado.
 * La clienta ya lo había pedido por escrito: «En esta página debemos centrar
 * mejor la foto y el texto».
 *
 * Con el retrato a un lado, el texto arranca siempre en el mismo sitio y tiene
 * un ancho constante. Es la misma idea que arregló la página de especialidad.
 */
.ps-person {
	display: grid;
	grid-template-columns: clamp(104px, 11vw, 132px) minmax(0, 1fr);
	gap: clamp(16px, 1.8vw, 24px);
	align-items: start;
	text-align: left;
}
.ps-person__ph {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ps-bone);
	box-shadow: 0 0 0 1px var(--ps-gray-200), 0 0 0 7px var(--ps-paper), 0 10px 26px rgba(24, 35, 64, .12);
	transition: box-shadow .45s var(--ps-ease);
}
.ps-person:hover .ps-person__ph { box-shadow: 0 0 0 1px var(--ps-accent), 0 0 0 7px var(--ps-paper), 0 14px 32px rgba(24, 35, 64, .18); }
.ps-person__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 24%;
	filter: grayscale(1) contrast(1.04);
	transition: filter .6s var(--ps-ease), transform .8s var(--ps-ease);
}
.ps-person:hover .ps-person__ph img { filter: grayscale(0); transform: scale(1.05); }
.ps-person__body { padding-top: 2px; }
.ps-person__n { font-family: Lora, Georgia, serif; font-size: 1.14rem; font-weight: 600; color: var(--ps-navy); margin: 0; }
.ps-person__r { font-size: .78rem; letter-spacing: .05em; color: var(--ps-accent-ink); margin: 6px 0 0; line-height: 1.55; }
.ps-person__b {
	font-size: .86rem;
	line-height: 1.7;
	color: var(--ps-gray-500);
	margin: 10px 0 0;
	max-width: none;
	/*
	 * Aquí NO se justifica, y es a propósito.
	 *
	 * La columna de la ficha mide unos 300 px: caben 45 caracteres por línea.
	 * Justificar a esa anchura obliga al navegador a estirar tres o cuatro
	 * espacios por renglón y salen los «ríos» blancos —se ve peor que sin
	 * justificar—. La justificación se aplica donde hay sitio: el texto de la
	 * página de especialidad, que va a 70 caracteres por línea.
	 */
	hyphens: auto;
}
.ps-person__links { display: flex; gap: 12px; margin-top: 14px; justify-content: flex-start; }
.ps-person__links a { color: var(--ps-gray-500); display: inline-flex; transition: color .3s, transform .3s; }
.ps-person__links a:hover { color: var(--ps-cta-deep); transform: translateY(-2px); }
.ps-person__links svg { width: 17px; height: 17px; fill: currentColor; }

/* --- Servicios en línea --- */
.ps-servs__grupo { margin-bottom: clamp(40px, 5vw, 66px); }
.ps-servs__t {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: Lora, Georgia, serif;
	font-size: clamp(1.32rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.22;
	color: var(--ps-accent-ink);
	margin: 0 0 24px;
}
.ps-servs__t::before { content: ""; width: 36px; height: 3px; flex: none; background: var(--ps-accent); }

.ps-servs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: start;
}
.ps-serv {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 2.6vw, 30px);
	transition: transform .45s var(--ps-ease), box-shadow .45s var(--ps-ease), border-color .35s;
}
.ps-serv:hover { transform: translateY(-4px); border-color: var(--ps-accent); box-shadow: var(--ps-shadow-lg); }

/* Un fondo por grupo: en una página con catorce tarjetas iguales, el color es
   lo único que dice «esto ya es otra cosa» sin obligar a leer el título. */
.ps-serv.ps-serv--g-documentos    { background: #F4F7FC; border-color: #DCE5F3; }
.ps-serv.ps-serv--g-contratos     { background: #FFF6EE; border-color: #FAE1CB; }
.ps-serv.ps-serv--g-marcas        { background: #F2F8F4; border-color: #D8E8DC; }
.ps-serv.ps-serv--g-emprendedores { background: #FAF4FA; border-color: #EDDBEA; }
.ps-serv.ps-serv--g-asesoria      { background: #F7F6F2; border-color: #E7E3D8; }
.ps-serv.ps-serv--destacado { border-color: var(--ps-navy); }
.ps-serv--destacado::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	background: var(--ps-accent);
	border-radius: var(--ps-radius) var(--ps-radius) 0 0;
}
.ps-serv__sello {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ps-accent-ink);
}
/*
 * En pantalla estrecha el sello deja de flotar.
 *
 * «Más solicitado» iba en posición absoluta, arriba a la derecha de la tarjeta.
 * En el escritorio la tarjeta es ancha y el título nunca llega hasta él; en un
 * teléfono el título ocupa los 300 px de la tarjeta y el sello le caía ENCIMA:
 * «Contrato de Prestación de Servicios» con «MÁS SOLICITADO» cruzado por la
 * mitad. Aquí pasa a ser una línea más, encima del título, que es donde cabe.
 *
 * El corte está en 1024 y no en 700 porque a 768 px seguía chocando: la
 * tarjeta es más ancha pero el título también, y se tocaban igual. El número
 * sale de medir, no de suponer — lo comprueba preview/sellos.mjs en siete
 * anchos.
 */
@media (max-width: 1024px) {
	.ps-serv__sello {
		position: static;
		display: block;
		margin: 0 0 6px;
	}
}
.ps-serv__t { font-family: Lora, Georgia, serif; font-size: 1.12rem; font-weight: 600; color: var(--ps-navy); margin: 0 0 10px; }
.ps-serv__g { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ps-gray-500); margin: 0 0 6px; }
.ps-serv__d { font-size: .88rem; line-height: 1.7; color: var(--ps-gray-700); margin: 0 0 12px; }
.ps-serv__inc { font-size: .84rem; line-height: 1.68; color: var(--ps-gray-500); border-left: 2px solid var(--ps-gray-200); padding-left: 14px; margin: 0 0 16px; }
.ps-serv__inc strong { color: var(--ps-navy); }
.ps-serv__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ps-gray-200); }
.ps-serv__precio { font-family: Lora, Georgia, serif; font-size: 1.32rem; font-weight: 600; color: var(--ps-navy); }
.ps-serv__tiempo { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ps-gray-500); }
.ps-serv__tiempo svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ps-serv__btn { margin-top: 16px; }
.ps-serv__btn .ps-btn { width: 100%; }
.ps-serv__no { font-size: .75rem; line-height: 1.6; color: var(--ps-gray-500); margin: 12px 0 0; }
.ps-serv__no strong { color: var(--ps-gray-700); }

/* --- Ayuda social --- */
.ps-ayudas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.ps-ayuda { background: var(--ps-paper); border: 1px solid var(--ps-gray-200); border-radius: var(--ps-radius); overflow: hidden; }
.ps-ayuda__ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ps-bone); }
.ps-ayuda__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Panel de marca cuando todavía no hay fotografía. Azul con el filete naranja
   arriba: la misma familia visual que las bandas del sitio, no un hueco. */
.ps-ayuda__ph--marca {
	display: grid;
	place-items: center;
	background: var(--ps-navy);
	border-top: 3px solid var(--ps-cta);
	color: rgba(255, 255, 255, .72);
}
.ps-ayuda__ph--marca svg { width: 46px; height: 46px; flex: none; }
.ps-ayuda__body { padding: clamp(20px, 2.4vw, 26px); }
.ps-ayuda__t { font-family: Lora, Georgia, serif; font-size: 1.1rem; font-weight: 600; color: var(--ps-navy); margin: 0; }
.ps-ayuda__l { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-accent-ink); margin: 7px 0 0; }
.ps-ayuda__d { font-size: .88rem; line-height: 1.7; color: var(--ps-gray-700); margin: 12px 0 0; }

/* --- Testimonios --- */
.ps-testis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 26px); }
.ps-testi { background: var(--ps-paper); border: 1px solid var(--ps-gray-200); border-left: 3px solid var(--ps-accent); border-radius: var(--ps-radius); padding: clamp(22px, 2.6vw, 30px); }
.ps-testi__t { font-family: Lora, Georgia, serif; font-size: 1.02rem; line-height: 1.6; color: var(--ps-navy); margin: 0; }
.ps-testi__a { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ps-gray-500); margin: 14px 0 0; }

.ps-vtestis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 26px); }
.ps-vtesti { border-radius: var(--ps-radius); overflow: hidden; background: var(--ps-navy); }
.ps-vtesti video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
/* El pie del video: quién habla y, debajo, una línea de contexto opcional. */
.ps-vtesti__pie { padding: 12px 16px 14px; margin: 0; display: grid; gap: 2px; }
.ps-vtesti__a { font-size: .84rem; color: #fff; font-weight: 500; }
.ps-vtesti__n { font-size: .76rem; color: rgba(255, 255, 255, .62); }

/* «Ver más testimonios», debajo de la muestra de la portada. */
.ps-testis-link { margin-top: clamp(24px, 3vw, 38px); text-align: center; }

/* Sellos y cinta de logotipos. */
.ps-sellos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 54px); }
.ps-sellos img { height: 46px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.ps-sellos img:hover { opacity: 1; filter: grayscale(0); }

/* =========================================================================
 * 8. Imágenes
 * ========================================================================= */

.ps-media {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--ps-gray-100);
	border-radius: var(--ps-radius);
}
.ps-media img, .ps-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-media--zoom img { transform: scale(1.02); transition: transform 1.1s var(--ps-ease); }
.ps-media--zoom:hover img { transform: scale(1.06); }
.ps-media__cap { font-size: .78rem; color: var(--ps-gray-500); margin-top: 10px; }

/* Hueco vacío: solo lo ve quien administra. */
.ps-slot {
	display: grid;
	place-items: center;
	text-align: center;
	background: var(--ps-gray-100);
	border: 1px dashed var(--ps-accent-soft);
	border-radius: var(--ps-radius);
	color: var(--ps-gray-500);
	padding: 24px;
	min-height: 170px;
}
.ps-slot span { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; line-height: 1.9; }

/* =========================================================================
 * 9. Blog, formularios y preguntas
 * ========================================================================= */

.ps-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.ps-post { display: flex; flex-direction: column; background: var(--ps-paper); border: 1px solid var(--ps-gray-200); border-radius: var(--ps-radius); overflow: hidden; transition: transform .45s var(--ps-ease), box-shadow .45s var(--ps-ease); }
.ps-post:hover { transform: translateY(-4px); box-shadow: var(--ps-shadow-lg); }
.ps-post__ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ps-bone); }
.ps-post__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-post__body { padding: clamp(20px, 2.3vw, 26px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ps-post__meta { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-accent-ink); }
.ps-post__t { font-family: Lora, Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--ps-navy); margin: 0; }
.ps-post__d { font-size: .87rem; line-height: 1.7; color: var(--ps-gray-500); margin: 0; }
.ps-post__go { margin-top: auto; font-size: .78rem; color: var(--ps-accent-ink); }

/* Retícula del listado de entradas que genera el bloque de consulta. */
.ps-query .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}
.ps-query .wp-block-post-template > li {
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	overflow: hidden;
	padding: clamp(20px, 2.3vw, 26px);
	transition: transform .45s var(--ps-ease), box-shadow .45s var(--ps-ease);
}
.ps-query .wp-block-post-template > li:hover { transform: translateY(-4px); box-shadow: var(--ps-shadow-lg); }
.ps-query .wp-block-post-title { font-family: Lora, Georgia, serif; font-size: 1.1rem; line-height: 1.3; margin: 10px 0; }
.ps-query .wp-block-post-date { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-accent-ink); }
.ps-query .wp-block-post-excerpt { font-size: .87rem; line-height: 1.7; color: var(--ps-gray-500); }
.ps-query .wp-block-post-featured-image { margin: -1px -1px 14px; border-radius: 0; }
.ps-query .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ps-query .wp-block-query-pagination { margin-top: clamp(26px, 3vw, 40px); display: flex; gap: 12px; flex-wrap: wrap; }

/* Fecha y autor bajo el titular de un artículo. */
.ps-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: .76rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	margin-top: 16px;
}

/* Bloque de preguntas frecuentes. */
.ps-faq { max-width: 860px; }

/* Cuerpo de un artículo. */
.ps-prose { font-size: 1rem; line-height: 1.85; color: var(--ps-gray-700); }
.ps-prose :where(h2, h3) { color: var(--ps-navy); margin: 2.2em 0 .7em; }
.ps-prose h2 { font-size: clamp(1.3rem, 2vw, 1.62rem); }
.ps-prose h3 { font-size: clamp(1.1rem, 1.5vw, 1.24rem); }
.ps-prose p { margin: 0 0 1.25em; }
.ps-prose ul, .ps-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.ps-prose li { margin-bottom: .5em; }
.ps-prose :where(a):not(.wp-element-button):not(.ps-btn) { color: var(--ps-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.ps-prose .ps-btn { text-decoration: none; }
.ps-prose blockquote { border-left: 3px solid var(--ps-accent); margin: 1.6em 0; padding-left: 20px; font-family: Lora, Georgia, serif; font-size: 1.08rem; color: var(--ps-navy); }
.ps-titulo-articulo { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; }

/* Preguntas frecuentes. */
.ps-acc { border-top: 1px solid var(--ps-gray-200); }
.ps-acc__i { border-bottom: 1px solid var(--ps-gray-200); }
.ps-acc__b {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: 0;
	padding: 20px 0;
	text-align: left;
	cursor: pointer;
	font-family: Lora, Georgia, serif;
	font-size: 1.04rem;
	font-weight: 600;
	color: var(--ps-navy);
}
.ps-acc__b::after { content: "+"; font-family: Poppins, sans-serif; font-size: 1.3rem; color: var(--ps-accent); flex: none; transition: transform .3s; }
.ps-acc__i.is-open .ps-acc__b::after { transform: rotate(45deg); }
.ps-acc__p { display: none; padding: 0 0 22px; font-size: .92rem; line-height: 1.8; color: var(--ps-gray-700); }
.ps-acc__i.is-open .ps-acc__p { display: block; }

/* --- El formulario del tema --- */
.ps-form__rej {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}
.ps-form__c { margin: 0; }
.ps-form__c--ancho { grid-column: 1 / -1; }
.ps-form__c label {
	display: block;
	font-size: .82rem;
	font-weight: 500;
	color: var(--ps-gray-700);
	margin-bottom: 6px;
}
.ps-form__req { color: var(--ps-accent-ink); }
.ps-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
	width: 100%;
	font-family: Poppins, sans-serif;
	font-size: .92rem;
	color: var(--ps-navy);
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	padding: 11px 13px;
	transition: border-color .3s, box-shadow .3s;
}
.ps-form :where(input, select, textarea):focus {
	border-color: var(--ps-accent);
	box-shadow: 0 0 0 3px var(--ps-accent-soft);
	outline: 0;
}
.ps-form__radios { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 6px; }
.ps-form__radios label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 400; }
.ps-form__acepta { margin-top: 18px; }
.ps-form__acepta label { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; font-weight: 400; }
.ps-form__enviar { margin-top: 20px; }
.ps-form__enviar .ps-btn { width: 100%; }

.ps-form__ok {
	background: var(--ps-bone);
	border-left: 3px solid var(--ps-accent);
	border-radius: var(--ps-radius);
	padding: clamp(22px, 2.6vw, 30px);
}
.ps-form__ok-t {
	font-family: Lora, Georgia, serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--ps-navy);
	margin: 0 0 10px;
}
.ps-form__ok p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ps-gray-700); }
.ps-form__error {
	background: #FFF3F3;
	border-left: 3px solid #D63638;
	border-radius: var(--ps-radius);
	padding: 14px 16px;
	font-size: .88rem;
	color: #8A1F21;
	margin: 0 0 20px;
}

/* Formularios de plugins, con el aspecto del sitio. */
.ps-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="url"], input[type="number"], select, textarea) {
	width: 100%;
	font-family: Poppins, sans-serif;
	font-size: .94rem;
	color: var(--ps-navy);
	background: var(--ps-paper);
	border: 1px solid var(--ps-gray-200);
	border-radius: var(--ps-radius);
	padding: 12px 14px;
	transition: border-color .3s;
}
.ps-form :where(input, select, textarea):focus { border-color: var(--ps-accent); outline: 0; }
.ps-form label { font-size: .84rem; color: var(--ps-gray-700); }
.ps-form :where(button, input[type="submit"]) {
	background: var(--ps-cta);
	color: var(--ps-cta-ink);
	border: 0;
	border-radius: var(--ps-radius);
	font-family: Poppins, sans-serif;
	font-size: .9rem;
	font-weight: 600;
	padding: .9rem 1.8rem;
	cursor: pointer;
}

/* =========================================================================
 * 10. Pie y WhatsApp flotante
 * ========================================================================= */

.ps-footer { background: var(--ps-navy); color: rgba(255, 255, 255, .78); padding-block: clamp(46px, 5.4vw, 74px) 0; }
.ps-footer__top {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
	gap: clamp(26px, 3.4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 52px);
}
.ps-footer .ps-logo { color: #fff; }
.ps-footer .ps-logo-img { height: 86px; filter: brightness(0) invert(1); }
.ps-footer__t { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.ps-footer__intro { font-size: .88rem; line-height: 1.75; margin: 16px 0 0; }
.ps-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ps-footer :where(a) { font-size: .88rem; transition: color .3s; }
.ps-footer :where(a):hover { color: var(--ps-cta); }
.ps-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-block: 20px 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	font-size: .78rem;
}

/* El crédito del desarrollador ocupa su propia línea, al final del todo, y
   se queda un punto por debajo del aviso legal: está, se lee, y no compite
   con nada. */
.ps-footer__firma {
	flex: 1 0 100%;
	margin-top: 6px;
	font-size: .74rem;
	/* .5 da 4,56:1 sobre el azul: pasa el mínimo por un pelo. .58 lo sube a
	   5,5:1, que es lo que aguanta una pantalla mala o una tarde de sol. */
	color: rgba(255, 255, 255, .58);
}
.ps-footer__firma a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.ps-footer__firma a:hover,
.ps-footer__firma a:focus-visible {
	color: #fff;
	border-bottom-color: currentColor;
}

.ps-footer .ps-contact__i { border-bottom-color: rgba(255, 255, 255, .13); }
.ps-footer .ps-contact__l { color: rgba(255, 255, 255, .55); }
.ps-footer .ps-contact__v { color: #fff; }

.ps-social { display: flex; gap: 12px; }
.ps-social a {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	transition: background .3s, border-color .3s, transform .3s;
}
.ps-social a:hover { background: var(--ps-cta); border-color: var(--ps-cta); transform: translateY(-2px); }
.ps-social svg { width: 18px; height: 18px; fill: currentColor; }
.ps-social a:hover svg { fill: var(--ps-cta-ink); }
.ps-social--destacado a { width: 46px; height: 46px; }
.ps-social--destacado svg { width: 21px; height: 21px; }
.ps-social__t { margin-top: 22px; }

/* Botón flotante de WhatsApp. */
.ps-wa {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #25D366;
	color: #fff;
	border-radius: 999px;
	padding: 12px 18px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
	transition: transform .3s var(--ps-ease);
}
.ps-wa:hover { transform: translateY(-3px); }

/*
 * Con el menú abierto, el botón flotante desaparece.
 *
 * Va fijo abajo a la derecha con z-index 70, por encima del panel del menú
 * (55). En el teléfono quedaba plantado encima del botón de WhatsApp del
 * propio panel: dos botones de WhatsApp pisándose, y el de abajo tapando un
 * enlace. Mientras el menú está abierto no hace falta: el panel ya tiene el
 * suyo.
 */
body.ps-menu-abierto .ps-wa { opacity: 0; visibility: hidden; pointer-events: none; }
.ps-wa svg { width: 24px; height: 24px; fill: currentColor; }

/* =========================================================================
 * 11. Animaciones
 * ========================================================================= */

.ps-native [data-anim] { opacity: 1; }
[data-anim] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ps-ease), transform .7s var(--ps-ease); }
[data-anim].is-in { opacity: 1; transform: none; }

.ps-reveal-line { display: block; overflow: hidden; }
.ps-reveal-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ps-ease); }
.is-ready .ps-reveal-line > span { transform: translateY(0); }
.is-ready .ps-reveal-line:nth-child(2) > span { transition-delay: .08s; }
.is-ready .ps-reveal-line:nth-child(3) > span { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	[data-anim] { opacity: 1; transform: none; }
	.ps-reveal-line > span { transform: none; }
}

/* =========================================================================
 * 12. Responsive
 *
 * La escalera: 1080 recoge el menú, 900 apila el hero, 760 pasa a una columna,
 * 640 es el teléfono. Recuerda que una consulta de medios NO añade
 * especificidad: si una regla de aquí no funciona, casi siempre es que la de
 * arriba tiene más clases.
 * ========================================================================= */

@media (max-width: 1180px) {
	:root { --ps-header-h: 96px; }
	.ps-nav .wp-block-navigation__container { gap: 14px; }
	.ps-header .ps-nav :where(a, .wp-block-navigation-item__content) { font-size: .8rem; }
}

@media (max-width: 1024px) {
	/*
	 * Aquí se apaga el menú de escritorio y entra el panel. WordPress esconde
	 * su contenedor por debajo de 600 px y, con overlayMenu «never», ni
	 * siquiera carga el JavaScript que lo abriría: hay que forzarlo visible.
	 */
	.ps-header__cta { display: none; }
	.ps-header__quick { display: flex; }
	.ps-burger { display: flex; }
	.ps-busca { order: 3; }

	/*
	 * TRAMPA Nº 4 DEL BLOQUE DE NAVEGACIÓN. La más cara de todas.
	 *
	 * WordPress copia la clase personalizada del bloque —«ps-nav»— no solo al
	 * <nav>, sino TAMBIÉN al <ul> interior
	 * (`.wp-block-navigation__container`). Así que un selector `.ps-nav`
	 * suelto casa con los dos elementos.
	 *
	 * Resultado: el panel deslizante se aplicaba dos veces, uno dentro del
	 * otro. Al pulsar la hamburguesa, el JavaScript le pone `is-open` al
	 * <nav> y ese entra en pantalla... pero el <ul> de dentro conserva su
	 * propio `transform: translateX(100%)` y se queda fuera. El panel se abría
	 * azul y VACÍO: ni un enlace. En el escritorio no pasaba porque allí no
	 * hay panel.
	 *
	 * El selector tiene que ser `nav.ps-nav`, que solo puede casar con el
	 * <nav>. Y, por si acaso, debajo se desactiva explícitamente cualquier
	 * resto en el contenedor interior.
	 *
	 * Para la próxima: las pruebas del menú tienen que abrirlo y comprobar que
	 * los enlaces caen DENTRO de la pantalla, no solo que existen.
	 */
	nav.ps-nav {
		position: fixed;
		/*
		 * El panel cubre la ventana ENTERA y se aparta de la cabecera con su
		 * propio relleno, en vez de empezar donde acaba la cabecera.
		 *
		 * Es a prueba de fallos: si la medida de la cabecera sale mal —y ya
		 * salió mal una vez, 253 px cuando medía 85—, lo peor que pasa es que
		 * el primer enlace quede algo bajo. Antes lo que pasaba es que se veía
		 * la página por detrás del panel, por el hueco de arriba.
		 */
		inset: 0;
		background: var(--ps-navy);
		padding: calc(var(--ps-header-real) + 20px) var(--ps-gutter) 40px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .4s var(--ps-ease);
		margin: 0;
		z-index: 55;
	}
	nav.ps-nav.is-open { transform: none; }

	/* El <ul> interior no es un panel: es una lista.
	   El `margin: 0` también hace falta: `.ps-nav { margin-left: auto }` —la
	   regla que en el escritorio pega el menú a la derecha— le caía igual al
	   <ul>, y dentro del panel lo empujaba a la mitad derecha de la pantalla,
	   dejando 170 px muertos a la izquierda. */
	.ps-nav .wp-block-navigation__container.ps-nav {
		position: static;
		inset: auto;
		transform: none;
		background: none;
		padding: 0;
		overflow: visible;
		z-index: auto;
		margin: 0;
		width: 100%;
	}

	/* El panel es un bloque, no una fila flexible. */
	nav.ps-nav { display: block; }

	.ps-nav .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: 100%;
		padding: 0 !important;
		overflow: visible !important;
		background: transparent !important;
		z-index: auto !important;
	}
	/*
	 * Y la segunda mitad de la misma trampa: la alineación.
	 *
	 * El bloque lleva «items-justified-right» porque en el escritorio el menú
	 * va pegado a la derecha. En el panel del móvil eso dejaba los enlaces
	 * alineados a la derecha y, con la sangría de los desplegables encima,
	 * «Especialidades» y «Servicios en línea» se salían por el borde derecho
	 * de la pantalla. En un panel los enlaces van a la izquierda y ocupan todo
	 * el ancho: así también se pulsan sin apuntar.
	 */
	.ps-nav .wp-block-navigation__container,
	.ps-nav .wp-block-navigation__submenu-container {
		display: block !important;
		gap: 0;
		justify-content: flex-start !important;
		align-items: stretch !important;
		text-align: left;
		width: 100%;
	}

	/*
	 * TRAMPA Nº 5: el núcleo cierra los submenús con `width: 0`.
	 *
	 *   .wp-block-navigation .has-child .wp-block-navigation__submenu-container
	 *   { width: 0 }
	 *
	 * Tres clases de especificidad (0,3,0), y solo lo levanta a `auto` al pasar
	 * el cursor o con `aria-expanded="true"`. Mi regla de arriba tiene dos
	 * clases (0,2,0): perdía. Por eso «Quiénes somos» salía en una tira de
	 * 33 px, una letra por línea, como una columna de periódico rota.
	 *
	 * Se le gana con cuatro clases: `.has-child` delante y el nombre del
	 * contenedor repetido. Es la misma aritmética de siempre en este archivo.
	 */
	.ps-nav .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		width: 100%;
		min-width: 0;
		/*
		 * El núcleo cierra el desplegable con CUATRO propiedades a la vez:
		 *
		 *   .wp-block-navigation .has-child .wp-block-navigation__submenu-container
		 *   { width: 0; height: 0; overflow: hidden; visibility: hidden; opacity: 0 }
		 *
		 * La primera vez solo contesté a `width` y a `visibility`, y el
		 * desplegable seguía con `height: 0; overflow: hidden`: los enlaces
		 * medían sus 325 px pero el padre los recortaba a cero. En el teléfono
		 * se veía un hueco azul vacío debajo de «El estudio» y de «Servicios»,
		 * y los seis enlaces de los submenús eran inalcanzables.
		 *
		 * Hay que responder a las cinco. Media tiene el mismo efecto que
		 * ninguna.
		 */
		height: auto;
		overflow: visible;
		visibility: visible;
		opacity: 1;
	}
	.ps-nav .wp-block-navigation-item {
		display: block;
		width: 100%;
	}
	.ps-nav .wp-block-navigation-item__content { width: 100%; }

	/*
	 * `:not(.ps-btn)` no es un adorno.
	 *
	 * El pie del panel lleva el botón de WhatsApp, que también es un <a>
	 * dentro de `.ps-nav`. Sin la exclusión se tragaba el estilo de los
	 * enlaces del menú: 1,35 rem de tipo serif y `padding: 12px 0` —cero
	 * relleno a los lados—. El texto «Escríbenos por WhatsApp» salía pegado a
	 * los bordes de la caja naranja y encima del icono.
	 */
	.ps-nav a:not(.ps-btn),
	.ps-nav .wp-block-navigation-item__content,
	.ps-header .ps-nav :where(a, .wp-block-navigation-item__content):not(.ps-btn) {
		display: block;
		color: #fff !important;
		font-family: Lora, Georgia, serif;
		font-size: 1.35rem;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	/* El botón conserva su propio tamaño y su relleno, y ocupa el ancho del
	   panel: a media anchura parecía recortado. */
	.ps-nav .ps-btn {
		font-size: .92rem;
		padding: 14px 20px;
		border-bottom: 0;
		display: flex;
		width: 100%;
		justify-content: center;
	}

	/* Los desplegables van siempre abiertos: en un teléfono no hay cursor y la
	   regla del núcleo que los abre vive dentro de @media (hover: hover). */
	.ps-nav .wp-block-navigation__submenu-container {
		/*
		 * display:block y con !important. El núcleo declara
		 * .wp-block-navigation__submenu-container { display:none } y solo lo
		 * levanta dentro de @media (hover: hover), que en un teléfono no se
		 * cumple nunca. Sin esta línea, Equipo, Ayuda social, Servicios en
		 * línea y Cotiza tu caso son inalcanzables desde el móvil.
		 */
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		min-width: 0;
		padding: 0 0 0 18px;
	}
	.ps-header .ps-nav .wp-block-navigation__submenu-container :where(a, .wp-block-navigation-item__content) {
		font-size: 1.02rem;
		color: rgba(255, 255, 255, .8) !important;
		padding: 9px 0;
	}

	.ps-menufoot { display: block; margin-top: 28px; color: #fff; }
	.ps-menufoot__datos :where(a, span) { color: rgba(255, 255, 255, .88); }
	body.ps-menu-abierto { overflow: hidden; }
}

@media (max-width: 900px) {
	/* El hero pasa a una columna y la frase de la derecha se va: girada o no,
	   en un teléfono ocupa una pantalla entera y no dice nada que no diga ya
	   el titular. */
	.ps-hero__in {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-right: var(--ps-gutter);
		gap: 0;
	}
	.ps-hero__text { padding-block: clamp(34px, 6vw, 52px) 0; }
	.ps-hero__vert { display: none; }
	.ps-hero__media { min-height: 0; margin-top: 30px; grid-column: 1; grid-row: auto; }
	.ps-hero__media .ps-media,
	.ps-hero__media figure { position: relative; inset: auto; aspect-ratio: 16 / 10 !important; border-radius: var(--ps-radius); }
	.ps-hero__media::after { background: linear-gradient(180deg, rgba(31, 45, 82, .18) 0%, rgba(31, 45, 82, 0) 40%); }

	/* Banda de valores en dos filas, sin las rayas verticales. */
	.ps-valores__in { justify-content: center; text-align: center; }
	.ps-valores__lista { justify-content: center; gap: 12px 20px; }
	.ps-valor { border-right: 0; padding-right: 0; font-size: .8rem; }
	.ps-valores__marca { border-left: 0; padding-left: 0; border-top: 2px solid var(--ps-cta); padding-top: 14px; width: 100%; }

	.ps-sechead--fila { display: block; }
	.ps-sechead--fila .ps-verlink { margin-top: 14px; }

	/* En pantalla estrecha se va la frase, no la imagen: la imagen es lo que
	   hace que el listado no parezca una tabla de Excel. */
	.ps-row { grid-template-columns: 76px minmax(0, 1fr) 22px; gap: 14px; }
	.ps-row__d, .ps-row__n { display: none; }
	.ps-row__ph { width: 76px; }
	.ps-row__ph--ico svg { width: 24px; height: 24px; }

	/* En pantalla estrecha no puede flotar, pero tampoco tiene por qué ocupar
	   media pantalla: pasa a ser una franja apaisada, que se lee como cabecera
	   de la sección y no como «la foto». */
	/* Cuanto más estrecha la pantalla, menos panorámica: a 3:1 en un teléfono
	   la imagen quedaría en una tira de 120 px y no se vería nada.
	   Doblada igual que la de arriba: si no, `.ps-media` vuelve a ganar. */
	.ps-area-detalle__foto.ps-area-detalle__foto { aspect-ratio: 2.2 / 1; margin-bottom: 22px; }
	.ps-area-detalle__texto { max-width: none; }

	.ps-footer__top { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
}

@media (max-width: 760px) {
	.ps-people, .ps-posts, .ps-ayudas, .ps-testis { grid-template-columns: 1fr; }
	/* En el teléfono la ficha sigue siendo de dos columnas, con el retrato más
	   pequeño: apilarlo dejaría una foto enorme y el nombre perdido debajo. */
	.ps-person { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
	/* La foto de la especialidad queda fuera: ya tiene su propia proporción
	   apaisada arriba, y esta regla —tres clases de especificidad— se la
	   pisaba y la devolvía a 4/3, que en móvil es un ladrillo. */
	.ps-media:not(.ps-post__ph):not(.ps-person__ph):not(.ps-area-detalle__foto) { aspect-ratio: 4 / 3; }
	.ps-slot { min-height: 150px; }
	.ps-quick .ps-quick__txt { display: none; }
	.ps-quick { padding-inline: 0; width: 42px; }
	.ps-quick--wa { width: auto; padding-inline: 14px; }
	.ps-quick--wa .ps-quick__txt { display: inline; }
}

@media (max-width: 640px) {
	:root { --ps-header-h: 84px; }
	.ps-logo-img { height: 58px; }
	.ps-btnrow { flex-direction: column; align-items: stretch; width: 100%; }
	.ps-btnrow > * { width: 100%; }
	.ps-hero__cta { flex-direction: column; align-items: stretch; }
	.ps-hero__cta > * { width: 100%; }
	.ps-display { font-size: clamp(1.85rem, 7.6vw, 2.3rem); }
	.ps-h2 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
	.ps-titulo-articulo { font-size: clamp(1.45rem, 5.6vw, 1.85rem); }
	.ps-cards--2 { grid-template-columns: 1fr; }
	.ps-form__rej { grid-template-columns: 1fr; }
	.ps-footer__bottom { flex-direction: column; }
}

@media (max-width: 400px) {
	:root { --ps-gutter: 16px; }
	.ps-quick:not(.ps-quick--wa) { display: none; }
}