/*
Theme Name: Mercy
Theme URI: https://libreriamercy.com
Author: M+ Web Services
Description: Tema a medida para Librería Mercy. Sin constructor, sin dependencias externas, sin webfonts remotos. Construido alrededor de una sola tarea: que un papá pida la cotización de su lista.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mercy
*/

/* ============================================================ TOKENS
   Contrastes medidos sobre blanco (WCAG 2.1 AA pide 4.5:1 en texto normal):
     Azul marino #17375E .... 12.04  → texto e interfaz
     Coral       #FE4C6E ..... 3.24  → relleno, nunca letra
     Turquesa    #42B6AD ..... 2.46  → relleno, nunca letra
     Amarillo    #FBC654 ..... 1.58  → relleno, nunca letra
     Verde limón #C9D93B ..... 1.56  → relleno, nunca letra
   Para botones y enlaces se usan las versiones hondas, que sí cumplen.
   ============================================================ */
:root {
	--tinta: #17375E;
	--tinta-2: #5D6E85;
	--coral: #FE4C6E;
	--coral-hondo: #C63B55;      /* 5.05:1 con texto blanco */
	--coral-mas-hondo: #B1354D;
	--turquesa: #42B6AD;
	--turquesa-hondo: #2C7B75;   /* 5.00:1 con texto blanco */
	--limon: #C9D93B;
	--amarillo: #FBC654;
	--ambar-hondo: #917230;
	--papel: #FDFBF4;
	--papel-2: #F3F6F8;
	--linea: #DCE2EA;
	--blanco: #FFFFFF;

	/* Tres familias con un trabajo cada una. Los nombres coinciden con los que
	   registra la Biblioteca de fuentes de WordPress; «Big Shoulders Display»
	   queda de respaldo porque así se llamaba antes en Google Fonts.
	   Titulares: Big Shoulders Display, condensada y alta, para que un titular
	   largo entre sin encogerse. Subtítulos: Inter, neutra y firme. Texto:
	   Open Sans, hecha para leerse en párrafo. */
	--titulo: "Big Shoulders", "Big Shoulders Fallback", "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
	--subtitulo: "Inter", "Inter Fallback", Helvetica, Arial, "Lucida Grande", sans-serif;
	--texto: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

	--ancho: 72rem;
	--radio: 16px;
	--radio-sm: 10px;
	--sombra: 0 1px 2px rgba(23,55,94,.05), 0 10px 30px rgba(23,55,94,.09);
	--sombra-foto: 0 2px 6px rgba(23,55,94,.08), 0 18px 46px rgba(23,55,94,.14);
}

/* ============================================================ FUENTES DE RESPALDO
   Mientras llega la fuente definitiva, el texto se pinta con Arial (o su
   equivalente: Liberation Sans en Linux, Roboto en Android) ajustada a las
   medidas de Big Shoulders e Inter. Así el titular ocupa las mismas líneas
   antes y después del cambio, y la página no salta. Sin esto, el titular en
   Arial sin ajustar era casi el doble de ancho que en Big Shoulders: CLS de
   0.136 en PageSpeed móvil (12-oct-2026).
   Valores calculados con fontTools sobre los textos reales del sitio
   (anchos de avance de Big Shoulders 800 e Inter 400/700 contra Arial).
   ============================================================ */
@font-face {
	font-family: "Big Shoulders Fallback";
	font-weight: 100 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 71.7%;
	ascent-override: 137.44%;
	descent-override: 29.91%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	font-weight: 100 500;
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans-Regular"), local("Roboto"), local("Roboto-Regular");
	size-adjust: 105.26%;
	ascent-override: 92.04%;
	descent-override: 22.92%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	font-weight: 600 900;
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Roboto Bold"), local("Roboto-Bold");
	size-adjust: 102.67%;
	ascent-override: 94.35%;
	descent-override: 23.49%;
	line-gap-override: 0%;
}

