/*
 * brand.css — Alineación con el manual de marca (brandbook.daitoshops.com.ar).
 *
 * El CSS de la tienda vive en main-ShOSBjOT.css, que es un build sin fuente en
 * el repo: no se toca. Este archivo se carga DESPUÉS y corrige lo que ese
 * bundle define distinto del manual. Lo cargan las dos cáscaras que existen
 * (shop.php y includes/store_top.php).
 *
 * ── El problema que vino a resolver ──────────────────────────────────────────
 * El bundle declara `--font:"Outfit", sans-serif`, pero NADIE cargaba Outfit:
 * no había un solo @font-face ni un link a Google Fonts en todo el sitio. Se
 * comprobó midiendo el ancho del mismo texto a 48px: "Outfit" medía 744px,
 * exactamente lo mismo que una familia inventada, mientras que Arial —que sí
 * existe en el sistema— medía 813. O sea: la tienda entera se estaba viendo
 * con la fuente por defecto del navegador, distinta en cada dispositivo.
 *
 * El manual no pide Outfit: pide Montserrat para "web, redes sociales,
 * impresión". Así que se carga Montserrat y se redefine --font. Los seis usos
 * de var(--font) del bundle pasan a la tipografía correcta sin tocar el build.
 */

/* La familia de comunicación del manual. El fallback es la pila del sistema y
   no `sans-serif` a secas: si Google Fonts no responde, un stack concreto se
   parece mucho más a Montserrat que el default del navegador. */
/* Los tokens de la paleta van ACÁ y no sólo en el bundle porque siete páginas
   de la tienda no cargan el bundle: pago, mis-compras, seguimiento, vincular,
   recuperar y confirmar-email traen su propio <style> de cero. Definidos acá,
   brand.css alcanza para vestirlas sin arrastrarles el build entero.
   Los valores son literalmente los del manual. */
:root{
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --orange: #ff5c00;        /* Naranja DAITO  — isotipo, acentos, CTA */
  --orange-dark: #cc3d00;   /* Naranja Oscuro — hover y estados activos */
  --brand-black: #1a1a1a;   /* Negro DAITO    — superficies oscuras */
  --white: #ffffff;
  --muted: #888888;         /* Gris Techno    — texto secundario */
  --muted-light: #cccccc;   /* Gris Claro     — sobre fondos muy oscuros */
}

/* Los <button> NO heredan la tipografía del documento: el UA les pone su
   propia familia. El bundle nunca se la declara a .btn-primary, así que los
   dos botones más importantes de la tienda —AGREGAR y COMPRAR— se venían
   dibujando en Arial mientras el resto de la página usaba otra cosa.
   Se incluyen input/select/textarea por el mismo motivo. */
button, input, select, textarea,
.btn-primary, .btn-secondary{
  font-family: var(--font);
}

/* ── Jerarquía de pesos del manual ───────────────────────────────────────────
   400 cuerpo · 600 etiquetas y subtítulos · 700 botones · 800-900 titulares.
   Sólo se corrige lo que el bundle define distinto; el resto ya coincide.

   Las etiquetas en versalita (los rótulos de sección de la ficha, las
   categorías de la tarjeta) estaban en 700, que el manual reserva para
   botones. En 600 se leen como etiqueta y no compiten con los titulares. */
.modal-desc h2{
  font-weight: 600;
}

/* ── Páginas fuera de la cáscara compartida ──────────────────────────────────
   pago.php, mis-compras.php, recuperar.php, track.php,
   vincular.php y confirmar-email.php arman su propio <html> y no pasan por
   includes/store_top.php. Cada una traía su tipografía: cuatro tratamientos
   distintos en la misma tienda —el stack del sistema, 'Outfit' (que no
   cargaba), y una directamente en sans-serif—, y son justo las páginas que se
   ven DESPUÉS de decidir la compra. Acá heredan la de la marca. */
body{ font-family: var(--font); }

