/* ===== Piel Kormo 2026 — misma estética que la home ===== */
:root{--kl:rgba(13,13,13,.10);--kd:rgba(255,255,255,.16)}

/* fuera los rótulos pequeños y el cursor propio */
.sec-label,.hero-badge{display:none!important}
.cur-dot,.cur-ring{display:none!important}

/* tipografía editorial */
h1,h2,h3,h4,.sec-title,.cta-band h2{letter-spacing:-.035em!important;text-wrap:balance}
h1,h2,.sec-title,.cta-band h2{font-weight:800!important}
.sec-title{font-size:clamp(1.9rem,3.6vw,3.1rem)!important;line-height:1.13!important}
.sec-sub{font-size:1rem!important;line-height:1.65!important;max-width:62ch!important}
.inner-content p,.inner-content li{font-size:1rem!important;line-height:1.72!important}

/* ---- barra de navegación clara y fija ---- */
nav{background:rgba(247,247,246,.85)!important;backdrop-filter:saturate(180%) blur(14px)!important;
  border-bottom:1px solid var(--kl)!important;box-shadow:none!important;
  padding-top:.85rem!important;padding-bottom:.85rem!important;transition:padding .3s ease!important}
nav.scrolled{background:rgba(247,247,246,.92)!important;box-shadow:none!important;
  padding-top:.55rem!important;padding-bottom:.55rem!important}
.nav-logo{color:var(--black)!important;text-transform:uppercase!important;
  font-size:1.28rem!important;letter-spacing:-.02em!important;gap:.55rem!important;line-height:1!important}
.nav-k{width:30px!important;height:30px!important;border-radius:9px!important;background:var(--black)!important}
.nav-links a{color:var(--ink)!important;opacity:.72;font-size:.87rem!important;font-weight:500!important}
.nav-links a:hover{opacity:1;color:var(--black)!important}
.nav-links a::after{background:var(--black)!important}
.nav-cta{background:var(--black)!important;color:#fff!important;padding:.62rem 1.35rem!important;
  font-size:.84rem!important;font-weight:700!important}
