/* ==========================================================================
   MAVERICK 1997 — paginas.css
   Las seis páginas de ayuda y legales: navegación lateral, cuerpo del
   documento y acordeón de preguntas frecuentes.

   Prefijo exclusivo: .mvk-doc-*  (más la raíz .mvk-doc)

   Medidas calcadas del prototipo (referencia/Maverick Tienda.dc.html,
   l.800-856). Dos cambios respecto de ahí, los dos a propósito:

   · Los grises de rótulo eran #9a958e sobre BLANCO, que da 2.97:1 y no llega
     al 4.5:1 de WCAG AA. Sobre claro va --mvk-text-soft-light. El #9a958e
     sigue siendo correcto sobre el negro de marca, pero acá no hay fondo
     oscuro.
   · La letra del título usa var(--mvk-title-ls) y var(--mvk-title-lh) en vez
     de los valores sueltos, que es la regla de fidelidad nº 3.

   ⚠️ Nada de markup vectorial ni data-URI vectorial en este archivo: la CDN
   de Hostinger deja inguardable por el editor cualquier archivo que lo tenga.
   ========================================================================== */

.mvk-doc {
  /* Tinta del cuerpo: el #4a4744 del prototipo. Es más oscuro que
     --mvk-text-mid porque son textos largos, de leer entero. */
  --mvk-doc-ink: #4A4744;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* El título de la página lo pone la presentación, así que la plantilla deja un
   h1 vacío. Se oculta por :empty y no por una clase: sirve igual si mañana la
   página la dibuja otra plantilla. */
body.mvk-doc-page h1:empty { display: none; }

/* ==========================================================================
   Navegación lateral
   ========================================================================== */

/* En celular es una fila de cápsulas rectas; a partir de 760 pasa a columna
   pegajosa, que es lo que hace el prototipo con su breakpoint mob. */
.mvk-doc-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;   /* hijo de grid: sin esto aparece scroll horizontal */
}

.mvk-doc-nav-link {
  padding: 9px 13px;
  border: 1px solid var(--mvk-line);
  border-radius: 0;
  background: transparent;
  color: var(--mvk-text-soft-light);
  font: 400 11.5px/1.4 var(--mvk-sans);
  text-align: left;
  transition:
    color .3s var(--mvk-ease),
    border-color .3s var(--mvk-ease),
    background .3s var(--mvk-ease);
}

/* (0,2,0) para ganarle al a:hover de main.css, que es (0,1,1). */
.mvk-doc-nav-link:hover,
.mvk-doc-nav-link:focus-visible { color: var(--mvk-black); border-color: var(--mvk-black); }

.mvk-doc-nav-link[aria-current="page"] {
  border-color: var(--mvk-black);
  background: var(--mvk-black);
  color: var(--mvk-white);
  font-weight: 600;
}

@media (min-width: 760px) {
  .mvk-doc { grid-template-columns: minmax(190px, .5fr) minmax(0, 1.6fr); }

  .mvk-doc-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    position: sticky;
    /* 🚨 El token, no un clamp a mano. El clamp(80px, 9vw, 110px) que había
       acá no describía ningún alto real del header: entre 760 y 1080 daba
       80-97px contra los 102px que mide el bloque fijo ya scrolleado, así que
       el índice del documento se metía DEBAJO del header y los primeros
       enlaces quedaban tapados. Es --mvk-hdr-offset-scrolled y no
       --mvk-hdr-offset porque esto se pega: para que despegue hay que haber
       scrolleado, y ahí el header ya se encogió (ver header.css §0). */
    top: calc(var(--mvk-hdr-offset-scrolled, var(--mvk-hdr-offset, 102px)) + 16px);
  }

  .mvk-doc-nav-link {
    padding: 9px 0 9px 16px;
    border: 0;
    border-inline-start: 1px solid var(--mvk-line);
    background: transparent;
  }

  .mvk-doc-nav-link:hover,
  .mvk-doc-nav-link:focus-visible { border-inline-start-color: var(--mvk-black); }

  .mvk-doc-nav-link[aria-current="page"] {
    border-inline-start-color: var(--mvk-black);
    background: transparent;
    color: var(--mvk-black);
  }
}

/* ==========================================================================
   Cuerpo del documento
   ========================================================================== */

.mvk-doc-body {
  min-width: 0;   /* hijo de grid */
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 40px);
}

.mvk-doc-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--mvk-line);
}

.mvk-doc-kicker {
  font: 500 9px/1 var(--mvk-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--mvk-text-soft-light);
}

.mvk-doc-title {
  margin: 0;
  font-family: var(--mvk-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: var(--mvk-title-lh);
  letter-spacing: var(--mvk-title-ls);
  text-transform: uppercase;
  color: var(--mvk-black);
}

.mvk-doc-updated {
  font: 300 12.5px/1.6 var(--mvk-sans);
  color: var(--mvk-text-soft-light);
}

/* --- Secciones ----------------------------------------------------------- */

.mvk-doc-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
}

.mvk-doc-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mvk-doc-h {
  margin: 0;
  font: 600 11px/1.3 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mvk-black);
}

/* Los párrafos van pegados: en el prototipo eran un solo <p> con pre-line, o
   sea saltos de línea sin aire extra entre medio. */
.mvk-doc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* La medida de lectura va en el párrafo y no en el contenedor: así el
   formulario de arrepentimiento, que también es un hijo de una sección, puede
   usar el ancho completo sin romper el ancho de lectura del texto legal. */
