/* ==========================================================================
   MAVERICK 1997 — main.css
   Tokens, reset, keyframes y utilidades. Todo lo demás cuelga de acá.

   Los valores salen de handoff/README.md (tabla de tokens) y del bloque
   <style> del prototipo. Ante cualquier duda, el prototipo manda.

   ⚠️ No meter SVG inline ni data-URI de SVG en este archivo. La CDN de
   Hostinger bloquea para siempre el guardado por editor de cualquier
   archivo que contenga una etiqueta SVG de apertura — incluso dentro de
   un comentario. Los íconos van todos en inc/icons.php.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Paleta completa. No hay ningún otro color: blanco y negro, más el rojo
     puntual que SOLO se usa en el importe de la cuota sin interés. */
  --mvk-black:        #0C0B0B;   /* fondos oscuros, texto principal, botones */
  --mvk-black-deep:   #090808;   /* panel del carrito, al 86% de opacidad */
  --mvk-white:        #FFFFFF;
  --mvk-bg:           #F4F3F1;   /* fondo de miniaturas y placeholders */
  --mvk-panel:        #F8F7F5;   /* tarjetas secundarias */
  --mvk-line:         #E5E3E0;   /* bordes y separadores */
  --mvk-line-input:   #DAD6D0;   /* bordes de campos de formulario */
  --mvk-text-mid:     #6B6B6B;   /* párrafos secundarios — 5.33:1 sobre blanco */
  --mvk-red:          #C1121F;   /* ÚNICO acento. Solo cuota sin interés */

  /* 🚨 Rótulos: DOS tokens, uno por familia de fondo.
     El #9A958E del handoff da 2.97:1 sobre blanco — falla WCAG AA (4.5:1)
     y se usa para texto real, no decorativo. Pero sobre el negro de marca
     da 6.5:1 y está perfecto. Sobre fondo oscuro la regla se invierte, así
     que hay que auditar las dos familias por separado (lección del manual).

     Regla: --mvk-text-soft SOLO sobre fondos oscuros.
            --mvk-text-soft-light sobre blanco, gris fondo y gris panel.
     #767676 es el gris más claro que llega a 4.5:1 sobre blanco. */
  --mvk-text-soft:       #9A958E;   /* rótulos SOBRE OSCURO — 6.5:1 sobre #0C0B0B */
  --mvk-text-soft-light: #767676;   /* rótulos SOBRE CLARO  — 4.54:1 sobre blanco */

  /* --- Tipografía -------------------------------------------------------- */
  --mvk-display: Oswald, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mvk-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mvk-mono:    ui-monospace, Menlo, Monaco, 'Courier New', monospace;

  /* Títulos: Oswald 600, MAYÚSCULAS, siempre con estos dos valores */
  --mvk-title-ls: -.02em;
  --mvk-title-lh: .92;

  /* Escala de títulos (README §2) */
  --mvk-h1-hero-mob:  clamp(26px, 7vw, 38px);
  --mvk-h1-hero:      clamp(46px, 4.9vw, 92px);
  --mvk-h1-page:      clamp(26px, 6vw, 86px);
  --mvk-h2-section:   clamp(25px, 5.4vw, 74px);

  /* --- Layout ------------------------------------------------------------ */
  --mvk-max:        1240px;   /* ancho de contenido general */
  --mvk-max-wide:   1560px;   /* catálogo y ficha de producto */
  --mvk-pad:        clamp(16px, 3vw, 40px);
  --mvk-sec-top:    clamp(28px, 3.5vw, 52px);
  --mvk-sec-bottom: clamp(64px, 9vw, 120px);

  /* Alturas del header: reposo / scrolleado / mobile */
  --mvk-hdr-tall:   clamp(84px, 7.4vw, 104px);
  --mvk-hdr-short:  74px;
  --mvk-hdr-mob:    66px;
  --mvk-promo-h:    36px;   /* barra de promociones */

  /* --- Movimiento --------------------------------------------------------
     Una sola curva para todo el sitio. Si algo usa otra, está mal. */
  --mvk-ease: cubic-bezier(.16, 1, .3, 1);

  /* --- Sombras -----------------------------------------------------------
     Solo en elementos flotantes. En el resto del sitio no hay sombras. */
  --mvk-shadow-fab:    0 6px 18px rgba(12, 11, 11, .24);
  --mvk-shadow-drawer: -40px 0 110px -24px rgba(0, 0, 0, .75);
}

