/* ---- assets/css/fonts.css ---- */
/**
 * Tipografías locales (GDPR + rendimiento: nunca desde CDN externo).
 *
 * Archivo   — grotesk variable, ejes wght 100..900 y wdth 62..125.
 *             El eje de anchura es lo que da la firma display expandida.
 * Space Mono — datos: tallas, precios, fechas, labels, nav utilitaria.
 *
 * Ambas familias son SIL Open Font License 1.1. Ver assets/fonts/OFL.txt.
 * Subsets latin y latin-ext. font-display: swap para no bloquear el render.
 */

/* ---------- Archivo (variable) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Space Mono ---------- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/spacemono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/spacemono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/spacemono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Alias de Inter ----------
 * Blocksy declara un @font-face de 'Inter' que apunta a una carpeta que no
 * existe en esta instalación (404 en cada página), y Stackable impone
 * font-family:"Inter" a encabezados, listas y celdas con selectores propios.
 *
 * Perseguir esos selectores uno a uno es frágil: cada actualización del plugin
 * puede añadir otro. Redeclarar la familia después (gana la última declaración)
 * hace que cualquier regla de terceros que pida Inter reciba nuestro Archivo
 * local. Se elimina cuando la tipografía de Blocksy y Stackable se reconfigure
 * a Archivo en la Fase 1 y esta declaración deje de tener a quién servir.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('https://amairodriguez.com/wp-content/themes/amai-rodriguez/assets/css/../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- assets/css/tokens.css ---- */
/**
 * Sistema de diseño — tokens.
 * Fuente de verdad: CLAUDE.md §5 y design/wireframes-amai.html.
 * Ningún componente debe declarar colores, tamaños ni ritmos fuera de aquí.
 */

:root {
  /* ---------- Color ----------
     Base editorial en blanco y negro. El color lo ponen las prendas. */
  --amai-bg: #ffffff;
  --amai-ink: #0a0a0a;
  --amai-muted: #6b6b6b;
  --amai-line: #e5e5e5;

  /* Verde de marca, extraído del sitio en producción (--theme-palette-color-1).
     REGLA DE ACCESIBILIDAD (obligatoria): 1.37:1 sobre blanco, así que nunca
     se usa como color de texto sobre fondo claro. Solo como FONDO con texto en
     tinta encima (14.4:1), o como TEXTO sobre tinta (14.4:1). Nunca decorativo. */
  --amai-accent: #00ff00;
  /* Para texto acentuado sobre blanco: mismo hue, 5.14:1 sobre #fff (WCAG AA). */
  --amai-accent-deep: #008000;

  --amai-paper: #f4f4f2;   /* exclusivo del archivo Catwalk */

  /* Tinta sobre superficies: pares ya validados */
  --amai-on-accent: var(--amai-ink);
  --amai-on-ink: #ffffff;
  /* Secundario sobre tinta. --amai-muted se queda en 3.8:1 ahí, insuficiente
     para texto; este da 7.4:1 sobre #0a0a0a. */
  --amai-muted-on-ink: #9a9a9a;

  /* ---------- Tipografía ---------- */
  --amai-font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --amai-font-body: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --amai-font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ejes variables de Archivo. El display va expandido (wdth alto) y muy negro. */
  --amai-display-weight: 800;
  --amai-display-width: 112%;
  --amai-body-weight: 400;

  --amai-scale-hero: clamp(2.5rem, 8vw, 7rem);
  --amai-scale-h1: clamp(2rem, 5.5vw, 4.5rem);
  --amai-scale-h2: clamp(1.75rem, 4vw, 3rem);
  --amai-scale-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --amai-scale-body: 1rem;
  --amai-scale-small: 0.8125rem;
  --amai-scale-label: 0.6875rem;   /* mono en mayúsculas: tallas, precios, kickers */

  --amai-leading-display: 0.95;
  --amai-leading-heading: 1.05;
  --amai-leading-body: 1.55;
  --amai-tracking-display: -0.03em;
  --amai-tracking-label: 0.12em;

  /* ---------- Ritmo ---------- */
  --amai-space-unit: 8px;
  --amai-space-1: 8px;
  --amai-space-2: 16px;
  --amai-space-3: 24px;
  --amai-space-4: 32px;
  --amai-space-6: 48px;
  --amai-space-8: 64px;
  --amai-section-gap: clamp(4rem, 10vw, 10rem);
  --amai-container-max: 1440px;
  /* Medida de lectura de los textos largos —focus pages y guías—: unos 66
     caracteres de cuerpo, que es donde el ojo vuelve al principio de la línea
     sin perderse.

     En rem y no en ch aunque ch sea la unidad que mide caracteres: ch se
     resuelve contra la tipografía del PROPIO elemento, así que un titular con
     la misma medida en ch sale tres veces más ancho que su párrafo y las dos
     cosas dejan de alinearse por la izquierda. Se vio en la primera guía. */
  --amai-measure: 38rem;
  --amai-gutter: clamp(1rem, 3vw, 2.5rem);

  /* ---------- Otros ---------- */
  --amai-border: 1px solid var(--amai-line);
  --amai-border-ink: 1px solid var(--amai-ink);
  --amai-transition: 200ms ease;
  --amai-focus-ring: 2px solid var(--amai-ink);
  --amai-focus-offset: 2px;
}

