/* CONCIL · sitio público.
 *
 * La identidad viene de la aplicación —tinta azul y oro— para que quien entre
 * después no sienta que cambió de producto. La estructura viene del libro
 * mayor: rayas finas, columnas que tienen que alinear, cifras en el margen.
 * Nada de tarjetas iguales una al lado de otra.
 *
 * Todo en rem. Lo que se anima se esconde SOLO bajo .con-motor, que el
 * JavaScript pone cuando confirma que hay motor: sin JavaScript se lee entero.
 */

:root{
  --tinta:#06091a; --panel:#0b1026; --panel-2:#111838;
  --raya:rgba(243,238,221,.12); --raya-fina:rgba(243,238,221,.07);
  --raya-oro:rgba(212,168,87,.32);
  --texto:#f3eedd; --suave:rgba(243,238,221,.72); --mudo:rgba(243,238,221,.46);
  --oro:#d4a857; --oro-claro:#ecd193; --oro-papel:#1a1305;
  --entra:#7fd18b; --sale:#ff8f6b;
  --sans:"Outfit",system-ui,-apple-system,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px; --r-lg:20px;
  --ancho:74rem;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; color:var(--texto);
  /* Nunca negro plano: dos luces muy tenues y un grano al 3 % para que la
     pantalla tenga materia. Sin esto el oscuro se ve barato. */
  background:
    radial-gradient(60rem 40rem at 78% -10%, rgba(212,168,87,.07), transparent 60%),
    radial-gradient(50rem 38rem at 8% 12%, rgba(107,130,196,.06), transparent 62%),
    var(--tinta);
  background-attachment:fixed;
  font-family:var(--sans); font-weight:300; font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; font-weight:500; line-height:1.12; letter-spacing:-.012em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro-claro); outline-offset:3px; border-radius:4px}

.saltar{position:absolute; left:-9999px}
.saltar:focus{left:1rem; top:1rem; z-index:50; background:var(--oro); color:var(--oro-papel); padding:.7rem 1rem; border-radius:var(--r)}

