/* =====================================================================
   ArteMure — hoja de estilos principal
   Identidad real: paleta + tipografías Neulis / Poppins / Biro Script.
   Estética collage con recursos propios. Contenido legible, responsive.
   ===================================================================== */

/* ---------- Tipografías propias (auto-alojadas) ---------- */
@font-face {
  font-family: "Neulis";
  src: url("../fonts/Neulis-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neulis";
  src: url("../fonts/Neulis-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeulisAlt";
  src: url("../fonts/NeulisAlt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeulisAlt";
  src: url("../fonts/NeulisAlt-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Biro Script";
  src: url("../fonts/BiroScriptPlus.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --am-naranja: #EF7928;
  --am-naranja-osc: #d9631a;
  /* Terracota: el extremo oscuro de la familia cálida del naranja. Es el
     color del TEXTO de lectura sobre el naranja de marca. Existe porque
     el blanco sobre `--am-naranja` da 2,82:1 y no llega al mínimo AA
     (4,5:1) para texto normal; este da 5,12:1. Se usa para párrafos y
     listas sobre naranja — los títulos grandes siguen en blanco. */
  --am-terracota: #4A1B0C;
  /* Sombra suave para texto BLANCO sobre naranja. El blanco sobre
     `--am-naranja` da 2,82:1 y no llega al 3:1 de texto grande, y el
     tamaño no cambia ese número (el contraste sólo depende de los dos
     colores). Esta sombra no modifica la relación medida —WCAG no cuenta
     las sombras— pero despega el trazo del fondo y mejora la lectura
     real. Tono de la familia cálida, no negro, para no ensuciar. */
  --am-sombra-texto-naranja: 0 1px 3px rgba(58, 21, 9, .5);
  --am-azul: #5568AF;
  --am-azul-osc: #43539a;
  --am-fucsia: #E9538A;
  --am-fucsia-osc: #d33d75;
  --am-verde: #8ABB24;
  --am-verde-agua: #55B78A;
  --am-amarillo: #F5D93A;
  --am-rosa: #F5CADE;
  --am-amarillo-cl: #F2E086;
  --am-lima: #E5E99D;
  --am-verde-agua-cl: #CDE6D9;
  --am-azul-cl: #798EC7;
  --am-papel: #FBF6EC;
  --am-tinta: #26212E;
  --am-blanco: #fff;
  --am-radius: 26px;
  --am-radius-lg: 40px;
  --am-radius-card: 30px;
  --am-shadow: 0 20px 45px -24px rgba(38, 33, 46, .5);
  --am-shadow-sm: 0 10px 24px -16px rgba(38, 33, 46, .45);
  --am-wrap: 1200px;
}

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

body {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--am-tinta);
  background: var(--am-papel);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* El tema padre (Twenty Twenty-Five) aplica un blockGap de 1.2rem entre los
   bloques raíz del sitio (header/contenido/footer vía .wp-site-blocks > *).
   Nuestras secciones ya manejan su propio padding, así que ese margen extra
   solo se ve como una tira suelta del color de fondo (papel) entre la
   última sección y el footer — visible sobre todo cuando esa sección tiene
   color sólido (ej. azul en Talleres, naranja en Murales y Vidrieras). Se
   anula para que header/contenido/footer queden pegados en todas las páginas. */
.wp-site-blocks>* {
  margin-block-start: 0 !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Neulis", "Poppins", sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}

.am-script {
  font-family: "Biro Script", cursive;
  font-weight: 400;
  letter-spacing: .01em;
}

.am-alt {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -.005em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--am-fucsia);
}

/* ---------- Botones píldora ---------- */
.am-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  text-decoration: none;
  padding: .85em 1.5em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: var(--am-shadow-sm);
}

.am-btn:hover {
  transform: translateY(-2px);
}

.am-btn--naranja {
  background: var(--am-naranja);
  color: #fff;
}

.am-btn--naranja:hover {
  background: var(--am-naranja-osc);
  color: #fff;
}

.am-btn--fucsia {
  background: var(--am-fucsia);
  color: #fff;
}

.am-btn--fucsia:hover {
  background: var(--am-fucsia-osc);
  color: #fff;
}

.am-btn--azul {
  background: var(--am-azul);
  color: #fff;
}

.am-btn--azul:hover {
  background: var(--am-azul-osc);
  color: #fff;
}

.am-btn--blanco {
  background: #fff;
  color: var(--am-tinta);
}

.am-btn--blanco:hover {
  background: var(--am-papel);
}

.am-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
  box-shadow: none;
}

.am-btn--ghost:hover {
  background: rgba(255, 255, 255, .14);
}

.am-btn--tinta {
  background: var(--am-tinta);
  color: #fff;
}

.am-btn--tinta:hover {
  background: #000;
}

/* ---------- Secciones ---------- */
.am-section {
  position: relative;
  overflow: hidden;
  padding: clamp(3.4rem, 2rem + 6vw, 6.5rem) 0;
}

.am-wrap {
  width: min(100% - 2.4rem, var(--am-wrap));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* `--am-slide-fade` = color con el que la foto se disuelve en el panel en
   los banners `.am-featured--foto` (ver más abajo). Se define acá, junto
   al color de fondo de cada modificador, para que el color del panel salga
   SIEMPRE de la clase de la sección. Antes venía hardcodeado como hex en
   un `style=""` del patrón: al pasar los banners a contenido editable
   desde wp-admin, eso obligaba a guardar el hex en la base de datos y a
   mantenerlo sincronizado a mano con este archivo. */
.am-section--azul {
  background: var(--am-azul);
  color: #fff;
  --am-slide-fade: var(--am-azul);
}

.am-section--fucsia {
  background: var(--am-fucsia);
  color: #fff;
  --am-slide-fade: var(--am-fucsia);
}

.am-section--naranja {
  background: var(--am-naranja);
  color: #fff;
  --am-slide-fade: var(--am-naranja);
}

.am-section--papel {
  background: var(--am-papel);
}

.am-section--rosa {
  background: var(--am-rosa);
}

.am-section--verde-agua-cl {
  background: var(--am-verde-agua-cl);
}

.am-section[class*="--azul"] :is(h1, h2, h3, h4),
.am-section[class*="--fucsia"] :is(h1, h2, h3, h4),
.am-section[class*="--naranja"] :is(h1, h2, h3, h4) {
  color: #fff;
}

.am-eyebrow {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  opacity: .85;
  margin: 0 0 1rem;
}

.am-patas .am-center {
  margin-bottom: .4rem;
}

.am-lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  max-width: 56ch;
}

.am-center {
  text-align: center;
  margin-inline: auto;
}

.am-h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
}

/* ---------- Manchas orgánicas de fondo ---------- */
.am-blob {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: blur(2px);
  opacity: .9;
}

.am-blob--a {
  border-radius: 47% 53% 63% 37% / 45% 42% 58% 55%;
}

.am-blob--b {
  border-radius: 63% 37% 45% 55% / 55% 48% 52% 45%;
}

.am-blob--c {
  border-radius: 40% 60% 55% 45% / 58% 40% 60% 42%;
}

/* ---------- Recortes decorativos (imágenes propias) ---------- */
.am-cut {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(38, 33, 46, .18));
}

/* Ilustración propia en la esquina inferior izquierda del hero del Inicio.
   Ancho fijo (no % de la altura del hero, que la hacía enorme y dominante):
   es un personaje pequeño más del collage, a la misma escala que la flor y
   la estrella del hero, no un protagonista visual.
   Separada de los bordes con el mismo aire que los otros recortes del hero:
   `bottom:12%` como la estrella (el otro elemento anclado abajo) y un inset
   lateral del 3%, en línea con el 2–3% de la flor y la estrella.
   Es decoración: no recibe clics y se oculta en mobile como el resto. */
.am-hero-sit {
  position: absolute;
  left: 8%;
  bottom: 12%;
  z-index: 1;
  pointer-events: none;
  width: 130px;
  height: auto;
}

/* ---------- Tarjeta blanca ---------- */
.am-card {
  background: #fff;
  color: var(--am-tinta);
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.am-card h3 {
  font-size: 1.5rem;
}

/* =====================================================================
   HERO
   ===================================================================== */
.am-hero {
  background: var(--am-azul);
  color: #fff;
}

.am-hero .am-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  align-items: center;
}

.am-hero__title {
  font-size: clamp(2.7rem, 1.7rem + 4.6vw, 5rem);
  color: #fff;
  max-width: 100%;
  overflow-wrap: break-word;
}

.am-hero__title .am-script {
  color: var(--am-amarillo);
  display: inline-block;
}

.am-hero__lead {
  font-size: clamp(1.08rem, 1rem + .6vw, 1.3rem);
  max-width: 46ch;
  margin: 0 0 1.8rem;
  color: rgba(255, 255, 255, .94);
}

.am-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Fila de datos rápidos arriba del CTA del hero (ej. dirección/horario
   del estudio en Talleres) — reutilizable en cualquier hero de fondo
   sólido (fucsia/azul/naranja). Texto liviano sobre el color (sin
   fondo/píldora): tiene que leerse bien pero quedar claramente menos
   pesado que el botón CTA principal. El dato que es link (la
   dirección) lleva subrayado sutil + hover, para señalar que es
   clickeable sin recurrir a un tratamiento de botón; el dato que es
   sólo informativo (horario) queda igual mimetizado pero SIN esa
   señal, para que se note la diferencia. */
.am-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  margin: 1.8rem 0;
}

.am-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: rgba(255, 255, 255, .94);
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
}

a.am-hero__meta-item {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: .2em;
  transition: color .15s ease, text-decoration-color .15s ease;
}

a.am-hero__meta-item:hover,
a.am-hero__meta-item:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

@media (min-width: 901px) {
  .am-hero__meta-item {
    font-size: 1.55rem; /* 1.05rem + 8px */
  }
}

.am-hero__media {
  position: relative;
}

/* Ancho de línea del título del hero de Murales y Vidrieras: SOLO en desktop
   (en mobile el título debe usar todo el ancho del viewport, sin acortarse,
   para no cortar/recortar palabras largas como "transformaciones"). */
@media (min-width:901px) {
  .am-thero-title--tight {
    max-width: 16ch;
  }
}

/* En pantallas chicas se achica lo justo para que "transformaciones" entre
   entera en una línea (si no, se partiría al medio); `hyphens:auto` queda de
   respaldo para viewports aún más angostos, así corta con guión y no seco. */
@media (max-width:640px) {
  .am-thero-title--tight {
    font-size: clamp(2rem, 1.4rem + 3.4vw, 2.7rem);
    hyphens: auto;
  }
}

.am-photo-frame {
  position: relative;
  background: #fff;
  border-radius: var(--am-radius-card);
  padding: 12px;
  box-shadow: var(--am-shadow);
  rotate: -1.4deg;
}

.am-photo-frame>img {
  border-radius: calc(var(--am-radius-card) - 12px);
  width: 100%;
  aspect-ratio: 3/3.4;
  object-fit: cover;
}

/* --- Hero de la página Talleres: texto + collage de fotos reales de los
   talleres (mismo lenguaje que el hero del Inicio: marcos blancos + cinta). --- */
.am-thero .am-wrap {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: center;
}

/* Los items de grid traen `min-width:auto`: una palabra larga del título
   (ej. "transformaciones") define un min-content MAYOR que el viewport y
   desborda la pantalla en mobile, cortando el texto contra el borde. Con
   `min-width:0` la columna puede achicarse y recién ahí el `overflow-wrap`
   del título hace su trabajo. */
.am-hero .am-wrap>*,
.am-thero .am-wrap>* {
  min-width: 0;
}

/* Collage de 2 fotos parejas (niñxs + adultxs), apiladas en dos líneas pero
   desalineadas (la de arriba a la izquierda, la de abajo a la derecha, vía
   justify-self en cada figure): el contenedor queda más ancho que cada foto
   para dejarles lugar a correrse; sin el tope de la foto misma, ocuparía
   todo el ancho y no habría margen para desplazarlas. */
.am-thero__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  max-width: 460px;
  margin-inline: auto;
}

.am-thero__gallery .am-photo-frame {
  margin: 0;
  padding: 8px;
  width: 78%;
}

/* :not(.am-tape) para NO estirar las cintas washi (son <img> hermanas). */
.am-thero__gallery .am-photo-frame>img:not(.am-tape) {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: calc(var(--am-radius-card) - 8px);
}

/* Etiqueta de papel del hero: parte física del collage (fondo de papel
   rasgado pre-compuesto + cinta washi), texto real encima. Rotación leve.
   Pegada al borde derecho de la foto, centrada verticalmente sobre su
   borde inferior (mitad adentro, mitad afuera) en TODOS los tamaños, no
   solo desktop: `bottom:0` ancla el borde de abajo del tag al borde de
   abajo de la foto, y el `translateY(50%)` lo corre media altura hacia
   abajo para centrarlo justo sobre esa línea. */
.am-hero-tag {
  position: absolute;
  right: 14px;
  bottom: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 98px;
  padding: 0 1.8rem;
  text-decoration: none;
  color: var(--am-tinta);
  rotate: -3deg;
  background: url("../img/etiqueta-papel.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 9px 13px rgba(38, 33, 46, .24));
  transition: transform .15s ease;
  white-space: nowrap;
  transform: translateY(50%);
}

/* La tarjeta entera es el link (ver patterns/home.php). `display:block`
   porque un <a> es inline por defecto y ahí se perdería la caja que usa
   `.am-hero-tag` como referencia (`bottom:0`). El color y el subrayado se
   reponen para que la foto y la etiqueta se vean igual que antes. */
a.am-hero__media {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.am-hero__media:focus-visible {
  outline: 3px solid var(--am-tinta);
  outline-offset: 6px;
  border-radius: 6px;
}

/* El hover del cartelito ahora se dispara desde CUALQUIER punto de la
   tarjeta, no sólo pasando por encima de la etiqueta. */
a.am-hero__media:hover .am-hero-tag {
  transform: translateY(calc(50% - 3px));
}

.am-hero-tag__text {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--am-tinta);
}

.am-hero-tag__text strong {
  color: var(--am-fucsia);
  font-weight: 700;
}

.am-hero-tag__arrow {
  color: var(--am-fucsia);
  font-weight: 700;
  margin-left: .15em;
}

.am-hero-tag__tape {
  position: absolute;
  width: 104px;
  height: auto;
  top: -20px;
  left: 50%;
  margin-left: -58px;
  rotate: 9deg;
  pointer-events: none;
}

@media (min-width:901px) {

  /* La posición ya es la misma en todos los tamaños (ver `.am-hero-tag`
     arriba) — acá solo escala más grande para pantallas grandes. */
  .am-hero-tag {
    height: 118px;
    padding: 0 2.1rem;
  }

  .am-hero-tag__text {
    font-size: 1.62rem;
  }

  .am-hero-tag__tape {
    width: 124px;
    margin-left: -69px;
    top: -24px;
  }
}

/* Variante "Próximamente" del mismo componente (usada en el banner de
   próximo lanzamiento de la Tienda): mismo tamaño que el "Nuevo" del hero
   de Inicio — solo cambia la cinta y el color del texto para diferenciar
   el estado. No es un link (es un estado, no algo para clickear), así que
   sin el lift de :hover. */
.am-hero-tag--proximo {
  cursor: default;
}

.am-hero-tag--proximo .am-hero-tag__text {
  color: var(--am-naranja-osc);
}

/* Tarjeta "Próximamente": en hover se queda quieta en la posición centrada
   de la base, sin el lift extra del resto de las tarjetas. */
a.am-hero__media:hover .am-hero-tag--proximo {
  transform: translateY(50%);
}

/* La cinta washi es un dibujo plano (PNG sin translucidez real): el
   opacity la acerca al material real, dejando ver un poco lo que tapa. */
.am-tape {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: .85;
}

.am-photo-frame .am-tape {
  width: 132px;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
}

/* =====================================================================
   3 PATAS
   ===================================================================== */
.am-patas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, .8rem + 1.6vw, 2rem);
  margin-top: 3.4rem;
}

/* Tarjeta en columna flex para poder empujar el link al fondo (margin-top:auto). */
.am-pata {
  text-align: left;
  position: relative;
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
}

.am-pata:hover {
  transform: translateY(-4px);
}

.am-pata__ico {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: -58px 0 .8rem;
  filter: drop-shadow(0 8px 12px rgba(38, 33, 46, .16));
}

.am-pata h3 {
  font-size: 1.5rem;
  margin-top: 0;
}

.am-pata p {
  margin: 0 0 1rem;
  color: #4a4453;
}

/* margin-top:auto alinea el link SIEMPRE al fondo, sin importar el alto del texto. */
.am-pata__link {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-decoration: none;
  color: var(--am-fucsia);
  margin-top: auto;
  align-self: flex-start;
}

.am-pata__link:hover {
  color: var(--am-naranja);
}

.am-pata__link::after {
  content: " →";
}

/* =====================================================================
   GRILLA DE TARJETAS CON ÍCONO — reutilizable en Talleres/Encargos
   (mismo tratamiento visual que "3 patas": ícono flotando arriba de
   una tarjeta blanca)
   ===================================================================== */
.am-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.2rem, .8rem + 1.6vw, 2rem);
  margin-top: 3.4rem;
}

.am-cards-grid .am-pata {
  height: 100%;
}

/* =====================================================================
   PASOS NUMERADOS — "Cómo funciona" (Encargos)
   ===================================================================== */
.am-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.am-step {
  text-align: left;
}

.am-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--am-naranja);
  color: #fff;
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: .9rem;
}

.am-step h3 {
  font-size: 1.15rem;
  margin-bottom: .3rem;
}

.am-step p {
  margin: 0;
  color: #4a4453;
  font-size: .96rem;
}

/* "Cómo funciona" (pasos) integrado en la sección naranja del presupuesto:
   el círculo del número pasa a azul y el texto a blanco para leerse sobre naranja. */
#presupuesto .am-step__num {
  background: var(--am-azul);
  color: #fff;
}

#presupuesto .am-step h3 {
  color: #fff;
}

#presupuesto .am-step p {
  color: rgba(255, 255, 255, .9);
}

.am-presupuesto-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: stretch;
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}

/* Columna de texto de los formularios de 2 columnas (ver
   `.am-presupuesto-form` en Murales y `.am-reservar-row` en Talleres):
   se estira a la misma altura que el form (columna hermana) y se arma
   como columna flex para poder anclar la ilustración abajo del todo. */
.am-presupuesto-form > div:first-child,
.am-reservar-row > div:first-child {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ilustración dentro de la primera columna de un formulario de 2
   columnas (texto + form de CF7, ver `.am-presupuesto-form` en Murales
   y `.am-reservar-row` en Talleres) — antes flotaba suelta encima de
   la sección; ahora vive adentro de la columna de texto, empujada
   al fondo (alineada con la base del form de al lado). */
.am-form-art {
  display: block;
  width: 100%;
  max-width: 489px;
  margin-inline: auto;
  height: auto;
  margin-top: auto;
  padding-top: clamp(1.6rem, 1rem + 2vw, 2.6rem);
}

/* =====================================================================
   PREGUNTAS FRECUENTES
   ===================================================================== */
.am-faq {
  display: grid;
  gap: 1rem;
  margin-top: 2.4rem;
  max-width: 820px;
}

.am-faq__item {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow-sm);
  padding: 1.4rem 1.7rem;
}

