/* =============================================================
   DESTINIO · allnewDestinio · Design tokens
   v1.0 · 2026-07-11 · A41 Director de Imagen de Marca

   Fuente única: brandbook-allnewDestinio.html
   Si este archivo contradice al brandbook, gana el brandbook.

   NO EDITAR sin aprobación de marca. Si falta una regla, se
   extiende el brandbook y se registra en decisiones.md.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* -------------------------------------------------------------
   1 · TEMA POR DEFECTO (Negro)
   theme.js sobrescribe estas variables al elegir otro tema.
   Un tema define TODO: fondo, superficie, líneas, texto, acento.
   ------------------------------------------------------------- */
:root{
  /* Marca — se repinta con el tema del cliente */
  --brand:      #10b981;
  --brand2:     #2dd4bf;
  --on:         #04120c;   /* texto SOBRE brand. Nunca blanco en tema Negro. */

  /* Superficies */
  --bg:         #08080d;
  --bg2:        #0b0b12;
  --card:       #12121b;
  --card2:      #191924;

  /* Líneas */
  --line:       rgba(255,255,255,.09);
  --line2:      rgba(255,255,255,.17);

  /* Texto */
  --tx:         #ffffff;   /* titulares */
  --tx2:        #b0bcc9;   /* cuerpo */
  --tx3:        #7c8794;   /* secundario, captions */

  /* ÁMBAR — SOLO CUMPLIMIENTO (Ley 21.719 / ARCOP).
     Ver §5 del README. Uso decorativo = rechazo automático.
     --amber   fondo sólido (banda, etiqueta, botón)
     --amberT  texto ámbar (se oscurece en temas claros por contraste)
     --amberOn texto SOBRE ámbar                                        */
  --amber:      #f59e0b;
  --amberT:     #f59e0b;
  --amberOn:    #3a2600;

  --shadow:     rgba(0,0,0,.5);

  /* Tipografía */
  --ft: 'Poppins', system-ui, sans-serif;   /* display */
  --fb: 'Inter', system-ui, sans-serif;     /* cuerpo  */
  --fm: 'JetBrains Mono', ui-monospace, monospace;

  /* Espacio */
  --sp-1: 6px;  --sp-2: 10px; --sp-3: 16px;
  --sp-4: 24px; --sp-5: 40px; --sp-6: 72px;

  /* Radios */
  --r-ctl:  10px;   /* controles */
  --r-card: 16px;   /* tarjetas  */
  --r-blk:  20px;   /* bloques   */
  --r-pill: 999px;

  /* Layout */
  --maxw: 1200px;
  --pad:  26px;
}

/* -------------------------------------------------------------
   2 · COLORES DE APOYO
   Solo para CATEGORIZAR (catálogo, diagramas, tablas).
   Nunca como color de marca. Nunca en un CTA. Nunca en el logo.
   ------------------------------------------------------------- */
:root{
  --c-blue:   #3b82f6;
  --c-violet: #8b5cf6;
  --c-green:  #22c55e;
  --c-slate:  #64748b;
  --c-red:    #ef4444;
}

/* -------------------------------------------------------------
   3 · BASE
   ------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }

body{
  background: var(--bg);
  color: var(--tx2);
  font-family: var(--fb);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
  background-image:
    radial-gradient(900px 480px at 85% -6%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
    radial-gradient(700px 400px at -5% 4%, color-mix(in srgb, var(--brand2) 7%, transparent), transparent 55%);
  background-attachment: fixed;
}

a{ color:inherit; text-decoration:none }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }

/* -------------------------------------------------------------
   4 · TIPOGRAFÍA
   Techo del H1: 52px. Probado — a 80px el CTA se sale del
   primer visor en portátiles. No subir.
   ------------------------------------------------------------- */
h1{
  font-family: var(--ft);
  font-weight: 900;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.03;
  letter-spacing: -1.4px;
  color: var(--tx);
  max-width: 19ch;             /* titulares ≤ 19 caracteres por línea */
}
h2{
  font-family: var(--ft);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.10;
  letter-spacing: -1px;
  color: var(--tx);
  max-width: 22ch;
}
h3{ font-family:var(--ft); font-weight:800; font-size:19px; color:var(--tx) }

