/* Maya Corp · Research · design tokens & shared editorial styles */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..700&family=Saira+Condensed:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* Palette extracted from logo */
  --cream:        #f3eada;
  --cream-soft:   #f7efe1;
  --cream-light:  #faf4e8;
  --paper:        #fdfaf0;
  --ink:          #0a2034;
  --navy:         #143a55;
  --navy-2:       #1d4c6d;
  --navy-soft:    #3b6483;
  --sepia:        #7a5c3a;
  --mustard:      #d89321;
  --mustard-deep: #b87714;
  --mustard-soft: #ecbe6a;
  --opinion:      #b85a73;  /* rosa antiguo profundo — kind=opinion (29/05/2026) */
  --opinion-soft: #d9919f;
  --navy-light:   #7fb0d4;  /* azul claro — acento Deep Dive sobre cajas oscuras (01/06/2026) */
  --sepia-soft:   #c2a888;  /* sepia claro — acento Paper sobre cajas oscuras (01/06/2026) */

  --line:         rgba(20, 58, 85, 0.16);
  --line-soft:    rgba(20, 58, 85, 0.07);
  --line-strong:  rgba(10, 32, 52, 0.55);

  --muted:        rgba(20, 58, 85, 0.56);
  --muted-2:      rgba(20, 58, 85, 0.36);

  --serif: 'Newsreader', 'Times New Roman', Times, serif;
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* artboard host reset — each variant gets a fresh editorial canvas */
.maya {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--cream);
  font-feature-settings: 'ss01', 'ss02', 'ss03', 'kern';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.maya *, .maya *::before, .maya *::after { box-sizing: border-box; }
.maya h1, .maya h2, .maya h3, .maya h4, .maya h5, .maya h6, .maya p,
.maya ul, .maya ol, .maya li, .maya figure { margin: 0; padding: 0; }
.maya ul, .maya ol { list-style: none; }
.maya a { color: inherit; text-decoration: none; }

/* Headline serif default — variable italics + opsz */
.maya .h-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.maya .h-serif {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.maya .h-serif-it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.maya .mono-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.maya .mono-meta {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Hairlines & rules */
.maya .rule       { height: 1px; background: var(--line); width: 100%; }
.maya .rule-ink   { height: 1px; background: var(--line-strong); width: 100%; }
.maya .rule-thick { height: 3px; background: var(--ink); width: 100%; }

/* Mustard inline mark */
.maya .mark {
  background-image: linear-gradient(to top, rgba(216,147,33,0.32) 0 38%, transparent 38%);
  padding: 0 0.05em;
}

/* House monogram badge — stands in for source house logo */
.maya .house {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream-light);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.maya .house--lg { width: 44px; height: 44px; font-size: 16px; }
.maya .house--ring {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.maya .house--mustard { background: var(--mustard); color: var(--ink); }

/* Pill tag */
.maya .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 10px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.maya .pill--filled { background: var(--ink); color: var(--cream-light); border-color: var(--ink); }
.maya .pill--mustard { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
/* Pill activo genérico (Todo/Todas/Todos sin color de categoría): fill con ink */
.maya .pill.pill--active { background: var(--ink); color: var(--cream-light); border-color: var(--ink); }
/* Type pills (Corto / Deep Dive): border + bullet siempre; fill cuando .pill--active */
.maya .pill--short { border-color: var(--mustard); color: var(--ink); }
.maya .pill--short::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mustard); }
.maya .pill--short.pill--active { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.maya .pill--short.pill--active::before { background: var(--ink); }
.maya .pill--deep { border-color: var(--navy); color: var(--navy); }
.maya .pill--deep::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.maya .pill--deep.pill--active { background: var(--navy); border-color: var(--navy); color: var(--cream-light); }
.maya .pill--deep.pill--active::before { background: var(--mustard-soft); }
.maya .pill--paper { border-color: var(--sepia); color: var(--sepia); }
.maya .pill--paper::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sepia); }
.maya .pill--paper.pill--active { background: var(--sepia); border-color: var(--sepia); color: var(--cream-light); }
.maya .pill--paper.pill--active::before { background: var(--cream-light); }
.maya .pill--opinion { border-color: var(--opinion); color: var(--opinion); }
.maya .pill--opinion::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--opinion); }
.maya .pill--opinion.pill--active { background: var(--opinion); border-color: var(--opinion); color: var(--cream-light); }
.maya .pill--opinion.pill--active::before { background: var(--opinion-soft); }

