/* ============================================================
   Make it Easy — Sistema visual
   Estructura tomada del sistema de Ventas-Inversiones (KW/BASS):
   escenario de fondo con capas, superficies de vidrio, escala de
   elevación, curvas de movimiento y revelado por scroll.
   La paleta es propia: grafito profundo y cobre.
   ============================================================ */

/* TEMA:INICIO */
:root{
  /* --- Paleta --- */
  --grafito-hondo:#0E131A;
  --grafito:#161E28;
  --grafito-medio:#232F3D;
  --grafito-suave:#3A4757;
  --cobre:#C4794A;
  --cobre-accion:#A85F33;
  --cobre-claro:#E0A574;
  --cobre-tinte:#F7E9DC;
  --cobre-hondo:#8A4A22;
  --arena:#F2F0EC;
  --tarjeta:#FFFFFF;
  --humo:#F7F7F8;
  --tinta:#1A1F27;
  --tinta-suave:#5A6270;
  --linea:#E4E5E9;
  --ok:#1E7A34;
  --peligro:#B3261E;
  --whatsapp:#25D366;

  /* --- Profundidad --- */
  --lift-1:0 1px 2px rgba(14,19,26,.06), 0 2px 8px rgba(14,19,26,.04);
  --lift-2:0 2px 4px rgba(14,19,26,.07), 0 8px 24px rgba(14,19,26,.08);
  --lift-3:0 8px 16px rgba(14,19,26,.10), 0 24px 56px rgba(14,19,26,.14);
  --lift-4:0 20px 40px rgba(14,19,26,.16), 0 48px 100px rgba(14,19,26,.22);

  /* --- Movimiento --- */
  --curva:cubic-bezier(.22,.9,.3,1);
  --curva-salida:cubic-bezier(.16,1,.3,1);
  --rapido:.18s;
  --normal:.34s;
  --lento:.7s;

  /* --- Métrica --- */
  --marco:1280px;
  --gut:clamp(20px, 4vw, 40px);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;

  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}
