/* ClikRank — rediseño 2026. Fuente: .rediseno/ref (paquete de diseño) + .rediseno/tools/rd-extra.css */

body{margin:0}
a{color:inherit;text-decoration:none}a:hover{color:inherit}
.lift{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.lift:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:0 50px 90px -30px rgba(11,11,12,.45)}
.btn{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:scale(1.05)}
.row{transition:padding .35s,color .35s}.row:hover{padding-left:12px;color:#FF4D00}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes draw{from{stroke-dashoffset:700}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.in1{animation:rise 1s cubic-bezier(.2,.8,.2,1) .05s both}
.in2{animation:rise 1s cubic-bezier(.2,.8,.2,1) .2s both}
.in3{animation:rise 1s cubic-bezier(.2,.8,.2,1) .35s both}
.in4{animation:rise 1s cubic-bezier(.2,.8,.2,1) .5s both}
@supports (animation-timeline: view()){
@keyframes rv{from{opacity:0;transform:translateY(100px) scale(.9);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
.rv:nth-child(3n+2){animation-range:entry 8% entry 92%}
.rv:nth-child(3n){animation-range:entry 16% entry 100%}
@keyframes eH{from{opacity:0;translate:0 80px;filter:blur(14px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes eL{from{opacity:0;translate:-56px 0}to{opacity:1;translate:0 0}}
@keyframes eU{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes eC{from{opacity:0;translate:0 100px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
section h2{animation:eH linear both;animation-timeline:view();animation-range:entry 0% entry 95%}
section h3{animation:eL linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
section p,section li,section blockquote,section details,section label,section figcaption,section table{animation:eU linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
section li:nth-child(even),section details:nth-child(even){animation-range:entry 20% cover 14%}
section div[style*="border-radius: 24px"]:not(.rv):not(.pA):not(.pB):not(.pC):not(.zoom):not(.sx):not(.sxr):not([style*="sticky"]),section div[style*="border-radius: 28px"]:not(.rv):not(.pA):not(.pB):not(.pC):not(.zoom):not(.sx):not(.sxr):not([style*="sticky"]),section div[style*="border-radius: 32px"]:not(.rv):not(.pA):not(.pB):not(.pC):not(.zoom):not(.sx):not(.sxr):not([style*="sticky"]),section div[style*="border-radius: 36px"]:not(.rv):not(.pA):not(.pB):not(.pC):not(.zoom):not(.sx):not(.sxr):not([style*="sticky"]),section div[style*="border-radius: 40px"]:not(.rv):not(.pA):not(.pB):not(.pC):not(.zoom):not(.sx):not(.sxr):not([style*="sticky"]){animation:eC linear both;animation-timeline:view();animation-range:entry 0% entry 95%}
@keyframes pA{from{transform:translateY(70px)}to{transform:translateY(-70px)}}
@keyframes pB{from{transform:translateY(170px)}to{transform:translateY(-170px)}}
@keyframes pC{from{transform:translateY(-110px)}to{transform:translateY(110px)}}
.pA{animation:pA linear both;animation-timeline:view()}
.pB{animation:pB linear both;animation-timeline:view()}
.pC{animation:pC linear both;animation-timeline:view()}
@keyframes hs{to{transform:translateY(300px) scale(1.18)}}
@keyframes hc1{to{transform:translateY(-190px)}}
@keyframes hc2{to{transform:translateY(-340px)}}
@keyframes hc3{to{transform:translateY(-90px)}}
@keyframes ht{to{transform:translateY(150px);opacity:.15}}
.hs{animation:hs linear both;animation-timeline:scroll();animation-range:0px 1000px}
.hc1{animation:hc1 linear both;animation-timeline:scroll();animation-range:0px 1000px}
.hc2{animation:hc2 linear both;animation-timeline:scroll();animation-range:0px 1000px}
.hc3{animation:hc3 linear both;animation-timeline:scroll();animation-range:0px 1000px}
.ht{animation:ht linear both;animation-timeline:scroll();animation-range:0px 900px}
@keyframes sx{from{transform:translateX(6%)}to{transform:translateX(-38%)}}
.sx{animation:sx linear both;animation-timeline:view()}
@keyframes sxr{from{transform:translateX(-30%)}to{transform:translateX(4%)}}
.sxr{animation:sxr linear both;animation-timeline:view()}
@keyframes zoom{from{transform:scale(.84)}to{transform:scale(1)}}
.zoom{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
.st{view-timeline-name:--st}
@keyframes wd{from{color:#C9C8C3}to{color:#0B0B0C}}
.st span.w{animation:wd linear both;animation-timeline:--st}
.st span.w:nth-of-type(1){animation-range:cover 12% cover 20%}
.st span.w:nth-of-type(2){animation-range:cover 18% cover 26%}
.st span.w:nth-of-type(3){animation-range:cover 24% cover 32%}
.st span.w:nth-of-type(4){animation-range:cover 30% cover 38%}
.st span.w:nth-of-type(5){animation-range:cover 36% cover 44%}
.st span.w:nth-of-type(6){animation-range:cover 42% cover 50%}
.st span.w:nth-of-type(7){animation-range:cover 48% cover 56%}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.inh{animation:fadeIn 1s ease both}
.nav-m{display:none;animation:none!important}
.nav-m details,.nav-m summary,.nav-m a,.nav-m div{animation-timeline:auto}
.nav-m details{animation:none!important}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m>summary .ic-x{display:none}
.nav-m[open]>summary .ic-x{display:block}
.nav-m[open]>summary .ic-b{display:none}
.nav-m[open]>summary{position:fixed;top:30px;right:calc(clamp(16px,4vw,40px) + 11px);z-index:102;background:#26282C!important;color:#FFFFFF!important}
@keyframes mmIn{from{clip-path:circle(0% at calc(100% - 50px) 54px)}to{clip-path:circle(160% at calc(100% - 50px) 54px)}}
.nav-m[open] .mm{animation:mmIn .65s cubic-bezier(.2,.8,.2,1) both}
.nav-m[open] .mi{animation:rise .7s cubic-bezier(.2,.8,.2,1) .12s both}
.nav-m[open] .mi:nth-child(2){animation-delay:.18s}
.nav-m[open] .mi:nth-child(3){animation-delay:.24s}
.nav-m[open] .mi:nth-child(4){animation-delay:.3s}
.nav-m[open] .mi:nth-child(5){animation-delay:.36s}
.acc[open] summary .chev{transform:rotate(180deg)}
.mega{display:none}
@keyframes megaIn{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.mp:hover .mega,.mp:focus-within .mega,.mp.show .mega{display:block;animation:megaIn .35s cubic-bezier(.2,.8,.2,1) both}
.mp:hover>a .chev,.mp.show>a .chev{transform:rotate(180deg)}
.ml{transition:background .25s,padding .25s}
.ml:hover{background:rgba(255,255,255,.08);padding-left:20px!important}
img,svg{max-width:100%}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
@media (max-width:980px){.nav-d{display:none!important}.nav-m{display:block}.pill{backdrop-filter:none!important;background:#1C1D20!important}}
@media (max-width:700px){
[style*="minmax(3"],[style*="minmax(4"],[style*="minmax(5"]{grid-template-columns:minmax(0,1fr)!important}
[style*="grid-column: span"]{grid-column:auto!important}
.pA,.pB,.pC{animation:none!important}
table{display:block;overflow-x:auto}
a[href*="/servicio/"][style*="justify-content: space-between"]{flex-wrap:wrap}
}
@keyframes gridMove{to{background-position:88px 88px}}
@keyframes cellsMove{to{transform:translate(88px,88px)}}
@keyframes blinkA{0%,100%{opacity:0}10%,34%{opacity:1}50%{opacity:0}}
@keyframes blinkB{0%,46%,100%{opacity:0}58%,82%{opacity:1}}
.hb{position:relative;overflow:clip;animation:gridMove 26s linear infinite}
.hb>*{position:relative;z-index:1}
.hb::before,.hb::after{content:"";position:absolute;z-index:0;width:87px;height:87px;pointer-events:none}
.hb::before{left:177px;top:89px;background:rgba(255,77,0,.24);box-shadow:440px 88px 0 0 rgba(255,77,0,.22),792px -88px 0 0 rgba(255,77,0,.16),264px 264px 0 0 rgba(255,255,255,.07),968px 176px 0 0 rgba(255,77,0,.26),-88px 352px 0 0 rgba(255,77,0,.14),616px 352px 0 0 rgba(255,255,255,.06),1144px 0px 0 0 rgba(255,77,0,.18),88px -88px 0 0 rgba(255,255,255,.06);animation:cellsMove 26s linear infinite,blinkA 13s ease-in-out infinite}
.hb::after{left:89px;top:265px;background:rgba(255,77,0,.2);box-shadow:264px -176px 0 0 rgba(255,77,0,.2),616px 0px 0 0 rgba(255,77,0,.24),968px 176px 0 0 rgba(255,77,0,.14),-88px -88px 0 0 rgba(255,255,255,.07),1144px 88px 0 0 rgba(255,255,255,.06),440px -264px 0 0 rgba(255,77,0,.16),792px -88px 0 0 rgba(255,255,255,.06),88px 88px 0 0 rgba(255,77,0,.18),1320px 0px 0 0 rgba(255,77,0,.14);animation:cellsMove 26s linear infinite,blinkB 13s ease-in-out infinite}

@media (max-width:860px){.hm{opacity:.16}}
@media (min-width:861px){.hm{width:min(var(--hmw,460px),38%)!important}.hmp h1{max-width:50vw!important}}
@media (max-width:860px){aside{position:static!important}}
@media (max-width:980px){.hf{opacity:.16}}
/* ───── Añadidos de la implementación (no vienen del paquete de referencia) ───── */
:root{--rd-bg:#F2F1ED;--rd-ink:#0B0B0C;--rd-or:#FF4D00;--rd-or-t:#B83800;--rd-or-d:#FF7A40;--rd-ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.rd{background:#F2F1ED;color:#0B0B0C;margin:0}
.rdw{background:#F2F1ED;color:#0B0B0C;font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
.rdw main{display:block;outline:0}
.rdw h1,.rdw h2,.rdw h3,.rdw h4{text-wrap:balance}
.rdw table{border-collapse:collapse}
.rdw button,.rdw input,.rdw select,.rdw textarea{font:inherit;color:inherit}
.rdw ul,.rdw ol{padding:0;margin:0}
.rdw img{height:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:#FF4D00;color:#0B0B0C;padding:12px 18px;border-radius:999px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #FF7A40;outline-offset:3px;border-radius:6px}
.rdw :where(a,button,summary):focus-visible{outline-color:#FF4D00}
.hb :where(a,button,summary):focus-visible,footer :where(a,button,summary):focus-visible,.mm :where(a,button,summary):focus-visible{outline-color:#FF7A40}
/* el menú móvil bloquea el scroll del fondo mientras está abierto (rd.js añade la clase) */
html.rd-menu-open,html.rd-menu-open body{overflow:hidden}
/* la entrada del hero termina rápido para no retrasar el LCP */
.in1{animation-duration:.7s}.in2{animation-duration:.7s;animation-delay:.1s}.in3{animation-duration:.7s;animation-delay:.2s}.in4{animation-duration:.7s;animation-delay:.3s}
/* tablas y bloques largos nunca desbordan la página */
.rdw pre,.rdw code{max-width:100%;overflow-x:auto}
@media (max-width:700px){.rdw{font-size:16.5px}}
/* enlace "Leer artículo →" que hace clicable toda la tarjeta sin cambiar el texto del enlace */
.sl::after{content:"";position:absolute;inset:0;border-radius:inherit}
article{position:relative}
/* Alternativa sin animation-timeline (Firefox / Safari antiguo): la arma rd.js; sin JS todo se ve completo */
.rd-fb .st span.w{color:#C9C8C3;transition:color .35s}
.rd-fb .st span.w.rd-on{color:#0B0B0C}
.rd-fb .pA,.rd-fb .pB,.rd-fb .pC,.rd-fb .sx,.rd-fb .sxr,.rd-fb .zoom,.rd-fb .hs,.rd-fb .hc1,.rd-fb .hc2,.rd-fb .hc3,.rd-fb .ht{will-change:transform}
/* aviso flotante del layout (éxito/error de formularios): mismas formas y tipografía del rediseño */
#global-toast{border-radius:20px!important;font-family:'DM Sans',system-ui,sans-serif;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)!important}
/* Tipografías alojadas en el sitio (subconjunto latin, sin peticiones a Google) */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/outfit.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/dmsans.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/dmsans-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dmmono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dmmono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Logos de clientes: sin fondo, en escala de grises. Si el logo es claro (blanco sobre transparente) rd.js le añade .rd-logo--lt y se invierte a gris oscuro para que se vea sobre fondo claro. */
.rd-logo{display:flex;align-items:center;justify-content:center;height:64px;padding:0 10px;flex:none}
.rd-logo img{filter:grayscale(1);opacity:.78;transition:opacity .3s,filter .3s}
.rd-logo.rd-logo--lt img{filter:grayscale(1) invert(1) brightness(.35)}
.rd-logo:hover img{opacity:1}
/* Cabecera fija: ocupa su sitio en el héroe y se oculta al bajar / reaparece al subir */
.rd-hdr{height:90px;position:relative}
.rd-hdr>header.rd-nav{position:fixed!important;top:0;left:0;right:0;margin:0 auto!important;z-index:80!important;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.rd-hdr>header.rd-nav.rd-away{transform:translateY(-135%)}
html{scroll-padding-top:104px}
@media (max-width:980px){.rd-hdr{height:88px}}
/* la cabecera fija debe quedar por encima de todo el contenido (la regla .hb>* de la maqueta le daba z-index 1) */
.hb>.rd-hdr{position:relative;z-index:90}
/* mega menú: el panel arranca justo debajo del enlace (sin franja muerta) para no perder el hover al mover el cursor hacia él */
.mp .mega{top:calc(100% - 24px)!important;padding-top:38px!important}
/* Hero al hacer scroll: el texto ya no baja ni se desvanece sobre los bloques de debajo; la esfera/tarjetas se mueven menos */
.ht{animation:none!important}
@keyframes hs{to{transform:translateY(120px) scale(1.08)}}
@keyframes hc1{to{transform:translateY(-110px)}}
@keyframes hc2{to{transform:translateY(-170px)}}
@keyframes hc3{to{transform:translateY(-60px)}}
/* titulares: nunca se salen de su tarjeta */
.rdw :is(h1,h2,h3,h4,h5){overflow-wrap:anywhere}
@media (max-width:700px){a.row span[style*="align-items: flex-end"]{align-items:flex-start!important}}
/* Palabra resaltada en titulares: misma tipografía (recta). rd.js le pone .rd-wipe y sus colores (--rd-hl naranja, --rd-base del titular);
   el naranja la recorre de izquierda a derecha UNA vez (héroes: al cargar; resto: al hacer scroll). Sin JS queda en naranja fijo. */
.rdw :is(.rdc-em,.rdc-cta-em,.rdp-h1 span,.rdp-steps__head h2 span,.rde-h1 em,.rde-h2 em,.rdh-sc-acc,.rdh-acc,.rdi-or,.rds-hl,.rds-h1 span,.rds-ix-h1 span),
.rdw [style*="font-style: italic"]{font-style:normal!important;font-weight:inherit}
@keyframes rdWipe{from{background-position:100% 0}to{background-position:0 0}}
.rdw .rd-wipe{color:transparent!important;-webkit-text-fill-color:transparent;
 background-image:linear-gradient(90deg,var(--rd-hl) 0,var(--rd-hl) 36%,var(--rd-base) 40%,var(--rd-base) 100%);
 background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;
 -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hb .rd-wipe{animation:rdWipe 1.2s cubic-bezier(.65,0,.35,1) .6s both}
@supports (animation-timeline: view()){
.rdw section:not(.hb) .rd-wipe{animation:rdWipe linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
}
@media (forced-colors:active){.rdw .rd-wipe{color:inherit!important;-webkit-text-fill-color:currentColor;background:none}}
/* ───── Entradas: fade por componente en todos los héroes ───── */
@keyframes rdFadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hb :is(.ht,.ht2)>*{animation:rdFadeUp .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.08s + var(--n,0)*.1s)}
.hb :is(.ht,.ht2)>*:nth-child(1){--n:0}.hb :is(.ht,.ht2)>*:nth-child(2){--n:1}.hb :is(.ht,.ht2)>*:nth-child(3){--n:2}.hb :is(.ht,.ht2)>*:nth-child(4){--n:3}.hb :is(.ht,.ht2)>*:nth-child(5){--n:4}
.hb :is(.ht,.ht2)>*:nth-child(6){--n:5}.hb :is(.ht,.ht2)>*:nth-child(7){--n:6}.hb :is(.ht,.ht2)>*:nth-child(8){--n:7}.hb :is(.ht,.ht2)>*:nth-child(n+9){--n:8}
.hb .ht~*:not([hidden]):not(.ht2){animation:rdFadeUp 1s cubic-bezier(.2,.8,.2,1) .45s both}
.hb>div:not(.rd-hdr):not(:has(.ht)):not([aria-hidden="true"]){animation:rdFadeUp .9s cubic-bezier(.2,.8,.2,1) .6s both}
.hb>div:not(.rd-hdr):not(:has(.ht)):not([aria-hidden="true"])~div:not([aria-hidden="true"]){animation-delay:.75s}
/* ───── Revelado al hacer scroll de las tarjetas/bloques que no tenían animación (rd.js les pone .rd-rv) ───── */
@supports (animation-timeline: view()){
@keyframes rdRv{from{opacity:0;translate:0 70px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.rd-rv{animation:rdRv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
/* Home: franja de cifras del héroe = una sola barra con divisores (sin íconos ni bloques sueltos) */
.rd-stats-wrap{max-width:1320px;margin:0 auto;padding:12px clamp(20px,5vw,56px) 96px}
.rd-stats{margin:0;display:flex;align-items:stretch;background:rgba(23,24,27,.72);border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:0 30px 60px -34px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.rd-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:6px 16px;padding:18px clamp(16px,2.4vw,32px)}
.rd-stat+.rd-stat{border-left:1px solid rgba(255,255,255,.12)}
.rd-stat dd{margin:0;font-family:'Outfit',sans-serif;font-size:clamp(30px,3.4vw,46px);font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff}
.rd-stat dt{font-size:14px;line-height:1.3;color:#A9ADB3;max-width:11ch}
@media (max-width:700px){
.rd-stats-wrap{padding-top:4px;padding-bottom:92px}
.rd-stats{border-radius:22px}
.rd-stat{flex-direction:column-reverse;align-items:flex-start;justify-content:center;gap:6px;padding:14px 12px}
.rd-stat dd{font-size:clamp(24px,7.4vw,30px)}
.rd-stat dt{font-size:12px;max-width:none}
}
/* Hover de las filas de lista (.row): cambia el color de la letra y del ícono; el énfasis nunca es igual al fondo de la tarjeta */
.row:hover{color:#FF7A40}
[style*="border-radius"][style*="background: #FFFFFF"] .row:hover,[style*="border-radius"][style*="background: #E4E2DC"] .row:hover,[style*="border-radius"][style*="background: #F2F1ED"] .row:hover{color:#B83800}
[style*="border-radius"][style*="background: #FF4D00"] .row:hover,[style*="border-radius"][style*="background:#FF4D00"] .row:hover{color:#FFFFFF}
.row svg{transition:color .25s}
.row:hover svg{color:#FFB483!important}
[style*="border-radius"][style*="background: #FFFFFF"] .row:hover svg,[style*="border-radius"][style*="background: #E4E2DC"] .row:hover svg,[style*="border-radius"][style*="background: #F2F1ED"] .row:hover svg{color:#B83800!important}
[style*="border-radius"][style*="background: #FF4D00"] .row:hover svg,[style*="border-radius"][style*="background:#FF4D00"] .row:hover svg{color:#FFFFFF!important}
.row:hover span[style*="DM Mono"]{color:inherit!important}

/* ───── Entradas LIGADAS AL SCROLL: cada componente sube poco a poco mientras se hace scroll (sin blur, sin saltos laterales) ───── */
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes rv{from{opacity:0;transform:translateY(80px) scale(.95)}to{opacity:1;transform:none}}
@keyframes eH{from{opacity:0;translate:0 80px}to{opacity:1;translate:0 0}}
@keyframes eL{from{opacity:0;translate:0 56px}to{opacity:1;translate:0 0}}
@keyframes eU{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}
@keyframes eC{from{opacity:0;translate:0 80px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes zoom{from{transform:scale(.88)}to{transform:scale(1)}}
@keyframes pA{from{transform:translateY(70px)}to{transform:translateY(-70px)}}
@keyframes pB{from{transform:translateY(170px)}to{transform:translateY(-170px)}}
@keyframes pC{from{transform:translateY(-110px)}to{transform:translateY(110px)}}
@keyframes hs{to{transform:translateY(300px) scale(1.18)}}
@keyframes hc1{to{transform:translateY(-190px)}}
@keyframes hc2{to{transform:translateY(-340px)}}
@keyframes hc3{to{transform:translateY(-90px)}}
@supports (animation-timeline: view()){
.rd-rv{animation:rv linear both;animation-timeline:view()}
/* el recorrido es más largo (hasta el 30 % del paso por la pantalla) y con frenado suave: se nota el ascenso sin brusquedad */
:is(.rv,.rd-rv,section:not(.hb) :is(h2,h3,p,li,blockquote,details,label,figcaption,table),section:not(.hb) div[style*="border-radius"]){animation-range:entry 0% cover 40%!important;animation-timing-function:cubic-bezier(.3,.1,.3,1)!important}
.rd-rv :is(h2,h3,p,li,blockquote,details,label,figcaption,table){animation:none!important}
}
.ht2{animation:none!important}
.hb .ht2>*{animation-delay:calc(.38s + var(--n,0)*.1s)}
/* ───── Héroes a pantalla completa (escritorio y tablet; en móvil se queda con su alto natural) ─────
   El contenido se centra en el espacio disponible; rd.js calcula --hb-rest (filas inferiores del héroe: cifras, píldoras…). */
@media (min-width:768px){
.hb{min-height:100vh;min-height:100svh}
.hb>div:not(.rd-hdr):not([aria-hidden="true"]):has(.ht){min-height:calc(100vh - 90px - var(--hb-rest,0px));min-height:calc(100svh - 90px - var(--hb-rest,0px));align-content:center}
}
/* ───── Home: conjunto gráfico del héroe con más peso (esfera grande, aro orbital, tarjeta de búsqueda y gráfica grandes) ───── */
.hscene{position:absolute;right:clamp(8px,3vw,48px);top:4px;width:min(600px,40vw);height:min(580px,calc(100% - 16px));pointer-events:none}
.hsph{position:absolute;left:5%;top:7%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFA066 0%,#FF4D00 42%,#A82C00 100%);box-shadow:0 0 190px 24px rgba(255,77,0,.42),inset -40px -50px 100px rgba(0,0,0,.38)}
.hring{position:absolute;left:-3%;top:1%;width:106%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(255,255,255,.22);animation:spin 70s linear infinite}
.hring::after{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#FF4D00;box-shadow:0 0 24px 6px rgba(255,77,0,.75)}
.hcard-a{position:absolute;left:-2%;top:11%;width:84%}
.hcard-b{position:absolute;right:-3%;bottom:5%;width:76%}
.hpill{position:absolute;right:4%;top:22px}
.hbob{animation:bob var(--d,6s) ease-in-out infinite}
.hsearch{background:#fff;color:#0B0B0C;border-radius:30px;padding:28px;transform:rotate(-5deg);box-shadow:0 50px 100px -28px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:20px}
.hs-in{display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid #DCDCD8;border-radius:999px;font-size:17px;color:#55595F}
.hs-res{display:flex;gap:18px;align-items:center}
.hs-n{flex:none;width:68px;height:68px;border-radius:20px;background:#FF4D00;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:32px}
.hs-res>div{display:flex;flex-direction:column;min-width:0}
.hs-url{font-family:'DM Mono',monospace;font-size:14px;color:#55595F}
.hs-t{font-weight:700;font-size:23px;line-height:1.15;color:#1A3FBF}
.hs-lines{display:flex;flex-direction:column;gap:9px}
.hs-lines span{display:block;height:10px;border-radius:5px;background:#E7E6E2}.hs-lines span:first-child{width:92%}.hs-lines span:last-child{width:64%}
.hchart{background:rgba(22,23,26,.94);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:26px;transform:rotate(4deg);box-shadow:0 50px 100px -28px rgba(0,0,0,.95);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:12px}
.hc-top{display:flex;justify-content:space-between;gap:10px;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#A9ADB3}
.hchart svg{width:100%;height:auto;display:block}
.hrate{background:#fff;color:#0B0B0C;border-radius:999px;padding:14px 26px 14px 18px;display:flex;align-items:center;gap:12px;transform:rotate(6deg);box-shadow:0 30px 60px -18px rgba(0,0,0,.75);font-weight:700;font-size:20px}
@media (max-width:1000px){.hscene{position:relative;right:auto;top:auto;width:100%;max-width:520px;height:440px;margin:6px auto 0;flex:1 1 420px}.hcard-a{left:0;width:86%}.hcard-b{right:0}}
@media (max-width:480px){.hscene{height:400px}.hsearch{padding:20px;gap:14px;border-radius:24px}.hs-n{width:52px;height:52px;font-size:26px}.hs-t{font-size:19px}.hchart{padding:18px}}

/* SVG con el scroll: trazos de gráficas se dibujan al entrar (rd.js les pone .rd-draw y pathLength=1) */
@supports (animation-timeline: view()){
@keyframes rdDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.rd-draw{stroke-dasharray:1;animation:rdDraw linear both;animation-timeline:view();animation-range:entry 5% cover 38%}
}
/* titulares de héroe: el tamaño también depende del alto de pantalla, para que el héroe quepa en una pantalla */
@media (min-width:768px) and (min-height:480px){.hb h1{font-size:clamp(30px,min(4.6vw,8.2svh),80px)!important;line-height:.97!important}}
/* héroe de servicios SEO: tarjeta de 3 cifras más compacta (ahorra alto) */
@media (min-width:768px){
.rdw .rds-trio li{padding:8px 0}
.rdw .rds-trio{padding:6px 20px}
}

@media (min-width:1001px){.hh1{max-width:calc(100% - min(600px,40vw) - 32px)!important}}
/* ───── Barra de cifras unificada en todos los héroes (servicios SEO y ciudades): una sola barra con divisores, sin íconos ───── */
.rdw .rd-statbar,.rdw .rdc-stats{display:flex;flex-direction:row;align-items:stretch;gap:0;padding:0;margin:0;max-width:none;background:rgba(23,24,27,.72);border:1px solid rgba(255,255,255,.12);border-radius:28px;box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
.rdw .rds-facts{display:block;padding-top:8px;padding-bottom:clamp(24px,3vw,40px)}
.rdw .rds-facts>.rd-statbar{border-top:1px solid rgba(255,255,255,.12);padding-top:0}
.rdw .rd-statbar>div,.rdw .rdc-stats>div{flex:1 1 0;min-width:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 14px;padding:16px clamp(14px,2vw,28px);border-top:0}
.rdw .rd-statbar>div+div,.rdw .rdc-stats>div+div{border-left:1px solid rgba(255,255,255,.12)}
.rdw .rd-statbar>div>span:first-child,.rdw .rdc-stats>div>span:first-child:not(.rdc-sn){display:none!important}
.rdw .rd-statbar .rds-mono{flex-basis:100%;order:-1;font-size:11px;line-height:1.2}
.rdw .rds-fact-n,.rdw .rdc-sn{font-size:clamp(26px,3vw,40px);line-height:1}
.rdw .rds-fact-n.sm{font-size:clamp(20px,2vw,26px)}
.rdw .rds-fact-l,.rdw .rdc-sl{font-size:13.5px;line-height:1.25;color:#A9ADB3;max-width:12ch}
.rdw .rdc-stats>div{flex-direction:column;align-items:flex-start;gap:4px;padding:14px clamp(12px,1.4vw,20px)}
@media (max-width:700px){
.rdw .rd-statbar{flex-wrap:wrap;border-radius:22px}
.rdw .rd-statbar>div{flex:1 1 45%;padding:12px 14px}
.rdw .rd-statbar>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
.rdw .rd-statbar>div:nth-child(3){border-left:0}
.rdw .rdc-stats{flex-wrap:wrap;border-radius:22px}
.rdw .rdc-stats>div{flex:1 1 45%}
.rdw .rdc-stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
.rdw .rdc-stats>div:nth-child(3){border-left:0}
}
@media (max-width:700px){.rdw .rdc-stats>div,.rdw .rd-statbar>div{padding-left:16px;padding-right:16px}}

/* ───── Entrada escalonada ligada al scroll (rd.js: initStagger): cada tarjeta de una fila tiene su propio tramo, una detrás de otra.
        Al bajar aparecen; al subir se vuelven a ocultar. El recorrido (--sy) crece en las siguientes = profundidad tipo parallax. ───── */
@keyframes stUp{from{opacity:0;translate:0 var(--sy,96px);scale:.92}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline: view()){
.rdw main .rd-st.rd-st{animation:stUp cubic-bezier(.2,.7,.3,1) both!important;animation-timeline:view()!important;animation-range:cover calc(var(--si,0)*17%) cover calc(var(--si,0)*17% + 22%)!important}
.rd-st :is(h2,h3,p,li,blockquote,details,label,figcaption,table){animation:none!important}
}
.rdw main .rd-flat.rd-flat{animation:none!important;opacity:1!important;translate:none!important;scale:none!important}

/* Listas apiladas de tarjetas (pasos, proceso): cada tarjeta entra por la derecha con el scroll */
@keyframes stRight{from{opacity:0;translate:var(--sx,180px) 0;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline: view()){
.rdw main .rd-st.rd-side{animation-name:stRight!important;animation-range:cover 0% cover 30%!important}
}

/* Bloques «pegajosos»: quedan por debajo de la cabecera fija (que mide ~94 px) para que no los tape */
.rdw :is(.rds-proc-l,.rds-aside,.rds-ix-seo-l,.rdc-inc-r,.rdp-steps__head,.rde-two>.rde-side,.rdh-bb__out,.rdh-hg-out,.rdh-sg-out,.rdh-q-aside){top:112px!important}
.rdw .rdb-toc .article-toc{top:112px!important;max-height:calc(100vh - 136px)}
.rdw .rdp-steps li{top:calc(var(--rdp-top,40px) + 80px)}
.rdw .rdi-ste{top:calc(var(--top,24px) + 80px)}

/* ───── Coreografías por tipo de bloque, ligadas al scroll (rd.js: initChoreo marca cada bloque con data-ch) ─────
   head: titular que se revela como cortina · img: imagen que se destapa y se amplía · zl/zr: dos columnas que entran de lados opuestos
   pop: bloque grande oscuro/naranja que se acerca · row: filas de tabla una a una. (Las cifras «count» las anima el JS.) */
@keyframes chHead{from{opacity:0;translate:0 34px;clip-path:inset(-30% 100% -30% -10%)}to{opacity:1;translate:0 0;clip-path:inset(-30% -10% -30% -10%)}}
@keyframes chImg{from{opacity:0;scale:1.16;clip-path:inset(18% 14% 18% 14% round calc(var(--rr,0px)*2 + 18px))}38%{opacity:1}to{opacity:1;scale:1;clip-path:inset(0 0 0 0 round var(--rr,0px))}}
@keyframes chL{from{opacity:0;translate:-120px 0}to{opacity:1;translate:0 0}}
@keyframes chR{from{opacity:0;translate:120px 0}to{opacity:1;translate:0 0}}
@keyframes chPop{from{opacity:.25;scale:.9}to{opacity:1;scale:1}}
@keyframes chGhost{from{translate:7vw 0}to{translate:-7vw 0}}
@keyframes chOrb{from{translate:0 110px}to{translate:0 -110px}}
@keyframes chItem{from{opacity:0;translate:-44px 0}to{opacity:1;translate:0 0}}
@keyframes chRow{from{opacity:0;translate:-70px 0}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.rdw main [data-ch="head"][data-ch]{animation:chHead cubic-bezier(.3,.1,.3,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 36%!important}
.rdw main [data-ch="img"][data-ch]{animation:chImg cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 52%!important}
.rdw main [data-ch="zl"][data-ch]{animation:chL cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 46%!important}
.rdw main [data-ch="zr"][data-ch]{animation:chR cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 46%!important}
.rdw main [data-ch="pop"][data-ch]{animation:chPop cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 44%!important;transform-origin:50% 0}
.rdw main [data-ch="row"][data-ch]{animation:chRow cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 0% cover 34%!important}
.rdw [data-ch="ghost"][data-ch]{animation:chGhost linear both!important;animation-timeline:view()!important;animation-range:cover 0% cover 100%!important}
.rdw [data-ch="orb"][data-ch]{animation:chOrb linear both!important;animation-timeline:view()!important;animation-range:cover 0% cover 100%!important}
.rdw main [data-ch="item"][data-ch]{animation:chItem cubic-bezier(.25,.1,.25,1) both!important;animation-timeline:view()!important;animation-range:cover 12% cover 42%!important}
.rdw main [data-ch="head"] .rd-wipe{animation-range:cover 16% cover 44%!important}
}
}

/* ───── Escenas SVG de los héroes (app/Views/rd/partials/art.php) ───── */
.hsph{background:none!important;box-shadow:none!important;border-radius:0!important}
.hsph .ra{width:100%;height:auto}
.hm{aspect-ratio:auto!important}
.ra{display:block;width:100%;height:auto;overflow:visible}
.ra-p{stroke-width:1}
.ra-p--dark{fill:#17181B;stroke:rgba(255,255,255,.11)}
.ra-p--light{fill:#FFFFFF;stroke:rgba(11,11,12,.06)}
.ra-m{font:500 12px 'DM Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;fill:#E4E2DC}
.ra-m--n{fill:#8D929A}.ra-m--s{font-size:11px;letter-spacing:.07em}.ra-m--w{fill:#fff}.ra-m--k{fill:#6B7078}
.ra-s{font:500 15px 'DM Sans',system-ui,sans-serif;fill:#E4E2DC}.ra-s--g{fill:#6B7078}.ra-s--m{fill:#8D929A}
.ra-h{font:700 20px 'Outfit',sans-serif;fill:#fff;letter-spacing:-.015em}.ra-h--b{fill:#1D4ED8;font-size:20px}.ra-h--s{font-size:19px}
.ra-n{font:800 40px 'Outfit',sans-serif;fill:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.ra-n--w{fill:#fff}.ra-n--k{fill:#0B0B0C}.ra-n--c{text-anchor:middle}
.ra-grid{stroke:rgba(255,255,255,.08);stroke-dasharray:3 6}
.ra-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:raDraw 1.8s cubic-bezier(.4,0,.2,1) .5s forwards}
@keyframes raDraw{to{stroke-dashoffset:0}}
.ra-in{opacity:0;animation:raIn 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) forwards}
@keyframes raIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ra-fl{animation:raFl var(--fd,6s) ease-in-out infinite alternate}
@keyframes raFl{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.ra-end{transform-box:fill-box;transform-origin:center;animation:raPulse 2.6s ease-out 2.2s infinite}
@keyframes raPulse{0%{transform:scale(.7);opacity:1}70%,100%{transform:scale(1.5);opacity:0}}
.ra-orbit{animation:raOrbit 26s linear infinite}
@keyframes raOrbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ra-in,.ra-draw{animation:none;opacity:1;stroke-dashoffset:0}.ra-fl,.ra-end,.ra-orbit{animation:none}}
@media (min-width:861px){.hm{top:max(112px,calc(50% - 215px))!important}}
.ra-s--c{text-anchor:middle}.ra-h--k{fill:#0B0B0C}
.ra-code{font:500 13px 'DM Mono',ui-monospace,monospace;fill:#C9CCD1;letter-spacing:0}.ra-ck{fill:#FF7A40}.ra-cv{fill:#F2F1ED}
.ra-ring{animation:raRing 1.6s cubic-bezier(.4,0,.2,1) .6s both}
@keyframes raRing{from{stroke-dasharray:0 1}}
.rdi-scene{height:auto!important}
.rdi-scene .ra{width:100%;height:auto}
.rdh-tile{flex:1 1 300px;max-width:400px;min-width:0;margin:0 auto}
.rdh-tile .ra{width:100%;height:auto}
.rd-art{position:relative;width:100%}
.rde-hm{aspect-ratio:auto!important}.rde-hm .ra{position:static!important;width:100%!important;height:auto!important}
.rdh-hubart .ra{width:100%;height:auto}
@media (min-width:861px){
.rdi-hg--ct,.rdi-hg--ag{right:clamp(0px,4vw,72px)!important;top:max(112px,calc(50% - 210px))!important;width:min(520px,42%)!important}
.rde-hm{--hmw:580px!important;width:min(580px,46%)!important}
}
.rdi-scene{max-width:540px!important}.rdi-scene--faq{max-width:520px!important}
.rdh-tile{flex:1 1 360px!important;max-width:500px!important}
.rdi-scene{flex:1 1 460px!important}

/* ───── Héroes de servicio: escena compacta con el lenguaje de las demás escenas (sin inclinaciones, sin blur, borde fino) ───── */
.rdw .rds-art{display:none!important}
.rdw .rds-scene{position:relative;gap:14px;max-width:540px}
.rdw .rds-scene::before{content:"";position:absolute;inset:-6% -10% -10% -10%;z-index:0;pointer-events:none;
 background:radial-gradient(closest-side,rgba(255,77,0,.3),rgba(255,77,0,.08) 62%,transparent 100%)}
.rdw .rds-scene>*{position:relative;z-index:1}
.rdw .rds-scene .rds-hc1{padding-top:0!important;align-self:flex-end;order:0}
.rdw .rds-scene .rds-pricecard{transform:none;padding:10px 18px 10px 12px;border-radius:20px;gap:12px;font-size:20px;box-shadow:none;border:1px solid rgba(11,11,12,.06)}
.rdw .rds-scene .rds-pricecard .rds-ci{width:36px!important;height:36px!important;border-radius:12px!important}
.rdw .rds-scene .rds-pricecard .rds-ci svg{width:18px;height:18px}
.rdw .rds-scene.nopc{padding-top:0}
.rdw .rds-scene .rds-panel-wrap{order:1}
.rdw .rds-scene .rds-panel{background:#17181B;border:1px solid rgba(255,255,255,.11);border-radius:24px;padding:22px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:14px}
.rdw .rds-scene .rds-pn-h{font-size:12px;color:#8D929A}
.rdw .rds-scene .rds-pn-tag{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:2px 10px;font-size:11px;color:#8D929A}
.rdw .rds-scene .rds-hc2{order:2;margin-left:0}
.rdw .rds-scene .rds-trio{transform:none;flex-direction:row;padding:6px 8px;border-radius:20px;background:#17181B;border:1px solid rgba(255,255,255,.11);box-shadow:none}
.rdw .rds-scene .rds-trio li{flex:1 1 0;min-width:0;padding:8px 10px;gap:10px}
.rdw .rds-scene .rds-trio li+li{border-top:0;border-left:1px solid rgba(255,255,255,.11)}
.rdw .rds-scene .rds-trio-t{flex-direction:column;flex-wrap:nowrap;gap:2px}
.rdw .rds-scene .rds-trio-n{font-size:14px;line-height:1.15}
.rdw .rds-scene .rds-trio-l{font-size:11px;line-height:1.25;color:#8D929A}
.rdw .rds-scene .rds-trio .rds-ci{display:none!important}
@media (max-width:700px){.rdw .rds-scene .rds-trio{flex-direction:column}.rdw .rds-scene .rds-trio li+li{border-left:0;border-top:1px solid rgba(255,255,255,.11)}}

/* ───── Héroe de ciudad: mismas reglas (sin inclinaciones ni sombras pesadas) ───── */
.rdw .rdc-scene .rdc-ficha{transform:none;box-shadow:none;border:1px solid rgba(11,11,12,.06)}
.rdw .rdc-scene .rdc-map-t{transform:none;box-shadow:none}
.rdw .rdc-scene .rdc-panel .mw{box-shadow:none}
@media (max-width:860px){.rdw .rdi-scene,.rdw .rdi-hg,.rdw .hm,.rdw .hf{animation:none!important;opacity:.14!important;pointer-events:none}}

/* ───── Alineación única: cabecera, héroes y secciones comparten el mismo relleno lateral (--rd-pad) ───── */
:root{--rd-pad:clamp(20px,5vw,56px)}
.rd-hdr>header.rd-nav{padding-left:var(--rd-pad)!important;padding-right:var(--rd-pad)!important;box-sizing:content-box!important}
/* el zoom de «héroe a pantalla completa» se compensa: el contenedor conserva su borde izquierdo exacto */
.hb>[style*="--hz"]{max-width:calc(1320px / var(--hz))!important;padding-left:calc(var(--rd-pad) / var(--hz))!important;padding-right:calc(var(--rd-pad) / var(--hz))!important}
/* escenas posicionadas: su borde derecho es el de la cabecera, no el de la ventana */
@media (min-width:861px){
.hb>.hm,.hb>.rdi-hg,.hb>.rde-hm{right:max(var(--rd-pad),calc((100% - 1320px) / 2))!important}
.rdw .rds-scene,.rdw .rdc-scene,.rdw .rdh-tile,.rdw .rdi-scene{margin-left:auto!important;margin-right:0!important}
}
.rdw .rds-wrap{max-width:calc(1320px + 2 * var(--rd-pad))}
.hb>.rds-wrap[style*="--hz"]{max-width:calc((1320px + 2 * var(--rd-pad)) / var(--hz))!important}
@media (min-width:861px){.hb .hscene{right:var(--rd-pad)!important}}
.rdw :is(.rds-sec:not(.rds-sec-faq),.rdh-sec){max-width:calc(1320px + 2 * var(--rd-pad))}

/* ───── Scroll horizontal fijado · scroll snap · scroll-triggered (rd.js: initHScroll / initSnap / initTriggered) ───── */
.rd-trg{animation-play-state:paused!important}
.rd-trg.rd-on{animation-play-state:running!important}
.rd-hs{--rd-lead:max(var(--rd-pad),calc((100% - 1320px) / 2))}
.rd-hs.rd-hs-on,.rd-hs.rd-hs-meas{max-width:none!important;margin:0!important;padding:0!important;width:100%!important;display:block!important;position:relative}
.rd-hs.rd-hs-on .rd-hs-st,.rd-hs.rd-hs-meas .rd-hs-st{position:sticky;top:0;height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,40px);padding-top:104px;padding-bottom:28px;overflow:hidden}
.rd-hs.rd-hs-meas .rd-hs-st{position:static;height:auto;overflow:visible}
.rd-hs.rd-hs-on .rd-hs-st>:not(.rd-hs-track):not([data-hs-track]):not(.rd-hs-prog){padding-left:var(--rd-lead);padding-right:var(--rd-lead);margin:0}
.rd-hs.rd-hs-on .rd-hs-track,.rd-hs.rd-hs-meas .rd-hs-track{display:flex!important;flex-wrap:nowrap!important;gap:20px!important;width:max-content!important;max-width:none!important;padding:0 var(--rd-lead)!important;margin:0!important;align-items:stretch;will-change:transform}
.rd-hs.rd-hs-on .rd-hs-track>*,.rd-hs.rd-hs-meas .rd-hs-track>*{flex:0 0 var(--hs-cw,clamp(300px,24vw,360px))!important;width:var(--hs-cw,clamp(300px,24vw,360px))!important;max-width:none!important;margin:0!important;min-height:0;position:relative!important;top:auto!important;animation:none!important;opacity:1!important;translate:none!important;scale:none!important;box-sizing:border-box}
.rd-hs[data-hscroll="slides"]{--hs-cw:min(1040px,76vw)}
.rd-hs-prog{display:none}
.rd-hs.rd-hs-on .rd-hs-prog{display:block;margin:0 var(--rd-lead);height:3px;border-radius:2px;background:rgba(11,11,12,.12);overflow:hidden;flex:none}
.rd-hs-prog i{display:block;height:100%;background:#FF4D00;transform:scaleX(0);transform-origin:0 50%;border-radius:2px}
@keyframes rdHsMove{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--hs-dx,0px),0,0)}}
@keyframes rdHsBar{to{transform:scaleX(1)}}
@supports (animation-timeline: view()){
.rd-hs.rd-hs-on{view-timeline:--rdhs block}
.rdw main .rd-hs.rd-hs-on .rd-hs-track.rd-hs-track{animation:rdHsMove linear both!important;animation-timeline:--rdhs!important;animation-range:contain 0% contain 100%!important}
.rd-hs.rd-hs-on .rd-hs-prog i{animation:rdHsBar linear both;animation-timeline:--rdhs;animation-range:contain 0% contain 100%}
}
/* móvil: carruseles que se asientan tarjeta a tarjeta */
.rd-dots{display:none}
@media (max-width:860px){
.rd-snap{display:flex!important;flex-wrap:nowrap!important;gap:14px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
 margin-left:calc(-1 * var(--rd-pad))!important;margin-right:calc(-1 * var(--rd-pad))!important;padding:4px var(--rd-pad) 6px!important;scroll-padding-left:var(--rd-pad);box-sizing:border-box;max-width:none!important;width:auto!important;grid-template-columns:none!important}
.rd-snap::-webkit-scrollbar{display:none}
.rd-snap>*{flex:0 0 min(88%,380px)!important;width:min(88%,380px)!important;max-width:none!important;scroll-snap-align:start;margin:0!important;animation:none!important;opacity:1!important;translate:none!important;scale:none!important;position:relative!important;top:auto!important;box-sizing:border-box}
.rd-snap:focus-visible{outline:2px solid #FF4D00;outline-offset:2px}
.rd-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
.rd-dots i{width:7px;height:7px;border-radius:50%;background:rgba(11,11,12,.2);transition:width .25s,background .25s}
.rd-dots i.on{width:22px;border-radius:4px;background:#FF4D00}
}
/* ───── Widgets flotantes (diseño 2026): banner de cookies, asistente y WhatsApp ───── */
@keyframes ckSlideUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes ckPop{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ckPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes ckHint{0%{opacity:0;transform:translateY(8px)}8%,86%{opacity:1;transform:none}100%{opacity:0;visibility:hidden}}
@keyframes ckDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ckMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* — Banner de cookies — */
#ck-cookie{position:fixed;left:max(12px,calc(50% - 400px));bottom:28px;z-index:9990;width:min(800px,calc(100vw - 24px));box-sizing:border-box;background:#FFFFFF;color:#2A2D31;border-radius:28px;padding:16px 16px 16px 18px;display:none;align-items:center;gap:18px;box-shadow:0 40px 90px -24px rgba(0,0,0,.55);font-family:'DM Sans',system-ui,sans-serif;animation:ckSlideUp .7s cubic-bezier(.2,.8,.2,1) .3s both}
#ck-cookie .ck-cookie__ico{flex-shrink:0;width:52px;height:52px;border-radius:18px;background:#0B0B0C;display:flex;align-items:center;justify-content:center}
#ck-cookie .ck-cookie__txt{flex-grow:1;min-width:0;margin:0;font-size:17px;line-height:1.45}
#ck-cookie .ck-cookie__txt a{color:#B83800;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#ck-cookie .ck-cookie__btns{display:flex;gap:10px;flex-shrink:0}
#ck-cookie button{flex:1 1 0;min-height:52px;padding:0 24px;border-radius:999px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#ck-cookie button:hover{transform:scale(1.04)}
#ck-cookie #ck-reject{border:1.5px solid #0B0B0C;background:#FFFFFF;color:#0B0B0C}
#ck-cookie #ck-accept{border:1.5px solid #FF4D00;background:#FF4D00;color:#0B0B0C}
#ck-cookie a:focus-visible,#ck-cookie button:focus-visible{outline:3px solid #0B0B0C;outline-offset:3px}

/* — WhatsApp — */
#wa-float{position:fixed;right:28px;bottom:28px;z-index:9999;width:64px;height:64px;border-radius:22px;background:#17181B;border:1px solid rgba(255,255,255,.16);box-sizing:border-box;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 44px -12px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#wa-float:hover{transform:scale(1.06)}
#wa-tooltip{position:fixed;right:104px;bottom:38px;z-index:9998;background:#FFFFFF;color:#0B0B0C;font:600 15px/1.2 'DM Sans',system-ui,sans-serif;padding:11px 16px;border-radius:16px 16px 4px 16px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 40px 90px -24px rgba(0,0,0,.55)}

/* — Asistente: botón — */
#ck-toggle{position:fixed;left:28px;bottom:28px;z-index:9999;width:64px;height:64px;border-radius:22px;border:0;padding:0;background:#FF4D00;box-shadow:0 20px 44px -12px rgba(255,77,0,.75);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#ck-toggle:hover{transform:scale(1.06)}
#ck-toggle::before{content:"";position:absolute;inset:0;border-radius:22px;background:#FF4D00;animation:ckPing 2.2s ease-out infinite;z-index:-1}
#ck-toggle[aria-expanded="true"]{background:#0B0B0C;box-shadow:0 20px 44px -12px rgba(0,0,0,.6)}
#ck-toggle[aria-expanded="true"]::before{display:none}
#ck-hint{position:fixed;left:104px;bottom:38px;z-index:9998;white-space:nowrap;background:#FFFFFF;color:#0B0B0C;font:600 15px/1.2 'DM Sans',system-ui,sans-serif;padding:11px 16px;border-radius:16px 16px 16px 4px;box-shadow:0 40px 90px -24px rgba(0,0,0,.55);pointer-events:none;animation:ckHint 12s ease both 1.2s;opacity:0}
#ck-toggle[aria-expanded="true"]+#ck-hint{display:none}

/* — Asistente: panel — */
#ck-panel{position:fixed;left:28px;bottom:108px;z-index:9999;width:420px;max-width:calc(100vw - 32px);height:640px;max-height:calc(100vh - 128px);background:#F2F1ED;color:#0B0B0C;border:0;border-radius:32px;box-shadow:0 40px 90px -24px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:clip;font-family:'DM Sans',system-ui,sans-serif;font-size:16px}
#ck-panel[style*="flex"]{animation:ckPop .6s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom left}
#ck-header{background:#0B0B0C;color:#FFFFFF;padding:18px 18px 18px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0;border:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px}
#ck-avatar{width:48px;height:48px;border-radius:17px;background:#FF4D00;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:none}
#ck-header .ck-head__txt{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#ck-header .ck-head__title{font-family:'Outfit',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#FFFFFF;line-height:1.2}
#ck-status{display:flex;align-items:center;gap:8px;font-size:14px;color:#C3C6CA;margin:0}
#ck-status::before{content:"";width:8px;height:8px;background:#3DDC84;border-radius:50%;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:ckStatus 1.8s ease-out infinite}
@keyframes ckStatus{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}100%{box-shadow:0 0 0 9px rgba(61,220,132,0)}}
#ck-close{margin:0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s}
#ck-close:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
#ck-msgs{flex:1;min-height:0;overflow-y:auto;padding:20px 18px 8px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
#ck-msgs::-webkit-scrollbar{width:6px}
#ck-msgs::-webkit-scrollbar-thumb{background:#C9C8C3;border-radius:999px}
.ck-msg{display:flex;gap:10px;align-items:flex-end;max-width:92%;animation:ckMsgIn .25s ease both}
.ck-msg.user{align-self:flex-end;flex-direction:row-reverse}
.ck-bubble{padding:14px 16px;border-radius:20px;font-size:16px;line-height:1.45;word-break:break-word}
.ck-msg.bot .ck-bubble{background:#FFFFFF;color:#0B0B0C;border-radius:20px 20px 20px 6px;box-shadow:0 12px 30px -18px rgba(11,11,12,.35)}
.ck-msg.user .ck-bubble{background:#FF4D00;color:#0B0B0C;font-weight:600;border-radius:20px 20px 6px 20px}
.ck-bot-avatar{width:32px!important;height:32px!important;border-radius:11px!important;background:#FF4D00!important;border:0!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ck-bot-avatar svg{width:15px!important;height:15px!important;stroke:none!important;fill:#0B0B0C}
.ck-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;align-self:flex-start;font-size:15px;font-weight:700;color:#0B0B0C;text-decoration:none;padding:10px 16px;min-height:44px;box-sizing:border-box;background:#FFFFFF;border:1.5px solid #0B0B0C;border-radius:999px;transition:background .2s,color .2s}
.ck-link:hover{background:#0B0B0C;color:#FFFFFF;border-color:#0B0B0C}
.ck-typing{display:flex;gap:6px;align-items:center;padding:16px 18px;background:#FFFFFF;border-radius:20px 20px 20px 6px;width:fit-content;box-shadow:0 12px 30px -18px rgba(11,11,12,.35)}
.ck-typing span{width:8px;height:8px;background:#0B0B0C;border-radius:50%;animation:ckDot 1.1s ease-in-out infinite}
.ck-typing span:nth-child(2){animation-delay:.18s;background:#8F8D86}
.ck-typing span:nth-child(3){animation-delay:.36s;background:#C9C8C3}
#ck-chips{padding:0 18px 16px;display:flex;flex-flow:row wrap;align-items:flex-start;gap:8px;flex-shrink:0;max-height:156px;overflow-y:auto}
.ck-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #0B0B0C;background:#FFFFFF;color:#0B0B0C;font:600 15px/1.2 'DM Sans',sans-serif;text-align:left;cursor:pointer;white-space:normal;transition:background .25s,color .25s,transform .25s}
.ck-chip:hover{background:#0B0B0C;color:#FFFFFF;border-color:#0B0B0C;transform:translateY(-2px)}
#ck-form{display:flex;gap:10px;align-items:center;padding:14px;background:#FFFFFF;border-top:1px solid #E4E2DC;flex-shrink:0}
#ck-input{flex:1;min-width:0;box-sizing:border-box;height:52px;padding:0 18px;border-radius:999px;border:1.5px solid #8F8D86;background:#F2F1ED;color:#0B0B0C;font:16px 'DM Sans',sans-serif;outline:none;transition:border-color .2s}
#ck-input:focus{border-color:#FF4D00;background:#FFFFFF;box-shadow:0 0 0 3px rgba(255,77,0,.2)}
#ck-input::placeholder{color:#6B6F75}
#ck-send{flex-shrink:0;width:52px;height:52px;border-radius:50%;border:0;background:#FF4D00;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s}
#ck-send:hover{background:#FF4D00;transform:scale(1.07)}
#ck-send:disabled{opacity:.5;cursor:not-allowed;transform:none}
#ck-toggle:focus-visible,#wa-float:focus-visible,#ck-close:focus-visible,#ck-send:focus-visible,.ck-chip:focus-visible,.ck-link:focus-visible{outline:3px solid #FF7A40;outline-offset:3px}

/* — Aviso de actividad real (prueba social): sobre el botón del asistente, nunca encima de él — */
#clik-social{left:28px!important;bottom:108px!important;max-width:min(320px,calc(100vw - 56px))!important}
#clik-social button{min-width:44px;min-height:44px}
.ck-open #clik-social{display:none!important}
@media (max-width:700px){#clik-social{left:12px!important;bottom:92px!important}}

/* — Con el banner de cookies visible los botones flotantes suben — */
@media (max-width:1000px){.ck-open #ck-toggle,.ck-open #wa-float{bottom:128px}.ck-open #ck-hint,.ck-open #wa-tooltip{display:none}.ck-open #ck-panel{bottom:208px}}
/* — Móvil — */
@media (max-width:700px){
  #ck-cookie{left:12px;right:12px;bottom:12px;width:auto;flex-wrap:wrap;padding:20px;gap:16px}
  #ck-cookie .ck-cookie__txt{flex:1 1 calc(100% - 70px);font-size:16px}
  #ck-cookie .ck-cookie__btns{width:100%}
  #ck-toggle{left:12px;bottom:16px}
  #wa-float{right:12px;bottom:16px}
  #ck-hint{left:88px;bottom:26px}
  .ck-open #ck-toggle,.ck-open #wa-float{bottom:236px}
  #ck-panel{left:0;right:0;top:0;bottom:0;width:auto;max-width:none;height:100dvh;max-height:none;border-radius:0}
  #ck-toggle[aria-expanded="true"],body.ck-chat-open #wa-float{display:none}
  #ck-form{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){#ck-hint{display:none}#ck-toggle::before{display:none}}
/* con el menú móvil abierto los botones flotantes se ocultan (el menú cubre toda la pantalla) */
html.rd-menu-open #ck-toggle,html.rd-menu-open #ck-hint,html.rd-menu-open #wa-float,html.rd-menu-open #wa-tooltip,html.rd-menu-open #clik-social,html.rd-menu-open #ck-cookie{display:none!important}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}