/* ============ barra ============ */
.barra{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:rgba(6,9,26,.86); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--raya-fina);
}
.marca{display:flex; align-items:baseline; gap:.5rem; text-decoration:none}
.marca-nombre{
  font-family:var(--serif); font-size:1.45rem; font-weight:600; letter-spacing:.03em;
  background:linear-gradient(118deg,#f7e9c4,#ecd193 42%,#d4a857 64%,#b88a3a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.marca-credito{font-size:.78rem; color:var(--mudo)}
.barra-nav{display:flex; align-items:center; gap:1.75rem}
.barra-nav a:not(.boton){color:var(--suave); text-decoration:none; font-size:.97rem}
.barra-nav a:not(.boton):hover{color:var(--texto)}

/* ============ botones ============ */
.boton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:2.75rem; padding:.62rem 1.3rem; border-radius:var(--r);
  text-decoration:none; font-family:inherit; font-size:1rem; font-weight:500;
  /* Sin esto, un <button class="boton"> se queda con el fondo gris del
     navegador: hasta ahora todos los botones eran enlaces y no se notaba. */
  background:none; color:inherit;
  border:1px solid transparent; cursor:pointer;
  transition:filter 140ms ease, background-color 140ms ease;
}
.boton-grande{min-height:3.1rem; padding:.85rem 1.7rem; font-size:1.05rem}
.boton-oro{background:linear-gradient(118deg,#ecd193,#d4a857 58%,#bd9242); color:var(--oro-papel); font-weight:600}
.boton-oro:hover{filter:brightness(1.09)}
.boton-linea{border-color:var(--raya-oro); color:var(--oro-claro)}
.boton-linea:hover{background:rgba(212,168,87,.1)}
.barra-nav .boton{min-height:2.5rem; padding:.5rem 1.1rem}
.enlace{background:none; border:0; color:var(--oro-claro); font:inherit; cursor:pointer; text-decoration:underline; padding:.4rem}

/* ============ portada ============ */
.portada{
  max-width:var(--ancho); margin:0 auto;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.5rem) 3.5rem;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.titular{display:block; font-weight:400}
.titular-cifra{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(3.6rem,10.5vw,7.5rem); line-height:.92; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,#f9efd6,#ecd193 38%,#d4a857 66%,#9d7328);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.titular-frase{
  display:block; margin-top:.55rem;
  font-size:clamp(1.5rem,3.3vw,2.3rem); line-height:1.16; color:var(--texto); font-weight:400;
}
.entrada{margin-top:1.5rem; color:var(--suave); font-size:1.1rem; max-width:34rem}
.entrada-ancha{max-width:46rem}
.definicion{
  margin-top:1.4rem; padding-left:1rem; border-left:2px solid var(--raya-oro);
  color:var(--texto); font-size:1.02rem;
}
.portada-botones{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.2rem}

/* ============ el cuadre ============ */
.cuadre{
  margin:0; background:linear-gradient(168deg,var(--panel-2),var(--panel) 65%);
  border:1px solid var(--raya-oro); border-radius:var(--r-lg);
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.6); overflow:hidden;
}
.cuadre-tope{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.8rem 1.1rem; border-bottom:1px solid var(--raya-fina);
  font-family:var(--mono); font-size:.78rem; color:var(--mudo);
}
.cuadre-banco{color:var(--oro-claro); letter-spacing:.02em}
.cuadre-otra{
  background:none; border:1px solid var(--raya); border-radius:6px;
  color:var(--mudo); font-family:var(--mono); font-size:.72rem;
  padding:.3rem .6rem; cursor:pointer; min-height:1.9rem;
}
.cuadre-otra:hover{color:var(--texto); border-color:var(--raya-oro)}
.cuadre-cuerpo{display:grid; grid-template-columns:1fr 1fr}
.cuadre-columna{padding:1.05rem .95rem; min-width:0}
.cuadre-columna + .cuadre-columna{border-left:1px solid var(--raya-fina)}
.cuadre-columna h2{font-size:.8rem; font-weight:400; color:var(--mudo); margin-bottom:.75rem; letter-spacing:0}
.renglones{list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:.79rem}
.renglones li{
  display:flex; justify-content:space-between; gap:.6rem; align-items:baseline;
  padding:.48rem .4rem; min-height:2.05rem; border-radius:5px;
  border-bottom:1px solid var(--raya-fina);
}
.renglones li:last-child{border-bottom:0}
.concepto{color:var(--suave); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.monto{font-variant-numeric:tabular-nums; white-space:nowrap; flex:none}
.monto.entra{color:var(--entra)}
.monto.sale{color:var(--sale)}
.renglones .falta .concepto{color:rgba(243,238,221,.28); font-style:italic}

/* Lo que no cuadra se enciende. Es el único momento de color fuerte. */
.renglones li.marcada,
.cuadre.resuelto [data-huerfana]{
  background:rgba(212,168,87,.14);
  box-shadow:inset 2px 0 0 var(--oro);
  transition:background 420ms ease, box-shadow 420ms ease;
}
.cuadre-hallazgo{
  padding:1.05rem 1.1rem; border-top:1px solid var(--raya-fina);
  background:rgba(212,168,87,.06); font-size:.96rem; color:var(--suave);
}
.cuadre-hallazgo strong{color:var(--oro-claro); font-weight:600}

/* ============ franja ============ */
/* El rayado de fondo es el del papel del libro mayor: apenas se ve, pero le da
   materia a la única frase que va sola en la página. */
.franja{
  border-block:1px solid var(--raya-fina);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2.6rem - 1px),
      var(--raya-fina) calc(2.6rem - 1px), var(--raya-fina) 2.6rem),
    var(--panel);
}
.franja p{
  max-width:48rem; margin:0 auto; padding:clamp(2.2rem,5vw,3.2rem) 1.5rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.25rem,2.6vw,1.65rem); line-height:1.4;
  color:var(--texto); text-align:center;
}

/* ============ bloques ============ */
.bloque{max-width:var(--ancho); margin:0 auto; padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.titulo-bloque{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.6rem); margin-bottom:1.1rem;
}
.nota{margin-top:1.2rem; color:var(--mudo); font-size:.95rem}

/* ---- pérdidas: cifra en el margen, rayas de libro ---- */
.perdidas{list-style:none; counter-reset:none; margin:2.8rem 0 0; padding:0}
.perdidas li{
  display:grid; grid-template-columns:14rem 1fr; gap:clamp(1.5rem,4vw,3rem);
  padding:1.9rem 0; border-top:1px solid var(--raya);
  align-items:start;
}
.perdidas li:last-child{border-bottom:1px solid var(--raya)}
/* La cifra va pegada al borde derecho de su columna: así las cuatro forman un
   filo recto contra el texto, como la columna de montos de un libro. */
.perdida-cifra{
  font-family:var(--serif); font-weight:300; font-variant-numeric:tabular-nums;
  font-size:clamp(2.2rem,4.5vw,3.2rem); line-height:1; color:var(--oro-claro);
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; text-align:right;
}
/* Sin la unidad, un «1» solo en la columna no dice nada. */
.perdida-unidad{
  font-family:var(--sans); font-size:.87rem; line-height:1.25;
  color:var(--mudo); max-width:9rem;
}
.perdida-texto{display:grid; gap:.55rem; padding-top:.15rem}
.perdidas h3{
  font-size:1.22rem; font-weight:500;
  display:flex; align-items:center; gap:.75rem;
}
.perdidas p:not(.perdida-cifra){color:var(--suave); max-width:44rem}

