/* ============================================================================
   EL BAÚL DE LOS DESEOS — SISTEMA "BOUTIQUE PRIVADA" (Dark Luxury)
   Inspiración: Maude (getmaude.com), Ouí y cosmética de lujo.
   Promesa de marca: Discreción absoluta, empaque neutro y elegancia sin estridencias.
   ========================================================================= */

:root {
  /* --- PALETA OSCURA CÁLIDA & ORO CEPILLADO ------------------------------ */
  --c-lino:        #0E0B0E;   /* superficie de la página (obsidiana terciopelo) */
  --c-papel:       #171317;   /* tarjetas y superficies elevadas */
  --c-panel:       #201A20;   /* paneles modales y cajones */
  --c-panel-alto:  #292128;   /* superficies flotantes */
  --c-tinta:       #F6F1EC;   /* texto principal (marfil seda — 15,2:1 sobre fondo) */
  --c-tinta-2:     #B8ADA4;   /* texto secundario (cashmere — 8,4:1) */
  --c-tinta-3:     #82766E;   /* texto terciario (taupe sutil — 4,9:1) */

  /* --- ORO Y ACCIONES ---------------------------------------------------- */
  --c-oro:         #C5A059;   /* oro cepillado mate (acción principal / lujo) */
  --c-oro-brillo:  #DFBE76;   /* reflejo oro al pasar el ratón */
  --c-oro-hondo:   #967536;   /* oro de bajo relieve */
  --c-granada:     #C5A059;   /* alias semántico de acción (oro de marca) */
  --c-granada-alt: #DFBE76;   /* hover de acción */
  --c-granada-piel:rgba(197, 160, 89, .14); /* halo suave de distinción */
  --c-vino:        #7A2240;   /* bordeaux velvet (acento de intimidad discreta) */
  --c-vino-suave:  rgba(122, 34, 64, .24);

  /* --- CONFIANZA Y SEGURIDAD (SALVIA NOBLE) ------------------------------ */
  --c-salvia:      #2A4E42;   /* verde salvia profundo (empaque neutro, pago protegido) */
  --c-salvia-alt:  #1E3B31;
  --c-salvia-piel: rgba(42, 78, 66, .28);
  --c-salvia-texto:#95CEBA;   /* texto de confianza sobre fondo oscuro */

  /* --- DERIVADOS Y LÍNEAS ------------------------------------------------ */
  --c-lino-hondo:  #221B21;   /* superficie hundida */
  --c-linea:       rgba(197, 160, 89, .16); /* filete fino dorado */
  --c-linea-fuerte:rgba(197, 160, 89, .32);
  --c-velo:        rgba(8, 6, 9, .84);      /* fondos de diálogo con desenfoque */

  /* --- TIPOGRAFÍA ------------------------------------------------------- */
  --f-display: "Playfair Display", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texto:   "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala de texto */
  --f-xs:   .8125rem;                        /* 13px */
  --f-sm:   .875rem;                         /* 14px */
  --f-md:   1rem;                            /* 16px — cuerpo */
  --f-lg:   1.125rem;                        /* 18px */
  --f-xl:   1.375rem;                        /* 22px */
  --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);

  /* Pesos */
  --p-normal: 400;
  --p-medio:  500;
  --p-fuerte: 650;
  --p-display-normal: 400;
  --p-display-fuerte: 600;

  /* Interlineados */
  --i-apretado: 1.08;
  --i-medio:    1.35;
  --i-suelto:   1.65;

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

  /* --- 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 Y SOMBRAS --------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-redondo: 999px;

  --s-1: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(197,160,89,.06);
  --s-2: 0 10px 28px rgba(0,0,0,.6), 0 0 1px rgba(197,160,89,.22);
  --s-3: 0 20px 56px rgba(0,0,0,.75), 0 0 2px rgba(197,160,89,.35);

  /* --- MOVIMIENTO ------------------------------------------------------- */
  --m-rapido: 180ms;
  --m-medio:  280ms;
  --m-lento:  380ms;
  --m-curva:  cubic-bezier(.16, 1, .3, 1);

  /* --- PROFUNDIDAD ------------------------------------------------------ */
  --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(1200px, calc(100vw - var(--e-6)));
  --ancho-lectura: 62ch;
  --toque: 44px;
}

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

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

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;
}

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-oro); font-weight: var(--p-display-fuerte); }

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

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-oro);
  line-height: var(--i-medio);
}

a { color: var(--c-oro); transition: color var(--m-rapido) ease; }
a:hover { color: var(--c-oro-brillo); }
hr { border: 0; border-top: 1px solid var(--c-linea); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-oro);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px rgba(197, 160, 89, .2);
}

.main-nav a:focus-visible,
#modal-add-button:focus-visible,
.icon-button:focus-visible { outline: 2px solid var(--c-oro); outline-offset: 3px; }

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

