/* ============================================================================
   EL BAÚL DE LOS DESEOS — SISTEMA "BOTICA"
   Fase 1 de 4: fichas (tokens) y capa base.

   POR QUÉ ES CLARO, Y NO ES UNA CUESTIÓN DE GUSTO
   -----------------------------------------------
   Se midió el fondo de las 35 fotos de producto que sirve la tienda: 21 están
   compuestas sobre #efe9e7 y las otras 14 son fotos de mostrador de tono medio.
   Sobre el fondo #090609 anterior, esas 21 eran rectángulos blancos flotando en
   negro. La superficie de este sistema (--c-lino, #F2EDE9) es deliberadamente
   la misma familia que el fondo de las fichas: el producto deja de venir en una
   caja y pasa a apoyarse en la página.

   Y resuelve el contraste de raíz. Los 28 fallos AA medidos el 10-ago venían
   todos del mismo sitio: texto oscuro sobre el extremo oscuro de un degradado
   dorado. Con tinta sobre lino, la relación mínima del sistema es 4,9:1.

   LAS DOS TINTAS DE COLOR TIENEN TRABAJO, NO ADORNO
   -------------------------------------------------
   --c-granada  = actuar   (precio, botón principal, lo que cobra)
   --c-salvia   = estar a salvo (empaque neutro, pago protegido, envío discreto)
   Nunca al revés. Si un elemento no pide una acción ni promete seguridad, va en
   tinta o en neutro.

   REGLAS DE ESTA HOJA
   -------------------
   1. Es la ÚLTIMA que se carga. Puede reasignar lo que definieron las otras.
   2. Nada de literales fuera del bloque :root. Si hace falta un valor nuevo,
      se añade una ficha; no se escribe el número donde se usa.
   3. Sustituye a luxury.css y a refinado.css, que dejan de cargarse. No se
      borran: quedan en disco por si hay que volver atrás.
   ========================================================================= */

:root {
  /* --- LOS CINCO COLORES ------------------------------------------------ */
  --c-lino:        #F2EDE9;   /* superficie de la página */
  --c-papel:       #FCFAF9;   /* tarjetas y superficies elevadas */
  --c-tinta:       #191518;   /* texto */
  --c-granada:     #A3123F;   /* acción */
  --c-salvia:      #2F5347;   /* confianza */

  /* --- DERIVADOS (no son colores nuevos: son los cinco en otra intensidad) */
  --c-lino-hondo:  #E7DFDA;   /* superficie hundida, separadores gruesos */
  --c-tinta-2:     #4A434A;   /* texto secundario   — 8,3:1 sobre lino */
  --c-tinta-3:     #6E656A;   /* texto terciario    — 4,9:1 sobre lino */
  --c-granada-alt: #86072F;   /* granada al pasar el ratón */
  --c-granada-piel:#F7E4E9;   /* fondo suave de granada, para distintivos */
  --c-salvia-alt:  #244137;
  --c-salvia-piel: #E4EBE7;
  --c-linea:       rgba(25, 21, 24, .13);
  --c-linea-fuerte:rgba(25, 21, 24, .26);
  --c-velo:        rgba(25, 21, 24, .55);   /* fondos de diálogo */

  /* --- TIPOGRAFÍA ------------------------------------------------------- */
  /* Cero bytes: las dos familias ya están en el sistema operativo. El
     presupuesto de descarga se gasta en quitar Font Awesome, no en fuentes. */
  --f-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-texto:   Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Ocho pasos. Ni uno más. El suelo son 13px: antes había textos de 8,32px. */
  --f-xs:   .8125rem;                        /* 13px — el mínimo del sistema */
  --f-sm:   .875rem;                         /* 14 */
  --f-md:   1rem;                            /* 16 — cuerpo */
  --f-lg:   1.125rem;                        /* 18 */
  --f-xl:   1.375rem;                        /* 22 */
  --f-2xl:  clamp(1.75rem, 2.6vw, 2.25rem);
  --f-3xl:  clamp(2.25rem, 4.2vw, 3.25rem);
  --f-4xl:  clamp(2.75rem, 6vw, 4.5rem);

  /* Tres pesos de texto y dos de display. Antes había nueve, con 650/750/850
     elegidos a ojo uno por sitio. */
  --p-normal: 400;
  --p-medio:  500;
  --p-fuerte: 650;
  --p-display-normal: 400;
  --p-display-fuerte: 600;

  /* Tres interlineados. Antes había 28. */
  --i-apretado: 1.08;   /* titulares grandes */
  --i-medio:    1.35;   /* titulares pequeños, etiquetas */
  --i-suelto:   1.65;   /* párrafos */

  --tr-normal: 0;
  --tr-titular: -.02em;
  --tr-etiqueta: .14em;   /* versalitas */

  /* --- ESPACIO ---------------------------------------------------------- */
  --e-1:  4px;   --e-2:  8px;   --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
  --e-6: 32px;   --e-7: 48px;   --e-8: 64px;  --e-9: 96px;  --e-10:128px;

  /* --- FORMA ------------------------------------------------------------ */
  /* Tres radios. Antes había 26. */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-redondo: 999px;

  /* Tres sombras, todas del mismo tinte. Antes había 39 de siete tintes. */
  --s-1: 0 1px 2px rgba(25,21,24,.05), 0 2px 8px rgba(25,21,24,.04);
  --s-2: 0 2px 6px rgba(25,21,24,.05), 0 12px 28px rgba(25,21,24,.07);
  --s-3: 0 8px 20px rgba(25,21,24,.07), 0 32px 64px rgba(25,21,24,.11);

  /* --- MOVIMIENTO ------------------------------------------------------- */
  /* Tres duraciones, todas dentro de 150–300ms. Antes había 13, con una de 800. */
  --m-rapido: 150ms;
  --m-medio:  220ms;
  --m-lento:  300ms;
  --m-curva:  cubic-bezier(.2, .7, .3, 1);

  /* --- PROFUNDIDAD ------------------------------------------------------ */
  /* Seis niveles con nombre. Antes había 15 valores sueltos, incluidos
     9999, 10000 y un "1590 !important". */
  --z-base:     1;
  --z-pegado:   100;   /* cabecera */
  --z-flotante: 200;   /* dock */
  --z-velo:     300;   /* fondo de cajón/diálogo */
  --z-panel:    400;   /* cajón, diálogo */
  --z-aviso:    500;   /* toast, portón de edad */

  /* --- MEDIDAS ---------------------------------------------------------- */
  --ancho-contenedor: min(1180px, calc(100vw - var(--e-6)));
  --ancho-lectura: 62ch;
  --toque: 44px;       /* objetivo táctil mínimo */
}

