/* =============================================================
   JALIOR · SISTEMA VISUAL GLOBAL
   Creada 2026-08-08. Lujo silencioso, editorial, mobile-first.

   POR QUÉ EXISTE
   El CSS del sitio está repartido entre 6 hojas, 14 inyecciones por
   JavaScript y un <style> inline en cada una de las 37 páginas. Tocar
   cada sitio por separado garantizaba romper algo. Esta hoja se carga
   la ÚLTIMA (al final del <body>, después incluso de enigme-trabaja.css)
   y unifica lo transversal: escala tipográfica, alturas táctiles,
   safe-area del iPhone y comportamiento de header, footer, formularios
   y modales.

   QUÉ NO HACE
   No renombra ninguna clase ni id (el JavaScript los consulta), no toca
   la lógica, ni los precios, ni las rutas. Solo valores visuales.
   ============================================================= */

:root {
  /* Ritmo de página */
  --page-padding: clamp(18px, 5vw, 48px);
  --section-spacing: clamp(44px, 9vw, 96px);
  --grid-gap: clamp(14px, 3.6vw, 32px);

  /* Tinta */
  --text-primary: #0A0A0A;
  --text-secondary: #4A4A4A;
  --text-muted: #8A8A8A;
  --border-color: rgba(10, 10, 10, 0.12);
  --border-hairline: rgba(10, 10, 10, 0.07);
  --surface: #FFFFFF;
  --surface-soft: #FAFAF8;
  --champagne: #B89968;

  /* Tipografía: TODO serif (decisión de Dirección 2026-08-08).
     Cinzel es una romana lapidaria: preciosa en rótulos y botones en
     mayúsculas, ilegible en un párrafo largo — por eso se reserva para
     textos cortos. Cormorant Garamond es la que se lee.
     Didot y Bodoni MT quedan solo de reserva: no existen en Android ni en
     casi ningún Windows, y cuando faltan el navegador cae a Times New Roman. */
  --font-serif: 'Cormorant Garamond', Didot, 'Bodoni MT', Georgia, 'Times New Roman', serif;
  --font-display: 'Cinzel', 'Cormorant Garamond', Didot, Georgia, serif;
  --font-sans: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Área táctil mínima cómoda */
  --tap-min: 44px;

  /* Bordes del dispositivo (iPhone con notch y barra de gestos) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ─────────────────────────────────────────────────────────────
   1 · SIN DESBORDE HORIZONTAL
   Una sola barra lateral basta; nada debe empujar la página a lo ancho.
   ───────────────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe, table { max-width: 100%; }
img, svg, video, canvas { height: auto; }

/* ─────────────────────────────────────────────────────────────
   2 · HEADER — poca altura en móvil, marca siempre legible
   En un iPhone medía 113 px: casi un séptimo de la pantalla.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .navbar {
    padding: 11px calc(var(--page-padding) - 4px) !important;
    padding-top: calc(11px + var(--safe-top)) !important;
    min-height: 0 !important;
    gap: 8px;
  }
  /* La marca es una IMAGEN (jalior-logo.png), no texto: ocupaba 50 px de alto
     ella sola y era la causa real de que el header midiera 113 px. */
  .navbar .brand-nav {
    font-size: 1.16rem !important;
    letter-spacing: .3em !important;
    margin-right: -.3em;
    line-height: 1.05 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
  }
  .navbar .brand-nav img {
    height: 22px !important;
    width: auto !important;
    max-width: 132px;
    display: block;
  }
  /* Los enlaces y botones de la barra tampoco deben estirarla. */
  .navbar :where(a, button, .dropbtn) { line-height: 1.15; }
  .navbar .dropbtn { padding: 8px 0 !important; }
  /* Los iconos de bolsa y favoritos: cuadrados, alineados y pulsables. */
  .navbar .btn-action {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .navbar .btn-menu-brand {
    min-height: var(--tap-min);
    padding: 0 14px !important;
    display: inline-flex;
    align-items: center;
  }
  /* La bolsa dejaba de latir: el movimiento constante no es elegante. */
  .btn-cart-nav { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   2 bis · HEADER FIJO EN TODA LA COMPRA
   La bolsa y los favoritos tienen que estar siempre a un dedo de
   distancia: nadie debería volver arriba para ver qué lleva.
   ───────────────────────────────────────────────────────────── */
.navbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
/* El ancla de las secciones no debe quedar debajo de la barra. */
:where([id]) { scroll-margin-top: 96px; }

/* ─────────────────────────────────────────────────────────────
   3 · TIPOGRAFÍA — una sola escala para todo el sitio
   Serif en lo editorial, sans en lo funcional.
   ───────────────────────────────────────────────────────────── */
/* Toda la casa habla en serif: nada de sans sueltas por el camino.
   Se excluyen los paneles internos (body.enigme-pro), que son herramientas
   de trabajo y necesitan una sans compacta para leer tablas y cifras.
   El body lleva su propia regla: cada página trae un <style> inline que le
   fija la familia, y sin esto la portada seguía en Helvetica. */
/* enigme-luxury.css fija Montserrat en el body con !important; para que la
   casa hable en serif hace falta responder con la misma moneda. */
body:not(.enigme-pro) {
  font-family: var(--font-serif) !important;
}
body:not(.enigme-pro) :where(
  p, li, td, th, dd, dt, span, div, a, blockquote, figcaption, small,
  input, select, textarea, label, .precio, .price, .product-price
) {
  font-family: var(--font-serif);
}
/* Rótulos, botones y navegación: la romana en mayúsculas. */
body:not(.enigme-pro) :where(
  button, .btn, .boton, .btn-action, .btn-menu-brand, .dropbtn,
  .nav a, .navbar a, .et-btn, .et-tipo, .et-eyebrow, .sh-eyebrow,
  .eyebrow, .kicker, [class*="eyebrow"], [class*="kicker"]
) {
  font-family: var(--font-display);
  font-weight: 400;
}

:where(h1, h2, h3, .page-title, .section-title, .hero-title) {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.16;
  text-wrap: balance;
}
/* Cinzel no tiene minúsculas de verdad: en un título largo en caja baja
   se lee peor que Cormorant. Ahí manda la de lectura. */
:where(h1, h2, h3):not([class*="upper"]):not(.et-title) {
  font-family: var(--font-serif);
}
:where(h1, h2, h3)[class*="upper"],
.et-title, .sh-hero h1, .page-title {
  font-family: var(--font-display);
}
/* Excepciones que sí quieren Cinzel. Van con :is() y no con :where() a
   propósito: :where() no suma especificidad y estas reglas tienen que ganarle
   tanto a la que fuerza la serif en todo div/span/a como a la de arriba que se
   la impone a los títulos en caja baja. Aquí solo entran rótulos que ya se
   pintan en mayúsculas, que es donde Cinzel se lee bien. */
body:not(.enigme-pro) :is(.sn-title, .sn-rot, .sn-k, .sn-num, .sn-cta a) {
  font-family: var(--font-display);
}

:where(h1) { font-size: clamp(1.75rem, 6.4vw, 3.1rem); letter-spacing: .015em; }
:where(h2) { font-size: clamp(1.35rem, 4.8vw, 2.1rem); letter-spacing: .02em; }
:where(h3) { font-size: clamp(1.08rem, 3.6vw, 1.4rem); letter-spacing: .03em; }
:where(p, li) { line-height: 1.75; }
:where(p) { text-wrap: pretty; }

/* Nada de líneas de texto interminables en tablet y escritorio. */
@media (min-width: 760px) {
  :where(main p, article p, .contenido p, section > p) { max-width: 68ch; }

  /* Un texto centrado necesita además la CAJA centrada. Con solo el max-width de
     arriba, el párrafo se pega al borde izquierdo y su texto queda centrado dentro
     de esa caja estrecha: en escritorio se ve descolgado del título, que sí ocupa
     todo el ancho. Se acota a contenedores que centran de verdad porque aplicarlo
     a todos movería al centro las columnas de texto de las páginas legales y de
     /joyeria-honduras, que van alineadas a la izquierda a propósito. */
  :where(.sn-body, .sn-hero, .texto-centrado) :where(p),
  [style*="text-align:center"] > p,
  [style*="text-align: center"] > p { margin-inline: auto; }
}

/* ─────────────────────────────────────────────────────────────
   4 · FORMULARIOS — cómodos con el pulgar y sin zoom en iPhone
   Safari hace zoom automático en cualquier campo por debajo de 16px.
   ───────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font-size: max(16px, 1rem);
  font-family: var(--font-sans);
  min-height: var(--tap-min);
  padding: 12px 14px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
textarea { min-height: 96px; line-height: 1.6; }

label {
  font-family: var(--font-sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Errores legibles, no un susurro rojo de 9px. */
:where(.error, .form-error, .field-error, .msg-error) {
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.5;
  color: #B8232F;
}

/* Botones: rectangulares y con área táctil suficiente. */
:where(button, .btn, .boton, [role="button"]) { min-height: var(--tap-min); }

/* Cinzel es más estrecha que una sans al mismo tamaño y va con mucho tracking:
   por debajo de 11 px deja de leerse. Suelo mínimo para todo lo pulsable. */
body:not(.enigme-pro) :where(button, .btn, .boton, .btn-action, .et-btn, .sh-btn, .dropbtn) {
  font-size: max(0.7rem, 11px);
}

/* Lo mismo con los rótulos espaciados: lemas, antetítulos y notas del pie
   caían a 9 px, y con .4em de tracking eso es una fila de puntos. */
body:not(.enigme-pro) :where(
  .hero__slogan, .footer__slogan, .footer__note, .sh-slogan,
  .eyebrow, .kicker, [class*="eyebrow"], [class*="kicker"], [class*="slogan"]
) {
  font-size: max(0.72rem, 11.5px);
}

/* ─────────────────────────────────────────────────────────────
   5 · FOCO VISIBLE — navegación con teclado sin cambiar el diseño
   ───────────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   6 · MODALES Y PANELES — nunca más altos que la pantalla
   100dvh descuenta la barra del navegador móvil; 100vh no.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :where(.et-overlay, .modal-overlay, .overlay, #enigme-account-overlay) {
    padding: 16px 14px calc(16px + var(--safe-bottom));
    align-items: flex-start;
  }
  :where(.et-modal, .modal, .modal-card, .enigme-account-card) {
    max-height: calc(100dvh - 32px - var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }
  /* Menús a pantalla completa: respetan notch y barra de gestos. */
  :where(.nav-overlay, .menu-fullscreen, .drawer, .cart-drawer) {
    height: 100dvh;
    padding-top: calc(18px + var(--safe-top));
    padding-bottom: calc(18px + var(--safe-bottom));
  }
  /* El botón de cerrar siempre alcanzable con el pulgar. */
  :where(.et-close, .modal-close, .close-btn) {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
}

/* ─────────────────────────────────────────────────────────────
   7 · FOOTER — aire, enlaces pulsables, legales discretos
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :where(footer, .footer, .site-footer) {
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: calc(28px + var(--safe-bottom));
  }
  :where(footer, .footer) a {
    display: inline-block;
    padding: 9px 0;
    line-height: 1.5;
    min-height: 38px;
  }
  /* Enlaces sueltos del cuerpo: sitio para el pulgar sin romper el texto. */
  :where(main, section, .contenido) a:not(.btn):not(.boton):not([class*="card"]) {
    padding-block: 3px;
  }
  :where(footer, .footer) :where(.legal, .legales, .footer-legal, small) {
    font-size: max(.68rem, 11px);
    line-height: 1.9;
    color: var(--text-muted);
  }
  /* Los enlaces del pie estaban a 6,7 px: en un móvil eso no se lee ni se
     acierta. Sin :where() y con !important a propósito: las hojas antiguas
     fijan estos tamaños con más peso del que tendría un selector neutro. */
  body:not(.enigme-pro) footer a,
  body:not(.enigme-pro) footer p,
  body:not(.enigme-pro) footer li,
  body:not(.enigme-pro) .footer a,
  body:not(.enigme-pro) .footer p {
    font-size: max(0.72rem, 11.5px) !important;
  }
  /* Y un suelo general para cualquier párrafo de texto corrido, viva donde
     viva. Se excluyen etiquetas y contadores, que sí deben ser diminutos. */
  body:not(.enigme-pro) p:not([class*="badge"]):not([class*="counter"]):not([class*="tag"]):not([class*="chip"]) {
    font-size: max(1em, 11.5px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8 · FLOTANTES — sin invadir la última fila de productos
   ───────────────────────────────────────────────────────────── */
/* Prefijadas con body a propósito: las hojas antiguas y los <style> inline de
   cada página fijan bottom/right con !important, así que hace falta más
   especificidad para ganarles. Sin :where(), que anularía la especificidad. */
body .whatsapp-float,
body .fab-container,
body #abril-toggle-btn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}
body .whatsapp-float {
  right: calc(16px + var(--safe-right)) !important;
  width: 46px !important;
  height: 46px !important;
  animation: none !important;
}
body .whatsapp-float::after { content: none !important; }
body #abril-toggle-btn { left: calc(16px + var(--safe-left)) !important; }

/* Aire al final de la página para que nada quede bajo los flotantes. */
@media (max-width: 700px) {
  body { padding-bottom: calc(12px + var(--safe-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
   9 · MENOS MOVIMIENTO PARA QUIEN LO PIDE
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