/* ---- assets/css/base.css ---- */
/**
 * Capa base del sistema de diseño.
 *
 * FASE 0: aquí solo van utilidades con prefijo .amai- y primitivas compartidas.
 * Nada de esto reestiliza el sitio por sí solo — el criterio de la Fase 0 es que
 * el sitio se vea idéntico al actual. El repintado del tema (mapeo de estos
 * tokens a las variables de Blocksy) entra en la Fase 1.
 */

/* ---------- Primitivas tipográficas ---------- */

.amai-display {
  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;
}

.amai-hero-title {
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  font-size: var(--amai-scale-hero);
  line-height: var(--amai-leading-display);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Label mono: tallas, precios, fechas, nav utilitaria, kickers. */
.amai-label {
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  letter-spacing: var(--amai-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Kicker sobre blanco: usa el verde profundo, nunca el acento puro. */
.amai-kicker {
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amai-accent-deep);
}

/* ===========================================================================
   El h1 de respaldo (inc/layout.php)
   ===========================================================================
   Lo llevan los índices —Collections, Catwalk, Guides—, que antes no tenían ni
   un encabezado. Es el mismo titular que abre una temporada de pasarela: la
   casa dice los nombres de las secciones a un solo tamaño. */

.amai-page-title {
  margin: 0;
  /*
   * El sangrado horizontal no es nuestro gutter: es el del contenedor de
   * Blocksy, que sirve el contenido en min(90vw, 1440px) centrado. Con
   * --amai-gutter el título quedaba en 40px y el cuerpo de la página en 72:
   * 32px de desalineación en todas las páginas con título, no solo en Contact.
   * Se calcula igual que él y se pone un suelo con nuestro gutter para
   * pantallas estrechas.
   */
  padding-block: clamp(2rem, 6vw, 3.5rem) var(--amai-space-4);
  padding-inline: max(
    var(--amai-gutter),
    calc((100vw - min(var(--theme-container-edge-spacing, 90vw), var(--theme-normal-container-max-width, 1440px))) / 2)
  );
  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: var(--amai-leading-display);
  letter-spacing: var(--amai-tracking-display);
  text-transform: uppercase;
}

/* Excepción: en About el h1 es el nombre de la diseñadora y va en voz baja. El
   manifiesto es lo que tiene que mandar en esa pantalla, no el rótulo. */
.amai-page-kicker {
  margin: 0;
  padding: var(--amai-space-4) var(--amai-gutter) 0;
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  font-weight: 400;
  letter-spacing: var(--amai-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--amai-muted);
}

/* ---------- Layout ---------- */

.amai-container {
  max-width: var(--amai-container-max);
  margin-inline: auto;
  padding-inline: var(--amai-gutter);
}

.amai-section {
  padding-block: var(--amai-section-gap);
}

/* ---------- Botones ---------- */

.amai-btn {
  display: inline-block;
  font-family: var(--amai-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  border: var(--amai-border-ink);
  background: var(--amai-bg);
  color: var(--amai-ink);
  cursor: pointer;
  transition: background var(--amai-transition), color var(--amai-transition);
}

.amai-btn:hover,
.amai-btn:focus-visible {
  background: var(--amai-ink);
  color: var(--amai-on-ink);
}

.amai-btn--solid {
  background: var(--amai-ink);
  color: var(--amai-on-ink);
}

.amai-btn--solid:hover,
.amai-btn--solid:focus-visible {
  background: var(--amai-bg);
  color: var(--amai-ink);
}

/* Acento como fondo con tinta encima: el único uso permitido en superficie clara. */
.amai-btn--accent {
  background: var(--amai-accent);
  border-color: var(--amai-accent);
  color: var(--amai-on-accent);
}

.amai-btn--accent:hover,
.amai-btn--accent:focus-visible {
  background: var(--amai-ink);
  border-color: var(--amai-ink);
  color: var(--amai-on-ink);
}

/* ---------- Badges (OOAK, HAND-PAINTED, SALE) ---------- */

.amai-badge {
  display: inline-block;
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  letter-spacing: var(--amai-tracking-label);
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--amai-accent);
  color: var(--amai-on-accent);
}

.amai-badge--ink {
  background: var(--amai-ink);
  color: var(--amai-on-ink);
}

/* ---------- Accesibilidad ---------- */

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

/* Foco visible propio en todo lo que construyamos. */
[class*='amai-']:focus-visible {
  outline: var(--amai-focus-ring);
  outline-offset: var(--amai-focus-offset);
}

/* ---- assets/css/layout.css ---- */
/**
 * Header, navegación y pie.
 *
 * Referencia: design/wireframes-amai.html, sección 03 (pines 2 y 10).
 * Todo son ajustes sobre el header y el footer de Blocksy: no se sobrescribe
 * ninguna plantilla del tema padre.
 */

/* ===========================================================================
   Paleta de enlaces de Blocksy
   ===========================================================================
   Blocksy tenía el verde de marca (#00ff00) como color de enlace en hover y en
   estado activo. Sobre blanco eso son 1.37:1 — invisible, y contrario a la
   regla del acento del proyecto. Se remapean sus variables a los tokens del
   sistema; el acento sigue usándose donde sí corresponde (fondos de botón y
   badges), que Blocksy resuelve por --theme-palette-color-1 y no se toca. */

:root {
  --theme-link-initial-color: var(--amai-ink);
  --theme-link-hover-color: var(--amai-accent-deep);
  --theme-link-active-color: var(--amai-accent-deep);
}

/* ===========================================================================
   Navegación principal
   =========================================================================== */

.header-menu-1 .ct-menu-link,
.header-menu-2 .ct-menu-link {
  font-family: var(--amai-font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* El menú móvil es el mismo menú: misma caja tipográfica, con el cuerpo mayor
   que corresponde a un panel a pantalla completa. */
.mobile-menu .ct-menu-link {
  font-family: var(--amai-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-menu .sub-menu .ct-menu-link {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}


/* Hover sobrio, con subrayado (referente Marine Serre). El color lo pone
   --theme-link-hover-color, ya remapeado arriba al verde profundo. */
.header-menu-1 li:hover > .ct-menu-link,
.header-menu-1 .ct-menu-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* El nivel principal marca la página actual con un subrayado, no con color:
   el acento no puede ser texto sobre blanco. */
.header-menu-1 > ul > .current-menu-item > .ct-menu-link,
.header-menu-1 > ul > .current-menu-ancestor > .ct-menu-link,
.header-menu-1 > ul > .current-menu-parent > .ct-menu-link {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ---------- Desplegables ---------- */

.header-menu-1 .sub-menu .ct-menu-link {
  font-family: var(--amai-font-display);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Contador de productos por categoría, como en el mega-menú de Marine Serre:
   dice de un vistazo dónde hay piezas. Decorativo — el dato real lo da el
   archivo — así que va con aria-hidden en el render. */
.amai-menu__count {
  font-family: var(--amai-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--amai-muted);
  margin-inline-start: 8px;
  vertical-align: 1px;
}

/* ---------- Panel de Shop ----------
 * El mega-menú de Blocksy es una extensión de pago. El submenú nativo, puesto
 * a dos columnas y con algo más de aire, hace el mismo trabajo sin depender de
 * ella y sin tocar plantillas. */

.header-menu-1 .amai-menu-panel > .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0 var(--amai-space-4);
  padding: var(--amai-space-3);
  /* Blocksy fija un ancho al submenú; con dos columnas y nombres largos como
     "Hand-Painted Vintage" hay que forzar el ancho o se parten en dos líneas. */
  width: 460px;
  max-width: min(460px, calc(100vw - 2 * var(--amai-gutter)));
  border: 1px solid var(--amai-line);
  border-radius: 0;
  box-shadow: none;
}

/* Los desplegables de Blocksy vienen con sombra y esquinas redondeadas; el
   sistema no usa ninguna de las dos cosas (wireframes, sección 08). */
.header-menu-1 .sub-menu {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--amai-line);
}

.header-menu-1 .amai-menu-panel > .sub-menu > li > .ct-menu-link {
  white-space: nowrap;
}

/* "All pieces" encabeza el panel y ocupa las dos columnas. */
.header-menu-1 .amai-menu-panel > .sub-menu > li:first-child {
  grid-column: 1 / -1;
  padding-block-end: var(--amai-space-2);
  margin-block-end: var(--amai-space-2);
  border-block-end: 1px solid var(--amai-line);
}

.header-menu-1 .amai-menu-panel > .sub-menu > li:first-child .ct-menu-link {
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  letter-spacing: var(--amai-tracking-label);
  text-transform: uppercase;
}

/* ===========================================================================
   Fila del header
   ===========================================================================
   Wireframe (sección 03, pin 2): marca a la izquierda y el resto a la derecha.
   La colocación de los elementos la aplica blocksy-header-layout.php; aquí van
   el ritmo entre nav y utilitario y la línea inferior. */

#header [data-row="middle"] {
  border-bottom: 1px solid var(--amai-line);
}

/* Cuenta y bolsa se separan de los enlaces, no se pegan al último. */
#header [data-row="middle"] [data-column="end"] {
  gap: var(--amai-space-3);
}

#header [data-row="middle"] [data-column="end"] .header-menu-1 {
  margin-inline-end: var(--amai-space-2);
}

/* ---------- Utilitario: cuenta y bolsa en mono ----------
   blocksy-header-layout.php apaga los iconos y enciende las etiquetas en
   escritorio; aquí se les da la caja tipográfica de la nav utilitaria del
   wireframe. */

/* :is(#header, #offcanvas) y no solo #header: el panel móvil es otro sitio del
   DOM, y acotarlo al escritorio dejaba «Login» y «Bag» con el tratamiento por
   defecto de Blocksy allí dentro. */
:is( #header, #offcanvas ) .ct-account-item .ct-label,
:is( #header, #offcanvas ) .ct-cart-item .ct-label {
  font-family: var(--amai-font-mono);
  /* Blocksy pone la etiqueta de cuenta en 600 y la de la bolsa en 400: las dos
     al mismo peso o el utilitario sale descuadrado. */
  font-weight: 400;
  font-size: var(--amai-scale-label);
  letter-spacing: var(--amai-tracking-label);
  text-transform: uppercase;
}

:is( #header, #offcanvas ) .ct-account-item:hover .ct-label,
:is( #header, #offcanvas ) .ct-account-item:focus-visible .ct-label,
:is( #header, #offcanvas ) .ct-cart-item:hover .ct-label,
:is( #header, #offcanvas ) .ct-cart-item:focus-visible .ct-label {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* La etiqueta de Blocksy solo sustituye {price}, así que con el texto «Bag»
   cuelga además el subtotal. Sobra: en la bolsa importa cuántas piezas hay,
   no cuánto suman. */
:is( #header, #offcanvas ) .ct-cart-item .ct-label[data-price="no"] .ct-amount {
  display: none;
}

/* ---------- El panel móvil va sobre fondo casi negro ----------
   Blocksy pinta los enlaces del menú en blanco pero deja cuenta y bolsa con el
   color de texto global —#212529—, o sea negro sobre negro: en el panel no se
   veían. Heredan el color del panel, que es el que Blocksy ya da a los
   enlaces. */
/* El emblema se pinta con currentColor, y dentro del panel el enlace de la
   marca hereda el acento: salía en verde ácido. El brief §5 lo prohíbe
   expresamente —el emblema nunca se colorea con el acento— así que aquí va en
   blanco, como el wordmark que tiene al lado. */
#offcanvas .site-logo-container,
#offcanvas .site-logo-container::before {
  color: var(--amai-bg);
}

#offcanvas .ct-account-item,
#offcanvas .ct-cart-item,
#offcanvas .ct-account-item .ct-label,
#offcanvas .ct-cart-item .ct-label,
#offcanvas .ct-account-item svg,
#offcanvas .ct-cart-item svg {
  color: var(--amai-bg);
  fill: currentColor;
}

/* El número de piezas vive en la insignia del icono, así que el icono sigue
   encendido en los ajustes y lo que se esconde es el glifo. La insignia deja
   de ser una pastilla redonda y pasa a ser el «(0)» del wireframe, en mono y
   pegado al texto. */
#header .ct-cart-item .ct-icon-container > svg {
  display: none;
}

#header .ct-cart-item .ct-icon-container {
  position: static;
  margin-inline-start: 0.4em;
}

#header .ct-cart-item .ct-dynamic-count-cart {
  /* Blocksy esconde la insignia con la bolsa vacía; aquí es texto y el «(0)»
     forma parte de la etiqueta, así que se muestra siempre. */
  display: inline;
  position: static;
  inset: auto;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  font-weight: 400;
  letter-spacing: var(--amai-tracking-label);
  line-height: inherit;
  transform: none;
}

#header .ct-cart-item .ct-dynamic-count-cart::before {
  content: '(';
}

#header .ct-cart-item .ct-dynamic-count-cart::after {
  content: ')';
}

/* ===========================================================================
   Bordes a sangre
   ===========================================================================
   Blocksy reserva aire por encima y por debajo del contenido. Está bien para un
   texto y está mal para un bloque a sangre, que es como abren y cierran casi
   todas las páginas de este sitio. Arriba deja una franja vacía sobre la
   portada y además la empuja hasta que no cabe en la pantalla; abajo hace que
   la última sección se lea como una banda del doble de su altura.

   Quién lleva estas clases lo decide inc/layout.php: quien abre con portada o
   con el h1 que pinta el tema, y quien cierra con un bloque a sangre o con uno
   de los índices generados. */

.amai-flush-start .ct-container-full,
.amai-flush-start .ct-container {
  padding-block-start: 0;
}

.amai-flush-end .ct-container-full,
.amai-flush-end .ct-container {
  padding-block-end: 0;
}

/* Y la portada mide la pantalla MENOS lo que hay encima. Con 100svh a secas, el
   hero empieza bajo la cinta y la cabecera, así que sobresale por abajo justo
   esos píxeles: el botón principal —lo único que la home tiene que conseguir—
   quedaba fuera de pantalla, 75px en escritorio y 99px en móvil.

   Va aquí y no en el CSS del bloque a propósito: el bloque no sabe qué tema lo
   envuelve; el tema sí sabe qué hay sobre él. --header-height lo publica
   Blocksy, --amai-marquee-height lo declara el propio bloque de la cinta, y el
   píxel suelto es el borde inferior del header. */
.amai-hero-first .amai-hero:first-child {
  min-height: calc(
    100svh - var(--header-height, 80px) - var(--amai-marquee-height, 34px) - 1px
  );
}

/* ===========================================================================
   Marca
   =========================================================================== */

/* El wordmark es un SVG en línea (blocksy-header-layout.php activa la opción):
   pinta con su propio fill y no gasta una petición aparte. */
.site-logo-container {
  display: inline-flex;
  align-items: center;
  gap: var(--amai-space-1);
}

/* Emblema junto al wordmark (wireframes, sección 02: ~28px, nunca en acento).
   Se pinta como máscara sobre currentColor, así que la misma pieza sirve en
   tinta aquí y en blanco sobre negro en el pie. El hueco solo existe cuando
   inc/layout.php encuentra assets/img/emblem.svg. */
.amai-has-emblem .site-logo-container::before {
  content: '';
  flex: 0 0 auto;
  /* 34 y no 28.
     El emblema es un lienzo cuadrado con aire alrededor del dibujo, así que la
     máscara ajusta al lienzo y no a la tinta: con 28px el dibujo medía 22 y
     quedaba un 13% por debajo de las capitales del wordmark, que miden 25,3.
     A 34px la tinta sale en 26,7 y planta cara a la tipografía, que es lo que
     pide una pieza fina al lado de una grotesca pesada. Medido, no a ojo. */
  width: var(--amai-emblem-size, 34px);
  height: var(--amai-emblem-size, 34px);
  background-color: currentColor;
  -webkit-mask: var(--amai-emblem) center / contain no-repeat;
  mask: var(--amai-emblem) center / contain no-repeat;
}

.site-title,
.ct-logo-container .site-title {
  font-family: var(--amai-font-display);
  font-weight: var(--amai-display-weight);
  font-stretch: var(--amai-display-width);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ===========================================================================
   Pie
   ===========================================================================
   Wireframe (sección 03, pin 10): cuatro columnas 2fr 1fr 1fr 1fr sobre blanco,
   encabezados en mono y enlaces en cuerpo pequeño. Sin fondo gris, sin
   separadores verticales y sin sombras.

   Ojo con los selectores: #footer ES .ct-footer, no lo contiene. Los de la
   Fase 1 iban escritos como `#footer .ct-footer …` y no llegaban a aplicar
   nunca. */

/* La drop list y las garantías ya traen su propio borde superior; el del pie
   de Blocksy encima de ellos dejaba dos líneas seguidas. */
.amai-newsletter + .amai-reassurance {
  border-top: 0;
}

#footer.ct-footer {
  background-color: var(--amai-bg);
  border-top: 1px solid var(--amai-ink);
}

/* Blocksy pone además su propia línea en cada fila del pie, y la de arriba caía
   justo encima de la nuestra: dos filetes de 1px pegados se ven como uno de 2px
   y en gris oscuro, que es el trazo más grueso de todo el sitio y estaba
   precisamente en el cierre.

   Arriba manda la nuestra —una línea en tinta, que es el punto y final de la
   página— y dentro del pie el corte hacia el aviso legal es un filete normal.
   Estas dos van sueltas y no por --theme-border: ese es el que Blocksy usa
   para los separadores VERTICALES entre columnas, y ya está apagado unas líneas
   más abajo; el de las filas no lo lee. */
#footer [data-row="top"] {
  border-top: 0;
}