/* === Categoría pills (15/05/2026) ====================================
   Paleta "suaves coordinadas" que conviven con cream + mustard.
   El bullet coloreado a la izquierda señala la categoría sin gritar. */
:root {
  --cat-macro:           #d8a7b1;  /* rosa palo */
  --cat-mercados:        #9cae8c;  /* verde salvia */
  --cat-carteras:        #a8bbd0;  /* azul polvo */
  --cat-patrimonio:      #b5a6c7;  /* lavanda */
  --cat-alternativos:    #c68b6f;  /* terracota */
  --cat-otros:           #b0afa8;  /* gris piedra */
}
/* Category pills.
   Default (no activo, no tag): border + bullet del color de categoría — paleta suave, sin fill.
   .pill--active: añade background relleno del color de categoría (filtro activo).
   .pill--tag: alias compatible para tags en cards (sin fill). */
.maya .pill--cat-macro        { border-color: var(--cat-macro); color: var(--ink); }
.maya .pill--cat-mercados     { border-color: var(--cat-mercados); color: var(--ink); }
.maya .pill--cat-carteras     { border-color: var(--cat-carteras); color: var(--ink); }
.maya .pill--cat-patrimonio   { border-color: var(--cat-patrimonio); color: var(--ink); }
.maya .pill--cat-alternativos { border-color: var(--cat-alternativos); color: var(--ink); }
.maya .pill--cat-otros        { border-color: var(--cat-otros); color: var(--ink); }
.maya .pill--cat-macro::before        { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-macro); }
.maya .pill--cat-mercados::before     { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-mercados); }
.maya .pill--cat-carteras::before     { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-carteras); }
.maya .pill--cat-patrimonio::before   { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-patrimonio); }
.maya .pill--cat-alternativos::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-alternativos); }
.maya .pill--cat-otros::before        { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-otros); }
/* Activo: fill con color de categoría */
.maya .pill--cat-macro.pill--active        { background: var(--cat-macro); color: var(--ink); }
.maya .pill--cat-mercados.pill--active     { background: var(--cat-mercados); color: var(--ink); }
.maya .pill--cat-carteras.pill--active     { background: var(--cat-carteras); color: var(--ink); }
.maya .pill--cat-patrimonio.pill--active   { background: var(--cat-patrimonio); color: var(--ink); }
.maya .pill--cat-alternativos.pill--active { background: var(--cat-alternativos); color: var(--ink); }
.maya .pill--cat-otros.pill--active        { background: var(--cat-otros); color: var(--ink); }
/* Cuando activo, el bullet debe contrastar con el fill — ponemos ink */
.maya .pill--cat-macro.pill--active::before,
.maya .pill--cat-mercados.pill--active::before,
.maya .pill--cat-carteras.pill--active::before,
.maya .pill--cat-patrimonio.pill--active::before,
.maya .pill--cat-alternativos.pill--active::before,
.maya .pill--cat-otros.pill--active::before { background: var(--ink); }

/* Section eyebrow numbered like a masthead chapter */
.maya .chapter-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mustard-deep);
  font-weight: 500;
}

/* Buttons */
.maya .btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 22px 14px;
  border-radius: 0;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--cream-light);
  cursor: pointer;
}
.maya .btn--ghost { background: transparent; color: var(--ink); }
.maya .btn--mustard { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }

/* Drop cap for editorial body */
.maya .dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--mustard-deep);
  font-style: italic;
}

/* Subtle paper texture (vary in :variant) */
.maya .paper {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0,0,0,0.012), transparent 35%),
    radial-gradient(circle at 88% 82%, rgba(0,0,0,0.012), transparent 30%);
}

/* Marquee / status strip */
.maya .marquee-track {
  display: flex; gap: 56px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  white-space: nowrap;
  align-items: center;
}
.maya .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mustard);
  display: inline-block;
}


/* =====================================================
   RESPONSIVE — Maya Corp
   Inline styles take precedence; we use !important here.
   Breakpoints: tablet ≤1100px, mobile ≤640px.
   ===================================================== */