/* ===========================================================================
   SUPERFICIES Y COMPONENTES
   =========================================================================== */

.announcement {
  background: var(--c-papel);
  border-bottom: 1px solid var(--c-linea);
  color: var(--c-tinta-2);
  font-weight: var(--p-medio);
  letter-spacing: var(--tr-etiqueta);
  font-size: var(--f-xs);
  text-transform: uppercase;
}
.announcement i { color: var(--c-oro); opacity: .9; margin-right: 6px; }

.site-header {
  background: color-mix(in srgb, var(--c-lino) 85%, transparent);
  border-bottom: 1px solid var(--c-linea);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
  z-index: var(--z-pegado);
}
.header__inner { min-height: 78px; }
.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-oro); }
.main-nav a::after { background: var(--c-oro); }

.cart-button {
  background: var(--c-papel);
  border: 1px solid var(--c-linea-fuerte);
  color: var(--c-tinta);
  box-shadow: var(--s-1);
  min-height: var(--toque);
  border-radius: var(--r-redondo);
}
.cart-button:hover { border-color: var(--c-oro); }
.cart-button b { background: var(--c-oro); color: var(--c-lino); font-weight: var(--p-fuerte); }

/* --- Hero --------------------------------------------------------------- */
.hero { min-height: auto; border-bottom: 1px solid var(--c-linea); background: var(--c-lino); position: relative; }
.hero__media {
  background-image:
    linear-gradient(90deg, var(--c-lino) 8%, color-mix(in srgb, var(--c-lino) 80%, transparent) 40%, transparent 75%),
    url('/img/hero.webp');
  background-position: 74% center;
  background-size: cover;
  filter: saturate(.8) contrast(1.05) brightness(.85);
  opacity: .75;
}
.hero__veil { background: linear-gradient(180deg, transparent 50%, var(--c-lino) 100%); }
.hero__copy { max-width: var(--ancho-lectura); padding: var(--e-9) 0 var(--e-9); position: relative; z-index: 2; }
.hero__copy::before {
  content: ""; display: block;
  width: var(--e-7); height: 2px;
  margin-bottom: var(--e-5);
  background: var(--c-oro);
}
.hero h1 { font-size: var(--f-4xl); color: var(--c-tinta); }
.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-tinta-2);
  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-oro); }

/* --- 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-oro);
  opacity: .5;
}
.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-3); 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-oro);
  color: var(--c-oro);
  background: var(--c-panel);
  font-family: var(--f-display);
}
.steps p { color: var(--c-tinta-2); }

.assistant-cta__card {
  background: linear-gradient(145deg, #1d161c, #130f13);
  border: 1px solid var(--c-linea-fuerte);
  box-shadow: var(--s-3);
  border-radius: var(--r-lg);
}
.assistant-cta__card h2 { color: var(--c-tinta); }
.assistant-cta__card p { color: var(--c-tinta-2); }
.assistant-cta__card .eyebrow { color: var(--c-oro); }
.assistant-cta__icon { background: var(--c-granada-piel); color: var(--c-oro); border: 1px solid var(--c-linea); }

.faq-section { background: var(--c-lino); }
.faq-list details {
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-md);
  transition: border-color var(--m-rapido) ease;
}
.faq-list details[open] { border-color: var(--c-linea-fuerte); }
.faq-list summary { color: var(--c-tinta); font-weight: var(--p-medio); min-height: var(--toque); }
.faq-list summary i { color: var(--c-oro); }
.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-oro); }
.footer__bottom p { color: var(--c-tinta-3); }
.legal-links a { color: var(--c-oro) !important; }

/* --- Portón de edad (+18) ------------------------------------------------ */
.age-gate {
  background:
    radial-gradient(circle at 50% 20%, rgba(197, 160, 89, .12), transparent 45%),
    var(--c-velo);
  backdrop-filter: blur(20px);
  z-index: var(--z-aviso);
}
.age-gate__card {
  background: var(--c-papel);
  border: 1px solid var(--c-linea-fuerte);
  box-shadow: var(--s-3), 0 0 50px rgba(197, 160, 89, .1);
  border-radius: var(--r-lg);
  padding: 48px 36px;
}
.age-gate__card h1, .age-gate__card h2 { font-size: var(--f-2xl); color: var(--c-tinta); margin-top: 8px; }
.age-gate__card p { color: var(--c-tinta-2); }
.age-gate__logo {
  width: 110px; height: 110px; object-fit: contain; margin: 0 auto 16px;
  border-radius: var(--r-md); border: 1px solid var(--c-linea); background: #000;
}
.age-gate__exit { color: var(--c-tinta-3); min-height: var(--toque); display: inline-flex; align-items: center; justify-content: center; }
.age-gate__exit:hover { color: var(--c-oro); }