/* ---------------------------------------------------------------------------
   AQUÍ HABÍA UN PUENTE DE ALIAS, Y SE RETIRÓ PORQUE NO SERVÍA.
   El primer intento redefinía desde aquí las variables de styles.css y
   catalogo.css confiando en cargar el último. Medido en la tienda real, el
   resultado fue: 30 tamaños de fuente, 48 interlineados, 9 pesos y 57
   elementos todavía en blanco puro. Aliasear variables no tokeniza nada
   cuando el 77 % de las declaraciones lleva el valor escrito a pelo.
   La conversión se hizo donde tenía que hacerse: en las hojas de origen.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   CAPA BASE
   =========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body,
body.home-luxury,
body.catalog-page,
body.checkout-page,
body.legal-page {
  background: var(--c-lino);
  color: var(--c-tinta);
  font-family: var(--f-texto);
  font-size: var(--f-md);
  font-weight: var(--p-normal);
  line-height: var(--i-suelto);
  -webkit-font-smoothing: antialiased;
}

/* El velo fijo de la portada anterior ocupaba toda la pantalla en z-index 9999
   por encima de TODO, incluidos los diálogos. Se retira. */
body.home-luxury::before { content: none; }

h1, h2, h3, .brand__word strong {
  font-family: var(--f-display);
  font-weight: var(--p-display-fuerte);
  line-height: var(--i-apretado);
  letter-spacing: var(--tr-titular);
  color: var(--c-tinta);
  text-wrap: balance;
  text-shadow: none;
}
h1 { font-size: var(--f-3xl); }
h2 { font-size: var(--f-2xl); }
h3 { font-size: var(--f-xl); line-height: var(--i-medio); }
h1 em, h2 em { font-style: normal; color: var(--c-granada); font-weight: var(--p-display-fuerte); }

p { line-height: var(--i-suelto); }
small { font-size: var(--f-xs); }

/* Ningún texto por debajo de 13px. Antes había siete tamaños entre 8,32 y
   11,84px, incluido un distintivo comercial de 9,9px que nadie podía leer. */
small, .eyebrow, figcaption, .product-badge, .catalog-badge,
.hero__proof span, .announcement span, .footer__bottom p, .legal-links {
  font-size: var(--f-xs);
}

