/* Huella · estilos de la landing (index.html) */
:root{--tinta-900:#0D0F12;--tinta:#15171C;--tinta-700:#22252D;--tinta-600:#33373F;--papel:#F4F1EA;--papel-000:#FBFAF6;--papel-200:#ECE8DE;--papel-300:#DFDACD;--lima:#D7F24A;--lima-600:#C4E03A;--lima-700:#A8C41B;--oliva:#8FA60F;--gris-700:#43474F;--gris-600:#5A5F6B;--gris-400:#82879A;--muted-inv:#9AA0AC;--line-inv:rgba(244,241,234,.14);--ease:cubic-bezier(.2,.6,.2,1);--display:"Archivo Black","Helvetica Neue",Arial,sans-serif;--sans:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--tinta-900);color:var(--papel);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:#E6F5A4;color:var(--tinta)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(61,111,224,.45);border-radius:5px}
.wa-logo{fill:currentColor;flex-shrink:0;display:block}
.ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Navbar */
.hl-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,4vw,56px);background:transparent;border-bottom:1px solid transparent;transition:background-color 200ms var(--ease),border-color 200ms var(--ease)}
.hl-nav.is-scrolled{background:rgba(13,15,18,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--line-inv)}
.hl-links{display:none;gap:32px}
.hl-links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-inv);transition:color 140ms var(--ease)}
.hl-links a:hover{color:var(--papel)}
.hl-navcta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:5px;background:var(--tinta-700);border:1px solid var(--line-inv);color:var(--papel);font-size:14px;font-weight:600;transition:background-color 140ms var(--ease)}
.hl-navcta:hover{background:var(--tinta-600)}
.hl-navcta:active{transform:translateY(1px)}
.hl-navcta .dot{width:7px;height:7px;border-radius:99px;background:var(--lima)}
.only-lg{display:none}

/* Botones */
.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:5px;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:background-color 140ms var(--ease),border-color 140ms var(--ease),color 140ms var(--ease)}
.hl-btn:active{transform:translateY(1px)}
.hl-btn-primary{background:var(--lima);color:var(--tinta)}
.hl-btn-primary:hover{background:var(--lima-600)}
.hl-btn-primary:active{background:var(--lima-700)}
.hl-btn-ghost{background:transparent;color:var(--papel);border:1px solid rgba(244,241,234,.28)}
.hl-btn-ghost:hover{border-color:rgba(244,241,234,.6)}
.hl-btn-ink{background:var(--tinta);color:var(--papel)}
.hl-btn-ink:hover{background:var(--tinta-700)}

/* Hero */
.hl-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;background:var(--tinta-900);overflow:hidden}
.hl-field{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hl-hero-inner{position:relative;z-index:2;width:100%;padding:140px clamp(20px,4vw,56px) clamp(40px,7vh,72px)}
.hl-hero-copy{max-width:100%}
.hl-h1{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.02em;color:var(--papel)}
.hl-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:rgba(244,241,234,.78);max-width:52ch}
.hl-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.hl-rule{width:44px;height:0;border-top:1.5px solid var(--lima)}
.hl-rule-oliva{border-top-color:var(--oliva)}
.fade-up{opacity:0;animation:hlFadeUp 700ms var(--ease) forwards}
@keyframes hlFadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}

/* Secciones */
.hl-section{padding:clamp(64px,9vw,112px) clamp(20px,4vw,56px)}
.hl-wrap{max-width:1200px;margin:0 auto}
.hl-papel{background:var(--papel);color:var(--gris-700)}
.hl-papel h2,.hl-papel h3{color:var(--tinta)}
.hl-tinta{background:var(--tinta);color:rgba(244,241,234,.78)}
.hl-tinta h2,.hl-tinta h3{color:var(--papel)}
.hl-grid-tex{background-image:linear-gradient(rgba(244,241,234,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.04) 1px,transparent 1px);background-size:32px 32px}
.hl-h2{font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.01em}
.hl-sub{font-size:clamp(17px,1.4vw,19px);line-height:1.55;max-width:56ch}

.g-servicios{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));row-gap:64px;column-gap:40px}
.g-pasos{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:32px}
.g-two{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:48px}
.g-equipo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g-etapas{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:0}

.hl-card{background:#fff;border:1px solid var(--papel-300);border-radius:12px;box-shadow:0 1px 2px rgba(21,23,28,.06);padding:28px;display:flex;flex-direction:column;gap:14px;transition:box-shadow 200ms var(--ease),border-color 200ms var(--ease)}
.hl-card-link:hover{box-shadow:0 2px 6px rgba(21,23,28,.07),0 1px 1px rgba(21,23,28,.04);border-color:#A9AEBC}
.hl-num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gris-600)}
.hl-quote{font-family:var(--sans);font-style:italic;font-weight:400;font-size:21px;line-height:1.35;color:var(--tinta)}
.hl-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--tinta);transition:color 140ms var(--ease)}
.hl-more:hover{color:var(--oliva)}