.am-faq__item h3 {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 .4rem;
}

.am-faq__item p {
  margin: 0;
  color: #4a4453;
}

/* =====================================================================
   MAPA ILUSTRADO (placeholder decorativo, sin direcciones reales)
   ===================================================================== */
.am-map {
  position: relative;
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  text-align: center;
  overflow: hidden;
}

.am-map__pin {
  position: absolute;
  width: 46px;
  opacity: .9;
}

.am-map p {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin: 0 auto;
  color: #4a4453;
}

.am-map .am-eyebrow {
  position: relative;
  z-index: 2;
}

/* =====================================================================
   ENCABEZADO COMPACTO DE PÁGINA INTERNA (NO es el hero del Inicio)
   Banda breve, centrada, para que cada página abra distinto al Inicio.
   ===================================================================== */
.am-pagehead {
  padding-block: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}

.am-pagehead .am-wrap {
  max-width: 780px;
  text-align: center;
}

.am-pagehead h1 {
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
}

.am-pagehead__lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: #4a4453;
  margin: 0 auto;
  max-width: 54ch;
}

/* Variante con ilustración: texto + sello, uno junto al otro, los dos
   centrados como conjunto (no decoración de margen: es parte del layout). */
.am-pagehead .am-wrap.am-pagehead__flex {
  max-width: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 1rem + 3vw, 3rem);
}

.am-pagehead__text {
  text-align: center;
}

.am-pagehead__art {
  flex: none;
  width: 335px;
  height: auto;
}

@media (max-width:700px) {
  .am-pagehead .am-wrap.am-pagehead__flex {
    flex-direction: column;
  }
}

.am-pagehead[class*="--azul"] .am-pagehead__lead,
.am-pagehead[class*="--fucsia"] .am-pagehead__lead,
.am-pagehead[class*="--naranja"] .am-pagehead__lead {
  color: rgba(255, 255, 255, .94);
}

/* =====================================================================
   PÁGINAS LEGALES (Términos, Privacidad, Cambios y Devoluciones, Envíos,
   Botón de Arrepentimiento) — plantilla `page-legal.html`, contenido
   nativo del editor de bloques (wp:post-content), SIN collage/decoración:
   prioriza legibilidad simple, columna angosta, tipografía/colores de
   marca aplicados igual que en el resto del sitio.
   ===================================================================== */
.am-legal-head {
  padding-bottom: 1.4rem;
}

.am-legal-head .am-wrap {
  max-width: 760px;
}

.am-legal-head h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin: 0;
}

.am-legal-body {
  padding-top: 0;
}

.am-legal-body .am-wrap {
  max-width: 760px;
}

/* Contenido del post (bloques nativos): tipografía cómoda de leer. */
.am-legal h2 {
  font-family: "Neulis", sans-serif;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 2.2rem 0 .8rem;
  color: var(--am-tinta);
}

.am-legal h2:first-child {
  margin-top: 0;
}

.am-legal h3 {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 1.6rem 0 .5rem;
  color: var(--am-tinta);
}

.am-legal p {
  margin: 0 0 1.1rem;
  color: #3f3a49;
  line-height: 1.75;
  font-size: 1.02rem;
}

.am-legal ul,
.am-legal ol {
  margin: 0 0 1.3rem 1.3rem;
  padding: 0;
  color: #3f3a49;
}

.am-legal li {
  margin-bottom: .55rem;
  line-height: 1.7;
  font-size: 1.02rem;
}

.am-legal a {
  color: var(--am-fucsia);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.am-legal a:hover {
  color: var(--am-naranja);
}

.am-legal strong {
  color: var(--am-tinta);
  font-weight: 600;
}



/* Notas entre corchetes ("[A confirmar con un profesional...]"): quedan
   con el mismo texto exacto del borrador, solo resaltadas para que se
   noten como pendientes antes de publicar — no se ocultan ni se editan. */
.am-legal-todo {
  background: var(--am-amarillo-cl);
  color: var(--am-tinta);
  padding: .05em .3em;
  border-radius: 4px;
}

/* El formulario del Botón de Arrepentimiento reutiliza `.am-contact-card`
   (mismo tratamiento que los demás formularios del sitio) dentro de la
   columna angosta de la página legal. */
.am-legal .am-contact-card {
  margin: 1.6rem 0 2rem;
}

@media (max-width: 700px) {

  .am-legal-head .am-wrap,
  .am-legal-body .am-wrap {
    max-width: none;
  }
}

/* =====================================================================
   ZIGZAG — filas alternadas media + texto (modalidades de Talleres)
   ===================================================================== */
.am-zz {
  display: grid;
  gap: clamp(2.4rem, 1.6rem + 3vw, 4.4rem);
  margin-top: 1rem;
}

.am-zz__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: center;
}

.am-zz__row:nth-child(even) .am-zz__media {
  order: 2;
}

.am-zz__media img {
  width: 100%;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  aspect-ratio: 4/3;
  object-fit: cover;
}

.am-zz__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  aspect-ratio: 4/3;
}

.am-zz__panel img {
  width: 48%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(38, 33, 46, .18));
}

.am-zz__panel--rosa {
  background: var(--am-rosa);
}

.am-zz__panel--verde-agua-cl {
  background: var(--am-verde-agua-cl);
}

.am-zz__panel--amarillo-cl {
  background: var(--am-amarillo-cl);
}

.am-zz__meta {
  display: inline-block;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .82rem;
  background: var(--am-rosa);
  color: var(--am-tinta);
  padding: .35em 1em;
  border-radius: 999px;
  margin-bottom: .9rem;
}

.am-zz__body h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  margin-bottom: .5rem;
}

.am-zz__body p {
  color: #4a4453;
  margin: 0;
}

/* =====================================================================
   PRÓXIMO ENCUENTRO — fecha destacada + lista compacta (Talleres)
   ===================================================================== */
.am-next {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, .8rem + 2vw, 2.6rem);
  background: var(--am-azul);
  color: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem) clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
}

.am-next__date {
  text-align: center;
  line-height: .95;
}

.am-next__date .d {
  display: block;
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
}

.am-next__date .m {
  display: block;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .95rem;
}

.am-next__body h3 {
  color: #fff;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  margin: 0 0 .3rem;
}

.am-next__body p {
  margin: 0;
  color: rgba(255, 255, 255, .92);
}

.am-next__tag {
  display: inline-block;
  background: rgba(255, 255, 255, .2);
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .8rem;
  padding: .3em .9em;
  border-radius: 999px;
  margin-bottom: .6rem;
}

.am-datelist {
  display: grid;
  gap: .6rem;
  margin-top: 1.4rem;
}

.am-datelist__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--am-shadow-sm);
  padding: .9rem 1.3rem;
}

.am-datelist__d {
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  color: var(--am-fucsia);
  font-size: 1.05rem;
  min-width: 6.5ch;
}

.am-datelist__item p {
  margin: 0;
  font-size: .95rem;
  color: #4a4453;
}

.am-datelist__cupo {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: #6a6472;
  white-space: nowrap;
}

/* =====================================================================
   TALLERES — GRUPOS RECURRENTES (por nivel: niños / adultos)
   ===================================================================== */
.am-nivel {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}

.am-nivel__head {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.am-nivel__head h3 {
  font-size: 1.6rem;
  margin: 0;
}

.am-nivel__head span {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  color: #6a6472;
  font-size: .95rem;
}

/* auto-fill (no auto-fit): un grupo único NO se estira a todo el ancho,
   mantiene el ancho de una columna igual que en las filas con varios. */
.am-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
}

.am-group {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow-sm);
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.am-group--full {
  background: #fbf3f6;
}

.am-group__day {
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--am-tinta);
}

.am-group__time {
  color: #4a4453;
  margin: 0;
}

.am-group__estado {
  align-self: flex-start;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: .35em 1em;
  border-radius: 999px;
}

.am-group__estado--open {
  background: var(--am-verde-agua-cl);
  color: #1f5c42;
}

.am-group__estado--full {
  background: var(--am-rosa);
  color: #9b2d55;
}

.am-group .am-btn {
  align-self: flex-start;
  margin-top: .5rem;
}

.am-group__closed {
  align-self: flex-start;
  margin-top: .5rem;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  color: #9b2d55;
  font-size: .95rem;
}

/* =====================================================================
   BANNER DE OBRA A SANGRE — apertura de Encargos (muestra el trabajo)
   ===================================================================== */
.am-banner {
  position: relative;
  min-height: clamp(360px, 44vw, 560px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.am-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 33, 46, .15) 0%, rgba(38, 33, 46, .72) 100%);
  z-index: 1;
}

.am-banner__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.4rem, var(--am-wrap));
  margin-inline: auto;
  padding-block: clamp(2rem, 1.4rem + 3vw, 3.4rem);
}

.am-banner .am-eyebrow {
  color: rgba(255, 255, 255, .9);
}

.am-banner h1 {
  color: #fff;
  font-size: clamp(2.2rem, 1.6rem + 3.4vw, 3.8rem);
  max-width: 16ch;
  margin-bottom: .7rem;
}

.am-banner p {
  max-width: 48ch;
  color: rgba(255, 255, 255, .94);
  margin: 0 0 1.4rem;
  font-size: 1.1rem;
}

/* =====================================================================
   GALERÍA DE TRABAJOS (Encargos) — prueba visual primero
   ===================================================================== */
/* Todas las fotos de vidrieras son verticales: grilla pareja de 4 columnas.
   Con las 7 fotos + la tarjeta de texto cierra en 2 filas justas. */
.am-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, .5rem + 1vw, 1.4rem);
  margin-top: 2.4rem;
}

/* El aspect-ratio fija el alto de cada foto (la img usa height:100% +
   object-fit:cover, así todas quedan parejas sin deformarse). */
.am-gallery figure {
  margin: 0;
  aspect-ratio: 3/4;
  border-radius: var(--am-radius-card);
  overflow: hidden;
  box-shadow: var(--am-shadow-sm);
  background: #fff;
}

.am-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.am-gallery figure:hover img {
  transform: scale(1.04);
}

/* =====================================================================
   TIPOS DE TRABAJO — tira compacta (Encargos), sin tarjetas de ícono
   ===================================================================== */
.am-worktypes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  margin-top: 2.6rem;
}

.am-worktype {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.am-worktype img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(38, 33, 46, .14));
}

.am-worktype h3 {
  font-size: 1.15rem;
  margin: 0 0 .25rem;
}

.am-worktype p {
  margin: 0;
  color: #4a4453;
  font-size: .96rem;
}

/* =====================================================================
   NARRATIVA EDITORIAL (Sobre mí) — texto + fotos intercaladas, sin tarjetas
   ===================================================================== */
.am-lede {
  font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.4;
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 500;
  max-width: 22ch;
}

/* Intro de Sobre mí: retrato + presentación. En mobile se apila (imagen arriba). */
.am-sobre-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.8rem, 1.2rem + 3vw, 4rem);
  align-items: center;
}

/* Sección "Sobre mí" del Home (resumen con foto). En mobile se apila (imagen arriba). */
.am-sobre-home {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.2rem);
  align-items: center;
}

.am-sobre-home__signoff {
  font-size: 3rem;
}

/* En mobile el texto en script "¡Nos vemos en el atelier!" se corta a 2
   líneas con el tamaño de desktop — se achica sólo acá para que entre
   en una sola línea. */
@media (max-width:900px) {
  .am-sobre-home__signoff {
    font-size: 1.9rem;
    white-space: nowrap;
  }
}

/* Filas de 2 columnas (foto + texto) de Talleres: "Experiencias para eventos
   privados" (foto primero) y "Workshops temáticos" (--rev: texto primero,
   foto segunda). En mobile se apilan y la foto siempre queda arriba. */
.am-tw-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: center;
}

.am-tw-row--rev {
  grid-template-columns: 1.1fr .9fr;
}

/* Fila del formulario de reserva: texto + form de CF7. En mobile se apila. */
.am-reservar-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: stretch;
}

.am-story {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.am-story__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  align-items: center;
}

.am-story__row:nth-child(even) .am-story__media {
  order: 2;
}

.am-story__media {
  position: relative;
}

.am-story__media img {
  width: 100%;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
}

/* Dos fotos apiladas en diagonal (misma disposición que el collage del hero
   de Talleres): en dos líneas, la primera a la izquierda y la segunda a la
   derecha, cada una un poco más grande al no compartir el ancho con la otra. */
.am-story__media--duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.am-story__media--duo img {
  width: 82%;
}

.am-story__media--duo img:nth-child(1) {
  justify-self: start;
}

.am-story__media--duo img:nth-child(2) {
  justify-self: end;
}

.am-story h2 {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  margin-bottom: .6rem;
}

.am-story p {
  color: #3f3a49;
  margin: 0 0 1rem;
  font-size: 1.06rem;
}

.am-pull {
  font-family: "Biro Script", cursive;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  color: var(--am-fucsia);
  line-height: 1.2;
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
}

/* Columna izquierda de "Qué es Arte Mure": las 2 fotos anidadas + la cita
   manuscrita debajo (integra la cita en la sección, sin bloque aparte). */
.am-story__aside {
  display: flex;
  flex-direction: column;
}

/* Cita dentro del aside: fucsia (con `.am-story` para ganarle a `.am-story p`
   que la pintaría gris), alineada a la izq y con aire respecto de las fotos. */
.am-story__aside .am-pull {
  text-align: left;
  max-width: none;
  color: var(--am-fucsia);
  margin: clamp(2rem, 1.4rem + 1.6vw, 3rem) 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
}

.am-figstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
}

.am-figstrip img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow-sm);
}

.am-figstrip img:nth-child(2) {
  transform: translateY(1.4rem);
}

/* =====================================================================
   FORMULARIO (placeholder visual, aún sin conectar a Contact Form 7)
   ===================================================================== */
.am-form {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  max-width: 640px;
  margin-top: 2rem;
  /* La tarjeta es blanca pero vive dentro de secciones de color, que ponen
     el texto en blanco. Sin reponer el color acá, todo lo que no traiga el
     suyo propio hereda blanco sobre blanco y queda invisible — que es lo que
     pasaba con el cartel de "mensaje enviado" de Contact Form 7: se veía el
     recuadro de borde verde, vacío. */
  color: var(--am-tinta);
}

.am-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.am-form label {
  display: block;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: #4a4453;
}

/* Genérico (no sólo dentro de `.am-form`): la grilla de 2 columnas también
   se usa dentro de `.am-contact-card` (formulario de Talleres). */
.am-form__grid .full {
  grid-column: 1 / -1;
}

.am-form input:not(.wpcf7-submit),
.am-form select,
.am-form textarea {
  width: 100%;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 14px;
  padding: .7em .9em;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  background: var(--am-papel);
  color: #8a8390;
}

.am-form textarea {
  min-height: 80px;
  resize: vertical;
}

/* =====================================================================
   PÁGINA DE CONTACTO
   ===================================================================== */
.am-contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: start;
  margin-top: 1rem;
}

.am-contact-card {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
}

.am-contact-card>h2 {
  font-size: 1.6rem;
  margin-bottom: .3rem;
}

.am-contact-card>p.am-lead {
  margin-bottom: 1.4rem;
}

/* --- Formulario Contact Form 7 con la estética del sitio --- */
.am-contact-card .wpcf7-form p {
  margin: 0 0 1.1rem;
}

.am-contact-card .am-field label {
  display: block;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .35rem;
  color: #4a4453;
}

.am-contact-card .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 14px;
  padding: .72em .9em;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  background: var(--am-papel);
  color: var(--am-tinta);
  transition: border-color .15s ease;
}

.am-contact-card textarea.wpcf7-form-control {
  min-height: 80px;
  resize: vertical;
}

.am-contact-card .wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: var(--am-fucsia);
  outline: none;
}

.am-contact-card .wpcf7-form-control::placeholder {
  color: #a49eab;
}

.am-contact-card .wpcf7-submit,
.am-form .wpcf7-submit {
  background: var(--am-naranja);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  padding: .85em 1.8em;
  cursor: pointer;
  box-shadow: var(--am-shadow-sm);
  transition: transform .15s ease, background-color .15s ease;
}

.am-contact-card .wpcf7-submit:hover,
.am-form .wpcf7-submit:hover {
  background: var(--am-naranja-osc);
  transform: translateY(-2px);
}

.am-contact-card .wpcf7-spinner,
.am-form .wpcf7-spinner {
  margin: 0 0 0 .6em;
}

/* Mensajes de validación / respuesta de CF7 */
.am-contact-card .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: .82rem;
  margin-top: .3rem;
}

/* Cartel de respuesta de Contact Form 7 ("mensaje enviado", "revisá los
   campos"). Antes sólo se estilaba dentro de `.am-contact-card`, así que en
   los formularios que usan `.am-form` —los tres reales del sitio— quedaba
   sin el color ni el espaciado del tema. El color de texto va explícito por
   el mismo motivo que en `.am-form`: si se hereda, es blanco.
   El color del BORDE no se toca: lo pone Contact Form 7 según el resultado
   (verde si se envió, rojo si falta algo), y es lo que distingue un caso del
   otro de un vistazo. */
.am-contact-card .wpcf7-response-output,
.am-form .wpcf7-response-output {
  border-radius: 14px;
  padding: .8em 1em !important;
  margin: 1.2rem 0 0 !important;
  font-size: .92rem;
  color: var(--am-tinta);
}

/* --- Info de contacto directo (lista, sin tarjetas de ícono repetidas) --- */
.am-contact-info {
  display: grid;
  gap: 1rem;
}


.am-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--am-shadow-sm);
  padding: 1.1rem 1.3rem;
}

.am-contact-item__ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.am-contact-item__ico--verde {
  background: var(--am-verde-agua-cl);
}

.am-contact-item__ico--rosa {
  background: var(--am-rosa);
}

.am-contact-item__ico--amarillo {
  background: var(--am-amarillo-cl);
}

.am-contact-item__ico--azul {
  background: var(--am-azul-cl);
}

.am-contact-item h3 {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 .15rem;
}

.am-contact-item p {
  margin: 0;
  color: #4a4453;
  font-size: .95rem;
}

.am-contact-item a {
  color: var(--am-fucsia);
  text-decoration: none;
}

.am-contact-item a:hover {
  color: var(--am-naranja);
}

.am-contact-item .ph {
  color: #a49eab;
  font-style: italic;
}

/* Valor sin link (ej. horarios) pero con el mismo fucsia que los links, para
   que se lea como un dato destacado aunque no sea clickeable. */
