/* =============================================================================
   Glotus — pages/cursos.css · CSS condicional del archive /cursos (Pieza 03)
   -----------------------------------------------------------------------------
   v1.0 (2026-06-11) — hero + pins + card grid + nota; header de referencia y
   panel Tweaks STRIPPED (ruling CD). Mapeos según pre-sync v14.2: sombra de
   card → shadow-3; hex de track → tokens (incl. coral-700); ink-300 no se
   acuña → ink-400; border-2 → border-line. CSS dormido de Foundation
   (variation B strip / C frame) se conserva con disable-line.
   Enqueue: is_post_type_archive('curso') · dep components.
   ============================================================================= */

/* ====================================================================
     HERO + CATEGORY PINS
     ==================================================================== */
  .catalog-hero{padding:88px 0 40px;position:relative;overflow:hidden}
  .catalog-hero__inner{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
  .catalog-hero__eyebrow{
    font-family:var(--glotus-font-mono);font-size:12px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--glotus-ink-600);margin:0 0 16px;
  }
  .catalog-hero h1{
    font-family:var(--glotus-font-serif);font-weight:500;font-size:80px;line-height:0.98;
    letter-spacing:-.025em;margin:0 0 20px;color:var(--glotus-ink-900);max-width:14ch;
  }
  .catalog-hero h1 em{font-style:italic;color:var(--glotus-teal-650)}
  .catalog-hero__lede{
    font-size:22px;line-height:1.4;color:var(--glotus-ink-600);
    margin:0 0 36px;max-width:38ch;
  }
  .catalog-hero__watermark{
    position:absolute;top:-40px;right:-80px;width:520px;height:520px;
    opacity:.07;pointer-events:none;z-index:0;
  }

  .category-pins{
    display:flex;gap:8px;flex-wrap:wrap;
    padding:14px 0 0;border-top:1px solid var(--glotus-bone);max-width:1200px;margin:0 auto;
  }
  .category-pins a{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px 8px 12px;border-radius:999rem;
    background:transparent;border:1px solid var(--glotus-bone);
    color:var(--glotus-ink-900);font-size:14px;text-decoration:none;
    transition:border-color 120ms,background 120ms;
  }
  .category-pins a::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--glotus-ink-400);
  }
  .category-pins a:hover{border-color:var(--glotus-border-line);background:var(--glotus-bg-elevated)}
  .category-pins a[aria-current="page"]{
    background:var(--glotus-ink-900);color:var(--glotus-paper);border-color:var(--glotus-ink-900);font-weight:500;
  }
  .category-pins a[aria-current="page"]::before{background:var(--glotus-coral-400)}

  /* ====================================================================
     CARD GRID
     ==================================================================== */
  .catalog{padding:48px 0 96px}
  .catalog__inner{max-width:1200px;margin:0 auto;padding:0 32px}
  .catalog__grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  }
  @media (max-width:760px){.catalog__grid{grid-template-columns:1fr}}

  .course-card{
    --card-bg:var(--glotus-bg-elevated);
    --card-border:var(--glotus-bone);
    --card-border-width:1px;
    --card-border-style:solid;
    --status-color:var(--glotus-teal-650);
    --status-bg:color-mix(in srgb, var(--glotus-teal-650) 8%, transparent);
    --title-opacity:1;
    --illus-opacity:1;
    --cta-mode:primary;

    position:relative;background:var(--card-bg);
    border:var(--card-border-width) var(--card-border-style) var(--card-border);
    border-radius:18px;padding:32px;
    display:flex;flex-direction:column;gap:20px;
    transition:border-color 200ms cubic-bezier(.2,0,0,1),box-shadow 200ms cubic-bezier(.2,0,0,1);
  }
  .course-card:hover{border-color:var(--glotus-border-line);box-shadow:var(--glotus-shadow-3)}

  /* State styles — applied per [data-state] under the active variation */
  .course-card[data-state="cohort"]{
    --status-color:var(--glotus-coral-550);
    --status-bg:color-mix(in srgb, var(--glotus-coral-550) 10%, transparent);
  }
  .course-card[data-state="upcoming"]{
    --status-color:var(--glotus-ink-600);
    --status-bg:color-mix(in srgb, var(--glotus-ink-600) 6%, transparent);
    --illus-opacity:.55;
    --cta-mode:ghost;
  }

  /* VARIATION B — structural (default until we wire tweaks).
     The cards also receive these treatments by default to match the demo. */
  .catalog__grid[data-variation="B"] .course-card[data-state="cohort"]{
    --card-border-color:var(--glotus-coral-400);
  }
  .catalog__grid[data-variation="B"] .course-card[data-state="cohort"]::after{
    content:"Cohorte fundadora · cerramos inscripciones el 15/07";
    display:block;margin:-4px -32px -32px;padding:14px 32px;
    background:color-mix(in srgb, var(--glotus-coral-550) 7%, transparent);color:var(--glotus-coral-700);
    font-size:13px;font-weight:500;
    border-top:1px solid color-mix(in srgb, var(--glotus-coral-550) 18%, transparent);
    border-bottom-left-radius:18px;border-bottom-right-radius:18px;
  }

  /* VARIATION C — frame */
  .catalog__grid[data-variation="C"] .course-card[data-state="cohort"]{
    --card-border-width:2px;--card-border:var(--glotus-coral-400);
  }
  .catalog__grid[data-variation="C"] .course-card[data-state="upcoming"]{
    --card-border-style:dashed;--card-border:#C5BCAE; /* stylelint-disable-line scale-unlimited/declaration-strict-value -- CSS dormido de Foundation (Pieza 03), se reactiva con TEFL; literal documentado */
  }

  .card__status{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    padding:5px 11px;border-radius:999rem;
    background:var(--status-bg);color:var(--status-color);
    font-family:var(--glotus-font-mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;font-weight:600;
  }
  .card__status::before{
    content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  }
  .card__status--upcoming::before{background:transparent;border:1.5px solid currentColor}

  .card__illus{
    width:100%;height:140px;border-radius:10px;
    background:linear-gradient(135deg,var(--glotus-bone) 0%,var(--glotus-paper) 100%);
    opacity:var(--illus-opacity);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .card__illus svg{width:100%;height:100%;display:block}

  .card__body{display:flex;flex-direction:column;gap:14px;opacity:var(--title-opacity)}
  .card__title{
    font-family:var(--glotus-font-serif);font-weight:500;font-size:34px;line-height:1.05;
    letter-spacing:-.015em;color:var(--glotus-ink-900);margin:0;
  }
  .card__promise{
    font-size:16px;line-height:1.45;color:var(--glotus-ink-600);margin:0;
    max-width:46ch;
  }

  .card__stats{
    display:flex;gap:0;flex-wrap:wrap;margin:0;padding:0;list-style:none;
    border-top:1px solid var(--glotus-bone);border-bottom:1px solid var(--glotus-bone);
  }
  .card__stats li{
    flex:1;min-width:0;padding:14px 16px 14px 0;
    display:flex;flex-direction:column;gap:2px;
  }
  .card__stats li + li{padding-left:16px;border-left:1px solid var(--glotus-bone)}
  .card__stats dt{
    font-family:var(--glotus-font-mono);font-size:10px;letter-spacing:.10em;
    text-transform:uppercase;color:var(--glotus-ink-600);margin:0;font-weight:600;
  }
  .card__stats dd{
    margin:0;font-size:15px;font-weight:500;color:var(--glotus-ink-900);
    line-height:1.25;
  }

  .card__footer{
    display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    margin-top:auto;
  }
  .card__price{display:flex;flex-direction:column;gap:2px;min-width:0}
  .card__price-anchor{
    font-family:var(--glotus-font-serif);font-weight:500;font-size:28px;
    color:var(--glotus-ink-900);line-height:1;letter-spacing:-.01em;
  }
  .card__price-cuotas{
    font-size:13px;color:var(--glotus-ink-600);line-height:1.3;
  }
  .card__price--waitlist{
    font-size:14px;line-height:1.4;color:var(--glotus-ink-600);max-width:30ch;
  }
  .card__price--waitlist strong{color:var(--glotus-ink-900);font-weight:600;display:block}

  .card__cta{
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    background:var(--glotus-teal-650);color:var(--glotus-paper);border:1px solid var(--glotus-teal-650);
    padding:11px 18px;border-radius:10px;text-decoration:none;
    font-weight:600;font-size:15px;transition:background 120ms;
  }
  .card__cta:hover{background:var(--glotus-teal-700)}
  .course-card[data-state="upcoming"] .card__cta{
    background:transparent;color:var(--glotus-ink-900);border-color:var(--glotus-border-line);
  }
  .course-card[data-state="upcoming"] .card__cta:hover{
    background:var(--glotus-bg-elevated);border-color:var(--glotus-ink-900);
  }

  /* ====================================================================
     POST-GRID MICROCOPY
     ==================================================================== */
  .catalog__note{
    margin-top:36px;padding:20px 24px;background:var(--glotus-bg-elevated);border:1px solid var(--glotus-bone);
    border-left:3px solid var(--glotus-teal-650);border-radius:12px;
    display:flex;gap:14px;align-items:flex-start;max-width:780px;
  }
  .catalog__note svg{width:18px;height:18px;color:var(--glotus-teal-650);flex-shrink:0;margin-top:2px}
  .catalog__note p{margin:0;font-size:14px;line-height:1.55;color:var(--glotus-ink-700)}

/* ===================== GLOTUS-PARCHE-20260828-CSS =====================
   Piso tipografico 13px en el catalogo. La fila de stats NO entra en tres
   columnas a 375: el ancho util por columna es 56px y MODALIDAD necesita 82.
   Ya desbordaba a 10px (63 sobre 56). A <=767 las tres se apilan.
   =============================================================== */
.catalog-hero__eyebrow{font-size:13px}
.card__status{font-size:13px}
.card__stats dt{font-size:13px}
@media (max-width:767px){
  .card__stats{flex-direction:column}
  .card__stats li{padding:12px 0}
  .card__stats li + li{padding-left:0;border-left:0;border-top:1px solid var(--glotus-bone)}
}