/* Cómo trabajamos (Home) y páginas de servicio. Tarjetas que se apilan con el scroll normal. */
.izi-how,.izi-svc section{background:var(--color-ink);color:#fff}
.izi-how{padding:clamp(5rem,11vh,8rem) max(1rem,4vw) clamp(4rem,9vh,6rem)}
.hw-wrap,.svc-wrap{max-width:1180px;margin:0 auto}
.hw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,5vh,3.5rem)}
.hw-head h2,.izi-svc h2{margin:0;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1;font-weight:700;letter-spacing:-.035em}
.hw-head p{max-width:24rem;margin:0;color:#ffffffb3;font-size:1.05rem}
.izi-svc mark{background:var(--color-lime);color:var(--color-ink);padding:0 .14em .04em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Pila de tarjetas */
.hw-stack,.svc-stack{display:grid;gap:1.1rem;max-width:1100px;margin:0 auto;padding-bottom:6vh}
.hw-step,.svc-step{position:sticky;top:calc(6.5rem + var(--n)*1.1rem);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.4rem,3vw,2.6rem);border-radius:1.6rem;background:#2b2b2b linear-gradient(160deg,#ffffff0d,#ffffff00 60%);box-shadow:inset 0 1px 0 #ffffff1a,0 -18px 40px -24px #000}
.hw-ico{display:grid;place-items:center;width:clamp(4rem,7vw,5.6rem);aspect-ratio:1;border-radius:50%;background:#b1ff6c1a;color:var(--color-lime)}
.hw-ico svg{width:46%}
.hw-tt b,.svc-num{display:block;color:var(--color-lime);font-size:.95rem;font-weight:700}
.hw-tt h3{margin:.25rem 0 0;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1;font-weight:700;letter-spacing:-.03em}
.hw-step p{margin:0;color:#ffffffc7;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5}
.hw-bar,.svc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;max-width:1100px;margin:2.5rem auto 0;padding:1.5rem 1.75rem;border-radius:1.4rem;background:linear-gradient(110deg,#0c7a1a40,#04170a80);box-shadow:inset 0 0 0 1px #b1ff6c40}
.hw-bar p,.svc-bar p{margin:0;max-width:34rem;font-size:1.1rem;font-weight:600}

/* Entrada con difuminado, como el resto de la web */
.hw-step,.svc-grid article,.svc-step,.svc-qs details{opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.is-in{opacity:1!important;filter:none!important;transform:none!important}

/* Botones */
.svc-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.svc-btn{display:inline-flex;align-items:center;padding:.85rem 1.4rem;border-radius:99px;background:var(--color-lime);color:var(--color-ink);font-weight:600;text-decoration:none;transition:transform .2s ease}
.svc-btn:hover{transform:translateY(-2px)}
.svc-btn.ghost{background:none;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff59}
.svc-btn:focus-visible{outline:2px solid var(--color-lilac,#e894ff);outline-offset:3px}

/* Páginas de servicio */
.izi-svc section{padding:clamp(4.5rem,10vh,7rem) max(1rem,4vw)}
.svc-hero{padding-top:clamp(8.5rem,18vh,11rem)!important;background:var(--color-ink) radial-gradient(70% 90% at 85% 0%,#0c7a1a 0%,#07401a 35%,#04170a 65%,var(--color-ink) 90%)!important}
.svc-crumb{margin:0 0 1.4rem;color:#ffffff99;font-size:.95rem}
.svc-crumb a{color:inherit}
.svc-hero h1{max-width:15em;margin:0;font-size:clamp(2.1rem,6vw,5.2rem);hyphens:auto;overflow-wrap:break-word;line-height:1.02;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.svc-lead{max-width:40rem;margin:1.5rem 0 2rem;color:#ffffffc7;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}
.svc-sub{max-width:38rem;margin:1.2rem 0 0;color:#ffffffb3;font-size:1.1rem;line-height:1.5}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin-top:clamp(2rem,5vh,3rem)}
.svc-grid article{padding:1.6rem;border-radius:1.4rem;background:#2b2b2b;box-shadow:inset 0 1px 0 #ffffff14}
.svc-ico{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1.1rem;border-radius:.9rem;background:#b1ff6c1a;color:var(--color-lime)}
.svc-ico svg{width:58%}
.svc-grid h3{margin:0 0 .5rem;font-size:1.2rem;font-weight:700}
.svc-grid p{margin:0;color:#ffffffb3;line-height:1.5}
.svc-steps h2{margin-bottom:clamp(2rem,5vh,3rem)!important}
.svc-step{grid-template-columns:auto minmax(0,1fr)}
.svc-num{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--color-lime);color:var(--color-ink)}
.svc-step h3{margin:0 0 .45rem;font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.02em}
.svc-step p{margin:0 0 .9rem;color:#ffffffc7;line-height:1.5}
.svc-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.svc-chips span{padding:.3rem .8rem;border-radius:99px;background:#ffffff14;font-size:.875rem}
.svc-faq{background:#1d1d1d!important}
.svc-qs{display:grid;gap:.6rem;max-width:860px;margin-top:2rem}
.svc-qs details{padding:1.1rem 1.4rem;border-radius:1.1rem;background:#2b2b2b}
.svc-qs summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.svc-qs summary::after{content:"+";color:var(--color-lime);font-size:1.4rem;line-height:1;transition:transform .25s ease}
.svc-qs details[open] summary::after{transform:rotate(45deg)}
.svc-qs p{margin:.8rem 0 0;color:#ffffffc7;line-height:1.55}
.svc-end{text-align:center;background:var(--color-ink) radial-gradient(60% 80% at 50% 100%,#0c7a1a 0%,#04170a 55%,var(--color-ink) 85%)!important}
.svc-end .svc-sub{margin-inline:auto}
.svc-end .svc-btns{justify-content:center;margin-top:1.8rem}
.svc-others{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:3rem}
.svc-others b{width:100%;margin-bottom:.4rem;color:#ffffff99;font-weight:600}
.svc-others a{padding:.45rem .95rem;border-radius:99px;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px #ffffff40;transition:box-shadow .2s ease}
.svc-others a:hover{box-shadow:inset 0 0 0 1px var(--color-lime)}

/* Segundo acento: lila para íconos, números y detalles; el lima queda para acciones y resaltados */
.hw-ico,.svc-ico{background:#e894ff1f;color:var(--color-lilac,#e894ff)}
.svc-num{background:var(--color-lilac,#e894ff)}
.svc-chips span{background:#e894ff1a;color:#f6d6ff}
.svc-inc mark,.svc-faq mark{background:var(--color-lilac,#e894ff)}
.hw-bar,.svc-bar{background:linear-gradient(110deg,#e894ff26,#0c7a1a33 60%,#04170a80);box-shadow:inset 0 0 0 1px #e894ff4d}

/* Página Servicios: cada servicio con su imagen, resumen y botones */
.izi-list{background:var(--color-ink);color:#fff;padding:clamp(3rem,7vh,5rem) max(1rem,4vw) clamp(4rem,9vh,6rem)}
.il-wrap{display:grid;gap:clamp(1.5rem,4vh,2.5rem);max-width:1180px;margin:0 auto}
.il-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1rem,2vw,1.4rem);border-radius:1.8rem;background:#2b2b2b;box-shadow:inset 0 1px 0 #ffffff14}
.il-item:nth-child(even) .il-media{order:2}
.il-media{aspect-ratio:4/3;overflow:hidden;border-radius:1.3rem;background:var(--color-ink)}
.il-body{padding:clamp(.5rem,1.5vw,1.2rem)}
.il-body h2{margin:0;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.05;font-weight:700;letter-spacing:-.03em}
.il-lead{margin:1rem 0 1.1rem;color:#ffffffc7;line-height:1.55}
.il-body ul{display:grid;gap:.45rem;margin:0 0 1.6rem;padding:0;list-style:none}
.il-body li{display:flex;gap:.6rem;align-items:baseline;color:#ffffffe6}
.il-body li::before{content:"";width:.5rem;height:.5rem;flex:none;border-radius:50%;background:var(--color-lilac,#e894ff);transform:translateY(-.1rem)}
.izi-list .svc-btn.ghost{border:0;cursor:pointer;font:inherit;font-weight:600}
@media (width<=767px){.il-item{grid-template-columns:1fr}.il-item:nth-child(even) .il-media{order:0}}

/* Nosotros: hero solo texto */
.izi-phero{position:relative;display:grid;place-items:center;min-height:min(88svh,820px);padding:9rem max(1.25rem,5vw) 5rem;text-align:center;color:#fff;background:#04170a url("/assets/hero-bg-fs3_m2sk.webp") center/cover no-repeat}
.ph-wrap{max-width:62rem}
.izi-phero h1{margin:0;font-size:clamp(2.5rem,6.4vw,6rem);line-height:1.02;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.izi-phero mark{background:var(--color-lime);color:var(--color-ink);padding:0 .14em .04em;border-radius:.14em}
.izi-phero p{max-width:34rem;margin:1.6rem auto 0;color:#ffffffc7;font-size:clamp(1.05rem,1.6vw,1.35rem)}

/* Nosotros: isotipo que cambia de color con su fondo cada 0,5 s */
.izi-iso{display:grid;place-items:center;aspect-ratio:4/3;border-radius:2rem;animation:iso-bg 3s steps(1) infinite}
.izi-iso svg{width:38%;animation:iso-fg 3s steps(1) infinite}
@keyframes iso-bg{0%{background:#b1ff6c}16.66%{background:#232323}33.33%{background:#e894ff}50%{background:#ede8e8}66.66%{background:#04170a}83.33%{background:#fff}}
@keyframes iso-fg{0%{color:#232323}16.66%{color:#b1ff6c}33.33%{color:#232323}50%{color:#232323}66.66%{color:#fff}83.33%{color:#232323}}

/* Por qué elegirnos: tres motivos */
.why-list{display:grid;gap:.9rem;max-width:30rem;margin-inline:auto}
.why-it{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.3rem;border-radius:1.3rem;background:#ffffff14;box-shadow:inset 0 1px 0 #ffffff1f;backdrop-filter:blur(6px)}
.why-it span{display:grid;place-items:center;width:3rem;height:3rem;flex:none;border-radius:.9rem;background:#e894ff2e;color:var(--color-lilac,#e894ff)}
.why-it span svg{width:56%}
.why-it b{display:block;font-size:1.1rem}
.why-it p{margin:.3rem 0 0;color:#ffffffbf;font-size:.95rem;line-height:1.45}

/* Por qué elegirnos: marcas */
.izi-brands{background:var(--color-paper);color:var(--color-ink);padding:clamp(3.5rem,8vh,5rem) max(1rem,4vw)}
.br-wrap{max-width:1100px;margin:0 auto;text-align:center}
.br-wrap h2{margin:0 0 2.5rem;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em}
.br-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem)}
.br-row img{height:clamp(2.4rem,4.5vw,3.6rem);width:auto;opacity:.9;transition:opacity .2s ease}
.br-row img:hover{opacity:1}
.br-color{filter:brightness(0)}

@media (prefers-reduced-motion:reduce){.izi-iso,.izi-iso svg{animation:none;background:#b1ff6c;color:#232323}}

/* Tarjeta IA y automatizaciones del Home */
.izi-ai{height:100%;display:grid;place-items:center;background:var(--color-ink) radial-gradient(80% 90% at 80% 0%,#3a1d46 0%,#1a1220 50%,var(--color-ink) 85%)}
.ai-flow{display:grid;gap:.55rem;width:78%}
.ai-n{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-radius:.8rem;background:#ffffff12;color:#ffffffb3;font-size:clamp(.7rem,1vw,.85rem);font-weight:600;animation:ai-on 8s infinite;animation-delay:calc(var(--n)*1.2s)}
.ai-n i{width:.6rem;height:.6rem;flex:none;border-radius:50%;background:#ffffff40;animation:ai-dot 8s infinite;animation-delay:calc(var(--n)*1.2s)}
@keyframes ai-on{0%,4%{background:#ffffff12;color:#ffffffb3}10%,60%{background:#e894ff2e;color:#fff;box-shadow:inset 0 0 0 1px #e894ff80}70%,100%{background:#ffffff12;color:#ffffffb3}}
@keyframes ai-dot{0%,4%{background:#ffffff40}10%,60%{background:var(--color-lilac,#e894ff);box-shadow:0 0 12px #e894ff}70%,100%{background:#ffffff40}}

@media (width<=767px){
  .hw-step{grid-template-columns:auto minmax(0,1fr);top:calc(5.5rem + var(--n)*.8rem)}
  .hw-step p{grid-column:1/-1}
  .svc-step{top:calc(5.5rem + var(--n)*.8rem)}
}
@media (prefers-reduced-motion:reduce){
  .hw-step,.svc-grid article,.svc-step,.svc-qs details{opacity:1;filter:none;transform:none;transition:none}
  .ai-n,.ai-n i{animation:none}
}

/* Carrusel "¿Qué tipo de web te toca?" (Desarrollo web y apps). Las láminas forman una tira continua */
.car-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.car-nav{display:flex;gap:.6rem}
.car-btn{display:grid;place-items:center;width:3.2rem;height:3.2rem;padding:0;border:0;border-radius:50%;background:var(--color-lime);color:var(--color-ink);cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.car-btn svg{width:1.3rem}
.car-btn:hover:not(:disabled){transform:translateY(-2px)}
.car-btn:disabled{opacity:.3;cursor:default}
.car-btn:focus-visible{outline:2px solid var(--color-lilac,#e894ff);outline-offset:3px}
.car-track{display:flex;margin-top:clamp(2rem,5vh,3rem);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;border-radius:1.4rem;scrollbar-width:none;box-shadow:0 30px 60px -30px #000}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--color-lime);outline-offset:4px}
.car-slide{flex:0 0 84%;margin:0;scroll-snap-align:start}
.car-slide img{display:block;width:100%;height:auto}
.car-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem}
.car-end p{margin:0;max-width:34rem;color:#ffffffc7;font-size:1.1rem;line-height:1.5}
@media (width>=640px){.car-slide{flex-basis:48%}}
@media (width>=1024px){.car-slide{flex-basis:31.5%}}
@media (prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}}