/* =========================================================
   SELLO · adaptación de la home a WordPress (CSS)
   ---------------------------------------------------------
   Cuándo se carga:
     - Solo en páginas con la plantilla «Home SELLO».
     - Solo si existe assets/home/sello.css.
     - Siempre DESPUÉS de sello.css (depende de él).

   Regla de oro: sello.css se copia TAL CUAL desde la home.
   Todo lo que WordPress necesita para que la home se vea
   igual que el diseño aprobado va AQUÍ, nunca dentro de
   sello.css. Así, cuando la home cambie, basta con
   reemplazar sello.css.

   Si algo no se puede resolver desde aquí, se apunta en
   CAMBIOS-PARA-LA-HOME.md (qué y por qué) para el otro chat.
   ========================================================= */

/* ---------- Barra de administración ----------
   Las piezas fijas de la home (cabecera, menú móvil, bolsa,
   panel de información y ficha rápida) se desplazan bajo la
   barra de administración cuando hay sesión iniciada. Así sus
   botones de cerrar no quedan tapados por la barra.
   Por debajo de 600 px la barra no es fija. */
body.admin-bar .site-head,
body.admin-bar .mnav,
body.admin-bar .drawer,
body.admin-bar .sheet,
body.admin-bar .qv {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	body.admin-bar .site-head,
	body.admin-bar .mnav,
	body.admin-bar .drawer,
	body.admin-bar .sheet,
	body.admin-bar .qv {
		top: 0;
	}
}

/* El enlace «Saltar al contenido» de la home (12 px en sello.css)
   aparece al pulsar Tab: que no quede debajo de la barra. */
@media (min-width: 601px) {
	body.admin-bar .skip:focus {
		top: calc(12px + var(--wp-admin--admin-bar--height, 0px));
	}
}

/* Piezas pegajosas (position: sticky). El valor base es el de
   sello.css (copia 1791184479-8dd7) más la altura de la barra.
   Revisar estos valores y sus anchos al cerrar la home. */
@media (min-width: 901px) {
	body.admin-bar .gifts-media {
		top: calc(100px + var(--wp-admin--admin-bar--height, 0px));
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	body.admin-bar .finder-stage {
		top: calc(var(--head-h) + 8px + var(--wp-admin--admin-bar--height, 0px));
	}
}

/* ---------- Marcado de la home (bloque «sello/home-html») ----------
   El bloque pinta el <body> de la home sin envoltorio, así que
   sus piezas (cabecera fija, main, pie, bolsa, fichas…) quedan
   como hijas directas de .wp-site-blocks. WordPress les pone
   margin-block-start: 22px (blockGap de theme.json), que bajaría
   la cabecera y los paneles fijos y abriría huecos antes del hero
   y del pie. En la home original ese margen no existe.
   Especificidad (0,0,1): gana a la regla de WordPress (0,0,0) sea
   cual sea el orden de carga, y pierde ante cualquier clase de
   sello.css. */
body :where(.wp-site-blocks > *) {
	margin-block: 0;
}

/* El relleno superior e inferior de .wp-site-blocks sale de
   Estilos › Diseño del editor de sitios (0 en theme.json). En la
   home se fija a 0 para que un cambio ahí no la desplace. */
body .wp-site-blocks {
	padding-block: 0;
}

/* ---------- Lo que la home original trae en su <head> ----------
   index.html empieza con un <style> que WordPress no imprime.
   Casi todo lo vuelve a fijar sello.css; estas dos reglas no:
   - el relleno de las zonas seguras del iPhone (con
     viewport-fit=cover, que functions.php añade en esta plantilla);
   - [hidden] siempre oculto, aunque una regla ponga display. */
:root {
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

[hidden]:not([hidden=until-found i]) {
	display: none !important;
}

/* ---------- Contenido de la página ----------
   Debajo del bloque, la plantilla «Home SELLO» tiene
   core/post-content (clase .sello-home), vacío por ahora. Sus
   bloques van pegados, sin el espacio entre bloques de WordPress. */
.sello-home > * {
	margin-block: 0;
}

/* ---------- Títulos ocultos (solo para lectores de pantalla) ----------
   theme.json da a todos los <h2> el tamaño de los titulares de las
   demás páginas (clamp(32px, 3.6vw, 56px)). Los titulares de la home
   llevan su propia clase y no se ven afectados, pero el título oculto
   de Opiniones (<h2 class="visually-hidden" id="rev-h">) no tiene
   tamaño en sello.css y lo heredaba. Aquí recupera el tamaño por
   defecto del navegador (1,5em), el mismo que en la home aprobada.
   El interlineado y los márgenes (.83em) ya dependen de él. */
.sello-home h2.visually-hidden {
	font-size: 1.5em;
}

/* ---------- Barra de avisos vacía ----------
   Si en el bloque «SELLO · Cabecera» se quitan todos los avisos, la
   franja de arriba no se pinta (lleva hidden) y su altura pasa a 0:
   así la cabecera, el menú del móvil y el texto de la portada suben
   y no queda una franja negra vacía. Con avisos, nada cambia. */
:root:has(#siteHead > .topbar[hidden]) {
	--top-h: 0px;
}

/* Pendiente (cuando la home esté cerrada):
   - (Hecho) El «Saltar al contenido» propio de WordPress se quita
     en esta plantilla desde functions.php: la home ya trae el suyo.
   - Comprobar scroll-padding-top con la barra de administración.
   - Ajustes para los bloques nativos de los patrones. */

/* =========================================================
   0.13.0 · piezas nuevas y opcionales
   ---------------------------------------------------------
   Nada de esto cambia la home aprobada: cada regla se refiere
   a un elemento que solo existe si la persona lo activa (botón
   destacado de la cabecera, redes del pie, resumen del Journal,
   banda «SELLO · Contacto»). Usa solo las variables y las
   tipografías de sello.css.
   ========================================================= */

/* ---------- Journal: resumen de cada entrada (opcional) ---------- */
.post .post-extract {
	margin: 0;
	max-width: 38ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fg-dim);
}

/* ---------- Pie: redes sociales (opcional) ----------
   Enlaces de texto en la columna de contacto, con el mismo
   aspecto que los de las otras columnas (.foot-col a). */
.foot-social {
	margin-top: 22px;
}

.foot-social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foot-social-list li {
	margin: 0;
	padding: 0;
}

/* ---------- Cabecera: botón destacado «Contacto» (opcional) ----------
   Una píldora con borde fino, a la izquierda de los iconos. Con la
   letra y el color de los enlaces del menú (.hdr-link). Por debajo
   de 761 px no cabe junto al logo y los iconos: allí está en el menú
   del móvil (.mnav-cta), arriba de los enlaces pequeños. */
.hdr-cta {
	display: inline-flex;
	align-items: center;
	height: 38px;
	margin-right: 8px;
	padding: 0 18px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}

@media (hover: hover) {
	.hdr-cta:hover {
		background: var(--fg);
		border-color: var(--fg);
		color: var(--ink);
	}
}

@media (max-width: 760px) {
	.hdr-cta {
		display: none;
	}
}

.mnav-cta-row {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 10px;
}

.mnav-small .mnav-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 28px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}