/* TEMA:FIN */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--grafito-hondo);color:var(--tinta);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--grafito-hondo);margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.1}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,[role="button"],summary,.chip,.punto{touch-action:manipulation}
button,[role="button"],summary,.chip{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{cursor:pointer}
img,video,svg{max-width:100%;display:block}
::selection{background:var(--cobre);color:#fff}
:focus-visible{outline:2px solid var(--cobre-accion);outline-offset:3px;border-radius:4px}
*{scrollbar-width:thin;scrollbar-color:var(--cobre) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(58,71,87,.55);border-radius:6px;border:2px solid transparent;background-clip:content-box}


.marco{max-width:var(--marco);margin-inline:auto;padding-inline:calc(var(--gut) + env(safe-area-inset-left, 0px)) calc(var(--gut) + env(safe-area-inset-right, 0px))}
.tabular{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   TIPOGRAFÍA DE ESCALA
   ============================================================ */
.display{font-family:var(--serif);font-size:clamp(38px, 6.4vw, 82px);line-height:.98;letter-spacing:-.035em}
.display-2{font-family:var(--serif);font-size:clamp(30px, 4.4vw, 56px);line-height:1.03;letter-spacing:-.03em}
.h-sec{font-family:var(--serif);font-size:clamp(26px, 3.2vw, 40px);line-height:1.08;letter-spacing:-.025em}
.lede{font-size:clamp(15px, 1.5vw, 18px);line-height:1.65;color:var(--tinta-suave);max-width:62ch}
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobre-hondo);
}
.eyebrow--claro{color:var(--cobre-claro)}
.cifra{font-family:var(--serif);font-size:clamp(30px, 4vw, 52px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ============================================================
   ESCENARIO DE FONDO
   Capas de foto que se cruzan según la sección, orbes de luz,
   trama fina y un velo grafito que sostiene el texto.
   ============================================================ */
.escenario{position:fixed;inset:0;z-index:-1;background:var(--grafito-hondo);overflow:hidden}
.escenario .capa{
  position:absolute;inset:-6% -2%;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s var(--curva);
}
.escenario .capa.activa{opacity:var(--opacidad-capa, .24)}
.escenario .orbe{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  background:radial-gradient(circle, rgba(196,121,74,.55), transparent 70%);
}
.escenario .orbe--a{width:48vw;height:48vw;top:-14vw;right:-10vw}
.escenario .orbe--b{width:40vw;height:40vw;bottom:-16vw;left:-12vw;background:radial-gradient(circle, rgba(58,71,87,.75), transparent 70%)}
.escenario .trama{
  position:absolute;inset:0;opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:72px 72px;
}
/* luz de cobre que sigue al cursor (sistema.js la mueve) */
.escenario .luz{
  position:absolute;left:-340px;top:-340px;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(224,165,116,.13), rgba(224,165,116,.04) 55%, transparent);
  opacity:0;transition:opacity .8s var(--curva);pointer-events:none;z-index:1;
}
.escenario .luz.on{opacity:1}
.escenario .velo{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 50% at 78% 2%, rgba(196,121,74,.16), transparent 62%),
    linear-gradient(180deg, rgba(14,19,26,.74) 0%, rgba(14,19,26,.84) 55%, rgba(14,19,26,.93) 100%);
}

/* Texto que apoya directo sobre el escenario */
.sobre-oscuro h1,.sobre-oscuro h2,.sobre-oscuro h3,.sobre-oscuro h4{color:#fff}
.sobre-oscuro p,.sobre-oscuro li,.sobre-oscuro .lede{color:rgba(255,255,255,.76)}
.sobre-oscuro .lede strong,.sobre-oscuro p strong{color:#fff;font-weight:600}
.sobre-oscuro .eyebrow{color:var(--cobre-claro)}
.sobre-oscuro .tarjeta,.sobre-oscuro .vidrio{color:var(--tinta)}
.sobre-oscuro .tarjeta h1,.sobre-oscuro .tarjeta h2,.sobre-oscuro .tarjeta h3,
.sobre-oscuro .vidrio h1,.sobre-oscuro .vidrio h2,.sobre-oscuro .vidrio h3{color:var(--grafito-hondo)}
.sobre-oscuro .tarjeta p,.sobre-oscuro .vidrio p{color:var(--tinta-suave)}

/* ============================================================
   REVELADO POR SCROLL
   El estado oculto solo se aplica si el JS confirmó que puede
   revelarlo (.js-revelar en <html>): si algo falla, se ve todo.
   ============================================================ */
.js-revelar .revelar{
  opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .85s var(--curva-salida), transform .85s var(--curva-salida);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js-revelar .revelar.dentro{opacity:1;transform:none}
.js-revelar .revelar-3d{
  opacity:0;transform:perspective(1200px) rotateX(12deg) translate3d(0,44px,-60px);
  transition:opacity .95s var(--curva-salida), transform .95s var(--curva-salida);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js-revelar .revelar-3d.dentro{opacity:1;transform:none}

/* ============================================================
   TÍTULOS QUE LLEGAN LETRA POR LETRA  ([data-letras], sistema.js)
   Las letras existen solo si el JS las armó: sin JS el título se ve
   entero. Mientras se arman, el título espera escondido (con red de
   seguridad a los 2,5 s por si el JS nunca llega).
   ============================================================ */
.js-letras [data-letras]:not(.partido){visibility:hidden;animation:ver-igual 0s .8s forwards}
@keyframes ver-igual{to{visibility:visible}}
[data-letras]{perspective:700px}
[data-letras] .linea{display:block}
.palabra{display:inline-block;white-space:nowrap}
.letra{display:inline-block}
.partido:not(.entra) .letra{opacity:0;transform:translateY(.55em) rotateX(-75deg);filter:blur(10px)}
.entra .letra{animation:llegar 1s var(--curva) both;animation-delay:calc(var(--i) * 30ms + var(--demora, 0ms))}
.entra em .letra{
  animation:llegar 1s var(--curva) both, ola 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * 30ms + var(--demora, 0ms)), calc(1.8s + var(--j) * 80ms);
}
@keyframes llegar{
  0%{opacity:0;transform:translateY(.55em) rotateX(-75deg);filter:blur(10px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
/* una ola de luz que recorre la palabra, letra por letra */
@keyframes ola{
  0%,14%,100%{color:var(--cobre-claro);text-shadow:none}
  6%{color:#FFE9D2;text-shadow:0 0 .35em rgba(232,160,100,.75)}
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --btn-fondo:var(--grafito-hondo);
  --btn-texto:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--btn-fondo);color:var(--btn-texto);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;overflow:hidden;
  transition:transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), background var(--rapido);
}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--normal) var(--curva)}

.btn:active{transform:scale(.97)}
.btn--cobre{--btn-fondo:var(--cobre-accion);--btn-texto:#fff;font-weight:700}

.btn--wa{--btn-fondo:var(--whatsapp);--btn-texto:#08301B;font-weight:700}

.btn--fantasma{--btn-fondo:transparent;--btn-texto:var(--grafito-hondo);border-color:var(--linea)}

.btn--sobre-oscuro{--btn-fondo:rgba(255,255,255,.08);--btn-texto:#fff;border-color:rgba(255,255,255,.28)}

.btn--sm{padding:9px 16px;font-size:12.5px;min-height:44px}
.btn--block{width:100%}
/* barrido de luz en el botón principal */
.btn--cobre::after{
  content:"";position:absolute;inset:0 auto 0 -60%;width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg);transition:left .55s var(--curva);
}


/* ============================================================
   SUPERFICIES
   ============================================================ */
.tarjeta{
  position:relative;background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:var(--lift-1);
  transition:transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal);
}


/* vidrio: deja pasar algo del escenario */
.vidrio{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-lg);
  box-shadow:var(--lift-3);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
}
.vidrio--oscuro{
  background:rgba(22,30,40,.6);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}


/* panel oscuro: el cierre de cada pantalla */
.panel-hondo{
  position:relative;border-radius:var(--r-xl);padding:clamp(28px, 5vw, 60px);
  color:#fff;overflow:hidden;
  background:linear-gradient(155deg, var(--grafito-hondo) 0%, var(--grafito) 52%, var(--grafito-medio) 100%);
  box-shadow:var(--lift-4);
}
.panel-hondo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 84% 6%, rgba(196,121,74,.24), transparent 62%);
}
.panel-hondo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px);
}
.panel-hondo > *{position:relative;z-index:1}
.panel-hondo h2,.panel-hondo h3{color:#fff}

/* ============================================================
   INSIGNIAS, CHIPS Y MÉTRICAS
   ============================================================ */
.insignia{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--cobre-tinte);color:var(--cobre-hondo);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--mono);
}
.insignia--oscura{background:rgba(255,255,255,.1);color:var(--cobre-claro)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--linea);background:var(--tarjeta);font-size:13.5px;font-weight:600;
  transition:background var(--rapido), color var(--rapido), border-color var(--rapido), transform var(--normal) var(--curva);
}