.am-contact-item .am-fucsia {
  color: var(--am-fucsia);
}

/* =====================================================================
   TIENDA
   ===================================================================== */
.am-tienda .am-wrap {
  text-align: center;
}

.am-tienda__intro {
  max-width: 60ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, .94);
}

.am-tienda__prod {
  margin: 2.4rem 0 1.6rem;
}

/* Grilla de productos WooCommerce dentro de tarjetas claras */
.am-tienda .woocommerce {
  color: var(--am-tinta);
}

.am-tienda ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 960px;
  margin-inline: auto;
}

.am-tienda ul.products li.product {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: 1rem 1rem 1.4rem;
  text-align: center;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

.am-tienda ul.products li.product img {
  border-radius: 18px;
  margin-bottom: .8rem;
}

.am-tienda ul.products li.product .woocommerce-loop-product__title {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--am-tinta);
  padding: .2rem 0;
}

.am-tienda ul.products li.product .price {
  color: var(--am-fucsia);
  font-weight: 600;
}

.am-tienda ul.products li.product a.button {
  display: inline-block;
  margin-top: .6rem;
  background: var(--am-naranja);
  color: #fff;
  border-radius: 999px;
  padding: .6em 1.2em;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.am-tienda ul.products li.product a.button:hover {
  background: var(--am-naranja-osc);
}

/* =====================================================================
   AGENDA — variación en bandas de color (Opción 1)
   ===================================================================== */
.am-agenda__head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.am-agenda__sticker {
  width: min(300px, 64vw);
  height: auto;
}

.am-bands {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.am-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  border-radius: 22px;
  padding: 1.1rem 1.6rem;
  color: #fff;
  box-shadow: var(--am-shadow-sm);
}

.am-band--naranja {
  background: var(--am-naranja);
}

.am-band--azul {
  background: var(--am-azul);
}

.am-band--fucsia {
  background: var(--am-fucsia);
}

.am-band__day {
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  min-width: 5.5ch;
}

.am-band__body h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0 0 .15rem;
}

.am-band__body p {
  margin: 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .92);
}

.am-band__cta {
  white-space: nowrap;
}

.am-agenda__note {
  margin-top: 1.4rem;
  font-size: .95rem;
  color: #6a6472;
}

/* =====================================================================
   PRUEBA SOCIAL / INSTAGRAM
   ===================================================================== */
.am-social .am-wrap {
  text-align: center;
}

/* El feed en sí (grilla, radios, hover) lo dibuja el plugin Spotlight
   con su propia config (ver feed "lanzamiento de la web" en
   wp-admin → Spotlight) — acá sólo se le da el mismo margen vertical
   que tenía la grilla hardcodeada que reemplaza. */
.am-ig__feed {
  margin: 2.2rem 0;
  text-align: left;
}

/* =====================================================================
   HEADER
   ===================================================================== */
.am-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 246, 236, .92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 2px solid rgba(38, 33, 46, .06);
}

.am-header__wrap {
  width: min(100% - 2rem, var(--am-wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
}

.am-header__logo img {
  height: 46px;
  width: auto;
}

.am-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.am-nav a {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-decoration: none;
  color: var(--am-tinta);
  font-size: 1rem;
}

.am-nav a:hover {
  color: var(--am-fucsia);
}

.am-nav a.is-active {
  color: var(--am-fucsia);
}

/* CTA "Tienda": es una PÍLDORA contenedora (span) con DOS links independientes
   —el texto va a la tienda y el carrito (ícono + contador) va a ver el carrito—
   porque no se puede anidar <a> dentro de <a>. */
.am-nav__cta {
  margin-left: .4rem;
  gap: .55em;
}

.am-nav .am-nav__cta a {
  color: #fff;
  text-decoration: none;
}

/* le gana a `.am-nav a` (tinta) */
.am-nav__cta-txt {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
}

.am-nav__cta-cart {
  display: inline-flex;
  align-items: center;
  padding-left: .55em;
  border-left: 1.5px solid rgba(255, 255, 255, .45);
}

/* divisor sutil: son 2 destinos */
/* Hover del pill: invierte a blanco con texto e íconos en naranja. */
.am-nav__cta:hover {
  background: #fff;
  border-color: var(--am-naranja);
}

.am-nav .am-nav__cta:hover a {
  color: var(--am-naranja);
}

.am-nav__cta:hover .am-nav__cta-cart {
  border-left-color: rgba(239, 121, 40, .4);
}

/* Carrito + contador de ítems */
.am-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.am-cart__icon {
  width: 1.25em;
  height: 1.25em;
  display: block;
}

.am-cart__count {
  position: absolute;
  top: -.62em;
  right: -.66em;
  box-sizing: border-box;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 .32em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--am-fucsia);
  color: #fff;
  border-radius: 999px;
  border: 2px solid var(--am-naranja);
  font-family: "NeulisAlt", sans-serif;
  font-weight: 700;
  font-size: .6em;
  line-height: 1;
}

.am-nav__cta:hover .am-cart__count {
  border-color: #fff;
}

.am-cart__count--zero {
  display: none;
}

.am-burger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* Ícono del burger (pinceladas ArteMure) — mismo <svg> y misma
   estructura de <g> anidados que el original en
   ~/Documents/ArteMure-recursos/ICONOS/burger-menu-artemure.html. Cada
   franja de color es su propio <g class="paint-layer"> dentro de un
   <g clip-path="url(#clip-stroke-N)"> que recorta el pincel completo a
   la franja horizontal que le toca a cada una — sin ese doble nivel, la
   franja pierde su color. No simplificar esta estructura, aunque ya no
   anima (fijo, sin el barrido de clip-path que traía el original).
   48x48 (56 - 15%). */
.am-burger-icon {
  width: 48px;
  height: 48px;
}

/* =====================================================================
   BOTÓN FLOTANTE DE WHATSAPP → MENÚ DE BURBUJAS (mismo número que
   Contacto). El botón principal es igual al de siempre (ícono, tamaño,
   esquina, verde agua de la paleta) pero ahora es un <button> que abre
   un arco de 3 accesos directos con un click — nunca en hover, nunca
   solo. Segundo click sobre el botón, click afuera o Escape lo cierran
   — ver assets/js/wa-menu.js. La transición de apertura es una
   microinteracción de respuesta directa a ese click (permitida por
   CLAUDE.md), no un movimiento espontáneo.
   ===================================================================== */
.am-wa-menu {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: 70px;
  height: 70px;
}

.am-wa-float {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--am-verde-agua);
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--am-shadow);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.am-wa-float:hover,
.am-wa-float:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -18px rgba(38, 33, 46, .55);
}

.am-wa-float svg {
  width: 35px;
  height: 35px;
}

/* Burbujas: cerradas, encogidas y centradas en el botón (como si
   "salieran" de él). Abiertas (`.is-open`), ancladas por su BORDE
   DERECHO al centro del botón menos un offset — nunca por el centro:
   el botón vive pegado al borde derecho de la pantalla, así que una
   burbuja centrada crece la mitad de su ancho hacia la derecha y esa
   mitad se sale del viewport en cuanto el texto es un poco largo
   ("Consultas generales"). Ancladas por el borde derecho, en cambio,
   solo crecen hacia la izquierda (donde siempre hay lugar) sea cual
   sea el largo del texto — se acomodan solas al ancho disponible.
   Arco de un cuarto de círculo, de "a la izquierda" a "arriba" del
   botón — nunca hacia la derecha/abajo. */
.am-wa-bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.am-wa-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  padding: .6em 1.15em;
  border-radius: 999px;
  border: 2px solid var(--am-verde-agua);
  background: #fff;
  color: var(--am-verde-agua);
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.38rem;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--am-shadow-sm);
  transition: transform .375s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, background .225s ease, color .225s ease, border-color .225s ease;
}

/* Hover: se llena del verde agua sólido (como el botón principal) en
   vez del blanco de reposo — mismo contraste, invertido. El borde pasa
   a blanco (si se quedara verde, desaparecería contra el fondo verde). */
.am-wa-bubble:hover,
.am-wa-bubble:focus-visible {
  background: var(--am-verde-agua);
  color: #fff;
  border-color: #fff;
}

.am-wa-bubble--1 {
  transition-delay: 0s;
}

.am-wa-bubble--2 {
  transition-delay: .06s;
}

.am-wa-bubble--3 {
  transition-delay: .12s;
}

.am-wa-menu.is-open .am-wa-bubbles {
  pointer-events: auto;
}

.am-wa-menu.is-open .am-wa-bubble {
  opacity: 1;
}

/* translate(-100% + Xpx): -100% pasa el ancla del centro de la burbuja
   a su borde derecho; el Xpx/Ypx que siguen son la distancia de ESE
   borde al centro del botón. El radio NO es el mismo para las 3: cada
   una mide distinto ("Consultas generales" es bastante más larga que
   "Encuentros"), así que a radio igual y ángulos parejos terminaban
   invadiéndose entre sí. Cuanto más largo el texto, más lejos su radio
   y más cerca de "derecho hacia arriba" su ángulo — así queda un
   espacio real entre las tres, no solo entre cada una y el botón.
   Radios reescalados junto con el font-size más grande, misma
   proporción, para conservar ese espacio con el texto más grande. */
.am-wa-menu.is-open .am-wa-bubble--1 {
  transform: translate(calc(-100% - 140px), -50%) scale(1);
}

.am-wa-menu.is-open .am-wa-bubble--2 {
  transform: translate(calc(-100% - 132px), calc(-50% - 111px)) scale(1);
}

.am-wa-menu.is-open .am-wa-bubble--3 {
  transform: translate(calc(-100% - 20px), calc(-50% - 226px)) scale(1);
}

@media (max-width:640px) {
  .am-wa-menu {
    right: 1rem;
    bottom: 1rem;
    width: 65px;
    height: 65px;
  }

  .am-wa-float svg {
    width: 32px;
    height: 32px;
  }

  /* Achicado de 1.3rem: a ese cuerpo la burbuja más larga ("Consultas
     generales") medía 250px y, sumada a su distancia al botón, se salía
     59px por el borde izquierdo de la pantalla. */
  .am-wa-bubble {
    font-size: 1rem;
    padding: .5em .95em;
  }

  /* Radios bastante más cortos que en desktop (antes 124/116/17 px): las
     burbujas se acercan al botón para dejar más lugar del lado izquierdo,
     que es hacia donde crecen. Los valores están calculados para que la
     más larga entre completa incluso en un teléfono de 320px, el más
     angosto que se usa hoy.
     Si alguna vez se agrega una opción con texto más largo que "Consultas
     generales", hay que volver a revisar esto: la burbuja crece hacia la
     izquierda y el margen disponible es el que hay. */
  .am-wa-menu.is-open .am-wa-bubble--1 {
    transform: translate(calc(-100% - 70px), -50%) scale(1);
  }

  .am-wa-menu.is-open .am-wa-bubble--2 {
    transform: translate(calc(-100% - 64px), calc(-50% - 62px)) scale(1);
  }

  .am-wa-menu.is-open .am-wa-bubble--3 {
    transform: translate(calc(-100% - 10px), calc(-50% - 126px)) scale(1);
  }
}

/* =====================================================================
   BADGE DE reCAPTCHA v3 — oculto (aviso legal agregado a mano)
   ===================================================================== */
/* Antes se reposicionaba el badge para que no tapara al botón de
   WhatsApp (ver historial). Ahora se oculta directamente: Google permite
   ocultar el badge siempre que se muestre, en su lugar, el texto de
   aviso oficial en las páginas con formulario — eso es
   `.am-recaptcha-aviso`, agregado dentro de cada uno de los 3
   formularios reales (Talleres, Presupuesto de Murales y Vidrieras,
   Botón de Arrepentimiento). Si alguna vez se saca ese texto de algún
   formulario, HAY QUE devolver el badge (sacar esta regla) para seguir
   cumpliendo los términos de Google. */
.grecaptcha-badge {
  visibility: hidden;
}

/* Aviso legal de reCAPTCHA — texto chico y discreto para no competir con
   el formulario. Vive DENTRO de la tarjeta blanca de cada formulario
   (`.am-form` / `.am-contact-card`, ambas con fondo blanco), por eso el
   gris se apoya sobre blanco y no sobre el color de la sección: puesto
   directo sobre el naranja de marca, este mismo gris da 1,8:1 de
   contraste, muy por debajo del mínimo AA (4,5:1). `#6a6472` es el
   mismo gris que ya se usa en el sitio para texto secundario (horarios,
   metadatos de tarjetas), no un color nuevo. */
.am-recaptcha-aviso {
  margin: 1rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: #6a6472;
}

.am-recaptcha-aviso a {
  color: inherit;
  text-decoration: underline;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.am-footer {
  background: var(--am-tinta);
  color: #fff;
  padding: 3.4rem 0 2rem;
}

.am-footer__wrap {
  width: min(100% - 2rem, var(--am-wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
}

/* Botón de Arrepentimiento: link de texto simple en la barra inferior del
   footer (junto al copyright) — mismo tamaño/estilo que los demás links
   del footer, sin botón ni ícono; sólo en su propia línea, separado de la
   lista "Legales" (criterio habitual en otras tiendas con esta misma
   obligación legal, ej. Tiendanube). font-size explícito porque hereda
   el .85rem de `.am-footer__bottom`, más chico que el resto de los links. */
.am-footer .am-footer__arrep {
  display: inline;
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
}

.am-footer .am-footer__arrep:hover {
  color: var(--am-amarillo);
}

/* Crédito de autoría de la desarrolladora: mismo tamaño que el resto de
   `.am-footer__bottom` (no el 1rem del Arrepentimiento, que necesita más
   peso por ser un link legal) — a propósito el más discreto de la barra,
   para no competir con la marca ArteMure. `font-size: inherit` es
   necesario porque si no, `.am-footer a` (más abajo, y de nuevo a
   1.4rem dentro de la media query de escritorio ≥901px) lo agranda por
   ser un link — el copyright de al lado es un `<span>`, así que esa
   regla nunca lo toca a él. */
.am-footer .am-footer__credito {
  display: inline;
  font-size: inherit;
  color: rgba(255, 255, 255, .6);
}

.am-footer .am-footer__credito:hover {
  color: var(--am-amarillo);
}

.am-footer__logo img {
  height: 64px;
  width: auto;
  margin-bottom: 1rem;
}

.am-footer p {
  color: rgba(255, 255, 255, .8);
  font-size: .95rem;
}

.am-footer h4 {
  color: #fff;
  font-size: 1.05rem;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .8rem;
}

.am-footer a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  display: block;
  padding: .2rem 0;
}

.am-footer a:hover {
  color: var(--am-amarillo);
}

/* Placa del QR de Data Fiscal: fondo blanco propio (el footer es
   oscuro) en una tarjetita redondeada, igual que cualquier sello/
   certificado impreso — así el QR queda legible y con buen contraste
   para que un celular lo pueda escanear sin problema. */
.am-footer__fiscal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
}

.am-footer__fiscal img {
  display: block;
  width: 84px;
  height: 84px;
  padding: .5rem;
  background: #fff;
  border-radius: 8px;
}

.am-footer__fiscal-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
}

.am-footer__bottom {
  width: min(100% - 2rem, var(--am-wrap));
  margin: 2.4rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .85rem;
  color: rgba(255, 255, 255, .6);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =====================================================================
   WOOCOMMERCE — Tienda, producto, carrito y checkout
   Estas páginas usan los bloques modernos de WooCommerce (Product
   Collection, Cart, Checkout), no las plantillas clásicas — por eso
   se apunta a sus clases `.wc-block-*` / `.wp-block-woocommerce-*`.
   ===================================================================== */

/* ---------- Fondo y ritmo vertical general ---------- */
body.woocommerce-page,
body.single-product {
  background: var(--am-papel);
}

.woocommerce-page main.wp-block-group,
body.single-product main.wp-block-group {
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.6rem) clamp(3rem, 2rem + 3vw, 5.5rem);
}

/* ---------- Migas de pan ---------- */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-size: .9rem;
  color: #6a6472;
  margin-bottom: 1.4rem !important;
}

.wc-block-breadcrumbs a,
.woocommerce-breadcrumb a {
  color: #6a6472;
  text-decoration: underline;
}

.wc-block-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--am-fucsia);
}

/* Primer eslabón: la flecha para volver a la Tienda.
   El enlace dice "Volver a la Tienda" en el HTML (ver el filtro
   `woocommerce_breadcrumb_defaults` en functions.php); acá se le anula el
   tamaño de letra para que ese texto no se vea, y la flecha se dibuja con
   `::before`, que lleva su propio tamaño. Se hace así, y no escribiendo un
   "←" pelado en el HTML, para que quien use lector de pantalla escuche
   "Volver a la Tienda" y no "flecha izquierda".
   `:first-of-type` y no `:first-child` porque en la ficha de producto el
   bloque de WooCommerce mete las migas dentro de un <nav> propio. */
.woocommerce-breadcrumb a:first-of-type,
.wc-block-breadcrumbs a:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* En `rem` y NO en `em`: el `em` se mide contra el tamaño de letra del
     propio elemento, que acá es 0, y el enlace quedaba de 0×0 píxeles —
     la flecha se veía pero no había casi nada que clickear. */
  width: 2.2rem;
  height: 2.2rem;
  /* Sin margen a la derecha: el separador de WooCommerce ya viene con un
     espacio duro a cada lado y, sumado, la barra quedaba flotando lejos. */
  margin-right: 0;
  font-size: 0;
  text-decoration: none;
  border-radius: 999px;
  vertical-align: middle;
  transition: background-color .15s ease, color .15s ease;
}

.woocommerce-breadcrumb a:first-of-type::before,
.wc-block-breadcrumbs a:first-of-type::before {
  content: "←";
  font-size: 1.25rem;
  line-height: 1;
}

.woocommerce-breadcrumb a:first-of-type:hover,
.wc-block-breadcrumbs a:first-of-type:hover {
  background: rgba(38, 33, 46, .08);
  color: var(--am-fucsia);
}

.woocommerce-breadcrumb a:first-of-type:focus-visible,
.wc-block-breadcrumbs a:first-of-type:focus-visible {
  outline: 2px solid var(--am-tinta);
  outline-offset: 2px;
}

/* ---------- Título de archivo/página (Shop, Cart…) ---------- */
.woocommerce-page h1.wp-block-post-title,
h1.wp-block-query-title {
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  margin-bottom: 1.6rem;
}

/* ---------- Botón genérico de los bloques de WooCommerce ----------
   Se reutiliza en "Agregar al carrito" de la grilla, "Ir a pagar",
   "Confirmar pedido", etc. Lo convertimos en nuestro botón píldora. */
.wc-block-components-button.wp-element-button,
.wp-block-woocommerce-product-button .add_to_cart_button,
a.single_add_to_cart_button.button,
button.single_add_to_cart_button {
  font-family: "NeulisAlt", "Poppins", sans-serif !important;
  font-weight: 600 !important;
  background: var(--am-naranja) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: .85em 1.7em !important;
  line-height: 1 !important;
  box-shadow: var(--am-shadow-sm);
  transition: transform .15s ease, background-color .15s ease;
}