/* ════════════════════════════════════════════════════════════════════════════
   MARCA Y TOKENS (sprint 3, 2026-09-13)
   ════════════════════════════════════════════════════════════════════════════
   Decisiones de aplicación, tomadas por delegación del dueño. El manual online
   define naranja, negro, blanco y grises; el off-white y los motivos (barras en
   paralelogramo, banda base) los nombró el dueño. Se aplican así, y en ningún
   otro lado, para que la tienda siga siendo la misma tienda oscura:

     · Off-white #F5F3EF = PAPEL DE PRODUCTO. Sólo el fondo de los marcos de foto
       (tarjetas y ficha). Las fotos vienen con fondo blanco; con
       mix-blend-mode:multiply ese blanco toma el tono del papel y la foto deja
       de ser un recuadro blanco pegado sobre negro. Es como fotografían Braun
       y Gillette: el producto sobre un fondo cálido, no sobre blanco de pantalla.
     · Paralelogramo = MARCA DE SECCIÓN y FORMA DE ETIQUETA. Una barra naranja
       inclinada antes de cada título de sección, y las etiquetas (NUEVO,
       OFERTA, -22% OFF) cortadas en diagonal.
     · Banda base = el cierre del pie de página.

   Los tokens de acá abajo son la fuente para los próximos cambios. No se
   reemplazaron todos los hex sueltos del sitio a la vez: eso es mover mil
   líneas sin cambiar nada visible, y cada página se va a ir pasando cuando se
   la toque. */
:root{
  --paper: #f5f3ef;          /* Off-white DAITO — papel de producto */
  --surface-0: #000000;      /* fondo de página */
  --surface-1: #0a0a0a;      /* header, cajones, modales */
  --surface-2: #141414;      /* controles, tarjetas internas */
  --surface-3: #1a1a1a;      /* campos */
  --line: #ffffff14;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --skew: -20deg;            /* la inclinación del paralelogramo */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* El bundle aclara el naranja en hover (#ff7a33, fuera del manual). El
     manual pide Naranja Oscuro para hover y estados activos; además el blanco
     sobre #cc3d00 da 5:1, contra 2,8:1 sobre el naranja claro. */
  --orange-light: var(--orange-dark);
}

/* ── Papel de producto ──────────────────────────────────────────────────────
   Los selectores repiten clases para ganarle al `background:#111 !important`
   de shop.php y al #fff de la ficha, que se cargan después de este archivo.
   isolation:isolate encierra el multiply en el marco: la foto sólo se mezcla
   con el papel, nunca con el negro de la página. .img-missing queda afuera:
   el estado "Sin foto" tiene su propio fondo oscuro. */
.product-grid .product-card .card-img:not(.img-missing),
.product-card .card-img.card-img:not(.img-missing){
  background: var(--paper) !important;
  isolation: isolate;
}
.product-card .card-img:not(.img-missing) img.main-img,
.product-card .card-img:not(.img-missing) img.alt-img{ mix-blend-mode: multiply; }
.pdp-page .pdp-media:not(.img-missing){ background: var(--paper); isolation: isolate; }
.pdp-page .pdp-media:not(.img-missing) > img{ mix-blend-mode: multiply; }

/* ── Paralelogramo: marca de sección ─────────────────────────────────────── */
.pdp-similar h2::before,
.pdp-page .modal-section-title::before,
.pdp-desc .rich-content > h1::before,
.pdp-desc .rich-content > h2::before,
.rich-content .ds-label::before,
.novedades-header h2::before,
.page-title::before{
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: .42em;
  height: .8em;
  margin-right: .5em;
  background: var(--orange);
  transform: skewX(var(--skew));
  vertical-align: -.02em;
}
/* El título de reseñas es flex con gap: la barra reemplaza a la estrella. */
.pdp-page .modal-section-title::before{ margin-right: 0; }
.pdp-page .modal-section-title i{ display: none; }

/* Título de página (FAQ, Contacto, Nosotros). Venían en naranja a 32px, con
   otro tamaño y otro color que el título de categoría: dos tratamientos para
   el mismo nivel. Ahora es uno solo. */
.page-title{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Paralelogramo: forma de etiqueta ───────────────────────────────────────
   Había dos sistemas en la misma esquina: la píldora naranja del servidor y la
   píldora "neón" translúcida que agrega shop.php, con seis colores fuera de la
   paleta y un pulso infinito en cada tarjeta. Ahora las dos son la misma
   etiqueta: naranja DAITO, texto Negro DAITO, corte diagonal, quieta. */
.seo-card-badge,
.card-img .prod-badge-overlay,
.pdp-badge,
.seo-card-off{
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  padding: 4px 13px !important;
  background: var(--orange) !important;
  color: var(--brand-black) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  box-shadow: none !important;
}
.card-img .prod-badge-overlay{
  border: 0 !important;
  animation: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.card-img .prod-badge-overlay::before{ display: none; }
.seo-card-off{ font-size: 11px !important; font-weight: 900 !important; }

/* ── Banda base ──────────────────────────────────────────────────────────── */
body > footer{ position: relative; }
body > footer::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--orange);
}