.eyebrow {
  font-family: var(--f-texto);
  font-size: var(--f-xs);
  font-weight: var(--p-fuerte);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  color: var(--c-tinta-3);
  line-height: var(--i-medio);
}

a { color: var(--c-granada); }
hr { border: 0; border-top: 1px solid var(--c-linea); }

/* --- Foco: UNO solo, y visible en cualquier superficie -------------------
   Antes competían dos anillos —uno rosa de 3px al 45% en styles.css y uno
   dorado de 2px en refinado.css— y ganaba uno por orden de carga, no por
   decisión. Este va sobre todo, con un halo claro por detrás para que también
   se vea encima de granada o de una foto. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-granada);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px var(--c-papel);
}
/* Los cuatro enlaces del menú y el botón del detalle no tenían anillo. */
.main-nav a:focus-visible,
#modal-add-button:focus-visible,
.icon-button:focus-visible { outline: 2px solid var(--c-granada); outline-offset: 3px; }

::selection { background: var(--c-granada-piel); color: var(--c-tinta); }

/* ===========================================================================
   SUPERFICIES — lo que antes pintaban luxury.css y refinado.css
   =========================================================================== */

/* Barra de promesas: era texto oscuro sobre degradado dorado, 1,27:1.
   Ahora es la superficie de confianza y se lee. */
.announcement {
  background: var(--c-salvia);
  color: var(--c-salvia-piel);
  font-weight: var(--p-medio);
  letter-spacing: var(--tr-normal);
  border: 0;
}
.announcement i { color: var(--c-salvia-piel); opacity: .8; }

.site-header {
  background: color-mix(in srgb, var(--c-lino) 88%, transparent);
  border-bottom: 1px solid var(--c-linea);
  box-shadow: none;
  backdrop-filter: blur(14px);
  z-index: var(--z-pegado);
}
.header__inner { min-height: 76px; }
.main-nav a {
  font-family: var(--f-texto);
  font-size: var(--f-sm);
  font-weight: var(--p-medio);
  letter-spacing: var(--tr-normal);
  text-transform: none;
  color: var(--c-tinta-2);
}
.main-nav a:hover { color: var(--c-granada); }
.main-nav a::after { background: var(--c-granada); }

.cart-button {
  background: var(--c-papel);
  border: 1px solid var(--c-linea-fuerte);
  color: var(--c-tinta);
  box-shadow: none;
  min-height: var(--toque);
}
.cart-button b { background: var(--c-granada); color: var(--c-papel); }

/* --- Hero --------------------------------------------------------------- */
.hero { min-height: auto; border-bottom: 1px solid var(--c-linea); background: var(--c-lino); }
.hero__media {
  background-image:
    linear-gradient(90deg, var(--c-lino) 4%, color-mix(in srgb, var(--c-lino) 82%, transparent) 34%, transparent 66%),
    url('/img/hero.webp');
  background-position: 72% center;
  background-size: cover;
  filter: saturate(.72) contrast(.96) brightness(1.12);
  opacity: .85;
}
.hero__veil { background: linear-gradient(180deg, transparent 55%, var(--c-lino) 100%); }
.hero__copy { max-width: var(--ancho-lectura); padding: var(--e-9) 0 var(--e-9); }
.hero__copy::before {
  content: ""; display: block;
  width: var(--e-7); height: 2px;
  margin-bottom: var(--e-5);
  background: var(--c-granada);
}
.hero h1 { font-size: var(--f-4xl); }
.hero__lead {
  max-width: var(--ancho-lectura);
  color: var(--c-tinta-2);
  font-size: var(--f-lg);
  line-height: var(--i-suelto);
}
.hero__proof {
  margin-top: var(--e-6); padding-top: var(--e-5);
  border-top: 1px solid var(--c-linea);
}
.hero__proof span {
  color: var(--c-salvia);
  font-weight: var(--p-medio);
  background: none; border: 0;
}
.hero__proof span:not(:last-child)::after { background: var(--c-linea); }
.hero__proof i { color: var(--c-salvia); }

/* --- Tira de beneficios -------------------------------------------------- */
.benefit-strip { background: var(--c-papel); border-block: 1px solid var(--c-linea); }
.benefit-strip__grid article { padding-block: var(--e-7); }
.benefit-strip__grid article > span {
  font: var(--p-display-normal) var(--f-2xl)/1 var(--f-display);
  color: var(--c-granada);
  opacity: .35;
}
.benefit-strip strong { font-family: var(--f-display); color: var(--c-tinta); font-size: var(--f-lg); }
.benefit-strip p { color: var(--c-tinta-2); }