/* ==========================================================================
   Reset — copiado del prototipo, no cambiar sin mirarlo al lado
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mvk-white);
  color: var(--mvk-black);
  font-family: var(--mvk-sans);
  -webkit-font-smoothing: antialiased;

  /* 🚨 clip, NUNCA hidden. Y acá costó caro: el comentario de abajo ya
     explicaba el porqué para el <html> y este quedó en hidden igual.

     `overflow-x: hidden` obliga al navegador a resolver el otro eje como
     `auto` —hidden y visible no pueden convivir—, así que el body se convierte
     en CONTENEDOR DE SCROLL. Y el que scrollea la página es el <html>
     (document.scrollingElement === HTML), no el body. Entonces todo
     position:sticky de adentro se pega a una caja que nunca se mueve: se
     comporta como si fuera static y baja con el contenido.

     Medido en producción sobre el resumen del checkout: pegado a 126px del
     borde, se leía sticky en getComputedStyle y aun así su top iba 797 → 197 →
     -403 → -1003 a medida que se scrolleaba. O sea 1:1 con la página. El total
     desaparecía a mitad del formulario, que es exactamente donde más se lo
     mira.

     No daba ningún error y no había regla que lo explicara: para encontrarlo
     hay que recorrer los ancestros mirando overflow, porque el culpable está a
     cuatro niveles del elemento que falla. */
  overflow-x: clip;
}

/* 🚨 El overflow-x del body NO alcanza, y se comprobo con la banda negra del
   checkout.

   Los bloques a sangre se hacen con margin-inline: calc(50% - 50vw), y vw
   INCLUYE el ancho de la barra de scroll: con una barra de 15px el bloque se
   pasa ~8px de cada lado. Medido en produccion: la pagina scrolleaba 8px en
   horizontal aunque el body tuviera overflow-x:hidden, porque el desborde lo
   reportaba el <html>, no el body.

   Va `clip` y no `hidden` a proposito: hidden convierte al elemento en un
   contenedor de scroll y eso ROMPE position:sticky en los descendientes — el
   resumen del checkout y la columna pegajosa de la ficha dejarian de pegarse.
   clip corta igual y no crea contenedor. */
html { overflow-x: clip; }

a       { color: var(--mvk-black); text-decoration: none; }
a:hover { color: var(--mvk-text-mid); }

button:focus         { outline: none; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

::selection { background: var(--mvk-black); color: var(--mvk-white); }

/* Los carruseles y el panel de filtros scrollean sin barra visible */
.mvk-noscrollbar::-webkit-scrollbar { display: none; }
.mvk-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ==========================================================================
   Reset de WooCommerce — avisos y botones

   🚨 Esto NO se puede borrar por "ya está estilado en otro lado": no lo está.
   El tema no tiene plantilla propia de /carro/ (woocommerce/ solo trae
   archive-product, content-product, content-single-product, single-product,
   checkout/ y emails/), así que esa pantalla —el respaldo sin JavaScript de la
   bolsa del header, según declara footer.php— se dibuja entera con el markup y
   el CSS de fábrica del plugin dentro de la cáscara Maverick. Lo mismo con los
   avisos, que single-product.php manda a imprimir DENTRO de la ficha con
   woocommerce_output_all_notices.

   Los valores de fábrica que se pisan acá salen de la hoja que corre en
   producción (wp-content/plugins/woocommerce/assets/css/woocommerce.css):
     · avisos:  background #f6f5f8, color #515151 y un filete superior de 3px
                en #720eec (VIOLETA), #1e85be (info) o #b81c23 (error);
     · botones: border-radius 3px sobre #e9e6ed.
   Son seis colores fuera de la paleta más unas esquinas redondeadas, o sea la
   regla 1 y la regla 2 rotas en la pantalla anterior al pago.
   ========================================================================== */

/* woocommerce.css se encola ANTES que main.css, así que la misma
   especificidad ya alcanza; los selectores con .woocommerce/.woocommerce-page
   delante son el segundo candado, por si algún día cambia el orden de encolado
   (ahí ganan (0,2,0) contra los (0,1,0) del plugin). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  margin: 0 0 16px;   /* los 2em de fábrica son el doble del ritmo del área */
  padding: 14px 18px;
  border: 0;
  /* El filete pasa al costado y en negro. Sin acento: la regla 2 reserva
     --mvk-red para el importe de la cuota sin interés y para nada más, así que
     un aviso de error tampoco puede ser rojo. Lo que distingue al error es el
     texto, no el color. */
  border-inline-start: 2px solid var(--mvk-black);
  border-radius: 0;
  background: var(--mvk-panel);
  color: var(--mvk-black);
  font: 400 13px/1.5 var(--mvk-sans);
  list-style: none;
}