.nav-cta:hover{background:var(--ink)!important;transform:translateY(-2px)!important}
.nav-burger span{background:var(--black)!important}
.nav-panel .p-cta{background:#fff!important;color:var(--black)!important;border-radius:100px!important}

/* barra de progreso de lectura */
.k-rp{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;pointer-events:none}
.k-rp i{display:block;height:100%;width:0;background:var(--black);transition:width .12s linear}

/* ---- héroe de página interior: claro, a la izquierda, con cuadrícula ---- */
.inner-hero{--lime:#a3a3a3;--lime2:#0d0d0d;
  background:var(--off)!important;color:var(--black)!important;text-align:left!important;
  border-bottom:1px solid var(--kl)!important;
  padding-top:clamp(6.5rem,11vw,9.5rem)!important;padding-bottom:clamp(3rem,5vw,4.5rem)!important}
.inner-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--kl) 1px,transparent 1px),linear-gradient(90deg,var(--kl) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) clamp(60px,8vw,110px);
  background-position:0px var(--gy,0px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.inner-hero-canvas{display:none!important}
.inner-hero>*:not(.inner-hero-canvas){max-width:1180px;margin-left:auto!important;margin-right:auto!important}
.inner-hero h1{color:var(--black)!important;max-width:17ch!important;margin:0 auto .3rem!important;
  font-size:clamp(2.4rem,5.6vw,4.5rem)!important;line-height:1.08!important}
.inner-hero p{color:var(--ink)!important;max-width:58ch!important;margin:1.1rem auto 2.1rem!important;
  font-size:clamp(1rem,1.35vw,1.15rem)!important}
.inner-hero .btn-lime,.inner-hero .btn-lime-sm{background:var(--black)!important;color:#fff!important}
.inner-hero .btn-lime:hover,.inner-hero .btn-lime-sm:hover{background:var(--ink)!important;box-shadow:none!important}
.inner-hero .btn-outline-w{color:var(--black)!important;border-color:rgba(13,13,13,.22)!important}
.inner-hero .btn-outline-w:hover{border-color:var(--black)!important;color:var(--black)!important}

/* ---- botones: pastilla, sin escalados ---- */
.btn-lime,.btn-lime-sm,.btn-dark,.btn-black,.btn-outline-w,.nav-cta,.form-btn,.p-cta{
  border-radius:999px!important;font-weight:700!important}
.btn-lime:hover,.btn-lime-sm:hover,.btn-dark:hover,.btn-black:hover,.btn-outline-w:hover,.form-btn:hover{
  transform:translateY(-2px)!important;box-shadow:none!important}
.s-black .btn-dark,.s-black .btn-black,.cta-band .btn-dark,.cta-band .btn-black{
  background:#fff!important;color:var(--black)!important}

/* ---- ritmo de secciones ---- */
.section{padding-top:clamp(4.5rem,8vw,7.5rem)!important;padding-bottom:clamp(4.5rem,8vw,7.5rem)!important}
.inner-section{padding:clamp(3.4rem,6vw,5.5rem) 0!important}

/* cuadrícula también en las secciones negras */
.s-black{position:relative}
.s-black>*{position:relative;z-index:1}
.s-black::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--kd) 1px,transparent 1px),linear-gradient(90deg,var(--kd) 1px,transparent 1px);
  background-size:clamp(60px,8vw,110px) clamp(60px,8vw,110px);opacity:.5;
  background-position:0px var(--gy,0px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}

/* ---- tarjetas ---- */
.feat-card,.svc-card,.rev-card,.price-card,.form-wrap{
  background:#fff!important;border:1px solid var(--kl)!important;border-radius:20px!important;box-shadow:none!important}
.feat-card{padding:1.75rem!important}
.feat-card h3,.feat-card h4{font-size:1.02rem!important;font-weight:700!important;margin-bottom:.5rem!important}
.feat-card p,.svc-card p,.rev-card p{font-size:.9rem!important;line-height:1.6!important}
.feat-card:hover,.svc-card:hover,.price-card:hover,.rev-card:hover{
  transform:translateY(-3px)!important;box-shadow:none!important;border-color:rgba(13,13,13,.28)!important}
.s-black .feat-card,.s-black .rev-card,.s-black .svc-card{
  background:rgba(255,255,255,.05)!important;border-color:var(--kd)!important}
.s-black .feat-card h3,.s-black .feat-card h4{color:#fff!important}
.price-card.hot{background:var(--black)!important;border-color:var(--black)!important}
.ico,.c-ico,.step-n{border-radius:10px!important}
.step-n{background:var(--black)!important;color:#fff!important;border:0!important;font-weight:800!important}

/* ---- FAQ como en la home ---- */
.faq-item{border-bottom:1px solid var(--kl)!important}
.s-black .faq-item{border-bottom-color:var(--kd)!important}
.faq-q{font-size:clamp(1rem,1.6vw,1.15rem)!important;font-weight:700!important;
  letter-spacing:-.02em!important;padding:1.45rem 0!important;color:var(--black)!important}
.s-black .faq-q{color:#fff!important}
.faq-q:hover{color:var(--gray)!important}
.faq-a{font-size:.95rem!important;line-height:1.7!important;color:var(--gray)!important}
.s-black .faq-a{color:rgba(255,255,255,.62)!important}
.faq-icon{border-radius:8px!important}

/* ---- banda de cierre en negro ---- */
.cta-band{background:var(--black)!important;color:#fff!important}
.cta-band h2{color:#fff!important}
.cta-band p{color:rgba(255,255,255,.68)!important}

/* ---- banner de estadística ---- */
.stat-banner{border-radius:24px!important}
.stat-banner .sb-num{letter-spacing:-.05em!important;font-weight:800!important}

/* ---- formulario ---- */
.form-wrap{padding:1.9rem!important}
.form-group input,.form-group select,.form-group textarea{
  border-radius:14px!important;border:1px solid var(--kl)!important;background:var(--off)!important}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--black)!important;outline:none}
.form-btn{background:var(--black)!important;color:#fff!important;border-radius:999px!important}

/* ---- pie ---- */
.foot-col h4{font-size:.88rem!important;letter-spacing:-.01em!important;text-transform:none!important;
  color:#fff!important;font-weight:700!important}
.foot-col a{font-size:.88rem!important;color:rgba(255,255,255,.5)!important}
.f-logo{text-transform:uppercase!important;letter-spacing:-.02em!important;font-size:1.15rem!important}
.f-k{border-radius:9px!important;background:#fff!important}
.f-k svg path{fill:#0d0d0d!important}

/* ---- titulares que entran palabra a palabra ---- */
.kw .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.kw .w i{display:inline-block;font-style:inherit;transform:translateY(108%);
  transition:transform .66s cubic-bezier(.22,1,.36,1);transition-delay:var(--wd,0ms)}
.kw.vis .w i,.kw.in .w i{transform:none}
[data-r]{transition-delay:var(--d,0ms)}
@media(prefers-reduced-motion:reduce){.kw .w i{opacity:1!important;transform:none!important;transition:none!important}}

/* el botón del menú, por encima de mi propia regla .nav-links a */
.nav-links a.nav-cta{background:var(--black)!important;color:#fff!important;opacity:1!important}
.nav-links a.nav-cta:hover{background:var(--ink)!important;color:#fff!important}

/* menú reducido: solo Contacto y el botón */
.nav-links a:not([href="/pages/contacto"]):not(.nav-cta){display:none!important}
.nav-panel a:not([href="/pages/contacto"]):not(.p-cta){display:none!important}