/* --- Secciones ----------------------------------------------------------- */
.catalog-section { padding-block: var(--e-9); background: var(--c-lino); }
.section-heading { border-bottom: 1px solid var(--c-linea); padding-bottom: var(--e-6); }
.section-heading > p { font-size: var(--f-md); color: var(--c-tinta-2); }
.section-heading h2, .experience h2, .assistant-cta h2, .faq-section h2 {
  font-size: var(--f-3xl);
  font-weight: var(--p-display-fuerte);
  letter-spacing: var(--tr-titular);
}

.catalog-toolbar {
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  padding: var(--e-3);
  border-radius: var(--r-md);
  box-shadow: var(--s-1);
}
.catalog-meta p { color: var(--c-tinta-3); font-size: var(--f-sm); }

.experience { background: var(--c-papel); border-block: 1px solid var(--c-linea); }
.experience__image { min-height: 520px; border: 1px solid var(--c-linea); box-shadow: var(--s-2); border-radius: var(--r-lg); }
.experience__copy { padding: var(--e-9) 0; }
.experience__copy p { color: var(--c-tinta-2); }
.steps li { border-bottom: 1px solid var(--c-linea); padding-block: var(--e-4); }
.steps li > span {
  border: 1px solid var(--c-granada);
  color: var(--c-granada);
  background: var(--c-papel);
  font-family: var(--f-display);
}
.steps p { color: var(--c-tinta-2); }

.assistant-cta__card {
  background: var(--c-salvia);
  border: 0;
  box-shadow: var(--s-2);
  border-radius: var(--r-lg);
}
.assistant-cta__card h2, .assistant-cta__card p { color: var(--c-salvia-piel); }
/* Sin opacidad: al 78 % sobre salvia medía 2,2:1. Si un texto necesita pesar
   menos, se baja de tamaño o de peso, no de opacidad. */
.assistant-cta__card .eyebrow { color: var(--c-salvia-piel); }
.assistant-cta__icon { background: var(--c-salvia-piel); color: var(--c-salvia); }

.faq-section { background: var(--c-lino); }
.faq-list details {
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-md);
}
.faq-list summary { color: var(--c-tinta); font-weight: var(--p-medio); min-height: var(--toque); }
.faq-list details p { color: var(--c-tinta-2); }
.faq__intro p { color: var(--c-tinta-2); }

.site-footer { background: var(--c-papel); border-top: 1px solid var(--c-linea); color: var(--c-tinta-2); }
.footer__grid h3 { color: var(--c-tinta); font-family: var(--f-texto); font-size: var(--f-sm); font-weight: var(--p-fuerte); letter-spacing: var(--tr-etiqueta); text-transform: uppercase; }
.site-footer a { color: var(--c-tinta-2); }
.site-footer a:hover { color: var(--c-granada); }
.footer__bottom p { color: var(--c-tinta-3); }
/* El pie llevaba tres enlaces con el color escrito en el atributo style. */
.legal-links a { color: var(--c-granada) !important; }

/* --- Portón de edad ------------------------------------------------------ */
.age-gate { background: var(--c-velo); backdrop-filter: blur(10px); z-index: var(--z-aviso); }
.age-gate__card {
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  box-shadow: var(--s-3);
  border-radius: var(--r-lg);
}
.age-gate__card h1 { font-size: var(--f-2xl); }
.age-gate__card p { color: var(--c-tinta-2); }
.age-gate__logo { width: 120px; height: 120px; object-fit: cover; margin: 0 auto; border-radius: var(--r-md); }
.age-gate__exit { color: var(--c-tinta-3); min-height: var(--toque); display: inline-flex; align-items: center; }

/* --- Cajón del carrito y diálogo de producto ----------------------------- */
.drawer-backdrop { background: var(--c-velo); z-index: var(--z-velo); }
.cart-drawer { background: var(--c-papel); border-left: 1px solid var(--c-linea); z-index: var(--z-panel); }
.cart-drawer h2, .cart-drawer .cart-total strong { color: var(--c-tinta); }
.cart-drawer__footer div span { color: var(--c-tinta-2); }
.cart-drawer__footer strong { color: var(--c-tinta); }
.cart-drawer__footer small { color: var(--c-tinta-3); }
.cart-empty strong { color: var(--c-tinta); }
.cart-empty span { color: var(--c-tinta-2); }
.cart-item h3 { color: var(--c-tinta); }
.cart-shipping-progress { background: var(--c-salvia-piel); border-radius: var(--r-md); }
.cart-shipping-progress p { color: var(--c-salvia); font-weight: var(--p-medio); }
.cart-shipping-progress > div { background: var(--c-lino-hondo); }
#cart-shipping-bar { background: var(--c-salvia); }
#cart-subtotal, #cart-shipping { color: var(--c-tinta); }
#cart-total { color: var(--c-granada); }