.wc-block-components-button.wp-element-button:hover,
.wp-block-woocommerce-product-button .add_to_cart_button:hover,
a.single_add_to_cart_button.button:hover,
button.single_add_to_cart_button:hover {
  background: var(--am-naranja-osc) !important;
  transform: translateY(-2px);
}

.wc-block-components-button.wp-element-button:disabled {
  opacity: .6;
  transform: none;
}

/* ---------- Grilla de la tienda (Product Collection block) ---------- */
.wc-block-catalog-sorting,
.wc-block-product-results-count {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-size: .92rem;
}

.wc-block-catalog-sorting select.orderby {
  border-radius: 14px !important;
  border: 2px solid rgba(38, 33, 46, .14) !important;
  font-family: "Poppins", sans-serif !important;
  padding: .5em 2em .5em .9em !important;
  background-color: #fff !important;
}

/* Selects con etiqueta flotante (país/provincia en checkout): mantener el
   padding-top que WooCommerce reserva para que la etiqueta no tape el valor. */
.wc-blocks-components-select__select {
  border-radius: 14px !important;
  border: 2px solid rgba(38, 33, 46, .14) !important;
  font-family: "Poppins", sans-serif !important;
  background-color: #fff !important;
  padding: 1.4em .9em 0 !important;
  height: 50px !important;
}

/* El <select> vive DENTRO de un contenedor propio de WooCommerce
   (`.wc-blocks-components-select__container`) que también trae su
   propio fondo blanco — pero con el radio nativo de 4px, más chico
   que el 14px de acá arriba. El fondo del contenedor asomaba en las
   esquinas, por fuera del borde redondeado del select. Mismo radio en
   los dos para que coincidan. */
.wc-blocks-components-select__container {
  border-radius: 14px !important;
}

.wc-blocks-components-select__label {
  font-family: "Poppins", sans-serif !important;
  color: #8a8390 !important;
}

.wc-block-product-template {
  margin-top: 1.6rem !important;
}

.wc-block-product {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow-sm);
  padding: 1.1rem 1.1rem 1.4rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.wc-block-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--am-shadow);
}

.wc-block-product .wc-block-components-product-image {
  border-radius: 18px;
  overflow: hidden;
  background: var(--am-verde-agua-cl);
  margin-bottom: .9rem;
}

.wc-block-product .wc-block-components-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-block-product h2.wp-block-post-title {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  margin-bottom: .3rem;
}

.wc-block-product h2.wp-block-post-title a {
  color: var(--am-tinta);
  text-decoration: none;
}

.wc-block-product h2.wp-block-post-title a:hover {
  color: var(--am-fucsia);
}

.wc-block-product .wc-block-components-product-price {
  font-family: "Poppins", sans-serif;
  color: var(--am-fucsia);
  font-weight: 600;
  margin-bottom: .8rem;
}

.wc-block-product .wp-block-woocommerce-product-button {
  margin-top: auto;
}

.wc-block-product .wc-block-components-product-button__button {
  width: 100%;
  justify-content: center;
}

/* ---------- Producto individual ---------- */
.wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery) {
  gap: clamp(2rem, 1rem + 4vw, 4rem) !important;
}

.woocommerce-product-gallery {
  background: #fff;
  border-radius: var(--am-radius-card);
  padding: 14px;
  box-shadow: var(--am-shadow);
}

.woocommerce-product-gallery img {
  border-radius: calc(var(--am-radius-card) - 14px);
}

/* Fila de miniaturas de la galería. FlexSlider la arma con `display:block`
   y los ítems flotados, sin ninguna separación: las fotos quedaban pegadas
   una contra otra, como una tira continua. Se pasa a flex con `gap`, que es
   lo que crea el aire entre ellas sin tener que compensar con márgenes
   negativos en los extremos (un `padding` en cada miniatura habría dejado
   también aire de más contra los bordes del marco blanco). */
/* El aire de arriba (separación con la foto principal) es mayor que el
   `gap` entre miniaturas a propósito: así la fila se lee como un grupo
   aparte de la foto grande, y no como una quinta imagen pegada abajo. Usa
   el mismo valor que el padding del marco blanco, para que todo el bloque
   respire con el mismo ritmo. */
/* Con más de 4 fotos las miniaturas bajaban de línea y el marco blanco
   crecía hacia abajo, empujando el precio y el botón de compra. Ahora la
   fila NO se parte: se desplaza en horizontal, con flechas para moverla
   (ver assets/js/galeria-thumbs.js). */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Se oculta la barra de scroll: el desplazamiento se hace con las
     flechas, arrastrando en pantallas táctiles, o con el teclado (la tira
     recibe foco). Dejarla visible metía una barra gris dentro del marco
     blanco de la foto. */
  scrollbar-width: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

/* La base de `calc` es un cuarto del ancho visible: con 4 fotos o menos la
   fila entra entera y las miniaturas se estiran para ocuparla (`flex-grow`
   en 1, igual que antes); con 5 o más no se achican (`flex-shrink` en 0),
   se ven exactamente 4 y el resto queda para desplazar. El `min-width`
   evita que en pantallas muy angostas queden ilegibles. */
.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 1 0 calc((100% - 30px) / 4);
  min-width: 64px;
  margin: 0;
  width: auto;
  float: none;
  scroll-snap-align: start;
}

/* Contenedor que agrega el JS alrededor de la tira, sólo para poder apoyar
   las flechas encima. Sin JS, la tira sigue funcionando: se desplaza
   arrastrando, nada más que sin flechas. */
.am-thumbs {
  position: relative;
}

.am-thumbs__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--am-tinta);
  box-shadow: 0 2px 10px rgba(38, 33, 46, .28);
  cursor: pointer;
  transition: background-color .15s ease;
}

.am-thumbs__nav:hover {
  background: #fff;
}

.am-thumbs__nav svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Cada flecha se esconde cuando no tiene nada que mostrar de ese lado (y
   las dos, si las fotos entran sin desplazar). Se esconde en vez de sólo
   apagarse: así no tapa la primera ni la última miniatura, que si no
   quedaban a medias sin poder clickearse. */
.am-thumbs__nav[hidden] {
  display: none;
}

.am-thumbs__nav--prev {
  left: 2px;
}

.am-thumbs__nav--next {
  right: 2px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
}

/* Separación entre la foto principal y la fila de miniaturas.
   Va en una regla aparte y con este selector tan largo porque WooCommerce
   resetea el margen con `.woocommerce div.product div.images
   .flex-control-thumbs { margin:0; padding:0 }`, que tiene más
   especificidad que el selector corto de arriba: por eso el `margin` que
   estaba puesto ahí se ignoraba y las miniaturas quedaban pegadas al borde
   inferior de la foto. Se le agrega `.woocommerce-product-gallery` al mismo
   elemento que WooCommerce llama `div.images` (son el mismo div) para
   ganarle por una clase, sin recurrir a `!important`. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
  margin-top: 14px;
}

/* Desplegables de variantes de la ficha de producto (Color, Tipo de hoja,
   Tamaño…). Salían con el estilo nativo del navegador, con esquinas rectas
   y sin relación con el resto del sitio. Se les aplica el mismo criterio
   que a los demás selects del tema (ver `.am-form select` y el select de
   orden del catálogo): radio 14px, borde de 2px y fondo blanco.

   Dos cuidados:
   · El selector es largo porque tiene que ganarle a
     `.woocommerce div.product form.cart .variations select`, que define el
     `background` del desplegable. Se le suma `table` al `.variations` para
     superarlo por especificidad, sin `!important`.
   · Se usa `background-color` y NO el atajo `background`: WooCommerce mete
     ahí la flecha del desplegable como imagen (un SVG en base64) y el
     atajo la borraría, dejando el select sin flecha. */
.woocommerce div.product form.cart table.variations select {
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 14px;
  /* El espacio de la derecha lo necesita la flecha de WooCommerce. */
  padding: .6em 3em .6em .9em;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  background-color: #fff;
  color: var(--am-tinta);
  transition: border-color .15s ease;
}

.woocommerce div.product form.cart table.variations select:focus {
  outline: none;
  border-color: var(--am-fucsia);
}

/* ---------- Variantes como botones (ver assets/js/variantes.js) ----------
   El desplegable de arriba sigue existiendo y sigue siendo el que manda,
   pero se esconde: en el celular abría el menú nativo del sistema, que
   aparece suelto en la pantalla y no se puede acomodar por CSS. En su
   lugar se muestran todos los valores como botones.

   La clase la agrega el JS, no el HTML: si el script no llegara a cargar,
   el desplegable de siempre queda visible y el producto se puede comprar
   igual. */
.woocommerce div.product form.cart table.variations select.am-variantes__nativo {
  display: none;
}

/* Esconde un `<select>` que fue reemplazado por botones, dejándolo en el
   formulario (es el que se envía). La clase la agregan los scripts, nunca el
   HTML: sin JS el desplegable queda visible y todo sigue funcionando.
   `display:none` NO saca el campo del envío del formulario — eso sólo lo
   hace `disabled`. */
.am-select-oculto {
  display: none;
}

/* Selector de opciones en botones. Se usa en dos lugares con el mismo
   criterio: las variantes de producto (assets/js/variantes.js) y los
   desplegables de los formularios (assets/js/select-pildoras.js). */
.am-variantes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* El radio de verdad queda invisible pero NO con `display:none`: así sigue
   recibiendo el foco del teclado y el lector de pantalla lo anuncia. Lo
   que se ve y se toca es su `<label>`. */
.am-variantes__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El selector lleva el contenedor adelante a propósito, para ganarle a
   `.am-form label` (que vale más que una clase sola). Esa regla está pensada
   para los títulos de campo del formulario y le imponía a la píldora
   `display:block`, letra más chica, otro color y un margen inferior. Lo peor
   era el `block`: al no ser flex, el texto se apoyaba arriba y todo el
   sobrante de los 44px de alto mínimo quedaba abajo — se veía descentrado. */
.am-variantes .am-variantes__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px de alto mínimo: la medida de toque cómoda en un celular. */
  min-height: 44px;
  margin: 0;
  padding: .55em 1.2em;
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--am-tinta);
  background: #fff;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.am-variantes__pill:hover {
  border-color: var(--am-azul);
}

/* Azul y no fucsia: el fucsia de marca sobre texto blanco da 3,46:1, por
   debajo del mínimo de AA para texto normal (4,5:1). El azul llega a
   5,27:1 y es el mismo que ya usan el buscador de la tienda y la solapa
   activa de "Mi cuenta". */
.am-variantes__radio:checked + .am-variantes__pill {
  background: var(--am-azul);
  border-color: var(--am-azul);
  color: #fff;
}

/* El foco del teclado tiene que verse: como el radio real es invisible,
   el anillo se dibuja sobre el botón. */
.am-variantes__radio:focus-visible + .am-variantes__pill {
  outline: 2px solid var(--am-tinta);
  outline-offset: 2px;
}

/* Combinación no disponible (sólo pasa en productos con más de un
   atributo): se muestra igual, apagada, para que se entienda que existe
   pero no se puede elegir con lo ya seleccionado. */
.am-variantes__radio:disabled + .am-variantes__pill {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.am-variantes__radio:disabled + .am-variantes__pill:hover {
  border-color: rgba(38, 33, 46, .14);
}

/* Lista de sugerencias de un campo de texto (ver assets/js/campo-sugerencias.js)
   — reemplaza al datalist nativo del navegador, que en iPhone se dibuja en
   la barra de QuickType arriba del teclado y no entra completo. Usado hoy
   por el campo "Grupo, workshop o evento" de Talleres. */
.am-sugerencias-campo {
  /* Ancla la lista (position:absolute) justo debajo del campo. */
  position: relative;
}

.am-sugerencias {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: .3rem 0 0;
  padding: .4rem;
  list-style: none;
  background: #fff;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 14px;
  box-shadow: var(--am-shadow-sm);
  max-height: 220px;
  overflow-y: auto;
}

.am-sugerencias__item {
  padding: .55em .7em;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: .95rem;
  color: var(--am-tinta);
  cursor: pointer;
}

.am-sugerencias__item:hover,
.am-sugerencias__item.is-activa {
  background: var(--am-verde-agua-cl);
}

/* En el celular, la tabla de variantes de WooCommerce deja el rótulo
   ("Tamaño") en una columna a la izquierda y se come casi un tercio del
   ancho: los botones caían de a uno por fila. Se apila el rótulo arriba
   para que los botones tengan la pantalla entera. */
@media (max-width:640px) {

  .woocommerce div.product form.cart table.variations,
  .woocommerce div.product form.cart table.variations tbody,
  .woocommerce div.product form.cart table.variations tr,
  .woocommerce div.product form.cart table.variations td,
  .woocommerce div.product form.cart table.variations th {
    display: block;
    width: auto;
  }

  .woocommerce div.product form.cart table.variations td.label,
  .woocommerce div.product form.cart table.variations th.label {
    padding: 0 0 .5rem;
    text-align: left;
  }
}

/* "Limpiar" (aparece al elegir una variante): es una acción secundaria. */
.woocommerce div.product form.cart .reset_variations {
  font-size: .88rem;
  color: var(--am-fucsia);
}

/* Aviso "¿necesitás otra medida?" debajo del selector de tamaño de los
   cuadros (ver inc/consulta-medidas.php). Es una nota de apoyo, no un CTA:
   por eso va en cuerpo chico y en gris, con el link en el fucsia que el
   sitio usa para todo lo clicable. */
.am-otras-medidas {
  margin: .2rem 0 1rem;
  font-size: .92rem;
  color: #6a6472;
}

.am-otras-medidas a {
  color: var(--am-fucsia);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-product h1.wp-block-post-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  margin-bottom: .5rem;
}

.wp-block-woocommerce-product-price .wc-block-components-product-price {
  color: var(--am-fucsia);
  font-weight: 700;
  font-size: 1.4rem;
  font-family: "NeulisAlt", sans-serif;
}

.wp-block-post-excerpt__excerpt {
  color: #4a4453;
  max-width: 52ch;
}

p.stock {
  display: inline-block;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .85rem;
  background: var(--am-verde-agua-cl);
  color: #1f5c42;
  padding: .35em 1em;
  border-radius: 999px;
  margin: 1rem 0;
}

p.stock.out-of-stock {
  background: var(--am-rosa);
  color: #9b2d55;
}

.wc-block-add-to-cart-form .quantity .qty {
  border-radius: 14px;
  border: 2px solid rgba(38, 33, 46, .14);
  padding: .6em .8em;
  font-family: "Poppins", sans-serif;
  width: 4.4em;
}

.wp-block-woocommerce-product-meta {
  margin-top: 1.6rem;
  font-size: .92rem;
}

.wp-block-woocommerce-product-meta .wp-block-post-terms a {
  display: inline-block;
  background: var(--am-rosa);
  color: var(--am-tinta) !important;
  text-decoration: none !important;
  padding: .3em .9em;
  border-radius: 999px;
  font-family: "NeulisAlt", sans-serif;
  font-size: .85rem;
  margin: .15em;
}

.wp-block-woocommerce-product-meta .wp-block-post-terms a:hover {
  background: var(--am-naranja);
  color: #fff !important;
}

/* Pestañas Descripción / Reseñas */
.wp-block-woocommerce-product-details {
  margin-top: 3.2rem;
}

.wp-block-woocommerce-product-details .wc-tabs,
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  padding: 0;
  margin: 0 0 1.6rem;
  border-bottom: 2px solid rgba(38, 33, 46, .1);
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
}

.woocommerce-tabs ul.tabs li a {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  color: #6a6472;
  text-decoration: none;
  padding: 0 0 .8rem;
  display: inline-block;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--am-tinta);
  border-bottom: 3px solid var(--am-naranja);
}

.woocommerce-tabs .panel h2 {
  font-size: 1.5rem;
}

/* ---------- Carrito ---------- */
.wc-block-components-sidebar-layout.wc-block-cart {
  align-items: start;
}

.wc-block-cart-items {
  width: 100%;
  border-collapse: collapse;
}

.wc-block-cart-items__header {
  font-family: "NeulisAlt", sans-serif;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a8390;
}

.wc-block-cart-items__header th {
  padding-bottom: .8rem;
  border-bottom: 2px solid rgba(38, 33, 46, .08);
}

.wc-block-cart-items__row td {
  border-bottom: 1px solid rgba(38, 33, 46, .08);
  padding: 1.2rem 0.6rem 1.2rem 0;
  vertical-align: top;
}