/* Blocksy separa las columnas con una línea vertical y tiñe el pie de gris.
   Ni una cosa ni la otra: el pie es blanco y las columnas se separan por aire. */
#footer [data-row] > div {
  --theme-border: none;
}

/* La retícula del wireframe: la marca vale por dos columnas. Solo en la fila de
   arriba —la de cierre es una sola columna y si hereda esto se queda estrujada
   en un tercio del ancho—. */
#footer [data-row="top"] > div {
  --grid-template-columns: 2fr 1fr 1fr 1fr;
}

#footer [data-row="bottom"] {
  background-color: var(--amai-bg);
  /* El corte hacia el aviso legal, ya dentro del pie: filete normal. */
  border-top: 1px solid var(--amai-line);
}

/* ---------- Encabezados de columna ---------- */

#footer .amai-footer-title {
  margin: 0 0 var(--amai-space-1);
  font-family: var(--amai-font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: var(--amai-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--amai-muted);
}

/* ---------- Enlaces ---------- */

#footer .amai-footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .amai-footer-links li {
  margin-block-end: 5px;
  /* 12px, como el wireframe. Blocksy sirve el pie al cuerpo del sitio y los
     enlaces salían igual de grandes que el texto corrido. */
  font-size: 0.75rem;
  line-height: 1.5;
}