.product-modal { z-index: var(--z-panel); }
.product-modal__backdrop { background: var(--c-velo); }
.product-modal__panel { background: var(--c-papel); border: 1px solid var(--c-linea); box-shadow: var(--s-3); border-radius: var(--r-lg); }
.product-modal__gallery { background: var(--c-lino); }
.product-modal__content h2 { color: var(--c-tinta); font-size: var(--f-2xl); }
.product-modal__description { color: var(--c-tinta-2); }
.product-modal__price strong { color: var(--c-granada); font-size: var(--f-2xl); font-family: var(--f-display); }
.product-modal__price span { color: var(--c-tinta-3); }
.product-modal__trust span { color: var(--c-salvia); font-weight: var(--p-medio); }
.product-modal__trust i { color: var(--c-salvia); }
#modal-product-category { color: var(--c-tinta-3); }

.toast { z-index: var(--z-aviso); background: var(--c-tinta); color: var(--c-lino); border-radius: var(--r-md); box-shadow: var(--s-3); }

/* --- Dock flotante ------------------------------------------------------- */
.dock { z-index: var(--z-flotante); }
.dock__trigger {
  background: var(--c-granada);
  color: var(--c-papel);
  border: 0;
  box-shadow: var(--s-2);
  min-height: var(--toque);
}
.dock__trigger:hover { background: var(--c-granada-alt); }
.dock__label { color: var(--c-papel); font-weight: var(--p-medio); }
.dock__panel { background: var(--c-papel); border: 1px solid var(--c-linea); box-shadow: var(--s-3); border-radius: var(--r-md); }
.dock__option { color: var(--c-tinta); min-height: var(--toque); }
.dock__option strong { color: var(--c-tinta); }
.dock__option small { color: var(--c-tinta-3); }
.dock__option:hover { background: var(--c-lino); }

/* ===========================================================================
   MOVIMIENTO — solo transform y opacity, 150–300ms
   Las reglas viejas animaban all, width, bottom, box-shadow, background y
   color, con trece duraciones distintas y una de 800ms. Aquí se acotan; la
   fase 4 termina el trabajo.
   =========================================================================== */