.wc-block-cart-item__image img {
  border-radius: 16px;
  box-shadow: var(--am-shadow-sm);
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.wc-block-components-product-name {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  color: var(--am-tinta) !important;
  text-decoration: none !important;
}

.wc-block-components-product-name:hover {
  color: var(--am-fucsia) !important;
}

.wc-block-cart-item__remove-link {
  color: #9b2d55 !important;
}

.wc-block-components-quantity-selector {
  border-radius: 999px !important;
  border: 2px solid rgba(38, 33, 46, .14) !important;
  overflow: hidden;
}

/* !important: en mobile, WooCommerce trae una regla nativa más
   específica (`.wc-block-components-sidebar-layout .wc-block-
   components-sidebar{padding:0}`, dos clases) que le gana a esta y
   deja la card sin padding — el texto quedaba pegado al borde. Pasa
   igual en Carrito y en Checkout, misma causa en las dos páginas. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow);
  padding: 2.4rem 1.8rem 1.8rem !important;
}

/* El bloque nativo de WooCommerce trae SU PROPIA tarjeta (borde +
   esquinas redondeadas de fábrica, `.wp-block-woocommerce-checkout-
   order-summary-block` / `.checkout-order-summary-block-fill`) —
   dentro de nuestra propia tarjeta blanca queda como una "tarjeta
   dentro de la tarjeta", un rectángulo de más sin motivo. Se saca el
   borde entero (no sólo arriba/abajo, los costados también lo tenían). */
.wp-block-woocommerce-checkout-order-summary-block,
.checkout-order-summary-block-fill {
  border: none !important;
  border-radius: 0 !important;
}

/* El acordeón del resumen del pedido en mobile
   (`.wc-block-components-checkout-order-summary__title`, el título
   clickeable que lo despliega/colapsa) trae de fábrica una línea
   arriba Y otra abajo — son las "dos líneas horizontales" que se ven
   sueltas ahí. El contenido del acordeón, cuando está abierto, agrega
   ADEMÁS su propia línea de fábrica en el borde de abajo — esa es la
   que queda pegada al borde inferior de la card. */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__content.is-open {
  border-top: none !important;
  border-bottom: none !important;
}

/* La lista de productos del resumen (`.wc-block-components-order-
   summary__content`) se renderiza con `display:table` de fábrica —
   WooCommerce ya le pone `width:100%`, pero con `table-layout:auto`
   (el default) ese width es sólo una sugerencia: si el contenido no
   entra, la tabla igual crece a su ancho natural, ignorándolo. Con el
   precio placeholder ($9.999.999,00, bien largo) eso empuja el ancho
   total por encima del espacio disponible y el precio termina
   saliéndose del margen derecho en desktop (en mobile el layout que
   arma WooCommerce es otro y no le pasa). Nada acá necesita
   comportarse como tabla en serio (el hijo ya es flex) — se cambia a
   `block`, que si respeta el ancho del contenedor. */
.wc-block-components-order-summary__content {
  display: block !important;
}

/* Con el contenedor ya achicado al ancho real, la fila de cada
   producto (imagen + nombre/precio unitario/descripción + precio
   total) es flex con `flex-wrap:nowrap` — y por default un flex item
   no se achica más allá de su "min-content". El nombre/descripción SÍ
   tiene que poder achicarse (son varias palabras, envuelven bien en
   más líneas) — pero el precio NO: si a él también se le saca el piso
   mínimo, un ancho angosto lo hace envolver número por número en una
   columna alta y angosta, tapando el título de arriba (pasó al
   probar). Por eso el precio queda con `white-space:nowrap` y su
   propio ancho de contenido (nunca se achica ni envuelve) — es el
   nombre/descripción el que cede el espacio que haga falta. */
.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description {
  min-width: 0 !important;
}

.wc-block-components-order-summary-item__total-price {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Bajada del producto (descripción corta): mismo criterio en mobile y
   en desktop — 3 líneas máximo, con "…", en vez de mostrarse completa
   y estirar la card verticalmente. */
.wc-block-components-product-metadata__description p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-align: left;
}

/* "Resumen del pedido" del checkout.
   ACÁ HUBO UN CORRIMIENTO QUE SE SACÓ: la descripción y el precio por
   unidad se movían 72px a la izquierda (48px de la imagen + 24px de
   padding) para alinearlos con el borde izquierdo de la foto. Ese truco
   dependía de que el precio y la descripción cayeran DEBAJO de la imagen;
   al sumarse la etiqueta "Disponible para reserva" y la descripción de la
   variación, el precio por unidad pasó a quedar a la ALTURA de la imagen,
   y el corrimiento se lo llevaba justo detrás de la foto — se veía el
   precio cortado, con la imagen encima.
   Un margen negativo con un número fijo se rompe apenas cambia el
   contenido de la fila, así que se deja la indentación natural de
   WooCommerce: nombre, precio y descripción alineados entre sí a la
   derecha de la imagen. No puede superponerse nunca. */
.wc-block-checkout__sidebar .wc-block-cart-item__prices {
  /* Aire entre la fila imagen/título/precio total y el precio por
     unidad de acá abajo — quedaban a 4px, casi pegados. */
  margin-top: .7rem;
}

/* Carrito en mobile: la fila de cada producto (`.wc-block-cart-items__row`,
   dentro de la tabla `table.wc-block-cart-items`) pasa a ser CSS Grid,
   con la 2da columna en un ancho fijo (132px) de fábrica y el resto
   de columnas implícitas, sin achicarse, sizeadas al ancho natural de
   su contenido — con el precio total (mismo problema del precio de
   prueba largo) eso empuja la fila entera más ancha que el viewport y
   desborda la página. Se redefinen las columnas con una intermedia
   ("producto": título/precio/descripción) de verdad flexible, así la
   fila completa nunca puede medir más que el ancho disponible. */
.wc-block-cart-items__row {
  grid-template-columns: 80px minmax(0, 1fr) max-content !important;
}

.wc-block-cart-item__product {
  grid-column: 2 / 3 !important;
  min-width: 0 !important;
}

.wc-block-cart-item__total {
  grid-column: 3 / 4 !important;
}

/* Borde de grupo: además del borde individual de cada opción y de su
   propio `::after` (ya sacado arriba), WooCommerce dibuja UN TERCER
   borde por separado alrededor de TODA la lista de opciones como
   grupo (`--highlight-checked:after`, absolute, cubriendo el
   contenedor completo) — pensado para cuando las opciones individuales
   NO tienen borde propio. Acá sí lo tienen, así que este también
   sobra, en desktop y en mobile por igual. */
.wc-block-components-radio-control--highlight-checked:after {
  content: none !important;
}

.wc-block-cart__totals-title,
.wc-block-checkout__order-summary-heading,
.wc-block-components-totals-item__label {
  font-family: "NeulisAlt", sans-serif;
}

.wc-block-components-totals-item.wc-block-components-totals-footer-item {
  font-size: 1.15rem;
  font-weight: 700;
  border-top: 2px solid rgba(38, 33, 46, .1);
  padding-top: .9rem;
  margin-top: .4rem;
}

/* WooCommerce envuelve cada bloque del resumen (ítems, cupón, lista de
   totales, y cada fila de totales) en su propio contenedor con un
   `border-top`/`border-bottom` fino de fábrica — en nuestra tarjeta
   blanca, ya con aire de sobra por el padding, esas líneas quedan sin
   propósito (una arriba de "Agregar cupones" sin razón visual, y se
   nota más pegada al borde redondeado de lo que se ve prolijo) y la
   que envuelve el total DUPLICA la línea que ya le dibujamos arriba
   (`.totals-footer-item` de arriba): quedaban dos líneas con un hueco
   en el medio en vez de una sola. Se sacan todas, dejando la única
   línea intencional (la del total) como el único divisor visible. */
.wc-block-components-totals-wrapper,
[class*="-order-summary-block"],
[class*="-order-summary-coupon-form-block"],
[class*="-order-summary-totals-block"] {
  border-top: none !important;
  border-bottom: none !important;
}

.wc-block-cart__submit-button {
  width: 100%;
  text-align: center;
  margin-top: 1.2rem;
}

/* ---------- Checkout ---------- */
.wc-block-checkout__form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-textarea textarea {
  border-radius: 14px !important;
  border: 2px solid rgba(38, 33, 46, .14) !important;
  font-family: "Poppins", sans-serif !important;
  background: #fff !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--am-fucsia) !important;
  outline: none !important;
}

.wc-block-components-text-input label {
  font-family: "Poppins", sans-serif !important;
}

.wc-block-components-checkout-step__title {
  font-family: "Neulis", sans-serif;
  font-weight: 800;
  font-size: 1.3rem !important;
}

/* El padding-left (48px, no 1.1em) es a propósito: WooCommerce
   posiciona el círculo del radio con position:absolute; left:16px;
   width:20px — sin dejarle ese espacio exacto, el texto arranca
   debajo del círculo y se come las primeras letras (pasaba en
   Andreani Y en Mercado Pago por igual: es el mismo radio de WC
   Blocks en los dos casos, no algo de esos plugins). */
.wc-block-components-radio-control__option {
  background: #fff !important;
  border-radius: 16px !important;
  border: 2px solid rgba(38, 33, 46, .12) !important;
  padding: 1.2em 1.1em 1.2em 48px !important;
  /* !important: WooCommerce trae `.wc-block-components-radio-control
     .wc-block-components-radio-control__option { margin-bottom:0 }`
     con más especificidad (2 clases) que esta regla — sin forzarlo acá
     las opciones quedan pegadas entre sí y sus bordes de 2px se ven
     como uno solo doble/grueso en el punto de contacto. */
  margin-bottom: .6rem !important;
}

/* Además del borde propio de la opción, WooCommerce dibuja un
   separador nativo con un `::after` (position:absolute, 1px de alto)
   pensado para cuando las opciones comparten un borde de grupo (lista
   sin bordes individuales). Acá cada opción YA tiene su propio borde
   completo — ese `::after` queda de más, pegado arriba de cada
   opción, y se ve como un borde doble. WooCommerce hace exactamente
   esto mismo (":after{content:none}") para las opciones de método de
   pago; se aplica el mismo criterio acá para que sea consistente en
   todos los grupos de radio del checkout. */
.wc-block-components-radio-control__option:after {
  content: none !important;
}

.wc-block-components-radio-control__option[aria-checked="true"] {
  border-color: var(--am-fucsia) !important;
  background: rgba(233, 83, 138, .06) !important;
}

/* El precio ("$ 11.067,88") reserva un 50% fijo del ancho de fábrica
   (`flex:0 0 50%`), sin importar cuánto texto tenga en realidad — así
   que dos opciones con la MISMA cantidad de caracteres en la etiqueta
   ("Andreani (estándar)" / "Andreani (sucursal)") pueden wrapear
   distinto en mobile: el ancho real en píxeles de cada palabra no es
   igual aunque el conteo de letras sí, y con un 50% rígido cualquier
   diferencia mínima alcanza para cruzar el límite en una sí y en la
   otra no. Se le da al precio sólo el ancho que necesita (auto, sin
   wrapear) y a la etiqueta el resto — así las dos parten del mismo
   ancho disponible real, consistente entre opciones. */
.wc-block-components-radio-control__label-group .wc-block-components-radio-control__secondary-label {
  flex: 0 0 auto !important;
  white-space: nowrap;
  margin-left: 1em;
}

.wc-block-components-radio-control__label-group .wc-block-components-radio-control__label {
  flex: 1 1 auto !important;
  min-width: 0;
}

/* Bug propio de WooCommerce Blocks: la regla nativa que resetea el
   margen superior del campo País asume un layout flex con `gap` en
   `.checkout-step__content` que acá no queda activo (se renderiza en
   display:block) — sin eso, el campo País queda pegado al de
   Apellidos, sin aire entre ambos. Se restaura el margen a mano. */
.wc-block-components-checkout-step .wc-block-components-country-input {
  margin-top: 16px !important;
}

/* Selector de sucursal de retiro (plugin Andreani WooCommerce): sin
   estilo propio, salía con el <select> nativo del navegador, fuera de
   tono con el resto de los campos del checkout. Mismo lenguaje visual
   (radio, borde, tipografía) que los demás inputs — pero sin el
   padding de label flotante de `.wc-blocks-components-select__select`,
   porque acá la etiqueta ya es texto fijo arriba, no una que flota
   adentro del campo. */
.andreani-bloque-sucursal {
  margin-top: 1.2rem;
}

.andreani-bloque-sucursal__label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--am-tinta);
  margin-bottom: .5rem;
}

.andreani-bloque-sucursal__select {
  width: 100%;
  height: 50px;
  padding: 0 1em;
  border-radius: 14px;
  border: 2px solid rgba(38, 33, 46, .14);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  background: #fff;
  color: var(--am-tinta);
}

.andreani-bloque-sucursal__select:focus {
  border-color: var(--am-fucsia);
  outline: none;
}

.wc-block-components-checkout-place-order-button {
  width: 100%;
  font-size: 1.05rem !important;
  padding: 1em 1.7em !important;
}

.wc-block-components-totals-coupon input {
  border-radius: 14px !important;
  border: 2px solid rgba(38, 33, 46, .14) !important;
}

/* Encabezado propio del checkout (distraction-free, ver patterns/checkout-header.php) */
.am-checkout-header {
  background: var(--am-papel);
  border-bottom: 2px solid rgba(38, 33, 46, .08);
  padding: 1rem 0;
}

.am-checkout-header__wrap {
  width: min(100% - 2rem, var(--am-wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.am-checkout-header__logo img {
  height: 40px;
  width: auto;
}

.am-checkout-header__cart {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  color: var(--am-tinta);
  text-decoration: none;
  background: var(--am-rosa);
  padding: .5em 1.1em;
  border-radius: 999px;
}

.am-checkout-header__cart:hover {
  background: var(--am-naranja);
  color: #fff;
}

.am-checkout-footer {
  text-align: center;
  padding: 2rem 0 3rem;
  font-size: .85rem;
  color: #8a8390;
}

/* =====================================================================
   TIENDA — ARCHIVO POR CATEGORÍA (plantilla propia archive-product)
   ===================================================================== */
.am-shop-head {
  padding-block: clamp(1.6rem, 1.2rem + 2vw, 2.6rem) 0;
}

.am-shop-head h1 {
  font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.2rem);
  margin-bottom: .4rem;
}

.am-shop-head p {
  color: #4a4453;
  max-width: 56ch;
}

/* Hero de la tienda principal (distinto de `.am-shop-head`, que sigue
   usando el encabezado plano en las páginas de una sola categoría):
   mismo lenguaje visual que los heroes de Inicio/Talleres — fondo de
   color + recortes ilustrados + columna de foto real con cinta washi.
   Sin CTA propio (la acción de compra ya la resuelve el carrusel de
   abajo). */
/* UNA sola composición: texto y paquete son los dos hijos de un mismo
   flex, no elementos posicionados por separado. Antes el paquete iba
   `position: absolute` con centrado calculado a mano, y cada ajuste de
   tipografía o de espaciado descolocaba algo — el alto del paquete no
   participaba del layout, así que nada se acomodaba solo.
   Acá el espaciado lo resuelve flexbox: `gap` fijo entre los dos, y
   `align-items: center` centra el paquete contra el bloque de texto sin
   ninguna cuenta.
   `width: fit-content` + el `margin-inline: auto` que ya trae `.am-wrap`:
   el contenedor mide exactamente lo que miden sus dos hijos y se centra.
   Así, en pantallas anchas, lo que sobra queda a los COSTADOS de la
   composición entera y nunca entre el texto y el paquete. El tope sigue
   siendo `--am-wrap` (1200px), el mismo del resto del sitio. */
.am-shop-hero .am-wrap {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 1.6rem + 2vw, 3.5rem);
  width: fit-content;
  max-width: min(100% - 2.4rem, var(--am-wrap));
}

/* `0 1 600px`: parte de 600px y puede achicarse en pantallas medianas,
   pero NO crece — si creciera, el sobrante de las pantallas anchas
   volvería a meterse acá adentro en vez de quedar afuera. */
.am-shop-hero .am-hero__text {
  flex: 0 1 600px;
  min-width: 0;
}

/* Más grande que `.am-h2` (de donde parte) y que `.am-featured h2` (los
   títulos de los banners del carrusel de abajo): tiene que notarse
   como EL título de la sección, no como uno más. Achicado un poco
   respecto de la versión de un solo bloque de antes, porque ahora
   comparte fila con la columna de foto. */
/* Bastante más grande que antes (era clamp(2.3rem … 3.6rem)): el bloque
   de texto compartía fila con la ilustración y quedaba chico al lado.
   Una sola tipografía (Neulis, la de todos los títulos del sitio) y un
   solo color — sin el acento amarillo que tenía "Arte Mure", que partía
   la línea en dos.
   OJO (decisión de la dueña, medido y avisado): el blanco sobre el
   naranja de marca da 2,82:1, apenas por debajo del 3:1 que pide AA para
   texto grande. Se mantiene así a pedido; la salida sin tocar el fondo
   sería pasarlo a `--am-terracota` (5,12:1). */
.am-shop-hero__title {
  font-size: clamp(2.9rem, 2rem + 3.4vw, 4.4rem);
}

/* El nombre de la marca nunca se parte en dos líneas. El corte entre
   "La tienda de" y "Arte Mure" ya lo fuerza un <br> en el patrón; esto
   evita que un cambio de tamaño futuro rompa "Arte / Mure". */
.am-shop-hero__title .am-shop-hero__brand {
  white-space: nowrap;
}

/* Teléfonos muy angostos (320px, tipo iPhone SE de 1ª generación).
   Por debajo de 423px de viewport el `clamp` de arriba queda clavado en
   su mínimo (2.9rem = 46.4px), y a ese tamaño "La tienda de" necesita
   273px mientras que a 320px de pantalla sólo hay 267px disponibles: la
   línea se parte sola y el título termina en TRES renglones, con un "de"
   huérfano. Bajarlo un escalón acá lo devuelve a dos. El corte forzado
   es el mismo en todos los tamaños; lo único que cambia es el cuerpo.
   El corte en 344px separa los teléfonos de 320px de los de 360px, que
   con 2.9rem entran holgados. */
@media (max-width:344px) {
  .am-shop-hero__title {
    font-size: 2.6rem;
  }
}

/* La bajada del hero de Tienda es más corta y menos protagónica que en
   Inicio/Talleres (acá el peso lo llevan el título + los chips + la
   fila de confianza, no un párrafo largo) — achicada respecto del
   `.am-hero__lead` compartido para que no domine el bloque de texto. */
/* Sube junto con el título, pero MENOS, para que la jerarquía entre los
   dos no se achate. */
.am-shop-hero .am-hero__lead {
  font-size: clamp(1.24rem, 1.06rem + .62vw, 1.48rem);
  max-width: 42ch;
  margin-bottom: 1.5rem;
  color: #fff;
  font-weight: 600;
  text-shadow: var(--am-sombra-texto-naranja);
}

/* Hero y catálogo comparten el mismo naranja (ver tienda-archive.php) y
   quedan pegados uno debajo del otro — el padding grande de sección
   (`.am-section`, pensado para separar bloques de color DISTINTO) acá
   solo deja un hueco vacío en el medio de un mismo bloque de color. Se
   achica al mínimo razonable en el borde que comparten (bottom del
   hero, top del catálogo); el resto de los paddings de cada uno queda
   como estaba. */
.am-shop-hero {
  padding-bottom: clamp(1rem, .6rem + 1.4vw, 1.6rem);
}

/* Un respiro un poco mayor arriba del catálogo (era clamp(1rem … 1.6rem)):
   comparte el naranja con el hero y quedaban demasiado pegados, sin
   separación entre el final de la lista de beneficios y el primer título
   de categoría. Sigue siendo bastante menos que el padding de sección
   normal, que es lo que corresponde entre dos bloques del mismo color. */
/* El hero y el catálogo comparten el mismo naranja, así que no hay ningún
   corte de color entre los dos: la separación la tiene que dar este espacio.
   El valor era más chico cuando había un buscador en el medio (que aportaba
   su propio alto y sus márgenes); al sacarlo, "Pintado a Mano" quedaba
   pegado a la lista de beneficios del hero. */
.am-shop-catalog {
  padding-top: clamp(3.4rem, 2.4rem + 3vw, 5.4rem);
}

/* Grilla de una página de categoría, debajo del título. Antes la separación
   la daba el buscador que iba en el medio (con su alto y sus márgenes) y la
   sección abría con `padding-top:0`; al sacarlo, el título quedaba a 6px de
   la primera fila de productos. Es menos aire que en la Tienda a propósito:
   ahí se separan dos secciones distintas, acá el título y su propia grilla. */
.am-shop-cat-body {
  padding-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
}

/* El fondo de esta franja es el naranja de marca sin tocar
   (`.am-section--naranja`, decisión de la dueña: el naranja vibrante se
   mantiene). El contraste NO se resuelve oscureciendo el fondo sino
   pasando el texto de lectura a `--am-terracota` — ver
   `.am-shop-hero .am-hero__lead`, `.am-shop-hero__trust-item` y
   `.am-shop-cat__desc`. */

/* Fila de confianza: única en el hero de Tienda, ningún otro hero del
   sitio la tiene — diferencia su ESTRUCTURA, no solo el contenido/foto. */
/* El `gap` de fila (primer valor) es el que separa un ítem de otro cuando
   la columna es angosta y caen apilados — que es el caso normal acá. Se
   subió de 1.2rem porque en esa situación la lista se leía apretada.
   El `margin-top` es el aire entre la bajada y la lista: como el margen
   de abajo de `.am-hero__lead` (1.5rem) COLAPSA contra este, el espacio
   real es el mayor de los dos, así que este valor es el que manda. */
.am-shop-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.55rem 2.1rem;
  margin: 2.7rem 0 0;
}