.chip[aria-pressed="true"],.chip.activo{background:var(--grafito-hondo);border-color:var(--grafito-hondo);color:#fff}
.chip[aria-pressed="true"] small{color:var(--cobre-claro)}

.metrica{display:flex;flex-direction:column;gap:6px}
.metrica b{font-family:var(--serif);font-size:clamp(26px, 3.4vw, 44px);line-height:1;letter-spacing:-.03em;border-bottom:2px solid var(--cobre);padding-bottom:8px;font-variant-numeric:tabular-nums;font-weight:600}
.metrica > span{font-size:13px;color:var(--tinta-suave);line-height:1.35}
.sobre-oscuro .metrica b{color:#fff;border-bottom-color:rgba(196,121,74,.6)}
.sobre-oscuro .metrica > span{color:rgba(255,255,255,.62)}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo{display:grid;gap:7px;border:0;padding:0;margin:0;min-width:0}
.campo > label,.campo legend{font-size:13px;font-weight:600;color:var(--tinta-suave);padding:0}
.campo input,.campo textarea,.campo select{
  width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:var(--r-sm);
  background:var(--tarjeta);color:var(--tinta);font-size:16px;
  transition:border-color var(--rapido), box-shadow var(--rapido);
}
.campo textarea{resize:vertical;min-height:104px}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--cobre);box-shadow:0 0 0 3px rgba(196,121,74,.18)}
.campo input[aria-invalid="true"]{border-color:var(--peligro)}
.aviso-error{min-height:1.2em;color:var(--peligro);font-size:13.5px;font-weight:600}
.aviso-error:empty{display:none}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra em .letra{animation:none}
  *,*::before,*::after{animation-duration:1ms !important;transition-duration:1ms !important}
  .escenario .capa{transition:none}
}

/* Hover solo donde hay puntero fino: en tactil el :hover queda pegado tras el toque */
@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar-thumb:hover{background-color:var(--cobre);background-clip:content-box}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
  .btn--cobre:hover{background:var(--cobre-claro);color:var(--grafito-hondo)}
  .btn--wa:hover{background:#2FE775}
  .btn--fantasma:hover{background:var(--humo);border-color:var(--grafito-hondo)}
  .btn--sobre-oscuro:hover{background:rgba(255,255,255,.16);border-color:var(--cobre)}
  .btn--cobre:hover::after{left:120%}
  .tarjeta--hover:hover{transform:translateY(-5px);box-shadow:var(--lift-3);border-color:var(--cobre)}
  .chip:hover{border-color:var(--grafito-hondo)}
}