/* San Juan Gobierno · marca para los kioscos de la FNS 2026.
   Manual: Ubuntu (títulos, botones) + Lora (cuerpo); paleta amarillo / naranja / rojo; piezas en naranja pleno con texto y logo blancos;
   el isologo puede usarse como textura (contraforma). Se sirve en /brand/ (fuentes relativas a este archivo). */
@font-face { font-family: Ubuntu; font-weight: 300; font-display: swap; src: url(fonts/ubuntu-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: Ubuntu; font-weight: 400; font-display: swap; src: url(fonts/ubuntu-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Ubuntu; font-weight: 500; font-display: swap; src: url(fonts/ubuntu-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Ubuntu; font-weight: 700; font-display: swap; src: url(fonts/ubuntu-latin-700-normal.woff2?v=2) format('woff2'); }  /* ?v=2: Cloudflare cacheó una respuesta ajena en ciudadanodigital el 18/10 */
@font-face { font-family: Lora; font-weight: 400; font-display: swap; src: url(fonts/lora-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Lora; font-weight: 500; font-display: swap; src: url(fonts/lora-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Lora; font-weight: 600; font-display: swap; src: url(fonts/lora-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Lora; font-weight: 700; font-display: swap; src: url(fonts/lora-latin-700-normal.woff2) format('woff2'); }

:root {
  --naranja: #EC6608; --naranja-claro: #FF8200; --amarillo: #FFDF43; --amarillo-2: #FDC21F; --rojo: #ED2726; --bordo: #AE1100;
  --crema: #FFF4DC; --tinta: #2B1508; --blanco: #fff;
  --ubuntu: Ubuntu, "Trebuchet MS", sans-serif; --lora: Lora, Georgia, serif;
  --sombra: 0 20px 50px rgba(43, 21, 8, .25);
}

/* Tema naranja (tótem y kiosco): fondo pleno + isologo blanco como textura arriba a la derecha, como la tapa del manual */
.brand-bg { background: var(--naranja); color: var(--blanco); font-family: var(--lora); }
.brand-bg::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .08;
  background: url(marca.png) no-repeat right -16vmin top -18vmin / 80vmin auto; }
.brand-bg > * { position: relative; z-index: 1; }

/* Tema oscuro cálido (mural LED): nunca negro puro, acentos de marca */
.brand-dark { background: radial-gradient(ellipse at 50% 40%, #3A1406 0%, #140703 75%); color: var(--crema); font-family: var(--lora); }
.brand-dark::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background: url(marca.png) no-repeat right -10vmin bottom -14vmin / 70vmin auto; }

/* Tema claro (panel de moderación, página del celular) */
.brand-light { background: var(--crema); color: var(--tinta); font-family: var(--lora); }
.brand-bar { background: var(--naranja); color: var(--blanco); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.brand-bar img { height: 36px; width: auto; }

/* Cabecera y pie fijos con el isologotipo en blanco */
.brand-header { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; pointer-events: none; }
.brand-header img { height: 52px; width: auto; }
.brand-header .evento { font: 500 15px var(--ubuntu); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); opacity: .85; }  /* tinta sobre naranja ≈ 6,5:1 (blanco daba 3,25:1 en texto chico) */
.brand-footer { position: fixed; bottom: 12px; left: 0; right: 0; z-index: 2; text-align: center; font: 500 14px var(--ubuntu); color: var(--tinta); opacity: .85; pointer-events: none; }
.brand-dark .brand-header .evento, .brand-dark .brand-footer { color: var(--crema); opacity: .8; }  /* sobre el fondo oscuro, crema ≈ 12:1 */
.brand-footer a { color: inherit; text-decoration: none; pointer-events: none; }  /* sin link de escape en los tótems */
/* menos movimiento si el visitante lo pidió en su dispositivo */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

h1, h2 { font-family: var(--ubuntu); font-weight: 700; letter-spacing: -.01em; }

/* Botones: amarillo con tinta (≈ 12:1), fantasma blanco sobre naranja */
.btn { font: 500 var(--btnfs, 22px) var(--ubuntu); min-height: var(--btn, 76px); padding: 0 44px; border: 0; border-radius: 999px; background: var(--amarillo); color: var(--tinta); cursor: pointer; box-shadow: 0 10px 30px rgba(43, 21, 8, .25); }
.btn.ghost { background: transparent; color: var(--blanco); border: 3px solid rgba(255, 255, 255, .75); box-shadow: none; }
.btn.big { min-height: 110px; padding: 0 64px; font-size: 30px; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; box-shadow: none; }
.btn.naranja { background: var(--naranja); color: var(--blanco); }
.btn.ghost.naranja { background: transparent; color: var(--naranja); border-color: var(--naranja); }

/* Tarjeta blanca con texto tinta (cuerpos largos nunca van en blanco sobre naranja) */
.card { background: var(--blanco); color: var(--tinta); border-radius: 20px; padding: 24px 28px; box-shadow: var(--sombra); }
.card h2 { color: var(--naranja); }
.chip { font: 400 17px var(--ubuntu); padding: 12px 20px; border-radius: 999px; border: 2px solid var(--naranja); background: var(--blanco); color: var(--naranja); cursor: pointer; }
.chip:active, .chip.on { background: var(--naranja); color: var(--blanco); }
input.brand { width: 100%; font: 500 26px var(--ubuntu); padding: 18px 22px; border-radius: 16px; border: 2px solid var(--amarillo-2); background: var(--crema); color: var(--tinta); text-align: center; outline: none; -webkit-user-select: text; user-select: text; }
input.brand:focus { border-color: var(--naranja); }
.muted { color: rgba(255, 255, 255, .88); }
.link { color: var(--blanco); text-decoration: underline; background: none; border: 0; cursor: pointer; font: 400 17px var(--ubuntu); }

/* Personaje guía con globo de texto: Pacha, el cóndor andino (asset oficial; solo en los sistemas de Ambiente) o el personaje propio de cada ministerio.
   .solo = el globo sin personaje (el resto de los ministerios) */
.dori { display: flex; align-items: center; gap: 24px; max-width: 980px; width: 100%; }
.dori img { height: min(34vh, 360px); width: auto; flex: none; filter: drop-shadow(0 16px 30px rgba(43, 21, 8, .3)); }
.dori .globo { position: relative; flex: 1; background: var(--blanco); color: var(--tinta); border-radius: 24px; padding: 22px 28px; font: 400 22px/1.35 var(--lora); text-align: left; box-shadow: var(--sombra); }
.dori .globo::before { content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); border: 18px solid transparent; border-right-color: var(--blanco); border-left: 0; }
.dori .globo b { font: 700 1em var(--ubuntu); color: var(--naranja); }
.dori.solo { justify-content: center; } .dori.solo .globo { flex: none; max-width: 760px; }
.dori.solo .globo::before { display: none; }

@media (orientation: portrait), (max-width: 760px) {
  .brand-header { padding: 12px 16px; } .brand-header img { height: 40px; } .brand-header .evento { display: none; }
  .brand-footer { position: static; padding: 8px 0 20px; }
  .dori { flex-direction: column; gap: 14px; } .dori img { height: min(24vh, 240px); }
  .dori .globo { font-size: 18px; padding: 16px 20px; }
  .dori .globo::before { left: 50%; top: -18px; transform: translateX(-50%); border: 18px solid transparent; border-bottom-color: var(--blanco); border-top: 0; }
}