@media (hover: hover) {
	.mnav-small .mnav-cta:hover {
		background: var(--fg);
		border-color: var(--fg);
		color: var(--ink);
	}
}

/* Con el botón ya en la cabecera (761 px o más), el menú del móvil no lo repite. */
@media (min-width: 761px) {
	.mnav-cta-row {
		display: none;
	}
}

/* ---------- Banda «SELLO · Contacto» (opcional) ----------
   Hermana de la newsletter (.news): misma altura de banda, mismo
   reparto 7/5 y mismos botones, pero sobre fondo hueso, como la banda
   «Tienda online» del patrón Tiendas. El botón con borde (.btn-line) de
   sello.css es claro; sobre hueso se invierte. */
.cta-contact {
	padding-block: clamp(72px, 8vw, 120px);
}

.cta-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 88px);
	align-items: end;
}

.cta-body p {
	margin: 0 0 24px;
	max-width: 44ch;
	font-size: 15px;
	color: var(--ink-dim);
}

.cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cta-contact .btn-line {
	color: var(--ink-fg);
}

.cta-contact .btn-line::after {
	background: var(--ink-fg);
}

.cta-contact .btn-line:hover {
	color: var(--bone);
}

@media (max-width: 900px) {
	.cta-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.cta-btns {
		flex-direction: column;
	}

	.cta-btns .btn {
		width: 100%;
	}
}

/* =========================================================
   0.13.1 · pie con datos de contacto
   ---------------------------------------------------------
   La columna «Hablemos» del pie enseña ahora el correo, el
   teléfono y la dirección de la tienda de Madrid, más un enlace
   a «Tiendas». El correo y el teléfono son enlaces dentro de una
   línea de texto: conservan el tamaño y la letra de su línea
   (15 px; el correo, Fragment Mono 13 px) y solo se distinguen
   por un subrayado fino. El enlace «Ver nuestras tiendas» es un
   enlace de columna más (.foot-col a) y no necesita nada.
   ========================================================= */
.foot-contact p:not(.mono-label) a {
	display: inline-block;
	padding-block: 2px;
	font-size: inherit;
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: rgba(236, 233, 227, .35);
	transition: text-decoration-color .3s;
}

.foot-contact p:not(.mono-label) a:hover,
.foot-contact p:not(.mono-label) a:focus-visible {
	text-decoration-color: currentColor;
}