/* ---- dibujos ---- */
/* Van con `currentColor`: el color lo pone la hoja, no el SVG, y así la clase
   `oro` destaca lo que importa de cada dibujo sin repetir el color adentro. */
.ilustra{display:block; width:100%; height:auto; color:rgba(243,238,221,.4)}
.ilustra .oro,.sello .oro{color:var(--oro)}
.ilustra .tenue,.sello .tenue{opacity:.5}
.ilustra-bancos{max-width:46rem; margin:2.8rem auto .4rem}
.ilustra-paso{width:min(11rem,62%); margin-bottom:1.1rem}
.ilustra-sobre{width:10.5rem; margin-top:2rem}
.ilustra-puerta{width:8.5rem; margin:0 auto 1.8rem}
.sello{
  width:3rem; height:3rem; flex:none; padding:.32rem;
  color:rgba(243,238,221,.5); background:rgba(243,238,221,.035);
  border:1px solid var(--raya-fina); border-radius:10px;
}

/* ---- prueba ---- */
.bloque-prueba{border-top:1px solid var(--raya-fina); background:var(--panel)}
.prueba{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:2.5rem 0 0;
  border-top:1px solid var(--raya);
}
.prueba > div{padding:1.6rem 1.2rem; border-bottom:1px solid var(--raya)}
.prueba > div + div{border-left:1px solid var(--raya-fina)}
.prueba dt{order:2; font-size:.9rem; color:var(--mudo); margin-top:.3rem}
.prueba dd{
  order:1; margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1; color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.prueba > div{display:flex; flex-direction:column}

/* ---- bancos ---- */
.bancos{list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.5rem,4vw,3rem)}
.bancos li{padding:1.15rem 0; border-top:1px solid var(--raya-fina)}
.bancos h3{
  font-family:var(--mono); font-size:.95rem; font-weight:500;
  color:var(--oro-claro); margin-bottom:.3rem; letter-spacing:-.01em;
}
.bancos p{color:var(--suave); font-size:.97rem}

/* ---- pasos: sí es una secuencia, por eso van numerados ---- */
.pasos{list-style:none; counter-reset:paso; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3.5vw,2.5rem)}
.pasos li{counter-increment:paso; padding-top:3.2rem; position:relative}
.pasos li::before{
  content:counter(paso); position:absolute; top:0; left:0;
  font-family:var(--serif); font-size:2.4rem; font-weight:300; line-height:1;
  color:var(--oro); opacity:.55;
}
.pasos li::after{
  content:""; position:absolute; top:1.1rem; left:1.9rem; right:0; height:1px;
  background:var(--raya-fina);
}
.pasos li:last-child::after{right:0}
.pasos h3{font-size:1.15rem; margin-bottom:.5rem}
.pasos p{color:var(--suave); font-size:.99rem}

/* ---- preguntas ---- */
.preguntas{margin-top:2.5rem; border-top:1px solid var(--raya)}
.preguntas details{border-bottom:1px solid var(--raya-fina)}
.preguntas summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0;
  position:relative; min-height:3rem;
}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary h3{font-size:1.1rem; font-weight:500; display:inline}
.preguntas summary::after{
  content:"+"; position:absolute; right:.4rem; top:1.15rem;
  font-family:var(--mono); font-size:1.3rem; color:var(--oro); line-height:1;
}
.preguntas details[open] summary::after{content:"−"}
.preguntas details p{padding:0 2.5rem 1.5rem 0; color:var(--suave); max-width:52rem}