/* ── Foco ───────────────────────────────────────────────────────────────────
   El bundle no trae ningún :focus-visible y apaga el outline en varios campos:
   con teclado no había forma de saber dónde se estaba. :where() deja la regla
   en especificidad cero, así que cualquier foco propio de un componente (la
   ficha, el checkout) sigue mandando. */
:where(a, button, summary, select, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
/* Los formularios de Contacto traen outline:none escrito en cada campo. */
.page-section :is(input, select, textarea):focus{
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px #ff5c0029;
}

/* ── Tipografía que se había escapado ──────────────────────────────────────
   El marquee declara Outfit a mano (no por var(--font)) y Outfit no se carga:
   el texto más grande de la portada salía en la sans del sistema. */
.marquee-section .marquee-track span{ font-family: var(--font); }

/* ── Menos movimiento ───────────────────────────────────────────────────────
   Quien pide menos movimiento se lo pide a la página entera, no componente por
   componente. Los loops (marquee, pulsos, latidos) se cortan; las transiciones
   quedan instantáneas. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Tarjeta de producto (sprint 4) ─────────────────────────────────────────
   Una sola tarjeta para la tienda, las categorías y los similares de la ficha.
   Antes shop.php la redibujaba con !important (radio 18, borde naranja, botón
   traslúcido) y el resto del sitio mostraba la del bundle (radio 8, botón con
   ripple): el mismo producto cambiaba de forma según por dónde se entrara.
   Sin !important: este archivo carga después del bundle, y a igual
   especificidad gana. electric-border.css, que carga después, sigue pudiendo
   soltar el overflow de la tarjeta con borde eléctrico. */
.product-card{
  background: #0d0d0d;
  border: 1px solid rgba(255,92,0,.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 20px rgba(255,92,0,.06);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-out);
}
.product-card:has(> electric-border.eb-overlay) .card-img{ border-radius: 17px 17px 0 0; }
/* El bundle levanta y agranda la tarjeta y hace zoom a la foto también en
   táctil, donde el hover queda pegado tras el toque. Sin mouse no hay hover;
   con mouse la tarjeta sube 4px y la foto crece apenas, sin escalar el borde. */
.product-card:hover{ transform: none; border-color: rgba(255,92,0,.28); box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 20px rgba(255,92,0,.06); }
.product-card .card-img img{ transition: transform .35s var(--ease-out); }
.product-card:hover .card-img img{ transform: none; }
@media (hover: hover) and (pointer: fine){
  .product-card:hover{ transform: translateY(-4px); border-color: rgba(255,92,0,.68); box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 44px rgba(255,92,0,.22); }
  .product-card:hover .card-img img{ transform: scale(1.04); }
}

/* El botón de la tarjeta. Contorno naranja en reposo; lleno con texto Negro
   DAITO al pasar el mouse, como los CTA de la ficha. El ripple del bundle
   (un círculo naranja que crece 400px en medio segundo) se va: en una grilla
   con decenas de tarjetas es la animación que más se cruza sin querer. */
.product-card .card-add{
  background: rgba(255,92,0,.1);
  border: 1px solid rgba(255,92,0,.45);
  border-radius: var(--radius-md);
  color: var(--orange);
  font-weight: 800;
  letter-spacing: .5px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform 120ms var(--ease-out);
}
.product-card .card-add::before{ display: none; }
@media (hover: hover) and (pointer: fine){
  .product-card .card-add:hover{ background: var(--orange); border-color: var(--orange); color: var(--brand-black); }
}
.product-card .card-add:active{ transform: scale(.98); }
.product-card .card-add:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
/* En tablet y celular store-responsive.css apaga el texto del botón con
   font-size:0 y lo repone en un ::after de una línea, pero algo vuelve a
   ponerle 15px al texto original (se ve en producción: dos rótulos, el de
   marcado en dos líneas y el del ::after). Se apaga en firme. Las variantes
   que sí muestran su texto quedan afuera. */
@media (max-width: 1024px){
  .product-card .card-add:not(.card-add-disabled):not(.card-add-reveal):not(.card-add-wa){ font-size: 0 !important; }
}