/* ============================================================ BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--texto);
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--tinta);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
}

/* Big Shoulders es condensada: aguanta cuerpos grandes sin desbordar,
   y por lo mismo pide más interletraje del habitual. */
h1, h2 {
	font-family: var(--titulo);
	line-height: 1.02;
	margin: 0 0 .35em;
	letter-spacing: .005em;
	text-transform: uppercase;
	font-weight: 800;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
h3 {
	font-family: var(--subtitulo);
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .45em;
}
.ojo {
	font-family: var(--subtitulo);
	font-size: .82rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .12em; color: var(--turquesa-hondo); margin: 0 0 .6rem;
}
.seccion--tinta .ojo { color: var(--amarillo); }
p { margin: 0 0 1rem; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--coral-hondo); text-underline-offset: .18em; }
a:hover { color: var(--coral-mas-hondo); }

:focus-visible { outline: 3px solid var(--turquesa-hondo); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.centro { text-align: center; }
.entradilla { font-size: 1.16rem; line-height: 1.6; color: var(--tinta-2); max-width: 46ch; }
.entradilla.centrada { margin-inline: auto; }

.saltar {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--tinta); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radio) 0;
}
.saltar:focus { left: 0; }

/* ============================================================ BOTONES */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 52px; padding: .85rem 1.6rem;
	border: 2px solid transparent; border-radius: 999px;
	background: var(--coral-hondo); color: #fff;
	font-family: var(--subtitulo); font-size: 1rem; font-weight: 700;
	text-decoration: none; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.btn:hover, .btn:focus { background: var(--coral-mas-hondo); color: #fff; transform: translateY(-1px); }
a.btn, a.btn:hover, a.btn:visited { color: #fff; }
a.btn--alterno, a.btn--alterno:visited { color: var(--tinta); }
a.btn--alterno:hover { color: #fff; }
a.btn--claro, a.btn--claro:hover, a.btn--claro:visited { color: var(--tinta); }
.btn--alterno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--alterno:hover { background: var(--tinta); color: #fff; }
.btn--claro { background: #fff; color: var(--tinta); }
.btn--claro:hover { background: var(--papel); color: var(--tinta); }
/* ---- Iconos ----------------------------------------------------------
   Una sola regla para todos los íconos de mercy_icono(). Van en `em`, así
   que crecen y se achican con el texto que acompañan y no hace falta
   redefinirlos en cada componente. Antes cada lugar escribía su propio
   «.loquesea svg» y esos selectores se pisaban entre ellos.               */
.icono {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	flex: none;
}

/* ============================================================ CABECERA */
.cabecera {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.cabecera__logo { display: flex; align-items: center; flex: none; }
.cabecera__logo img, .cabecera__logo svg { height: 46px; width: auto; }
.cabecera__nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.cabecera__nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
/* :where() deja la regla en especificidad cero. Sin esto, «.cabecera__nav a»
   (0,2,0) le ganaba a «.btn» (0,1,0) y el botón de la cabecera salía con
   texto azul marino sobre coral en vez de blanco. */
:where(.cabecera__nav ul) a { font-family: var(--subtitulo); color: var(--tinta); font-weight: 600; text-decoration: none; font-size: .97rem; }
:where(.cabecera__nav ul) a:hover { color: var(--coral-hondo); text-decoration: underline; }
.cabecera .btn { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }
@media (max-width: 720px) {
	/* La regla vieja escondía el menú en móvil sin poner nada en su lugar:
	   las páginas de servicio quedaban inalcanzables desde el celular. */
	.cabecera__nav { flex-wrap: wrap; }
	.cabecera__logo img, .cabecera__logo svg { height: 38px; }
}

/* ============================================================ PORTADA */
.hero { background: linear-gradient(170deg, var(--papel) 0%, #FFF9EE 46%, #fff 100%); padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.1fr .9fr; align-items: center; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: .6rem; }
.hero h1 em { font-style: normal; color: var(--coral-hondo); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__confianza { margin-top: 1.5rem; color: var(--tinta-2); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.hero__confianza span { display: inline-flex; align-items: center; gap: .4rem; }

/* tarjeta ilustrativa de la lista */
.muestra {
	background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
	box-shadow: var(--sombra); padding: 1.4rem 1.5rem;
}
.muestra__titulo { font-family: var(--subtitulo); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-2); font-weight: 700; margin-bottom: .9rem; }
.muestra ul { list-style: none; margin: 0; padding: 0; }
.muestra li { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--papel-2); font-size: .88rem; line-height: 1.35; }
.muestra li:last-child { border-bottom: 0; }
.muestra li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.forro { width: 16px; height: 16px; border-radius: 4px; flex: none; border: 1px solid rgba(23,55,94,.16); }
.muestra__total { display: flex; gap: .75rem; justify-content: space-between; align-items: baseline; margin-top: .8rem; padding-top: .8rem; border-top: 3px solid var(--turquesa); font-family: var(--subtitulo); font-weight: 700; font-size: 1.05rem; }
.muestra__total span:last-child { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }

/* ============================================================ SECCIONES */
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--papel { background: var(--papel); }
.seccion--gris { background: var(--papel-2); }
.seccion--tinta { background: var(--tinta); color: #fff; }
.seccion--tinta h2, .seccion--tinta h3 { color: #fff; }
.seccion--tinta .entradilla { color: #C6D3E2; }
.seccion__cabeza { max-width: 48ch; margin-bottom: 2.75rem; }
.seccion__cabeza.centrada { margin-inline: auto; text-align: center; }

.rejilla { display: grid; gap: 1.75rem; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--2.sin-foto { grid-template-columns: 1fr; max-width: 58ch; }
@media (max-width: 800px) { .rejilla--3, .rejilla--2 { grid-template-columns: 1fr; } }

.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.9rem 1.75rem; box-shadow: 0 1px 2px rgba(23,55,94,.04); }
.tarjeta h3 { margin-bottom: .35rem; }
.tarjeta p { margin: 0; color: var(--tinta-2); }
.tarjeta__numero {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	font-family: var(--subtitulo); font-weight: 700; font-size: 1.1rem; margin-bottom: .9rem;
	background: var(--amarillo); color: var(--tinta);
}
.tarjeta:nth-child(2) .tarjeta__numero { background: var(--turquesa); }
.tarjeta:nth-child(3) .tarjeta__numero { background: var(--coral); color: #fff; }

/* franja de colores de forro */
.colores { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
/* El color se declara explícito: dentro de .seccion--tinta el texto hereda
   blanco y quedaba invisible sobre la pastilla blanca. */
.colores span {
	display: inline-flex; align-items: center; gap: .5rem;
	background: #fff; color: var(--tinta);
	border: 1px solid var(--linea); border-radius: 999px;
	padding: .35rem .85rem .35rem .45rem; font-size: .9rem; font-weight: 700;
}
.colores i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid rgba(23,55,94,.16); }

/* preguntas */
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
	cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; font-weight: 700; position: relative; list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
	content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--coral-hondo);
}
.pregunta[open] summary::after { content: "–"; }
.pregunta p { color: var(--tinta-2); padding-bottom: 1.1rem; margin: 0; max-width: 62ch; }

/* cierre */
.cierre { text-align: center; }
.cierre .btn { margin-top: 1.2rem; }

/* ============================================================ PIE */
.pie { background: var(--tinta); color: #C6D3E2; padding-block: 2.75rem 1.5rem; }
:where(.pie) a { color: #fff; }
.pie__grid { display: grid; gap: 2rem; grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 800px) { .pie__grid { grid-template-columns: 1fr; } }
.pie h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .09em; color: #fff; margin-bottom: .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie__logo svg, .pie__logo img { height: 52px; width: auto; margin-bottom: .9rem; }
.pie__legal {
	margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .87rem;
}

/* ============================================================ CONTENIDO */
.entrada { padding-block: clamp(2rem, 5vw, 3.5rem); }
.entrada__cuerpo { max-width: 68ch; }
.entrada__cuerpo h2 { margin-top: 2rem; }
.entrada__cuerpo ul, .entrada__cuerpo ol { padding-left: 1.3rem; }
.entrada__cuerpo li { margin-bottom: .4rem; }
.entrada__cuerpo table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.entrada__cuerpo th, .entrada__cuerpo td { padding: .6rem .5rem; border-bottom: 1px solid var(--linea); text-align: left; }

.error404 { padding-block: 4rem; text-align: center; }
/* Solo la libélula, no todo lo que haya en la página.
   WordPress pone la clase `error404` en el <body>, así que `.error404 svg`
   alcanzaba también al logo de la cabecera y al ícono del botón, y los
   estiraba a 110px. Exigir las dos clases en el mismo elemento lo limita al
   contenedor del 404, y `>` lo limita a su hijo directo. */
.contenedor.error404 > img,
.contenedor.error404 > svg { height: 110px; width: auto; margin-bottom: 1.5rem; }

/* ============================================================ UTILIDADES */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.alignwide { width: 100%; }
.wp-caption { max-width: 100%; }

/* ============================================================ FOTOGRAFÍA
   El sitio vive de mostrar producto real: cuadernos forrados, el mostrador,
   las listas armadas. Estos componentes le dan lugar propio a la foto en
   lugar de meterla como adorno.
   ============================================================ */

/* Marco base. Fondo de papel para que un hueco sin foto no se vea roto. */
.foto {
	display: block; width: 100%; height: auto;
	border-radius: var(--radio);
	background: var(--papel-2);
	object-fit: cover;
}
.foto--sombra { box-shadow: var(--sombra-foto); }
.foto--alta { aspect-ratio: 4 / 5; }
.foto--ancha { aspect-ratio: 3 / 2; }
.foto--cuadro { aspect-ratio: 1 / 1; }

/* Marcador visible mientras no hay fotografía real. */
.foto-pendiente {
	display: flex; align-items: center; justify-content: center; text-align: center;
	/* Color de fondo declarado además del degradado: si el degradado no se
	   pinta, el texto no queda sobre el fondo de la sección. */
	background-color: #EEF1F4;
	background-image: repeating-linear-gradient(45deg, #EEF1F4 0 12px, #E7EBEF 12px 24px);
	border: 2px dashed var(--linea); border-radius: var(--radio);
	color: var(--tinta-2); font-family: var(--subtitulo); font-size: .9rem; font-weight: 600;
	padding: 1.5rem;
}
.foto-pendiente:not([class*="foto--"]) { min-height: 240px; }
.foto-pendiente.foto--alta { aspect-ratio: 4 / 5; }
.foto-pendiente.foto--ancha { aspect-ratio: 3 / 2; }
.foto-pendiente.foto--cuadro { aspect-ratio: 1 / 1; }

/* Hero: la fotografía manda y la cotización de ejemplo se le monta en la
   esquina inferior izquierda, sin taparle la parte que interesa. */
.hero__medios { position: relative; padding-bottom: 3rem; }
.hero__medios .muestra {
	position: absolute; left: -3.25rem; bottom: 0; z-index: 2;
	width: min(17.5rem, 74%);
	padding: 1.15rem 1.25rem;
	box-shadow: var(--sombra-foto);
}
@media (max-width: 1100px) { .hero__medios .muestra { left: -1.25rem; width: min(16rem, 78%); } }
@media (max-width: 860px) {
	.hero__medios { padding-bottom: 0; }
	.hero__medios .muestra { position: static; width: 100%; margin-top: 1.25rem; }
}

/* Banda de fotos: mosaico que respira */
.mosaico { display: grid; gap: 1rem; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 1fr; }
.mosaico > *:first-child { grid-row: span 2; }
@media (max-width: 800px) {
	.mosaico { grid-template-columns: 1fr 1fr; }
	.mosaico > *:first-child { grid-row: span 1; grid-column: span 2; }
}
.mosaico figure { margin: 0; position: relative; }
.mosaico figcaption {
	position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
	background: rgba(23,55,94,.92); color: #fff;
	font-family: var(--subtitulo); font-size: .82rem; font-weight: 600;
	padding: .4rem .7rem; border-radius: var(--radio-sm);
}
/* Dentro del mosaico manda la retícula, no la proporción de cada foto. */
.mosaico .foto, .mosaico .foto-pendiente { height: 100%; aspect-ratio: auto; min-height: 200px; }

/* Bloque de texto junto a foto grande */
.duo { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.duo--invertido > *:first-child { order: 2; }
@media (max-width: 860px) {
	.duo, .duo--invertido { grid-template-columns: 1fr; }
	.duo--invertido > *:first-child { order: 0; }
}

/* Toque amable: pastilla de color detrás de una foto */
.foto-marco { position: relative; }
.foto-marco::before {
	content: ""; position: absolute; inset: auto -1.1rem -1.1rem auto; pointer-events: none;
	width: 62%; height: 62%; border-radius: var(--radio);
	background: var(--amarillo); z-index: 0;
}
.foto-marco--turquesa::before { background: var(--turquesa); }
.foto-marco > * { position: relative; z-index: 1; }

/* ============================================================ ROSADO
   El coral de marca #FE4C6E solo llega a 3.24:1 con texto blanco: sirve para
   titulares grandes y para forma, no para párrafo. Cuando una sección lleva
   texto corrido se usa el coral hondo #C63B55, que da 5.05:1.
   Amarillo, limón y turquesa nunca llevan texto: 1.5–2.5:1 con blanco.
   ============================================================ */
.seccion--coral { background: var(--coral-hondo); color: #fff; }
.seccion--coral h2, .seccion--coral h3, .seccion--coral .entradilla { color: #fff; }
/* El amarillo sobre coral da 3.20 y este texto es chico: va blanco.
   Se distingue por el interletraje y las versalitas, no por el color. */
.seccion--coral .ojo { color: #fff; }
/* Velo oscuro en vez de claro: aclarar el fondo bajaba el contraste del
   texto blanco a 4.36, por debajo del mínimo. Oscurecerlo lo sube a 5.99. */
.seccion--coral .tarjeta {
	background: rgba(0,0,0,.10);
	border-color: rgba(255,255,255,.30);
	color: #fff;
	box-shadow: none;
}
/* Blanco puro: sobre la tarjeta translúcida un rosa claro se queda corto. */
.seccion--coral .tarjeta p { color: #fff; }

/* Banda de promesa: tipografía display enorme sobre el coral de marca.
   A este cuerpo el blanco sí cumple (texto grande). */
.promesa {
	background: var(--coral);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem);
	position: relative;
	overflow: hidden;
}
.promesa p {
	font-family: var(--titulo);
	font-weight: 800;
	font-size: clamp(2.2rem, 5.4vw, 4rem);
	line-height: .98;
	text-transform: uppercase;
	max-width: 20ch;
	margin: 0;
}
.promesa small {
	display: inline-block;
	background: #fff;
	color: var(--tinta);
	font-family: var(--subtitulo);
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
	margin-top: 1.4rem;
	max-width: 44ch;
	line-height: 1.5;
	padding: .75rem 1.15rem;
	border-radius: var(--radio-sm);
}
/* Libélula de marca como marca de agua. Decorativa: no lleva información. */
.promesa__libelula {
	position: absolute; right: -3%; bottom: -18%;
	width: min(30rem, 46%); opacity: .16; pointer-events: none;
}
.promesa__libelula svg { width: 100%; height: auto; fill: #fff; }
.promesa__libelula path { fill: #fff; }
@media (max-width: 720px) { .promesa__libelula { width: 62%; right: -14%; bottom: -10%; opacity: .13; } }

/* Los números de paso llevan blanco: sobre amarillo o turquesa no se leerían. */
.tarjeta__numero { background: var(--coral-hondo); color: #fff; }
.tarjeta:nth-child(2) .tarjeta__numero { background: var(--turquesa-hondo); }
.tarjeta:nth-child(3) .tarjeta__numero { background: var(--tinta); }

/* Filo de color arriba de cada tarjeta: color como forma, no como fondo de texto. */
.tarjeta { position: relative; overflow: hidden; }
.tarjeta::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
	background: var(--coral);
}
.tarjeta:nth-child(2)::before { background: var(--turquesa); }
.tarjeta:nth-child(3)::before { background: var(--amarillo); }
.seccion--coral .tarjeta::before { background: rgba(255,255,255,.55); }

/* Acentos de forma */
.hero { position: relative; overflow: hidden; }
.hero::after {
	content: ""; position: absolute; z-index: 0;
	right: -8rem; top: -8rem; width: 26rem; height: 26rem; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(254,76,110,.20), rgba(254,76,110,0) 68%);
	pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; }
.foto-marco--coral::before { background: var(--coral); }
.pie { border-top: 6px solid var(--coral); }
.muestra { border-top: 4px solid var(--coral); }
.cabecera { border-bottom: 1px solid var(--linea); box-shadow: inset 0 -4px 0 rgba(254,76,110,.12); }
h1 em { color: var(--coral-hondo); }
.mosaico figcaption { background: rgba(198,59,85,.94); }

/* ============================================================ BUSCADOR */
.buscador {
	background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
	box-shadow: var(--sombra); padding: clamp(1.25rem, 3vw, 2rem);
	max-width: 48rem; margin-inline: auto;
}
.buscador__alterno {
	max-width: 48rem; margin: 1.25rem auto 0; text-align: center;
	color: var(--tinta-2); font-size: .95rem;
}
.buscador__alterno a { font-weight: 700; white-space: nowrap; }

/* Aviso de promoción. Aparece y desaparece solo según el calendario. */
.promo-aviso {
	background: var(--amarillo); color: var(--tinta);
	border-radius: var(--radio); padding: 1rem 1.2rem; margin: 1.4rem 0 0;
}
.promo-aviso b { display: block; font-family: var(--titulo); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; line-height: 1.05; }
.promo-aviso span { display: block; font-family: var(--subtitulo); font-weight: 600; font-size: .95rem; margin-top: .3rem; }
.promo-aviso small { display: block; font-size: .84rem; margin-top: .5rem; opacity: .8; }
/* Cursiva sintética a propósito: no vale la pena cargar una fuente entera
   por una sola línea. */
.muestra__mas { color: var(--tinta-2); font-style: italic; justify-content: center; }

/* ============================================================ SERVICIOS
   Páginas de fotocopias, engargolado y papelería para oficinas.
   Reutilizan .seccion, .contenedor, .entradilla, .btn y .pregunta; aquí solo
   va lo que no existía: la tabla de precios y la lista de hechos.
   Contrastes verificados sobre #FDFBF4 y #FFFFFF.
=========================================================================== */

.servicio h2 { margin-top: 0; }

.servicio p { max-width: 62ch; }

/* Los tres hechos duros del servicio, arriba, antes de la prosa. */
.hechos {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
}

.hechos li {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
}


/* Tabla de precios. En móvil se desborda con scroll propio en vez de
   apretar las columnas hasta romper la lectura. */
.precios {
	width: 100%;
	max-width: 34rem;
	border-collapse: collapse;
	margin: 0 0 2rem;
	font-variant-numeric: tabular-nums;
}

.precios th,
.precios td {
	text-align: left;
	padding: .6rem .75rem;
	border-bottom: 1px solid rgba(23, 55, 94, .15);
}

.precios thead th {
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom-width: 2px;
}

.precios tbody th {
	font-weight: 400;
}

.precios td {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.precios__nota {
	margin: .25rem 0 .75rem;
	font-size: .95rem;
	opacity: .8;
}

.precios__rango {
	font-size: 1.25rem;
	font-weight: 700;
	margin: .25rem 0 2rem;
}

/* Bloque de dirección y horario, al pie de cada página de servicio. */
.donde__direccion {
	display: inline;
	font-style: normal;
}

#donde p {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}

#donde .icono { margin-top: .2rem; }

.pie__nota {
	display: block;
	font-size: .85rem;
	opacity: .75;
}

@media (max-width: 30rem) {
	.precios { font-size: .95rem; }
	.precios th,
	.precios td { padding: .5rem .4rem; }
}

/* ============================================================ CABECERA v2
   Escritorio: logo · menú · botón, en una fila.
   Móvil:      fila 1 = logo + botón, fila 2 = el menú completo.

   El botón vive fuera del <nav> justamente para esto. Cuando estaba dentro,
   el nav se llevaba el ancho entero, bajaba debajo del logo y el resultado
   eran tres filas apiladas que se comían media pantalla del teléfono.
=========================================================================== */

.cabecera__fila { min-height: 68px; flex-wrap: wrap; }

.cabecera__logo { text-decoration: none; }

.logotexto {
	font-family: var(--titulo);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--tinta);
	letter-spacing: .01em;
	text-decoration: none;
}

.cabecera__nav { margin-left: auto; }

.cabecera__lista {
	display: flex;
	gap: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cabecera__cta { flex: none; }

/* La barra de administración de WordPress es fija y mide 32px. Sin esto, la
   cabecera pegajosa se estaciona debajo de ella y se le corta la parte de
   arriba. Va aquí dentro, junto al resto de la cabecera, y no suelta al final
   del archivo: la primera vez se perdió al reescribir el bloque. */
.admin-bar .cabecera { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .cabecera { top: 46px; }
}

/* Respaldo por si el navegador no aplica backdrop-filter: sin él, el fondo
   traslúcido deja leer el contenido que pasa por debajo. */
@supports not (backdrop-filter: blur(8px)) {
	.cabecera { background: #fff; }
}

@media (max-width: 720px) {

	.cabecera__fila {
		min-height: 0;
		gap: .5rem;
		padding-block: .5rem;
	}

	.cabecera__logo img,
	.cabecera__logo svg { height: 34px; }

	/* El botón se pega a la derecha de la primera fila. */
	.cabecera__cta { margin-left: auto; order: 2; }

	/* Y el menú ocupa la segunda, entero. */
	.cabecera__nav {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
		min-width: 0;
	}

	.cabecera__lista {
		gap: 1.25rem;
		padding-bottom: .15rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cabecera__lista::-webkit-scrollbar { display: none; }

	.cabecera__lista li { flex: none; }

	.cabecera__lista a {
		display: inline-flex;
		align-items: center;
		min-height: 38px;
		font-size: .92rem;
		white-space: nowrap;
	}

	.logotexto { font-size: 1.2rem; }
}

@media (max-width: 420px) {

	/* Con tres enlaces en la fila de abajo, el botón se queda con el ícono.
	   El texto se quita del todo —no se esconde fuera de pantalla— porque un
	   span de 1px dentro de un flex con gap seguía ocupando su hueco y
	   apretaba el ícono hasta dejarlo del tamaño de un punto. El nombre
	   accesible lo pone el aria-label del enlace. */
	.cabecera__cta .btn__texto { display: none; }

	/* Los selectores llevan las tres clases a propósito. `.cabecera .btn` fija
	   un relleno lateral de 1.1rem y le gana por especificidad a
	   `.cabecera__cta` sola: dentro de un botón de 44px, ese relleno dejaba
	   nueve píxeles de espacio y el ícono se veía como un punto. */
	.cabecera .btn.cabecera__cta {
		gap: 0;
		padding: 0;
		width: 44px;
		min-width: 44px;
		height: 44px;
		min-height: 44px;
		justify-content: center;
		border-radius: 50%;
	}

	/* El botón redondo se queda sin texto, así que el ícono no puede
	   depender del tamaño de letra: aquí sí va medida fija. */
	.cabecera .btn.cabecera__cta .icono {
		width: 22px;
		height: 22px;
	}

	.cabecera__lista { gap: 1rem; }
	.cabecera__lista a { font-size: .88rem; }
}

/* ============================================================ SERVICIOS EN PORTADA
   Cuatro tarjetas con foto. Se generan desde mercy_servicios(), así que la
   cuadrícula tiene que aguantar tres, cuatro o cinco sin retocarse.
=========================================================================== */

.servicios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
}

.servicio-tarjeta {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio, 12px);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23, 55, 94, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}

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

.servicio-tarjeta:hover,
.servicio-tarjeta:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(23, 55, 94, .12);
}

/* La franja de color es lo que da el aire alegre sin gritar: cada servicio
   toma un color de la paleta y se distingue de un vistazo. */
.servicio-tarjeta::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--tono, #FBC654);
}

.servicio-tarjeta--amarillo { --tono: #FBC654; }
.servicio-tarjeta--turquesa { --tono: #42B6AD; }
.servicio-tarjeta--limon    { --tono: #C9D93B; }
.servicio-tarjeta--coral    { --tono: #FE4C6E; }

.servicio-tarjeta__foto { background: var(--papel-2); }

.servicio-tarjeta__foto .foto,
.servicio-tarjeta__foto .foto-pendiente {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.servicio-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.35rem 1.4rem 1.5rem;
	flex: 1;
}

.servicio-tarjeta__cuerpo h3 { margin: 0; }

.servicio-tarjeta__cuerpo p {
	margin: 0;
	color: var(--tinta-2);
	font-size: .96rem;
}

.enlace-mas {
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--subtitulo);
	font-weight: 700;
	font-size: .95rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.enlace-mas::after {
	content: " →";
	transition: transform .15s ease;
}

.enlace-mas:hover::after { transform: translateX(2px); }

.pasos { margin-top: 3rem; }

.cierre__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.cierre__nota {
	margin-top: 1.25rem;
	color: var(--tinta-2);
	font-size: .95rem;
}

/* ============================================================ NOTA DE MANTENIMIENTO

   Tres reglas que este archivo aprendió a la mala. Vale respetarlas antes de
   agregar cualquier cosa nueva.

   1. Nunca usar como ámbito una clase que WordPress le pone al <body>.
      `error404`, `home`, `page`, `single`, `search`, `blog` y `logged-in`
      viven en el body, así que `.error404 svg` alcanza TODA la página, no solo
      el bloque que uno tenía en mente. Si hace falta acotar, se exigen dos
      clases del mismo elemento (`.contenedor.error404`) o se usa un nombre
      propio del tema.

   2. Dar tamaño por clase, no por elemento. `.loquesea svg` se pisa con el
      siguiente `.otracosa svg` que alguien escriba, porque tienen la misma
      especificidad y gana el que esté más abajo. Los íconos ya tienen la clase
      `.icono` y se dimensionan ahí, una sola vez.

   3. Al corregir un componente, editar SU bloque; no agregar un parche al
      final del archivo. Un parche suelto se pierde la próxima vez que alguien
      reescriba el bloque original — así desapareció dos veces la regla de la
      barra de administración, que ahora vive junto al resto de la cabecera.

   Y una consecuencia de la 2: si una regla nueva no se aplica, antes de
   subirle la especificidad conviene abrir el inspector y mirar qué la está
   pisando. Casi siempre es una regla con una clase más, no la caché.
=========================================================================== */