.am-shop-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: #fff;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  /* Un escalón por debajo de la bajada: el orden de lectura es
     título → bajada → lista. */
  font-size: 1.2rem;
  text-shadow: var(--am-sombra-texto-naranja);
}

/* Íconos lineales: mismos motivos que ya usaba ArteMure acá (avioncito de
   papel, corazón, estrella), redibujados como línea simple en vez de los
   recortes ilustrados a color — a pedido de la dueña. Van en SVG inline
   (no <img>) para poder pintarlos con `currentColor` desde CSS y que
   escalen sin pesar nada. */
/* El ícono toma el color del ítem por `currentColor`, así que va en blanco
   junto con su etiqueta — ícono y texto se leen como una sola unidad.
   `drop-shadow` y no `text-shadow`: sobre un SVG el text-shadow no hace
   nada; el filtro sí sigue el contorno del trazo. Mismos valores que
   `--am-sombra-texto-naranja`, escritos aparte porque `filter` no acepta
   la sintaxis de sombra de texto. */
.am-shop-hero__trust-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(58, 21, 9, .5));
}

/* Paquete del hero de Tienda: el SEGUNDO hijo del flex, con ancho fijo.
   A propósito NO usa el tratamiento de marco blanco + cinta washi del
   resto del sitio (Inicio, Talleres, Sobre mí) — acá el lenguaje es más
   "comercial": recorte con sombra suave, sin rotar y sin borde irregular.
   `flex: 0 0 350px` — ni crece ni se achica: es una medida elegida, no
   una consecuencia del espacio sobrante.
   De dónde sale el 350: el objetivo es que el paquete no se vea más chico
   que las dos líneas del título, que miden 144px de alto (2 líneas ×
   71.8px de line-height real). Pero el archivo trae las "alas" dibujadas
   alrededor del paquete, y el paquete PROPIAMENTE DICHO ocupa sólo el 67%
   del alto del PNG — por eso a 300px de ancho (172px de alto) se seguía
   viendo chico: el objeto visible medía ~116px, menos que el título.
   A 350px de ancho la caja mide 201px y el paquete dentro ~135px, ya a la
   par del título. Se frenó acá y no en los ~380px que harían coincidir
   exactamente ambos, para no volver al tamaño de la versión vieja.
   El centrado vertical lo da el `align-items: center` del contenedor, sin
   `position: absolute` ni cálculos. Es decoración: no intercepta clics. */
.am-shop-hero__deco {
  display: block;
  flex: 0 0 350px;
  width: 350px;
  height: auto;
  filter: drop-shadow(0 18px 24px rgba(38, 33, 46, .3));
  pointer-events: none;
}

/* Etiquetas de papel de los datos rápidos del hero de Tienda ("Piezas
   únicas" / "Hecho a mano en Tandil"): mismo tratamiento físico que
   `.am-hero-tag` (fondo `etiqueta-papel.png` + cinta), pero más chicas,
   en fucsia (acento interactivo del sitio) y sin ser un link — son un
   dato, no un CTA. Posición vía inline style: cada una cuelga de una
   esquina distinta del marco de foto, como dos stickers superpuestos. */
.am-paper-badge {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 0 1.2rem;
  background: url("../img/etiqueta-papel.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 7px 11px rgba(38, 33, 46, .22));
  white-space: nowrap;
  pointer-events: none;
}

.am-paper-badge__text {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 700;
  font-size: .88rem;
  color: var(--am-fucsia);
}

@media (min-width:901px) {
  .am-paper-badge {
    height: 76px;
    padding: 0 1.5rem;
  }

  .am-paper-badge__text {
    font-size: 1.05rem;
  }
}

/* --- Banner de producto destacado (mismo estilo que la sección Tienda del Inicio) --- */
.am-featured .am-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  align-items: center;
}

.am-featured__badge {
  display: inline-block;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  padding: .4em 1em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.am-featured h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
}

.am-featured__desc {
  color: rgba(255, 255, 255, .94);
  max-width: 46ch;
  margin: 0 0 1.2rem;
}

.am-featured__price {
  display: inline-block;
  background: #fff;
  color: var(--am-fucsia);
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .4em 1.1em;
  border-radius: 999px;
  margin: 0 0 1.4rem;
}

.am-featured__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Sin `.am-photo-frame`: la foto ocupa directamente el espacio de
   `.am-featured__media`, sin marco blanco/padding/sombra — a pedido de
   la dueña, para que se vea lo más grande posible en el banner. */
.am-featured__media {
  max-width: 320px;
  width: 100%;
  margin-inline: auto;
}

.am-featured__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--am-radius-card);
}

/* La foto de producto (destacado) sí se recorta a cuadrado — la libreta
   ilustrada en sí, sin aire alrededor. La del "próximo lanzamiento"
   (recorte con transparencia, sin fondo) mantiene su proporción natural
   para no cortarle la cabeza/manos al sujeto — ver `.am-upcoming-media`
   más abajo, que no fuerza aspect-ratio. */
.am-featured__media:not(.am-upcoming-media) img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* --- Variante `--foto`: el slide se divide en DOS PANELES del mismo
   bloque — uno de color plano (donde va el texto) y otro con la foto —
   unidos por un degradé en la costura, no por un corte recto. No hay
   tarjeta: ni fondo propio, ni borde redondeado, ni sombra sobre el
   texto; el color que se ve detrás del texto es el del propio slide.
   Todo lo que cambia por slide se pasa desde tienda-archive.php con
   custom properties, así cada slide conserva SU color y su foto:
     --am-slide-img   : url(...)
     --am-slide-fade  : color del panel (el mismo de la sección)
     --am-slide-pos   : encuadre de la foto (mobile)
   Y estas se ajustan acá, no por slide:
     --am-foto-ratio  : proporción de la foto (ancho ÷ alto)
     --am-costura     : ancho de la disolución entre panel y foto
     --am-foto-alto   : alto de la franja de foto (mobile)
     --am-alto        : alto del slide (desktop) */
.am-featured--foto {
  /* Proporción de la foto (ancho ÷ alto). De acá salen tanto el alto de
     la franja en mobile como el ancho del panel en desktop, así la foto
     nunca queda estirada ni deja bandas de color sobrantes. Si se cambia
     por una foto de otra proporción, se ajusta acá. */
  --am-foto-ratio: 1.4395;
  /* Ancho de la disolución foto↔color. Con costura de los dos lados no
     puede ser tan ancha como cuando era de uno solo: 2 × 110px sobre una
     foto de ~400px se comía media escena. */
  --am-costura: 72px;
  /* Alto de la franja de foto en mobile = ancho del slide ÷ proporción
     de la foto (1.44:1), para que entre completa sin recortar los
     costados. Si se cambia por una foto de otra proporción, hay que
     recalcular este valor. */
  --am-foto-alto: 69vw;
  background-repeat: no-repeat;
  color: #fff;
}

/* Mobile: dos franjas apiladas — foto arriba a todo el ancho (entera,
   sin texto encima) y panel de color abajo con el texto. Acá la foto va
   como FONDO (no como <img>): apilada no necesita participar del layout,
   y así se controla la costura con el mismo degradé. La primera capa es
   el panel: arranca transparente sobre la foto, se vuelve sólido justo
   donde termina la foto y sigue sólido hasta abajo. */
@media (max-width:900px) {
  .am-featured--foto {
    background-image:
      linear-gradient(to bottom,
        transparent calc(var(--am-foto-alto) - var(--am-costura-mob, 70px)),
        var(--am-slide-fade, var(--am-fucsia)) var(--am-foto-alto),
        var(--am-slide-fade, var(--am-fucsia)) 100%),
      var(--am-slide-img);
    background-size: auto, 100% auto;
    background-position: center, var(--am-slide-pos, top center);
  }

  /* Sin tarjeta: el texto va suelto sobre el panel de color. */
  .am-featured--foto .am-wrap {
    display: block;
  }

  /* En mobile la foto es el fondo, así que el <img> del markup sobra. */
  .am-featured--foto .am-featured__foto {
    display: none;
  }

  /* El alto lo marca la foto + el espacio que necesita el texto debajo.
     El segundo sumando se ajustó midiendo el bloque real (texto +
     padding): sin badge ni bajada quedan dos filas (título / precio +
     botón) y ~7rem alcanzan. */
  .am-carousel--compact .am-featured--foto {
    display: flex;
    min-height: calc(var(--am-foto-alto) + 7rem);
    align-items: flex-end;
  }
}

/* Mismo breakpoint que ya usa el resto del carrusel (900/901px). */
@media (min-width:901px) {
  /* Desktop: el color de la sección llega a los dos bordes de la pantalla
     (el slide sigue a sangre) y encima van texto y foto como las DOS
     COLUMNAS de la misma grilla, pegadas y centradas como una unidad.
     Por eso la foto acá es un <img> y no un fondo: un fondo no participa
     del layout, así que el ancho del texto tenía que fijarse a mano y el
     sobrante quedaba como hueco entre el texto y la foto. Como elemento,
     ambas columnas miden `max-content` y se centran solas — el mismo
     mecanismo que ya usa el slide de "Sorpresas en camino". */
  .am-carousel--compact .am-featured--foto {
    --am-alto: 280px;
    min-height: var(--am-alto);
    /* `flex` + `stretch`: la sección es la que recibe el alto (el suyo
       propio, o el del slide más alto — los slides comparten alto). El
       wrap, que es la grilla, tiene que estirarse hasta ese alto; si no,
       queda del alto del texto y la foto no puede llegar a los bordes. */
    display: flex;
    align-items: stretch;
    /* La foto va como elemento; el fondo queda sólo con el color. */
    background-image: none;
  }

  .am-carousel--compact .am-featured--foto > .am-wrap {
    width: 100%;
    /* Anula el `center` general de `.am-featured .am-wrap`: acá cada
       columna decide (el texto se centra, la foto se estira). */
    align-items: stretch;
  }

  /* El texto se centra vertical; la foto, en cambio, se estira. */
  .am-featured--foto .am-featured__info {
    align-self: center;
  }

  /* La columna lleva el ANCHO fijo (derivado del alto de referencia y la
     proporción) y se estira en alto. Así llena siempre el alto real del
     slide, sea el que sea: con un alto fijo reaparecían bandas de color
     cada vez que algo lo hacía más alto (el padding de la sección, o el
     otro slide, que comparte alto). El ancho tiene que ser explícito
     porque si no la imagen impone su alto natural (1042px) y revienta
     el banner. */
  .am-featured--foto .am-featured__foto {
    position: relative;
    align-self: stretch;
    width: calc(var(--am-alto) * var(--am-foto-ratio));
    overflow: hidden;
  }

  .am-featured--foto .am-featured__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* La costura: el color de la sección se disuelve sobre los bordes de la
     foto, para que la unión no sea un filo. Va de los DOS lados porque el
     panel de color llega a los dos bordes de la pantalla y la foto queda
     en el medio — con costura de un solo lado, el otro borde quedaba
     como un corte recto. */
  .am-featured--foto .am-featured__foto::before,
  .am-featured--foto .am-featured__foto::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: var(--am-costura);
    pointer-events: none;
    /* Sin esto el degradé de la izquierda queda DEBAJO de la foto: los
       tres son elementos posicionados sin z-index, así que se pintan en
       el orden del DOM y el ::before va antes que el <img>. */
    z-index: 1;
  }

  .am-featured--foto .am-featured__foto::before {
    left: 0;
    background: linear-gradient(to right,
        var(--am-slide-fade, var(--am-fucsia)),
        transparent);
  }

  .am-featured--foto .am-featured__foto::after {
    right: 0;
    background: linear-gradient(to left,
        var(--am-slide-fade, var(--am-fucsia)),
        transparent);
  }
}

/* --- Carrusel (hero de la Tienda: producto destacado + próximo
   lanzamiento como slides de un mismo carrusel). Auto-avanza cada pocos
   segundos y se pausa mientras el mouse/foco está encima (y no avanza
   solo si el sistema pide "reducir movimiento") — ver assets/js/carousel.js.
   Los puntos siguen disponibles para navegar en cualquier momento; al
   usarlos, la transición es la misma microinteracción breve. --- */
/* `width:100%` explícito en cada nivel (acá y en viewport/track): sin
   esto, en un contenedor grid/flex angosto (ej. el hero de Inicio en
   mobile) el carrusel no se achica para llenar el espacio disponible —
   termina midiendo lo que le pida su contenido (la foto), más ancho que
   el viewport, y desborda el margen. */
.am-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.am-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.am-carousel__track {
  display: flex;
  width: 100%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Cada slide es un `.am-featured` completo (ver tienda-archive.php). El
   slide es flex para que su sección estire a la altura del más alto de
   los dos (`.am-carousel__slide > .am-section`): así el fondo de color
   siempre llega hasta abajo, sea cual sea el slide activo, y la barra de
   navegación (superpuesta, ver `.am-carousel__nav`) queda siempre sobre
   ese fondo. El layout interno de 2 columnas sigue siendo el de siempre,
   de `.am-featured .am-wrap` — sin redefinirlo acá. */
.am-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  /* Por defecto (volviéndose visible): sin demora, aparece apenas
     arranca el deslizamiento — ver abajo por qué ocultarse SÍ espera. */
  transition: visibility 0s linear 0s;
}

.am-carousel__slide>.am-section {
  flex: 1 1 auto;
  width: 100%;
  /* Aire extra abajo para que el texto/CTA nunca quede tapado por la
     barra de navegación superpuesta. */
  padding-bottom: calc(clamp(3.4rem, 2rem + 6vw, 6.5rem) + 3.2rem);
}

/* El `visibility:hidden` de la diapositiva saliente esperaba a
   `aria-hidden` en vez de al deslizamiento: como el atributo cambia
   apenas se hace click (no cuando termina la animación de `transform`,
   .45s), la saliente desaparecía de golpe a mitad de camino y por ese
   hueco se veía el blanco de fondo de la página hasta que la entrante
   terminaba de cubrir el lugar. El `transition-delay` la mantiene
   visible durante todo el deslizamiento; recién se oculta cuando
   termina (mismo tiempo que `.am-carousel__track`, arriba). */
.am-carousel__slide[aria-hidden="true"] {
  visibility: hidden;
  transition-delay: .45s;
}

/* Slide del "Próximo lanzamiento": foto recortada con transparencia,
   sin fondo — se muestra en su proporción natural (sin forzar cuadrado
   ni recortar), así no le corta la cabeza/manos al sujeto. */
.am-upcoming-media {
  position: relative;
}

/* Superpuesta al borde inferior del carrusel (sobre el fondo de color del
   slide activo), no debajo de la sección. */
.am-carousel__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.am-carousel__dots {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.am-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.am-carousel__dot:hover {
  background: rgba(255, 255, 255, .75);
}

.am-carousel__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* --- Variante del carrusel para el hero de Inicio: acá adentro no hay
   una sección de color propia por slide (es solo el cuadro de foto), así
   que la barra de navegación va en flujo normal debajo, no superpuesta.
   Mantiene el `overflow:hidden` normal del carrusel (recorte horizontal
   para esconder el slide inactivo) — en vez de pedirle que deje pasar el
   desborde vertical (eso termina en scrollbar, no en contenido visible;
   overflow-x/overflow-y con valores distintos convierte el eje "visible"
   en "auto"), directamente se le da al slide el alto real que necesita:
   `display:block` en vez de flex (cada slide mide por su propio
   contenido, sin estirarse para igualar al otro) y `padding-bottom` que
   reserva el lugar de la etiqueta colgante (`.am-hero-tag`, centrada
   sobre el borde inferior del cuadro, mitad afuera). Así el viewport
   nunca tiene nada para recortar.

   Ese padding va en `.am-carousel__slide`, UN NIVEL ARRIBA de
   `.am-hero__media` — no en `.am-hero__media` mismo: `.am-hero-tag` se
   posiciona `bottom:0` respecto de `.am-hero__media`, así que ponerle
   padding-bottom ahí corre el borde de referencia y la etiqueta termina
   colgando por debajo de ESE padding en vez de pegada al cuadro (efecto:
   un hueco entre el cuadro y la etiqueta). Poniéndolo en el slide, un
   nivel más arriba, `.am-hero__media` queda intacto — la etiqueta sigue
   centrada justo sobre el borde del cuadro, como en el banner de la
   Tienda — y el slide igual mide lo suficiente para no recortarla. */
.am-carousel--hero .am-carousel__slide {
  display: block;
  /* Mobile: el tag mide 98px de alto y cuelga la mitad (49px) por debajo
     del cuadro — un poco más de aire de margen. */
  padding-bottom: 58px;
}

.am-carousel--hero .am-carousel__nav {
  position: static;
  margin-top: 1.4rem;
}

@media (min-width:901px) {
  .am-carousel--hero .am-carousel__slide {
    /* Desktop: el tag pasa a 118px de alto, cuelga 59px. */
    padding-bottom: 70px;
  }
}

/* --- Carrusel "Próximos lanzamientos" de la Tienda, versión compacta:
   MISMO contenido que el banner grande de siempre (foto + badge +
   título + descripción + precio/CTA, ver `.am-featured` arriba), solo
   que con mucho menos alto — vive ARRIBA del hero (ver
   tienda-archive.php) y tiene que dejarlo ver, no una sección grande
   propia. Reduce: padding de la sección, tamaño de foto, tipografía y
   márgenes entre elementos — nunca saca contenido. --- */
/* Padding simétrico arriba/abajo: ya no hace falta reservar aire extra
   abajo para puntos de navegación — los chevrons van a los costados,
   centrados verticalmente (ver `.am-carousel__arrow` más abajo), así
   que ese alto que antes se perdía queda para el resto del banner. */
.am-carousel--compact .am-carousel__slide > .am-section {
  padding-block: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  /* Reserva lugar para los chevrons laterales (32px + margen a cada
     costado) — si no, en pantallas angostas el texto queda tapado
     debajo del botón "‹". */
  padding-inline: clamp(2.7rem, 2.1rem + 2vw, 3.4rem);
}

/* Chevrons laterales del carrusel compacto (reemplazan los puntos de
   abajo): botones circulares chicos, centrados verticalmente a cada
   costado del banner. Mismo `data-am-carousel-prev/next` que ya
   soporta assets/js/carousel.js. */
.am-carousel--compact .am-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.am-carousel--compact .am-carousel__arrow:hover,
.am-carousel--compact .am-carousel__arrow:focus-visible {
  background: rgba(255, 255, 255, .38);
}

.am-carousel--compact .am-carousel__arrow--prev {
  left: .5rem;
}

.am-carousel--compact .am-carousel__arrow--next {
  right: .5rem;
}

.am-carousel--compact .am-featured .am-wrap {
  gap: clamp(1.2rem, .8rem + 2vw, 2.2rem);
}

.am-carousel--compact .am-featured__badge {
  font-size: .68rem;
  padding: .35em .9em;
  margin-bottom: .6rem;
}

.am-carousel--compact .am-featured h2 {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
  margin: 0 0 .35rem;
}

.am-carousel--compact .am-featured__desc {
  font-size: .88rem;
  margin: 0 0 .7rem;
}

/* Precio + CTA en la misma fila, mismo alto (solo en el banner de
   producto puntual — ver `.am-featured__price-row` en tienda-archive.php,
   el slide de "Sorpresas en camino" no tiene precio). Alto fijo en vez
   de dejarlo salir del padding en em: precio y botón parten de
   font-size distinto, así que por padding solo no quedan iguales. */
.am-carousel--compact .am-featured__price-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .9rem;
}