#footer a {
  color: var(--amai-ink);
  text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Marca ---------- */

#footer .wp-block-site-logo img {
  width: 180px;
  max-width: 100%;
  height: auto;
}

/* ---------- Línea de cierre ---------- */

#footer .ct-footer-copyright {
  font-family: var(--amai-font-mono);
  font-size: var(--amai-scale-label);
  letter-spacing: 0.06em;
  color: var(--amai-muted);
}

#footer .ct-footer-copyright a {
  color: var(--amai-muted);
}

/* En móvil el pie baja a dos columnas, con la marca ocupando la fila entera
   (wireframes, sección 06). */
@media (max-width: 767px) {
  #footer [data-row="top"] > div {
    --grid-template-columns: 1fr 1fr;
  }

  #footer [data-row="top"] [data-column="widget-area-1"] {
    grid-column: 1 / -1;
  }
}

/* ===========================================================================
   Foco visible en todo el sitio (wireframes, sección 08: no se elimina nunca)
   =========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--amai-focus-ring);
  outline-offset: var(--amai-focus-offset);
}

/* ===========================================================================
   Archivo de tienda
   ===========================================================================
   Wireframe §04. Las tarjetas son las de la home —mismo CSS, que viene del
   plugin—; aquí van solo la retícula del grid y la barra de filtros. */

