/* ═══════════════════════════════════════════════════
   KAD Digital Group — tokens, reset y utilidades
   ═══════════════════════════════════════════════════ */

:root{
  /* ── marca (sin cambios respecto al sitio original) ── */
  --red:#6b1212;
  --red2:#8b1515;
  --red3:#a01818;
  --red-glow:rgba(139,21,21,.35);

  --dark:#0d0d0d;
  --dark2:#141414;
  --dark3:#1a1a1a;
  --ink:#1a0a0a;

  --white:#fff;
  --offwhite:#f5f0ee;
  --cream:#faf6f4;
  --text:#1a1a1a;
  --muted:#666;
  --border:#e4dcd9;

  /* ── superficies de profundidad ── */
  --surface-light:rgba(255,255,255,.72);
  --surface-dark:rgba(255,255,255,.045);
  --stroke-light:rgba(139,21,21,.14);
  --stroke-dark:rgba(255,255,255,.09);

  /* ── sombras en capas (no una sola sombra plana) ── */
  --sh-sm:0 1px 2px rgba(26,10,10,.06), 0 2px 6px rgba(26,10,10,.05);
  --sh-md:0 2px 4px rgba(26,10,10,.05), 0 8px 24px rgba(26,10,10,.08);
  --sh-lg:0 4px 8px rgba(26,10,10,.06), 0 18px 50px rgba(26,10,10,.12);
  --sh-red:0 8px 30px rgba(139,21,21,.28), 0 2px 8px rgba(139,21,21,.2);
  --sh-dark:0 2px 6px rgba(0,0,0,.4), 0 20px 60px rgba(0,0,0,.35);

  /* ── tipografía fluida ── */
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'Inter',system-ui,-apple-system,sans-serif;

  --t-hero:clamp(30px,6.4vw,58px);
  --t-h2:clamp(26px,4.6vw,46px);
  --t-h3:clamp(17px,2.2vw,21px);
  --t-body:clamp(13px,1.6vw,15px);
  --t-small:clamp(11px,1.3vw,12.5px);

  /* ── ritmo (no padding uniforme en todo) ── */
  --sp-section:clamp(64px,8vw,110px);
  --sp-tight:clamp(40px,5vw,64px);
  --wrap:1140px;

  /* ── movimiento ── */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:.22s;
  --d-mid:.42s;
  --d-slow:.9s;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}
html.modal-open{overflow:hidden}

body{
  font-family:var(--f-sans);
  background:var(--white);
  color:var(--text);
  overflow-x:hidden;
  max-width:100vw;
  line-height:1.5;
  padding-top:70px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%;-webkit-touch-callout:none}
::selection{background:var(--red2);color:#fff}

:focus-visible{
  outline:2px solid var(--red3);
  outline-offset:3px;
  border-radius:4px;
}

/* ── títulos de sección ── */
h2{
  font-family:var(--f-serif);
  font-size:var(--t-h2);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.5px;
  color:var(--ink);
}

.sec-tag{
  display:inline-block;
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--red2);
  font-weight:800;
  margin-bottom:10px;
}
.sec-sub{
  font-size:var(--t-body);
  color:var(--muted);
  font-weight:300;
  line-height:1.75;
}

/* ═══ barra de progreso de scroll ═══ */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:transparent;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--red3));
  box-shadow:0 0 12px var(--red-glow);
  transition:width .1s linear;
}

/* ═══ orbes de luz de fondo (profundidad en secciones oscuras) ═══ */
.glow-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(90px);
  opacity:.5;
  z-index:0;
}
.orb-a{width:min(480px,60vw);height:min(480px,60vw);background:radial-gradient(circle,rgba(139,21,21,.5),transparent 70%);top:-8%;right:-10%}
.orb-b{width:min(560px,70vw);height:min(560px,70vw);background:radial-gradient(circle,rgba(160,24,24,.42),transparent 70%);bottom:-14%;left:-14%}
.orb-c{width:min(520px,66vw);height:min(520px,66vw);background:radial-gradient(circle,rgba(139,21,21,.4),transparent 70%);top:8%;left:-16%}

/* ═══ entrada al hacer scroll (con profundidad, no solo fade) ═══
   Se oculta SÓLO si el JS arrancó (html.js). Si el JS falla o está
   bloqueado, todo el contenido sigue visible. */
.js .reveal{
  opacity:0;
  transform:translate3d(0,32px,-60px) rotateX(6deg);
  transform-origin:50% 100%;
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  will-change:transform,opacity;
}
.js .reveal.in{
  opacity:1;
  transform:translate3d(0,0,0) rotateX(0);
  will-change:auto;
}

/* escalonado dentro de una grilla */
.para-ti-grid .reveal:nth-child(2),.ally-cards .reveal:nth-child(2){transition-delay:.08s}
.para-ti-grid .reveal:nth-child(3),.ally-cards .reveal:nth-child(3){transition-delay:.16s}
.para-ti-grid .reveal:nth-child(4),.ally-cards .reveal:nth-child(4){transition-delay:.24s}
.para-ti-grid .reveal:nth-child(5){transition-delay:.32s}
.para-ti-grid .reveal:nth-child(6){transition-delay:.4s}
.testi-card.reveal:nth-of-type(2){transition-delay:.1s}
.testi-card.reveal:nth-of-type(3){transition-delay:.2s}

/* ═══ tarjetas con inclinación 3D real siguiendo el cursor ═══ */
.tilt{
  transform-style:preserve-3d;
  transition:transform var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out),
             border-color var(--d-mid) var(--e-soft), background var(--d-mid) var(--e-soft);
}
.tilt.tilting{transition:box-shadow var(--d-mid) var(--e-out)}
.tilt > *{transform:translateZ(24px)}

/* ═══ animaciones compartidas ═══ */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blinkArrow{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.22;transform:translateY(7px)}}
@keyframes hintPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@keyframes tickerRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ctaBreath{
  0%,100%{box-shadow:0 8px 26px rgba(139,21,21,.34), 0 2px 8px rgba(139,21,21,.24)}
  50%{box-shadow:0 14px 44px rgba(139,21,21,.55), 0 2px 8px rgba(139,21,21,.3)}
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,26px,-40px)}to{opacity:1;transform:none}}

/* ═══ accesibilidad: respeta reduced-motion ═══ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  .tilt > *{transform:none}
}