/* =========================================================
   C&R Global Technologies — estilo sobrio (versión 2)
   Paleta: negro, blanco y gris piedra cálido. Único acento: el rojo del logo.
   ========================================================= */
:root{
  --ink:#0B0F14; --ink-2:#1A1F27; --paper:#FFFFFF; --stone:#8A8F98; --text:#3A414B; --text-2:#4A525D;
  --ice:#F1EFEC; --ice-2:#E7E3DE; --dot:#EF4444; --line:#E6EAF0; --wa:#178F49;
  --font:"Inter Tight",system-ui,sans-serif; --brand-font:Outfit,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--font);font-weight:400;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1240px,100% - 48px);margin:0 auto}
:focus-visible{outline:2px solid var(--dot);outline-offset:3px}

/* Botones en píldora con punto */
.pill{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 19px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;border:0;font-family:inherit;transition:background .2s,color .2s}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot)}
.pill.light{background:#fff;color:var(--ink)}
.pill.light:hover{background:#EEF4F8}
.pill.glass{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(10px)}
.pill.glass:hover{background:rgba(255,255,255,.24)}
.pill.dark{background:var(--ink);color:#fff}
.pill.dark:hover{background:#252B35}

/* Marca: píxel + GLOBAL TECH */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--brand-font);letter-spacing:.14em;line-height:1}
.brand img{width:1.15em;height:auto}
.brand span{font-weight:200}.brand b{font-weight:600}

/* Encabezado flotante: transparente sobre la portada, blanco al bajar */
.hdr{position:fixed;inset:16px 16px auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:40px;height:60px;padding:0 10px 0 22px;border-radius:16px;color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.hdr .brand{font-size:20px;transition:opacity .3s}
.hdr nav{display:flex;gap:30px;font-size:14px;margin-left:auto}
.hdr nav a{opacity:.85}.hdr nav a:hover{opacity:1}
.hdr .lang{font-size:13px;font-weight:500;letter-spacing:.06em;opacity:.85;padding:6px 4px}.hdr .lang:hover{opacity:1}
.hdr.top .brand{opacity:0;pointer-events:none}
.hdr.solid{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 8px 30px rgba(11,15,20,.08)}
.hdr.solid .pill.light{background:var(--ink);color:#fff}

/* Portada: una sola foto a pantalla completa */
.hero{position:relative;height:100svh;min-height:640px;color:#fff;overflow:hidden;background:var(--ink)}
/* Portada con fotos que se funden (efecto video): cada una con su propio movimiento de cámara */
.hero-media{position:absolute;inset:0;overflow:hidden;background:#000}
.hero-media .hs{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;will-change:opacity,transform}
.hero-media .hs.on{opacity:1}
.hero-media .hs img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .hs canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero-media .hs.on.kb-in{animation:kbIn 10s ease-out forwards}
.hero-media .hs.on.kb-out{animation:kbOut 10s ease-out forwards}
.hero-media .hs.on.kb-left{animation:kbLeft 10s ease-out forwards}
.hero-media .hs.on.kb-right{animation:kbRight 10s ease-out forwards}
@keyframes kbIn{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes kbOut{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes kbLeft{from{transform:scale(1.12) translateX(2.5%)}to{transform:scale(1.12) translateX(-2.5%)}}
@keyframes kbRight{from{transform:scale(1.12) translateX(-2.5%)}to{transform:scale(1.12) translateX(2.5%)}}
.hero.calm .hero-media .hs.on{animation:kbCalm 10s ease-out forwards!important}
@keyframes kbCalm{from{transform:scale(1)}to{transform:scale(1.05)}}
/* Mismo «look» de película para todas las fotos: viñeteado y grano */
.hero-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 45% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
.hero-media::after{content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* Etiqueta y título de cada servicio */
.hero-head{transition:opacity .55s ease,transform .55s ease}
.hero-head.out{opacity:0;transform:translateY(-12px)}
.hero-tag{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:18px}
.hero-tag:hover{color:#fff}
.hero-n{color:var(--dot);font-weight:500;letter-spacing:.06em}
.hero-n::after{content:"";display:inline-block;vertical-align:middle;width:30px;height:1px;margin-left:12px;background:rgba(255,255,255,.5)}
/* Entrada de película al abrir la página */
.hero .hero-media{transition:opacity 1.6s ease}
.hero.intro .hero-media{opacity:0}
.hero.intro .brand,.hero.intro .hero-head,.hero.intro .hero-main p,.hero.intro .acts,.hero.intro .hero-dots{opacity:0;transform:translateY(18px)}
.hero .brand,.hero .hero-main p,.hero .acts,.hero .hero-dots{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hero:not(.intro) .brand{transition-delay:.5s}
.hero:not(.intro) .hero-head{transition-delay:.75s}
.hero:not(.intro) .hero-main p{transition-delay:.95s}
.hero:not(.intro) .acts{transition-delay:1.1s}
.hero:not(.intro) .hero-dots{transition-delay:1.3s}
.hero.settled .brand,.hero.settled .hero-head,.hero.settled .hero-main p,.hero.settled .acts,.hero.settled .hero-dots{transition-delay:0s}
.hdr.pre{opacity:0}
.hdr{transition:background .3s,color .3s,box-shadow .3s,opacity 1s ease .4s}.hero-dots{position:absolute;left:32px;bottom:28px;z-index:2;display:flex;gap:8px}
.hero-dots button{width:34px;height:3px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.28);cursor:pointer;position:relative;overflow:hidden}
.hero-dots button::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-dots button.on::after{animation:dotFill var(--dur,6.5s) linear forwards}
.hero-dots button.done::after{transform:scaleX(1)}
@keyframes dotFill{to{transform:scaleX(1)}}
@keyframes slow{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,20,0) 30%,rgba(11,15,20,.38) 58%,rgba(11,15,20,.62) 100%),linear-gradient(180deg,rgba(11,15,20,.5) 0%,rgba(11,15,20,.15) 30%,rgba(11,15,20,.35) 65%,rgba(11,15,20,.7) 100%)}
.hero h1,.hero p,.hero-tag{text-shadow:0 2px 18px rgba(0,0,0,.45)}
@media (max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,.35) 35%,rgba(11,15,20,.6) 70%,rgba(11,15,20,.8) 100%)}}
.hero .wrap{width:calc(100% - 64px);position:relative;z-index:1;height:100%;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:40px;padding-top:80px}
.hero .brand{position:absolute;top:32px;left:-16px;font-size:clamp(1.05rem,1.45vw,1.32rem);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-main{grid-column:2;justify-self:end;width:min(100%,540px);align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,5vh,48px);padding-top:clamp(60px,18vh,200px)}
.hero h1{font-weight:300;font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1.06;letter-spacing:-.02em;max-width:15ch}
.hero p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:22px}
.acts{display:flex;gap:10px;flex-wrap:wrap}

/* Títulos de sección */
.h2{font-weight:300;font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.02em;line-height:1.05}
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:26px}

/* Servicios: lista a la izquierda y foto grande a la derecha que cambia con fundido */
.services{padding:84px 0 88px;background:var(--ice)}
/* Encabezado de servicios: título grande con los pixeles del logo y contador */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-bottom:26px;margin-bottom:30px;border-bottom:1px solid rgba(11,15,20,.1)}
.svc-title{display:flex;align-items:center;gap:.32em;font-weight:300;font-size:clamp(2.4rem,5.2vw,4.6rem);letter-spacing:-.035em;line-height:1}
.svc-title .px{display:inline-flex;align-items:center;gap:.09em;flex:none}
.svc-title .px i{display:block;width:.24em;height:.24em;border-radius:.05em;background:var(--dot)}
.svc-title .px i:nth-child(2){width:.17em;height:.17em;opacity:.55}
.svc-title .px i:nth-child(3){width:.11em;height:.11em;opacity:.3}
.svc-count{display:flex;align-items:flex-end;gap:14px}
.svc-count b{font-weight:200;font-size:clamp(3rem,6vw,5.4rem);line-height:.8;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.svc-count span{font-size:14px;line-height:1.35;color:var(--text-2);padding-bottom:4px}
@media (max-width:700px){.svc-head{flex-direction:column;align-items:flex-start;gap:18px}.svc-count b{font-size:3rem}}
/* Tarjetas de servicios: blancas sobre piedra, línea roja que se completa al pasar el mouse */
.svc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kc{position:relative;background:#fff;border-radius:12px;padding:24px 24px 22px;display:flex;flex-direction:column;min-height:300px;border:1px solid #E9E5DF;overflow:hidden;transition:transform .35s var(--ease-out,ease),box-shadow .35s var(--ease-out,ease),border-color .3s ease}
.kc::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--dot);transform:scaleX(.12);transform-origin:left;transition:transform .45s var(--ease-out,ease)}
.kc .num{font-size:12px;letter-spacing:.08em;color:var(--stone);font-variant-numeric:tabular-nums}
.kc h3{font-weight:400;font-size:1.3rem;letter-spacing:-.01em;line-height:1.2;margin:18px 0 10px}
.kc p{font-size:14px;line-height:1.55;color:var(--text-2);margin-bottom:16px}
.kc ul{list-style:none;display:grid;gap:7px;margin-bottom:20px}
.kc li{font-size:13px;color:var(--text);display:flex;gap:9px;align-items:center}
.kc li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--ice) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0F14' stroke-width='3'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E")}
.kc .lnk{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.kc .lnk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s var(--ease-out,ease)}
.kc.kc-dark{background:var(--ink);color:#fff;border-color:var(--ink);justify-content:space-between}
.kc.kc-dark .num{color:#8A8F98;letter-spacing:0}
.kc.kc-dark h3{font-size:1.6rem;font-weight:300}
.kc.kc-dark p{color:#AEB4BE}
.kc.kc-dark::before{transform:scaleX(1)}
.kc:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .kc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,15,20,.08);border-color:#DDD7CF}
  .kc.kc-dark:hover{border-color:var(--ink)}
  .kc:hover::before{transform:scaleX(1)}
  .kc:hover .lnk svg{transform:translateX(4px)}
}
@media (max-width:1100px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-cards{grid-template-columns:1fr}.kc{min-height:0}.services{padding:64px 0}}
/* Marcas: en gris, a color al pasar el mouse */
.brands{padding:58px 0 54px}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brand-grid div{height:110px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);filter:grayscale(1);opacity:.55;transition:filter .3s,opacity .3s}
.brand-grid div:hover{filter:none;opacity:1}
.blg{display:inline-flex;align-items:center;gap:.32em;height:30px;font-size:30px;line-height:1}
.blg svg{height:100%;width:auto}
.blg.lk svg{height:78%}.blg.lk{font-size:24px}
.blg em{font-style:normal;font-size:.62em;font-family:var(--font);white-space:nowrap}
.bword{font-weight:600;font-size:17px;letter-spacing:.04em;white-space:nowrap}

/* Sección oscura con puntos */
section.dark{background:var(--ink);color:#fff;padding:120px 0 110px;position:relative;overflow:hidden}
section.dark::before{content:"";position:absolute;right:-80px;top:0;width:60%;height:100%;background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.6px);background-size:14px 14px;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.dark .wrap{position:relative}
.dark .h2{max-width:640px;margin-bottom:28px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:80px}
.stat{background:var(--ink-2);border-radius:6px;padding:26px 26px 30px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.stat b{font-weight:300;font-size:2.6rem;letter-spacing:-.02em}
.stat p{font-size:14px;line-height:1.55;color:#AEB4BE}
.stat i{display:block;width:6px;height:6px;border-radius:50%;background:var(--dot);margin-bottom:18px}

/* Cierre con foto */
.cta{position:relative;color:#fff;padding:150px 0;overflow:hidden;background:var(--ink)}
.cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.cta .wrap{position:relative;display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}

/* Pie de página */
.ftr{background:var(--ink);color:#AEB4BE;padding:70px 0 34px;font-size:14px}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid #222832}
.ftr .brand{font-size:20px;color:#fff;margin-bottom:18px}
.ftr h4{color:#fff;font-weight:500;font-size:14px;margin-bottom:14px}
.ftr ul{list-style:none;display:grid;gap:9px}
.ftr a:hover{color:#fff}
.ftr .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:var(--stone)}

/* Botón flotante de WhatsApp */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:20;width:56px;height:56px;border-radius:50%;background:#1FAF5A;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* Aviso de imagen de muestra (quitar al publicar) */
.demo-note{position:absolute;left:32px;bottom:20px;z-index:2;font-size:11px;color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .hdr nav{display:none}
  .hero .wrap{grid-template-columns:1fr;align-content:center;gap:28px}
  .hero .brand{top:26px;left:-8px}
  .hero-main{grid-column:1;justify-self:start;padding-top:0;gap:32px}
  .svc-head{grid-template-columns:1fr;gap:24px}
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.ftr .cols{grid-template-columns:1fr}.brand-grid div{height:90px}.blg{height:24px;font-size:24px}.blg.lk{font-size:18px}}
@media (prefers-reduced-motion:reduce){.hero-media::after{animation:none}.hero.intro .brand,.hero.intro .hero-head,.hero.intro .hero-main p,.hero.intro .acts,.hero.intro .hero-dots{transform:none}}

/* Flechas laterales del carrusel de portada */
.hero-arrow{position:absolute;top:50%;z-index:4;width:48px;height:48px;margin-top:-24px;border:0;border-radius:50%;background:transparent;color:#fff;opacity:.55;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}
.hero-arrow:hover{opacity:1;background:rgba(255,255,255,.08)}
.hero-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow.prev{left:14px}.hero-arrow.next{right:14px}
.hero.intro .hero-arrow{opacity:0}
@media (max-width:900px){.hero-arrow{display:none}}
/* =========================================================
   Páginas de servicio — tonos alternados: blanco, piedra, grafito, arena
   ========================================================= */
:root{--sand:#DDD7CF;--graphite:#15191F}
.phero{position:relative;height:86svh;min-height:600px;color:#fff;overflow:hidden;background:var(--ink)}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kbCalm 14s ease-out forwards}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,.1) 32%,rgba(11,15,20,.45) 68%,rgba(11,15,20,.85) 100%),linear-gradient(90deg,rgba(11,15,20,.55) 0%,rgba(11,15,20,0) 60%)}
.phero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 0 64px}
.crumb{position:absolute;top:104px;left:0;display:flex;gap:10px;font-size:13px;color:rgba(255,255,255,.7)}
.crumb a:hover{color:#fff}.crumb span:last-child{color:#fff}
.phero-main{max-width:720px}
.phero h1{font-weight:300;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.025em;margin-bottom:22px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.phero-lead{font-size:17px;line-height:1.6;color:rgba(255,255,255,.85);max-width:540px;margin-bottom:30px}
.phero-count{position:absolute;right:0;bottom:70px;font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.75)}
.phero-count i{font-style:normal;color:var(--dot);margin:0 6px}

.s-intro{padding:130px 0 120px}
.s-intro .wrap{display:grid;grid-template-columns:1fr 2.2fr;gap:60px}
.s-statement{font-weight:300;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.12;letter-spacing:-.02em;max-width:22ch;margin-bottom:34px}
.s-body{font-size:16.5px;line-height:1.7;color:var(--text);max-width:640px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid var(--line)}
.fact{padding:26px 24px 0 0;display:flex;flex-direction:column;gap:8px}
.fact i{width:6px;height:6px;border-radius:50%;background:var(--dot);margin-bottom:8px}
.fact b{font-weight:400;font-size:1.45rem;letter-spacing:-.01em}
.fact span{font-size:14px;line-height:1.5;color:var(--stone)}

.s-inc{background:var(--ice);padding:120px 0}
.s-head{display:grid;grid-template-columns:1fr 2.2fr;gap:60px;margin-bottom:60px}
.s-head .h2{max-width:16ch}
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.inc{background:#fff;border-radius:6px;padding:26px 28px 32px;min-height:260px;display:flex;flex-direction:column;transition:background .3s,color .3s}
.inc .n{font-size:12px;color:var(--stone);display:flex;align-items:center;gap:8px}
.inc .n::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dot)}
.inc h3{font-weight:400;font-size:1.45rem;letter-spacing:-.01em;margin:auto 0 12px;padding-top:60px}
.inc p{font-size:15px;line-height:1.6;color:var(--text-2)}
.inc:hover{background:var(--graphite);color:#fff}.inc:hover p{color:#AEB4BE}

.s-proc .h2{max-width:16ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:70px}
.step{position:relative;padding-top:34px;border-top:1px solid #2A303A}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 5px rgba(239,68,68,.15)}
.step .n{font-size:12px;color:#8A8F98;letter-spacing:.1em}
.step h3{font-weight:400;font-size:1.35rem;margin:14px 0 10px}
.step p{font-size:14.5px;line-height:1.6;color:#AEB4BE;max-width:260px}

.s-ideal{background:var(--sand);padding:110px 0}
.s-ideal .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.s-ideal-img{border-radius:6px;overflow:hidden;aspect-ratio:4/3.2;background:var(--ink)}
.s-ideal-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.s-ideal-img:hover img{transform:scale(1.04)}
.ideal{list-style:none;margin-bottom:36px;border-top:1px solid rgba(11,15,20,.14)}
.ideal li{font-weight:300;font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.01em;padding:18px 0;border-bottom:1px solid rgba(11,15,20,.14);display:flex;gap:16px;align-items:center}
.ideal li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dot)}
.s-ideal .eyebrow{color:#6E727A}

.s-brands{padding:110px 0 40px}
.s-brands .brand-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.s-faq{padding:110px 0 130px}
.s-faq .wrap{display:grid;grid-template-columns:1fr 2.2fr;gap:60px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-size:1.2rem;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/12px 1.4px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.4px 12px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:15.5px;line-height:1.7;color:var(--text);max-width:640px;padding:0 0 28px}

.s-next{display:block;background:var(--ice-2);padding:70px 0;overflow:hidden;transition:background .3s}
.s-next .wrap{position:relative;display:flex;flex-direction:column;gap:14px}
.s-next .eyebrow{margin:0}.s-next .eyebrow b{color:var(--dot);font-weight:500;margin-left:6px}
.s-next-t{position:relative;z-index:1;display:flex;align-items:center;gap:22px;font-weight:300;font-size:clamp(2rem,4.4vw,3.8rem);letter-spacing:-.02em;line-height:1.05}
.s-next-t svg{width:.7em;height:.7em;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .3s}
.s-next img{position:absolute;right:0;top:50%;width:300px;height:190px;object-fit:cover;border-radius:6px;transform:translateY(-50%) scale(.92);opacity:0;transition:opacity .4s,transform .5s}
.s-next:hover{background:var(--sand)}
.s-next:hover svg{transform:translateX(10px)}
.s-next:hover img{opacity:1;transform:translateY(-50%) scale(1)}

@media (max-width:900px){
  .phero{height:auto;min-height:88svh}
  .crumb{top:96px;flex-wrap:wrap}
  .phero-count{display:none}
  .s-intro .wrap,.s-head,.s-faq .wrap,.s-ideal .wrap{grid-template-columns:1fr;gap:28px}
  .facts{grid-template-columns:1fr}.fact{padding:22px 0;border-bottom:1px solid var(--line)}
  .inc-grid,.steps{grid-template-columns:1fr}
  .inc{min-height:0}.inc h3{padding-top:34px}
  .steps{gap:36px}
  .s-next img{display:none}
}
@media (min-width:901px) and (max-width:1100px){.inc-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr);row-gap:40px}}

/* Ciberseguridad: en celular se encuadra el candado (está a la izquierda de la foto) */
/* En pantallas verticales cada foto usa su propio encuadre (--mp en el <img>) */
@media (max-width:900px){.hero-media .hs img{object-position:var(--mp,50% 50%)}}

/* Encabezado en celular: el botón no se parte en dos líneas */
.hdr .pill{white-space:nowrap}
@media (max-width:520px){.hdr{gap:14px;padding-left:16px}.hdr .brand{font-size:17px}}
/* Menú en celulares (main.js crea el botón y el panel) */
.menu-btn,.menu-panel{display:none}
@media (max-width:900px){
  .hdr{gap:10px}
  .hdr .pill{margin-left:auto}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:none;width:42px;height:42px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:inherit;cursor:pointer}
  .hdr.solid .menu-btn{background:rgba(11,15,20,.07)}
  .menu-btn i{display:block;height:1.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease-out,ease)}
  .hdr.menu-open .menu-btn i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .hdr.menu-open .menu-btn i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .menu-panel{display:flex;flex-direction:column;position:absolute;top:calc(100% + 10px);left:0;right:0;padding:8px;border-radius:16px;border-top:3px solid var(--dot);background:#fff;color:var(--ink);box-shadow:0 22px 50px rgba(11,15,20,.28);opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease-out,ease)}
  .hdr.menu-open .menu-panel{opacity:1;transform:none;pointer-events:auto}
  .menu-panel a{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:10px;font-size:17px}
  .menu-panel a::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--dot)}
  .menu-panel a:active{background:var(--ice)}
  .menu-panel a.mw{display:none}
  .menu-panel a.ml{margin-top:4px;border-top:1px solid var(--ice-2);border-radius:0 0 10px 10px;font-size:14px;color:var(--text-2)}
  .menu-panel a.ml::before{background:var(--stone)}
}
/* Celulares angostos: "Escríbenos" pasa al menú (ya está el botón flotante de WhatsApp) */
@media (max-width:520px){
  .hdr .pill{display:none}
  .menu-btn{margin-left:auto}
  .menu-panel a.mw{display:flex;margin-top:4px;background:var(--ink);color:#fff}
  .menu-panel a.mw:active{background:var(--ink-2)}
}
/* Tarjetas en pantallas táctiles: mismo efecto que al pasar el mouse cuando cruzan el centro de la pantalla */
@media (hover:none){
  .kc.act{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,15,20,.08);border-color:#DDD7CF}
  .kc.kc-dark.act{border-color:var(--ink)}
  .kc.act::before{transform:scaleX(1)}
  .kc.act .lnk svg{transform:translateX(4px)}
}


/* Contacto: datos a la izquierda, mapa a la derecha */
.contact{background:var(--ice);padding:120px 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:stretch}
.contact-info > p{font-size:16px;line-height:1.6;color:var(--text);max-width:380px;margin:18px 0 40px}
.contact dl{display:grid;gap:0;border-top:1px solid rgba(11,15,20,.12)}
.contact dl > div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid rgba(11,15,20,.12)}
.contact dt{font-size:13px;color:var(--stone);padding-top:2px}
.contact dd{font-size:16px;color:var(--ink)}
.contact dd a{border-bottom:1px solid transparent;transition:border-color .2s ease}
.contact dd a:hover{border-color:currentColor}
.contact-map{border-radius:6px;overflow:hidden;min-height:420px;background:var(--ice-2)}
.contact-map iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(1) contrast(1.05) brightness(.97)}

@media (max-width:900px){
  .contact .wrap{grid-template-columns:1fr;gap:36px}
  .contact{padding:90px 0}
  .contact dl > div{grid-template-columns:96px 1fr}
  .contact-map,.contact-map iframe{min-height:300px}
}

/* Páginas legales: Libro de Reclamaciones y Política de Privacidad */
.legal-page{background:var(--ice)}
.legal-page .ftr{padding:30px 0}
.legal-page .ftr .legal{border:0;padding-top:0}
.lr{padding:130px 0 100px}
.lr .wrap{max-width:900px}
.lr-head p{font-size:16px;line-height:1.6;color:var(--text);max-width:640px;margin:18px 0 30px}
.lr-prov{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(11,15,20,.1);border-radius:8px;overflow:hidden;margin-bottom:36px}
.lr-prov > div{background:#fff;padding:14px 18px}
.lr-prov dt{font-size:12px;color:var(--stone);margin-bottom:4px}
.lr-prov dd{font-size:15px;font-variant-numeric:tabular-nums}
.lr-form,.lr-ok{background:#fff;border-radius:8px;padding:40px}
.lr-form fieldset{border:0;padding:0;margin:0 0 36px}
.lr-form legend{display:flex;gap:12px;align-items:center;font-size:1.25rem;font-weight:400;margin-bottom:18px}
.lr-form legend span{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.lr-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.lr-form label{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--text-2)}
.lr-form label.full,.lr-form .full{grid-column:1/-1}
.lr-form input:not([type=checkbox]):not([type=radio]),.lr-form select,.lr-form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--ice);border:1px solid transparent;border-radius:6px;padding:12px 14px;transition:border-color .2s ease,background .2s ease}
.lr-form input:focus,.lr-form select:focus,.lr-form textarea:focus{outline:0;border-color:var(--ink);background:#fff}
.lr-form textarea{resize:vertical}
.lr-form small{font-size:12px;color:var(--stone)}
.lr-form .check{flex-direction:row;align-items:flex-start;gap:10px;font-size:14px;margin:14px 0}
.lr-form .check input{margin-top:3px;accent-color:var(--ink)}
.lr-form .check a{text-decoration:underline}
.seg{display:inline-flex;background:var(--ice);border-radius:999px;padding:4px;margin-bottom:18px}
.seg label{flex-direction:row;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;cursor:pointer;font-size:14px;color:var(--ink);transition:background .2s ease}
.seg input{accent-color:var(--dot)}
.seg label:has(input:checked){background:#fff;box-shadow:0 1px 3px rgba(11,15,20,.08)}
.lr-def{font-size:13.5px;line-height:1.6;color:var(--text-2);background:var(--ice);border-radius:6px;padding:12px 14px;margin-bottom:16px}
.lr-obs p{font-size:14px;color:var(--stone)}
.lr-form .invalid input,.lr-form .invalid select,.lr-form .invalid textarea,.lr-form input.invalid{border-color:var(--dot)}
.lr-form label.invalid{color:#B91C1C}
.lr-err{color:#B91C1C;font-size:14px;min-height:20px;margin:6px 0}
.lr-notes{list-style:none;margin-top:28px;display:grid;gap:8px;font-size:12.5px;line-height:1.55;color:var(--stone)}
.lr-ok p{font-size:15.5px;line-height:1.65;color:var(--text);margin:16px 0 22px}
.lr-ok pre{white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.6;background:var(--ice);border-radius:6px;padding:18px;margin-bottom:24px}
.hidden{display:none!important}
.legal-text h2{font-weight:400;font-size:1.3rem;margin:34px 0 10px}
.legal-text p{font-size:15.5px;line-height:1.7;color:var(--text);max-width:68ch;margin-top:12px}
.legal-text a{text-decoration:underline}
.legal-upd{font-size:13px!important;color:var(--stone)!important;margin-top:40px!important}
@media (max-width:700px){.lr{padding:110px 0 70px}.lr-form,.lr-ok{padding:26px 20px}.lr-form .grid2{grid-template-columns:1fr}}
@media print{.hdr,.ftr,.wa-float,.lr-ok .acts{display:none!important}.lr{padding:0}.lr-ok{padding:0}}
@media (max-width:420px){.hdr .brand{font-size:15px;gap:8px;letter-spacing:.1em}.hdr .pill{height:38px;padding:0 14px;gap:8px}}

/* Marcas de la portada: carrusel continuo (movimiento constante = lineal), se detiene al pasar el mouse */
.brand-marquee{position:relative;overflow:hidden;padding:6px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brand-track{display:flex;width:max-content;animation:marquee 95s linear infinite}
.brand-track > div{flex:none;width:260px;height:112px;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease-out,ease)}
/* Logos más grandes y con sus colores originales */
.brand-track .blg{height:46px;font-size:46px}.brand-track .blg.lk{font-size:36px}.brand-track .bword{font-size:26px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.brand-marquee:hover .brand-track{animation-play-state:paused}.brand-track > div:hover{transform:scale(1.06)}}
@media (max-width:600px){.brand-track > div{width:190px;height:72px}.brand-track .blg{height:34px;font-size:34px}.brand-track .blg.lk{font-size:27px}.brand-track .bword{font-size:20px}.brand-track{animation-duration:75s}}
/* Con "reducir movimiento": el carrusel sigue, pero mucho más lento y suave */
@media (prefers-reduced-motion:reduce){.brand-track{animation-duration:140s}}

/* Franja de marcas más baja: etiqueta pegada al carrusel */
.brands .eyebrow{margin-bottom:16px}
.brand-marquee{padding:0}/* Carrusel: todos los logos con el mismo ancho máximo (ninguno domina ni invade al vecino) */
.brand-track > div{overflow:hidden}
.brand-track .blg,.brand-track .bword{max-width:180px}
.brand-track .blg svg{max-width:100%}
@media (max-width:600px){.brand-track .blg,.brand-track .bword{max-width:140px}}

/* Nosotros: foto panorámica en grafito que se funde con el fondo (grafito cálido) y franja de texto */
.ab{--ab-bg:#2A2E33;background:var(--ab-bg);color:#fff}
.ab-img{height:58vh;min-height:380px;max-height:640px;overflow:hidden;position:relative;background:#000}
.ab-img img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;filter:grayscale(1) sepia(.12) contrast(1.08) brightness(.9)}
.ab-img::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,var(--ab-bg))}
.ab-band{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,6vw,100px);padding-bottom:clamp(70px,9vh,110px);margin-top:-70px;position:relative}
.ab-title{display:flex;align-items:center;gap:.3em;font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);letter-spacing:-.035em;line-height:1}
.ab-title .px{display:inline-flex;align-items:center;gap:.09em;flex:none}
.ab-title .px i{display:block;width:.24em;height:.24em;border-radius:.05em;background:var(--dot)}
.ab-title .px i:nth-child(2){width:.17em;height:.17em;opacity:.55}.ab-title .px i:nth-child(3){width:.11em;height:.11em;opacity:.3}
.ab-lead{font-weight:300;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.32;letter-spacing:-.012em;color:#D2D6DC;margin-top:22px}
.ab-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:92px}
.ab-cols > div{border-top:2px solid var(--dot);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.ab-cols .n{font-weight:200;font-size:2rem;line-height:1;color:var(--dot);font-variant-numeric:tabular-nums}
.ab-cols h3{font-weight:400;font-size:clamp(1.12rem,1.4vw,1.3rem);margin-bottom:6px}
.ab-cols p{font-size:15px;line-height:1.55;color:#A7ACB3}
@media (max-width:900px){.ab-img{height:46vh;min-height:300px}.ab-band{grid-template-columns:1fr;gap:36px;margin-top:-40px}.ab-cols{grid-template-columns:1fr;padding-top:0;gap:26px}}
/* Contacto: título como las demás secciones, 3 datos y mapa a color */
.ct-title{display:flex;align-items:center;gap:.3em;font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);letter-spacing:-.035em;line-height:1}
.ct-title .px{display:inline-flex;align-items:center;gap:.09em;flex:none}
.ct-title .px i{display:block;width:.24em;height:.24em;border-radius:.05em;background:var(--dot)}
.ct-title .px i:nth-child(2){width:.17em;height:.17em;opacity:.55}.ct-title .px i:nth-child(3){width:.11em;height:.11em;opacity:.3}
.contact .wrap{align-items:center}
.contact-info > p{font-weight:300;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.4;max-width:28ch;margin:20px 0 44px}
.contact dl > div{padding:20px 0}
.contact dd{font-size:17px}
.contact .status{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--text-2)}
.contact .status em{font-style:normal}
.contact .status i{width:8px;height:8px;border-radius:50%;background:#9AA0A9;flex:none}
.contact .status.open i{background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.contact-map{border-radius:16px;min-height:480px;box-shadow:0 20px 50px rgba(11,15,20,.08)}
.contact-map iframe{filter:none;min-height:480px}
@media (max-width:900px){.contact-map,.contact-map iframe{min-height:320px}}

/* Libro de Reclamaciones (versión simple) */
.lr .wrap{max-width:760px}
.lr .ct-title{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.lr-intro{font-size:17px;line-height:1.6;color:var(--text);margin:18px 0 8px;max-width:52ch}
.lr-meta{font-size:13px;color:var(--stone);margin-bottom:30px;font-variant-numeric:tabular-nums}
.lr-form h2{font-weight:400;font-size:1.15rem;margin:6px 0 16px}
.lr-form h2:not(:first-child){margin-top:34px}
.lr-form .check{margin:26px 0 6px}
.lr-notes{font-size:12.5px;color:var(--stone);margin-top:22px;list-style:none}

/* Nosotros: descripción de la empresa (más larga que el lema), algo más pequeña */
.ab-lead{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.55;max-width:34ch}