.am-carousel--compact .am-featured__price {
  display: inline-flex;
  align-items: center;
  height: 2.2rem;
  font-size: .95rem;
  padding: 0 1em;
  margin: 0;
  box-sizing: border-box;
}

.am-carousel--compact .am-featured__cta {
  margin: 0;
}

.am-carousel--compact .am-featured__cta .am-btn {
  height: 2.2rem;
  box-sizing: border-box;
}

.am-carousel--compact .am-featured__media {
  max-width: 180px;
}

@media (min-width:701px) {
  /* 180px y no 260: los slides del carrusel comparten alto (el track es
     flex), así que el más alto manda. Con 260px esta foto medía 325px y
     estiraba TODO el banner a 386px, aunque el slide `--foto` sólo
     necesitara 290px. Bajarla acá es lo que permite que el banner sea
     más bajo. */
  .am-carousel--compact .am-featured__media {
    max-width: 180px;
  }
}

/* Desktop: el CTA heredaba el tamaño del botón píldora normal del sitio
   (`.am-btn`, pensado para un hero grande) — desproporcionado en esta
   versión chica del banner. Además, el grid de 2 columnas usaba `fr`
   (texto/foto estirados a los bordes del wrap, con un "space between"
   grande en el medio) — acá se pasa a `max-content` + `justify-content:
   center` para que texto+foto queden agrupados como una sola unidad
   centrada, sin ese hueco. El texto DENTRO de su columna sigue alineado
   a la izquierda (eso ya estaba bien, no tocar). */
@media (min-width:901px) {
  .am-carousel--compact .am-featured .am-wrap {
    grid-template-columns: max-content max-content;
    justify-content: center;
  }

  .am-carousel--compact .am-featured__cta .am-btn {
    font-size: .82rem;
    padding: .55em 1.2em;
  }
}

/* Mobile: en vez de apilar (foto arriba a todo el ancho, texto abajo —
   el comportamiento general de `.am-featured` en el resto del sitio),
   la foto queda fija en la esquina superior derecha (~1/4 del banner) y
   el resto de los elementos (badge, título, descripción, precio, CTA)
   se acomodan en el espacio restante — el `padding-right` del wrap le
   reserva el lugar para que el título/texto no queden debajo de la
   foto. */
@media (max-width:900px) {
  .am-carousel--compact .am-featured .am-wrap {
    display: block;
    position: relative;
    padding-right: 36%;
  }

  .am-carousel--compact .am-featured__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    max-width: 130px;
    margin: 0;
  }

  /* En los slides `--foto` no hay foto en la esquina: el hueco que le
     reservaba `padding-right` dejaría el texto apretado contra el borde
     izquierdo sin motivo. */
  .am-carousel--compact .am-featured--foto .am-wrap {
    padding-right: 0;
  }

}

/* --- Ajuste fino del contenido del slide `--foto`. Va DESPUÉS de las
   reglas de `.am-carousel--compact` a propósito: comparten especificidad
   y acá gana el que está más abajo. --- */

/* Mobile: el panel de color solo tiene que albergar el texto, no leerse
   como una sección larga. Se aprieta el padding vertical del panel y el
   aire entre badge / título / bajada / fila de precio. */
@media (max-width:900px) {
  .am-carousel--compact .am-carousel__slide > .am-featured--foto {
    padding-block: .85rem 1.1rem;
  }

  /* Sin badge en mobile: comprime el bloque de tres filas a dos —
     título arriba, precio + botón abajo. En desktop se mantiene. */
  .am-carousel--compact .am-featured--foto .am-featured__badge {
    display: none;
  }

  .am-carousel--compact .am-featured--foto h2 {
    margin-bottom: .3rem;
  }

  /* Sin bajada en mobile: en una pantalla angosta suma una línea (y su
     aire) al panel de color sin aportar información que el título y el
     botón no den ya. En desktop sí se mantiene, donde hay lugar. */
  .am-carousel--compact .am-featured--foto .am-featured__desc {
    display: none;
  }

  /* El precio ya no tiene padding propio (ver abajo), así que el aire
     hasta el botón lo da el gap de la fila. */
  .am-carousel--compact .am-featured--foto .am-featured__price-row {
    margin-bottom: 0;
    gap: 1rem;
  }

  /* El precio va como TEXTO, no como píldora: con fondo blanco y borde
     redondeado quedaba igual que "Ver el producto" y competía con él,
     como si hubiera dos botones. El único elemento con forma de píldora
     tiene que ser el botón — mismo criterio en mobile y desktop (ver
     el bloque @media min-width:901px más abajo). */
  .am-carousel--compact .am-featured--foto .am-featured__price {
    background: none;
    border-radius: 0;
    padding: 0;
    /* Blanco (no fucsia): sobre el panel de color el fucsia era legible
       sólo gracias al fondo blanco que ahora no está. A 1.2rem y 700 el
       texto entra en el umbral de "texto grande" de accesibilidad, donde
       el blanco sobre el fucsia sí tiene contraste suficiente. */
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
  }
}

/* Desktop: al revés que en mobile, acá el contenido quedaba chico para el
   panel. Se agranda la tipografía y los botones, y se le da aire propio
   al bloque de texto (padding del contenido, no más alto del panel). */
@media (min-width:901px) {
  /* Ancho real disponible dentro del panel de color: desde donde arranca
     el `.am-wrap` (que va centrado) hasta el corte, menos un respiro para
     que el texto no llegue pegado a la costura. Con un `vw` fijo quedaba
     bien solo en pantallas anchas y demasiado angosto en las medianas. */
  /* Sin padding vertical: la foto llega hasta el borde de arriba y el de
     abajo del slide, sin bandas de color. El aire alrededor del texto lo
     da el centrado vertical, no el padding. */
  .am-carousel--compact .am-carousel__slide > .am-featured--foto {
    padding-block: 0;
  }

  /* `max-width` y NO `width`: la columna tiene que medir lo que mide su
     contenido (así el par texto+foto se centra sin espacio muerto entre
     medio). El tope de 34rem sólo evita que un título largo se estire en
     una línea interminable. */
  .am-carousel--compact .am-featured--foto .am-featured__info {
    max-width: 34rem;
    padding-block: .6rem;
  }

  .am-carousel--compact .am-featured--foto .am-featured__badge {
    font-size: .74rem;
    padding: .4em 1.05em;
    margin-bottom: .55rem;
  }

  .am-carousel--compact .am-featured--foto h2 {
    font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.1rem);
    margin-bottom: .3rem;
  }

  .am-carousel--compact .am-featured--foto .am-featured__desc {
    font-size: .95rem;
    margin-bottom: .85rem;
  }

  .am-carousel--compact .am-featured--foto .am-featured__price-row {
    gap: 1rem;
    margin-bottom: 0;
  }

  /* Mismo criterio que en mobile: el precio es texto simple en bold, sin
     cápsula ni fondo — "Ver el producto" queda como el único elemento
     con forma de píldora de la fila, en los dos breakpoints. */
  .am-carousel--compact .am-featured--foto .am-featured__price {
    height: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 700;
  }

  .am-carousel--compact .am-featured--foto .am-featured__cta .am-btn {
    height: 2.5rem;
    font-size: .92rem;
    padding: .55em 1.4em;
    /* Sin esto el texto del botón se parte en dos líneas cuando el panel
       se angosta, y el botón se deforma contra su alto fijo. */
    white-space: nowrap;
  }
}

/* --- Formulario de suscripción a novedades (banner de la Tienda) ---
   Markup propio del tema, no el del plugin: campo + botón EN LÍNEA, con
   las mismas píldoras que el resto de los CTA del carrusel. Ver
   inc/suscripcion.php. --- */
.am-susc {
  margin: 0;
  /* No se estira más allá del bloque de texto del banner. */
  max-width: 34rem;
  /* Chrome infla por su cuenta el tamaño de letra de algunos controles
     (text autosizing) y con el botón acá adentro lo llevaba de 15px a
     24px, lo que hacía que no entrara al lado del campo. Esto lo apaga
     sólo dentro del formulario. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.am-susc__row {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* En pantallas angostas el botón baja debajo del campo en vez de
     apretarse hasta ser ilegible. */
  flex-wrap: wrap;
}

/* Campo transparente con borde blanco, no relleno: el botón ya es una
   píldora blanca sólida, y si el campo también lo fuera los dos se leerían
   como dos botones. Así se distinguen sin salirse de la paleta del panel. */
.am-susc__input {
  flex: 1 1 12rem;
  min-width: 0;
  height: 2.9rem;
  padding: 0 1.2em;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-size: 1rem;
  transition: border-color .15s ease, background .15s ease;
}

.am-susc__input::placeholder {
  color: rgba(255, 255, 255, .8);
}

.am-susc__input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* Mismo alto que el campo, para que la fila quede pareja. Va con doble
   clase (`.am-susc .am-susc__btn`) para ganarle a `.am-btn`, que también
   define font-size y padding. */
.am-susc .am-susc__btn {
  flex: 0 0 auto;
  height: 2.9rem;
  padding: 0 1.3em;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
}

.am-susc__btn[disabled] {
  opacity: .7;
  cursor: default;
}

/* Trampa anti-bot: tiene que estar en el DOM y ser rellenable por un bot,
   pero invisible para una persona. `display:none` no sirve — muchos bots
   lo detectan y saltean el campo. */
.am-susc__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Vacío no ocupa NADA: sin margen ni alto reservado. Antes reservaba
   ~1.2em para que el banner no saltara al aparecer el mensaje, pero eso
   dejaba a este slide con un espacio muerto abajo que el otro no tenía, y
   los dos banners se veían desparejos. El salto ahora ocurre una sola vez,
   después de que la persona ya hizo clic. */
.am-susc__msg {
  margin: 0;
  font-size: .92rem;
  font-weight: 500;
  color: #fff;
}

/* El aire de arriba aparece recién cuando hay algo que decir. */
.am-susc.is-ok .am-susc__msg,
.am-susc.is-error .am-susc__msg {
  margin-top: .7rem;
}

/* El mensaje de error se distingue del de éxito por algo más que el texto
   (no todo el mundo distingue colores): además del tono, lleva un ícono. */
.am-susc.is-error .am-susc__msg::before {
  content: "⚠ ";
}

.am-susc.is-ok .am-susc__msg::before {
  content: "✓ ";
}

/* --- Etiqueta del cotizador de envío (ficha de producto) ---
   El plugin de Andreani sólo dibuja una burbuja con su logo; el texto que
   trae aparece únicamente como tooltip al pasar el mouse, así que en
   celular el ícono quedaba sin explicación. Ver inc/cotizador-envio.php.
   La etiqueta va con la tipografía de interfaz del sitio (NeulisAlt, la
   misma de botones y chips) y la tinta general, para que no se lea como
   una pieza suelta del plugin. --- */
/* Burbuja y etiqueta en un mismo flex: el centrado vertical sale exacto.
   Con la etiqueta suelta al lado quedaba 6px más abajo que el ícono. */
.am-envio {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.5em 0;
}

/* El aire lo da el contenedor; si no, se suma al del propio widget. */
.am-envio .andreani-calc-widget {
  margin-block: 0;
}

/* Ahora es un `<button>` (abre el cotizador igual que el ícono), así que se
   le sacan los estilos que el navegador le pone por defecto y queda viéndose
   como el texto de siempre. El subrayado al pasar el mouse es lo que avisa
   que se puede clickear. */
.am-envio-label {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--am-tinta);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.am-envio-label:hover {
  text-decoration-color: currentColor;
}

.am-envio-label:focus-visible {
  outline: 2px solid var(--am-tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Al abrirse el cotizador, la burbuja se oculta y en su lugar aparece el
   panel con el campo de código postal: ahí la etiqueta ya no acompaña a
   nada y sobra. */
.am-envio:has(.andreani-calc-widget--expanded) .am-envio-label {
  display: none;
}

/* --- Cabecera de cada categoría --- */
.am-shop-cat {
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}

.am-shop-cat:first-of-type {
  margin-top: 0;
}

/* Centrado horizontal (antes alineado a la izquierda): la sección de
   categorías ahora comparte el naranja del hero (ver tienda-archive.php)
   y se lee mejor como bloque centrado, en vez de pegado al margen
   izquierdo contra tanto espacio vacío alrededor. */
.am-shop-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 255, 255, .3);
}

.am-shop-cat__head h2 {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  margin: 0;
}

.am-shop-cat__count {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: .8rem;
  color: #6a6472;
  background: var(--am-rosa);
  padding: .3em .9em;
  border-radius: 999px;
}

/* Color claro: antes era texto oscuro sobre "papel" (fondo claro); ahora
   esta sección es naranja, necesita el mismo tratamiento de bajada clara
   que el resto de los heroes de fondo sólido. */
/* Blanco, con el MISMO tratamiento que la bajada del hero: peso extra y
   sombra suave. Antes iba en terracota (por contraste), pero el hero de
   arriba ya había pasado a blanco y los dos textos quedaban de distinto
   color sobre la misma franja naranja continua.
   Sobre `--am-naranja` el blanco da 2,82:1 — la sombra no cambia ese
   número (WCAG no cuenta sombras) pero despega el trazo del fondo y hace
   la lectura mucho más cómoda. Es la misma decisión, ya tomada, que en el
   hero: ver `.am-shop-hero .am-hero__lead`. */
.am-shop-cat__desc {
  color: #fff;
  font-weight: 500;
  text-shadow: var(--am-sombra-texto-naranja);
  margin: -1rem auto 1.6rem;
  max-width: 60ch;
  text-align: center;
}

/* --- Grilla de productos (salida del shortcode [products]) --- */
.am-shop ul.products {
  display: grid !important;
  /* auto-fit (no auto-fill): con pocas piezas, las columnas vacías
     colapsan a 0 en vez de quedar reservadas a ancho completo — recién
     así `justify-content:center` de abajo puede centrar de verdad un
     catálogo con 1-2 productos, en vez de "centrar" un set de tracks
     que ya ocupaba el 100% del ancho igual. Tope de 360px (no `1fr`
     libre): si no, una categoría con una sola pieza (ej. "Ediciones
     Ilustradas") estira esa única tarjeta a todo el ancho del wrap. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.am-shop ul.products::before,
.am-shop ul.products::after {
  content: none !important;
}

.am-shop ul.products li.product {
  background: #fff;
  border-radius: var(--am-radius-card);
  box-shadow: var(--am-shadow-sm);
  padding: 1.1rem 1.1rem 1.4rem;
  text-align: center;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.am-shop ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--am-shadow);
}

.am-shop ul.products li.product a {
  text-decoration: none;
  color: var(--am-tinta);
}

.am-shop ul.products li.product img {
  border-radius: 18px;
  margin: 0 auto .9rem;
  background: var(--am-verde-agua-cl);
}

.am-shop ul.products li.product .woocommerce-loop-product__title {
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .2rem 0 .1rem;
  color: var(--am-tinta);
}

.am-shop ul.products li.product .price {
  display: block;
  color: var(--am-fucsia);
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: .9rem;
}

.am-shop ul.products li.product .price del {
  color: #a49eab;
  font-weight: 400;
  margin-right: .4em;
}

.am-shop ul.products li.product .button {
  display: inline-block;
  background: var(--am-naranja);
  color: #fff;
  border-radius: 999px;
  padding: .6em 1.4em;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 600;
  text-decoration: none;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease;
}

.am-shop ul.products li.product .button:hover {
  background: var(--am-naranja-osc);
  transform: translateY(-2px);
}

.am-shop ul.products li.product .added_to_cart {
  display: block;
  margin-top: .5rem;
  font-family: "NeulisAlt", sans-serif;
  color: var(--am-fucsia);
  text-decoration: none;
  font-size: .9rem;
}

/* --- Badge "Nuevo" sobre la Libreta Ilustrada (ID 43): señala el lanzamiento
   reciente. Detalle estático (sin animación), pill con la identidad de ArteMure.
   Aparece en la tarjeta de la grilla y sobre la galería del producto individual. --- */
.am-shop ul.products li.product.post-43,
body.postid-43 .woocommerce-product-gallery {
  position: relative;
}

.am-shop ul.products li.product.post-43::before,
body.postid-43 .woocommerce-product-gallery::before {
  content: "Nuevo";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--am-fucsia);
  color: #fff;
  font-family: "NeulisAlt", sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  padding: .34em .9em;
  border-radius: 999px;
  box-shadow: var(--am-shadow-sm);
  rotate: -5deg;
}

.am-shop ul.products li.product.post-43::before {
  top: 1.3rem;
  left: 1.3rem;
}

body.postid-43 .woocommerce-product-gallery::before {
  top: 1rem;
  left: 1rem;
}