/* Los filtros hacen de cabecera del archivo, así que van pegados al header:
   el aire que Blocksy pone sobre el contenido deja una franja vacía. */
.woocommerce-shop .ct-container-full,
.woocommerce-shop .ct-container,
.tax-product_cat .ct-container-full,
.tax-product_cat .ct-container {
  padding-block-start: 0;
}

.amai-shop-filters {
  padding: var(--amai-space-2) var(--amai-gutter);
  border-bottom: 1px solid var(--amai-line);
}

.amai-shop-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amai-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amai-shop-filters__chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--amai-line);
  font-family: var(--amai-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--amai-ink);
  transition: background var(--amai-transition), color var(--amai-transition);
}

.amai-shop-filters__chip:hover,
.amai-shop-filters__chip:focus-visible {
  border-color: var(--amai-ink);
}

/* El filtro activo se marca invirtiéndolo, no con el acento: el verde sobre
   blanco no llega a contraste de texto. */
.amai-shop-filters__chip--on {
  background: var(--amai-ink);
  border-color: var(--amai-ink);
  color: var(--amai-on-ink);
}

/* El grid hereda la tarjeta de la fila de la home, pero no su comportamiento:
   la fila hace scroll horizontal en móvil y un archivo tiene que apilarse. */
.amai-shop-grid {
  --amai-shop-row-columns: 4;
}

