/* ---- assets/css/pages.css ---- */
/**
 * Páginas: archivo de pasarela, focus pages, guías y About.
 * Referencia: design/wireframes-amai.html, sección 06.
 */

/* ===========================================================================
   Archivo de pasarela
   ===========================================================================
   Único sitio con fondo de papel: el cambio de color dice «archivo» frente al
   blanco de tienda, sin tener que explicarlo. */

.amai-catwalk-season {
  background-color: var(--amai-paper);
}

.amai-catwalk-season .ct-container-full,
.amai-catwalk-season .ct-container {
  padding-block-start: 0;
  /* Y el de abajo también. Blocksy cierra el contenido con ~58px de relleno
     que aquí no son invisibles: el fondo de papel los pinta, y la tira de
     premios quedaba pegada a la galería (1px) y flotando sobre la sección
     siguiente (58px). El espacio de la tira lo pone la tira. */
  padding-block-end: 0;
}

/* La tira de credenciales cierra la temporada, así que respira por igual por
   arriba y por abajo en vez de heredar el hueco de nadie. */
.amai-catwalk-season .amai-press-strip {
  padding-block: var(--amai-space-4);
  border-top: 1px solid var(--amai-line);
}

.amai-catwalk-hero {
  padding: clamp(2rem, 6vw, 3.5rem) var(--amai-gutter) var(--amai-space-4);
  border-bottom: 1px solid var(--amai-line);
}

.amai-catwalk-hero__title {
  margin: 0;
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: clamp(2.125rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.amai-catwalk-hero__venue {
  margin: var(--amai-space-1) 0 0;
  font-family: var(--amai-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amai-muted);
}

/* Ficha técnica: lo que prensa y compradores preguntan primero. */
.amai-catwalk-context {
  padding: var(--amai-space-4) var(--amai-gutter);
  border-bottom: 1px solid var(--amai-line);
}

.amai-catwalk-context__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  gap: var(--amai-space-2) var(--amai-space-6);
  margin: 0;
  font-family: var(--amai-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amai-catwalk-context__meta dt {
  color: var(--amai-muted);
}

.amai-catwalk-context__meta dd {
  margin: 2px 0 0;
  color: var(--amai-ink);
}

/* El lookbook a gran formato: la pasarela es el activo de autoridad de la casa
   y se enseña grande. Sin lightbox en v1. */
/* Con .has-nested-images porque el núcleo maqueta la galería con flex y esa es
   su especificidad: sin igualarla, gana el suyo por orden de carga. */
.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--amai-line);
}

/* El `:not(#individual-image)` no sobra: es el truco con el que el núcleo se
   da a sí mismo especificidad de ID para repartir el ancho de las figuras
   (`.wp-block-gallery...columns-2 figure.wp-block-image:not(#individual-image)`).
   Sin igualarlo, cada foto se queda en el 50% de su celda aunque la celda esté
   bien calculada. Se copia el truco en vez de recurrir a !important. */
.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  margin: 0;
  width: 100%;
}

.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--amai-bg);
}

/* El lookbook ocupa el ancho del contenedor. Se probó a llevarlo a sangre con
   100vw, pero el grupo de Gutenberg vuelve a centrar la galería a la anchura de
   contenido del tema, así que quedaba a medias y con riesgo de scroll
   horizontal. A 1296px ya se ve grande, que es lo que pide el wireframe. */
.amai-catwalk-season .wp-block-group,
.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* El primero a sangre completa: es el look de apertura. */
.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images > figure:first-child {
  grid-column: 1 / -1;
}

.amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images > figure:first-child img {
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images {
    grid-template-columns: 1fr;
  }

  .amai-catwalk-season .entry-content .wp-block-gallery.has-nested-images > figure:first-child img {
    aspect-ratio: 3 / 4;
  }
}

/* ===========================================================================
   Migas
   ===========================================================================
   Las de la ficha de producto viven en shop.css y son otras: van dentro de la
   columna de compra. Estas son las de las páginas. */

.amai-crumb {
  font-family: var(--amai-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amai-muted);
}

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