.am-shop .woocommerce-info,
.am-shop .woocommerce-no-products-found {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--am-shadow-sm);
  padding: 1rem 1.3rem;
  color: #4a4453;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px) {
  .am-hero .am-wrap {
    grid-template-columns: 1fr;
  }

  .am-hero__media {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    order: -1;
  }

  .am-patas__grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .am-pata {
    padding-top: 2.8rem;
  }

  .am-footer__wrap {
    grid-template-columns: 1fr 1fr;
  }

  /* Páginas internas */
  .am-zz__row {
    grid-template-columns: 1fr;
  }

  .am-zz__row:nth-child(even) .am-zz__media {
    order: 0;
  }

  .am-zz__media {
    max-width: 460px;
  }

  .am-worktypes {
    grid-template-columns: 1fr;
  }

  .am-story__row {
    grid-template-columns: 1fr;
  }

  .am-story__row:nth-child(even) .am-story__media {
    order: 0;
  }

  /* 2 columnas: las fotos de a dos por fila y la tarjeta de texto a lo ancho. */
  .am-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .am-next {
    grid-template-columns: auto 1fr;
  }

  .am-next__cta {
    grid-column: 1 / -1;
  }

  .am-contact-grid {
    grid-template-columns: 1fr;
  }

  .am-featured .am-wrap {
    grid-template-columns: 1fr;
  }

  .am-featured__media {
    max-width: 420px;
    margin-inline: auto;
    order: -1;
  }

  /* El cartel "Próximamente" cuelga la mitad afuera del borde inferior
     del marco (ver .am-hero-tag: bottom:0 + translateY(50%)). En mobile
     el marco pasa arriba del texto (order:-1 acá arriba) y sin este
     margen el cartel colgante tapa el título/texto de abajo. Margen, no
     padding: así no se mueve el propio borde inferior del marco, que es
     el punto de anclaje del cartel. */
  .am-upcoming-media {
    margin-bottom: 4.6rem;
  }

  .am-presupuesto-form {
    grid-template-columns: 1fr;
  }

  .am-thero .am-wrap {
    grid-template-columns: 1fr;
  }

  .am-thero__media {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Mismo flex, apilado: en una columna angosta el paquete no entra al
     costado del texto. Sigue siendo el mismo contenedor y el mismo `gap`
     (que acá separa verticalmente), sin cambiar de mecanismo. */
  .am-shop-hero .am-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 1.8rem;
    /* Vuelve al ancho completo del contenedor: apilados, `fit-content`
       dejaría la columna del ancho del elemento más ancho. */
    width: min(100% - 2.4rem, var(--am-wrap));
  }

  .am-shop-hero .am-hero__text {
    flex: 0 0 auto;
  }

  /* Centrado y algo más grande que en desktop: acá tiene el ancho de la
     pantalla para él solo. */
  .am-shop-hero__deco {
    flex: 0 0 auto;
    width: min(210px, 55%);
    margin-inline: auto;
  }

  .am-sobre-intro {
    grid-template-columns: 1fr;
  }

  .am-sobre-intro__media {
    order: -1;
    margin-inline: auto;
  }

  .am-sobre-home {
    grid-template-columns: 1fr;
  }

  .am-sobre-home__media {
    order: -1;
    margin-inline: auto;
  }

  .am-tw-row,
  .am-tw-row--rev {
    grid-template-columns: 1fr;
  }

  .am-tw-row__media {
    order: -1;
    margin-inline: auto;
  }

  .am-reservar-row {
    grid-template-columns: 1fr;
  }

  /* La ilustración grande de la columna de texto (ver `.am-form-art`
     más arriba) no entra bien en mobile una vez que el form pasa a
     una sola columna — se oculta. */
  .am-form-art {
    display: none;
  }

}

/* Recortes decorativos: sólo en desktop de verdad. En tablet (aunque el
   layout general ya cambió a "ancho" a los 901px de arriba) los
   `.am-cut` quedan mal ubicados/proporcionados — necesitan más aire
   del que hay hasta 1024px. Por eso este breakpoint es independiente
   y más alto que el de arriba: el nombre de la clase ("hide-mobile")
   quedó desactualizado, pero cambiarlo implicaría tocar la clase en
   todas las páginas — se documenta acá en vez de renombrarla. */
@media (max-width:1024px) {
  .am-cut.hide-mobile,
  .am-blob.hide-mobile,
  .am-hero-sit.hide-mobile,
  .am-pagehead__art.hide-mobile {
    display: none;
  }
}

/* Recortes puntuales que, por su posición, empiezan a superponerse con
   contenido real (un botón, un título, el cuadro de una foto) antes de
   llegar a los 1024px de arriba — cada uno mide en un punto distinto
   porque depende de su propio ancho/posición y de qué elemento tiene
   al lado. Umbral calculado midiendo en vivo dónde el recorte y el
   contenido dejan de tocarse (con margen de seguridad), no a ojo. */
@media (max-width:1750px) {
  .am-cut--hero-inicio-sit {
    display: none;
  }
}

@media (max-width:1750px) {
  .am-cut--murales-hero-pincel {
    display: none;
  }
}

@media (max-width:1950px) {
  .am-cut--sobremi-hero-manito {
    display: none;
  }
}

@media (max-width:1950px) {
  .am-cut--sobremi-historia-jardin {
    display: none;
  }
}

@media (max-width:640px) {
  .am-form__grid {
    grid-template-columns: 1fr;
  }

  .am-figstrip {
    grid-template-columns: 1fr;
  }

  .am-figstrip img:nth-child(2) {
    transform: none;
  }

  .am-next {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .am-next__date {
    display: flex;
    gap: .5ch;
    justify-content: center;
    align-items: baseline;
  }

  .am-datelist__item {
    grid-template-columns: auto 1fr;
  }

  .am-datelist__cupo {
    grid-column: 1 / -1;
  }

  .am-gallery {
    grid-template-columns: 1fr;
  }

  .am-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--am-papel);
    padding: 1rem 1.4rem 1.6rem;
    gap: .4rem;
    border-bottom: 2px solid rgba(38, 33, 46, .08);
    transform: translateY(-140%);
    transition: transform .25s ease;
    box-shadow: var(--am-shadow);
  }

  .am-nav.is-open {
    transform: translateY(0);
  }

  .am-nav a {
    padding: .7rem .2rem;
    border-bottom: 1px solid rgba(38, 33, 46, .07);
  }

  .am-nav__cta {
    margin: .6rem 0 0;
    justify-content: center;
  }

  .am-nav .am-nav__cta a {
    padding: 0;
    border-bottom: 0;
  }

  /* que no parezcan filas separadas */
  .am-burger {
    display: flex;
  }

  .am-band {
    grid-template-columns: auto 1fr;
  }

  .am-band__cta {
    grid-column: 1 / -1;
  }

  .am-footer__wrap {
    grid-template-columns: 1fr;
  }

  .am-cut {
    transform: scale(.8);
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
  }
}

/* =====================================================================
   TIPOGRAFÍA +50% SOLO EN DESKTOP (>900px)
   Pedido de la dueña: agrandar estos textos un 50% en desktop, dejando
   el tamaño original en mobile (donde ya se veían bien). El título del
   héroe (.am-hero__title) queda EXCLUIDO a propósito.
   ===================================================================== */
@media (min-width:901px) {
  .am-eyebrow {
    font-size: 1.23rem;
  }

  .am-lead {
    font-size: 1.83rem;
  }

  .am-hero__lead {
    font-size: 1.95rem;
  }

  .am-pagehead__lead {
    font-size: 1.88rem;
  }

  .am-lede {
    font-size: 2.85rem;
  }

  .am-pagehead h1 {
    font-size: 5.4rem;
  }

  .am-banner h1 {
    font-size: 5.7rem;
  }

  .am-pata h3 {
    font-size: 2.25rem;
  }

  .am-pata p {
    font-size: 1.6rem;
  }

  .am-zz__body p {
    font-size: 1.6rem;
  }

  .am-worktype h3 {
    font-size: 1.72rem;
  }

  .am-worktype p {
    font-size: 1.44rem;
  }

  .am-step h3 {
    font-size: 1.72rem;
  }

  .am-step p {
    font-size: 1.44rem;
  }

  .am-faq__item h3 {
    font-size: 1.58rem;
  }

  .am-faq__item p {
    font-size: 1.5rem;
  }

  .am-story p {
    font-size: 1.59rem;
  }

  .am-band__body h3 {
    font-size: 1.8rem;
  }

  .am-band__body p {
    font-size: 1.42rem;
  }

  .am-agenda__note {
    font-size: 1.42rem;
  }

  .am-next__body h3 {
    font-size: 2.55rem;
  }

  .am-next__body p {
    font-size: 1.6rem;
  }

  .am-datelist__item p {
    font-size: 1.42rem;
  }

  .am-tienda__intro {
    font-size: 1.6rem;
  }

  /* Barra de navegación completa (links + botón "Tienda").
     Bajado de 1.5rem a 1.25rem (−4px) para que el menú no se vaya a dos
     líneas al ensancharse el CTA "Tienda" (texto + carrito). */
  .am-nav a {
    font-size: 1.25rem;
  }

  /* Botones de marca (píldoras: hero, secciones, agenda, etc.) */
  .am-btn {
    font-size: 1.53rem;
  }

  /* Botón de Arrepentimiento del footer: mismo tamaño que `.am-footer a`
     acá abajo (no el 1.53rem de los botones píldora — ya no es un botón). */
  .am-footer .am-footer__arrep {
    font-size: 1.4rem;
  }

  /* Links de texto (CTAs "Ver la tienda →", etc. + links del pie) */
  .am-pata__link {
    font-size: 1.6rem;
  }

  .am-footer a {
    font-size: 1.4rem;
  }

  /* Logo del encabezado */
  .am-header__logo img {
    height: 68px;
  }

  /* Pills / chips / badges */
  .am-zz__meta {
    font-size: 1.23rem;
  }

  .am-featured__badge {
    font-size: 1.13rem;
  }

  .am-featured__price {
    font-size: 1.65rem;
  }

  .am-shop-cat__count {
    font-size: 1.2rem;
  }

  .am-next__tag {
    font-size: 1.2rem;
  }

  .am-datelist__cupo {
    font-size: 1.23rem;
  }

  p.stock {
    font-size: 1.28rem;
  }

  .wp-block-woocommerce-product-meta .wp-block-post-terms a {
    font-size: 1.28rem;
  }

  /* Labels de formularios */
  .am-form label {
    font-size: 1.28rem;
  }

  .am-contact-card .am-field label {
    font-size: 1.28rem;
  }

  /* Párrafo del hero de Encargos + panel "Trabajo la idea de cada local…" */
  .am-banner p {
    font-size: 1.65rem;
  }

  /* Textos pequeños del footer */
  .am-footer p {
    font-size: 1.42rem;
  }

  .am-footer h4 {
    font-size: 1.58rem;
  }

  .am-footer__bottom {
    font-size: 1.28rem;
  }

  /* Canales de comunicación (página de Contacto) */
  .am-contact-item h3 {
    font-size: 1.5rem;
  }

  .am-contact-item p {
    font-size: 1.42rem;
  }

  /* --- TIENDA (bloques WooCommerce): breadcrumbs y párrafos --- */
  .wc-block-breadcrumbs,
  .woocommerce-breadcrumb {
    font-size: 1.35rem !important;
  }

  .am-shop-head p {
    font-size: 1.6rem;
  }

  .am-shop-cat__desc {
    font-size: 1.5rem;
  }

  .am-featured__desc {
    font-size: 1.6rem;
  }

  /* Pestañas de producto (Descripción / Reseñas) */
  .woocommerce-tabs ul.tabs li a {
    font-size: 1.6rem !important;
  }

  .woocommerce-tabs .panel {
    font-size: 1.5rem;
  }

  .woocommerce-tabs .panel h2 {
    font-size: 2.25rem;
  }

  /* Detalles de producto en el carrito */
  .wc-block-cart-items__header {
    font-size: 1.23rem !important;
  }

  .wc-block-components-product-name {
    font-size: 1.5rem !important;
  }

  .wc-block-cart-item__prices .wc-block-components-product-price,
  .wc-block-cart-item__total .wc-block-components-product-price {
    font-size: 1.4rem !important;
  }

  .wc-block-components-product-metadata {
    font-size: 1.3rem !important;
  }

  /* Contenedor de totales (carrito + checkout) */
  .wc-block-cart__totals-title,
  .wc-block-checkout__order-summary-heading {
    font-size: 1.6rem !important;
  }

  .wc-block-components-totals-item__label,
  .wc-block-components-totals-item__value {
    font-size: 1.4rem !important;
  }

  .wc-block-components-totals-item.wc-block-components-totals-footer-item {
    font-size: 1.72rem !important;
  }

  .wc-block-components-order-summary-item__description,
  .wc-block-components-order-summary-item__total-price {
    font-size: 1.4rem !important;
  }

  /* La card "Resumen del pedido" del checkout (desktop) es angosta
     (~360px) y reusa las mismas clases que la lista de productos del
     Carrito, pensada para un espacio mucho más ancho — de ahí el
     tamaño de fuente de arriba. Achicado sólo acá, con precios reales
     en pesos argentinos (que pueden llegar a acercarse al largo del
     precio de prueba actual) el nombre, precio y descripción tienen
     que convivir sin desbordar ni superponerse. */
  .wc-block-components-order-summary-item .wc-block-components-product-name {
    font-size: 1.05rem !important;
  }

  .wc-block-components-order-summary-item__description,
  .wc-block-components-order-summary-item__total-price {
    font-size: 1rem !important;
  }

  .wc-block-components-panel__button {
    font-size: 1.4rem !important;
  }

  /* Card de la grilla de productos (nombre, precio/"descripción" y botón) */
  .am-shop ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.65rem;
  }

  .am-shop ul.products li.product .price {
    font-size: 1.6rem;
  }

  .am-shop ul.products li.product .button {
    font-size: 1.43rem;
  }

  /* Talleres — grupos recurrentes */
  .am-nivel__head h3 {
    font-size: 2.4rem;
  }

  .am-nivel__head span {
    font-size: 1.42rem;
  }

  .am-group__day {
    font-size: 2.1rem;
  }

  .am-group__time {
    font-size: 1.6rem;
  }

  .am-group__estado {
    font-size: 1.28rem;
  }

  .am-group__closed {
    font-size: 1.42rem;
  }
}
/* =====================================================================
   TIENDA — RESULTADOS DE BÚSQUEDA (plantilla product-search-results)
   ===================================================================== */

/* Buscador de productos: campo + botón en una fila que se apila sola en
   pantallas angostas. Se usa en la Tienda, en las páginas de categoría y
   en la cabecera de los resultados. */
.am-busca {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  /* El margen de abajo va en la regla base y no sólo en la variante
     centrada: en las páginas de categoría el buscador se usa sin esa
     variante, y la grilla de productos quedaba pegada contra el campo. */
  margin: 1.2rem 0 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  max-width: 30rem;
}

/* En la cabecera de resultados, `.am-shop-head` cierra sin padding abajo
   (lo pensado para que el título pegue con el catálogo). Con el buscador
   adentro, sin este margen el campo queda cortado por el borde de la
   sección naranja de abajo. */
.am-shop-head .am-busca {
  margin-bottom: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

.am-busca__campo {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--am-tinta);
  background: #fff;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 999px;
  /* Misma altura que el botón, para que el par quede parejo. */
  height: 44px;
  padding: 0 1.2em;
  /* Chrome en Android agranda por su cuenta el texto de los campos si no
     se le dice que no (mismo caso que el form de suscripción). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.am-busca__campo:focus {
  outline: none;
  border-color: var(--am-azul);
}

/* Mismo tamaño que los chips de opción del sitio (44px de alto, letra de
   1rem): `.am-btn` viene más grande porque está pensado para los CTA
   principales, y al lado del campo de búsqueda pesaba de más. Los 44px se
   mantienen en todas las pantallas: es la medida de toque cómoda en un
   celular. */
.am-busca .am-busca__btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: .55em 1.2em;
  font-size: 1rem;
  background: var(--am-azul);
  color: #fff;
}

.am-busca .am-busca__btn:hover {
  background: var(--am-azul-osc);
}

/* Búsqueda sin resultados: en vez de dejar la sección vacía, un mensaje
   sobre papel con la salida a la tienda completa. */
.am-shop-vacio {
  background: var(--am-papel);
  border-radius: 22px;
  padding: clamp(1.8rem, 1.4rem + 2vw, 3rem);
  text-align: center;
  box-shadow: var(--am-shadow-sm);
  /* Sin tope se estira a todo el ancho del wrap y queda una caja enorme
     con dos líneas de texto perdidas en el medio. */
  max-width: 34rem;
  margin-inline: auto;
}

.am-shop-vacio p {
  color: var(--am-tinta);
  margin: 0 0 1.2rem;
}

.am-shop-vacio p:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   404 — PÁGINA NO ENCONTRADA (ver patterns/404.php)
   ===================================================================== */
.am-404__body {
  max-width: 46rem;
}

.am-404 .am-lead {
  margin-inline: auto;
}

.am-404__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* =====================================================================
   MI CUENTA (plantilla page-my-account)
   ===================================================================== */

/* WooCommerce arma esta página con su propio markup (login, registro y
   panel de pedidos). Acá sólo se la acomoda al lenguaje del sitio:
   campos redondeados y botones con el estilo de marca. */
/* Página utilitaria: menos aire arriba que una sección de contenido, para
   que el título no arranque tan lejos del encabezado. */
.am-cuenta {
  padding-block: clamp(2.4rem, 1.9rem + 2.2vw, 4rem);
}

/* WooCommerce maqueta esta página con floats: el menú a la izquierda en una
   columna del 30% y el contenido a la derecha. En esa columna angosta los
   botones caen uno por línea y queda una escalera larga. Acá se desarma el
   float: el menú pasa a ser una fila de píldoras arriba, y el contenido usa
   todo el ancho. */
.am-cuenta .woocommerce-MyAccount-navigation,
.am-cuenta .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}

.am-cuenta .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* `li a` (y no sólo `a`) para ganarle al subrayado global de enlaces. */
.am-cuenta .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  color: var(--am-tinta);
  background: #fff;
  border: 2px solid rgba(38, 33, 46, .12);
  border-radius: 999px;
  padding: .55em 1.2em;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.am-cuenta .woocommerce-MyAccount-navigation li a:hover,
.am-cuenta .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--am-azul);
  border-color: var(--am-azul);
  color: #fff;
  /* WooCommerce subraya la solapa activa con la misma especificidad que
     esta regla; se repite acá para ganarle por orden en la hoja. */
  text-decoration: none;
}

.am-cuenta .woocommerce form.login,
.am-cuenta .woocommerce form.register,
.am-cuenta .woocommerce form.lost_reset_password {
  background: #fff;
  border: 2px solid rgba(38, 33, 46, .1);
  border-radius: 22px;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
}

.am-cuenta input[type="text"],
.am-cuenta input[type="email"],
.am-cuenta input[type="tel"],
.am-cuenta input[type="password"],
.am-cuenta select,
.am-cuenta textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--am-tinta);
  background-color: #fff;
  border: 2px solid rgba(38, 33, 46, .14);
  border-radius: 14px;
  padding: .6em .9em;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.am-cuenta input:focus,
.am-cuenta select:focus,
.am-cuenta textarea:focus {
  outline: none;
  border-color: var(--am-azul);
}

.am-cuenta .woocommerce button.button,
.am-cuenta .woocommerce a.button,
.am-cuenta .woocommerce input.button {
  font-family: "NeulisAlt", "Poppins", sans-serif;
  font-weight: 600;
  background: var(--am-azul);
  color: #fff;
  border-radius: 999px;
  padding: .8em 1.6em;
  border: 2px solid transparent;
  transition: background-color .15s ease;
}

.am-cuenta .woocommerce button.button:hover,
.am-cuenta .woocommerce a.button:hover,
.am-cuenta .woocommerce input.button:hover {
  background: var(--am-azul-osc);
  color: #fff;
}