/* =====================================================================
   Marca de Tony Villalobos · 2026 («editorial con cartel»)
   Decidida por Tony el 14 oct 2026: la base seria de la maqueta A, las
   letras grandes de la D (sin pegatinas) y el azul oscuro mandando.

   Colores: los de siempre. Reparto: ~60 % neutros (papel y blanco),
   ~30 % azul oscuro, ~10 % cielo + naranja. Naranja, uno o dos toques
   por pantalla. Letra blanca sobre naranja NO (2,9:1): va en tinta.
   ===================================================================== */
@font-face { font-family: "Inter Tight"; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800 900; font-stretch: 62% 100%; font-display: swap; src: url("fonts/Archivo.woff2") format("woff2"); }

:root {
  --tinta: #1A2A3A;      /* texto y bloques oscuros */
  --noche: #111D29;      /* el oscuro de fondo, un punto más hondo */
  --cielo: #8DD5EE;
  --naranja: #FF6523;
  --naranja-canto: #C2410C;
  --papel: #F7F8FA;
  --blanco: #FFFFFF;
  --gris: #5D6B7A;       /* texto secundario sobre claro */
  --suave: rgba(255,255,255,.68);  /* texto secundario sobre oscuro */
  --raya: rgba(26,42,58,.14);
  --raya-oscura: rgba(255,255,255,.14);
  --radio: 12px;
  --texto: "Inter Tight", system-ui, -apple-system, sans-serif;
  --fina: "Instrument Serif", Georgia, serif;
  --cartel: "Archivo", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); color: var(--tinta); background: var(--papel); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.ancho { width: min(1180px, 100% - 40px); margin: 0 auto; }

/* --- letra --- */
.titular { font-weight: 700; letter-spacing: -.045em; line-height: .98; margin: 0; text-wrap: balance; }
.fina { font-family: var(--fina); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.cartel { font-family: var(--cartel); font-stretch: 66%; font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .86; }
.sobre { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sobre::before { content: ""; width: 28px; height: 2px; background: var(--naranja); flex: none; }

/* --- fondos --- */
.oscuro { background: radial-gradient(760px 480px at 82% 30%, rgba(141,213,238,.22), transparent 64%), linear-gradient(180deg, #16242F, var(--noche)); color: var(--blanco); }
.oscuro .sobre { color: var(--cielo); }
.claro { background: var(--papel); }
.cielo { background: var(--cielo); color: var(--tinta); }

/* --- botones: naranja con letra tinta y canto --- */
.boton { display: inline-block; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; text-align: center; color: var(--tinta); background: var(--naranja); border: 0; border-radius: 10px; padding: 15px 24px; cursor: pointer; box-shadow: 0 5px 0 var(--naranja-canto), 0 20px 34px -14px rgba(255,101,35,.7); transition: transform 160ms ease, box-shadow 160ms ease; }
.boton:hover { transform: translateY(1px); box-shadow: 0 4px 0 var(--naranja-canto), 0 16px 28px -14px rgba(255,101,35,.7); }
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--naranja-canto); }
.boton[disabled] { opacity: .6; cursor: default; }
.boton.linea { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--raya-oscura); }

/* --- tarjetas --- */
.tarjeta { background: var(--blanco); border: 1px solid var(--raya); border-radius: var(--radio); }
.tarjeta.oscura { background: var(--tinta); color: var(--blanco); border-color: var(--tinta); }
.tarjeta.cristal { background: rgba(255,255,255,.06); border-color: var(--raya-oscura); color: var(--blanco); }

/* --- volumen: nada girado (Tony, 14 oct 2026: «no me gusta el efecto de ese 3D en el que se ve todo girado… ponlo todo recto»).
   Las piezas van rectas; el volumen lo da solo una sombra suave debajo. --- */
.pila { position: relative; }
.pila .plano { position: relative; }
.canto { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px -28px rgba(0,0,0,.55); }
.canto.cielo { box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }

/* --- viñeta cuadrada naranja --- */
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista li { display: flex; gap: 12px; }
.lista li::before { content: ""; width: 8px; height: 8px; background: var(--naranja); flex: none; margin-top: .55em; }