/* KR Estética — hero + Porqué elegirnos
   Colores: ink #4b4b4d · dorado #e3af6a · dorado-texto #8a5a14 · crema #fffad7 · gris #96989a
   Tipografías: Cinzel 600 (títulos) y Poppins 300/400/500 (texto) */
.kr-wrap{position:relative;width:100%;overflow:hidden;height:720px;display:block;background:linear-gradient(90deg,#fff 0%,#f3f3f2 100%)}
.kr-stage{transform-origin:0 0}

/* ===== HERO ===== */
.kr-hero .a{animation-duration:28s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.kr-hero .fade{animation-name:fadeAll}
.kr-hero .crema{animation-name:cremaIn}
.kr-hero .gline{animation-name:gline}
.kr-hero .logo{animation-name:logo;transform-origin:0 0}
.kr-hero .panel{animation-name:panel}
.kr-hero .pimg{animation-name:pimg;transform-origin:36% 60%}
.kr-hero .riseA{animation-name:riseA}
.kr-hero .riseB{animation-name:riseB}
.kr-hero .rule{animation-name:rule;transform-origin:0 50%}
.kr-hero .sub{animation-name:sub}
.kr-hero .s2{animation-name:s2out}
.kr-hero .s3{animation-name:s3in}
.kr-hero .ph{background-image:linear-gradient(#e3af6a,#e3af6a);background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px;color:#8a5a14;padding-bottom:2px}
.kr-hero .ph1{animation-name:ph1}
.kr-hero .ph2{animation-name:ph2}
.kr-hero .ph3{animation-name:ph3}
.kr-hero .cta{animation-name:cta}
.kr-hero a.cta-btn{text-decoration:none}
.kr-hero a.cta-btn:hover{background:#d9a259}
@keyframes fadeAll{0%,91.6%{opacity:1}96.6%,100%{opacity:0}}
@keyframes cremaIn{0%,45.8%{opacity:0}54.2%,91.6%{opacity:.5}96.6%,100%{opacity:0}}
@keyframes gline{0%,1.6%{transform:scaleX(0);opacity:1}5.8%,15.8%{transform:scaleX(1);opacity:1}18.3%,100%{transform:scaleX(0);opacity:0}}
@keyframes logo{0%,3.3%{opacity:0;transform:translate(460px,162px) scale(.94)}8.3%,15.8%{opacity:1;transform:translate(460px,162px) scale(1)}20.8%,96.9%{opacity:1;transform:translate(0,0) scale(.389)}97.1%,100%{opacity:0;transform:translate(460px,162px) scale(.94)}}
@keyframes panel{0%,18.3%{transform:translateX(600px)}25%,96.9%{transform:translateX(0)}97.1%,100%{transform:translateX(600px)}}
@keyframes pimg{0%,18.3%{transform:scale(1.16)}25%,45.8%{transform:scale(1.06)}56.2%,96.9%{transform:scale(1.5)}97.1%,100%{transform:scale(1.16)}}
@keyframes riseA{0%,20.8%{transform:translateY(105%)}25%,96.9%{transform:translateY(0)}97.1%,100%{transform:translateY(105%)}}
@keyframes riseB{0%,22.9%{transform:translateY(105%)}27.1%,96.9%{transform:translateY(0)}97.1%,100%{transform:translateY(105%)}}
@keyframes rule{0%,27.5%{transform:scaleX(0)}30.8%,96.9%{transform:scaleX(1)}97.1%,100%{transform:scaleX(0)}}
@keyframes sub{0%,30%{opacity:0;transform:translateY(14px)}35%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(14px)}}
@keyframes s2out{0%,45.8%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateX(-120px)}}
@keyframes s3in{0%,50%{opacity:0;transform:translateX(120px)}54.2%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateX(120px)}}
@keyframes ph1{0%,72%{background-size:0% 3px;color:#4b4b4d}75.5%,96.9%{background-size:100% 3px;color:#8a5a14}97.1%,100%{background-size:0% 3px;color:#4b4b4d}}
@keyframes ph2{0%,74.5%{background-size:0% 3px;color:#4b4b4d}78%,96.9%{background-size:100% 3px;color:#8a5a14}97.1%,100%{background-size:0% 3px;color:#4b4b4d}}
@keyframes ph3{0%,77%{background-size:0% 3px;color:#4b4b4d}80.5%,96.9%{background-size:100% 3px;color:#8a5a14}97.1%,100%{background-size:0% 3px;color:#4b4b4d}}
@keyframes cta{0%,81.5%{opacity:0;transform:translateY(16px)}85.5%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(16px)}}
.kr-hero .w{display:inline-block}
.kr-hero .w1{animation-name:w1}.kr-hero .w2{animation-name:w2}.kr-hero .w3{animation-name:w3}.kr-hero .w4{animation-name:w4}.kr-hero .w5{animation-name:w5}.kr-hero .w6{animation-name:w6}.kr-hero .w7{animation-name:w7}.kr-hero .w8{animation-name:w8}.kr-hero .w9{animation-name:w9}.kr-hero .w10{animation-name:w10}.kr-hero .w11{animation-name:w11}.kr-hero .w12{animation-name:w12}.kr-hero .w13{animation-name:w13}.kr-hero .w14{animation-name:w14}.kr-hero .w15{animation-name:w15}.kr-hero .w16{animation-name:w16}.kr-hero .w17{animation-name:w17}
@keyframes w1{0%,54.2%{opacity:0;transform:translateY(10px)}55.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w2{0%,55.2%{opacity:0;transform:translateY(10px)}56.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w3{0%,56.2%{opacity:0;transform:translateY(10px)}57.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w4{0%,57.2%{opacity:0;transform:translateY(10px)}58.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w5{0%,58.2%{opacity:0;transform:translateY(10px)}59.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w6{0%,59.2%{opacity:0;transform:translateY(10px)}60.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w7{0%,60.2%{opacity:0;transform:translateY(10px)}61.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w8{0%,61.2%{opacity:0;transform:translateY(10px)}62.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w9{0%,62.2%{opacity:0;transform:translateY(10px)}63.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w10{0%,63.2%{opacity:0;transform:translateY(10px)}64.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w11{0%,64.2%{opacity:0;transform:translateY(10px)}65.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w12{0%,65.2%{opacity:0;transform:translateY(10px)}66.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w13{0%,66.2%{opacity:0;transform:translateY(10px)}67.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w14{0%,67.2%{opacity:0;transform:translateY(10px)}68.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w15{0%,68.2%{opacity:0;transform:translateY(10px)}69.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w16{0%,69.2%{opacity:0;transform:translateY(10px)}70.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@keyframes w17{0%,70.2%{opacity:0;transform:translateY(10px)}71.6%,96.9%{opacity:1;transform:none}97.1%,100%{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion: reduce){
.kr-hero .a{animation:none!important}
.kr-hero .s2,.kr-hero .gline{display:none}
}

/* ===== PORQUÉ ELEGIRNOS ===== */
.kr-why .a{animation-duration:32s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
.kr-why .a.fl{animation-timing-function:linear}
.kr-why .tk1{animation-name:t1}.kr-why .tk2{animation-name:t2}.kr-why .tk3{animation-name:t3}.kr-why .tk4{animation-name:t4}
.kr-why .im1{animation-name:i1}.kr-why .im2{animation-name:i2}.kr-why .im3{animation-name:i3}.kr-why .im4{animation-name:i4}
.kr-why .fl1{animation-name:f1}.kr-why .fl2{animation-name:f2}.kr-why .fl3{animation-name:f3}.kr-why .fl4{animation-name:f4}
.kr-why .lb2{animation-name:l2}.kr-why .lb3{animation-name:l3}.kr-why .lb4{animation-name:l4}
@keyframes t1{0%{opacity:0;transform:translateX(48px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-48px)}}
@keyframes t2{0%,25%{opacity:0;transform:translateX(48px)}28%,47%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateX(-48px)}}
@keyframes t3{0%,50%{opacity:0;transform:translateX(48px)}53%,72%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateX(-48px)}}
@keyframes t4{0%,75%{opacity:0;transform:translateX(48px)}78%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-48px)}}
@keyframes i1{0%{opacity:0;transform:scale(1.12)}3%{opacity:1}25%{opacity:1}28%,100%{opacity:0;transform:scale(1)}}
@keyframes i2{0%,25%{opacity:0;transform:scale(1.12)}28%{opacity:1}50%{opacity:1}53%,100%{opacity:0;transform:scale(1)}}
@keyframes i3{0%,50%{opacity:0;transform:scale(1.12)}53%{opacity:1}75%{opacity:1}78%,100%{opacity:0;transform:scale(1)}}
@keyframes i4{0%{opacity:1;transform:scale(1)}3%{opacity:0;transform:scale(1)}75%{opacity:0;transform:scale(1.12)}78%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes f1{0%{transform:scaleX(0)}25%,99.9%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes f2{0%,25%{transform:scaleX(0)}50%,99.9%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes f3{0%,50%{transform:scaleX(0)}75%,99.9%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes f4{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes l2{0%,24.9%{color:#6e6e70}25%,99.9%{color:#4b4b4d}100%{color:#6e6e70}}
@keyframes l3{0%,49.9%{color:#6e6e70}50%,99.9%{color:#4b4b4d}100%{color:#6e6e70}}
@keyframes l4{0%,74.9%{color:#6e6e70}75%,99.9%{color:#4b4b4d}100%{color:#6e6e70}}
@media (prefers-reduced-motion: reduce){
.kr-why .a{animation:none!important}
.kr-why .k2,.kr-why .k3,.kr-why .k4{display:none}
}


/* ===== VERSIÓN MÓVIL / TABLET (< 900px) =====
   En pantallas chicas no se escala el lienzo de 1440x720: se muestra esta versión apilada y sin coreografía. */
.kr-m{display:none}
@media (max-width:899px){
  .kr-wrap{display:none}
  .kr-m{display:block;font-family:'Poppins',system-ui,sans-serif;color:#4b4b4d}
  .kr-m-hero{background:linear-gradient(180deg,#fffad7 0%,#fff 70%)}
  .kr-m-hero .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:#ece9e4}
  .kr-m-hero .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
  .kr-m-body{padding:32px 22px 44px;max-width:640px;margin:0 auto}
  .kr-m-body h1{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,8vw,2.5rem);line-height:1.2;margin:0}
  .kr-m-rule{width:72px;height:2px;background:#e3af6a;margin:22px 0}
  .kr-m-lead{font-weight:300;font-size:1.15rem;line-height:1.6;margin:0 0 14px}
  .kr-m-text{font-weight:300;font-size:1rem;line-height:1.7;margin:0 0 26px}
  .kr-m-text b{font-weight:400;color:#8a5a14;border-bottom:2px solid #e3af6a}
  .kr-m-why{background:linear-gradient(90deg,#fff 0%,#f3f3f2 100%);padding:48px 22px 28px}
  .kr-m-why>.in{max-width:640px;margin:0 auto}
  .kr-m-why h2{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.6rem;line-height:1.3;margin:0}
  .kr-m-why .kr-m-rule{margin:18px 0 8px}
  .kr-m-item{padding:28px 0 8px}
  .kr-m-item .img{aspect-ratio:4/3;overflow:hidden;background:#ece9e4;border-radius:14px}
  .kr-m-item .img img{width:100%;height:100%;object-fit:cover;display:block}
  .kr-m-item .n{font-weight:500;font-size:.8rem;letter-spacing:.2em;color:#8a5a14;margin-top:18px}
  .kr-m-item h3{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.6rem;line-height:1.25;margin:6px 0 10px}
  .kr-m-item p{margin:0 0 10px;line-height:1.65}
  .kr-m-item .strong{font-size:1.05rem}
  .kr-m-item .soft{font-weight:300;font-size:.95rem}
}


/* ===== ANIMACIÓN CONTROLADA POR EL SCROLL (escritorio) =====
   Cada lienzo vive en una pista (.kr-track) más alta que la pantalla; el lienzo queda fijo (sticky)
   y el scroll avanza la línea de tiempo: --d (en js/home.js) pausa la animación en el punto exacto. */
.kr-track{position:relative}
.kr-track .kr-wrap{position:sticky;top:var(--hh,76px);z-index:1}
.js .kr-track:not(.kr-static) .a{animation-play-state:paused!important;animation-delay:var(--d,0s)!important}
.kr-static .kr-wrap{position:relative;top:auto}
.kr-cue{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;font:500 11px/1 'Poppins',system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#4b4b4d;transition:opacity .4s}
.kr-cue i{width:1.5px;height:30px;background:linear-gradient(#e3af6a,rgba(227,175,106,0));transform-origin:50% 0;animation:cue 1.6s ease-in-out infinite}
.kr-cue.is-gone{opacity:0}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:899px){.kr-track{height:auto!important}}
@media (prefers-reduced-motion: reduce){.kr-cue i{animation:none}}


/* ===== LIENZO FLUIDO (escritorio) =====
   El lienzo mantiene 720 de alto pero su ancho (--W) se adapta a la pantalla: la foto queda pegada al
   borde derecho (--pw de ancho), el logo y el texto se alinean a la izquierda (--tl), y no sobran bordes.
   js/home.js calcula estas variables; los valores por defecto reproducen el diseño original de 1440. */
.kr-stage{width:var(--W,1440px)!important}
.kr-stage [style*="left: 80px"]{left:var(--tl,80px)!important}
.kr-stage [style*="left: 630px"]{left:var(--gl,630px)!important}
.kr-stage [style*="left: 840px"]{left:auto!important;right:0;width:var(--pw,600px)!important}
.kr-stage .panel img,.kr-why [style*="left: 840px"] img{width:100%!important}
@keyframes logo{0%,3.3%{opacity:0;transform:translate(var(--lx,460px),162px) scale(.94)}8.3%,15.8%{opacity:1;transform:translate(var(--lx,460px),162px) scale(1)}20.8%,96.9%{opacity:1;transform:translate(0,0) scale(.389)}97.1%,100%{opacity:0;transform:translate(var(--lx,460px),162px) scale(.94)}}
@keyframes panel{0%,18.3%{transform:translateX(var(--pw,600px))}25%,96.9%{transform:translateX(0)}97.1%,100%{transform:translateX(var(--pw,600px))}}

/* En el inicio la cabecera ocupa todo el ancho (como el hero) y es blanca, sin bordes crema */
body.home .site-header{background:rgba(255,255,255,.94)}
body.home .site-header .wrap{max-width:none;padding-left:clamp(24px,5vw,96px);padding-right:clamp(24px,5vw,96px)}


/* ===== HERO: solo la primera parte (logo, título, foto, botón) =====
   Se quitó la segunda parte (fondo crema, foto agrandada y frase). El título queda fijo al final. */
.kr-hero .s2{animation-name:none}
.kr-hero .pimg{animation-name:pimgIn}
@keyframes pimgIn{0%,18.3%{transform:scale(1.16)}25%,100%{transform:scale(1.06)}}
.kr-hero .cta{animation-name:ctaIn}
@keyframes ctaIn{0%,34%{opacity:0;transform:translateY(16px)}39%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.kr-hero .s2{display:flex}}


/* ===== "PORQUÉ ELEGIRNOS" EN CELULAR: tarjetas que se dan vuelta con el scroll =====
   js/home.js agrega .is-flip: la sección se alarga, el bloque queda fijo (sticky) y cada tramo de scroll
   gira la tarjeta en horizontal (1 → 2 → 3 → 4). Sin JS o con "reducir movimiento" se ve la lista apilada. */
.kr-m-dots{display:none}
@media (max-width:899px){
  .kr-m-why.is-flip{padding:0}
  .kr-m-why.is-flip>.in{position:sticky;top:var(--hh,76px);height:calc(100vh - var(--hh,76px));height:calc(100svh - var(--hh,76px));display:flex;flex-direction:column;padding:22px 22px 18px;box-sizing:border-box}
  .kr-m-why.is-flip h2{font-size:1.3rem}
  .kr-m-why.is-flip .kr-m-rule{margin:12px 0 16px}
  .kr-m-why.is-flip .kr-m-cards{position:relative;flex:1;min-height:0;perspective:1100px}
  .kr-m-why.is-flip .kr-m-item{position:absolute;inset:0;display:flex;flex-direction:column;padding:0;background:#fff;border-radius:18px;box-shadow:0 18px 44px -22px rgba(50,50,52,.45);overflow:hidden;backface-visibility:hidden;will-change:transform,opacity}
  .kr-m-why.is-flip .kr-m-item .img{flex:1 1 0;min-height:110px;aspect-ratio:auto;border-radius:0}
  .kr-m-why.is-flip .kr-m-item .txt{flex:none;padding:14px 20px 20px}
  .kr-m-why.is-flip .kr-m-item .n{margin-top:0}
  .kr-m-why.is-flip .kr-m-item h3{font-size:1.35rem;margin:4px 0 8px}
  .kr-m-why.is-flip .kr-m-item p{margin:0 0 6px;font-size:.92rem;line-height:1.5}
  .kr-m-why.is-flip .kr-m-item .strong{font-size:.98rem}
  .kr-m-why.is-flip .kr-m-item .soft{font-size:.88rem}
  .kr-m-why.is-flip .kr-m-dots{display:flex;gap:8px;margin-top:14px}
  .kr-m-dots i{flex:1;height:3px;border-radius:2px;background:linear-gradient(#e3af6a,#e3af6a) 0 0 / calc(var(--f,0) * 100%) 100% no-repeat,rgba(150,152,154,.4)}
}


/* ===== HERO EN CELULAR: el título va sobre la foto ===== */
@media (max-width:899px){
  .kr-m-hero .ph{position:relative;aspect-ratio:4/5;max-height:calc(100svh - var(--hh,76px) - 150px);min-height:340px}
  .kr-m-hero .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,50,52,0) 35%,rgba(50,50,52,.82) 100%)}
  .kr-m-hero .ph img{object-position:50% 40%}
  .kr-m-over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 26px;max-width:640px}
  .kr-m-over h1{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:clamp(1.7rem,7.4vw,2.3rem);line-height:1.2;margin:0;color:#fffad7;text-shadow:0 2px 14px rgba(0,0,0,.35)}
  .kr-m-over .kr-m-rule{margin:16px 0 0}
  .kr-m-hero .kr-m-body{padding-top:26px}
}


/* Hero móvil: título arriba a la izquierda, en oscuro y sin degradé; la foto ocupa todo el ancho */
@media (max-width:899px){
  .kr-m-hero .ph{width:100%}
  .kr-m-hero .ph::after{display:none}
  .kr-m-over{top:0;bottom:auto;padding:28px 22px 0;max-width:80%}
  .kr-m-over h1{color:#4b4b4d;text-shadow:none;font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .kr-m-over .kr-m-rule{margin:16px 0 0}
}

/* Hero móvil: el protagonista de la foto (equipo y manos) queda hacia la derecha, libre del título */
@media (max-width:899px){
  .kr-m-hero .ph img{object-position:100% 55%;transform:scale(1.14);transform-origin:0% 62%}
}