/* ==========================================================================
   Cobrynta · el estilo de la tarjeta, también en la web

   Memo, 3-nov-2026, con la foto de la tarjeta impresa en la mano: «adecua
   las páginas de cada QR … que se vea con ese estilo visual hermoso, me
   gustó mucho cómo hiciste lo de las tarjetas». Quien escanea el QR de la
   tarjeta o del portafolio impreso tiene que aterrizar en el MISMO mundo:
   marfil, azul marino, oro con filete doble y rombo, títulos en Cinzel.

   Va como capa encima de styles.css (se carga después) y sólo cambia
   tokens y adornos: ningún layout se toca, así que las páginas siguen
   funcionando igual en teléfono. Los colores salen de herramientas/
   generar-tarjetas (marca.py del set impreso).
   ========================================================================== */

:root {
  --navy: #0b1a2e;
  --abismo: #071221;
  --acero: #13304d;
  --oro: #c98a0e;
  --oro2: #f5a524;
  --oro3: #fcd58a;
  --bronce: #8a5a07;
  --marfil: #f4f7fb;
  --perg: #f3ecdd;

  --bg: var(--marfil);
  --bg-2: var(--perg);
  --surface: #fbfcfe;
  --surface-2: #fbf6ea;
  --glass: rgb(244 247 251 / 0.86);
  --ink: #0b1a2e;
  --ink-2: #2b3a4b;
  --muted: #5f6c79;
  --line: #e4dac6;
  --line-strong: #d6c6a3;
  --brand: #13304d;
  --brand-2: #1e5f8f;
  --brand-ink: #0b1a2e;
  --brand-soft: rgb(201 128 10 / 0.08);
  --brand-soft-2: rgb(201 128 10 / 0.16);
  --gold: #c98a0e;
  --gold-ink: #8a5a07;
  --gold-soft: rgb(245 165 36 / 0.2);
  --on-gold: #fbfcfe;
  /* Sin el arcoíris azul: oro metálico, como el texto de la tarjeta. */
  --grad-text: linear-gradient(#8a5a07, #8a5a07);
  --grad-brand: linear-gradient(#0b1a2e, #0b1a2e);
  --sh-glow: 0 14px 34px -14px rgb(138 90 43 / 0.55);
  --ring: 0 0 0 3px rgb(201 128 10 / 0.4);
  --canvas-dot: 184 134 46;
  --font-display: "IBM Plex Sans Condensed", "Times New Roman", serif;
}

body { background: var(--marfil); }

/* El marco dorado de la tarjeta: filete fino a todo el borde con un rombo
   en cada esquina. Fijo y sin eventos, para que nunca tape un clic. */
body::before {
  content: ""; position: fixed; inset: 8px; z-index: 80; pointer-events: none;
  border: 1px solid rgb(245 165 36 / 0.75);
  box-shadow: inset 0 0 0 3px var(--marfil), inset 0 0 0 4px rgb(245 165 36 / 0.35);
}
body::after {
  --rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.6' y='2.6' width='6.8' height='6.8' transform='rotate(45 6 6)' fill='%23b8862e'/%3E%3C/svg%3E");
  content: ""; position: fixed; inset: 3px; z-index: 81; pointer-events: none;
  background: var(--rombo) 0 0 / 12px no-repeat, var(--rombo) 100% 0 / 12px no-repeat,
              var(--rombo) 0 100% / 12px no-repeat, var(--rombo) 100% 100% / 12px no-repeat;
}
@media (max-width: 640px) { body::before { inset: 4px; } body::after { inset: -1px; } }

/* Títulos: Sora como en la tarjeta, sin el apretado de la display. */
h1, h2, h3 { letter-spacing: 0.005em; font-weight: 700; }
h1 { line-height: 1.05; }
.brand-name { font-family: "Sora", serif; letter-spacing: 0.16em; color: var(--navy); }
.brand-name small { color: var(--oro); letter-spacing: 0.48em; }

/* La etiqueta de sección: mono en oro, con el rombo en vez del guion. */
.eyebrow { color: var(--oro); }
.eyebrow::before, .center .eyebrow::after { width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); background: var(--oro); box-shadow: 0 0 0 2px var(--marfil), 0 0 0 3px var(--oro); }

/* El filete doble bajo cada h2 de sección. */
section h2::after {
  content: ""; display: block; width: 120px; height: 5px; margin-top: 14px;
  border-top: 2px solid var(--oro); border-bottom: 1px solid var(--oro);
}
section[class*="center"] h2::after, .center h2::after { margin-inline: auto; }

/* Botones: azul marino con orilla de oro; WhatsApp sigue verde porque es
   el botón que la gente reconoce, pero con el mismo filete. */
.btn-brand { background: var(--grad-brand); color: var(--oro3); box-shadow: 0 0 0 1px var(--oro2) inset, 0 14px 30px -14px rgb(11 26 43 / 0.75); }
.btn-brand:hover { color: #fff; }
.btn-gold { background: linear-gradient(#8a5a07, #8a5a07); color: #fbfcfe; }
.btn-ghost { background: #fbfcfe; border-color: var(--oro2); color: var(--navy); }
.btn-ghost:hover { border-color: var(--oro); color: var(--bronce); }
.btn-wa { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5) inset, 0 12px 28px -14px rgb(37 211 102 / 0.8); }

/* Menú y tarjetas: papel marfil con la línea dorada de la tarjeta. */
.top.scrolled .bar, .bar { border-color: var(--line); }
.nav a.active { color: var(--navy); background: rgb(201 128 10 / 0.16); box-shadow: inset 0 0 0 1px rgb(201 128 10 / 0.35); }
.card { background: #fbfcfe; border-color: var(--line); }
.card:hover { border-color: var(--oro2); box-shadow: 0 0 0 1px var(--oro2), var(--sh-2); }
.bars i { background: linear-gradient(#e9d3a1, #e9d3a1); }
.bars i.hl { background: var(--grad-brand); }

::selection { background: var(--oro2); color: var(--navy); }


/* Lo que portafolio.css y catalogo.css traen con azul fijo, no por token. */
.pf-hero, .cat-hero { background: none; }
.pf-hero-logo::before, .pf-hero-logo::after { border-color: rgb(201 128 10 / 0.35); }
.pf-orbitas i { border-color: rgb(201 128 10 / 0.2); }
.ej-play, .pj-play { background: var(--grad-brand); color: var(--oro3); box-shadow: 0 0 0 1px var(--oro2) inset, 0 10px 22px -10px rgb(11 26 43 / 0.8); }
.bloque-ico { background: var(--grad-brand); color: var(--oro3); box-shadow: 0 0 0 1px var(--oro2) inset, 0 0 0 3px var(--marfil), 0 0 0 4px var(--oro2); border-radius: 50%; }
.mv-avance i { background: linear-gradient(var(--bronce), var(--bronce)); }
.mv-cap { background: linear-gradient(transparent, transparent); }
.cat-top { background: linear-gradient(var(--bg), var(--bg)); }
.cat .cat-final { background: linear-gradient(#071221, #071221); box-shadow: 0 0 0 1px var(--oro2), var(--sh-3); }
.cat .cat-final h2, .pf-descargas h2 { color: #fff; }
.pf-cuerpo .pf-descargas { background: linear-gradient(#071221, #071221); }