/* =====================================================================
   Marca de Tony Villalobos · Café oscuro (16 oct 2026)
   «El informe anotado»: lo serio lo pone el diseño (fondo café, letra
   limpia, cifras grandes) y lo suyo lo pone el boli naranja a mano.
   Elegida por Tony el 16 oct 2026: «me gusta el café oscuro… junto con
   el color hueso, el naranja y el azul un poco». Ajustes tras su
   cuestionario: hueso más vainilla, luz cálida de lámpara en los fondos
   oscuros, y la palabra en cursiva se sustituye por un gesto de boli.

   Copia maestra: reel-estudio-app/marca-tony/marca.css (skill marca-tony).
   La versión anterior (azul tinta) está entera en archivo-2026-tinta/.
   Reparto: ~60 % café, ~30 % hueso, ~5 % naranja, ~3 % cielo.
   Letra blanca/hueso sobre naranja NO: sobre naranja, letra café.
   ===================================================================== */
@font-face { font-family: "Inter Tight"; font-weight: 400 700; font-display: swap; src: url("fonts/InterTight.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"); }
@font-face { font-family: "Mano Tony"; font-weight: 400; font-display: swap; src: url("fonts/NothingYouCouldDo-Regular.ttf") format("truetype"); }

:root {
  --cafe: #1E1713;       /* el fondo de la marca y la letra sobre claro */
  --cafe-hondo: #150F0C; /* el oscuro más hondo, para degradados */
  --cafe-2: #2A211B;     /* tarjetas sobre café */
  --hueso: #F3EBDA;      /* papel y letra sobre café (un punto vainilla) */
  --naranja: #FF6523;    /* el boli: gestos a mano, botón */
  --tostado: #C2410C;    /* el boli sobre hueso (el naranja no se lee ahí) */
  --cielo: #8DD5EE;      /* chispa: cifras sobre café, muy poco */
  --blanco: #FFFFFF;
  --gris: #6E6158;       /* texto secundario sobre claro */
  --suave: rgba(243,235,218,.68);  /* texto secundario sobre café */
  --raya: rgba(30,23,19,.14);
  --raya-oscura: rgba(243,235,218,.15);
  --radio: 12px;
  --texto: "Inter Tight", system-ui, -apple-system, sans-serif;
  --cartel: "Archivo", "Arial Narrow", sans-serif;
  --mano: "Mano Tony", "Bradley Hand", "Segoe Print", cursive;
  /* compatibilidad con piezas hechas con la versión anterior */
  --tinta: var(--cafe); --noche: var(--cafe-hondo); --papel: var(--hueso); --naranja-canto: var(--tostado);
  --fina: var(--texto);
  /* trazos del boli (SVG a mano) */
  --subraya-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.2 C 28 3.4, 62 7.8, 98 4.2' fill='none' stroke='%23FF6523' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --subraya-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6.2 C 28 3.4, 62 7.8, 98 4.2' fill='none' stroke='%23C2410C' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --rodea-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M8 22 C 6 8, 40 2, 70 4 C 92 6, 99 14, 96 24 C 92 36, 50 39, 22 35 C 6 32, 1 24, 10 14 C 16 8, 26 6, 34 6' fill='none' stroke='%23FF6523' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --rodea-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M8 22 C 6 8, 40 2, 70 4 C 92 6, 99 14, 96 24 C 92 36, 50 39, 22 35 C 6 32, 1 24, 10 14 C 16 8, 26 6, 34 6' fill='none' stroke='%23C2410C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --tacha-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 30 4, 70 6, 99 3' fill='none' stroke='%23FF6523' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --tacha-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 30 4, 70 6, 99 3' fill='none' stroke='%23C2410C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--texto); color: var(--cafe); background: var(--hueso); 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; }
.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; }
.mano { font-family: var(--mano); font-weight: 400; color: var(--tostado); line-height: 1.1; letter-spacing: 0; }

/* --- el boli: UNA palabra por titular, como mucho dos gestos por página.
   .fina (nombre de antes) = subrayado a mano; .rodea = círculo; .tacha = tachado. --- */
.fina, .subraya { font-family: inherit; font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit;
  background: var(--subraya-t) no-repeat left 0 bottom -.04em / 100% .2em; padding-bottom: .08em; }
.rodea { font-style: normal; color: inherit; background: var(--rodea-t) no-repeat center / 100% 100%; padding: .12em .28em; margin: 0 -.28em; }
.tacha { font-style: normal; color: inherit; background: var(--tacha-t) no-repeat left 0 center / 100% .22em; }
.oscuro .fina, .oscuro .subraya, .tarjeta.oscura .fina, .tarjeta.oscura .subraya { background-image: var(--subraya-n); }
.oscuro .rodea, .tarjeta.oscura .rodea { background-image: var(--rodea-n); }
.oscuro .tacha, .tarjeta.oscura .tacha { background-image: var(--tacha-n); }
.oscuro .mano, .tarjeta.oscura .mano { color: var(--naranja); }

/* --- fondos: el café lleva una luz cálida de lámpara (Tony eligió lámparas y luz de tarde) --- */
.oscuro { background: radial-gradient(820px 520px at 78% 22%, rgba(255,140,64,.13), transparent 62%), linear-gradient(180deg, #241B16, var(--cafe-hondo)); color: var(--hueso); }
.oscuro .sobre { color: var(--suave); }
.claro { background: var(--hueso); }
.cielo { background: var(--cielo); color: var(--cafe); }

/* --- botones: naranja con letra café y canto tostado --- */
.boton { display: inline-block; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; text-align: center; color: var(--cafe); background: var(--naranja); border: 0; border-radius: 10px; padding: 15px 24px; cursor: pointer; box-shadow: 0 5px 0 var(--tostado), 0 20px 34px -14px rgba(255,101,35,.6); transition: transform 160ms ease, box-shadow 160ms ease; }
.boton:hover { transform: translateY(1px); box-shadow: 0 4px 0 var(--tostado), 0 16px 28px -14px rgba(255,101,35,.6); }
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tostado); }
.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: #FBF7EF; border: 1px solid var(--raya); border-radius: var(--radio); }
.tarjeta.oscura { background: var(--cafe-2); color: var(--hueso); border-color: var(--raya-oscura); }
.tarjeta.cristal { background: rgba(243,235,218,.05); border-color: var(--raya-oscura); color: var(--hueso); }

/* --- todo recto (Tony, 14 oct 2026); el volumen, solo una sombra suave debajo --- */
.pila { position: relative; }
.pila .plano { position: relative; }
.canto { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 30px 60px -28px rgba(0,0,0,.6); }
.canto.cielo { box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }

/* --- 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; }

/* --- firma «TONY VILLALOBOS.» con el punto naranja --- */
.firma { font-family: var(--cartel); font-stretch: 100%; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.firma::after { content: "."; color: var(--naranja); }