/* --- Cajón del carrito y diálogo de producto ----------------------------- */
.drawer-backdrop { background: var(--c-velo); z-index: var(--z-velo); backdrop-filter: blur(8px); }
.cart-drawer { background: var(--c-panel); border-left: 1px solid var(--c-linea); z-index: var(--z-panel); box-shadow: var(--s-3); }
.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: 1px solid var(--c-linea); border-radius: var(--r-md); }
.cart-shipping-progress p { color: var(--c-salvia-texto); font-weight: var(--p-medio); }
.cart-shipping-progress > div { background: var(--c-lino-hondo); }
#cart-shipping-bar { background: var(--c-oro); }
#cart-subtotal, #cart-shipping { color: var(--c-tinta); }
#cart-total { color: var(--c-oro); }

.product-modal { z-index: var(--z-panel); }
.product-modal__backdrop { background: var(--c-velo); backdrop-filter: blur(12px); }
.product-modal__panel { background: var(--c-panel); border: 1px solid var(--c-linea-fuerte); box-shadow: var(--s-3); border-radius: var(--r-lg); }
.product-modal__gallery { background: #FFFFFF; border-radius: var(--r-md); padding: 12px; }
.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-oro); 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-tinta-2); font-weight: var(--p-medio); }
.product-modal__trust i { color: var(--c-oro); }
#modal-product-category { color: var(--c-oro); font-weight: var(--p-fuerte); }

.toast { z-index: var(--z-aviso); background: var(--c-panel-alto); border: 1px solid var(--c-oro); color: var(--c-tinta); border-radius: var(--r-md); box-shadow: var(--s-3); }

/* --- Dock flotante ------------------------------------------------------- */
.dock { z-index: var(--z-flotante); }
.dock__trigger {
  background: linear-gradient(135deg, var(--c-oro), var(--c-oro-hondo));
  color: var(--c-lino);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 20px rgba(197, 160, 89, .25);
  min-height: var(--toque);
}
.dock__trigger:hover { background: linear-gradient(135deg, var(--c-oro-brillo), var(--c-oro)); }
.dock__label { color: var(--c-lino); font-weight: var(--p-fuerte); }
.dock__panel { background: var(--c-panel); border: 1px solid var(--c-linea-fuerte); 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-oro); }
.dock__option:hover { background: var(--c-panel-alto); }

/* ===========================================================================
   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; }

/* ===========================================================================
   SUPERFICIE CLARA OPERATIVA — PANEL DE ADMINISTRACIÓN (admin.html)
   ---------------------------------------------------------------------------
   La tienda pública vive en el universo "Dark Luxury Boutique" (obsidiana y oro).
   El panel interno de administración (admin.html) es la herramienta operativa
   diaria para gestión de inventarios, pedidos, clientes y despachos.
   Para garantizar máxima legibilidad y confort visual durante horas de gestión,
   el panel utiliza su propia paleta clara calibrada con contraste WCAG AAA.
   =========================================================================== */
.admin-body,
.admin-dialog {
  /* Lienzo y superficies operativas claras */
  --c-tinta:        #F8F5F2;   /* Fondo general de la pantalla de admin */
  --c-lino:         #1C1618;   /* Texto principal de administración */
  --c-papel:        #1C1618;   /* Texto en campos de formulario y diálogos */
  --c-panel:        #FFFFFF;   /* Superficie de tarjetas, tablas y sidebar */
  --c-panel-alto:   #F0EBE7;   /* Superficies elevadas y fondos de miniatura */
  --c-lino-hondo:   #5C5055;   /* Etiquetas de formulario y botones inactivos (7.8:1) */
  --c-tinta-2:      #4A4045;   /* Texto secundario */
  --c-tinta-3:      #766A70;   /* Texto terciario, notas y descripciones */

  /* Acentos de acción y estado */
  --c-granada:      #8A1838;   /* Acentos burdeos y encabezados de tabla (8.5:1) */
  --c-granada-alt:  #C5A059;   /* Fondo de botón primario y tab activo (Oro Baúl) */
  --c-granada-piel: #FCE8EE;   /* Píldoras de aviso */
  --c-salvia:       #191518;   /* Texto contrastado sobre botón oro y tabs activos */
  --c-salvia-alt:   #2F5347;   /* Verde de confirmación */
  --c-salvia-piel:  #E8F2ED;   /* Fondo de estado */
  --c-salvia-texto: #1F4538;   /* Texto de estado exitoso */

  /* Líneas divisorias y sombras */
  --c-linea:        #E5DFDB;   /* Bordes de tabla, tarjetas y separadores */
  --c-linea-fuerte: #CECAC6;   /* Bordes de input y foco */
  --c-velo:         rgba(28, 22, 24, .65); /* Backdrop de diálogo modal */
}