/* RESPONSIVE · Tarot del Pensamiento Complejo
 * Una sola hoja para las 3 páginas (index, mazo, back).
 * Estrategia: las páginas usan inline styles para desktop (defaults).
 * Aquí declaramos breakpoints que sobrescriben los valores críticos
 * con !important — porque inline gana sin !important.
 *
 * Breakpoints:
 *   mobile  ≤ 720px
 *   tablet  721–1023px
 *   desktop ≥ 1024px
 *
 * LECTURA: el stack vertical (canvas-mobile) se usa en TODOS los tamaños.
 *          El canvas con posicionamiento absoluto (canvas-desktop) está
 *          deprecado pero conservado por si vuelves.
 *
 * CARTAS: ahora son responsive vía prop `width` (no transform: scale).
 *         Las páginas usan useResponsiveCardWidth() para pasar un width
 *         adecuado al viewport. Aquí solo ajustamos el layout circundante.
 */

/* ─── LECTURA: siempre stack vertical ────────────────────────────────── */
.canvas-desktop { display: none !important; }
.canvas-mobile { display: block !important; }

/* En desktop el parent del wrap debe acomodar la card 320 sin shrink */
.ritual-card-row { max-width: 360px !important; }

/* ─── Mobile + tablet (≤ 1023px) ─────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Nav: chips más legibles */
  .nav { font-size: 12px !important; }
  .nav a { padding: 13px 12px !important; letter-spacing: 1.8px !important; font-size: 12px !important; }
  .nav.nav-anchors { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .nav.nav-anchors a { display: inline-block; float: none !important; }
  .nav.nav-anchors a[style*="float"] { float: none !important; }

  /* Padding lateral compactado */
  .pad-x { padding-left: 16px !important; padding-right: 16px !important; }
  .pad-x-sm { padding-left: 12px !important; padding-right: 12px !important; }

  /* Padding vertical de secciones */
  .pad-top-xl { padding-top: 40px !important; }
  .pad-y-section { padding-top: 32px !important; padding-bottom: 20px !important; }
  .pad-y-section-sm { padding-top: 24px !important; padding-bottom: 16px !important; }

  /* Tipografía display: shrink moderado (más legible) */
  .h1-display { font-size: clamp(32px, 8.5vw, 48px) !important; letter-spacing: -1px !important; line-height: 1 !important; }
  .h2-display { font-size: clamp(26px, 6.5vw, 36px) !important; letter-spacing: -0.5px !important; line-height: 1 !important; }
  .h3-display { font-size: 24px !important; letter-spacing: -0.3px !important; }

  /* Cuerpo y leads — body grande tipo Medium */
  .lead { font-size: 18px !important; line-height: 1.55 !important; }
  .lead-sm { font-size: 16px !important; line-height: 1.5 !important; }

  /* Micro-tags meta (uppercase, JetBrains Mono) — vía attribute selectors
     porque están como inline styles inline en JSX. Los más grandes
     (letter-spacing 5/4) son los tags meta de secciones; suben más. */
  [style*="letter-spacing: 5"] {
    font-size: 14px !important;
    letter-spacing: 2.5px !important;
    line-height: 1.45 !important;
  }
  [style*="letter-spacing: 4"] {
    font-size: 13.5px !important;
    letter-spacing: 2.5px !important;
  }
  [style*="letter-spacing: 3"]:not(.btn) {
    font-size: 13px !important;
    letter-spacing: 2.2px !important;
  }
  /* Etiquetas debajo de cards ("MAYOR I · EL MAGO") — fontSize 9, letterSpacing 2 */
  [style*="font-size: 9px"][style*="letter-spacing: 2"] {
    font-size: 11.5px !important;
    letter-spacing: 1.8px !important;
  }
  /* Subtítulos del spread selector — el cursive "Diagnóstico veloz" etc. */
  .spread-selector button > div:last-child {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Cover meta: wrap */
  .cover-meta { gap: 10px 18px !important; flex-wrap: wrap !important; }
  .cover-svg { width: 260px !important; height: 260px !important; right: -50px !important; top: -30px !important; }

  /* Suit divider compacto */
  .suit-row { gap: 14px !important; }
  .suit-glyph { width: 44px !important; height: 44px !important; font-size: 22px !important; flex-shrink: 0; }

  /* Grids — el grid de cartas en mobile pasa a una columna fluida */
  .grid-cards { grid-template-columns: 1fr !important; gap: 28px 0 !important; justify-content: center !important; justify-items: center !important; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 4px 0 !important; }
  .grid-auto-fit { grid-template-columns: 1fr !important; }

  /* Flex rows → columna */
  .stack-on-mobile { flex-direction: column !important; gap: 24px !important; }
  .stack-on-mobile-sm { flex-direction: column !important; gap: 16px !important; }

  /* LECTURA: spread selector → grid hasta 2 columnas, sin borders sobrantes */
  .spread-selector { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .spread-selector button {
    padding: 14px 14px !important;
    border-right: 1px solid rgba(232,220,192,0.12) !important;
    border-bottom: 1px solid rgba(232,220,192,0.12) !important;
  }
  /* sin border-right en columna par (final de fila) */
  .spread-selector button:nth-child(even) { border-right: none !important; }
  /* sin border-bottom en los últimos 2 (última fila) */
  .spread-selector button:nth-last-child(-n+2) { border-bottom: none !important; }
  .spread-name { font-size: 20px !important; }

  /* LECTURA: breakdown row solo texto (la carta ya está a tamaño real en el stack) */
  .breakdown-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .breakdown-row > div:first-child { display: none !important; }
  .breakdown-meaning-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .breakdown-name { font-size: 22px !important; }

  /* LECTURA: card row del stack ocupa el ancho útil */
  .ritual-card-row { max-width: 100% !important; width: 100% !important; }
  .ritual-card-wrap { display: flex; justify-content: center; }
  .ritual-card-wrap > * { flex-shrink: 0; }

  /* Botones de acción más grandes para touch y legibilidad */
  .btn { padding: 18px 24px !important; font-size: 14px !important; letter-spacing: 2.5px !important; }

  /* BACK: comparativa frente/dorso wraps */
  .compare-row { gap: 24px !important; flex-direction: column !important; align-items: center !important; }
  .compare-pair { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
}

/* ─── Tablet (721–1023): tipografía intermedia + selector 4 col ─────── */
@media (min-width: 721px) and (max-width: 1023px) {
  .pad-x { padding-left: 32px !important; padding-right: 32px !important; }
  .h1-display { font-size: clamp(40px, 6vw, 60px) !important; }
  .h2-display { font-size: clamp(30px, 5vw, 42px) !important; }
  .h3-display { font-size: 24px !important; }
  .spread-selector { grid-template-columns: 1fr 1fr !important; }
  .spread-selector button { padding: 16px 18px !important; }
  .breakdown-row { grid-template-columns: 1fr !important; }
  .breakdown-row > div:first-child { display: none !important; }
  .breakdown-meaning-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Touch-friendly: nada de hover-only en táctil */
@media (hover: none) {
  .card-slot:hover { transform: none !important; }
}