.amai-crumb a:hover,
.amai-crumb a:focus-visible {
  color: var(--amai-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.amai-crumb--page {
  padding: var(--amai-space-4) var(--amai-gutter) 0;
}

/* ===========================================================================
   Focus pages de colección
   ===========================================================================
   OJO con los selectores: estas reglas NO cuelgan de `.amai-focus-page`, la
   clase del body, aunque podrían. Las clases `.amai-focus-*` ya son únicas, y
   sin el prefijo del body las mismas reglas valen dentro del editor, donde el
   lienzo no hereda ninguna clase de la página. Es lo que hace que al editar una
   colección se vean las fotos con su proporción y el texto en su medida, en vez
   de una tira de imágenes estiradas.
   CLAUDE.md §7. La página se compone con los bloques de siempre; lo que cambia
   respecto a la home es que aquí hay que LEER, así que la narrativa se mete en
   medida de lectura y respira, y los bloques de tienda siguen a sangre. */

/* La medida es la del texto: el canal lateral se suma aparte, o el párrafo se
   queda dos gutters más estrecho de lo pedido y deja de alinearse con lo que
   tiene encima y debajo. */
.amai-focus-narrative {
  max-width: calc(var(--amai-measure) + 2 * var(--amai-gutter));
  margin-inline: auto;
  padding: var(--amai-section-gap) var(--amai-gutter) 0;
}

/* Entre la última narrativa y la fila de producto, el aire de sección entero:
   es el salto de contar a vender. */
.amai-focus-narrative:last-of-type {
  padding-bottom: var(--amai-section-gap);
}

.amai-focus-narrative p {
  margin: 0 0 var(--amai-space-3);
  font-size: 1.0625rem;
  line-height: var(--amai-leading-body);
}

/* La entradilla, un punto por encima: es la frase con la que Amai explica la
   colección y se lee sola. */
.amai-focus-lede {
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  line-height: 1.4;
}

.amai-focus-narrative h2 {
  margin: 0 0 var(--amai-space-3);
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-h3);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Un apartado a dos columnas no cabe en la medida de lectura: partir 66ch en
   dos deja dos columnas de treinta caracteres, que es ancho de periódico y no
   de pantalla. Cuando hay columnas, el apartado se ensancha. */
.amai-focus-narrative--wide {
  max-width: calc(62rem + 2 * var(--amai-gutter));
}

/* Las dos columnas de «Inspiration» son dos textos hermanos, no una retícula:
   en el móvil se apilan y en escritorio se separan lo justo. */
.amai-focus-columns {
  gap: var(--amai-space-6);
  margin-block-start: var(--amai-space-4);
}

.amai-focus-columns p {
  font-size: 0.9375rem;
}

/* El par de fotos: mismo hueco de un píxel que las tarjetas de tienda, para que
   la página entera se lea como una sola retícula. */
.amai-focus-pair {
  gap: 1px;
  margin-block-start: var(--amai-section-gap);
  background: var(--amai-line);
  border-block: 1px solid var(--amai-line);
}

.amai-focus-pair .wp-block-column {
  background: var(--amai-bg);
}

.amai-focus-pair figure {
  margin: 0;
}

.amai-focus-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 767px) {
  .amai-focus-columns {
    gap: var(--amai-space-3);
  }
}

/* ===========================================================================
   Guides
   ===========================================================================
   CLAUDE.md §7 y §8. Páginas para leer: medida corta, cuerpo grande, mucho
   interlineado. Sin fecha, sin autor, sin «artículo siguiente»: no son un blog
   y no deben parecerlo. */

.amai-guide__header {
  max-width: calc(var(--amai-measure) + 2 * var(--amai-gutter));
  margin-inline: auto;
  padding: var(--amai-space-4) var(--amai-gutter) 0;
}

.amai-guide__header .amai-crumb {
  padding: 0;
}

.amai-guide__title {
  margin: var(--amai-space-2) 0 0;
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Índice: una caja de servicio, no una pieza de diseño. Filete arriba y abajo y
   nada más, para que no compita con el título. */
.amai-guide__toc {
  max-width: calc(var(--amai-measure) + 2 * var(--amai-gutter));
  margin: var(--amai-space-6) auto 0;
  padding: var(--amai-space-3) var(--amai-gutter);
  border-block: 1px solid var(--amai-line);
}

.amai-guide__toc-title {
  margin: 0 0 var(--amai-space-2);
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  font-weight: 400;
  letter-spacing: var(--amai-tracking-label);
  text-transform: uppercase;
  color: var(--amai-muted);
}

.amai-guide__toc-list {
  margin: 0;
  padding: 0 0 0 1.25em;
  font-family: var(--amai-font-mono);
  font-size: 0.8125rem;
  line-height: 1.9;
}

.amai-guide__toc-list a {
  color: var(--amai-ink);
  text-decoration: none;
}

.amai-guide__toc-list a:hover,
.amai-guide__toc-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El cuerpo de la guía. Los bloques anchos —una fila de producto, una imagen a
   sangre— se salen de la medida a propósito: son la pausa visual. */
.amai-guide .entry-content > *:not(.alignwide):not(.alignfull) {
  max-width: var(--amai-measure);
  margin-inline: auto;
}

.amai-guide .entry-content {
  padding-inline: var(--amai-gutter);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.amai-guide .entry-content p,
.amai-guide .entry-content ul,
.amai-guide .entry-content ol {
  margin-block: 0 var(--amai-space-3);
}

.amai-guide .entry-content li {
  margin-block-end: var(--amai-space-1);
}

.amai-guide-lede {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
}

.amai-guide .entry-content h2 {
  margin: var(--amai-space-8) 0 var(--amai-space-2);
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-h3);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
  /* El índice lleva a estos encabezados: si el salto los deja pegados al borde
     de arriba, no se ve dónde has aterrizado. */
  scroll-margin-top: var(--amai-space-6);
}

.amai-guide .entry-content h3 {
  margin: var(--amai-space-6) 0 var(--amai-space-2);
  font-family: var(--amai-font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Una fila de producto dentro de una guía es un descanso: se separa del texto
   por arriba y por abajo para que no parezca parte del párrafo. */
.amai-guide .entry-content .amai-shop-row {
  margin-block: var(--amai-section-gap);
}

/* ---------- Índice de Guides ---------- */

.amai-guides-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--amai-line);
}

.amai-guides-list__item {
  border-bottom: 1px solid var(--amai-line);
}

.amai-guides-list__link {
  display: block;
  padding: var(--amai-space-4) var(--amai-gutter);
  color: inherit;
  text-decoration: none;
  transition: background var(--amai-transition);
}

.amai-guides-list__link:hover,
.amai-guides-list__link:focus-visible {
  background: var(--amai-paper);
}

.amai-guides-list__title {
  display: block;
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-h3);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

.amai-guides-list__excerpt {
  display: block;
  max-width: var(--amai-measure);
  margin-block-start: var(--amai-space-1);
  color: var(--amai-muted);
  line-height: var(--amai-leading-body);
}

/* El índice de Guides no tiene contenido propio: la lista la pone el tema. Sin
   esto, el hueco que Blocksy reserva para el contenido deja una franja vacía
   con su filete debajo del último elemento, que parece una guía sin nombre. */
.amai-guides-index .entry-content {
  padding-block: 0;
}

/* ===========================================================================
   About
   ===========================================================================
   Estaba construida con Stackable y con una galería de Modula: 281 KB de
   lightbox y retícula para cuatro recortes, más 58 KB de bloques. Se rehízo con
   bloques del núcleo y el aspecto lo pone esto.

   De paso entra en el sistema de diseño, del que estaba fuera sin que se notara:
   sus bloques pedían Courier Prime, que no se carga —las fuentes remotas están
   cortadas— así que la página entera se estaba pintando con la tipografía por
   defecto del navegador. */

/* .wp-block-columns gana por especificidad si se escribe la clase sola. */
.wp-block-columns.amai-about-hero {
  position: relative;
  align-items: center;
  gap: 0;
  min-height: min(80vh, 700px);
  margin-block: 0;
  padding-inline: var(--amai-gutter);
}

/* El manifiesto pisa el retrato, como en el original. */
.amai-about-hero__claim {
  z-index: 1;
  flex-basis: 58% !important;
}

/* En Archivo pero en peso normal, no en el display de la casa: son cuatro
   frases de manifiesto en caja baja, y a peso 800 y en versales dejarían de
   leerse como una declaración para gritar como un rótulo. El tamaño sí es de
   titular; el wireframe pide la tipografía como gráfica en los momentos de
   statement (§03). */
.amai-about-hero__claim h2 {
  margin: 0;
  font-family: var(--amai-font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
}

.amai-about-hero__portrait {
  flex-basis: 42% !important;
  margin-inline-start: -8%;
}

.amai-about-hero__portrait figure {
  margin: 0;
}

.amai-about-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ---------- Bio ---------- */

.amai-about-bio {
  gap: var(--amai-space-6);
  margin-block: 0;
  padding: var(--amai-section-gap) var(--amai-gutter);
  background: var(--amai-paper);
}

.amai-about-bio h2 {
  margin: 0;
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-h2);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Los párrafos van en versales porque así los escribió Amai. En versales la
   línea necesita más aire y más espacio entre letras, o se lee como un muro. */
.amai-about-bio p {
  max-width: var(--amai-measure);
  margin: 0 0 var(--amai-space-3);
  font-size: 0.875rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.amai-about-bio p:last-child {
  margin-bottom: 0;
}

/* ---------- Prensa ---------- */

/* Menos aire por arriba que una sección suelta: viene justo detrás de las
   credenciales y las dos cuentan lo mismo, así que se leen como un bloque. */
.amai-about-press {
  padding: var(--amai-space-8) var(--amai-gutter) var(--amai-section-gap);
}

.amai-about-press > h2 {
  margin: 0 0 var(--amai-space-4);
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-h3);
  line-height: var(--amai-leading-heading);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Sin recortar y sin lightbox: son recortes de prensa, y cortarlos es cortar el
   titular. Cada uno enlaza a su archivo, que es lo que hacía el lightbox de
   Modula por 139 KB. */
.amai-about-press .wp-block-gallery.has-nested-images {
  gap: var(--amai-space-3);
  margin: 0;
}

.amai-about-press .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  align-self: flex-start;
  margin: 0;
}

.amai-about-press .wp-block-gallery.has-nested-images img {
  width: 100%;
  height: auto;
  background: var(--amai-paper);
}

@media (max-width: 900px) {
  .amai-about-hero {
    min-height: 0;
  }

  .amai-about-hero__claim,
  .amai-about-hero__portrait {
    flex-basis: 100% !important;
  }

  .amai-about-hero__portrait {
    margin-inline-start: 0;
  }
}

/* ===========================================================================
   Acordeones de servicio (Customer care, Legals)
   ===========================================================================
   Con <details> del núcleo, que abre y cierra sin una línea de JavaScript y ya
   lo anuncia a los lectores de pantalla. Antes eran acordeones de Stackable. */

/* Alineado a la izquierda y no centrado: el h1 de estas páginas lo pinta el
   tema pegado al canal izquierdo, y un bloque centrado debajo deja el título
   colgando en una esquina. */
.amai-faq {
  max-width: calc(var(--amai-measure) + 2 * var(--amai-gutter));
  margin-inline: 0;
  padding: var(--amai-space-2) var(--amai-gutter) var(--amai-space-8);
}

/* El mismo acordeón sirve en dos sitios: las preguntas de una guía y los
   apartados de Customer care y Legals, que el 26/08/2026 dejaron de ser bloques
   de Stackable para ser <details> del núcleo. Un solo juego de reglas, con
   :is(), en vez de dos que se desincronicen. */
:is(.amai-faq, .entry-content) .wp-block-details {
  border-bottom: 1px solid var(--amai-line);
}

:is(.amai-faq, .entry-content) .wp-block-details:first-of-type {
  border-top: 1px solid var(--amai-line);
}

/* El rótulo, con un signo propio en vez del triángulo del navegador: en la
   tienda el estado abierto/cerrado ya se dice así en los acordeones de la ficha
   de producto, y aquí conviene que sea el mismo gesto. */
:is(.amai-faq, .entry-content) .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--amai-space-2);
  padding: var(--amai-space-3) 0;
  font-family: var(--amai-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

:is(.amai-faq, .entry-content) .wp-block-details summary::-webkit-details-marker {
  display: none;
}

:is(.amai-faq, .entry-content) .wp-block-details summary::after {
  content: '+';
  font-size: 1rem;
  line-height: 1;
  color: var(--amai-muted);
}

:is(.amai-faq, .entry-content) .wp-block-details[open] summary::after {
  content: '−';
  color: var(--amai-ink);
}

:is(.amai-faq, .entry-content) .wp-block-details summary:focus-visible {
  outline: var(--amai-focus-ring);
  outline-offset: var(--amai-focus-offset);
}

:is(.amai-faq, .entry-content) .wp-block-details p {
  margin: 0 0 var(--amai-space-3);
  padding-inline-end: var(--amai-space-4);
  line-height: var(--amai-leading-body);
}

/* Legals pasa de las 4.700 palabras: a todo lo ancho del contenedor no se lee.
   En las guías esto ya lo da el ancho de .amai-faq; fuera de ellas hay que
   ponerlo aquí, y en el <details> entero y no solo en el texto: si se limita
   solo el párrafo, el filete sigue cruzando los 1.296px y el corte se lee como
   un margen mal puesto. */
/* El ancho va en el TEXTO, no en el <details>.
   La maquetación «constrained» de WordPress centra cada bloque hijo dentro del
   contenido con márgenes automáticos y !important. Mientras el <details> mide
   lo que mide la columna, ese centrado lo deja justo donde tiene que estar,
   alineado con el h1. En cuanto se le pone un max-width propio, el centrado lo
   manda al medio de la página; y si además se matan los márgenes, se va al
   borde. Probadas las dos, y las dos quedaban peor.
   Legals pasa de las 4.700 palabras: lo que hay que limitar para que se lea es
   la línea de texto. */
.entry-content .wp-block-details > :not(summary) {
  max-width: var(--amai-measure, 68ch);
}