.product-card, .catalog-card, .button, .filter-chip, .category-orb,
.dock__trigger, .add-button, .add-button-catalog {
  transition: transform var(--m-medio) var(--m-curva),
              opacity   var(--m-medio) var(--m-curva);
}
.product-card__media img, .catalog-card__image img {
  transition: transform var(--m-lento) var(--m-curva);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   SUPERFICIE OSCURA — SOLO EL PANEL DE ADMINISTRACION
   ---------------------------------------------------------------------------
   El sistema "Botica" es claro: tinta sobre lino. El panel es oscuro a
   proposito (se mira muchas horas y no es cara al cliente), asi que hereda las
   fichas AL REVES. La conversion automatica de la fase 1 no podia saberlo y
   mapeo los claros del tema oscuro anterior a fichas pensadas para fondo claro.
   Medido sobre #191518, esto es lo que quedo:

     seccion activa del panel   salvia sobre granada  1,17:1   ilegible
     botones de las tablas      salvia sobre granada  1,17:1   ilegible
     las cifras del resumen     salvia sobre tinta    2,11:1
     cabeceras de tabla         granada sobre tinta   2,34:1
     texto secundario           tinta-3 sobre tinta   3,21:1

   No se parchea regla por regla: se invierten las fichas dentro de .admin-body
   y las 57 declaraciones que ya existen empiezan a decir la verdad. Los cinco
   colores siguen siendo los mismos y conservan su trabajo — granada actua,
   salvia protege —, solo cambia la intensidad que exige el fondo.
   =========================================================================== */

.admin-body,
.admin-dialog {
  /* Las dos tintas de color, en su version para fondo oscuro. Ya existian
     como "piel": eran el fondo suave sobre lino, y sobre tinta son el texto. */
  --c-salvia:  var(--c-salvia-piel);    /* 14,9:1 sobre tinta · 8,3:1 sobre granada */
  --c-granada: var(--c-granada-piel);   /* 14,8:1 sobre tinta */

  /* Neutros invertidos. Antes eran los tres grises oscuros del texto sobre
     lino; aqui son los tres claros del texto sobre tinta. */
  --c-tinta-2: #C9C2C6;   /* secundario  — 10,3:1 */
  --c-tinta-3: #A79FA3;   /* terciario   —  7,0:1 */

  /* Separadores. Los de la hoja clara son tinta al 13 % y sobre tinta son
     invisibles: era el motivo de que la tabla de pedidos no tuviera lineas. */
  --c-linea:        rgba(242, 237, 233, .14);
  --c-linea-fuerte: rgba(242, 237, 233, .26);

  /* Superficie elevada del panel: tinta un punto por encima del fondo. Ficha
     NUEVA, no una reasignacion. Aqui NO se toca --c-papel ni --c-lino-hondo:
     en admin.css los dos se usan como COLOR DE TEXTO sobre tinta (los campos
     del formulario, el dialogo, las etiquetas), no como superficie. Oscurecer
     --c-papel dejaria los formularios en negro sobre negro. */
  --c-panel:      #221D21;
  --c-panel-alto: #2C262B;
}

/* ===========================================================================
   OBJETIVO TÁCTIL — 44 px en todo lo que se pulsa
   Medido en móvil de 375 px: 79 de 96 elementos interactivos del catálogo y
   29 de 48 de la portada estaban por debajo. El peor era `.add-button`, a
   38×38: es el botón que mete el producto en la bolsa, en el dispositivo
   donde se compra.

   Se usa un pseudo-elemento en vez de agrandar la caja: así el botón sigue
   viéndose del tamaño que pide el diseño y solo crece el area que recibe el
   dedo. Agrandar la caja habría descuadrado seis rejillas.
   ========================================================================= */

.add-button,
.add-button-catalog,
.catalog-card__actions button,
.catalog-actions button,
.quantity-control button,
.rail-arrow,
.icon-button,
.catalog-search button,
.product-modal__thumbs button,
.text-button,
.age-gate__exit,
.filter-chip,
.category-orb,
.dock__option,
.main-nav a {
  position: relative;
}

.add-button::after,
.add-button-catalog::after,
.catalog-card__actions button::after,
.catalog-actions button::after,
.quantity-control button::after,
.rail-arrow::after,
.icon-button::after,
.catalog-search button::after,
.product-modal__thumbs button::after,
.text-button::after,
.age-gate__exit::after,
.filter-chip::after,
.category-orb::after,
.dock__option::after,
.main-nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--toque));
  height: max(100%, var(--toque));
  transform: translate(-50%, -50%);
  /* No pinta nada ni intercepta el hover del padre: solo amplía el area. */
  background: none;
  border: 0;
  pointer-events: auto;
}

/* .main-nav a ya usaba ::after para el subrayado animado. Ahí se amplía por
   padding, que no lo pisa. */
.main-nav a::after { position: absolute; width: auto; height: 2px; top: auto; }
.main-nav a { display: inline-flex; align-items: center; min-height: var(--toque); }

/* Los que sí pueden crecer sin descuadrar nada, crecen de verdad. */
.filter-chip { min-height: var(--toque); }
.age-gate__exit,
.text-button { min-height: var(--toque); display: inline-flex; align-items: center; }
.catalog-search input,
#catalog-search { min-height: var(--toque); }

@media (max-width: 640px) {
  /* La regla de móvil bajaba el boton de compra a 38px. */
  .add-button,
  .add-button-catalog { width: var(--toque); height: var(--toque); min-width: var(--toque); }
  .catalog-card__actions button { width: var(--toque); height: var(--toque); }
  .catalog-actions button { width: var(--toque); height: var(--toque); }
}

/* Los enlaces de texto de pie y cabecera: no llevan ::after porque varios ya
   usan ese pseudo-elemento para su subrayado. Se amplían por caja. */
.catalog-home,
.catalog-brand,
.catalog-footer div a,
.footer__grid a,
.site-footer a,
.legal-links a { display: inline-flex; align-items: center; min-height: var(--toque); }
.catalog-footer div { align-items: center; }
.catalog-home { min-width: var(--toque); justify-content: flex-start; }

/* El aspa que quita una linea del carrito: 26x38. Esta dentro del camino de
   compra, asi que entra en la regla como los demas. */
.cart-item__remove { position: relative; }
.cart-item__remove::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: max(100%, var(--toque)); height: max(100%, var(--toque));
  transform: translate(-50%, -50%);
}
.catalog-footer div a { min-width: var(--toque); justify-content: center; }