.mvk-doc-text > p {
  margin: 0;
  max-width: 70ch;
  font: 300 14.5px/1.75 var(--mvk-sans);
  color: var(--mvk-doc-ink);
  text-wrap: pretty;
}

/* --- Los locales, dentro de una respuesta -------------------------------- */

.mvk-doc-stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-block-start: 6px;
}

.mvk-doc-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 9px 0;
  border-bottom: 1px solid var(--mvk-line-input);
  color: var(--mvk-black);
  font: 500 12.5px/1.3 var(--mvk-sans);
  transition: border-color .3s var(--mvk-ease), gap .3s var(--mvk-ease);
}

.mvk-doc-store:hover,
.mvk-doc-store:focus-visible { border-bottom-color: var(--mvk-black); color: var(--mvk-black); gap: 16px; }

.mvk-doc-store-arrow { flex: none; }

/* ==========================================================================
   Acordeón de preguntas frecuentes
   ========================================================================== */

.mvk-doc-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--mvk-line);
}

.mvk-doc-item {
  border-bottom: 1px solid var(--mvk-line);
  min-width: 0;
}

.mvk-doc-q {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  width: 100%;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mvk-text-mid);
  text-align: left;
  cursor: pointer;
  transition: color .3s var(--mvk-ease);
}

.mvk-doc-q:hover,
.mvk-doc-q[aria-expanded="true"] { color: var(--mvk-black); }

.mvk-doc-n {
  flex: none;
  font: 400 10px/1 var(--mvk-mono);
  letter-spacing: .14em;
  color: var(--mvk-text-soft-light);
  transition: color .3s var(--mvk-ease);
}

.mvk-doc-q[aria-expanded="true"] .mvk-doc-n { color: var(--mvk-black); }

.mvk-doc-qt {
  flex: 1;
  min-width: 0;
  font-family: var(--mvk-display);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 23px);
  line-height: 1.15;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

/* El "+" que gira 135° y queda hecho una "×". Círculo, así que el 50% de radio
   es de los tres casos que el diseño permite. */
.mvk-doc-sign {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--mvk-line-input);
  border-radius: 50%;
  background: transparent;
  color: var(--mvk-black);
  transition:
    transform .45s var(--mvk-ease),
    background .3s var(--mvk-ease),
    border-color .3s var(--mvk-ease),
    color .3s var(--mvk-ease);
}

.mvk-doc-q[aria-expanded="true"] .mvk-doc-sign {
  transform: rotate(135deg);
  border-color: var(--mvk-black);
  background: var(--mvk-black);
  color: var(--mvk-white);
}

/* El panel se abre con grid-template-rows de 0fr a 1fr: no hace falta medir el
   alto con JavaScript y la transición sale suave igual.

   Nada de opacity como estado por defecto (regla del manual): si el script no
   llega a cargar, las respuestas quedan cerradas pero el documento entero
   sigue en el HTML y las otras cinco páginas se leen enteras. */
.mvk-doc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--mvk-ease);
}

.mvk-doc-item.is-open .mvk-doc-panel { grid-template-rows: 1fr; }

/* visibility, y no solo overflow: un panel de alto cero sigue siendo
   navegable con el lector de pantalla y con el tabulador. El retardo de medio
   segundo al cerrar es para que la animación se vea completa. */
/* El relleno inferior no hace saltar nada al cerrar porque main.css pone
   box-sizing:border-box en todo: con la fila en 0fr el alto del bloque es 0 y
   el relleno queda absorbido. */
.mvk-doc-panel-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  padding-block-end: clamp(20px, 2.4vw, 30px);
  padding-inline-start: clamp(28px, 4vw, 54px);
  padding-inline-end: 48px;
  transition: visibility 0s linear .5s;
}

.mvk-doc-item.is-open .mvk-doc-panel-inner {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

@media (max-width: 759.98px) {
  .mvk-doc-panel-inner { padding-inline-end: 0; }
}

/* ==========================================================================
   Pie del documento
   ========================================================================== */

.mvk-doc-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid var(--mvk-line);
}

.mvk-doc-ask-text {
  font: 300 13px/1.6 var(--mvk-sans);
  color: var(--mvk-text-mid);
}

.mvk-doc-ask-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid var(--mvk-black);
  border-radius: 0;
  color: var(--mvk-black);
  font: 600 10.5px/1 var(--mvk-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .3s var(--mvk-ease), color .3s var(--mvk-ease);
}

.mvk-doc-ask-cta:hover,
.mvk-doc-ask-cta:focus-visible { background: var(--mvk-black); color: var(--mvk-white); }

/* ==========================================================================
   El formulario de arrepentimiento vive dentro de una sección
   ========================================================================== */

/* El formulario del shortcode se dibuja entero en assets/css/legal.css. Acá
   solo se le da su ancho dentro de la columna del documento: la medida de
   lectura de 70ch vive en el párrafo, no en la sección, así que el formulario
   no la hereda. */
.mvk-doc-text > form { width: 100%; max-width: 720px; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

/* main.css ya neutraliza duraciones y animaciones. Acá solo hace falta cortar
   el retardo de visibility, que no es una duración y sobrevive al bloque
   general: sin esto el panel tarda medio segundo en irse del árbol. */
@media (prefers-reduced-motion: reduce) {
  .mvk-doc-panel-inner { transition-delay: 0s; }
}