@media (max-width: 767px) {
  .amai-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
  }

  .amai-shop-grid .amai-shop-row__card {
    flex: none;
    margin-inline-start: 0;
  }
}

/* Blocksy pinta su propia paginación y su cabecera de archivo; se les da la
   caja tipográfica del sistema. */
.woocommerce-pagination {
  padding: var(--amai-space-4) var(--amai-gutter);
  font-family: var(--amai-font-mono);
  font-size: 0.75rem;
}

.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--amai-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amai-muted);
}

/* ===========================================================================
   Aviso de cookies
   ===========================================================================
   El de Blocksy, vestido con el sistema de diseño. Venía con dos problemas.

   El gordo: el botón de rechazar daba 1,17:1 de contraste —texto casi blanco
   sobre fondo casi blanco— frente a 14,94:1 el de aceptar. Además de estar muy
   por debajo del 4,5:1 que pide la AA, es un patrón oscuro de manual, y con el
   RGPD delante rechazar tiene que costar lo mismo que aceptar. Ahora los dos
   botones miden y pesan igual: uno en tinta y el otro perfilado, que es la
   pareja primario/secundario del resto del sitio.

   El pequeño: caja con esquinas redondeadas y sombra azulada, y los botones en
   Inter. Aquí no hay sombras ni redondeos, y lo utilitario va en mono. */