.hl-etapa{position:relative;display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line-inv)}
.hl-etapa .node{width:12px;height:12px;border-radius:99px;border:1.5px solid var(--lima);background:var(--tinta);flex-shrink:0}
.hl-etapa .node.on{background:var(--lima)}

.hl-paso{border-top:1px solid var(--line-inv);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.hl-paso .big{font-family:var(--display);font-size:56px;line-height:1;color:var(--lima);letter-spacing:-.02em}

.hl-photo-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;background:var(--papel-200);border:1px solid var(--papel-300);border-radius:12px}
.hl-photo{aspect-ratio:4/5;background:var(--papel-200);border:1px solid var(--papel-300);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-600)}

.hl-faq{border-top:1px solid var(--papel-300)}
.hl-faq details{border-bottom:1px solid var(--papel-300)}
.hl-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:19px;font-weight:600;color:var(--tinta);line-height:1.35}
.hl-faq summary::-webkit-details-marker{display:none}
.hl-faq summary .ic{transition:transform 200ms var(--ease);color:var(--gris-600)}
.hl-faq details[open] summary .ic{transform:rotate(45deg);color:var(--oliva)}
.hl-faq summary:hover{color:var(--oliva)}
.hl-faq .ans{padding:0 48px 24px 0;font-size:17px;line-height:1.6;color:var(--gris-700);max-width:62ch}

.hl-foot a{color:var(--muted-inv);transition:color 140ms var(--ease)}
.hl-foot a:hover{color:var(--papel)}

/* Recorrido animado */
.hl-track{position:relative}
.hl-runner{position:absolute;z-index:3;width:14px;height:14px;border-radius:99px;background:var(--lima);box-shadow:0 0 0 6px rgba(215,242,74,.16);pointer-events:none;left:-1px;transition:left 900ms var(--ease),top 900ms var(--ease)}
.hl-fill{position:absolute;z-index:1;background:var(--lima);pointer-events:none;left:5px;top:10%;width:1.5px;height:0;transition:width 900ms var(--ease),height 900ms var(--ease)}
.hl-runner.s-0{top:calc(10% - 7px)}.hl-runner.s-1{top:calc(30% - 7px)}.hl-runner.s-2{top:calc(50% - 7px)}.hl-runner.s-3{top:calc(70% - 7px)}.hl-runner.s-4{top:calc(90% - 7px)}
.hl-fill.s-1{height:20%}.hl-fill.s-2{height:40%}.hl-fill.s-3{height:60%}.hl-fill.s-4{height:80%}
.hl-etapa{cursor:default}
.hl-etapa .node{transition:background-color 300ms var(--ease)}
.hl-etapa.is-on .node{background:var(--lima)}
.hl-etapa .lbl{font-family:var(--display);font-size:20px;line-height:1.15;color:rgba(244,241,234,.42);transition:color 300ms var(--ease)}
.hl-etapa.is-on .lbl{color:var(--papel)}
.hl-etapa .idx{color:#9AA0AC;transition:color 300ms var(--ease)}
.hl-etapa.is-cur .idx{color:var(--lima)}

/* Servicios: título y, abajo, el video de cada uno */
.hl-svc{display:flex;flex-direction:column;gap:18px}
.hl-svc-head{display:flex;flex-direction:column;gap:10px}
.hl-svc-title{font-size:clamp(22px,2vw,26px);line-height:1.15}

/* Video: el JS lo activa si el contenedor tiene data-src o data-youtube */
.hl-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--tinta-700);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden}
.hl-video .play{width:68px;height:68px;border-radius:99px;background:var(--lima);color:var(--tinta);display:flex;align-items:center;justify-content:center;transition:transform 200ms var(--ease)}
.hl-video:hover .play{transform:scale(1.06)}
.hl-video .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-inv)}
.hl-video[role="button"]{cursor:pointer}
.hl-video.has-poster{background-size:cover;background-position:center}
.hl-video.has-poster .lbl{display:none}
.hl-video.is-playing .play,.hl-video.is-playing .lbl{display:none}
.hl-video video,.hl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:cover}

/* Cómo iniciamos: se enciende a medida que bajás */
.hl-paso{position:relative;border-top:1px solid var(--line-inv)}
.hl-paso::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--lima);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease)}
.hl-paso.is-on::before{transform:scaleX(1)}
.hl-paso .big{color:transparent;-webkit-text-stroke:1.5px rgba(215,242,74,.55);transition:color 500ms var(--ease),-webkit-text-stroke-color 500ms var(--ease)}
.hl-paso.is-on .big,.hl-paso:hover .big{color:var(--lima);-webkit-text-stroke-color:var(--lima)}
.hl-paso h3,.hl-paso p{transition:opacity 500ms var(--ease)}
.hl-paso:not(.is-on) h3,.hl-paso:not(.is-on) p{opacity:.5}
.hl-paso:hover h3,.hl-paso:hover p{opacity:1}

