/* ═══════════════════════════════════════════════════════════════
   Simplicity Sigma© · EstratégicaMente · v3.0 · 2026
   Hoja común de la Suite Aula IA con Criterio
   Luz como campo · navy como tinta · brasa como energía
   ═══════════════════════════════════════════════════════════════ */

:root{
  --campo:#FFFFFF;
  --porcelana:#F4F6F8;
  --navy:#0A2540;
  --abismo:#051425;
  --brasa:#FF8300;
  --brasa-txt:#CC6900;
  --lima:#99CC00;
  --lima-txt:#5E7E00;
  --oro:#C9A961;
  --linea:#E2E8EE;
  --mute:#5B6573;

  --display:'Sora',system-ui,sans-serif;
  --texto:'Barlow',system-ui,sans-serif;
  --ledger:'IBM Plex Mono',ui-monospace,monospace;
  --ang:-14deg;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--campo);color:var(--navy);
  font-family:var(--texto);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}

/* ── tipografía ───────────────────────────────────────────── */
.t1,.t2,.t3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.02;color:var(--navy)}
.t1{font-size:clamp(32px,5.4vw,64px)}
.t2{font-size:clamp(25px,3.6vw,42px)}
.t3{font-size:clamp(16px,1.7vw,22px);line-height:1.15}
.lead{font-size:clamp(16px,1.65vw,20px);line-height:1.55;color:#2C3A47;max-width:62ch;text-wrap:balance}
.lead b,strong{font-weight:600;color:var(--navy)}
.mute{color:var(--mute)}
.dato{font-family:var(--ledger);color:var(--lima-txt);font-size:.86em;letter-spacing:.02em}
.rotulo{font-family:var(--ledger);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.brasa-txt{color:var(--brasa-txt)}

/* Subrayado −14°: UNA palabra por pieza */
.sub14{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.sub14::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.16em;
  background:var(--brasa);transform:rotate(var(--ang));transform-origin:left center;z-index:-1}

/* Cifra heroica */
.cifra{font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,86px);
  line-height:.9;color:var(--navy);letter-spacing:-.03em}
.cifra span{color:var(--brasa);font-weight:400}

/* ── Puntas Sigma: chevron ‹ siempre a la izquierda ───────── */
/* li en bloque con chevron absoluto: el texto con <b> intercalado
   fluye y salta de línea con normalidad (flex lo partía en columnas) */
.pt{list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
.pt li{position:relative;padding-left:1.5em;line-height:1.45}
.pt li::before{content:"‹";font-family:var(--display);font-weight:800;color:var(--brasa);
  font-size:1.05em;line-height:1;position:absolute;left:0;top:.16em}
.pt li.dest{padding-left:2.1em}
.pt li.dest::before{content:"‹‹"}
.sep{font-family:var(--display);font-weight:800;color:var(--brasa);letter-spacing:.1em}

/* ── Bloque Brasa: una sola zona naranja por pieza ────────── */
.brasa-bloque{
  background:var(--brasa);color:var(--navy);padding:clamp(18px,2.6vw,30px) clamp(20px,3vw,38px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.6vw),0 100%);
}
.brasa-bloque .t2,.brasa-bloque .t3,.brasa-bloque .cifra{color:var(--navy)}
.brasa-bloque .rotulo{color:#7A4300}

/* ── Bitono Σ: fotografía en duotono navy + franja −14° ───── */
.bitono{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.bitono img{width:100%;height:100%;object-fit:cover;opacity:.62;mix-blend-mode:luminosity;
  filter:contrast(1.05)}
.bitono::after{content:"";position:absolute;left:-12%;right:-12%;top:52%;height:clamp(9px,1.1vw,15px);
  background:var(--brasa);transform:rotate(var(--ang));pointer-events:none}
.bitono.datos::after{background:var(--lima)}
.bitono figcaption{position:absolute;left:0;bottom:0;right:0;padding:14px 18px;
  font-family:var(--ledger);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(5,20,37,.72)}

/* ── Malla Sigma: banda de mini-sigmas, nunca a página completa */
.malla{
  background-color:var(--navy);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'><polyline points='4,4 28,4 12,13 28,22 4,22' fill='none' stroke='%2399CC00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/></svg>");
  background-size:34px 26px;
}

/* ── Sello Sigma: hexágono en oro, solo portadas y cierres ── */
.sello{width:var(--s,88px);height:var(--s,88px);flex:0 0 auto;display:block}

/* ── Cadena de Trazabilidad ───────────────────────────────── */
.cadena{display:flex;flex-wrap:wrap;gap:0;font-family:var(--ledger);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.cadena span{border:1px solid var(--linea);padding:7px 13px;color:var(--mute);
  border-right:none;white-space:nowrap}
.cadena span:last-child{border-right:1px solid var(--lima-txt);border-color:var(--lima-txt);
  color:var(--lima-txt)}

/* ── superficies ──────────────────────────────────────────── */
.ficha{border:1px solid var(--linea);padding:clamp(16px,2vw,24px);background:var(--campo)}
.ficha.porcelana{background:var(--porcelana);border-color:transparent}
.ficha.brasa{border-left:4px solid var(--brasa)}
.ficha.lima{border-left:4px solid var(--lima)}
.filete{height:1px;background:var(--linea);border:none}
.navy{background:var(--navy);color:#fff}
.navy .t1,.navy .t2,.navy .t3{color:#fff}
.navy .lead{color:#C6D2DE}
.navy .rotulo{color:#8FA0B2}
.navy .dato{color:var(--lima)}
.navy .filete{background:rgba(255,255,255,.16)}
/* sobre fondo oscuro el énfasis va en lima: el navy sobre navy no se lee */
.navy b,.navy strong,.navy .lead b,.navy p b,.navy li b,.navy td b,.navy th b{color:var(--lima)}
.navy td,.navy th{color:#C6D2DE}
.navy tbody th{color:#fff}
.navy thead th{color:var(--lima);border-bottom-color:rgba(153,204,0,.5)}
.navy table td,.navy table th{border-bottom-color:rgba(255,255,255,.16)}
.navy .pt li{color:#C6D2DE}
.navy ol.reglas li{color:#C6D2DE}

/* ── controles ────────────────────────────────────────────── */
.btn{
  display:inline-block;border:none;padding:14px 24px;background:var(--navy);color:#fff;
  font-family:var(--texto);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 22px) 100%,0 100%);
}
.btn:hover{background:var(--abismo)}
.btn.cta{background:var(--brasa);color:var(--navy)}
.btn.cta:hover{background:#E67600}
.btn.linea{background:transparent;color:var(--navy);border:1px solid var(--navy);clip-path:none}
.btn.linea:hover{background:var(--porcelana)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.full{display:block;width:100%;text-align:center}
:focus-visible{outline:3px solid var(--brasa);outline-offset:2px}

label{display:block;font-family:var(--ledger);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin:18px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select{
  width:100%;padding:13px 14px;font-family:var(--texto);font-size:16px;color:var(--navy);
  background:var(--campo);border:1px solid var(--linea);border-bottom:2px solid var(--navy);
}
input:focus,select:focus{outline:none;border-bottom-color:var(--brasa);background:var(--porcelana)}
input.mono{font-family:var(--ledger);letter-spacing:.12em;text-transform:uppercase}

.aviso{border-left:4px solid var(--brasa);background:var(--porcelana);padding:13px 16px;
  font-size:14.5px;color:#7A4300;margin-top:18px}
.aviso.ok{border-left-color:var(--lima);color:var(--lima-txt)}

/* ── logotipo ─────────────────────────────────────────────── */
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:500;
  font-size:15px;letter-spacing:-.01em;color:var(--navy);text-decoration:none}
.logo b{font-weight:500;color:var(--oro)}
.navy .logo,.logo.claro{color:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}