.cookie-notification .container {
  gap: var(--amai-space-3);
  padding: var(--amai-space-3);
  border: 1px solid var(--amai-ink);
  border-radius: 0;
  background: var(--amai-bg);
  box-shadow: none;
}

.ct-cookies-content {
  font-family: var(--amai-font-body);
  font-size: 0.8125rem;
  line-height: var(--amai-leading-body);
  color: var(--amai-ink);
}

.cookie-notification .ct-button-group {
  gap: var(--amai-space-1);
}

/* Los dos botones, la misma pieza: cambia el relleno, no el tamaño ni el peso. */
.ct-cookies-accept-button,
.ct-cookies-decline-button {
  min-height: 38px;
  padding: 10px 18px;
  border: 1px solid var(--amai-ink);
  border-radius: 0;
  font-family: var(--amai-font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--amai-transition), color var(--amai-transition);
}

.ct-cookies-accept-button {
  background: var(--amai-ink);
  color: var(--amai-on-ink);
}

.ct-cookies-decline-button {
  background: var(--amai-bg);
  color: var(--amai-ink);
}

.ct-cookies-accept-button:hover,
.ct-cookies-accept-button:focus-visible {
  background: var(--amai-bg);
  color: var(--amai-ink);
}

.ct-cookies-decline-button:hover,
.ct-cookies-decline-button:focus-visible {
  background: var(--amai-ink);
  color: var(--amai-on-ink);
}