/* Preguntas, en oscuro */
.hl-faqd{border-top:1px solid var(--line-inv)}
.hl-faqd details{border-bottom:1px solid var(--line-inv)}
.hl-faqd summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:19px;font-weight:600;color:var(--papel);line-height:1.35;transition:color 140ms var(--ease)}
.hl-faqd summary::-webkit-details-marker{display:none}
.hl-faqd summary .ic{transition:transform 200ms var(--ease);color:var(--muted-inv)}
.hl-faqd details[open] summary .ic{transform:rotate(45deg);color:var(--lima)}
.hl-faqd summary:hover{color:var(--lima)}
.hl-faqd .ans{padding:0 48px 24px 0;font-size:17px;line-height:1.6;color:rgba(244,241,234,.72);max-width:62ch}

.hl-close{position:relative;overflow:hidden;background:var(--tinta-900)}

/* Cierre en lima */
.hl-lima{position:relative;overflow:hidden;background:var(--lima);color:var(--tinta)}
.hl-lima h2{color:var(--tinta)}

/* Botón flotante de WhatsApp */
.hl-float{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:60;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:99px;background:#25D366;color:#fff;box-shadow:0 10px 24px -8px rgba(21,23,28,.4),0 2px 6px rgba(21,23,28,.14);animation:hlBeat 1.8s ease-in-out infinite;transition:background-color 200ms var(--ease)}
.hl-float::before{content:"";position:absolute;inset:0;border-radius:99px;background:#25D366;z-index:-1;animation:hlRing 1.8s ease-out infinite}
@keyframes hlBeat{0%,40%,100%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1.02)}}
@keyframes hlRing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
.hl-float:hover{background:#1EBE5A;animation-play-state:paused}
.hl-float:active{transform:scale(.96)}
.hl-float .wa-logo{width:28px;height:28px}

/* Servicios: lista de lo que incluye */
.hl-incl{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--papel-300);display:flex;flex-direction:column;gap:8px}
.hl-incl li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.45;color:var(--gris-700)}
.hl-incl li::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--oliva);flex-shrink:0;transform:translateY(-2px)}

@media (max-width:719px){
  .hl-hero-inner{padding-bottom:104px}
  .hl-h1{font-size:clamp(38px,11vw,52px)}
  .hl-hero-copy .hl-btn{flex-grow:1}
  .hl-card{padding:20px}
  .hl-video .play{width:60px;height:60px}
  .hl-faqd summary{font-size:17px;padding:20px 0}
  .hl-faqd .ans{padding-right:0;font-size:16px}
  .hl-paso .big{font-size:48px}
  .hl-section{padding-bottom:88px}
  .hl-float{width:56px;height:56px}
}
/* Texto a todo el ancho: se reserva arriba el lugar de la "h" para que no lo pise */
@media (max-width:899px){
  .hl-hero-inner{padding-top:calc(116px + clamp(112px,22vh,200px));padding-top:calc(116px + clamp(112px,22svh,200px))}
}

[data-reveal]{transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.hl-pre{opacity:0;transform:translateY(8px)}

@media (min-width:720px){
  .g-servicios{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:72px}
  .hl-svc{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:18px;align-content:start}
  .g-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-equipo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .hl-links{display:flex}
  .only-lg{display:inline}
  .only-sm{display:none}
  .hl-hero-copy{max-width:min(700px,56vw)}
}
@media (min-width:1024px){
  .g-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .g-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
  .g-etapas{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hl-etapa{flex-direction:column;align-items:flex-start;gap:14px;padding:0 16px 0 0;border-top:0}
  .hl-etapa::before{content:"";position:absolute;left:0;right:0;top:5px;border-top:1px solid var(--line-inv)}
  .hl-etapa .node{position:relative;z-index:2}
  .hl-runner{top:-1px}
  .hl-runner.s-0{left:-1px;top:-1px}.hl-runner.s-1{left:calc(20% - 1px);top:-1px}.hl-runner.s-2{left:calc(40% - 1px);top:-1px}.hl-runner.s-3{left:calc(60% - 1px);top:-1px}.hl-runner.s-4{left:calc(80% - 1px);top:-1px}
  .hl-fill{left:0;top:5px;height:1.5px;width:0}
  .hl-fill.s-1{width:20%;height:1.5px}.hl-fill.s-2{width:40%;height:1.5px}.hl-fill.s-3{width:60%;height:1.5px}.hl-fill.s-4{width:80%;height:1.5px}
  .hl-sticky{position:sticky;top:112px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{animation:none;opacity:1}
  [data-reveal]{transition:none}
  .hl-pre{opacity:1;transform:none}
  .hl-runner,.hl-fill,.hl-paso::before{transition:none}
  .hl-float,.hl-float::before{animation:none}
}