/* On any small screen, drop the fixed 1440 width on .maya root */
@media (max-width: 1440px) {
  .maya { width: 100% !important; max-width: 100% !important; }
  /* The #root wrapper on pages/*.html — keep its shadow centered */
  #root { width: 100% !important; }
}

/* ===== Tablet ===== */
@media (max-width: 1100px) {
  .maya { font-size: 16px; }

  /* Generic section padding compression */
  .maya > section,
  .maya > header,
  .maya > footer,
  .maya > div[style*="padding"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .maya > section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Marquee */
  .maya .marquee-track {
    font-size: 11px !important;
    gap: 24px !important;
  }

  /* Header: stack into rows */
  .maya > header {
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding-top: 22px !important;
    padding-bottom: 18px !important;
  }
  .maya > header > nav {
    order: 3;
    flex-basis: 100% !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    border-top: 1px solid var(--line);
    padding-top: 14px !important;
  }

  /* Two-column / multi-column grids collapse to one */
  .maya section > div[style*="grid-template-columns"],
  .maya section > div > div[style*="grid-template-columns"],
  .maya section > article[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* The article-body section: stack sidebar below */
  .maya section[style*="1.55fr"] { grid-template-columns: 1fr !important; gap: 48px !important; }
  .maya aside[style*="sticky"] { position: static !important; }

  /* Headline scaling */
  .maya .h-serif[style*="font-size: 96"],
  .maya .h-serif[style*="font-size: 92"],
  .maya .h-serif[style*="font-size: 88"] { font-size: 64px !important; line-height: 1.0 !important; }
  .maya .h-serif[style*="font-size: 72"],
  .maya .h-serif[style*="font-size: 64"] { font-size: 52px !important; line-height: 1.02 !important; }
  .maya .h-serif[style*="font-size: 60"],
  .maya .h-serif[style*="font-size: 56"] { font-size: 44px !important; line-height: 1.04 !important; }
  .maya .h-serif[style*="font-size: 52"] { font-size: 40px !important; }
  .maya .h-serif[style*="font-size: 44"] { font-size: 34px !important; }
  .maya .h-serif[style*="font-size: 38"],
  .maya .h-serif[style*="font-size: 36"],
  .maya .h-serif[style*="font-size: 32"] { font-size: 28px !important; }
  .maya .h-serif[style*="font-size: 26"],
  .maya .h-serif[style*="font-size: 24"] { font-size: 22px !important; }

  .maya .h-display[style*="font-size: 232"] { font-size: 96px !important; }
  .maya .h-display[style*="font-size: 92"],
  .maya .h-display[style*="font-size: 72"] { font-size: 56px !important; }
  .maya .h-display[style*="font-size: 64"] { font-size: 48px !important; }
  .maya .h-display[style*="font-size: 56"] { font-size: 40px !important; }
  .maya .h-display[style*="font-size: 48"],
  .maya .h-display[style*="font-size: 44"] { font-size: 36px !important; }

  /* Blockquotes scale */
  .maya .h-serif-it[style*="font-size: 56"],
  .maya .h-serif-it[style*="font-size: 52"] { font-size: 36px !important; line-height: 1.12 !important; }
  .maya .h-serif-it[style*="font-size: 36"],
  .maya .h-serif-it[style*="font-size: 32"] { font-size: 26px !important; }

  /* Body paragraphs */
  .maya p[style*="font-size: 26"],
  .maya p[style*="font-size: 22"] { font-size: 18px !important; line-height: 1.45 !important; }

  /* Images — hero dog */
  .maya section img[alt="Maya"],
  .maya section img[alt="Maya, la galga"],
  .maya section img[alt^="Maya"] {
    position: static !important;
    width: 80% !important;
    max-width: 520px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
    display: block !important;
  }
  .maya section > div > div[style*="min-height"] { min-height: 0 !important; }

  /* Article body width */
  .maya .article-body { max-width: 100% !important; font-size: 17px !important; }

  /* Newsletter & footer split → stack */
  .maya footer > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .maya footer > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 40px !important;
  }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .mm-toggle { display: flex !important; }
}
@keyframes mm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .maya { font-size: 15px; }

  .maya > section,
  .maya > header,
  .maya > footer,
  .maya > div[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .maya > section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Hide marquee items beyond first few — keep first 3 */
  .maya .marquee-track {
    font-size: 10px !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .maya .marquee-track > *:nth-child(n+8) { display: none !important; }

  /* Header: only logo + CTA visible; hide nav and dateline */
  .maya > header > nav { display: none !important; }
  .maya > header > div .mono-meta { display: none !important; }
  .maya > header { padding: 16px 20px !important; }

  /* Headlines shrink more */
  .maya .h-serif[style*="font-size: 96"],
  .maya .h-serif[style*="font-size: 92"],
  .maya .h-serif[style*="font-size: 88"] { font-size: 42px !important; }
  .maya .h-serif[style*="font-size: 72"],
  .maya .h-serif[style*="font-size: 64"] { font-size: 36px !important; }
  .maya .h-serif[style*="font-size: 60"],
  .maya .h-serif[style*="font-size: 56"] { font-size: 32px !important; }
  .maya .h-serif[style*="font-size: 52"],
  .maya .h-serif[style*="font-size: 44"] { font-size: 28px !important; }

  .maya .h-display[style*="font-size: 232"] { font-size: 64px !important; line-height: 0.9 !important; }
  .maya .h-display[style*="font-size: 92"],
  .maya .h-display[style*="font-size: 72"] { font-size: 40px !important; }
  .maya .h-display[style*="font-size: 64"] { font-size: 34px !important; }
  .maya .h-display[style*="font-size: 56"],
  .maya .h-display[style*="font-size: 48"] { font-size: 28px !important; }

  .maya .h-serif-it[style*="font-size: 56"],
  .maya .h-serif-it[style*="font-size: 52"] { font-size: 26px !important; }

  /* Pills/filters wrap */
  .maya .pill { font-size: 9.5px !important; padding: 4px 8px 3px !important; letter-spacing: 0.12em !important; }
  .maya section > div[style*="flex-wrap"] { gap: 8px !important; }

  /* Buttons */
  .maya .btn {
    font-size: 11px !important;
    padding: 12px 14px 10px !important;
    letter-spacing: 0.1em !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* CTA buttons in header keep auto width */
  .maya > header .btn { width: auto !important; }

  /* Stack any horizontal button-row */
  .maya section > div[style*="display: flex"][style*="gap"] > .btn { width: 100% !important; }

  /* Footer columns full stack */
  .maya footer > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .maya footer > div[style*="space-between"]:last-child {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Listado de piezas (Paper / Deep Dive / Opinión): cada tarjeta es una fila
     interna de 3 columnas (70px · 1fr · 96px) que NO la alcanzaba la regla de
     colapso general (llega hasta section > div > div, y la tarjeta está en
     section > div > a > article). Sin esto, los 70px+96px fijos comprimen la
     columna central y la pieza se ve estrecha. La apilamos a 1 columna en móvil.
     Research no se ve afectado: sus tarjetas ya son flex-column verticales. */
  .maya section article[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  /* Hero dog smaller */
  .maya section img[alt^="Maya"] { width: 60% !important; }

  /* Big stats block in Deep Dive page */
  .maya section > div > div[style*="aspect-ratio"] { aspect-ratio: 4 / 5 !important; padding: 18px !important; }

  /* Team photo */
  .maya article div[style*="aspect-ratio: 1 / 1.18"] { aspect-ratio: 1 / 1 !important; }

  /* Subscription form input row */
  .maya form > div[style*="display: flex"] { flex-direction: column !important; }
  .maya form input { width: 100% !important; }
}

/* ===== Article body — extra mobile tweaks ===== */
@media (max-width: 1100px) {
  .article-body { font-size: 17px !important; line-height: 1.6 !important; }
  .article-body h2 { font-size: 30px !important; margin-top: 40px !important; }
  .article-body blockquote { font-size: 22px !important; margin-left: -16px !important; padding-left: 18px !important; }
}
@media (max-width: 640px) {
  .article-body { font-size: 16px !important; }
  .article-body h2 { font-size: 24px !important; padding-left: 18px !important; }
  .article-body blockquote { font-size: 19px !important; }
  .article-body > p:first-of-type::first-letter { font-size: 3.6em !important; }
}