/* .woocommerce-error es un <ul>: sin esto quedan las viñetas y la sangría
   del navegador adentro de la caja. */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mismo trazo que .mvk-pdp-add. Las esquinas se llevan a cero: es el reset que
   pide la regla 1, no un radio inventado. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  border: 0;
  border-radius: 0;
  padding: 16px 22px;
  background: var(--mvk-black);
  color: var(--mvk-white);
  font: 600 10.5px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: var(--mvk-black);
  color: var(--mvk-white);
  opacity: .86;
}

/* ==========================================================================
   Keyframes — los 26 del prototipo, prefijo mvk
   ========================================================================== */

@keyframes mvkMarquee { to { transform: translateX(-50%); } }

@keyframes mvkUp {
  from { opacity: 0; transform: translateY(115%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mvkFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvkFadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes mvkLogoRise {
  0%   { opacity: 0; transform: scale(.965); filter: blur(7px) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  45%  { opacity: 1; filter: blur(0) drop-shadow(0 0 14px rgba(255,255,255,.32)); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

@keyframes mvkLogoBloom {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.72); }
  40%  { opacity: .55; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes mvkLogoSweep {
  0%   { opacity: 0; background-position: 130% 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

@keyframes mvkMenuIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mvkMenuLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes mvkDrawer    { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mvkDrawerOut {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-102%); opacity: .4; }
}

@keyframes mvkBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.42); }
  70%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

@keyframes mvkShine {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}

@keyframes mvkKen { from { transform: scale(1.02); } to { transform: scale(1.16); } }

@keyframes mvkBob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(9px); opacity: 1; }
}

@keyframes mvkSheet {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes mvkSpin { to { transform: rotate(360deg); } }

@keyframes mvkDrift {
  0%   { background-position: 50% 0%; }
  100% { background-position: 50% -100%; }
}

@keyframes mvkPan {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + min(100vw, 1240px) - 40px)); }
}

@keyframes mvkSweep { 0% { left: -46%; } 60%, 100% { left: 100%; } }

@keyframes mvkCross {
  from { opacity: 0; transform: translateY(14px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes mvkFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes mvkAcc {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mvkPdpIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mvkPdpImg {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes mvkMega {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.mvk-wrap      { max-width: var(--mvk-max);      margin: 0 auto; padding-inline: var(--mvk-pad); }
.mvk-wrap--wide{ max-width: var(--mvk-max-wide); margin: 0 auto; padding-inline: var(--mvk-pad); }

.mvk-section { padding-top: var(--mvk-sec-top); padding-bottom: var(--mvk-sec-bottom); }

/* Títulos: los tres valores van siempre juntos */
.mvk-title {
  font-family: var(--mvk-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mvk-title-ls);
  line-height: var(--mvk-title-lh);
  margin: 0;
}

/*
 * 🚨 Las dos pantallas de compra esconden el titulo de la PAGINA, y la regla
 * vive ACA, una sola vez.
 *
 * index.php imprime el titulo con esta clase, y en el checkout eso da
 * "Finalizar la compra" tres centimetros arriba del <h1> de la banda negra, que
 * dice "Finalizá tu compra": la misma frase dos veces y dos <h1> en un mismo
 * documento. En "pedido recibido" pasa lo mismo con el titular de gracias.
 *
 * Estaba escrita en checkout.css Y en pedido.css, y el verificador del tema lo
 * corto con un error de colision entre areas — con razon: dos archivos
 * definiendo la misma clase es como se llega a que alguien cambie uno, la mitad
 * del sitio no se entere, y gane el que se encolo ultimo. La clase se define en
 * main.css, asi que su excepcion tambien.
 *
 * Se nombran las dos aunque .woocommerce-checkout ya cubre las dos —la pantalla
 * de pedido recibido es el checkout con su endpoint— porque el dia que alguien
 * mueva "gracias" a una pagina propia, la regla sigue valiendo.
 */
.woocommerce-checkout .mvk-title,
.woocommerce-order-received .mvk-title { display: none; }

/* Rótulo chico: 9–11px, mayúsculas, tracking ancho, gris tenue.
   Por defecto asume fondo CLARO. Sobre negro usar .mvk-eyebrow--dark. */
.mvk-eyebrow {
  font: 600 10px/1 var(--mvk-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mvk-text-soft-light);
}

.mvk-eyebrow--dark { color: var(--mvk-text-soft); }

.mvk-mono { font-family: var(--mvk-mono); }

/* Solo para lectores de pantalla (patrón de WordPress) */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}

/* --- Reveal al entrar en viewport ----------------------------------------
   🚨 El contenido se ve SIEMPRE. La animación se AGREGA al entrar.
   Nunca poner opacity:0 por defecto: si el JS falla o el observer no corre,
   el sitio tiene que verse igual, solo que sin animación. Nada desaparece.
   (Lección del manual de Bubba, sección "El patrón .is-inview".) */
.mvk-reveal.is-inview {
  animation: mvkCross .8s var(--mvk-d, 0s) both var(--mvk-ease);
}

/* Cascada: escalonar con --mvk-d en vez de una regla por hijo */
.mvk-stagger > *          { --mvk-d: 0s; }
.mvk-stagger > *:nth-child(2) { --mvk-d: .07s; }
.mvk-stagger > *:nth-child(3) { --mvk-d: .14s; }
.mvk-stagger > *:nth-child(4) { --mvk-d: .21s; }
.mvk-stagger > *:nth-child(5) { --mvk-d: .28s; }
.mvk-stagger > *:nth-child(6) { --mvk-d: .35s; }

/* ==========================================================================
   Movimiento reducido — bloque obligatorio, neutraliza todo de una
   ========================================================================== */

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

  /* 🚨 Acotado a lo que ANIMA, a propósito.
     Un [class*="mvk-"] { transform:none } parece más prolijo pero rompe todo
     lo que usa transform para POSICIONAR y no para animar: centrados con
     translate(-50%), el logo del menú mobile, las flechas de los carruseles.
     El objetivo es sacar el movimiento, no desarmar el layout. */
  .mvk-reveal,
  [class*="mvk-"][class*="-in"],
  [class*="mvk-"][class*="-reveal"] {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Las de ambiente y las infinitas se cortan siempre */
  [style*="mvkKen"], [style*="mvkDrift"], [style*="mvkBob"],
  [style*="mvkMarquee"], [style*="mvkSpin"], [style*="mvkShine"],
  [style*="mvkLogoSweep"], [style*="mvkLogoBloom"] {
    animation: none !important;
  }
}

/* 🚨 La variante .alt va aparte, y no es redundante.

   woocommerce.css declara .woocommerce a.button.alt con especificidad
   (0,3,1) —una clase mas que la regla base— asi que le gana al selector de
   arriba por ESPECIFICIDAD, no por orden de encolado. Sin esto el borde
   redondeado se corregia pero el fondo VIOLETA (#a46497) quedaba intacto
   justo en el boton mas importante de la pantalla anterior al pago. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt,
.woocommerce-page input.button.alt {
  border-radius: 0;
  background: var(--mvk-black);
  color: var(--mvk-white);
  font: 600 11px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce-page input.button.alt:hover {
  background: var(--mvk-black);
  color: var(--mvk-white);
  opacity: .86;
}