/* ---- formulario ---- */
.bloque-forma{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,5vw,3.5rem);
  align-items:start; border-top:1px solid var(--raya-fina);
}
.forma-texto p{color:var(--suave); margin-top:1rem}
.forma{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.campo{display:flex; flex-direction:column; gap:.4rem}
.campo-ancho,.errores{grid-column:1 / -1}
.campo label{font-size:.93rem; color:var(--suave)}
.opcional{color:var(--mudo)}
.campo input,.campo textarea{
  font-family:inherit; font-size:1rem; color:var(--texto);
  background:var(--panel); border:1px solid var(--raya); border-radius:var(--r);
  padding:.72rem .9rem; min-height:2.9rem; width:100%;
}
.campo textarea{min-height:5.5rem; resize:vertical}
.campo input:focus,.campo textarea:focus{
  border-color:var(--raya-oro); outline:none; box-shadow:0 0 0 3px rgba(212,168,87,.15);
}
.campo input::placeholder{color:rgba(243,238,221,.3)}
.pista{font-size:.88rem; color:var(--mudo)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.errores{
  background:rgba(255,143,107,.1); border:1px solid rgba(255,143,107,.35);
  border-radius:var(--r); padding:.95rem 1.05rem; color:#ffcdbe; font-size:.96rem;
}
.errores p + p{margin-top:.35rem}
.recibido{
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--raya-oro); border-radius:var(--r-lg); padding:2rem;
}
.recibido h3{font-family:var(--serif); color:var(--oro-claro); font-size:1.45rem; margin-bottom:.6rem; font-weight:400}
.recibido p{color:var(--suave)}

/* ============ pie ============ */
.pie{
  border-top:1px solid var(--raya-fina); background:var(--panel);
  padding:3rem 1.5rem; text-align:center; color:var(--mudo); font-size:.95rem;
}
.pie-marca{color:var(--texto); font-size:1.15rem}
.pie-marca strong{
  font-family:var(--serif); font-weight:600; letter-spacing:.03em;
  background:linear-gradient(118deg,#f7e9c4,#ecd193 42%,#d4a857 64%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pie p + p{margin-top:.5rem}
.pie a{color:var(--oro-claro)}

/* ============ pantalla de acceso ============ */
.cuerpo-acceso{display:grid; place-items:center; min-height:100vh; padding:2rem 1.5rem}
.acceso{width:100%; max-width:31rem; text-align:center}
.marca-centrada{justify-content:center; margin-bottom:2.4rem}
.acceso h1{font-family:var(--serif); font-size:clamp(1.7rem,4vw,2.2rem); font-weight:400}
.acceso .entrada{margin-inline:auto; margin-top:1rem}
.forma-acceso{margin-top:2.2rem; text-align:left; display:grid; gap:1.1rem}
.forma-acceso .boton{width:100%}
.campo-sufijo{display:flex; align-items:stretch}
.campo-sufijo input{border-radius:var(--r) 0 0 var(--r); border-right:0}
.sufijo{
  display:flex; align-items:center; padding:0 .9rem;
  background:var(--panel-2); border:1px solid var(--raya); border-left:0;
  border-radius:0 var(--r) var(--r) 0; color:var(--mudo);
  font-family:var(--mono); font-size:.86rem; white-space:nowrap;
}
.vuelta{
  margin-top:1.8rem; padding:1.2rem; background:var(--panel);
  border:1px solid var(--raya-oro); border-radius:var(--r);
  display:grid; gap:.85rem; justify-items:center;
}
.vuelta strong{color:var(--oro-claro)}
.acceso .nota a{color:var(--oro-claro)}

/* ============ estados de animación ============ */
/* Solo cuando hay motor: si no, todo se ve desde el principio. */
.con-motor .cuadre .renglones li,
.con-motor .cuadre-hallazgo{opacity:0}

/* ============ pantallas angostas ============ */
@media (max-width:62rem){
  .portada{grid-template-columns:1fr; gap:2.5rem}
  .prueba{grid-template-columns:1fr 1fr}
  .prueba > div:nth-child(odd){border-left:0}
  .pasos{grid-template-columns:1fr}
  .pasos li::after{display:none}
  .bloque-forma{grid-template-columns:1fr}
  .bancos{grid-template-columns:1fr}
  .barra-nav a:not(.boton){display:none}
}
@media (max-width:40rem){
  body{font-size:1rem}
  .perdidas li{grid-template-columns:1fr; gap:.9rem}
  .perdida-cifra{flex-direction:row; align-items:baseline; gap:.5rem; text-align:left}
  .perdida-unidad{max-width:none}
  .ilustra-paso{width:min(10rem,45%)}
  .forma{grid-template-columns:1fr}
  .cuadre-cuerpo{grid-template-columns:1fr}
  .cuadre-columna + .cuadre-columna{border-left:0; border-top:1px solid var(--raya-fina)}
  .prueba{grid-template-columns:1fr}
  .prueba > div + div{border-left:0}
}

/* Grano finísimo sobre todo el fondo. Va en un pseudo-elemento fijo para que no
   se recalcule al hacer scroll y no toca ningún clic. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:1}

/* WhatsApp junto al formulario: en Venezuela es el canal por defecto, y el
   formulario no puede ser la única puerta. */
.o-whatsapp{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--raya-fina);
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;
  color:var(--suave); font-size:.97rem;
}