.ct-cookies-accept-button:focus-visible,
.ct-cookies-decline-button:focus-visible {
  outline: var(--amai-focus-ring);
  outline-offset: var(--amai-focus-offset);
}

/* ---- style.css ---- */
/**
 * Theme Name: Amai Rodriguez
 * Theme URI: https://amairodriguez.com/
 * Description: Child theme de Blocksy para amairodriguez.com. El sistema de diseño vive en assets/css/ y los bloques del rediseño en el plugin amai-blocks.
 * Author: Carlos Cuadrado
 * Template: blocksy
 * Version: 2.0.0
 * Text Domain: amai
 */

/* El style.css de Blocksy es solo una cabecera de tema: no hay nada que importar.
   El sistema de diseño se carga desde functions.php (fonts.css, tokens.css, base.css). */

/* ===========================================================================
   Ajustes heredados del sitio actual.
   Se conservan tal cual durante la Fase 0 (criterio: el sitio debe verse igual
   que antes del child theme). Cada uno desaparece en cuanto su sección se
   reconstruya: los tres primeros con el nuevo header/footer y la nueva home.
   =========================================================================== */

.single .entry-meta {
  display: none !important;
}

.entry-card {
  border-bottom: none !important;
}

/* Home actual (page-id 46): el hero pega arriba sin respiro del contenedor. */
body.page-id-46 .ct-container-full {
  padding-top: 0 !important;
}

/* Solape de imágenes de la home actual. */
.upper-overlap {
  margin-left: -150px !important;
}

/* Formulario de contacto (WPForms): el textarea a ancho completo en móvil. */
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
  width: 60%;
}

@media (max-width: 768px) {
  .wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    width: 100%;
  }
}