/* Una sola palabra del titular puede ir en degradado. UNA. */
h1 em, h2 em{
  font-style: normal;
  background: linear-gradient(100deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead{ font-size:clamp(15.5px,1.7vw,19px); color:var(--tx2); max-width:62ch }
p{ font-size:15px; max-width:76ch }

.kicker{
  display:inline-block;
  font-family: var(--ft);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand2);
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-radius: var(--r-pill);
  padding: 6px 13px;
}
/* Kicker de cumplimiento — el ÚNICO kicker ámbar permitido */
.kicker.compliance{
  color: var(--amberT);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

/* -------------------------------------------------------------
   5 · BOTONES
   Regla: UN SOLO botón primario por vista.
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ft); font-weight:800; font-size:13.5px;
  border-radius: var(--r-ctl);
  padding: 11px 19px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: .16s;
}
.btn--primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: var(--on);
}
.btn--primary:hover{ filter:brightness(1.08); transform:translateY(-1px) }

.btn--ghost{ border-color:var(--line2); color:var(--tx) }
.btn--ghost:hover{ border-color:var(--brand2); color:var(--brand2) }

/* Botón de cumplimiento — SOLO en contexto Ley 21.719 */
.btn--compliance{ background:var(--amber); color:var(--amberOn) }

.btn--lg{ font-size:15px; padding:14px 26px }

/* -------------------------------------------------------------
   6 · TARJETA
   ------------------------------------------------------------- */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  transition: .18s;
}
.card:hover{
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  transform: translateY(-3px);
}
.card__icon{
  width:44px; height:44px;
  border-radius: 11px;
  display:grid; place-items:center;
  font-size:20px;
  margin-bottom:14px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
}
/* Variante cumplimiento */
.card--compliance{ border-color: color-mix(in srgb, var(--amber) 32%, transparent) }
.card--compliance .card__icon{
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
}

/* -------------------------------------------------------------
   7 · BANDA DE CUMPLIMIENTO
   El ÚNICO bloque ámbar permitido en una página comercial.
   Máximo uno por página.
   ------------------------------------------------------------- */
.compliance-band{
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  background: linear-gradient(100deg,
              color-mix(in srgb, var(--amber) 10%, transparent),
              color-mix(in srgb, var(--amber) 2%, transparent));
  border-radius: var(--r-card);
  padding: 20px 24px;
  display: flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.compliance-band__tag{
  font-family: var(--ft); font-weight:800;
  font-size:11px; letter-spacing:1.5px;
  background: var(--amber); color: var(--amberOn);
  border-radius: 8px; padding: 6px 11px;
  white-space: nowrap;
}
.compliance-band p{ flex:1; min-width:260px; font-size:14.5px; color:var(--amberT); margin:0 }
.compliance-band p b{ color:var(--tx) }

/* -------------------------------------------------------------
   8 · FORMULARIO (el diagnóstico — la caja registradora)
   ------------------------------------------------------------- */
.field{ margin-bottom:16px }
.field label{
  display:block;
  font-family:var(--ft); font-weight:800;
  font-size:11px; letter-spacing:.8px; text-transform:uppercase;
  color: var(--tx3); margin-bottom:8px;
}
.field input, .field select{
  width:100%;
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 12px 14px;
  color: var(--tx);
  font-family: inherit; font-size:14px;
  outline: none; transition:.15s;
}
.field input:focus{ border-color: var(--brand) }

.chip{
  border:1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 9px 14px;
  font-size:13px; font-weight:600;
  color: var(--tx2);
  cursor:pointer; transition:.15s;
}
.chip:hover{ border-color:var(--line2); color:var(--tx) }
.chip.is-selected{ background:var(--brand); color:var(--on); border-color:transparent }

/* El consentimiento NUNCA viene premarcado. Requisito legal. */
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--tx2) }
.consent input{ margin-top:3px; accent-color: var(--brand) }

/* -------------------------------------------------------------
   9 · BREAKPOINTS
   ------------------------------------------------------------- */
@media (max-width:1000px){ /* grillas 4 → 2 */ }
@media (max-width:900px) { /* nav colapsa · grillas → 1 */ }
@media (max-width:600px) { /* todo a una columna */ }

/* -------------------------------------------------------------
   10 · ACCESIBILIDAD
   ------------------------------------------------------------- */
:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}