:root{
  --bg:#06101f;--bg-2:#08162a;--bg-3:#0d1d36;--panel:#0b1830;--panel-2:#102343;
  --paper:#f4f7fb;--paper-2:#ffffff;--ink:#08111f;--text:#f7f9ff;--muted:#a8b4c8;--muted-dark:#64748b;
  --blue:#1764ff;--blue-2:#42a5ff;--cyan:#63d5ff;--green:#36db9b;--line:rgba(123,155,205,.22);
  --radius:26px;--radius-sm:18px;--shadow:0 28px 70px rgba(0,0,0,.28);--max:1280px;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.55;overflow-x:hidden}body.menu-open{overflow:hidden}
img,svg{max-width:100%}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}.section{position:relative;padding:clamp(76px,8vw,132px) 0}.section-dark{background:radial-gradient(circle at 80% 10%,rgba(23,100,255,.13),transparent 32%),linear-gradient(180deg,var(--bg),#050c18)}.section-light{background:linear-gradient(180deg,#f7f9fd,#edf3fa);color:var(--ink)}
.skip-link{position:fixed;left:12px;top:-50px;z-index:9999;background:#fff;color:#000;padding:10px 14px;border-radius:8px}.skip-link:focus{top:12px}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#77c6ff}.eyebrow:before{content:"";width:30px;height:1px;background:currentColor}.section-light .eyebrow{color:var(--blue)}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(3rem,6.8vw,6.4rem);line-height:.94;letter-spacing:-.065em;max-width:880px;margin-bottom:28px}h2{font-size:clamp(2.25rem,4.6vw,4.9rem);line-height:1;letter-spacing:-.055em;margin-bottom:22px}h3{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.1;letter-spacing:-.03em}.lead{font-size:clamp(1.08rem,1.5vw,1.34rem);color:var(--muted);max-width:760px}.section-light .lead{color:var(--muted-dark)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:800;transition:.22s ease;cursor:pointer}.button-primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 10px 28px rgba(23,100,255,.28)}.button-primary:hover{transform:translateY(-2px);box-shadow:0 15px 38px rgba(23,100,255,.38)}.button-ghost{border-color:var(--line);background:rgba(255,255,255,.025)}.button-ghost:hover{border-color:#58b7ff;background:rgba(80,150,255,.08)}.text-link{display:inline-flex;gap:8px;align-items:center;color:#58b7ff;font-weight:800}.text-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.site-header{position:fixed;inset:0 0 auto;z-index:1000;border-bottom:1px solid transparent;transition:.25s}.site-header.scrolled{background:rgba(4,10,20,.86);backdrop-filter:blur(18px);border-color:var(--line)}.nav-shell{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:144px;height:auto}.brand small{font-size:.66rem;letter-spacing:.18em;color:#5fb8ff;font-weight:900}.desktop-nav{display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:700}.desktop-nav>a,.nav-trigger{color:#dce6f5}.nav-trigger{appearance:none;border:0;background:none;display:flex;align-items:center;gap:7px;padding:0;cursor:pointer}.nav-trigger svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}.nav-group{position:relative}.mega-menu{position:absolute;top:34px;left:50%;transform:translate(-50%,-8px);width:min(720px,86vw);padding:20px;border:1px solid var(--line);background:rgba(7,17,33,.98);box-shadow:var(--shadow);border-radius:22px;opacity:0;visibility:hidden;transition:.2s;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.nav-group.open .mega-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}.mega-menu a{padding:13px 14px;border-radius:12px;color:#c9d4e5}.mega-menu a:hover{background:rgba(23,100,255,.12);color:#fff}.mobile-toggle{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#fff}.mobile-toggle span{display:block;width:18px;height:2px;background:currentColor;margin:4px auto}.mobile-menu{display:none;position:fixed;inset:82px 0 0;background:#050d1a;padding:26px 20px;overflow:auto}.mobile-menu.open{display:block}.mobile-menu a,.mobile-menu summary{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:750}.mobile-menu details a{padding-left:18px;color:var(--muted)}
.hero{min-height:100svh;padding-top:145px;display:flex;align-items:center}.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);align-items:center;gap:56px}.hero .highlight{color:#4a84ff}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-visual{min-height:570px;position:relative}.ecuador-card{position:absolute;inset:20px 0 80px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(145deg,rgba(17,39,77,.82),rgba(5,14,29,.78));overflow:hidden;box-shadow:var(--shadow)}.ecuador-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(74,132,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(74,132,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 95%)}.country-shape{position:absolute;width:72%;height:72%;left:14%;top:8%;filter:drop-shadow(0 0 28px rgba(40,119,255,.48))}.country-shape path{fill:rgba(20,90,235,.22);stroke:#4ea5ff;stroke-width:2}.network-dot{fill:#87dcff}.map-pin{position:absolute;left:54%;top:33%;display:grid;place-items:center}.pin-pulse{width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--blue);box-shadow:0 0 0 0 rgba(64,145,255,.7);animation:pulse 2.2s infinite}.map-pin span{margin-top:10px;font-weight:900;letter-spacing:.08em}.city-silhouette{position:absolute;inset:auto 0 0;height:37%;background:linear-gradient(180deg,transparent,rgba(3,8,18,.96)),url('../img/quito-silhouette.svg') center bottom/cover no-repeat;opacity:.88}.hero-metric{position:absolute;padding:16px 18px;border:1px solid var(--line);background:rgba(7,18,37,.93);border-radius:16px;backdrop-filter:blur(10px)}.hero-metric b{font-size:1.35rem;display:block}.m1{right:-10px;top:36px}.m2{left:-24px;bottom:50px}.hero-proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:26px;padding-top:26px}.proof-item{padding:8px 26px;border-right:1px solid var(--line)}.proof-item:first-child{padding-left:0}.proof-item:last-child{border-right:0}.proof-item strong{display:block;font-size:clamp(1.55rem,2.5vw,2.4rem);line-height:1}.proof-item span{color:var(--muted);font-size:.9rem}
.trust{padding:26px 0;border-block:1px solid var(--line);background:#07111f}.trust-grid{display:flex;gap:30px;align-items:center;justify-content:space-between;overflow:hidden}.trust-grid strong{white-space:nowrap}.logo-rail{display:flex;gap:42px;align-items:center;white-space:nowrap;color:#a9b6c9;font-weight:900;letter-spacing:.04em;animation:marquee 25s linear infinite}.logo-rail span{opacity:.72}
.context-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}.orbit{aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle,rgba(26,96,255,.2),transparent 45%)}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid rgba(82,160,255,.35);border-radius:50%}.orbit:before{inset:13%}.orbit:after{inset:28%}.orbit-core{z-index:2;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:#071833;border:1px solid #3d8fff;box-shadow:0 0 50px rgba(37,110,255,.23)}.orbit-core img{width:105px}.orbit-node{position:absolute;z-index:3;width:106px;height:106px;border-radius:50%;display:grid;place-items:center;text-align:center;background:#07152a;border:1px solid var(--line);font-size:.72rem;font-weight:900}.orbit-node svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.7}.n1{top:0}.n2{right:3%;top:25%}.n3{right:12%;bottom:8%}.n4{left:12%;bottom:8%}.n5{left:3%;top:25%}.context-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:58px}.context-card{padding:26px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025)}.context-card b{color:#4b93ff;font-size:.85rem}.context-card h3{margin:18px 0 10px}.context-card p{color:var(--muted);margin:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:48px}.section-heading>div:first-child{max-width:850px}.section-heading p:not(.eyebrow){max-width:610px;margin-bottom:0}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-card{position:relative;min-height:322px;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(13,31,60,.86),rgba(7,18,35,.86));transition:.25s;overflow:hidden}.service-card:hover{transform:translateY(-5px);border-color:rgba(77,154,255,.7);box-shadow:0 20px 55px rgba(0,0,0,.2)}.service-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(23,100,255,.1);right:-70px;top:-70px}.service-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}.service-num{display:grid;place-items:center;width:42px;height:42px;border:1px solid #1a62ff;border-radius:10px;color:#5aa9ff;font-weight:900}.service-icon{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.service-icon svg{width:26px;height:26px;fill:none;stroke:#3483ff;stroke-width:1.8}.service-card ul{padding-left:18px;color:#b8c3d4;margin:0 0 22px}.service-card li{margin:5px 0}.service-card .text-link{margin-top:auto}

.framework-shell{display:grid;grid-template-columns:320px 1fr;gap:28px}.framework-tabs{display:flex;flex-direction:column}.framework-tab{appearance:none;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;color:#8090a9;padding:20px 12px;font-weight:800;cursor:pointer}.framework-tab.active{color:#fff}.framework-tab b{color:#51aeff;margin-right:14px}.framework-stage{border:1px solid var(--line);border-radius:28px;background:#0b1c37;padding:clamp(28px,5vw,56px);min-height:440px;position:relative;overflow:hidden}.framework-panel{display:none}.framework-panel.active{display:block;animation:fadeIn .3s}.framework-panel h3{font-size:clamp(2rem,4vw,4.3rem);max-width:720px}.framework-panel p{color:var(--muted);font-size:1.1rem;max-width:720px}.framework-badges{display:flex;flex-wrap:wrap;gap:8px}.framework-badges span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:.8rem}.framework-progress{position:absolute;left:0;top:0;height:3px;width:20%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:.25s}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.challenge-card{padding:28px;border:1px solid #d8e1ec;border-radius:20px;background:#fff}.challenge-card span{font-size:.75rem;font-weight:900;color:var(--blue);letter-spacing:.08em}.challenge-card p{color:var(--muted-dark);margin-bottom:0}.work-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.featured-case{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#0a1830}.case-visual{min-height:430px;background:radial-gradient(circle at 45% 40%,#4f9cff,transparent 18%),linear-gradient(135deg,#0f49ac,#0b1d42);display:grid;place-items:center}.case-orb{width:180px;height:180px;border-radius:50%;background:linear-gradient(145deg,#72c0ff,#2262f2);box-shadow:0 0 70px rgba(64,143,255,.45)}.case-copy{padding:38px}.case-copy p{color:var(--muted)}.case-kpis{display:flex;gap:22px;margin:28px 0}.case-kpis strong{font-size:2rem}.side-cases{display:grid;gap:18px}.side-case{padding:28px;border:1px solid var(--line);border-radius:24px;background:#0a1830}.side-case span{color:#62c7ff;font-weight:900;font-size:.75rem}.impact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.impact-card{border:1px solid #d7e0eb;background:#fff;border-radius:22px;padding:28px;min-height:240px}.impact-card.feature{grid-row:span 2;background:#0d2854;color:#fff;border-color:#0d2854}.impact-card b{font-size:clamp(3.2rem,6vw,6.5rem);letter-spacing:-.08em;line-height:.9}.impact-card b span{color:var(--blue);font-size:.4em}.impact-card p{color:var(--muted-dark)}.impact-card.feature p{color:#aec3e3}.ai-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.ai-features{display:grid;gap:18px;margin-top:28px}.ai-feature{display:grid;grid-template-columns:46px 1fr;gap:14px}.ai-feature i{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:#52c6ff}.ai-feature p{margin:2px 0 0;color:var(--muted)}.ai-flow{padding:36px;border:1px solid var(--line);border-radius:28px;background:#0b1a33}.flow-nodes{display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:center;gap:12px}.flow-node{padding:24px 16px;border:1px solid var(--line);border-radius:18px;text-align:center}.flow-node.active{background:linear-gradient(145deg,#2768f0,#2e77ff);border-color:#5fa8ff}.flow-arrow{color:#57c4ff;font-size:1.6rem}.industries{display:flex;flex-wrap:wrap;gap:12px}.industry{padding:14px 18px;background:#fff;border:1px solid #dbe3ef;border-radius:999px;font-weight:800}.dna-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.dna-card{padding:30px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.025)}.dna-card b{font-size:.75rem;color:#5cbaff}.dna-card p{color:var(--muted);margin-bottom:0}.presence-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.presence-map{min-height:430px;border:1px solid #d9e2ee;border-radius:28px;background:linear-gradient(145deg,#e8f1ff,#fff);position:relative;overflow:hidden}.presence-map svg{position:absolute;width:70%;left:15%;top:8%;filter:drop-shadow(0 18px 28px rgba(35,96,210,.2))}.presence-map path{fill:#1a65ff;stroke:#0b4bd3;stroke-width:1.5}.presence-pin{position:absolute;left:53%;top:36%;width:15px;height:15px;background:#fff;border:5px solid #06122a;border-radius:50%;box-shadow:0 0 0 8px rgba(23,100,255,.2)}.presence-meta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.presence-meta span,.presence-meta a{padding:10px 14px;border:1px solid #d8e0ec;border-radius:999px}.partners{padding:34px 0;background:#07111f;border-block:1px solid var(--line)}.partner-rail{display:flex;gap:40px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#9dacbf;font-weight:900;letter-spacing:.06em}.insights-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px}.insight-card{background:#fff;border:1px solid #dbe3ee;border-radius:22px;padding:28px;min-height:250px;display:flex;flex-direction:column}.insight-card.featured{min-height:420px;background:linear-gradient(135deg,#0b2858,#173d82);color:#fff}.insight-card small{font-weight:900;color:var(--blue)}.insight-card.featured small{color:#77d1ff}.insight-card p{color:var(--muted-dark)}.insight-card.featured p{color:#bbcae0}.talks-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}.talk-card{min-height:380px;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 70% 40%,rgba(55,123,255,.3),transparent 30%),#091833;padding:34px;display:flex;flex-direction:column;justify-content:end}.platforms{display:flex;gap:9px;flex-wrap:wrap}.platforms span{border:1px solid var(--line);padding:8px 11px;border-radius:999px;font-size:.78rem}.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.team-card{background:#fff;border:1px solid #dbe3ee;border-radius:20px;padding:24px}.avatar{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#0a1b36;color:#fff;font-weight:900;font-size:1.3rem;margin-bottom:18px}.team-card p{color:var(--muted-dark);margin-bottom:0}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}.faq-list summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:18px}.faq-list summary:after{content:"+";color:#5fbeff}.faq-list details[open] summary:after{content:"–"}.faq-list p{color:var(--muted);padding-right:40px}.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}.contact-card{border:1px solid var(--line);background:#0c1c36;border-radius:28px;padding:clamp(24px,4vw,40px)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:.8rem;font-weight:800}.field input,.field select,.field textarea{width:100%;background:#09172d;border:1px solid var(--line);color:#fff;border-radius:12px;padding:14px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#4a9eff;box-shadow:0 0 0 3px rgba(48,137,255,.12)}.field textarea{min-height:130px;resize:vertical}.consent{display:flex;gap:10px;color:var(--muted);font-size:.82rem}.honeypot{position:absolute!important;left:-9999px!important}.form-status{min-height:24px;margin-top:14px;font-size:.9rem}.form-status.ok{color:#57dca5}.form-status.error{color:#ff8f9f}.newsletter{padding:34px 0;border-top:1px solid var(--line);background:#08152a}.newsletter-shell{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.newsletter-form{display:flex;gap:10px}.newsletter-form input{min-width:min(360px,60vw);background:#071326;border:1px solid var(--line);color:#fff;border-radius:999px;padding:14px 18px}.footer{padding:52px 0 24px;background:#030811;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:30px}.footer h3{font-size:.76rem;color:#70c7ff;letter-spacing:.12em;text-transform:uppercase}.footer a{display:block;color:#9dacbf;padding:4px 0;font-size:.9rem}.footer-brand img{width:150px}.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#77879d;font-size:.82rem}.socials{display:flex;gap:10px}.socials a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;padding:0}.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{opacity:1;transform:none}
@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(64,145,255,0)}100%{box-shadow:0 0 0 0 rgba(64,145,255,0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes marquee{to{transform:translateX(-25%)}}
@media (max-width:1100px){.desktop-nav{display:none}.mobile-toggle{display:block}.hero-grid,.context-layout,.ai-layout,.presence-layout,.talks-layout,.contact-layout,.faq-layout{grid-template-columns:1fr}.hero{padding-top:125px}.hero-visual{min-height:500px}.hero-proof{grid-template-columns:repeat(2,1fr)}.proof-item:nth-child(2){border-right:0}.services-grid{grid-template-columns:repeat(2,1fr)}.dna-grid{grid-template-columns:repeat(2,1fr)}.framework-shell{grid-template-columns:1fr}.framework-tabs{display:grid;grid-template-columns:repeat(5,1fr);overflow:auto}.framework-tab{white-space:nowrap;text-align:center}.challenge-grid{grid-template-columns:repeat(2,1fr)}.work-grid{grid-template-columns:1fr}.impact-grid{grid-template-columns:1fr 1fr}.impact-card.feature{grid-row:auto;grid-column:1/-1}.insights-grid{grid-template-columns:1fr 1fr}.insight-card.featured{grid-column:1/-1}.team-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(3,1fr)}.footer-brand{grid-column:1/-1}.context-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.container{width:min(calc(100% - 28px),var(--max))}.section{padding:72px 0}.nav-shell{height:70px}.mobile-menu{inset:70px 0 0}.brand img{width:128px}h1{font-size:clamp(2.8rem,15vw,4.5rem)}h2{font-size:clamp(2.2rem,11vw,3.4rem)}.hero-grid{gap:28px}.hero-visual{min-height:370px}.ecuador-card{inset:0 0 50px}.hero-metric{display:none}.hero-proof{grid-template-columns:1fr 1fr;margin-top:0}.proof-item{padding:14px 16px!important;border-right:0;border-bottom:1px solid var(--line)}.proof-item:nth-last-child(-n+2){border-bottom:0}.trust-grid{display:block}.trust-grid strong{display:block;margin-bottom:16px}.services-grid,.challenge-grid,.dna-grid,.insights-grid,.team-grid{grid-template-columns:1fr}.context-cards{grid-template-columns:1fr}.orbit-node{width:82px;height:82px;font-size:.62rem}.orbit-core{width:110px;height:110px}.orbit-core img{width:80px}.section-heading{display:block}.section-heading .button{margin-top:18px}.featured-case{grid-template-columns:1fr}.case-visual{min-height:270px}.impact-grid{grid-template-columns:1fr}.impact-card.feature{grid-column:auto}.flow-nodes{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center}.framework-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.newsletter-shell{grid-template-columns:1fr}.newsletter-form{display:grid}.newsletter-form input{min-width:0;width:100%}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom .socials{margin-top:14px}.country-shape{width:82%;left:9%;top:4%}.city-silhouette{height:34%}}
@media (max-width:460px){.hero-proof{grid-template-columns:1fr}.proof-item{border-bottom:1px solid var(--line)!important}.proof-item:last-child{border-bottom:0!important}.footer-grid{grid-template-columns:1fr}.orbit-node{width:70px;height:70px}.orbit-node svg{width:22px;height:22px}.n2{right:0}.n5{left:0}.context-layout{gap:42px}.hero-actions{display:grid}.button{width:100%}.partner-rail{gap:22px}.case-copy{padding:26px}.contact-card{padding:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   04 // SERVICIOS · NUEVO FLUJO POR PROCESOS
   B2W AGENCY ECUADOR · 2026
   PASO 01: CAPACIDADES
   PASO 02: SOLUCIONES
   PASO 03: COTIZACIÓN POR WHATSAPP
============================================================ */

.services-process{
  --srv-bg:#06101f;
  --srv-bg-2:#08182f;
  --srv-panel:#0b1b36;
  --srv-panel-2:#0e2a57;
  --srv-card:#0a1830;
  --srv-text:#f7f9ff;
  --srv-soft:#c0cad9;
  --srv-muted:#8796ad;
  --srv-blue:#1764ff;
  --srv-cyan:#5fd8ff;
  --srv-line:rgba(112,164,226,.20);
  --srv-line-strong:rgba(95,216,255,.48);
  --srv-radius:28px;
  --srv-radius-sm:20px;
  position:relative;
  overflow:hidden;
  padding:clamp(88px,9vw,142px) 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 84% 12%,rgba(23,100,255,.14),transparent 30%),
    linear-gradient(180deg,#06101f 0%,#04101f 100%);
  background-size:48px 48px,48px 48px,auto,auto;
  color:var(--srv-text);
}

.services-process::before{
  content:"";
  position:absolute;
  width:760px;
  height:760px;
  right:-360px;
  top:-320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(43,123,255,.22),rgba(43,123,255,.05) 45%,transparent 72%);
  pointer-events:none;
}

.services-process .container{position:relative;z-index:2}

.services-process-header{
  max-width:940px;
  margin-bottom:clamp(46px,6vw,82px);
}

.services-process-header h2{
  margin:0;
  max-width:980px;
  color:#fff;
  font-size:clamp(3rem,6vw,6.3rem);
  line-height:.92;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.services-process-header h2 span{color:#72819a}

.services-process-header .lead{
  margin-top:28px;
  max-width:760px;
  color:var(--srv-soft);
  line-height:1.72;
}

.services-process-shell{
  position:relative;
  min-height:540px;
}

.services-view{
  width:100%;
  animation:srvViewIn .42s cubic-bezier(.22,1,.36,1) both;
}

.services-view[hidden]{display:none!important}

.services-view.is-active{display:block}

@keyframes srvViewIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.services-view-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);
  gap:clamp(28px,5vw,74px);
  align-items:end;
  margin-bottom:34px;
  padding-bottom:30px;
  border-bottom:1px solid var(--srv-line);
}

.services-step{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  color:var(--srv-cyan);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.services-view-head h3{
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:clamp(2rem,3.6vw,4rem);
  line-height:1;
  letter-spacing:-.045em;
}

.services-view-head>p{
  margin:0;
  color:var(--srv-muted);
  line-height:1.7;
  max-width:520px;
}

/* ============================================================
   PASO 01 · GRID DE CAPACIDADES
============================================================ */

.services-capability-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.services-capability-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:330px;
  width:100%;
  padding:28px;
  overflow:hidden;
  appearance:none;
  border:1px solid var(--srv-line);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(16,36,70,.86),rgba(6,17,34,.96));
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.services-capability-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(circle at 82% 18%,rgba(57,180,255,.24),transparent 36%);
  transition:opacity .28s ease;
  pointer-events:none;
}

.services-capability-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--srv-blue),var(--srv-cyan));
  transition:width .32s cubic-bezier(.22,1,.36,1);
}

.services-capability-card:hover,
.services-capability-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--srv-line-strong);
  box-shadow:0 24px 58px rgba(0,0,0,.25);
  outline:none;
}

.services-capability-card:hover::before,
.services-capability-card:focus-visible::before{opacity:1}

.services-capability-card:hover::after,
.services-capability-card:focus-visible::after{width:100%}

.services-card-top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.services-card-number{
  color:var(--srv-cyan);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.services-card-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,216,255,.26);
  border-radius:16px;
  color:var(--srv-cyan);
  background:rgba(95,216,255,.04);
  transition:transform .28s ease,background .28s ease;
}

.services-card-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}

.services-capability-card:hover .services-card-icon{
  transform:translateY(-2px) rotate(-3deg);
  background:rgba(95,216,255,.09);
}

.services-card-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:38px;
}

.services-card-body strong{
  max-width:420px;
  color:#fff;
  font-size:clamp(1.75rem,2.7vw,2.85rem);
  line-height:.98;
  letter-spacing:-.045em;
}

.services-card-body>span{
  max-width:470px;
  color:var(--srv-muted);
  font-size:.96rem;
  line-height:1.7;
}

.services-card-action{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:28px;
  color:var(--srv-cyan);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.services-card-action b{
  font-size:.95rem;
  transition:transform .25s ease;
}

.services-capability-card:hover .services-card-action b{
  transform:translate(4px,-3px);
}

/* ============================================================
   PASO 02 · VISTA DE SOLUCIONES
============================================================ */

.services-detail{
  width:100%;
}

.services-detail-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid var(--srv-line);
}

.services-back,
.services-back-bottom{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:#c9d4e5;
  font-weight:800;
  cursor:pointer;
  transition:color .22s ease,transform .22s ease;
}

.services-back:hover,
.services-back-bottom:hover{
  color:var(--srv-cyan);
  transform:translateX(-3px);
}

.services-capability-panel[hidden]{display:none!important}

.services-capability-panel{
  animation:srvPanelIn .36s ease both;
}

@keyframes srvPanelIn{
  from{opacity:0;transform:translateX(12px)}
  to{opacity:1;transform:none}
}

.services-capability-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(30px,4.4vw,58px);
  border:1px solid var(--srv-line-strong);
  border-radius:var(--srv-radius);
  background:
    radial-gradient(circle at 84% 20%,rgba(46,143,255,.28),transparent 36%),
    linear-gradient(145deg,#0a1d3e,#0d356f);
  box-shadow:0 26px 68px rgba(0,0,0,.26);
}

.services-capability-hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-190px;
  border-radius:50%;
  border:1px solid rgba(95,216,255,.14);
  box-shadow:
    0 0 0 70px rgba(95,216,255,.025),
    0 0 0 140px rgba(95,216,255,.018);
  pointer-events:none;
}

.services-capability-identity{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
}

.services-capability-identity p{
  margin:0;
  color:var(--srv-cyan);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.12em;
}

.services-capability-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,216,255,.34);
  border-radius:14px;
  color:var(--srv-cyan);
  background:rgba(95,216,255,.06);
}

.services-capability-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}

.services-capability-hero h3{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0;
  color:#fff;
  font-size:clamp(2.4rem,4.8vw,5.3rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.services-capability-hero>p{
  position:relative;
  z-index:2;
  max-width:790px;
  margin:26px 0 0;
  color:#c7d2e3;
  font-size:clamp(.98rem,1.3vw,1.12rem);
  line-height:1.75;
}

.services-solutions-list{
  margin-top:28px;
  border-top:1px solid var(--srv-line);
}

.services-solutions-label{
  margin:0;
  padding:20px 0 14px;
  color:#7890ac;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.15em;
}

.services-solution-item{
  border-bottom:1px solid var(--srv-line);
}

.services-solution-trigger{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 38px;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:72px;
  padding:0;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.services-solution-trigger>span{
  color:var(--srv-cyan);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.1em;
}

.services-solution-trigger strong{
  font-size:clamp(1rem,1.5vw,1.28rem);
  line-height:1.3;
  letter-spacing:-.015em;
}

.services-solution-trigger i{
  justify-self:end;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,216,255,.35);
  border-radius:50%;
  color:var(--srv-cyan);
  font-style:normal;
  font-size:1rem;
  transition:background .22s ease,transform .22s ease;
}

.services-solution-trigger:hover strong{color:var(--srv-cyan)}
.services-solution-trigger:hover i{background:rgba(95,216,255,.08)}

.services-solution-item.is-open{
  background:linear-gradient(90deg,rgba(17,100,255,.08),transparent 72%);
}

.services-solution-item.is-open .services-solution-trigger i{
  transform:rotate(180deg);
}

.services-solution-content{
  max-width:850px;
  padding:0 0 30px 60px;
  animation:srvSolutionIn .28s ease both;
}

.services-solution-content[hidden]{display:none!important}

@keyframes srvSolutionIn{
  from{opacity:0;transform:translateY(-7px)}
  to{opacity:1;transform:none}
}

.services-solution-content>p{
  max-width:760px;
  margin:0;
  color:var(--srv-soft);
  font-size:.95rem;
  line-height:1.75;
}

.services-solution-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.services-solution-actions .button{
  min-height:46px;
  padding-inline:18px;
  font-size:.78rem;
}

.services-detail-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid var(--srv-line);
}

/* ============================================================
   PASO 03 · COTIZACIÓN / WHATSAPP · UX V2
   - Contexto + formulario en desktop
   - Navegación clara
   - Selector de objetivo preparado para mobile
   - Multiselección por chips
   - Barra inferior persistente en móvil
============================================================ */

.services-quote-shell{
  display:block;
  width:100%;
  min-width:0;
}

.services-quote-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px;
  padding-bottom:22px;
  border-bottom:1px solid var(--srv-line);
}

.services-quote-toolbar-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.services-back-emphasis,
.services-change-selection,
.services-edit-selection{
  appearance:none;
  border:0;
  cursor:pointer;
  font:inherit;
}

.services-back-emphasis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(95,216,255,.38);
  border-radius:999px;
  background:rgba(95,216,255,.055);
  color:#fff;
  font-size:.78rem;
  font-weight:850;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.services-back-emphasis:hover,
.services-back-emphasis:focus-visible{
  transform:translateY(-2px);
  border-color:var(--srv-cyan);
  background:rgba(95,216,255,.10);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  outline:none;
}

.services-change-selection{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--srv-line);
  border-radius:999px;
  background:transparent;
  color:#9fb0c5;
  font-size:.75rem;
  font-weight:800;
  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease;
}

.services-change-selection:hover,
.services-change-selection:focus-visible{
  color:var(--srv-cyan);
  border-color:rgba(95,216,255,.42);
  background:rgba(95,216,255,.045);
  transform:translateY(-1px);
  outline:none;
}

.services-quote-toolbar>.services-step{
  margin:0;
  flex:0 0 auto;
}

.services-quote-grid{
  display:grid;
  grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}

.services-quote-context{
  position:sticky;
  top:108px;
  min-width:0;
}

.services-quote-copy{
  position:static;
}

.services-quote-copy .eyebrow{
  margin-bottom:18px;
}

.services-quote-context-title{
  max-width:560px;
  margin:0;
  color:#fff;
  font-size:clamp(2rem,3.3vw,3.8rem);
  line-height:.98;
  letter-spacing:-.05em;
}

.services-quote-copy>p:not(.eyebrow){
  max-width:520px;
  margin:22px 0 0;
  color:var(--srv-muted);
  font-size:.96rem;
  line-height:1.72;
}

.services-quote-selection{
  margin-top:28px;
  padding:22px;
  border:1px solid var(--srv-line);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(23,100,255,.10),transparent 40%),
    rgba(255,255,255,.025);
}

.services-selection-row{
  display:grid;
  gap:6px;
}

.services-selection-row>span{
  color:#7288a5;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.services-selection-row>strong{
  color:#fff;
  font-size:1.03rem;
  line-height:1.4;
}

.services-selection-divider{
  width:100%;
  height:1px;
  margin:17px 0;
  background:var(--srv-line);
}

.services-edit-selection{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:42px;
  margin-top:20px;
  padding:0 14px;
  border:1px solid rgba(95,216,255,.30);
  border-radius:12px;
  background:rgba(95,216,255,.045);
  color:#dcecff;
  font-size:.74rem;
  font-weight:850;
  transition:
    border-color .22s ease,
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.services-edit-selection:hover,
.services-edit-selection:focus-visible{
  color:var(--srv-cyan);
  border-color:var(--srv-cyan);
  background:rgba(95,216,255,.08);
  transform:translateY(-1px);
  outline:none;
}

.services-next-steps{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid var(--srv-line);
}

.services-context-kicker{
  margin:0 0 19px;
  color:#7891af;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.15em;
}

.services-next-steps-list{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.services-next-steps-list li{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:14px;
  padding:0 0 24px;
}

.services-next-steps-list li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:14px;
  top:30px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,rgba(95,216,255,.42),rgba(95,216,255,.06));
}

.services-next-steps-list li>span{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid rgba(95,216,255,.34);
  border-radius:50%;
  background:#07162b;
  color:var(--srv-cyan);
  font-size:.59rem;
  font-weight:900;
}

.services-next-steps-list strong{
  display:block;
  margin:2px 0 5px;
  color:#eef5ff;
  font-size:.9rem;
}

.services-next-steps-list p{
  max-width:390px;
  margin:0;
  color:#7e90a8;
  font-size:.82rem;
  line-height:1.55;
}

.services-quote-signature{
  margin-top:10px;
  padding-top:24px;
  border-top:1px solid var(--srv-line);
}

.services-quote-signature span{
  color:var(--srv-cyan);
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.14em;
}

.services-quote-signature p{
  margin:6px 0 0;
  color:#708198;
  font-size:.76rem;
}

/* ---------- Columna principal ---------- */

.services-quote-main{
  min-width:0;
}

.services-quote-main-header{
  max-width:790px;
  margin-bottom:26px;
}

.services-quote-main-header .eyebrow{
  margin-bottom:18px;
}

.services-quote-main-header h3{
  margin:0;
  max-width:780px;
  color:#fff;
  font-size:clamp(2.75rem,5vw,5.8rem);
  line-height:.92;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.services-quote-main-header>p:not(.eyebrow){
  max-width:720px;
  margin:24px 0 0;
  color:var(--srv-muted);
  font-size:clamp(.94rem,1.15vw,1.04rem);
  line-height:1.75;
}

.services-quote-form{
  min-width:0;
  padding:clamp(24px,3.7vw,40px);
  border:1px solid var(--srv-line-strong);
  border-radius:var(--srv-radius);
  background:
    radial-gradient(circle at 86% 0%,rgba(31,115,255,.15),transparent 31%),
    linear-gradient(145deg,#0a1931,#091c38);
  box-shadow:0 26px 68px rgba(0,0,0,.24);
}

.services-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:17px 14px;
  min-width:0;
}

.services-quote-form .field{
  display:grid;
  gap:7px;
  min-width:0;
}

.services-quote-form .field.full{
  grid-column:1/-1;
}

.services-quote-form label,
.services-needs-field legend{
  font-size:.76rem;
  font-weight:850;
  color:#dce6f4;
}

.services-quote-form input,
.services-quote-form select,
.services-quote-form textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:50px;
  padding:13px 14px;
  border:1px solid var(--srv-line);
  border-radius:12px;
  outline:none;
  background:#07162b;
  color:#fff;
  box-sizing:border-box;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.services-quote-form select{
  overflow:hidden;
  text-overflow:ellipsis;
}

.services-quote-form textarea{
  min-height:138px;
  resize:vertical;
}

.services-quote-form input:focus,
.services-quote-form select:focus,
.services-quote-form textarea:focus{
  border-color:var(--srv-cyan);
  box-shadow:0 0 0 3px rgba(95,216,255,.10);
  background:#081a33;
}

.services-quote-form input::placeholder,
.services-quote-form textarea::placeholder{
  color:#64758d;
}

.services-field-help{
  margin:2px 0 0;
  color:#71849c;
  font-size:.72rem;
  line-height:1.5;
}

/* ---------- Selector de objetivo enriquecido ---------- */

.services-objective-field{
  position:relative;
  min-width:0;
}

.services-objective-picker{
  position:relative;
  min-width:0;
}

.services-objective-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  max-width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid var(--srv-line);
  border-radius:12px;
  background:#07162b;
  color:#fff;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}

.services-objective-trigger>span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.services-objective-trigger:hover,
.services-objective-trigger:focus-visible{
  border-color:var(--srv-cyan);
  box-shadow:0 0 0 3px rgba(95,216,255,.08);
  outline:none;
}

.services-objective-options{
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  left:0;
  right:0;
  width:100%;
  max-width:100%;
  max-height:min(360px,55vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:7px;
  border:1px solid rgba(95,216,255,.28);
  border-radius:14px;
  background:#07162b;
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

.services-objective-options[hidden]{
  display:none!important;
}

.services-objective-options button{
  display:block;
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#e8f0fb;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  font-size:.86rem;
  line-height:1.35;
}

.services-objective-options button:hover,
.services-objective-options button:focus-visible,
.services-objective-options button[aria-selected="true"]{
  background:rgba(44,135,255,.14);
  color:#fff;
  outline:none;
}

/* ---------- Necesidades adicionales ---------- */

.services-needs-field{
  min-width:0;
  margin:2px 0 0;
  padding:0;
  border:0;
}

.services-needs-field legend{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
}

.services-needs-field legend span{
  color:#6f819a;
  font-size:.66rem;
  font-weight:750;
}

.services-needs-chips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:11px;
}

.services-need-chip{
  position:relative;
  display:inline-flex!important;
  min-width:0;
  cursor:pointer;
}

.services-need-chip input{
  position:absolute;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  opacity:0;
  pointer-events:none;
}

.services-need-chip span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  max-width:100%;
  padding:8px 13px;
  border:1px solid rgba(116,160,218,.23);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#9fb0c5;
  font-size:.72rem;
  font-weight:800;
  line-height:1.2;
  white-space:normal;
  text-align:center;
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.services-need-chip:hover span{
  color:#dff6ff;
  border-color:rgba(95,216,255,.40);
  transform:translateY(-1px);
}

.services-need-chip input:focus-visible + span{
  outline:2px solid var(--srv-cyan);
  outline-offset:3px;
}

.services-need-chip input:checked + span{
  border-color:rgba(95,216,255,.72);
  background:linear-gradient(135deg,rgba(23,100,255,.23),rgba(95,216,255,.10));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(95,216,255,.10);
}

.services-need-chip input:checked + span::before{
  content:"✓";
  margin-right:6px;
  color:var(--srv-cyan);
  font-size:.72rem;
}

/* ---------- Consentimiento + CTA ---------- */

.services-quote-form .consent{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr);
  align-items:start;
  gap:10px;
  color:#9badc2;
  font-size:.78rem;
  line-height:1.5;
}

.services-quote-form .consent input{
  appearance:auto;
  width:18px!important;
  height:18px!important;
  min-height:0!important;
  margin:2px 0 0;
}

.services-form-submit{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.services-whatsapp-submit{
  width:100%;
  min-height:54px;
}

.services-form-note{
  max-width:720px;
  margin:0;
  color:#72849c;
  font-size:.71rem;
  line-height:1.5;
}

.services-quote-form .form-status{
  min-height:22px;
  margin:0;
  font-size:.82rem;
}

.services-quote-form .form-status.ok{
  color:#65e4ae;
}

.services-quote-form .form-status.error{
  color:#ff91a0;
}

/* ---------- Barra móvil ---------- */

.services-mobile-actions{
  display:none;
}

/* ============================================================
   RESPONSIVE ESPECÍFICO · COTIZACIÓN UX V2
============================================================ */

@media(max-width:1100px){
  .services-quote-grid{
    grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
    gap:36px;
  }

  .services-quote-context{
    top:96px;
  }

  .services-quote-main-header h3{
    font-size:clamp(2.6rem,6vw,4.9rem);
  }
}

@media(max-width:900px){
  .services-quote-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .services-quote-context{
    position:static;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);
    gap:26px;
    align-items:start;
  }

  .services-quote-selection{
    margin-top:0;
  }

  .services-next-steps,
  .services-quote-signature{
    display:none;
  }

  .services-quote-main-header{
    margin-top:8px;
  }
}

@media(max-width:720px){
  .services-quote-toolbar{
    margin-bottom:26px;
    padding-bottom:18px;
  }

  .services-change-selection{
    display:none;
  }

  .services-quote-grid{
    gap:26px;
  }

  .services-quote-context{
    display:block;
  }

  .services-quote-copy{
    display:none;
  }

  .services-quote-selection{
    margin:0;
    padding:18px;
    border-radius:16px;
  }

  .services-edit-selection{
    min-height:44px;
  }

  .services-quote-main-header h3{
    font-size:clamp(2.45rem,11vw,4rem);
    line-height:.94;
  }

  .services-quote-main-header>p:not(.eyebrow){
    margin-top:18px;
    font-size:.92rem;
  }

  .services-form-grid{
    grid-template-columns:1fr;
  }

  .services-quote-form .field.full{
    grid-column:auto;
  }

  .services-quote-form{
    padding:22px 17px;
    border-radius:20px;
  }

  .services-needs-chips{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .services-need-chip,
  .services-need-chip span{
    width:100%;
  }

  .services-objective-native{
    width:100%;
    max-width:100%;
  }

  .services-objective-options{
    position:fixed;
    z-index:1200;
    left:14px;
    right:14px;
    top:auto;
    bottom:calc(78px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    max-height:min(58vh,430px);
    border-radius:18px;
    padding:8px;
    box-shadow:0 26px 80px rgba(0,0,0,.52);
  }

  .services-objective-options button{
    min-height:50px;
    padding:11px 12px;
    font-size:.9rem;
  }

  .services-mobile-actions{
    position:fixed;
    z-index:1100;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:
      9px
      12px
      max(9px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(109,154,212,.22);
    background:rgba(4,14,29,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 -12px 34px rgba(0,0,0,.20);
  }

  .services-mobile-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
    min-height:48px;
    padding:0 12px;
    border-radius:12px;
    cursor:pointer;
    font:inherit;
    font-size:.76rem;
    font-weight:850;
  }

  .services-mobile-action-back{
    flex:.78;
    border:1px solid rgba(95,216,255,.28);
    background:#07162b;
    color:#d7e6f8;
  }

  .services-mobile-action-change{
    flex:1.22;
    border:1px solid rgba(65,153,255,.64);
    background:linear-gradient(135deg,#145eff,#2d9cff);
    color:#fff;
    box-shadow:0 10px 26px rgba(23,100,255,.22);
  }

  [data-services-view="quote"]:not([hidden]){
    padding-bottom:92px;
  }
}

@media(max-width:430px){
  .services-quote-toolbar-actions{
    width:100%;
  }

  .services-back-emphasis{
    width:100%;
    justify-content:flex-start;
    min-height:43px;
    padding-inline:13px;
  }

  .services-quote-toolbar>.services-step{
    font-size:.58rem;
  }

  .services-quote-main-header h3{
    font-size:clamp(2.25rem,12.6vw,3.35rem);
  }

  .services-needs-chips{
    grid-template-columns:1fr 1fr;
  }

  .services-need-chip span{
    min-height:42px;
    padding:8px 9px;
    font-size:.68rem;
  }

  .services-mobile-action{
    font-size:.7rem;
    padding-inline:9px;
  }

  .services-objective-trigger>span:first-child{
    white-space:normal;
    line-height:1.28;
  }
}

@media(max-width:360px){
  .services-needs-chips{
    grid-template-columns:1fr;
  }

  .services-mobile-actions{
    gap:6px;
    padding-inline:8px;
  }

  .services-mobile-action{
    font-size:.66rem;
    padding-inline:7px;
  }
}

.services-process-bottom{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(34px,7vw,100px);
  align-items:end;
  margin-top:clamp(70px,8vw,120px);
  padding-top:clamp(42px,5vw,66px);
  border-top:1px solid var(--srv-line);
}

.services-process-bottom h3{
  max-width:760px;
  margin:0;
  color:#fff;
  font-size:clamp(2.2rem,4vw,4.8rem);
  line-height:.98;
  letter-spacing:-.05em;
}

.services-process-bottom>div:last-child{
  max-width:520px;
}

.services-process-bottom>div:last-child p{
  margin:0 0 24px;
  color:var(--srv-soft);
  line-height:1.75;
}

/* ============================================================
   RESPONSIVE · SERVICIOS
============================================================ */

@media(max-width:1100px){
  .services-view-head{
    grid-template-columns:1fr;
    align-items:start;
  }

  .services-quote-shell{
    grid-template-columns:1fr;
  }

  .services-quote-copy{
    position:static;
  }

  .services-process-bottom{
    grid-template-columns:1fr;
    align-items:start;
  }
}

@media(max-width:820px){
  .services-process{
    padding:82px 0;
    background-size:36px 36px,36px 36px,auto,auto;
  }

  .services-capability-grid{
    grid-template-columns:1fr;
  }

  .services-capability-card{
    min-height:280px;
  }

  .services-detail-toolbar{
    align-items:flex-start;
  }

  .services-capability-hero{
    padding:30px 24px;
    border-radius:22px;
  }

  .services-solution-content{
    padding-left:44px;
  }

  .services-form-grid{
    grid-template-columns:1fr;
  }

  .services-quote-form .field.full{
    grid-column:auto;
  }
}

@media(max-width:560px){
  .services-process{
    padding:70px 0;
  }

  .services-process-header h2{
    font-size:clamp(2.65rem,13vw,4.25rem);
    line-height:.94;
  }

  .services-view-head{
    gap:18px;
    margin-bottom:26px;
    padding-bottom:24px;
  }

  .services-view-head h3{
    font-size:clamp(1.85rem,9vw,3rem);
  }

  .services-capability-card{
    min-height:250px;
    padding:22px 18px;
    border-radius:19px;
  }

  .services-card-icon{
    width:46px;
    height:46px;
    border-radius:13px;
  }

  .services-card-body{
    margin-top:28px;
  }

  .services-card-body strong{
    font-size:clamp(1.55rem,8.5vw,2.35rem);
  }

  .services-card-body>span{
    font-size:.9rem;
  }

  .services-card-action{
    padding-top:22px;
    font-size:.67rem;
  }

  .services-detail-toolbar{
    gap:14px;
    flex-direction:column-reverse;
  }

  .services-detail-toolbar .services-step{
    margin-bottom:0;
  }

  .services-capability-hero{
    padding:26px 18px;
    border-radius:19px;
  }

  .services-capability-identity{
    gap:9px;
    margin-bottom:20px;
  }

  .services-capability-icon{
    width:42px;
    height:42px;
  }

  .services-capability-hero h3{
    font-size:clamp(2rem,10.6vw,3.45rem);
    line-height:.98;
  }

  .services-capability-hero>p{
    margin-top:20px;
    font-size:.92rem;
  }

  .services-solution-trigger{
    grid-template-columns:28px minmax(0,1fr) 28px;
    gap:9px;
    min-height:66px;
  }

  .services-solution-trigger strong{
    font-size:.96rem;
  }

  .services-solution-trigger i{
    width:27px;
    height:27px;
  }

  .services-solution-content{
    padding:0 0 24px 37px;
  }

  .services-solution-content>p{
    font-size:.9rem;
  }

  .services-solution-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .services-solution-actions .button{
    width:100%;
    min-width:0;
    padding-inline:10px;
    font-size:.7rem;
  }

  .services-detail-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .services-quote-copy h3{
    font-size:clamp(2.2rem,11vw,3.7rem);
  }

  .services-quote-form{
    padding:22px 17px;
    border-radius:20px;
  }

  .services-form-submit{
    display:grid;
  }

  .services-form-submit .button{
    min-width:0;
    width:100%;
  }

  .services-process-bottom{
    margin-top:76px;
  }
}

@media(max-width:390px){
  .services-solution-content{
    padding-left:0;
  }

  .services-solution-actions{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .services-view,
  .services-capability-panel,
  .services-solution-content{
    animation:none!important;
  }

  .services-capability-card,
  .services-card-icon,
  .services-card-action b,
  .services-back,
  .services-back-bottom,
  .services-solution-trigger i{
    transition:none!important;
  }
}





/* ============================================================
   SERVICES · 5 CAPACIDADES · ACTUALIZACIÓN
   01 Estrategia
   02 Creatividad
   03 Adquisición & Conversión
   04 Tecnología, Data & IA
   05 Consultoría

   La quinta capacidad funciona como cierre editorial a ancho
   completo en desktop y se integra al flujo normal en móvil.
============================================================ */

.services-capability-grid-five{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

/* Quinta capacidad · CONSULTORÍA */
.services-capability-grid-five .services-capability-card-wide{
  grid-column:1 / -1;
  min-height:275px;
  padding:30px 32px;
  background:
    radial-gradient(circle at 88% 22%,rgba(95,216,255,.12),transparent 28%),
    linear-gradient(110deg,rgba(11,31,62,.98) 0%,rgba(8,24,48,.98) 58%,rgba(7,20,39,.98) 100%);
  border-color:rgba(95,216,255,.28);
}

.services-capability-grid-five .services-capability-card-wide::before{
  background:
    radial-gradient(circle at 88% 24%,rgba(57,180,255,.20),transparent 32%),
    linear-gradient(90deg,rgba(23,100,255,.05),transparent 60%);
}

.services-capability-grid-five .services-capability-card-wide .services-card-body{
  max-width:900px;
  margin-top:28px;
}

.services-capability-grid-five .services-capability-card-wide .services-card-body strong{
  max-width:760px;
  font-size:clamp(2rem,3.1vw,3.25rem);
}

.services-capability-grid-five .services-capability-card-wide .services-card-body>span{
  max-width:820px;
}

.services-capability-grid-five .services-capability-card-wide .services-card-action{
  margin-top:26px;
}

/* Diferenciación sutil de la capacidad 05 sin romper el sistema */
.services-capability-grid-five .services-capability-card-wide .services-card-number,
.services-capability-grid-five .services-capability-card-wide .services-card-action{
  color:#79e4ff;
}

.services-capability-grid-five .services-capability-card-wide .services-card-icon{
  border-color:rgba(121,228,255,.34);
  background:rgba(121,228,255,.06);
}

/* El encabezado ahora trabaja con cinco capacidades */
.services-process-header .lead{
  max-width:820px;
}

/* Panel Consultoría: tono editorial ligeramente diferenciado */
.services-capability-panel[data-capability-panel="consulting"] .services-capability-hero{
  background:
    radial-gradient(circle at 86% 18%,rgba(95,216,255,.22),transparent 34%),
    linear-gradient(145deg,#0a1b37,#0c315f);
}

.services-capability-panel[data-capability-panel="consulting"] .services-capability-identity p{
  color:#79e4ff;
}

/* ============================================================
   RESPONSIVE · 5 CAPACIDADES
============================================================ */

@media(max-width:980px){
  .services-capability-grid-five .services-capability-card-wide{
    min-height:260px;
  }
}

@media(max-width:820px){
  .services-capability-grid-five{
    grid-template-columns:1fr;
  }

  .services-capability-grid-five .services-capability-card-wide{
    grid-column:auto;
    min-height:280px;
    padding:28px;
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-body{
    max-width:none;
    margin-top:38px;
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-body strong{
    font-size:clamp(1.75rem,2.7vw,2.85rem);
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-action{
    margin-top:auto;
  }
}

@media(max-width:560px){
  .services-capability-grid-five .services-capability-card-wide{
    min-height:250px;
    padding:22px 18px;
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-body{
    margin-top:28px;
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-body strong{
    font-size:clamp(1.55rem,8.5vw,2.35rem);
  }

  .services-capability-grid-five .services-capability-card-wide .services-card-action{
    padding-top:22px;
  }
}

/* ============================================================
   HARDENING RESPONSIVE · SERVICIOS
   Evita desbordamientos horizontales en formularios y selectores.
============================================================ */
.services-process,
.services-process *,
.services-quote-shell,
.services-quote-grid,
.services-quote-main,
.services-quote-form,
.services-form-grid,
.services-objective-field,
.services-objective-picker{
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:720px){
  .services-process{
    overflow-x:clip;
  }
}

/* ============================================================
   B2W TALKS
   COMPONENTE AISLADO
============================================================ */

.b2wt-section {
    position: relative;
    width: 100%;
    overflow: hidden;

    background:
        linear-gradient(rgba(37, 106, 170, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 106, 170, 0.08) 1px, transparent 1px),
        #020c19;

    background-size: 48px 48px;

    padding: 90px 24px 100px;
}


/* ============================================================
   CONTAINER
============================================================ */

.b2wt-container {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
}


/* ============================================================
   GRID PRINCIPAL
============================================================ */

.b2wt-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(480px, 1.08fr);

    gap: clamp(50px, 6vw, 100px);

    align-items: center;

    width: 100%;
}


/* ============================================================
   COLUMNA IZQUIERDA
============================================================ */

.b2wt-intro {
    width: 100%;
    max-width: 610px;

    min-width: 0;
}


/* EYEBROW */

.b2wt-eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 34px;

    color: #49d8ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.18em;
}


.b2wt-eyebrow-line {
    width: 30px;
    height: 1px;

    background: #7ce6ff;
}


/* ============================================================
   TITULAR
============================================================ */

.b2wt-title {
    margin: 0;

    max-width: 600px;

    color: #f4f6ff;

    font-size: clamp(58px, 5.5vw, 92px);
    line-height: 0.93;

    letter-spacing: -0.065em;

    font-weight: 800;

    overflow-wrap: normal;
    word-break: normal;
}


/* ============================================================
   DESCRIPCIÓN
============================================================ */

.b2wt-description {
    max-width: 560px;

    margin: 30px 0 0;

    color: rgba(241, 246, 255, 0.86);

    font-size: 17px;
    line-height: 1.75;

    font-weight: 400;
}


/* ============================================================
   TEMAS
============================================================ */

.b2wt-topics {
    display: flex;
    flex-wrap: wrap;

    gap: 12px 18px;

    margin-top: 26px;
}


.b2wt-topics span {
    position: relative;

    padding-left: 14px;

    color: #dbe9fb;

    font-size: 10px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.04em;
}


.b2wt-topics span::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #4dd8ff;

    box-shadow:
        0 0 0 3px rgba(77, 216, 255, 0.1),
        0 0 10px rgba(77, 216, 255, 0.45);
}


/* ============================================================
   BOTÓN PRINCIPAL
============================================================ */

.b2wt-main-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 36px;

    min-height: 52px;

    padding: 0 22px;

    border: 1px solid rgba(125, 192, 255, 0.32);
    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 750;

    background: rgba(7, 21, 40, 0.5);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.b2wt-main-button svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;
}


.b2wt-main-button:hover {
    transform: translateY(-2px);

    border-color: #45cfff;

    background: rgba(17, 51, 90, 0.6);
}


.b2wt-arrow {
    color: #45d7ff;
}


/* ============================================================
   TARJETA DESTACADA
============================================================ */

.b2wt-featured {
    position: relative;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(70, 166, 255, 0.55);

    border-radius: 28px;

    padding: 24px;

    background:
        radial-gradient(
            circle at 85% 100%,
            rgba(13, 103, 230, 0.28),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #07192f 0%,
            #09254c 52%,
            #073476 100%
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}


/* ============================================================
   HEADER CARD
============================================================ */

.b2wt-featured-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.11em;
}


.b2wt-code {
    color: #56cfff;
}


/* ============================================================
   VIDEO
============================================================ */

.b2wt-video {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 20px;

    background: #020814;

    border: 1px solid rgba(78, 164, 255, 0.27);
}


.b2wt-video iframe {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* ============================================================
   CUERPO TARJETA
============================================================ */

.b2wt-featured-body {
    padding-top: 25px;
}


.b2wt-category {
    display: block;

    margin-bottom: 13px;

    color: #4be0ff;

    font-size: 10px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 0.07em;
}


/* TITULAR */

.b2wt-featured-title {
    max-width: 720px;

    margin: 0;

    color: #fff;

    font-size: clamp(30px, 2.7vw, 43px);
    line-height: 1.08;

    letter-spacing: -0.038em;

    font-weight: 800;

    overflow-wrap: normal;
    word-break: normal;
}


/* DESCRIPCIÓN */

.b2wt-featured-description {
    max-width: 680px;

    margin: 16px 0 0;

    color: rgba(237, 246, 255, 0.83);

    font-size: 14px;
    line-height: 1.7;
}


/* DIVIDER */

.b2wt-divider {
    width: 100%;
    height: 1px;

    margin: 23px 0 17px;

    background: rgba(128, 187, 244, 0.23);
}


/* ============================================================
   FOOTER
============================================================ */

.b2wt-featured-footer {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;
}


.b2wt-platform-area {
    min-width: 0;
}


.b2wt-platform-label {
    display: block;

    margin-bottom: 10px;

    color: rgba(197, 219, 247, 0.68);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.b2wt-platforms {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


/* ============================================================
   BOTONES PLATAFORMAS
============================================================ */

.b2wt-platform {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 38px;

    padding: 0 13px;

    border: 1px solid rgba(117, 186, 255, 0.34);

    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    background: rgba(0, 14, 36, 0.26);

    font-size: 11px;

    font-weight: 700;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.b2wt-platform svg {
    width: 14px;
    height: 14px;

    flex: 0 0 auto;
}


.b2wt-platform:hover {
    transform: translateY(-2px);

    border-color: #42d8ff;

    background: rgba(21, 90, 160, 0.35);
}


/* MÁS EPISODIOS */

.b2wt-more {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 999px;

    border: 1px solid rgba(79, 202, 255, 0.55);

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 750;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.b2wt-more:hover {
    transform: translateY(-2px);

    background: rgba(36, 139, 231, 0.2);
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1280px) {

    .b2wt-section {
        padding-left: 40px;
        padding-right: 40px;
    }


    .b2wt-grid {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(440px, 1.15fr);

        gap: 50px;
    }


    .b2wt-title {
        font-size: clamp(55px, 5.5vw, 76px);
    }


    .b2wt-featured-title {
        font-size: 34px;
    }

}


/* ============================================================
   TABLET / NOTEBOOK PEQUEÑO
============================================================ */

@media (max-width: 1050px) {

    .b2wt-section {
        padding:
            80px
            32px;
    }


    .b2wt-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .b2wt-intro {
        max-width: 720px;
    }


    .b2wt-title {
        max-width: 700px;

        font-size: clamp(60px, 10vw, 86px);
    }


    .b2wt-description {
        max-width: 600px;
    }


    .b2wt-featured {
        max-width: 820px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 768px) {

    .b2wt-section {
        padding:
            68px
            22px
            74px;

        background-size: 36px 36px;
    }


    .b2wt-eyebrow {
        margin-bottom: 28px;
    }


    .b2wt-title {
        font-size: clamp(52px, 13vw, 76px);

        line-height: 0.94;

        letter-spacing: -0.055em;
    }


    .b2wt-description {
        margin-top: 25px;

        font-size: 16px;
    }


    .b2wt-featured {
        padding: 18px;

        border-radius: 22px;
    }


    .b2wt-video {
        border-radius: 16px;
    }


    .b2wt-featured-title {
        font-size: clamp(29px, 7vw, 38px);
    }


    .b2wt-featured-footer {
        align-items: flex-start;

        flex-direction: column;
    }


    .b2wt-more {
        width: 100%;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 520px) {

    .b2wt-section {
        padding:
            55px
            18px
            64px;
    }


    .b2wt-grid {
        gap: 50px;
    }


    .b2wt-eyebrow {
        font-size: 10px;

        margin-bottom: 24px;
    }


    .b2wt-title {
        font-size: clamp(46px, 15vw, 64px);

        line-height: 0.91;

        letter-spacing: -0.055em;
    }


    .b2wt-description {
        font-size: 15px;

        line-height: 1.65;
    }


    .b2wt-topics {
        gap: 12px;
    }


    .b2wt-topics span {
        font-size: 9px;
    }


    .b2wt-main-button {
        width: 100%;

        margin-top: 30px;
    }


    .b2wt-featured {
        padding: 14px;

        border-radius: 20px;
    }


    .b2wt-featured-header {
        margin-bottom: 13px;

        font-size: 8px;
    }


    .b2wt-video {
        border-radius: 13px;
    }


    .b2wt-featured-body {
        padding-top: 21px;
    }


    .b2wt-category {
        font-size: 8px;
    }


    .b2wt-featured-title {
        font-size: clamp(27px, 8.4vw, 34px);

        line-height: 1.07;
    }


    .b2wt-featured-description {
        font-size: 13px;

        line-height: 1.65;
    }


    .b2wt-platforms {
        width: 100%;
    }


    .b2wt-platform {
        flex: 1 1 auto;
    }

}


/* ============================================================
   SERVICES UX V4 · DESKTOP STEPPER + MOBILE APP NAV
   B2W AGENCY ECUADOR · 2026

   Reglas:
   - Desktop/tablet grande: stepper editorial horizontal.
   - Mobile <= 720px: bottom navigation tipo app.
   - La navegación móvil nunca aparece en desktop.
   - La vista inicial de capacidades no muestra bottom nav.
============================================================ */

/* ============================================================
   DESKTOP · STEPPER DE PROCESO
============================================================ */

.services-desktop-stepper{
  display:grid;
  grid-template-columns:auto minmax(28px,1fr) auto minmax(28px,1fr) auto minmax(28px,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 34px;
  padding:18px 20px;
  border:1px solid var(--srv-line);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
    rgba(5,17,34,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.services-desktop-step{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.services-desktop-step-index{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(116,160,218,.26);
  border-radius:50%;
  background:#07162b;
  color:#768aa5;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.06em;
  transition:.22s ease;
}

.services-desktop-step-copy{
  display:grid;
  min-width:0;
  gap:1px;
}

.services-desktop-step-copy strong{
  color:#aebbd0;
  font-size:.76rem;
  line-height:1.15;
  font-weight:850;
  white-space:nowrap;
}

.services-desktop-step-copy small{
  color:#64758d;
  font-size:.61rem;
  line-height:1.25;
  white-space:nowrap;
}

.services-desktop-step-line{
  height:1px;
  width:100%;
  background:rgba(116,160,218,.20);
}

.services-desktop-step.is-complete .services-desktop-step-index{
  border-color:rgba(95,216,255,.32);
  color:var(--srv-cyan);
  background:rgba(95,216,255,.055);
}

.services-desktop-step.is-complete .services-desktop-step-copy strong{
  color:#dce8f7;
}

.services-desktop-step.is-active .services-desktop-step-index{
  border-color:var(--srv-cyan);
  background:linear-gradient(135deg,var(--srv-blue),#318eff);
  color:#fff;
  box-shadow:0 0 0 4px rgba(95,216,255,.08),0 8px 20px rgba(23,100,255,.22);
}

.services-desktop-step.is-active .services-desktop-step-copy strong{
  color:#fff;
}

.services-desktop-step.is-active .services-desktop-step-copy small{
  color:#8fb4d3;
}

.services-desktop-step-line.is-complete{
  background:linear-gradient(90deg,var(--srv-blue),var(--srv-cyan));
  opacity:.72;
}

/* ============================================================
   DESKTOP · MOBILE NAV SIEMPRE OCULTA
============================================================ */

.services-mobile-flow-nav{
  display:none!important;
}

.services-mobile-flow-nav[hidden]{
  display:none!important;
}

/* Controles marcados como desktop permanecen visibles fuera de móvil */
.services-desktop-only{
  display:revert;
}

.services-detail-toolbar.services-desktop-only,
.services-quote-toolbar.services-desktop-only,
.services-review-toolbar.services-desktop-only,
.services-ticket-toolbar.services-desktop-only{
  display:flex;
}

.services-detail-footer.services-desktop-only{
  display:flex;
}

/* ============================================================
   MOBILE APP NAV · SOLO <= 720PX
============================================================ */

@media(max-width:720px){

  /* Oculta navegación editorial de escritorio */
  .services-desktop-only,
  .services-desktop-stepper{
    display:none!important;
  }

  /* Anula cualquier barra móvil antigua */
  .services-mobile-actions{
    display:none!important;
  }

  /*
   * El nav existe en el DOM pero solo se renderiza cuando JS
   * retira [hidden]. Esto evita cualquier aparición en desktop.
   */
  .services-mobile-flow-nav:not([hidden]){
    position:fixed;
    z-index:1180;
    left:12px;
    right:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
    display:block!important;
    width:auto;
    margin:0;
    padding:7px;
    border:1px solid rgba(113,173,236,.24);
    border-radius:20px;
    background:
      linear-gradient(180deg,rgba(11,29,55,.94),rgba(5,17,34,.97));
    box-shadow:
      0 18px 52px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(20px) saturate(130%);
    -webkit-backdrop-filter:blur(20px) saturate(130%);
  }

  .services-mobile-flow-state:not([hidden]){
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:stretch;
    gap:4px;
    width:100%;
  }

  .services-mobile-nav-item{
    position:relative;
    appearance:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    min-height:54px;
    padding:6px 5px;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#7f90a7;
    font:inherit;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:
      color .2s ease,
      background .2s ease,
      transform .2s ease;
  }

  .services-mobile-nav-item:active{
    transform:scale(.97);
  }

  .services-mobile-nav-icon{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    color:#9cafc6;
    font-size:1.02rem;
    font-weight:800;
    line-height:1;
  }

  .services-mobile-nav-label{
    display:block;
    max-width:100%;
    overflow:hidden;
    color:inherit;
    font-size:.61rem;
    font-weight:780;
    line-height:1.12;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .services-mobile-nav-progress{
    display:grid;
    place-items:center;
    min-height:25px;
    color:#91a3ba;
    font-size:.66rem;
    font-weight:900;
    line-height:1;
    letter-spacing:.07em;
  }

  /* Estado central del proceso */
  .services-mobile-nav-current{
    cursor:default;
    background:rgba(255,255,255,.025);
    color:#b6c5d7;
  }

  .services-mobile-nav-current::before{
    content:"";
    position:absolute;
    top:-7px;
    left:26%;
    right:26%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--srv-blue),var(--srv-cyan));
    box-shadow:0 0 12px rgba(95,216,255,.30);
  }

  .services-mobile-nav-current .services-mobile-nav-progress{
    color:var(--srv-cyan);
  }

  .services-mobile-nav-current.is-complete .services-mobile-nav-progress{
    color:#67e3ad;
  }

  .services-mobile-nav-current.is-complete::before{
    background:#67e3ad;
    box-shadow:0 0 12px rgba(103,227,173,.24);
  }

  /* Acción derecha */
  .services-mobile-nav-action{
    color:#fff;
  }

  .services-mobile-nav-action .services-mobile-nav-icon{
    color:var(--srv-cyan);
  }

  .services-mobile-nav-action::after{
    content:"";
    position:absolute;
    inset:4px;
    z-index:-1;
    border:1px solid rgba(95,216,255,.13);
    border-radius:12px;
    background:
      linear-gradient(135deg,rgba(23,100,255,.12),rgba(95,216,255,.045));
    opacity:0;
    transition:opacity .2s ease;
  }

  .services-mobile-nav-action:active::after{
    opacity:1;
  }

  /* Acción izquierda */
  .services-mobile-flow-state > .services-mobile-nav-item:first-child{
    color:#9bacbf;
  }

  .services-mobile-flow-state > .services-mobile-nav-item:first-child .services-mobile-nav-icon{
    color:#d8e4f2;
  }

  /* Reserva espacio para que la barra jamás tape contenido */
  [data-services-view="solutions"]:not([hidden]),
  [data-services-view="quote"]:not([hidden]),
  [data-services-view="review"]:not([hidden]),
  [data-services-view="ticket"]:not([hidden]){
    padding-bottom:102px;
  }

  /*
   * El selector de objetivo abre por encima de la barra tipo app.
   */
  .services-objective-options{
    bottom:calc(94px + env(safe-area-inset-bottom));
  }

  /* El cuerpo queda más limpio porque el nav fijo reemplaza controles duplicados */
  [data-services-view="solutions"] .services-detail-footer,
  [data-services-view="solutions"] .services-detail-toolbar,
  [data-services-view="quote"] .services-quote-toolbar,
  [data-services-view="review"] .services-review-toolbar,
  [data-services-view="ticket"] .services-ticket-toolbar{
    display:none!important;
  }
}

/* ============================================================
   MOBILE · REFINAMIENTO DE ESPACIADO
============================================================ */

@media(max-width:560px){

  .services-process-shell{
    min-height:0;
  }

  .services-capability-hero{
    margin-top:0;
  }

  .services-solutions-list{
    margin-top:22px;
  }

  .services-review-layout,
  .services-quote-grid{
    gap:24px;
  }

  .services-final-ticket{
    margin-bottom:4px;
  }

  .services-mobile-flow-nav:not([hidden]){
    left:10px;
    right:10px;
    border-radius:18px;
  }

  .services-mobile-nav-item{
    min-height:52px;
    padding-inline:3px;
  }

  .services-mobile-nav-label{
    font-size:.59rem;
  }

  .services-mobile-nav-progress{
    font-size:.63rem;
  }
}

@media(max-width:380px){

  .services-mobile-flow-nav:not([hidden]){
    left:8px;
    right:8px;
    padding:6px;
    border-radius:17px;
  }

  .services-mobile-nav-item{
    min-height:50px;
    gap:2px;
  }

  .services-mobile-nav-icon{
    width:22px;
    height:22px;
    font-size:.92rem;
  }

  .services-mobile-nav-label{
    font-size:.55rem;
  }

  .services-mobile-nav-progress{
    min-height:22px;
    font-size:.58rem;
  }
}

/* ============================================================
   TABLET / DESKTOP STEPPER RESPONSIVE
============================================================ */

@media(min-width:721px) and (max-width:980px){

  .services-desktop-stepper{
    gap:8px;
    padding:16px;
  }

  .services-desktop-step{
    gap:7px;
  }

  .services-desktop-step-index{
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .services-desktop-step-copy small{
    display:none;
  }

  .services-desktop-step-copy strong{
    font-size:.7rem;
  }
}

/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

  .services-mobile-nav-item,
  .services-desktop-step-index{
    transition:none!important;
  }
}


/* ============================================================
   SERVICES UX V5 · TICKET BEFORE WHATSAPP
   B2W AGENCY ECUADOR · 2026

   Ajustes principales:
   - Ticket se genera ANTES de abrir WhatsApp.
   - Estados visuales antes/después de WhatsApp.
   - Dropdown de objetivo móvil corregido.
   - Bottom navigation móvil sigue siendo exclusiva de <= 720px.
============================================================ */

/* ============================================================
   REVIEW · CONFIRMACIÓN
============================================================ */

.services-review-layout{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(34px,6vw,78px);
  align-items:start;
}

.services-review-header{
  position:sticky;
  top:108px;
}

.services-review-header h3{
  max-width:560px;
  margin:0;
  color:#fff;
  font-size:clamp(2.25rem,4vw,4.7rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.services-review-header>p:not(.eyebrow){
  max-width:520px;
  margin:22px 0 0;
  color:var(--srv-muted);
  line-height:1.72;
}

.services-review-ticket{
  overflow:hidden;
  border:1px solid var(--srv-line-strong);
  border-radius:var(--srv-radius);
  background:
    radial-gradient(circle at 88% 0%,rgba(31,115,255,.14),transparent 30%),
    linear-gradient(145deg,#0a1931,#091c38);
  box-shadow:0 26px 68px rgba(0,0,0,.24);
}

.services-review-ticket-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 26px;
  border-bottom:1px solid var(--srv-line);
  background:rgba(255,255,255,.02);
}

.services-review-ticket-head>div{
  display:grid;
  gap:4px;
}

.services-review-ticket-head>div>span{
  color:var(--srv-cyan);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.14em;
}

.services-review-ticket-head>div>strong{
  color:#fff;
  font-size:1rem;
}

.services-review-status{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid rgba(255,190,92,.28);
  border-radius:999px;
  background:rgba(255,190,92,.06);
  color:#ffc76f;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
  white-space:nowrap;
}

.services-review-data{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
}

.services-review-data>div{
  min-width:0;
  padding:20px 24px;
  border-bottom:1px solid var(--srv-line);
}

.services-review-data>div:nth-child(odd):not(.full){
  border-right:1px solid var(--srv-line);
}

.services-review-data>div.full{
  grid-column:1/-1;
}

.services-review-data dt{
  margin:0 0 7px;
  color:#71859f;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.services-review-data dd{
  margin:0;
  color:#eef5ff;
  font-size:.92rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.services-review-notice{
  margin:24px;
  padding:18px 20px;
  border:1px solid rgba(95,216,255,.18);
  border-radius:16px;
  background:rgba(95,216,255,.035);
}

.services-review-notice strong{
  display:block;
  margin-bottom:6px;
  color:#dff6ff;
  font-size:.8rem;
}

.services-review-notice p{
  margin:0;
  color:#8fa2ba;
  font-size:.8rem;
  line-height:1.6;
}

.services-review-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  padding:0 24px 24px;
}

.services-review-ticket>.form-status{
  margin:0;
  padding:0 24px 24px;
}

/* ============================================================
   TICKET · GENERADO ANTES DE WHATSAPP
============================================================ */

.services-ticket-shell{
  max-width:1040px;
  margin:0 auto;
}

.services-final-ticket{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(95,216,255,.34);
  border-radius:30px;
  background:
    radial-gradient(circle at 86% 8%,rgba(49,144,255,.18),transparent 34%),
    linear-gradient(145deg,#09182f,#0a2142);
  box-shadow:
    0 34px 84px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.services-final-ticket::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-190px;
  top:-180px;
  border-radius:50%;
  border:1px solid rgba(95,216,255,.10);
  box-shadow:
    0 0 0 64px rgba(95,216,255,.02),
    0 0 0 128px rgba(95,216,255,.012);
  pointer-events:none;
}

.services-final-ticket-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:clamp(26px,4vw,42px);
  border-bottom:1px solid var(--srv-line);
}

.services-ticket-check{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,216,255,.42);
  border-radius:50%;
  background:linear-gradient(135deg,rgba(23,100,255,.28),rgba(95,216,255,.10));
  color:var(--srv-cyan);
  font-size:1.25rem;
  font-weight:900;
  box-shadow:0 0 0 6px rgba(95,216,255,.035);
}

.services-final-ticket-head .eyebrow{
  margin-bottom:12px;
}

.services-final-ticket-head h3{
  max-width:720px;
  margin:0;
  color:#fff;
  font-size:clamp(2.2rem,4.3vw,4.8rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.services-final-ticket-head p:last-child{
  max-width:690px;
  margin:18px 0 0;
  color:#93a6bd;
  line-height:1.7;
}

.services-ticket-reference{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  margin:26px clamp(24px,4vw,42px) 0;
  padding:22px 24px;
  border:1px solid rgba(95,216,255,.30);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(23,100,255,.10),rgba(95,216,255,.035));
}

.services-ticket-reference span{
  color:#7890ac;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.14em;
}

.services-ticket-reference strong{
  color:#fff;
  font-size:clamp(1.5rem,3.2vw,2.6rem);
  line-height:1;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}

.services-ticket-data{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:26px clamp(24px,4vw,42px) 0;
  border-top:1px solid var(--srv-line);
  border-left:1px solid var(--srv-line);
}

.services-ticket-data>div{
  min-width:0;
  padding:18px 20px;
  border-right:1px solid var(--srv-line);
  border-bottom:1px solid var(--srv-line);
}

.services-ticket-data>div.full{
  grid-column:1/-1;
}

.services-ticket-data dt{
  margin:0 0 6px;
  color:#71859f;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.services-ticket-data dd{
  margin:0;
  color:#edf5ff;
  font-size:.9rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.services-ticket-security-note{
  position:relative;
  z-index:2;
  margin:24px clamp(24px,4vw,42px) 0;
  padding:18px 20px;
  border:1px solid rgba(103,227,173,.18);
  border-radius:16px;
  background:rgba(103,227,173,.035);
}

.services-ticket-security-note strong{
  display:block;
  margin-bottom:6px;
  color:#bff4da;
  font-size:.78rem;
}

.services-ticket-security-note p{
  margin:0;
  color:#8298af;
  font-size:.79rem;
  line-height:1.62;
}

.services-ticket-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  padding:26px clamp(24px,4vw,42px) 0;
}

.services-ticket-actions[hidden]{
  display:none!important;
}

.services-ticket-state-note{
  position:relative;
  z-index:2;
  margin:16px clamp(24px,4vw,42px) 0;
  color:#72869e;
  font-size:.72rem;
  line-height:1.5;
}

.services-final-ticket>.form-status{
  position:relative;
  z-index:2;
  margin:0;
  padding:10px clamp(24px,4vw,42px) 30px;
}

/* Estado visual opcional aplicado desde JS después de abrir WhatsApp */
.services-final-ticket.is-whatsapp-opened .services-ticket-check{
  border-color:rgba(103,227,173,.40);
  background:rgba(103,227,173,.08);
  color:#67e3ad;
}

.services-final-ticket.is-whatsapp-opened .services-ticket-reference{
  border-color:rgba(103,227,173,.24);
}

/* ============================================================
   DROPDOWN OBJETIVO · CORRECCIÓN DEFINITIVA EN MOBILE
============================================================ */

.services-objective-native[hidden]{
  display:none!important;
}

@media(max-width:720px){

  /*
   * Antes estaba position:fixed y por eso parecía un panel
   * separado del campo. Ahora queda anclado al selector.
   */
  .services-objective-options{
    position:absolute!important;
    z-index:1220;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    max-height:min(340px,calc(100dvh - 250px))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    border-radius:15px;
    padding:7px;
    background:#07162b;
    box-shadow:0 20px 52px rgba(0,0,0,.46);
    scrollbar-width:thin;
  }

  .services-objective-options button{
    min-height:46px;
    padding:10px 11px;
    font-size:.86rem;
  }

  /*
   * Garantiza que el dropdown pueda verse completo sin que
   * la barra inferior lo cubra.
   */
  .services-objective-field{
    z-index:50;
  }

  .services-objective-picker{
    z-index:51;
  }

  /* Ticket y review con una sola columna en móvil */
  .services-review-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .services-review-header{
    position:static;
  }

  .services-review-data{
    grid-template-columns:1fr;
  }

  .services-review-data>div:nth-child(odd):not(.full){
    border-right:0;
  }

  .services-review-data>div.full{
    grid-column:auto;
  }

  .services-review-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .services-review-actions .button{
    width:100%;
  }

  .services-final-ticket{
    border-radius:22px;
  }

  .services-final-ticket-head{
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    padding:24px 18px;
  }

  .services-ticket-check{
    width:44px;
    height:44px;
    font-size:1rem;
  }

  .services-final-ticket-head h3{
    font-size:clamp(2.15rem,10.5vw,3.5rem);
  }

  .services-ticket-reference,
  .services-ticket-data,
  .services-ticket-security-note{
    margin-left:18px;
    margin-right:18px;
  }

  .services-ticket-data{
    grid-template-columns:1fr;
  }

  .services-ticket-data>div.full{
    grid-column:auto;
  }

  .services-ticket-actions{
    display:grid;
    grid-template-columns:1fr;
    padding-left:18px;
    padding-right:18px;
  }

  .services-ticket-actions .button{
    width:100%;
  }

  .services-ticket-state-note{
    margin-left:18px;
    margin-right:18px;
  }

  .services-final-ticket>.form-status{
    padding-left:18px;
    padding-right:18px;
  }

  /*
   * Ambos estados móviles de ticket dependen de JS.
   * CSS no fuerza ninguno visible.
   */
  [data-ticket-mobile-before-send][hidden],
  [data-ticket-mobile-after-send][hidden]{
    display:none!important;
  }
}

/* ============================================================
   MOBILE · TICKET / REVIEW REFINAMIENTO
============================================================ */

@media(max-width:430px){

  .services-review-ticket-head{
    flex-direction:column;
    padding:20px 18px;
  }

  .services-review-status{
    width:max-content;
  }

  .services-review-data>div{
    padding:17px 18px;
  }

  .services-review-notice{
    margin:20px 18px;
  }

  .services-review-actions{
    padding:0 18px 20px;
  }

  .services-ticket-reference{
    padding:18px;
  }

  .services-ticket-reference strong{
    font-size:clamp(1.3rem,7vw,2rem);
  }

  .services-ticket-data>div{
    padding:16px 17px;
  }

  .services-ticket-security-note{
    padding:16px 17px;
  }
}

/* ============================================================
   ACCESSIBILITY
============================================================ */

.services-ticket-actions .button:focus-visible,
.services-review-actions .button:focus-visible,
.services-mobile-nav-item:focus-visible{
  outline:2px solid var(--srv-cyan);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  .services-final-ticket,
  .services-ticket-check{
    transition:none!important;
  }
}

/* ============================================================
   B2W AGENCY ECUADOR · SERVICES PRODUCTION V6
   DRAWER + MODAL · 2026
   Compatible con:
   index-b2w-production-drawer-modal-v6.html

   ARQUITECTURA UX
   01 Capacidades
   02 Drawer de capacidad / soluciones
   03 Modal: Datos → Revisión → Ticket
   04 WhatsApp externo
   05 Limpieza / Gracias

   PALETA OFICIAL B2W
   Primarios:
   #FFFFFF · #000000 · #2056F8
   Secundarios:
   #0E1A47 · #1B358E · #2547BE · #2A4FD6 · #4268EF
   #5679F0 · #8099F3 · #A9BAF6 · #D3DCFA
============================================================ */

.services-production{
  --srv-brand:#2056F8;
  --srv-brand-2:#2A4FD6;
  --srv-brand-3:#4268EF;
  --srv-brand-soft:#5679F0;
  --srv-navy:#0E1A47;
  --srv-navy-2:#1B358E;
  --srv-indigo:#2547BE;
  --srv-lavender:#8099F3;
  --srv-pale:#A9BAF6;
  --srv-pale-2:#D3DCFA;
  --srv-white:#FFFFFF;
  --srv-black:#000000;

  --srv-bg:#050B18;
  --srv-bg-2:#081229;
  --srv-bg-3:#0A1732;
  --srv-panel:#0B1933;
  --srv-panel-2:#0D2145;

  --srv-text:#F7F9FF;
  --srv-soft:#D3DCFA;
  --srv-muted:#8E9BB3;

  --srv-blue:var(--srv-brand);
  --srv-cyan:var(--srv-pale);
  --srv-line:rgba(128,153,243,.20);
  --srv-line-strong:rgba(86,121,240,.44);

  isolation:isolate;
}

/* ------------------------------------------------------------
   CAPACIDADES · ESCALA EDITORIAL CONTROLADA
------------------------------------------------------------ */

.services-production .services-process-header{
  max-width:900px;
  margin-bottom:clamp(40px,5vw,64px);
}

.services-production .services-process-header h2{
  max-width:900px;
  font-size:clamp(3rem,5.15vw,5.65rem);
  line-height:.94;
  letter-spacing:-.055em;
}

.services-production .services-process-header h2 span{
  color:#8795AC;
}

.services-production .services-process-header .lead{
  max-width:820px;
  margin-top:24px;
  color:#A7B3C5;
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.72;
}

.services-production .services-capabilities-stage{
  position:relative;
}

.services-production .services-view-head{
  margin-bottom:30px;
  padding-bottom:26px;
}

.services-production .services-view-head h3{
  font-size:clamp(1.9rem,3vw,3.2rem);
  line-height:1.03;
}

.services-production .services-capability-card{
  min-height:300px;
  border-color:rgba(128,153,243,.18);
  background:
    radial-gradient(circle at 86% 13%,rgba(32,86,248,.10),transparent 32%),
    linear-gradient(145deg,rgba(14,26,71,.64),rgba(5,13,30,.97));
}

.services-production .services-capability-card:hover,
.services-production .services-capability-card:focus-visible{
  border-color:rgba(86,121,240,.58);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.services-production .services-capability-card::after{
  background:linear-gradient(90deg,#2056F8,#5679F0);
}

.services-production .services-card-number,
.services-production .services-card-action{
  color:#A9BAF6;
}

.services-production .services-card-icon{
  color:#A9BAF6;
  border-color:rgba(128,153,243,.28);
  background:rgba(32,86,248,.06);
}

.services-production .services-card-body{
  margin-top:32px;
}

.services-production .services-card-body strong{
  font-size:clamp(1.6rem,2.25vw,2.45rem);
}

.services-production .services-card-body>span{
  color:#9EACC1;
}

.services-production .services-capability-grid-five .services-capability-card-wide{
  min-height:250px;
  background:
    radial-gradient(circle at 90% 18%,rgba(66,104,239,.12),transparent 30%),
    linear-gradient(110deg,rgba(14,26,71,.76),rgba(7,18,42,.98));
  border-color:rgba(128,153,243,.24);
}

.services-production .services-capability-grid-five .services-capability-card-wide .services-card-body{
  margin-top:25px;
}

/* ------------------------------------------------------------
   BLOQUE INFERIOR DE CAPACIDADES
------------------------------------------------------------ */

.services-production .services-process-bottom{
  margin-top:clamp(58px,7vw,94px);
  padding-top:clamp(34px,4vw,50px);
}

.services-production .services-process-bottom h3{
  font-size:clamp(2rem,3.3vw,3.75rem);
}

/* ============================================================
   CAPABILITY DRAWER
============================================================ */

.services-drawer-layer,
.services-request-layer,
.services-discard-layer{
  position:fixed;
  inset:0;
}

.services-drawer-layer{
  z-index:1500;
  display:grid;
  grid-template-columns:1fr auto;
}

.services-drawer-layer[hidden],
.services-request-layer[hidden],
.services-discard-layer[hidden]{
  display:none!important;
}

.services-drawer-backdrop,
.services-request-backdrop{
  position:absolute;
  inset:0;
  appearance:none;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(0,0,0,.62);
  cursor:pointer;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.services-capability-drawer{
  position:relative;
  z-index:2;
  justify-self:end;
  width:min(48vw,720px);
  height:100dvh;
  min-width:520px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border-left:1px solid rgba(128,153,243,.26);
  background:
    radial-gradient(circle at 85% 5%,rgba(32,86,248,.14),transparent 27%),
    linear-gradient(180deg,#071126 0%,#050C1B 100%);
  box-shadow:-30px 0 90px rgba(0,0,0,.42);
  animation:b2wDrawerIn .32s cubic-bezier(.22,1,.36,1) both;
}

@keyframes b2wDrawerIn{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

.services-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:84px;
  padding:16px clamp(20px,3vw,32px);
  border-bottom:1px solid rgba(128,153,243,.18);
  background:rgba(5,12,27,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.services-drawer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.services-drawer-brand>span{
  color:#FFFFFF;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.11em;
  white-space:nowrap;
}

.services-drawer-brand>small{
  color:#8099F3;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.1em;
}

.services-drawer-close{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 13px;
  border:1px solid rgba(128,153,243,.22);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#D3DCFA;
  cursor:pointer;
  transition:.2s ease;
}

.services-drawer-close:hover,
.services-drawer-close:focus-visible{
  color:#FFFFFF;
  border-color:#5679F0;
  background:rgba(32,86,248,.08);
  outline:none;
}

.services-drawer-close>span:first-child{
  font-size:1.15rem;
  line-height:1;
}

.services-drawer-close-label{
  font-size:.7rem;
  font-weight:800;
}

.services-drawer-scroll{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(24px,4vw,42px);
  scrollbar-width:thin;
  scrollbar-color:#2547BE transparent;
}

.services-drawer-panel[hidden]{
  display:none!important;
}

.services-drawer-panel{
  animation:b2wDrawerContentIn .26s ease both;
}

@keyframes b2wDrawerContentIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.services-drawer-intro{
  padding-bottom:28px;
  border-bottom:1px solid rgba(128,153,243,.16);
}

.services-drawer-intro .services-capability-identity{
  margin-bottom:20px;
}

.services-drawer-intro h3{
  max-width:600px;
  margin:0;
  color:#FFFFFF;
  font-size:clamp(2.1rem,3.4vw,3.65rem);
  line-height:.96;
  letter-spacing:-.05em;
  text-wrap:balance;
}

.services-drawer-intro>p{
  max-width:610px;
  margin:20px 0 0;
  color:#9EACC1;
  font-size:.96rem;
  line-height:1.72;
}

.services-drawer-solutions{
  margin-top:24px;
}

.services-production .services-drawer-solutions .services-solutions-label{
  color:#8099F3;
}

.services-production .services-drawer-solutions .services-solution-item{
  border-color:rgba(128,153,243,.16);
}

.services-production .services-drawer-solutions .services-solution-item.is-open{
  background:linear-gradient(90deg,rgba(32,86,248,.10),transparent 78%);
}

.services-production .services-drawer-solutions .services-solution-trigger>span{
  color:#8099F3;
}

.services-production .services-drawer-solutions .services-solution-trigger i{
  color:#A9BAF6;
  border-color:rgba(128,153,243,.32);
}

.services-production .services-drawer-solutions .services-solution-trigger:hover strong{
  color:#A9BAF6;
}

.services-production .services-drawer-solutions .services-solution-content{
  max-width:none;
  padding-right:10px;
}

.services-production .services-drawer-solutions .services-solution-content>p{
  color:#AAB6C8;
}

.services-production .services-drawer-solutions .services-solution-actions{
  align-items:center;
}

/* ============================================================
   REQUEST MODAL
============================================================ */

.services-request-layer{
  z-index:1600;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,34px);
}

.services-request-backdrop{
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.services-request-dialog{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100vw - 48px));
  max-height:min(920px,calc(100dvh - 48px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(128,153,243,.28);
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 0%,rgba(32,86,248,.12),transparent 28%),
    linear-gradient(180deg,#081229,#050C1B);
  box-shadow:0 40px 120px rgba(0,0,0,.56);
  animation:b2wModalIn .28s cubic-bezier(.22,1,.36,1) both;
}

@keyframes b2wModalIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

.services-request-header{
  position:relative;
  z-index:5;
  padding:18px clamp(20px,3vw,34px) 0;
  border-bottom:1px solid rgba(128,153,243,.16);
  background:rgba(6,15,34,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.services-request-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.services-request-brand{
  display:block;
  margin-bottom:5px;
  color:#8099F3;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.13em;
}

.services-request-heading h3{
  margin:0;
  color:#FFFFFF;
  font-size:1.2rem;
  letter-spacing:-.025em;
}

.services-request-close{
  appearance:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  padding:0;
  border:1px solid rgba(128,153,243,.22);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#D3DCFA;
  cursor:pointer;
  font-size:1.25rem;
  transition:.2s ease;
}

.services-request-close:hover,
.services-request-close:focus-visible{
  color:#FFFFFF;
  border-color:#5679F0;
  background:rgba(32,86,248,.10);
  outline:none;
}

.services-request-selection{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
  color:#94A3B8;
  font-size:.76rem;
}

.services-request-selection span{
  color:#A9BAF6;
  font-weight:800;
}

.services-request-selection strong{
  color:#FFFFFF;
}

/* ------------------------------------------------------------
   DESKTOP STEPPER · 3 PASOS
------------------------------------------------------------ */

.services-request-stepper{
  display:grid;
  grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto;
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:20px;
  padding:14px 0 18px;
}

.services-request-step{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.services-request-step>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(128,153,243,.23);
  border-radius:50%;
  background:#07152E;
  color:#73819A;
  font-size:.62rem;
  font-weight:900;
}

.services-request-step>div{
  display:grid;
  gap:1px;
}

.services-request-step strong{
  color:#A9B5C7;
  font-size:.75rem;
}

.services-request-step small{
  color:#66758E;
  font-size:.6rem;
}

.services-request-step-line{
  height:1px;
  background:rgba(128,153,243,.18);
}

.services-request-step.is-complete>span{
  border-color:rgba(86,121,240,.46);
  color:#A9BAF6;
  background:rgba(32,86,248,.08);
}

.services-request-step.is-complete strong{
  color:#D3DCFA;
}

.services-request-step.is-active>span{
  color:#FFFFFF;
  border-color:#5679F0;
  background:linear-gradient(135deg,#2056F8,#4268EF);
  box-shadow:0 0 0 4px rgba(32,86,248,.10),0 10px 24px rgba(32,86,248,.18);
}

.services-request-step.is-active strong{
  color:#FFFFFF;
}

.services-request-step.is-active small{
  color:#A9BAF6;
}

.services-request-progress-mobile{
  display:none;
}

/* ------------------------------------------------------------
   REQUEST BODY
------------------------------------------------------------ */

.services-request-body{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(24px,3vw,36px);
  scrollbar-width:thin;
  scrollbar-color:#2547BE transparent;
}

.services-request-state[hidden]{
  display:none!important;
}

.services-request-state{
  max-width:980px;
  margin:0 auto;
  animation:b2wRequestStateIn .25s ease both;
}

@keyframes b2wRequestStateIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.services-request-state-head{
  max-width:780px;
  margin-bottom:24px;
}

.services-request-state-head .eyebrow{
  margin-bottom:14px;
}

.services-request-state-head h4{
  margin:0;
  color:#FFFFFF;
  font-size:clamp(2.1rem,3.4vw,3.8rem);
  line-height:.97;
  letter-spacing:-.05em;
}

.services-request-state-head>p:not(.eyebrow){
  max-width:720px;
  margin:18px 0 0;
  color:#94A3B8;
  line-height:1.7;
}

/* Reutiliza formulario existente dentro del modal */
.services-request-form{
  width:100%;
}

.services-production .services-request-form .services-objective-native{
  width:100%;
}

/* Ajuste modal review */
.services-production .services-request-state[data-request-state="review"]{
  max-width:980px;
}

.services-production .services-request-state[data-request-state="review"] .services-review-ticket{
  width:100%;
}

/* Ajuste modal ticket */
.services-production .services-request-state[data-request-state="ticket"]{
  max-width:940px;
}

.services-production .services-final-ticket{
  border-color:rgba(128,153,243,.34);
  background:
    radial-gradient(circle at 88% 4%,rgba(32,86,248,.14),transparent 30%),
    linear-gradient(145deg,#0A1732,#0B2148);
}

.services-production .services-ticket-check{
  color:#D3DCFA;
  border-color:rgba(128,153,243,.40);
  background:linear-gradient(135deg,rgba(32,86,248,.26),rgba(86,121,240,.10));
}

.services-production .services-ticket-reference{
  border-color:rgba(86,121,240,.34);
  background:linear-gradient(135deg,rgba(32,86,248,.11),rgba(128,153,243,.035));
}

.services-production .services-ticket-security-note{
  border-color:rgba(128,153,243,.20);
  background:rgba(32,86,248,.035);
}

.services-production .services-ticket-security-note strong{
  color:#D3DCFA;
}

/* ------------------------------------------------------------
   TICKET STAGES · READY / OPENED / RESENT
------------------------------------------------------------ */

.services-ticket-stage[hidden]{
  display:none!important;
}

.services-ticket-stage{
  position:relative;
  z-index:2;
}

.services-ticket-status-panel{
  margin:24px clamp(24px,4vw,42px) 0;
  padding:18px 20px;
  border:1px solid rgba(128,153,243,.20);
  border-radius:16px;
  background:rgba(32,86,248,.045);
}

.services-ticket-status-panel strong{
  display:block;
  margin-bottom:6px;
  color:#FFFFFF;
  font-size:.82rem;
}

.services-ticket-status-panel p{
  margin:0;
  color:#91A0B6;
  font-size:.8rem;
  line-height:1.62;
}

.services-session-expiry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 20px;
  align-items:center;
  margin:18px clamp(24px,4vw,42px) 30px;
  padding:15px 18px;
  border-top:1px solid rgba(128,153,243,.16);
}

.services-session-expiry>span{
  color:#A9BAF6;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.services-session-expiry>p{
  grid-column:1;
  margin:0;
  color:#73849D;
  font-size:.72rem;
  line-height:1.48;
}

.services-session-expiry>strong{
  grid-column:2;
  grid-row:1/3;
  color:#FFFFFF;
  font-size:clamp(1.25rem,2.1vw,1.7rem);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   THANK YOU STATE
============================================================ */

.services-request-thanks{
  max-width:720px;
  padding:clamp(34px,5vw,60px) 0;
  text-align:center;
}

.services-thanks-mark{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  margin:0 auto 24px;
  border:1px solid rgba(128,153,243,.42);
  border-radius:50%;
  background:linear-gradient(135deg,rgba(32,86,248,.28),rgba(128,153,243,.09));
  color:#D3DCFA;
  font-size:1.4rem;
  font-weight:900;
  box-shadow:0 0 0 8px rgba(32,86,248,.055);
}

.services-request-thanks .eyebrow{
  justify-content:center;
}

.services-request-thanks .eyebrow::before{
  display:none;
}

.services-request-thanks h4{
  margin:0;
  color:#FFFFFF;
  font-size:clamp(2.1rem,4vw,4rem);
  line-height:.98;
  letter-spacing:-.05em;
}

.services-request-thanks>p{
  max-width:650px;
  margin:20px auto 0;
  color:#9EACC1;
  line-height:1.72;
}

.services-thanks-privacy{
  max-width:620px;
  margin:28px auto 0;
  padding:18px 20px;
  border:1px solid rgba(128,153,243,.18);
  border-radius:16px;
  background:rgba(32,86,248,.035);
}

.services-thanks-privacy strong{
  display:block;
  margin-bottom:5px;
  color:#D3DCFA;
  font-size:.78rem;
}

.services-thanks-privacy p{
  margin:0;
  color:#7F8FA7;
  font-size:.78rem;
  line-height:1.58;
}

.services-thanks-countdown{
  display:grid;
  gap:5px;
  margin:28px 0 22px;
}

.services-thanks-countdown span{
  color:#71829B;
  font-size:.72rem;
}

.services-thanks-countdown strong{
  color:#FFFFFF;
  font-size:1.5rem;
  font-variant-numeric:tabular-nums;
}

/* ============================================================
   DISCARD DIALOG
============================================================ */

.services-discard-layer{
  z-index:1700;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.services-discard-dialog{
  width:min(520px,100%);
  padding:clamp(24px,4vw,34px);
  border:1px solid rgba(128,153,243,.28);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0%,rgba(32,86,248,.11),transparent 30%),
    linear-gradient(180deg,#0A1732,#060E20);
  box-shadow:0 34px 90px rgba(0,0,0,.52);
}

.services-discard-dialog .eyebrow{
  margin-bottom:14px;
}

.services-discard-dialog h3{
  margin:0;
  color:#FFFFFF;
  font-size:clamp(1.8rem,3vw,2.6rem);
}

.services-discard-dialog>p:not(.eyebrow){
  margin:16px 0 0;
  color:#93A2B7;
  line-height:1.65;
}

.services-discard-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

/* ============================================================
   REQUEST MOBILE ACTION BAR
============================================================ */

.services-request-mobile-actions{
  display:none;
}

/* ============================================================
   BODY LOCKS
   JS añadirá estas clases en producción.
============================================================ */

body.services-drawer-open,
body.services-request-open,
body.services-overlay-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

/* ============================================================
   TABLET
============================================================ */

@media(max-width:980px){

  .services-capability-drawer{
    width:min(62vw,700px);
    min-width:460px;
  }

  .services-request-dialog{
    width:calc(100vw - 30px);
    max-height:calc(100dvh - 30px);
  }

  .services-request-step small{
    display:none;
  }

  .services-request-stepper{
    grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto;
  }
}

/* ============================================================
   MOBILE · DRAWER FULL SCREEN + MODAL FULL SCREEN
============================================================ */

@media(max-width:720px){

  .services-production{
    padding-top:72px;
    padding-bottom:72px;
  }

  .services-production .services-process-header{
    margin-bottom:38px;
  }

  .services-production .services-process-header h2{
    font-size:clamp(2.65rem,11.4vw,4.2rem);
    line-height:.96;
  }

  .services-production .services-process-header .lead{
    margin-top:20px;
    font-size:.94rem;
  }

  .services-production .services-view-head h3{
    font-size:clamp(1.8rem,8vw,2.75rem);
  }

  .services-production .services-capability-card{
    min-height:238px;
  }

  .services-production .services-card-body strong{
    font-size:clamp(1.5rem,7.6vw,2.2rem);
  }

  /* Drawer ocupa 100% */
  .services-drawer-layer{
    display:block;
  }

  .services-drawer-backdrop{
    display:none;
  }

  .services-capability-drawer{
    width:100%;
    min-width:0;
    height:100dvh;
    border-left:0;
    box-shadow:none;
  }

  .services-drawer-header{
    min-height:72px;
    padding:12px 16px;
  }

  .services-drawer-brand{
    display:grid;
    gap:2px;
  }

  .services-drawer-brand>span{
    font-size:.6rem;
  }

  .services-drawer-close{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:50%;
  }

  .services-drawer-close-label{
    display:none;
  }

  .services-drawer-scroll{
    padding:22px 16px calc(32px + env(safe-area-inset-bottom));
  }

  .services-drawer-intro h3{
    font-size:clamp(2rem,9.7vw,3.2rem);
  }

  .services-drawer-intro>p{
    font-size:.91rem;
  }

  .services-production .services-drawer-solutions .services-solution-content{
    padding-left:0;
    padding-right:0;
  }

  .services-production .services-drawer-solutions .services-solution-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .services-production .services-drawer-solutions .services-solution-actions .button{
    width:100%;
  }

  /* Modal full screen */
  .services-request-layer{
    display:block;
    padding:0;
  }

  .services-request-backdrop{
    display:none;
  }

  .services-request-dialog{
    width:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .services-request-header{
    padding:13px 14px 0;
  }

  .services-request-brand{
    font-size:.56rem;
  }

  .services-request-heading h3{
    font-size:1rem;
  }

  .services-request-selection{
    margin-top:9px;
    font-size:.68rem;
  }

  /* Desktop stepper fuera */
  .services-request-stepper-desktop{
    display:none!important;
  }

  /* Mobile indicator */
  .services-request-progress-mobile{
    display:grid;
    gap:8px;
    padding:13px 0 14px;
  }

  .services-request-progress-mobile>div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }

  .services-request-progress-mobile span{
    color:#8099F3;
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.08em;
  }

  .services-request-progress-mobile strong{
    color:#FFFFFF;
    font-size:.78rem;
  }

  .services-request-progress-track{
    position:relative;
    width:100%;
    height:3px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(128,153,243,.14);
  }

  .services-request-progress-track>span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#2056F8,#5679F0);
    box-shadow:0 0 12px rgba(32,86,248,.24);
    transition:width .28s ease;
  }

  .services-request-body{
    padding:20px 14px calc(104px + env(safe-area-inset-bottom));
  }

  .services-request-state-head{
    margin-bottom:20px;
  }

  .services-request-state-head h4{
    font-size:clamp(2rem,9.7vw,3.2rem);
  }

  .services-request-state-head>p:not(.eyebrow){
    margin-top:14px;
    font-size:.9rem;
  }

  .services-production .services-request-form{
    padding:18px 14px;
    border-radius:18px;
  }

  .services-production .services-review-ticket{
    border-radius:18px;
  }

  .services-production .services-final-ticket{
    border-radius:18px;
  }

  .services-production .services-final-ticket-head h3,
  .services-production .services-final-ticket-head h4{
    font-size:clamp(2rem,9vw,3.2rem);
  }

  .services-ticket-status-panel{
    margin-left:18px;
    margin-right:18px;
  }

  .services-session-expiry{
    margin-left:18px;
    margin-right:18px;
  }

  /* Barra de acciones móvil contextual */
  .services-request-mobile-actions:not([hidden]){
    position:absolute;
    z-index:12;
    left:0;
    right:0;
    bottom:0;
    display:block;
    padding:
      8px
      10px
      max(8px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(128,153,243,.18);
    background:rgba(5,12,27,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -16px 40px rgba(0,0,0,.26);
  }

  .services-request-mobile-actions>div:not([hidden]){
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
    gap:6px;
  }

  .services-request-mobile-actions button,
  .services-request-mobile-actions>div>span{
    min-height:52px;
    border-radius:13px;
  }

  .services-request-mobile-actions button{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:0 8px;
    border:1px solid rgba(128,153,243,.20);
    background:#09162E;
    color:#D3DCFA;
    cursor:pointer;
    font:inherit;
    font-size:.68rem;
    font-weight:850;
    text-align:center;
  }

  .services-request-mobile-actions button:last-child{
    border-color:rgba(86,121,240,.50);
    background:linear-gradient(135deg,#2056F8,#4268EF);
    color:#FFFFFF;
  }

  .services-request-mobile-actions>div>span{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:82px;
    padding:5px 8px;
    background:rgba(255,255,255,.025);
    color:#FFFFFF;
    text-align:center;
  }

  .services-request-mobile-actions>div>span strong{
    color:#A9BAF6;
    font-size:.65rem;
    line-height:1.1;
  }

  .services-request-mobile-actions>div>span small{
    margin-top:3px;
    color:#7C8CA5;
    font-size:.55rem;
  }

  /* No mostrar CTA desktop duplicado en estados que tienen barra móvil */
  .services-request-state[data-request-state="data"] .services-form-submit .services-review-submit,
  .services-request-state[data-request-state="review"] .services-review-actions,
  .services-request-state[data-request-state="ticket"] .services-ticket-actions{
    display:none!important;
  }

  .services-request-state[data-request-state="data"] .services-form-submit{
    margin-top:0;
  }

  .services-request-thanks{
    padding:36px 8px;
  }

  .services-request-thanks h4{
    font-size:clamp(2rem,10vw,3.2rem);
  }

  .services-discard-layer{
    padding:14px;
  }

  .services-discard-dialog{
    border-radius:20px;
  }

  .services-discard-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .services-discard-actions .button{
    width:100%;
  }
}

/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media(max-width:430px){

  .services-production .services-process-header h2{
    font-size:clamp(2.45rem,12.2vw,3.65rem);
  }

  .services-drawer-scroll{
    padding-inline:14px;
  }

  .services-drawer-intro h3{
    font-size:clamp(1.9rem,10.5vw,2.9rem);
  }

  .services-request-body{
    padding-inline:12px;
  }

  .services-production .services-request-form{
    padding-inline:12px;
  }

  .services-request-mobile-actions{
    padding-inline:8px;
  }

  .services-request-mobile-actions button{
    font-size:.63rem;
  }

  .services-request-mobile-actions>div>span{
    min-width:74px;
  }

  .services-session-expiry{
    grid-template-columns:1fr;
  }

  .services-session-expiry>strong{
    grid-column:1;
    grid-row:auto;
    margin-top:5px;
  }
}

/* ============================================================
   FOCUS / ACCESIBILIDAD
============================================================ */

.services-capability-card:focus-visible,
.services-drawer-close:focus-visible,
.services-request-close:focus-visible,
.services-solution-trigger:focus-visible,
.services-request-mobile-actions button:focus-visible,
.services-discard-actions .button:focus-visible,
.services-request-thanks .button:focus-visible{
  outline:2px solid #8099F3;
  outline-offset:3px;
}

/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){
  .services-capability-drawer,
  .services-request-dialog,
  .services-drawer-panel,
  .services-request-state{
    animation:none!important;
  }

  .services-request-progress-track>span{
    transition:none!important;
  }
}
/* ========================================================================
   B2W AGENCY ECUADOR · PRODUCTION V7
   INDEX V7 COMPATIBILITY PATCH
   ------------------------------------------------------------------------
   Objetivos:
   01. Drawer desktop con "Volver a capacidades".
   02. Navegación móvil de capacidades 01/05 → 05/05.
   03. Modal de solicitud visible y operable al 100% de zoom.
   04. Cabecera + progreso siempre visibles; scroll solo en el cuerpo.
   05. Industrias con MP4 Automotriz + imágenes tratadas en paleta B2W.
   06. Selected Work actualizado con tratamiento editorial consistente.
   07. Sin alterar el resto del Home.
   ======================================================================== */

/* ------------------------------------------------------------------------
   PALETA / TOKENS V7
------------------------------------------------------------------------ */
.services-production,
.industry-editorial-2026,
.work-editorial-2026{
  --b2w-v7-blue:#2056F8;
  --b2w-v7-blue-2:#2A4FD6;
  --b2w-v7-blue-3:#4268EF;
  --b2w-v7-navy:#0E1A47;
  --b2w-v7-navy-2:#1B358E;
  --b2w-v7-soft:#8099F3;
  --b2w-v7-pale:#A9BAF6;
  --b2w-v7-pale-2:#D3DCFA;
  --b2w-v7-white:#FFFFFF;
  --b2w-v7-black:#000000;
}

/* ========================================================================
   01 · DRAWER · NAVEGACIÓN DESKTOP
   ======================================================================== */

.services-drawer-header{
  align-items:flex-start;
}

.services-drawer-header-main{
  display:grid;
  gap:10px;
  min-width:0;
}

.services-drawer-back{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  min-height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:#A9BAF6;
  cursor:pointer;
  font:inherit;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:
    color .2s ease,
    transform .2s ease;
}

.services-drawer-back>span:first-child{
  font-size:.95rem;
  line-height:1;
  transition:transform .2s ease;
}

.services-drawer-back:hover,
.services-drawer-back:focus-visible{
  color:#FFFFFF;
  outline:none;
}

.services-drawer-back:hover>span:first-child,
.services-drawer-back:focus-visible>span:first-child{
  transform:translateX(-3px);
}

.services-drawer-brand{
  gap:10px;
}

.services-drawer-back-desktop{
  display:inline-flex;
}

/* Mobile nav del drawer no existe visualmente fuera de mobile */
.services-drawer-mobile-nav{
  display:none!important;
}

/* ========================================================================
   02 · DRAWER · ESTRUCTURA Y ESCALA
   ======================================================================== */

@media(min-width:721px){
  .services-capability-drawer{
    grid-template-rows:auto minmax(0,1fr);
  }

  .services-drawer-scroll{
    padding-top:30px;
  }

  .services-drawer-intro h3{
    font-size:clamp(2rem,3vw,3.35rem);
  }

  .services-drawer-intro>p{
    font-size:.93rem;
  }
}

/* ========================================================================
   03 · MODAL DE SOLICITUD · DESKTOP 100% ZOOM
   ======================================================================== */

@media(min-width:721px){

  .services-request-layer{
    padding:14px 20px;
  }

  /*
   * Altura controlada: la cabecera nunca sale del viewport.
   * El cuerpo es el único bloque que hace scroll.
   */
  .services-request-dialog{
    width:min(1180px,calc(100vw - 40px));
    height:min(820px,calc(100dvh - 28px));
    max-height:none;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    border-radius:24px;
  }

  .services-request-header{
    position:relative;
    top:auto;
    flex:0 0 auto;
    padding:15px 24px 0;
  }

  .services-request-heading{
    min-height:42px;
  }

  .services-request-brand{
    margin-bottom:3px;
    font-size:.58rem;
  }

  .services-request-heading h3{
    font-size:1.05rem;
  }

  .services-request-close{
    position:relative;
    top:auto;
    right:auto;
    z-index:20;
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .services-request-selection{
    margin-top:8px;
    font-size:.7rem;
  }

  .services-request-stepper{
    margin-top:14px;
    padding:10px 0 14px;
  }

  .services-request-step>span{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .services-request-step strong{
    font-size:.7rem;
  }

  .services-request-step small{
    font-size:.56rem;
  }

  .services-request-body{
    min-height:0;
    overflow-y:auto;
    padding:26px clamp(26px,3vw,38px) 34px;
    overscroll-behavior:contain;
  }

  .services-request-state-head{
    margin-bottom:20px;
  }

  .services-request-state-head h4{
    font-size:clamp(2rem,3.1vw,3.3rem);
  }

  .services-request-state-head>p:not(.eyebrow){
    margin-top:14px;
    font-size:.92rem;
  }

  .services-production .services-request-form{
    padding:clamp(20px,2.6vw,30px);
    border-radius:22px;
  }

  .services-form-grid{
    gap:14px 14px;
  }

  .services-quote-form input,
  .services-quote-form select,
  .services-quote-form textarea,
  .services-objective-trigger{
    min-height:48px;
  }

  .services-quote-form textarea{
    min-height:118px;
  }

  .services-needs-chips{
    gap:7px;
  }

  .services-need-chip span{
    min-height:36px;
    padding:7px 11px;
  }
}

/* Laptop de menor altura: aún más compacto sin cambiar zoom */
@media(min-width:721px) and (max-height:760px){
  .services-request-dialog{
    height:calc(100dvh - 20px);
    border-radius:20px;
  }

  .services-request-layer{
    padding:10px 16px;
  }

  .services-request-header{
    padding-top:11px;
  }

  .services-request-stepper{
    margin-top:10px;
    padding:8px 0 10px;
  }

  .services-request-body{
    padding-top:20px;
  }

  .services-request-state-head h4{
    font-size:clamp(1.9rem,3vw,3rem);
  }

  .services-request-state-head>p:not(.eyebrow){
    margin-top:10px;
  }

  .services-production .services-request-form{
    padding:20px 24px;
  }
}

/* ========================================================================
   04 · MOBILE DRAWER · BOTTOM NAV DE CAPACIDADES
   ======================================================================== */

@media(max-width:720px){

  .services-capability-drawer{
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .services-drawer-back-desktop{
    display:none!important;
  }

  /*
   * El cierre X sigue disponible en la cabecera.
   * La navegación principal de nivel se hace abajo.
   */
  .services-drawer-header{
    min-height:64px;
    align-items:center;
  }

  .services-drawer-header-main{
    gap:2px;
  }

  .services-drawer-brand{
    display:grid;
    gap:1px;
  }

  .services-drawer-scroll{
    padding-bottom:26px;
  }

  .services-drawer-mobile-nav{
    position:relative;
    z-index:20;
    display:grid!important;
    grid-template-columns:1fr minmax(92px,.9fr) 1fr;
    align-items:stretch;
    gap:5px;
    padding:
      7px
      9px
      max(8px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(128,153,243,.18);
    background:rgba(5,12,27,.97);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -14px 38px rgba(0,0,0,.28);
  }

  .services-drawer-mobile-nav-item{
    appearance:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    min-height:52px;
    padding:5px 7px;
    border:1px solid rgba(128,153,243,.18);
    border-radius:13px;
    background:#09162E;
    color:#D3DCFA;
    cursor:pointer;
    font:inherit;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
  }

  .services-drawer-mobile-nav-item>span{
    color:#A9BAF6;
    font-size:.95rem;
    line-height:1;
  }

  .services-drawer-mobile-nav-item>small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#AAB7CA;
    font-size:.58rem;
    font-weight:800;
  }

  .services-drawer-mobile-nav-next{
    border-color:rgba(86,121,240,.42);
    background:
      linear-gradient(135deg,rgba(32,86,248,.20),rgba(66,104,239,.10)),
      #09162E;
    color:#FFFFFF;
  }

  .services-drawer-mobile-nav-current{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:52px;
    padding:5px 6px;
    border-radius:13px;
    background:rgba(255,255,255,.025);
    text-align:center;
  }

  .services-drawer-mobile-nav-current::before{
    content:"";
    position:absolute;
    top:-7px;
    left:24%;
    right:24%;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#2056F8,#8099F3);
    box-shadow:0 0 12px rgba(32,86,248,.28);
  }

  .services-drawer-mobile-nav-current strong{
    color:#A9BAF6;
    font-size:.64rem;
    line-height:1.15;
    letter-spacing:.06em;
  }

  .services-drawer-mobile-nav-current small{
    display:block;
    max-width:100%;
    margin-top:3px;
    overflow:hidden;
    color:#798AA3;
    font-size:.54rem;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:390px){
  .services-drawer-mobile-nav{
    grid-template-columns:1fr 86px 1fr;
    padding-inline:7px;
  }

  .services-drawer-mobile-nav-item{
    padding-inline:4px;
  }

  .services-drawer-mobile-nav-item>small{
    font-size:.54rem;
  }

  .services-drawer-mobile-nav-current strong{
    font-size:.59rem;
  }
}

/* ========================================================================
   05 · SELECTED WORK V7 · ARMONÍA VISUAL
   ======================================================================== */

.work-editorial-2026{
  background:
    radial-gradient(circle at 90% 4%,rgba(32,86,248,.045),transparent 24%),
    #F7F9FC;
}

.work-editorial-2026 .work-feature{
  min-height:600px;
  border-color:#D7E0ED;
  box-shadow:0 22px 64px rgba(32,63,108,.075);
}

.work-editorial-2026 .work-visual{
  min-height:600px;
  background:#0E1A47;
}

.work-editorial-2026 .work-visual img{
  filter:saturate(.82) contrast(1.02);
  transform:scale(1.002);
}

.work-editorial-2026 .work-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(3,14,34,.04) 22%,rgba(7,29,70,.15) 48%,rgba(6,25,61,.78) 100%),
    linear-gradient(90deg,rgba(14,26,71,.28),transparent 62%);
  pointer-events:none;
}

.work-editorial-2026 .work-visual::after{
  z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(7,24,58,.72) 100%);
}

.work-editorial-2026 .work-fallback,
.work-editorial-2026 .work-index,
.work-editorial-2026 .work-brand{
  z-index:3;
}

.work-editorial-2026 .work-copy{
  background:#FFFFFF;
}

.work-editorial-2026 .work-copy h3{
  max-width:480px;
  font-size:clamp(2.15rem,3.55vw,3.65rem);
}

.work-editorial-2026 .work-metrics{
  gap:0;
}

.work-editorial-2026 .work-metrics>div{
  padding-right:1rem;
}

.work-editorial-2026 .work-metrics>div+div{
  padding-left:1rem;
  border-left:1px solid #DCE5F0;
}

.work-editorial-2026 .work-card{
  min-height:395px;
  border-radius:22px;
  background:#071426;
}

.work-editorial-2026 .work-card::before{
  background:
    linear-gradient(180deg,rgba(5,16,36,.02) 20%,rgba(5,22,52,.24) 46%,rgba(4,15,35,.95) 82%),
    linear-gradient(90deg,rgba(14,26,71,.18),transparent 60%);
}

.work-editorial-2026 .work-card img{
  filter:saturate(.82) contrast(1.03);
}

.work-editorial-2026 .work-card:hover img{
  transform:scale(1.025);
}

.work-editorial-2026 .work-card-content{
  left:1.25rem;
  right:1.25rem;
  bottom:1.25rem;
}

.work-editorial-2026 .work-card small{
  color:#A9BAF6;
}

.work-editorial-2026 .work-card h3{
  font-size:clamp(1.4rem,2vw,1.85rem);
}

.work-editorial-2026 .work-card p{
  color:#D1D9E7;
  font-size:.82rem;
}

.work-editorial-2026 .mini-metrics{
  gap:.55rem .9rem;
}

.work-editorial-2026 .mini-metrics strong{
  white-space:nowrap;
}

/* ========================================================================
   06 · INDUSTRIAS V7 · MP4 + IMÁGENES TRATADAS
   ======================================================================== */

.industry-editorial-2026{
  background:
    radial-gradient(circle at 92% 5%,rgba(32,86,248,.055),transparent 24%),
    linear-gradient(180deg,#EEF3F9 0%,#F4F7FB 100%);
}

.industry-editorial-2026 .industry-mosaic{
  grid-template-columns:1.34fr .83fr .83fr;
  gap:14px;
}

.industry-editorial-2026 .industry-card{
  isolation:isolate;
  min-height:270px;
  padding:1.45rem;
  border-color:#D4DEEC;
  border-radius:22px;
  box-shadow:none;
}

.industry-editorial-2026 .industry-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(26,56,102,.09);
}

.industry-card .industry-content{
  position:relative;
  z-index:4;
}

.industry-editorial-2026 .industry-top{
  position:relative;
  z-index:5;
}

/* ----- Automotriz audiovisual ----- */

.industry-card-media{
  min-height:570px!important;
  padding:1.55rem!important;
  background:#0E1A47!important;
}

.industry-card-media::after{
  display:none;
}

.industry-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0E1A47;
}

.industry-media-poster,
.industry-media-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.industry-media-poster{
  z-index:1;
  filter:saturate(.76) contrast(1.04);
  opacity:1;
  transition:opacity .65s ease;
}

.industry-media-video{
  z-index:2;
  opacity:0;
  filter:saturate(.78) contrast(1.05);
  transition:opacity .65s ease;
}

.industry-media.is-video-ready .industry-media-video{
  opacity:1;
}

.industry-media.is-video-ready .industry-media-poster{
  opacity:0;
}

.industry-media-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  background:
    linear-gradient(180deg,rgba(3,11,26,.12) 12%,rgba(14,26,71,.10) 36%,rgba(9,28,67,.50) 62%,rgba(6,22,55,.96) 100%),
    linear-gradient(90deg,rgba(14,26,71,.36),rgba(32,86,248,.06) 58%,rgba(14,26,71,.16));
  pointer-events:none;
}

.industry-media-loader{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:12px;
  background:
    radial-gradient(circle at 50% 45%,rgba(32,86,248,.20),transparent 28%),
    #0E1A47;
  opacity:1;
  transition:opacity .5s ease,visibility .5s ease;
}

.industry-media-loader img{
  width:min(180px,45%);
  height:auto;
  filter:brightness(1.12);
}

.industry-media-loader span{
  color:#A9BAF6;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.16em;
}

.industry-media.is-video-ready .industry-media-loader{
  opacity:0;
  visibility:hidden;
}

.industry-card-media .industry-top,
.industry-card-media .industry-content{
  position:relative;
  z-index:6;
}

.industry-card-media .industry-content{
  margin-top:auto;
}

.industry-card-media h3{
  max-width:520px;
  color:#FFFFFF;
  font-size:clamp(2.35rem,4vw,4.15rem);
  text-shadow:0 4px 24px rgba(0,0,0,.22);
}

.industry-card-media p{
  max-width:520px;
  color:#D3DCFA!important;
}

.industry-card-media .industry-brands span{
  color:#FFFFFF!important;
}

.industry-card-media .industry-tags{
  color:#A9BAF6!important;
}

/* ----- Tarjetas secundarias con imagen sutil ----- */

.industry-card-with-image{
  background:#FFFFFF;
}

.industry-card-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  opacity:.13;
  transition:opacity .3s ease,transform .5s ease;
}

.industry-card-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.88) 40%,#FFFFFF 78%),
    linear-gradient(90deg,rgba(211,220,250,.48),transparent 70%);
}

.industry-card-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.55) contrast(.95);
  transform:scale(1.02);
}

.industry-card-with-image:hover .industry-card-bg{
  opacity:.19;
}

.industry-card-with-image:hover .industry-card-bg img{
  transform:scale(1.045);
}

.industry-card-with-image .industry-top,
.industry-card-with-image .industry-content{
  position:relative;
  z-index:3;
}

.industry-card-with-image h3{
  color:#07111F;
}

.industry-card-with-image p{
  color:#5F6F86;
}

/* Reduced motion: poster prevalece y video no distrae */
@media(prefers-reduced-motion:reduce){
  .industry-media-video{
    display:none!important;
  }

  .industry-media-poster{
    opacity:1!important;
  }

  .industry-media-loader{
    display:none!important;
  }

  .industry-card-bg img{
    transform:none!important;
  }
}

/* ========================================================================
   07 · RESPONSIVE SELECTED WORK + INDUSTRIAS
   ======================================================================== */

@media(max-width:1100px){
  .industry-editorial-2026 .industry-mosaic{
    grid-template-columns:1fr 1fr;
  }

  .industry-card-media{
    grid-column:1/-1!important;
    grid-row:auto!important;
    min-height:480px!important;
  }

  .work-editorial-2026 .work-feature{
    min-height:auto;
  }

  .work-editorial-2026 .work-visual{
    min-height:500px;
  }
}

@media(max-width:760px){

  .work-editorial-2026 .work-feature{
    border-radius:20px;
  }

  .work-editorial-2026 .work-visual{
    min-height:350px;
  }

  .work-editorial-2026 .work-copy h3{
    font-size:clamp(2rem,9vw,3rem);
  }

  .work-editorial-2026 .work-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }

  .work-editorial-2026 .work-metrics>div{
    padding:.2rem .65rem;
  }

  .work-editorial-2026 .work-metrics>div:first-child{
    padding-left:0;
  }

  .work-editorial-2026 .work-card{
    min-height:360px;
  }

  .industry-editorial-2026 .industry-mosaic{
    grid-template-columns:1fr;
  }

  .industry-card-media{
    grid-column:auto!important;
    min-height:520px!important;
  }

  .industry-editorial-2026 .industry-card{
    min-height:245px;
  }

  .industry-card-media h3{
    font-size:clamp(2.25rem,11vw,3.5rem);
  }

  .industry-card-bg{
    opacity:.11;
  }
}

@media(max-width:520px){

  .work-editorial-2026 .work-visual{
    min-height:300px;
  }

  .work-editorial-2026 .work-metrics{
    grid-template-columns:1fr 1fr;
  }

  .work-editorial-2026 .work-metrics>div:nth-child(2){
    border-left:1px solid #DCE5F0;
  }

  .work-editorial-2026 .work-metrics>div:last-child{
    grid-column:1/-1;
    padding-left:0;
    padding-top:.85rem;
    margin-top:.75rem;
    border-left:0;
    border-top:1px solid #DCE5F0;
  }

  .industry-card-media{
    min-height:500px!important;
    padding:1.25rem!important;
  }

  .industry-card-media .industry-brands{
    gap:.25rem .65rem;
  }
}

/* ========================================================================
   08 · FOCUS / ACCESIBILIDAD V7
   ======================================================================== */

.services-drawer-back:focus-visible,
.services-drawer-mobile-nav-item:focus-visible{
  outline:2px solid #8099F3;
  outline-offset:3px;
}

/* ========================================================================
   09 · HARDENING DE VISIBILIDAD
   ======================================================================== */

/* Evita que elementos hidden sean forzados visibles por reglas antiguas */
.services-drawer-layer[hidden],
.services-request-layer[hidden],
.services-discard-layer[hidden],
.services-drawer-panel[hidden],
.services-request-state[hidden],
.services-ticket-stage[hidden],
.services-objective-options[hidden],
.services-request-mobile-actions[hidden]{
  display:none!important;
}

/* La navegación móvil del drawer nunca debe filtrarse a desktop */
@media(min-width:721px){
  .services-drawer-mobile-nav{
    display:none!important;
  }
}

/* ========================================================================
   FIN · B2W PRODUCTION V7
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · PRODUCTION V8
   FINAL RESPONSIVE / MODAL / INDUSTRIES PATCH
   Compatible con: index-b2w-production-v8.html
   ======================================================================== */

/* ------------------------------------------------------------------------
   V8 · TOKENS
------------------------------------------------------------------------ */
.services-production,
.industry-editorial-v8,
.work-editorial-v8{
  --b2w8-blue:#2056F8;
  --b2w8-blue-2:#4268EF;
  --b2w8-navy:#0E1A47;
  --b2w8-navy-deep:#050B18;
  --b2w8-soft:#8099F3;
  --b2w8-pale:#A9BAF6;
  --b2w8-pale-2:#D3DCFA;
}

/* ========================================================================
   01 · REQUEST MODAL · CAPA GLOBAL REAL
   El modal siempre está por encima del header principal y de todo el Home.
   ======================================================================== */

.services-request-layer-v8{
  z-index:3000!important;
  position:fixed!important;
  inset:0!important;
  isolation:isolate;
}

.services-request-backdrop-v8{
  z-index:0!important;
  background:rgba(1,6,16,.68)!important;
  backdrop-filter:blur(10px) saturate(82%)!important;
  -webkit-backdrop-filter:blur(10px) saturate(82%)!important;
  cursor:default;
}

.services-request-dialog-v8{
  z-index:2!important;
}

/* El header normal de la web queda visualmente detrás de la capa */
body.services-request-open .site-header{
  pointer-events:none;
}

/* Fondo completamente bloqueado durante la solicitud */
body.services-request-open{
  overflow:hidden!important;
  touch-action:none;
}

/* El modal sí conserva interacción táctil */
body.services-request-open .services-request-dialog-v8{
  touch-action:auto;
}

/* ========================================================================
   02 · CABECERA V8 DEL MODAL
   ======================================================================== */

.services-request-header-v8{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:0;
  position:relative;
  z-index:20;
}

.services-request-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:42px;
}

.services-request-exit{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:0;
  border:0;
  background:transparent;
  color:#A9BAF6;
  cursor:pointer;
  font:inherit;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.services-request-exit:hover,
.services-request-exit:focus-visible{
  color:#fff;
  outline:none;
}

.services-request-exit>span:first-child{
  font-size:.95rem;
  transition:transform .2s ease;
}

.services-request-exit:hover>span:first-child{
  transform:translateX(-3px);
}

.services-request-context{
  display:grid;
  gap:2px;
  margin-top:8px;
}

.services-request-context h3{
  margin:0;
  color:#fff;
  font-size:1.08rem;
  letter-spacing:-.025em;
}

.services-request-context .services-request-brand{
  margin:0 0 1px;
}

.services-request-context .services-request-selection{
  margin-top:7px;
}

/* ========================================================================
   03 · DESKTOP MODAL · 100% ZOOM
   ======================================================================== */

@media(min-width:721px){

  .services-request-layer-v8{
    display:grid!important;
    place-items:center;
    padding:22px!important;
  }

  .services-request-dialog-v8{
    width:min(1180px,calc(100vw - 44px))!important;
    height:min(860px,calc(100dvh - 44px))!important;
    max-height:none!important;
    min-height:0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    overflow:hidden!important;
    border-radius:26px!important;
    box-shadow:
      0 44px 120px rgba(0,0,0,.64),
      0 0 0 1px rgba(128,153,243,.04)!important;
  }

  .services-request-header-v8{
    flex:0 0 auto;
    padding:14px 24px 0!important;
    background:rgba(5,12,27,.985)!important;
  }

  .services-request-topbar{
    min-height:36px;
  }

  .services-request-close{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    position:relative!important;
    inset:auto!important;
    z-index:25!important;
  }

  .services-request-context{
    margin-top:5px;
  }

  .services-request-context .services-request-brand{
    font-size:.56rem!important;
  }

  .services-request-context h3{
    font-size:1.02rem;
  }

  .services-request-context .services-request-selection{
    font-size:.68rem!important;
    margin-top:5px!important;
  }

  .services-request-stepper-desktop{
    margin-top:12px!important;
    padding:9px 0 12px!important;
  }

  .services-request-step>span{
    width:30px!important;
    height:30px!important;
    flex-basis:30px!important;
  }

  .services-request-step strong{
    font-size:.68rem!important;
  }

  .services-request-step small{
    font-size:.54rem!important;
  }

  .services-request-body-v8{
    min-height:0!important;
    overflow-y:auto!important;
    padding:22px clamp(24px,3vw,36px) 32px!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable;
  }

  .services-request-state-head{
    margin-bottom:18px!important;
  }

  .services-request-state-head .eyebrow{
    margin-bottom:10px!important;
  }

  .services-request-state-head h4{
    font-size:clamp(2rem,3.05vw,3.35rem)!important;
  }

  .services-request-state-head>p:not(.eyebrow){
    margin-top:12px!important;
    font-size:.9rem!important;
    line-height:1.6!important;
  }

  .services-production .services-request-form{
    padding:22px 28px!important;
    border-radius:20px!important;
  }

  .services-form-grid{
    gap:12px 14px!important;
  }

  .services-quote-form input,
  .services-quote-form select,
  .services-objective-trigger{
    min-height:46px!important;
    padding-block:11px!important;
  }

  .services-quote-form textarea{
    min-height:112px!important;
  }

  .services-needs-chips{
    gap:7px!important;
  }

  .services-need-chip span{
    min-height:35px!important;
    padding:7px 11px!important;
  }
}

/* Laptop / desktop de poca altura */
@media(min-width:721px) and (max-height:760px){

  .services-request-layer-v8{
    padding:10px 18px!important;
  }

  .services-request-dialog-v8{
    height:calc(100dvh - 20px)!important;
    width:min(1180px,calc(100vw - 36px))!important;
    border-radius:20px!important;
  }

  .services-request-header-v8{
    padding-top:9px!important;
  }

  .services-request-topbar{
    min-height:32px;
  }

  .services-request-context{
    margin-top:2px;
  }

  .services-request-stepper-desktop{
    margin-top:8px!important;
    padding:7px 0 9px!important;
  }

  .services-request-body-v8{
    padding-top:18px!important;
  }

  .services-request-state-head{
    margin-bottom:14px!important;
  }

  .services-request-state-head h4{
    font-size:clamp(1.8rem,2.8vw,2.9rem)!important;
  }

  .services-production .services-request-form{
    padding:18px 22px!important;
  }
}

/* ========================================================================
   04 · MOBILE REQUEST · FULLSCREEN REAL
   No aparece el header principal B2W cuando la solicitud está abierta.
   ======================================================================== */

@media(max-width:720px){

  .services-request-layer-v8{
    display:block!important;
    padding:0!important;
    background:#050B18!important;
  }

  .services-request-backdrop-v8{
    display:none!important;
  }

  .services-request-dialog-v8{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:
      radial-gradient(circle at 90% 0%,rgba(32,86,248,.10),transparent 30%),
      linear-gradient(180deg,#071229,#050B18)!important;
  }

  /* Mobile: solo X arriba */
  .services-request-exit-desktop{
    display:none!important;
  }

  .services-request-header-v8{
    position:relative!important;
    padding:
      max(10px,env(safe-area-inset-top))
      14px
      0!important;
    border-bottom:1px solid rgba(128,153,243,.16)!important;
    background:rgba(5,12,27,.985)!important;
  }

  .services-request-topbar{
    min-height:38px;
    justify-content:flex-end;
  }

  .services-request-close{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    position:relative!important;
    inset:auto!important;
  }

  .services-request-context{
    margin-top:0;
    padding-right:46px;
  }

  .services-request-context .services-request-brand{
    display:block;
    color:#8099F3;
    font-size:.54rem!important;
  }

  .services-request-context h3{
    font-size:.92rem;
    margin-top:1px;
  }

  .services-request-context .services-request-selection{
    display:flex;
    gap:5px;
    margin-top:5px!important;
    padding-bottom:2px;
    font-size:.63rem!important;
    line-height:1.3;
  }

  .services-request-progress-mobile{
    display:grid!important;
    gap:7px!important;
    padding:10px 0 11px!important;
  }

  .services-request-progress-mobile>div:first-child{
    min-height:20px;
  }

  .services-request-progress-mobile span{
    font-size:.62rem!important;
  }

  .services-request-progress-mobile strong{
    font-size:.72rem!important;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  .services-request-progress-track{
    height:3px!important;
  }

  .services-request-body-v8{
    min-height:0!important;
    height:auto!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
    padding:
      17px
      12px
      calc(86px + env(safe-area-inset-bottom))!important;
  }

  .services-request-state{
    max-width:none!important;
  }

  .services-request-state-head{
    margin-bottom:16px!important;
  }

  .services-request-state-head .eyebrow{
    margin-bottom:10px!important;
    font-size:.64rem!important;
  }

  .services-request-state-head h4{
    font-size:clamp(1.9rem,9vw,2.8rem)!important;
    line-height:.98!important;
    max-width:320px;
  }

  .services-request-state-head>p:not(.eyebrow){
    margin-top:11px!important;
    font-size:.84rem!important;
    line-height:1.58!important;
  }

  .services-production .services-request-form{
    padding:15px 11px!important;
    border-radius:17px!important;
  }

  .services-form-grid{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  .services-quote-form .field{
    gap:5px!important;
  }

  .services-quote-form label,
  .services-needs-field legend{
    font-size:.69rem!important;
  }

  .services-quote-form input,
  .services-quote-form select,
  .services-objective-trigger{
    min-height:48px!important;
    padding:10px 12px!important;
    border-radius:11px!important;
  }

  .services-quote-form textarea{
    min-height:116px!important;
    padding:11px 12px!important;
    border-radius:11px!important;
  }

  .services-field-help{
    font-size:.65rem!important;
  }

  .services-needs-chips{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .services-need-chip span{
    min-height:36px!important;
    padding:7px 7px!important;
    font-size:.64rem!important;
  }

  .services-quote-form .consent{
    font-size:.7rem!important;
  }

  /* Barra inferior móvil fija dentro del proceso */
  .services-request-mobile-actions-v8:not([hidden]){
    position:relative!important;
    z-index:40!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    display:block!important;
    width:100%!important;
    flex:0 0 auto!important;
    padding:
      7px
      8px
      max(8px,env(safe-area-inset-bottom))!important;
    border-top:1px solid rgba(128,153,243,.18)!important;
    background:rgba(5,12,27,.985)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    box-shadow:0 -12px 36px rgba(0,0,0,.28)!important;
  }

  .services-request-mobile-actions-v8>div:not([hidden]){
    display:grid!important;
    grid-template-columns:1fr minmax(74px,.72fr) 1fr!important;
    gap:5px!important;
  }

  .services-request-mobile-actions-v8 button,
  .services-request-mobile-actions-v8>div>span{
    min-height:48px!important;
    border-radius:12px!important;
  }

  .services-request-mobile-actions-v8 button{
    font-size:.64rem!important;
    padding-inline:7px!important;
  }

  .services-request-mobile-actions-v8>div>span{
    min-width:0!important;
    padding:4px 5px!important;
  }

  .services-request-mobile-actions-v8>div>span strong{
    font-size:.62rem!important;
  }

  .services-request-mobile-actions-v8>div>span small{
    font-size:.52rem!important;
  }

  /* El CTA del formulario no compite con la barra inferior */
  .services-request-state[data-request-state="data"]
  .services-form-submit .services-review-submit{
    display:none!important;
  }

  .services-request-state[data-request-state="review"]
  .services-review-actions{
    display:none!important;
  }

  .services-request-state[data-request-state="ticket"]
  .services-ticket-actions{
    display:none!important;
  }
}

@media(max-width:390px){

  .services-request-header-v8{
    padding-inline:11px!important;
  }

  .services-request-body-v8{
    padding-inline:9px!important;
  }

  .services-production .services-request-form{
    padding-inline:9px!important;
  }

  .services-needs-chips{
    grid-template-columns:1fr 1fr!important;
  }

  .services-request-mobile-actions-v8{
    padding-inline:6px!important;
  }
}

/* ========================================================================
   05 · DRAWER DE CAPACIDADES · MOBILE / DESKTOP
   ======================================================================== */

/* Desktop: "Volver a capacidades" visible */
@media(min-width:721px){
  .services-drawer-back-desktop{
    display:inline-flex!important;
  }

  .services-drawer-mobile-nav{
    display:none!important;
  }
}

/* Mobile: drawer pantalla completa con navegación inferior siempre accesible */
@media(max-width:720px){

  .services-capability-drawer{
    height:100dvh!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }

  .services-drawer-back-desktop{
    display:none!important;
  }

  .services-drawer-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    padding-bottom:24px!important;
  }

  .services-drawer-mobile-nav{
    display:grid!important;
    position:relative!important;
    flex:0 0 auto;
    z-index:30!important;
  }
}

/* ========================================================================
   06 · INDUSTRIAS V8 · DESKTOP VIEWPORT COMPOSITION
   ======================================================================== */

.industry-editorial-v8{
  display:flex;
  align-items:center;
  min-height:100svh;
  padding:
    clamp(50px,6vh,84px)
    0
    clamp(50px,6vh,84px)!important;
  background:
    radial-gradient(circle at 94% 3%,rgba(32,86,248,.055),transparent 24%),
    linear-gradient(180deg,#EEF3F9,#F7F9FC)!important;
}

.industry-editorial-v8>.container{
  width:min(calc(100% - 48px),1440px);
}

.industry-editorial-v8 .section-heading{
  margin-bottom:clamp(24px,3.2vh,38px);
}

.industry-editorial-v8 .section-heading h2{
  font-size:clamp(2.6rem,4.6vw,5.4rem);
}

.industry-mosaic-v8{
  width:100%;
  min-height:clamp(640px,72vh,820px);
  display:grid!important;
  grid-template-columns:minmax(390px,1.28fr) repeat(2,minmax(260px,.88fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.industry-mosaic-v8 .industry-card{
  min-height:0!important;
  height:100%;
  border-radius:24px!important;
}

.industry-card-automotive{
  grid-column:1!important;
  grid-row:1 / 3!important;
  min-height:0!important;
}

/* Video / poster cubren por completo la tarjeta */
.industry-card-automotive .industry-media{
  inset:0!important;
}

.industry-card-automotive .industry-media-poster,
.industry-card-automotive .industry-media-video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

.industry-card-automotive .industry-media-poster{
  opacity:1!important;
}

.industry-card-automotive .industry-media-video{
  opacity:0!important;
}

.industry-card-automotive .industry-media.is-video-ready .industry-media-video{
  opacity:1!important;
}

.industry-card-automotive .industry-media.is-video-ready .industry-media-poster{
  opacity:0!important;
}

.industry-card-automotive .industry-media.is-video-error .industry-media-poster{
  opacity:1!important;
}

.industry-card-automotive .industry-media.is-video-error .industry-media-video{
  display:none!important;
}

.industry-card-automotive{
  justify-content:space-between!important;
  padding:1.65rem!important;
}

.industry-card-automotive .industry-content{
  margin-top:auto!important;
  max-width:94%;
}

.industry-card-automotive h3{
  max-width:580px!important;
  font-size:clamp(2.8rem,4.6vw,5.1rem)!important;
  line-height:.94!important;
}

.industry-card-automotive p{
  max-width:570px!important;
}

/* Tarjetas secundarias: imagen realmente visible, no fantasma */
.industry-editorial-v8 .industry-card-with-image{
  isolation:isolate;
  background:#fff!important;
}

.industry-editorial-v8 .industry-card-bg{
  opacity:1!important;
}

.industry-editorial-v8 .industry-card-bg img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  filter:saturate(.7) contrast(.98)!important;
  transform:scale(1.01);
}

.industry-editorial-v8 .industry-card-bg::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.76) 46%,rgba(255,255,255,.98) 82%),
    linear-gradient(90deg,rgba(211,220,250,.12),transparent 72%)!important;
}

.industry-editorial-v8 .industry-card-with-image:hover .industry-card-bg{
  opacity:1!important;
}

.industry-editorial-v8 .industry-card-with-image .industry-content{
  margin-top:auto;
}

.industry-editorial-v8 .industry-card-with-image h3{
  font-size:clamp(1.8rem,2.5vw,2.9rem);
}

.industry-editorial-v8 .industry-card-with-image p{
  max-width:390px;
}

/* ========================================================================
   07 · INDUSTRIAS · TABLET
   ======================================================================== */

@media(max-width:1100px){

  .industry-editorial-v8{
    min-height:auto;
  }

  .industry-mosaic-v8{
    min-height:0;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto!important;
  }

  .industry-card-automotive{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    min-height:560px!important;
  }

  .industry-mosaic-v8 .industry-card:not(.industry-card-automotive){
    min-height:330px!important;
  }
}

/* ========================================================================
   08 · INDUSTRIAS · MOBILE
   ======================================================================== */

@media(max-width:720px){

  .industry-editorial-v8{
    min-height:auto;
    padding:64px 0!important;
  }

  .industry-editorial-v8>.container{
    width:min(calc(100% - 24px),1440px);
  }

  .industry-editorial-v8 .section-heading{
    margin-bottom:28px;
  }

  .industry-mosaic-v8{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .industry-card-automotive{
    grid-column:auto!important;
    min-height:600px!important;
  }

  .industry-mosaic-v8 .industry-card:not(.industry-card-automotive){
    min-height:330px!important;
  }

  .industry-card-automotive h3{
    font-size:clamp(2.5rem,11.4vw,3.9rem)!important;
  }

  .industry-editorial-v8 .industry-card-with-image h3{
    font-size:clamp(1.8rem,8vw,2.6rem)!important;
  }
}

@media(max-width:430px){

  .industry-card-automotive{
    min-height:540px!important;
    padding:1.25rem!important;
  }

  .industry-mosaic-v8 .industry-card:not(.industry-card-automotive){
    min-height:300px!important;
    padding:1.2rem!important;
  }
}

/* ========================================================================
   09 · SELECTED WORK V8 · MAYOR PRESENCIA Y FOTOS VISIBLES
   ======================================================================== */

.work-editorial-v8{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:
    clamp(60px,7vh,92px)
    0
    clamp(60px,7vh,92px)!important;
}

.work-editorial-v8>.container{
  width:min(calc(100% - 48px),1440px);
}

.work-editorial-v8 .work-feature{
  min-height:clamp(620px,68vh,790px)!important;
}

.work-editorial-v8 .work-visual{
  min-height:inherit!important;
}

.work-editorial-v8 .work-visual img,
.work-editorial-v8 .work-card img{
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
}

.work-editorial-v8 .work-secondary{
  gap:14px;
}

.work-editorial-v8 .work-card{
  min-height:420px!important;
}

@media(max-width:1100px){

  .work-editorial-v8{
    min-height:auto;
  }

  .work-editorial-v8 .work-feature{
    min-height:auto!important;
  }

  .work-editorial-v8 .work-visual{
    min-height:500px!important;
  }
}

@media(max-width:720px){

  .work-editorial-v8{
    padding:64px 0!important;
  }

  .work-editorial-v8>.container{
    width:min(calc(100% - 24px),1440px);
  }

  .work-editorial-v8 .work-visual{
    min-height:360px!important;
  }

  .work-editorial-v8 .work-card{
    min-height:390px!important;
  }
}

/* ========================================================================
   10 · HARDENING
   ======================================================================== */

.services-request-layer[hidden],
.services-drawer-layer[hidden],
.services-discard-layer[hidden],
.services-request-state[hidden],
.services-drawer-panel[hidden],
.services-ticket-stage[hidden],
.services-objective-options[hidden],
.services-request-mobile-actions[hidden]{
  display:none!important;
}

/* El modal siempre supera al header */
.site-header{
  z-index:1000;
}

.services-drawer-layer{
  z-index:2200!important;
}

.services-request-layer-v8{
  z-index:3000!important;
}

.services-discard-layer{
  z-index:3200!important;
}

/* ========================================================================
   11 · REDUCED MOTION
   ======================================================================== */

@media(prefers-reduced-motion:reduce){

  .industry-media-video{
    display:none!important;
  }

  .industry-media-poster{
    opacity:1!important;
  }

  .industry-card-bg img,
  .industry-media-poster,
  .industry-media-video{
    transition:none!important;
    transform:none!important;
  }
}

/* ========================================================================
   FIN · PRODUCTION V8
   ======================================================================== */

/* ========================================================================
   B2W REQUEST MOBILE · HOTFIX V8.1
   SOLO corrige la solicitud móvil.
   - Oculta completamente el header global.
   - Solicitud ocupa 100dvh real.
   - Header del proceso arriba.
   - Cuerpo central con scroll.
   - Barra inferior SIEMPRE visible y fija.
   ======================================================================== */

@media(max-width:720px){

  /* ------------------------------------------------------------
     1. El header general de B2W NO participa mientras el modal está abierto
  ------------------------------------------------------------ */
  body.services-request-open .site-header{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-100%)!important;
  }

  /* Evita que el stacking context de Servicios deje al header por encima */
  body.services-request-open .services-production{
    isolation:auto!important;
    z-index:auto!important;
  }

  /* ------------------------------------------------------------
     2. Capa global por encima de TODA la web
  ------------------------------------------------------------ */
  body.services-request-open .services-request-layer,
  body.services-request-open .services-request-layer-v8{
    position:fixed!important;
    inset:0!important;
    z-index:9999!important;
    display:block!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    background:#050B18!important;
    overflow:hidden!important;
  }

  body.services-request-open .services-request-backdrop,
  body.services-request-open .services-request-backdrop-v8{
    display:none!important;
  }

  /* ------------------------------------------------------------
     3. El dialog es una app de 3 filas:
        header / scroll / acciones
  ------------------------------------------------------------ */
  body.services-request-open .services-request-dialog,
  body.services-request-open .services-request-dialog-v8{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;

    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;

    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;

    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;

    background:
      radial-gradient(circle at 92% 0%,rgba(32,86,248,.10),transparent 28%),
      linear-gradient(180deg,#071229 0%,#050B18 100%)!important;
  }

  /* ------------------------------------------------------------
     4. Header propio del proceso
        Mobile = solamente X arriba
  ------------------------------------------------------------ */
  body.services-request-open .services-request-header,
  body.services-request-open .services-request-header-v8{
    position:relative!important;
    z-index:3!important;
    grid-row:1!important;

    width:100%!important;
    margin:0!important;
    padding:
      max(8px,env(safe-area-inset-top))
      12px
      0!important;

    border-bottom:1px solid rgba(128,153,243,.18)!important;
    background:#06101F!important;
    box-shadow:none!important;
  }

  body.services-request-open .services-request-exit-desktop{
    display:none!important;
  }

  body.services-request-open .services-request-topbar{
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }

  body.services-request-open .services-request-close{
    position:relative!important;
    inset:auto!important;

    display:grid!important;
    place-items:center!important;

    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;

    margin:0!important;
    padding:0!important;

    border:1px solid rgba(128,153,243,.24)!important;
    border-radius:50%!important;

    background:#08162A!important;
    color:#FFFFFF!important;
  }

  body.services-request-open .services-request-context{
    display:grid!important;
    gap:1px!important;
    margin:0!important;
    padding:0 44px 1px 0!important;
  }

  body.services-request-open .services-request-brand{
    margin:0!important;
    font-size:.53rem!important;
  }

  body.services-request-open .services-request-context h3{
    margin:0!important;
    font-size:.9rem!important;
    line-height:1.15!important;
  }

  body.services-request-open .services-request-selection{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px!important;
    margin:4px 0 0!important;
    font-size:.61rem!important;
    line-height:1.25!important;
  }

  /* ------------------------------------------------------------
     5. Progreso compacto
  ------------------------------------------------------------ */
  body.services-request-open .services-request-stepper-desktop{
    display:none!important;
  }

  body.services-request-open .services-request-progress-mobile{
    display:grid!important;
    gap:6px!important;
    margin:0!important;
    padding:9px 0 10px!important;
  }

  body.services-request-open .services-request-progress-mobile>div:first-child{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:18px!important;
  }

  body.services-request-open .services-request-progress-mobile span{
    font-size:.6rem!important;
  }

  body.services-request-open .services-request-progress-mobile strong{
    font-size:.66rem!important;
    text-transform:uppercase!important;
  }

  body.services-request-open .services-request-progress-track{
    width:100%!important;
    height:3px!important;
  }

  /* ------------------------------------------------------------
     6. SOLO esta zona hace scroll
  ------------------------------------------------------------ */
  body.services-request-open .services-request-body,
  body.services-request-open .services-request-body-v8{
    position:relative!important;
    z-index:1!important;
    grid-row:2!important;

    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;

    margin:0!important;
    padding:16px 10px 22px!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.services-request-open .services-request-state{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }

  body.services-request-open .services-request-state-head{
    margin:0 0 14px!important;
  }

  body.services-request-open .services-request-state-head .eyebrow{
    margin:0 0 8px!important;
    font-size:.61rem!important;
  }

  body.services-request-open .services-request-state-head h4{
    max-width:300px!important;
    margin:0!important;
    font-size:clamp(1.75rem,8.8vw,2.55rem)!important;
    line-height:.98!important;
  }

  body.services-request-open .services-request-state-head>p:not(.eyebrow){
    margin:10px 0 0!important;
    font-size:.79rem!important;
    line-height:1.55!important;
  }

  /* ------------------------------------------------------------
     7. Formulario móvil más compacto
  ------------------------------------------------------------ */
  body.services-request-open .services-request-form{
    width:100%!important;
    margin:0!important;
    padding:14px 9px!important;
    border-radius:16px!important;
  }

  body.services-request-open .services-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  body.services-request-open .services-request-form .field{
    gap:4px!important;
  }

  body.services-request-open .services-request-form label,
  body.services-request-open .services-needs-field legend{
    font-size:.66rem!important;
  }

  body.services-request-open .services-request-form input,
  body.services-request-open .services-request-form select,
  body.services-request-open .services-objective-trigger{
    min-height:46px!important;
    padding:9px 11px!important;
    border-radius:10px!important;
  }

  body.services-request-open .services-request-form textarea{
    min-height:108px!important;
    padding:10px 11px!important;
    border-radius:10px!important;
  }

  body.services-request-open .services-needs-chips{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body.services-request-open .services-need-chip span{
    min-height:34px!important;
    padding:6px 6px!important;
    font-size:.61rem!important;
  }

  body.services-request-open .services-field-help,
  body.services-request-open .services-form-note{
    font-size:.62rem!important;
    line-height:1.4!important;
  }

  body.services-request-open .services-request-form .consent{
    font-size:.67rem!important;
    line-height:1.4!important;
  }

  /* ------------------------------------------------------------
     8. Barra inferior: SIEMPRE visible
        Esta es la corrección principal de la captura.
  ------------------------------------------------------------ */
  body.services-request-open .services-request-mobile-actions,
  body.services-request-open .services-request-mobile-actions-v8{
    position:relative!important;
    z-index:5!important;
    grid-row:3!important;

    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;

    margin:0!important;
    padding:
      7px
      8px
      max(7px,env(safe-area-inset-bottom))!important;

    border-top:1px solid rgba(128,153,243,.22)!important;

    background:#050C1B!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.34)!important;

    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }

  /*
   * El atributo [hidden] del NAV general NO debe apagar la barra
   * cuando la solicitud ya está abierta. El JS decide qué estado
   * interno mostrar.
   */
  body.services-request-open .services-request-mobile-actions[hidden],
  body.services-request-open .services-request-mobile-actions-v8[hidden]{
    display:block!important;
  }

  body.services-request-open .services-request-mobile-actions>div,
  body.services-request-open .services-request-mobile-actions-v8>div{
    display:none!important;
  }

  body.services-request-open
  .services-request-mobile-actions>div:not([hidden]),
  body.services-request-open
  .services-request-mobile-actions-v8>div:not([hidden]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(70px,.72fr) minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:5px!important;
  }

  body.services-request-open .services-request-mobile-actions button,
  body.services-request-open .services-request-mobile-actions>div>span,
  body.services-request-open .services-request-mobile-actions-v8 button,
  body.services-request-open .services-request-mobile-actions-v8>div>span{
    min-width:0!important;
    min-height:48px!important;
    border-radius:11px!important;
  }

  body.services-request-open .services-request-mobile-actions button,
  body.services-request-open .services-request-mobile-actions-v8 button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    padding:0 6px!important;

    border:1px solid rgba(128,153,243,.22)!important;
    background:#09162E!important;
    color:#D3DCFA!important;

    font-size:.62rem!important;
    font-weight:850!important;
    line-height:1.15!important;
    text-align:center!important;
  }

  body.services-request-open .services-request-mobile-actions button:last-child,
  body.services-request-open .services-request-mobile-actions-v8 button:last-child{
    border-color:#4268EF!important;
    background:linear-gradient(135deg,#2056F8,#4268EF)!important;
    color:#FFFFFF!important;
  }

  body.services-request-open .services-request-mobile-actions>div>span,
  body.services-request-open .services-request-mobile-actions-v8>div>span{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    padding:4px!important;
    background:rgba(255,255,255,.025)!important;
  }

  body.services-request-open .services-request-mobile-actions>div>span strong,
  body.services-request-open .services-request-mobile-actions-v8>div>span strong{
    font-size:.59rem!important;
  }

  body.services-request-open .services-request-mobile-actions>div>span small,
  body.services-request-open .services-request-mobile-actions-v8>div>span small{
    margin-top:2px!important;
    font-size:.49rem!important;
  }

  /*
   * Los botones duplicados que viven dentro del contenido siguen ocultos.
   * Las acciones se hacen solamente desde la barra inferior.
   */
  body.services-request-open
  .services-request-state[data-request-state="data"]
  .services-form-submit .services-review-submit,
  body.services-request-open
  .services-request-state[data-request-state="review"]
  .services-review-actions,
  body.services-request-open
  .services-request-state[data-request-state="ticket"]
  .services-ticket-actions{
    display:none!important;
  }
}

@media(max-width:380px){
  body.services-request-open .services-request-body{
    padding-inline:8px!important;
  }

  body.services-request-open .services-request-form{
    padding-inline:8px!important;
  }

  body.services-request-open .services-request-mobile-actions,
  body.services-request-open .services-request-mobile-actions-v8{
    padding-inline:5px!important;
  }

  body.services-request-open
  .services-request-mobile-actions>div:not([hidden]),
  body.services-request-open
  .services-request-mobile-actions-v8>div:not([hidden]){
    grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr)!important;
  }

  body.services-request-open .services-request-mobile-actions button,
  body.services-request-open .services-request-mobile-actions-v8 button{
    font-size:.58rem!important;
  }
}

/* ========================================================================
   FIN · HOTFIX REQUEST MOBILE V8.1
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · PRODUCTION V8.2
   DESKTOP REQUEST FIX + INDUSTRIES SENIOR REDESIGN
   ------------------------------------------------------------
   ALCANCE:
   - Desktop request: el header normal del Home desaparece por completo.
   - Mobile request: NO se modifica.
   - Industrias: menos ruido, mayor jerarquía editorial.
   ======================================================================== */

/* ========================================================================
   01 · DESKTOP REQUEST · CONTROL TOTAL DEL VIEWPORT
   ======================================================================== */

@media(min-width:721px){

  /*
   * Cuando la solicitud está abierta, la navegación principal del sitio
   * no forma parte de la experiencia. Se oculta visualmente y se bloquea.
   */
  body.services-request-open .site-header{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-100%)!important;
  }

  /*
   * El antiguo isolation:isolate de .services-production creaba un
   * stacking context que podía dejar al header por encima del modal.
   * Solo lo anulamos mientras la solicitud está abierta.
   */
  body.services-request-open .services-production{
    isolation:auto!important;
  }

  /*
   * Capa del request por encima de cualquier navegación, dropdown,
   * sticky, drawer o contenido del Home.
   */
  body.services-request-open .services-request-layer,
  body.services-request-open .services-request-layer-v8{
    position:fixed!important;
    inset:0!important;
    z-index:9999!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:24px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
  }

  body.services-request-open .services-request-backdrop,
  body.services-request-open .services-request-backdrop-v8{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:rgba(1,6,16,.76)!important;
    backdrop-filter:blur(12px) saturate(78%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(78%)!important;
  }

  body.services-request-open .services-request-dialog,
  body.services-request-open .services-request-dialog-v8{
    position:relative!important;
    z-index:2!important;
    width:min(1180px,calc(100vw - 48px))!important;
    height:min(860px,calc(100dvh - 48px))!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:26px!important;
    box-shadow:
      0 42px 120px rgba(0,0,0,.66),
      0 0 0 1px rgba(128,153,243,.05)!important;
  }

  /*
   * La cabecera del modal permanece dentro de la ventana y nunca queda
   * por detrás de la navegación general.
   */
  body.services-request-open .services-request-header-v8{
    position:relative!important;
    z-index:20!important;
  }

  body.services-request-open .services-request-close{
    position:relative!important;
    z-index:30!important;
  }
}

/* Desktop de poca altura */
@media(min-width:721px) and (max-height:760px){
  body.services-request-open .services-request-layer,
  body.services-request-open .services-request-layer-v8{
    padding:10px 18px!important;
  }

  body.services-request-open .services-request-dialog,
  body.services-request-open .services-request-dialog-v8{
    width:min(1180px,calc(100vw - 36px))!important;
    height:calc(100dvh - 20px)!important;
    border-radius:20px!important;
  }
}

/* ========================================================================
   02 · INDUSTRIES · SENIOR EDITORIAL REDESIGN
   ======================================================================== */

.industry-editorial-v8{
  --ind-blue:#2056F8;
  --ind-deep:#0E1A47;
  --ind-ink:#08111F;
  --ind-copy:#56667B;
  --ind-border:#D5DEEA;
  --ind-paper:#F8FAFD;

  background:
    radial-gradient(circle at 88% 4%,rgba(32,86,248,.045),transparent 25%),
    linear-gradient(180deg,#F1F5FA 0%,#F8FAFD 100%)!important;
}

/* Cabecera más editorial y con más aire */
.industry-editorial-v8 .section-heading{
  max-width:1080px;
  margin-bottom:clamp(30px,4vh,46px)!important;
}

.industry-editorial-v8 .section-heading h2{
  max-width:850px;
  color:var(--ind-ink);
  font-size:clamp(3rem,5vw,5.7rem)!important;
  line-height:.92!important;
}

.industry-editorial-v8 .section-heading p:not(.eyebrow){
  max-width:720px;
  color:#64738A!important;
}

/* Mosaico: una protagonista + cuatro editoriales */
.industry-mosaic-v8{
  gap:14px!important;
}

/* ------------------------------------------------------------------------
   AUTOMOTRIZ · HERO CARD
------------------------------------------------------------------------ */

.industry-card-automotive{
  position:relative;
  overflow:hidden;
  background:#0E1A47!important;
  border:1px solid rgba(32,86,248,.32)!important;
  box-shadow:
    0 28px 70px rgba(14,26,71,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Media llena la tarjeta y se comporta como pieza cinematográfica */
.industry-card-automotive .industry-media{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
}

.industry-card-automotive .industry-media-poster,
.industry-card-automotive .industry-media-video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(.82) contrast(1.04) brightness(.78)!important;
}

/*
 * Overlay con lectura clara:
 * imagen visible arriba / transición / base profunda para el copy.
 */
.industry-card-automotive .industry-media-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(4,13,31,.10) 0%,
      rgba(7,22,55,.12) 28%,
      rgba(9,28,67,.52) 58%,
      rgba(5,18,45,.93) 82%,
      rgba(4,14,35,.98) 100%
    ),
    linear-gradient(
      90deg,
      rgba(14,26,71,.26) 0%,
      rgba(32,86,248,.06) 62%,
      rgba(14,26,71,.14) 100%
    )!important;
}

/* El contenido ya no compite con la imagen */
.industry-card-automotive .industry-content{
  position:relative!important;
  z-index:5!important;
  max-width:92%!important;
  margin-top:auto!important;
}

.industry-card-automotive h3{
  max-width:620px!important;
  margin-bottom:14px!important;
  color:#fff!important;
  font-size:clamp(3rem,4.8vw,5.25rem)!important;
  line-height:.91!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}

.industry-card-automotive p{
  max-width:570px!important;
  color:#D3DCFA!important;
  font-size:.92rem!important;
  line-height:1.65!important;
}

/* Marcas: sin pills pesados */
.industry-card-automotive .industry-brands{
  gap:.55rem 1rem!important;
  margin-top:1.25rem!important;
}

.industry-card-automotive .industry-brands span{
  min-height:auto!important;
  padding:0!important;
  color:#F7FAFF!important;
  background:transparent!important;
  border:0!important;
  font-size:.68rem!important;
}

.industry-card-automotive .industry-brands span::before{
  width:6px!important;
  height:6px!important;
  background:#64D9FF!important;
  box-shadow:0 0 0 4px rgba(100,217,255,.08)!important;
}

.industry-card-automotive .industry-tags{
  margin-top:1.1rem!important;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.11);
  color:#A9BAF6!important;
  font-size:.64rem!important;
  letter-spacing:.1em!important;
}

/* ------------------------------------------------------------------------
   SECONDARY INDUSTRY CARDS · IMAGEN ARRIBA, TEXTO LIMPIO ABAJO
------------------------------------------------------------------------ */

.industry-editorial-v8 .industry-card-with-image{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  overflow:hidden;
  padding:0!important;
  background:#FFFFFF!important;
  border:1px solid var(--ind-border)!important;
  box-shadow:
    0 10px 30px rgba(28,57,100,.045),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/*
 * La imagen deja de ser un wallpaper debajo del texto.
 * Se convierte en una zona visual superior controlada.
 */
.industry-editorial-v8 .industry-card-with-image .industry-card-bg{
  position:absolute!important;
  inset:0 0 auto 0!important;
  z-index:0!important;
  width:100%!important;
  height:44%!important;
  opacity:1!important;
  overflow:hidden!important;
  pointer-events:none;
}

.industry-editorial-v8 .industry-card-with-image .industry-card-bg img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(.72) contrast(.98) brightness(.97)!important;
  transform:scale(1.01)!important;
}

/* Fade físico entre imagen y papel */
.industry-editorial-v8 .industry-card-with-image .industry-card-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.06) 46%,
      rgba(255,255,255,.70) 78%,
      #FFFFFF 100%
    )!important;
}

/* Header/número se mantiene legible sobre la imagen */
.industry-editorial-v8 .industry-card-with-image .industry-top{
  position:absolute!important;
  z-index:4!important;
  top:1.2rem!important;
  left:1.25rem!important;
  right:1.25rem!important;
  margin:0!important;
}

.industry-editorial-v8 .industry-card-with-image .industry-no{
  color:#0D55FF!important;
  text-shadow:0 1px 12px rgba(255,255,255,.8);
}

.industry-editorial-v8 .industry-card-with-image .industry-arrow{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(22,46,79,.10);
}

/* Área editorial limpia para texto */
.industry-editorial-v8 .industry-card-with-image .industry-content{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  margin-top:auto!important;
  padding:
    calc(44% + 1.25rem)
    1.25rem
    1.25rem!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,0),#fff 13%,#fff 100%);
}

.industry-editorial-v8 .industry-card-with-image h3{
  max-width:360px;
  margin:0 0 .55rem!important;
  color:var(--ind-ink)!important;
  font-size:clamp(1.85rem,2.35vw,2.7rem)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}

.industry-editorial-v8 .industry-card-with-image p{
  max-width:380px!important;
  margin:0!important;
  color:var(--ind-copy)!important;
  font-size:.82rem!important;
  line-height:1.55!important;
}

/* Marcas editoriales, no chips */
.industry-editorial-v8 .industry-card-with-image .industry-brands{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .85rem!important;
  margin-top:.9rem!important;
}

.industry-editorial-v8 .industry-card-with-image .industry-brands span{
  min-height:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#1B2E48!important;
  font-size:.65rem!important;
  font-weight:850!important;
}

.industry-editorial-v8 .industry-card-with-image .industry-brands span::before{
  width:6px!important;
  height:6px!important;
  box-shadow:0 0 0 4px rgba(13,85,255,.06)!important;
}

.industry-editorial-v8 .industry-card-with-image .industry-tags{
  margin-top:.85rem!important;
  padding-top:.75rem;
  border-top:1px solid #E1E7F0;
  color:#0D55FF!important;
  font-size:.59rem!important;
  letter-spacing:.09em!important;
}

/* Hover senior: contenido no salta, solo la media respira */
.industry-editorial-v8 .industry-card-with-image:hover{
  transform:translateY(-3px)!important;
  border-color:#BED0EA!important;
  box-shadow:0 18px 44px rgba(28,57,100,.09)!important;
}

.industry-editorial-v8 .industry-card-with-image:hover .industry-card-bg img{
  transform:scale(1.035)!important;
}

/* ========================================================================
   03 · INDUSTRIES RESPONSIVE · TABLET
   ======================================================================== */

@media(max-width:1100px){

  .industry-editorial-v8 .industry-card-with-image{
    min-height:360px!important;
  }

  .industry-editorial-v8 .industry-card-with-image .industry-card-bg{
    height:42%!important;
  }

  .industry-editorial-v8 .industry-card-with-image .industry-content{
    padding-top:calc(42% + 1.2rem)!important;
  }
}

/* ========================================================================
   04 · INDUSTRIES RESPONSIVE · MOBILE
   No modifica el request móvil.
   ======================================================================== */

@media(max-width:720px){

  .industry-editorial-v8 .industry-card-with-image{
    min-height:360px!important;
  }

  .industry-editorial-v8 .industry-card-with-image .industry-card-bg{
    height:46%!important;
  }

  .industry-editorial-v8 .industry-card-with-image .industry-content{
    padding:
      calc(46% + 1.15rem)
      1.15rem
      1.15rem!important;
  }

  .industry-editorial-v8 .industry-card-with-image h3{
    font-size:clamp(1.9rem,8.5vw,2.65rem)!important;
  }
}

/* ========================================================================
   FIN · PRODUCTION V8.2
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · V9
   SELECTED WORK + INDUSTRIES SHOWREEL
   ------------------------------------------------------------
   AISLAMIENTO TOTAL:
   - Solo .b2w-work-v9-*
   - Solo .b2w-industries-v9-*
   - NO modifica Servicios
   - NO modifica request modal
   - NO modifica header
   - NO modifica flujo móvil de solicitud
   ======================================================================== */


/* ========================================================================
   01 · TOKENS V9
   ======================================================================== */

.b2w-work-v9,
.b2w-industries-v9{
  --v9-blue:#2056F8;
  --v9-blue-2:#4268EF;
  --v9-navy:#0E1A47;
  --v9-navy-deep:#050B18;
  --v9-ink:#07111F;
  --v9-copy:#5E6E84;
  --v9-line:#D8E1EC;
  --v9-paper:#F7F9FC;
  --v9-white:#FFFFFF;
  --v9-soft:#D3DCFA;
}


/* ========================================================================
   02 · SELECTED WORK / CASOS
   ======================================================================== */

.b2w-work-v9{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:clamp(76px,7vw,118px) 0!important;
  overflow:hidden;
  color:var(--v9-ink);
  background:
    radial-gradient(circle at 90% 4%,rgba(32,86,248,.045),transparent 25%),
    linear-gradient(180deg,#F8FAFD 0%,#F3F6FA 100%);
}

.b2w-work-v9-container{
  width:min(calc(100% - 64px),1460px)!important;
}


/* ------------------------------------------------------------------------
   Heading
------------------------------------------------------------------------ */

.b2w-work-v9-heading{
  margin-bottom:28px;
}

.b2w-work-v9-heading-line{
  display:grid;
  grid-template-columns:auto auto minmax(40px,1fr);
  align-items:center;
  gap:14px;
  margin-bottom:30px;
}

.b2w-work-v9-kicker,
.b2w-work-v9-counter{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.b2w-work-v9-kicker{
  color:var(--v9-blue);
}

.b2w-work-v9-counter{
  color:#8996A8;
}

.b2w-work-v9-rule{
  width:100%;
  height:1px;
  background:#D7DEE8;
}

.b2w-work-v9-title-wrap{
  max-width:920px;
}

.b2w-work-v9-title-wrap .eyebrow{
  margin-bottom:14px;
}

.b2w-work-v9-title-wrap h2{
  max-width:900px;
  margin:0;
  color:var(--v9-ink);
  font-size:clamp(2.8rem,4.8vw,5.35rem);
  line-height:.94;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.b2w-work-v9-title-wrap .lead{
  max-width:760px;
  margin:20px 0 0;
  color:#66758A;
  font-size:clamp(.98rem,1.2vw,1.12rem);
  line-height:1.7;
}


/* ------------------------------------------------------------------------
   Featured case
------------------------------------------------------------------------ */

.b2w-work-v9-feature{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(390px,.98fr);
  min-height:560px;
  overflow:hidden;
  border:1px solid #D2DCE9;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 58px rgba(25,55,98,.07);
}

.b2w-work-v9-feature-media{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:var(--v9-navy);
}

.b2w-work-v9-feature-media>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.82) contrast(1.03);
  transform:scale(1.002);
}

.b2w-work-v9-media-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,10,25,.06) 16%,rgba(6,22,52,.12) 45%,rgba(4,17,42,.88) 100%),
    linear-gradient(90deg,rgba(14,26,71,.26),transparent 62%);
  pointer-events:none;
}

.b2w-work-v9-feature-index{
  position:absolute;
  z-index:3;
  top:26px;
  left:30px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.b2w-work-v9-feature-index span{
  color:var(--v9-blue);
}

.b2w-work-v9-media-caption{
  position:absolute;
  z-index:3;
  left:30px;
  right:30px;
  bottom:28px;
  max-width:520px;
  color:#fff;
}

.b2w-work-v9-media-caption strong{
  display:block;
  margin-bottom:8px;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
}

.b2w-work-v9-media-caption p{
  margin:0;
  color:#E2E8F1;
  font-size:.85rem;
  line-height:1.6;
}


/* ------------------------------------------------------------------------
   Featured copy
------------------------------------------------------------------------ */

.b2w-work-v9-feature-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(36px,4.5vw,62px);
  background:#fff;
}

.b2w-work-v9-category{
  margin:0 0 20px;
  color:var(--v9-blue);
  font-size:.67rem;
  font-weight:900;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.b2w-work-v9-feature-copy h3{
  max-width:520px;
  margin:0;
  color:var(--v9-ink);
  font-size:clamp(2.5rem,3.8vw,4.5rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.b2w-work-v9-description{
  max-width:520px;
  margin:22px 0 0;
  color:#68778C;
  font-size:.92rem;
  line-height:1.72;
}

.b2w-work-v9-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid #DDE4ED;
}

.b2w-work-v9-metrics>div{
  min-width:0;
  padding-right:16px;
}

.b2w-work-v9-metrics>div+div{
  padding-left:16px;
  border-left:1px solid #DDE4ED;
}

.b2w-work-v9-metrics strong{
  display:block;
  color:var(--v9-blue);
  font-size:clamp(1.45rem,2.1vw,2rem);
  line-height:1;
  letter-spacing:-.04em;
}

.b2w-work-v9-metrics span{
  display:block;
  margin-top:7px;
  color:#7E8A9C;
  font-size:.58rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.b2w-work-v9-main-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:30px;
  color:var(--v9-ink);
  font-size:.84rem;
  font-weight:900;
  transition:color .2s ease,transform .2s ease;
}

.b2w-work-v9-main-link:hover,
.b2w-work-v9-main-link:focus-visible{
  color:var(--v9-blue);
  transform:translateX(3px);
  outline:none;
}


/* ------------------------------------------------------------------------
   Secondary cases
------------------------------------------------------------------------ */

.b2w-work-v9-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.b2w-work-v9-card{
  position:relative;
  min-height:350px;
  overflow:hidden;
  border-radius:20px;
  background:#071426;
  color:#fff;
  isolation:isolate;
}

.b2w-work-v9-card>img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.78) contrast(1.04);
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .35s ease;
}

.b2w-work-v9-card-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(4,14,34,.04) 12%,rgba(6,23,55,.22) 43%,rgba(3,15,37,.94) 84%),
    linear-gradient(90deg,rgba(14,26,71,.16),transparent 62%);
  transition:background .3s ease;
}

.b2w-work-v9-card-content{
  position:absolute;
  z-index:3;
  inset:auto 24px 22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.b2w-work-v9-card-kicker{
  display:block;
  margin-bottom:12px;
  color:#A9BAF6;
  font-size:.62rem;
  font-weight:900;
  line-height:1.3;
  letter-spacing:.1em;
}

.b2w-work-v9-card h3{
  margin:0;
  color:#fff;
  font-size:clamp(1.65rem,2.3vw,2.35rem);
  line-height:1;
  letter-spacing:-.04em;
}

.b2w-work-v9-card-hover{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .3s ease,opacity .3s ease,margin .3s ease;
}

.b2w-work-v9-card-hover>*{
  overflow:hidden;
}

.b2w-work-v9-card-hover p{
  margin:0;
  color:#D7DEE9;
  font-size:.79rem;
  line-height:1.55;
}

.b2w-work-v9-card-link{
  display:inline-block;
  margin-top:10px;
  color:#fff;
  font-size:.7rem;
  font-weight:900;
}

.b2w-work-v9-card-metrics{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 16px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
}

.b2w-work-v9-card-metrics strong{
  display:flex;
  align-items:baseline;
  gap:6px;
  color:#fff;
  font-size:1.1rem;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.b2w-work-v9-card-metrics small{
  color:#C9D3E1;
  font-size:.5rem;
  font-weight:600;
  letter-spacing:0;
}

@media(hover:hover){
  .b2w-work-v9-card:hover>img{
    transform:scale(1.04);
    filter:saturate(.84) contrast(1.05);
  }

  .b2w-work-v9-card:hover .b2w-work-v9-card-overlay{
    background:
      linear-gradient(180deg,rgba(4,14,34,.06) 8%,rgba(4,18,45,.34) 36%,rgba(2,12,31,.97) 80%),
      linear-gradient(90deg,rgba(14,26,71,.20),transparent 62%);
  }

  .b2w-work-v9-card:hover .b2w-work-v9-card-hover{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:12px;
  }
}

.b2w-work-v9-card:focus-visible{
  outline:3px solid rgba(32,86,248,.48);
  outline-offset:3px;
}


/* ------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------ */

.b2w-work-v9-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid #D7DEE8;
}

.b2w-work-v9-footer p{
  margin:0;
  color:#6C798B;
  font-size:.84rem;
}

.b2w-work-v9-footer a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  color:var(--v9-blue);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.04em;
}

.b2w-work-v9-footer a span{
  font-size:1.2rem;
  transition:transform .2s ease;
}

.b2w-work-v9-footer a:hover span{
  transform:translateX(4px);
}


/* ========================================================================
   03 · INDUSTRIES / SHOWREEL
   ======================================================================== */

.b2w-industries-v9{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:clamp(76px,7vw,118px) 0!important;
  overflow:hidden;
  color:var(--v9-ink);
  background:
    radial-gradient(circle at 92% 4%,rgba(32,86,248,.05),transparent 24%),
    linear-gradient(180deg,#F2F6FB 0%,#F8FAFD 100%);
}

.b2w-industries-v9-container{
  width:min(calc(100% - 64px),1460px)!important;
}


/* ------------------------------------------------------------------------
   Heading
------------------------------------------------------------------------ */

.b2w-industries-v9-heading{
  max-width:920px;
  margin-bottom:34px;
}

.b2w-industries-v9-heading .eyebrow{
  margin-bottom:16px;
  color:var(--v9-blue);
}

.b2w-industries-v9-heading h2{
  max-width:800px;
  margin:0;
  color:var(--v9-ink);
  font-size:clamp(3rem,5vw,5.7rem);
  line-height:.91;
  letter-spacing:-.065em;
}

.b2w-industries-v9-heading .lead{
  max-width:790px;
  margin:20px 0 0;
  color:#647287;
  font-size:clamp(.98rem,1.2vw,1.12rem);
  line-height:1.72;
}


/* ------------------------------------------------------------------------
   Main layout
------------------------------------------------------------------------ */

.b2w-industries-v9-layout{
  display:grid;
  grid-template-columns:minmax(420px,1.08fr) minmax(560px,1fr);
  gap:14px;
  align-items:stretch;
}

.b2w-industries-v9-showreel{
  position:relative;
  min-height:720px;
  overflow:hidden;
  border:1px solid #D1DCE9;
  border-radius:24px;
  background:var(--v9-navy);
  color:#fff;
  isolation:isolate;
}


/* ------------------------------------------------------------------------
   Insights editorial showcase
------------------------------------------------------------------------ */

.b2w-insights-showcase{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.b2w-insights-showcase__header{
  position:absolute;
  z-index:7;
  top:24px;
  left:26px;
  right:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  pointer-events:none;
}

.b2w-insights-showcase__header span,
.b2w-insights-showcase__header strong{
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.b2w-insights-showcase__header span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.b2w-insights-showcase__header span::before{
  content:"";
  width:28px;
  height:1px;
  background:#64D9FF;
}

.b2w-insights-showcase__header strong{
  color:#A9BAF6;
  font-variant-numeric:tabular-nums;
}

.b2w-insights-showcase__viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.b2w-insights-showcase__slide{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  visibility:hidden;
  transform:translate3d(18px,0,0);
  pointer-events:none;
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    visibility .72s linear;
}

.b2w-insights-showcase__slide.is-active{
  z-index:2;
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0);
  pointer-events:auto;
}

.b2w-insights-showcase__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#0E1A47;
}

.b2w-insights-showcase__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.78) contrast(1.04) brightness(.72);
  transform:scale(1.01);
  transition:transform 5.5s ease,filter .3s ease;
}

.b2w-insights-showcase__slide.is-active .b2w-insights-showcase__media img{
  transform:scale(1.035);
}

.b2w-insights-showcase__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,10,24,.14) 0%,rgba(4,15,36,.12) 35%,rgba(4,17,42,.60) 70%,rgba(2,12,31,.94) 100%),
    linear-gradient(90deg,rgba(14,26,71,.20),transparent 72%);
}

.b2w-insights-showcase__top{
  position:absolute;
  z-index:4;
  top:72px;
  left:30px;
  right:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.b2w-insights-showcase__top span{
  color:#64D9FF;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.11em;
}

.b2w-insights-showcase__top strong{
  color:rgba(255,255,255,.78);
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.08em;
  text-align:right;
}

.b2w-insights-showcase__content{
  position:absolute;
  z-index:5;
  left:30px;
  right:30px;
  bottom:92px;
  max-width:690px;
}

.b2w-insights-showcase__category{
  margin:0 0 14px;
  color:#64D9FF;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.b2w-insights-showcase__content h3{
  max-width:660px;
  margin:0;
  color:#fff;
  font-size:clamp(2.8rem,4.4vw,5.1rem);
  line-height:.93;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.b2w-insights-showcase__excerpt{
  max-width:610px;
  margin:18px 0 0;
  color:#D7E1EF;
  font-size:.86rem;
  line-height:1.62;
}

.b2w-insights-showcase__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  color:#fff;
  font-size:.76rem;
  font-weight:900;
  text-decoration:none;
}

.b2w-insights-showcase__link span{
  transition:transform .2s ease;
}

.b2w-insights-showcase__link:hover span,
.b2w-insights-showcase__link:focus-visible span{
  transform:translate(3px,-2px);
}

.b2w-insights-showcase__link:focus-visible{
  outline:2px solid #64D9FF;
  outline-offset:5px;
  border-radius:4px;
}

.b2w-insights-showcase__controls{
  position:absolute;
  z-index:8;
  left:26px;
  right:26px;
  bottom:24px;
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:14px;
}

.b2w-insights-showcase__arrow{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(3,13,29,.48);
  color:#fff;
  font:inherit;
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.b2w-insights-showcase__arrow:hover,
.b2w-insights-showcase__arrow:focus-visible{
  border-color:#64D9FF;
  background:rgba(32,86,248,.42);
  transform:translateY(-1px);
  outline:none;
}

.b2w-insights-showcase__arrow:focus-visible{
  box-shadow:0 0 0 3px rgba(100,217,255,.20);
}

.b2w-insights-showcase__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.b2w-insights-showcase__dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.36);
  cursor:pointer;
  transition:width .25s ease,background .25s ease,transform .25s ease;
}

.b2w-insights-showcase__dot.is-active{
  width:32px;
  background:#64D9FF;
}

.b2w-insights-showcase__dot:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}

.b2w-insights-showcase__status{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(hover:hover){
  .b2w-insights-showcase:hover .b2w-insights-showcase__media img{
    filter:saturate(.84) contrast(1.04) brightness(.76);
  }
}


/* ------------------------------------------------------------------------
   Right nav grid
------------------------------------------------------------------------ */

.b2w-industries-v9-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px;
}

.b2w-industries-v9-card{
  appearance:none;
  position:relative;
  display:grid;
  grid-template-rows:minmax(130px,.72fr) minmax(0,1.28fr);
  min-width:0;
  height:100%;
  overflow:hidden;
  padding:0;
  border:1px solid #D4DEE9;
  border-radius:22px;
  background:#fff;
  color:var(--v9-ink);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 26px rgba(25,55,98,.035);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.b2w-industries-v9-card:hover,
.b2w-industries-v9-card:focus-visible{
  transform:translateY(-3px);
  border-color:#BFCDE0;
  box-shadow:0 16px 36px rgba(25,55,98,.08);
  outline:none;
}

.b2w-industries-v9-card.is-active{
  border-color:rgba(32,86,248,.58);
  box-shadow:
    0 16px 36px rgba(32,86,248,.08),
    inset 0 0 0 1px rgba(32,86,248,.10);
}


/* ------------------------------------------------------------------------
   Card media
------------------------------------------------------------------------ */

.b2w-industries-v9-card-media{
  position:relative;
  overflow:hidden;
  background:#0E1A47;
}

.b2w-industries-v9-card-media>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.78) contrast(1.02) brightness(.82);
  transition:transform .45s ease,filter .3s ease;
}

.b2w-industries-v9-card-media>span{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,12,29,.12),rgba(5,19,46,.42)),
    linear-gradient(90deg,rgba(14,26,71,.24),transparent 70%);
}

.b2w-industries-v9-card:hover .b2w-industries-v9-card-media>img,
.b2w-industries-v9-card:focus-visible .b2w-industries-v9-card-media>img{
  transform:scale(1.035);
  filter:saturate(.84) contrast(1.03) brightness(.88);
}

.b2w-industries-v9-card-top{
  position:absolute;
  z-index:3;
  top:14px;
  left:15px;
  right:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.b2w-industries-v9-card-top strong{
  color:#fff;
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
}

.b2w-industries-v9-card-top i{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#08111F;
  font-size:.86rem;
  font-style:normal;
}


/* ------------------------------------------------------------------------
   Card body
------------------------------------------------------------------------ */

.b2w-industries-v9-card-body{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:16px 17px 15px;
  background:#fff;
}

.b2w-industries-v9-card-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-top:-3px;
  margin-bottom:12px;
  border-radius:50%;
  background:var(--v9-blue);
  color:#fff;
  font-size:.9rem;
  box-shadow:0 8px 20px rgba(32,86,248,.18);
}

.b2w-industries-v9-card h3{
  margin:0;
  color:var(--v9-ink);
  font-size:clamp(1.45rem,1.8vw,2rem);
  line-height:1;
  letter-spacing:-.045em;
}

.b2w-industries-v9-card p{
  margin:10px 0 0;
  color:#66758A;
  font-size:.76rem;
  line-height:1.55;
}

.b2w-industries-v9-brands{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:auto;
  padding-top:14px;
}

.b2w-industries-v9-brands span{
  position:relative;
  padding-left:9px;
  color:#1A2940;
  font-size:.6rem;
  font-weight:850;
}

.b2w-industries-v9-brands span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--v9-blue);
}

.b2w-industries-v9-card small{
  display:block;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid #E1E7EF;
  color:var(--v9-blue);
  font-size:.54rem;
  font-weight:900;
  line-height:1.4;
  letter-spacing:.08em;
}


/* ------------------------------------------------------------------------
   Footer industries
------------------------------------------------------------------------ */

.b2w-industries-v9-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:24px;
}

.b2w-industries-v9-footer a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--v9-blue);
  font-size:.82rem;
  font-weight:900;
}

.b2w-industries-v9-footer a span{
  font-size:1.18rem;
  transition:transform .2s ease;
}

.b2w-industries-v9-footer a:hover span{
  transform:translateX(4px);
}


/* ========================================================================
   04 · TABLET
   ======================================================================== */

@media(max-width:1180px){

  .b2w-work-v9,
  .b2w-industries-v9{
    min-height:auto;
  }

  .b2w-work-v9-feature{
    grid-template-columns:1.25fr .95fr;
  }

  .b2w-industries-v9-layout{
    grid-template-columns:1fr;
  }

  .b2w-industries-v9-showreel{
    min-height:620px;
  }

  .b2w-industries-v9-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
  }

  .b2w-industries-v9-card{
    min-height:390px;
  }
}


/* ========================================================================
   05 · TABLET / MOBILE
   ======================================================================== */

@media(max-width:820px){

  .b2w-work-v9-container,
  .b2w-industries-v9-container{
    width:min(calc(100% - 28px),1460px)!important;
  }

  /* Casos */
  .b2w-work-v9-feature{
    grid-template-columns:1fr;
    min-height:0;
  }

  .b2w-work-v9-feature-media{
    min-height:440px;
  }

  .b2w-work-v9-grid{
    grid-template-columns:1fr;
  }

  .b2w-work-v9-card{
    min-height:390px;
  }

  .b2w-work-v9-card-hover{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:10px;
  }

  .b2w-work-v9-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  /* Industrias */
  .b2w-industries-v9-showreel{
    min-height:570px;
  }

  .b2w-insights-showcase__content{
    bottom:92px;
  }

  .b2w-industries-v9-nav{
    grid-template-columns:1fr 1fr;
  }

  .b2w-industries-v9-card{
    min-height:360px;
  }
}


/* ========================================================================
   06 · MOBILE
   ======================================================================== */

@media(max-width:620px){

  .b2w-work-v9,
  .b2w-industries-v9{
    padding:64px 0!important;
  }

  .b2w-work-v9-container,
  .b2w-industries-v9-container{
    width:min(calc(100% - 24px),1460px)!important;
  }

  /* -------------------------
     Work heading
  ------------------------- */

  .b2w-work-v9-heading-line{
    grid-template-columns:auto auto;
    gap:8px 12px;
  }

  .b2w-work-v9-rule{
    grid-column:1/-1;
  }

  .b2w-work-v9-title-wrap h2{
    font-size:clamp(2.45rem,12vw,3.85rem);
  }

  /* -------------------------
     Featured case
  ------------------------- */

  .b2w-work-v9-feature{
    border-radius:20px;
  }

  .b2w-work-v9-feature-media{
    min-height:360px;
  }

  .b2w-work-v9-feature-index{
    top:18px;
    left:18px;
  }

  .b2w-work-v9-media-caption{
    left:18px;
    right:18px;
    bottom:18px;
  }

  .b2w-work-v9-feature-copy{
    padding:28px 20px 30px;
  }

  .b2w-work-v9-feature-copy h3{
    font-size:clamp(2.2rem,10.8vw,3.5rem);
  }

  .b2w-work-v9-metrics{
    grid-template-columns:1fr;
    gap:0;
  }

  .b2w-work-v9-metrics>div{
    padding:12px 0!important;
    border-left:0!important;
    border-top:1px solid #E0E6EE;
  }

  .b2w-work-v9-metrics>div:first-child{
    border-top:0;
    padding-top:0!important;
  }

  .b2w-work-v9-metrics span{
    margin-top:4px;
  }

  /* -------------------------
     Secondary cases
  ------------------------- */

  .b2w-work-v9-card{
    min-height:420px;
    border-radius:18px;
  }

  .b2w-work-v9-card-content{
    inset:auto 18px 18px;
  }

  .b2w-work-v9-card-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .b2w-work-v9-card-metrics strong{
    display:grid;
    gap:3px;
    font-size:1rem;
    white-space:normal;
  }

  /* -------------------------
     Industries heading
  ------------------------- */

  .b2w-industries-v9-heading h2{
    font-size:clamp(2.7rem,12.5vw,4.2rem);
  }

  /* -------------------------
     Showreel
  ------------------------- */

  .b2w-industries-v9-showreel{
    min-height:560px;
    border-radius:20px;
  }

  .b2w-insights-showcase__header{
    top:18px;
    left:18px;
    right:18px;
  }

  .b2w-insights-showcase__top{
    top:64px;
    left:18px;
    right:18px;
  }

  .b2w-insights-showcase__content{
    left:18px;
    right:18px;
    bottom:88px;
  }

  .b2w-insights-showcase__content h3{
    font-size:clamp(2.35rem,11.2vw,3.7rem);
  }

  .b2w-insights-showcase__excerpt{
    font-size:.79rem;
  }

  .b2w-insights-showcase__controls{
    left:18px;
    right:18px;
    bottom:18px;
  }

  /* -------------------------
     Industry nav = horizontal
     scroll-snap
  ------------------------- */

  .b2w-industries-v9-nav{
    display:flex;
    gap:12px;
    margin-inline:-12px;
    padding:2px 12px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .b2w-industries-v9-nav::-webkit-scrollbar{
    display:none;
  }

  .b2w-industries-v9-card{
    flex:0 0 min(82vw,330px);
    min-height:390px;
    scroll-snap-align:start;
    border-radius:18px;
  }

  .b2w-industries-v9-card-media{
    min-height:150px;
  }

  .b2w-industries-v9-card-body{
    padding:16px;
  }

  .b2w-industries-v9-footer{
    justify-content:flex-start;
  }
}


/* ========================================================================
   07 · MOBILE SMALL
   ======================================================================== */

@media(max-width:390px){

  .b2w-work-v9-feature-media{
    min-height:330px;
  }

  .b2w-work-v9-feature-copy{
    padding-inline:17px;
  }

  .b2w-work-v9-card{
    min-height:400px;
  }

  .b2w-industries-v9-showreel{
    min-height:525px;
  }

  .b2w-insights-showcase__content h3{
    font-size:clamp(2.2rem,11.5vw,3.25rem);
  }

  .b2w-industries-v9-card{
    flex-basis:86vw;
  }
}


/* ========================================================================
   08 · REDUCED MOTION
   ======================================================================== */

@media(prefers-reduced-motion:reduce){

  .b2w-work-v9-card>img,
  .b2w-industries-v9-card-media>img,
  .b2w-insights-showcase__slide,
  .b2w-insights-showcase__media img,
  .b2w-insights-showcase__arrow,
  .b2w-insights-showcase__dot{
    transition:none!important;
    transform:none!important;
  }
}


/* ========================================================================
   FIN · B2W V9
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · V10.2
   METODOLOGÍA → PUENTE → CAPACIDADES → B2W APPROACH
   ------------------------------------------------------------------------
   Ajuste aislado para la nueva arquitectura editorial.
   No modifica modal, drawer, request mobile, casos, industrias o team.
   ======================================================================== */


/* ========================================================================
   01 · METODOLOGÍA / AXIO
   ======================================================================== */

#metodologia.axio-section{
  position:relative;
  padding:clamp(82px,8vw,128px) 0;
  background:
    radial-gradient(circle at 90% 8%,rgba(32,86,248,.07),transparent 28%),
    linear-gradient(180deg,#F5F8FC 0%,#EEF3F9 100%);
  color:#07111F;
  overflow:hidden;
}

#metodologia.axio-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(15,45,92,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,45,92,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 82%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 82%);
}

#metodologia .axio-wrap{
  position:relative;
  z-index:1;
  align-items:start;
}

#metodologia .axio-intro .eyebrow{
  color:#2056F8;
  margin-bottom:16px;
}

#metodologia .axio-intro h2{
  color:#0E1A47;
  font-size:clamp(3.6rem,6.3vw,6.4rem);
  line-height:.88;
  letter-spacing:-.065em;
}

#metodologia .axio-intro h3{
  max-width:520px;
  margin-top:14px;
  color:#2056F8;
  font-size:clamp(1.3rem,2vw,1.8rem);
  line-height:1.15;
  letter-spacing:-.025em;
}

#metodologia .axio-intro p{
  max-width:590px;
  color:#5B6A7F;
  font-size:.96rem;
  line-height:1.78;
}

#metodologia .axio-cert{
  border-color:#CBD7E6;
  background:rgba(255,255,255,.82);
  color:#0E1A47;
  box-shadow:0 10px 28px rgba(31,65,115,.055);
}

#metodologia .axio-step{
  min-height:132px;
  border-color:#D6E0EB;
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 40px rgba(30,62,108,.055);
}

#metodologia .axio-step:hover{
  border-color:#B9CCE5;
  box-shadow:0 20px 50px rgba(30,62,108,.10);
}

#metodologia .axio-num{
  color:#2056F8;
}


/* ========================================================================
   02 · PUENTE EDITORIAL DE METODOLOGÍA
   "UNA ESTRUCTURA. MÚLTIPLES FORMAS DE INTERVENIR."
   ======================================================================== */

.services-methodology-bridge{
  position:relative;
  padding:0!important;
  overflow:hidden;
  background:#050F1F;
  color:#fff;
  border-top:1px solid rgba(130,166,223,.12);
  border-bottom:1px solid rgba(130,166,223,.12);
}

.services-methodology-bridge::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 50%,rgba(32,86,248,.17),transparent 28%),
    radial-gradient(circle at 85% 25%,rgba(66,104,239,.08),transparent 24%);
}

.services-methodology-bridge .container{
  position:relative;
  z-index:1;
}

.services-methodology-bridge .services-process-bottom{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  align-items:end;
  gap:clamp(32px,7vw,100px);
  margin:0;
  padding:clamp(56px,6vw,88px) 0;
  border:0;
}

.services-methodology-bridge .services-process-bottom>div{
  max-width:790px;
}

.services-methodology-bridge .eyebrow{
  margin:0 0 14px;
  color:#8099F3;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.14em;
}

.services-methodology-bridge h2{
  margin:0 0 18px;
  max-width:850px;
  color:#fff;
  font-size:clamp(.78rem,1vw,.92rem);
  font-weight:900;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.services-methodology-bridge h3{
  margin:0;
  max-width:780px;
  color:#fff;
  font-size:clamp(2.35rem,4.2vw,4.8rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.services-methodology-bridge .services-process-bottom>p{
  position:relative;
  margin:0;
  max-width:560px;
  padding-left:22px;
  color:#9EADC1;
  font-size:clamp(.95rem,1.15vw,1.08rem);
  line-height:1.75;
}

.services-methodology-bridge .services-process-bottom>p::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,#2056F8,#4268EF);
}


/* ========================================================================
   03 · CAPACIDADES
   La sección empieza limpia después del puente editorial.
   ======================================================================== */

#servicios.services-production{
  position:relative;
  border-top:0;
}

#servicios .services-process-header{
  max-width:1060px;
}

#servicios .services-process-header>.eyebrow{
  color:#8099F3;
}

#servicios .services-process-header h2{
  max-width:980px;
  text-wrap:balance;
}

#servicios .services-process-header h2 span{
  color:#D7E1EF;
}

#servicios .services-process-header>.lead{
  max-width:840px;
  color:#A2B1C5;
}

/*
   El bloque anterior "UNA ESTRUCTURA..." ya vive fuera de #servicios.
   Esta regla evita cualquier espacio residual si queda una versión antigua.
*/
#servicios>.container>.services-process-bottom{
  margin-top:0;
}


/* ========================================================================
   04 · B2W APPROACH
   Diferenciación visual respecto a CAPACIDADES.
   ======================================================================== */

#framework{
  position:relative;
  padding:clamp(82px,8vw,124px) 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%,rgba(32,86,248,.12),transparent 30%),
    linear-gradient(180deg,#071426 0%,#040D1B 100%);
  border-top:1px solid rgba(126,164,231,.12);
}

#framework::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(32,86,248,.025) 50%,transparent 100%);
}

#framework>.container{
  position:relative;
  z-index:1;
}

#framework .section-heading{
  margin-bottom:clamp(34px,4vw,54px);
}

#framework .section-heading>div{
  max-width:980px;
}

#framework .section-heading .eyebrow{
  margin-bottom:16px;
  color:#8099F3;
}

#framework .section-heading h2{
  max-width:950px;
  margin:0;
  color:#fff;
  font-size:clamp(3rem,5.6vw,6rem);
  line-height:.91;
  letter-spacing:-.065em;
  text-wrap:balance;
}

#framework .section-heading .lead{
  max-width:790px;
  margin-top:22px;
  color:#A4B3C7;
  font-size:clamp(1rem,1.25vw,1.13rem);
  line-height:1.72;
}

#framework .b2w-approach-grid{
  gap:14px;
}

#framework .approach-card{
  position:relative;
  min-height:250px;
  padding:clamp(24px,2.5vw,34px);
  overflow:hidden;
  border-color:rgba(128,153,243,.15);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(17,38,72,.88),rgba(7,20,41,.92));
  box-shadow:none;
}

#framework .approach-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:2px;
  transform:scaleX(.22);
  transform-origin:left;
  background:linear-gradient(90deg,#2056F8,#8099F3);
  transition:transform .3s ease;
}

#framework .approach-card:hover::before{
  transform:scaleX(1);
}

#framework .approach-card span{
  color:#8099F3;
  font-size:.68rem;
  letter-spacing:.12em;
}

#framework .approach-card h3{
  margin-top:22px;
  color:#fff;
  font-size:clamp(1.5rem,2vw,2.05rem);
  line-height:1.02;
  letter-spacing:-.035em;
}

#framework .approach-card p{
  margin-top:12px;
  color:#9CADC2;
  font-size:.88rem;
  line-height:1.65;
}


/* ========================================================================
   05 · TRANSICIONES ENTRE LAS TRES SECCIONES
   ======================================================================== */

#metodologia + .services-methodology-bridge{
  margin-top:0;
}

.services-methodology-bridge + #servicios{
  margin-top:0;
}

#servicios + #framework{
  margin-top:0;
}


/* ========================================================================
   06 · TABLET
   ======================================================================== */

@media(max-width:980px){

  .services-methodology-bridge .services-process-bottom{
    grid-template-columns:1fr;
    align-items:start;
    gap:28px;
  }

  .services-methodology-bridge .services-process-bottom>p{
    max-width:700px;
  }

  #framework .b2w-approach-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ========================================================================
   07 · MOBILE
   ======================================================================== */

@media(max-width:680px){

  #metodologia.axio-section{
    padding:66px 0;
  }

  #metodologia .axio-intro h2{
    font-size:clamp(3.15rem,16vw,4.8rem);
  }

  #metodologia .axio-step{
    grid-template-columns:64px 1fr;
    min-height:0;
    padding:18px;
    border-radius:17px;
  }

  #metodologia .axio-num{
    font-size:2.7rem;
  }

  .services-methodology-bridge .services-process-bottom{
    padding:52px 0;
  }

  .services-methodology-bridge h2{
    margin-bottom:14px;
    font-size:.66rem;
  }

  .services-methodology-bridge h3{
    font-size:clamp(2.25rem,11.5vw,3.6rem);
  }

  .services-methodology-bridge .services-process-bottom>p{
    padding-left:16px;
    font-size:.93rem;
  }

  #framework{
    padding:68px 0;
  }

  #framework .section-heading h2{
    font-size:clamp(2.7rem,12vw,4.3rem);
  }

  #framework .b2w-approach-grid{
    grid-template-columns:1fr;
  }

  #framework .approach-card{
    min-height:210px;
  }
}


/* ========================================================================
   08 · REDUCED MOTION
   ======================================================================== */

@media(prefers-reduced-motion:reduce){
  #framework .approach-card::before{
    transition:none;
  }
}
/* ========================================================================
   09· CERTIFICADO B2W
   ======================================================================== */
.partners { padding: 32px 0; }
.partner-rail { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.partner-title { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.certificados { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; }
.certificados img { width: auto; max-width: 160px; height: 70px; object-fit: contain; display: block; }
.partner-rail small { opacity: .65; font-size: 11px; text-align: center; }
@media (max-width: 768px) { .certificados { gap: 18px; } .certificados img { max-width: 120px; height: 55px; } }


/* ========================================================================
   FIN · B2W V10.2
   ======================================================================== */


/* ========================================================================
   B2W AGENCY ECUADOR · MOBILE HEADER / ANCHOR HOTFIX V10.3
   ------------------------------------------------------------------------
   ALCANCE EXCLUSIVO:
   - Corrige superposición del header fijo sobre secciones al navegar por hash.
   - Refuerza el fondo y stacking del header en móvil.
   - Mantiene intactos Servicios, drawer, request, modal y resto del Home.
   ======================================================================== */

/* El navegador debe considerar la altura del header al resolver #anclas. */
html{
  scroll-padding-top:96px;
}

main section[id],
footer[id]{
  scroll-margin-top:96px;
}

@media(max-width:1100px){
  /* Header móvil/tablet: superficie estable y separada del contenido. */
  .site-header{
    z-index:1000!important;
    background:rgba(4,10,20,.96);
    border-bottom-color:rgba(123,155,205,.18);
    backdrop-filter:blur(18px) saturate(115%);
    -webkit-backdrop-filter:blur(18px) saturate(115%);
  }

  .site-header.scrolled{
    background:rgba(4,10,20,.96);
  }

  .nav-shell{
    position:relative;
    z-index:2;
  }

  .mobile-toggle{
    position:relative;
    z-index:3;
    flex:0 0 46px;
  }

  .mobile-menu{
    z-index:1;
    width:100%;
    max-width:none;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  html{
    scroll-padding-top:96px;
  }

  main section[id],
  footer[id]{
    scroll-margin-top:96px;
  }
}

@media(max-width:760px){
  /* En este breakpoint el header real mide 70px. Dejamos 12px de aire. */
  html{
    scroll-padding-top:82px;
  }

  main section[id],
  footer[id]{
    scroll-margin-top:82px;
  }

  .site-header{
    min-height:70px;
  }

  .nav-shell{
    height:70px!important;
  }

  .mobile-menu{
    inset:70px 0 0!important;
    height:calc(100dvh - 70px);
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }

  /* Evita que el contenido del primer frame se pinte visualmente sobre header. */
  .site-header + main{
    position:relative;
    z-index:0;
  }
}

@media(max-width:460px){
  /* Mantiene la corrección sin alterar tamaños de botones/globales existentes. */
  html{
    scroll-padding-top:80px;
  }

  main section[id],
  footer[id]{
    scroll-margin-top:80px;
  }
}

/* No interferir con el comportamiento especial del request móvil. */
@media(max-width:720px){
  body.services-request-open .site-header{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-100%)!important;
  }
}

/* ========================================================================
   FIN · MOBILE HEADER / ANCHOR HOTFIX V10.3
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · V10.4
   AGENCY / CONNECTED MARKETING SYSTEM
   ------------------------------------------------------------------------
   Mejora aislada para #agency.
   No modifica:
   - Header / menú móvil
   - Servicios / drawer / request
   - Casos
   - Industrias
   - Team
   ======================================================================== */


/* ========================================================================
   01 · CONTEXTO GENERAL
   ======================================================================== */

#agency{
  position:relative;
  overflow:hidden;
}

#agency>.container{
  position:relative;
  z-index:2;
}

#agency .context-layout{
  align-items:center;
}

#agency .context-layout>div:first-child{
  position:relative;
  z-index:3;
}

#agency .context-layout>div:first-child .lead{
  max-width:680px;
  line-height:1.72;
}


/* ========================================================================
   02 · ORBIT · REFINAMIENTO GENERAL
   ======================================================================== */

#agency .orbit{
  --agency-orbit-line:rgba(128,153,243,.34);
  --agency-orbit-line-soft:rgba(128,153,243,.17);
  --agency-node-bg:#09172E;
  --agency-node-border:rgba(128,153,243,.30);
  --agency-node-accent:#A9BAF6;

  width:min(100%,620px);
  margin-inline:auto;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(32,86,248,.16) 0%,rgba(32,86,248,.055) 28%,transparent 56%);
}

/* Dos órbitas limpias, sin ruido */
#agency .orbit::before{
  inset:14%;
  border-color:var(--agency-orbit-line);
  box-shadow:
    0 0 0 1px rgba(32,86,248,.025),
    0 0 46px rgba(32,86,248,.035);
}

#agency .orbit::after{
  inset:31%;
  border-color:var(--agency-orbit-line-soft);
}

#agency .orbit-core{
  width:156px;
  height:156px;
  border-color:#4268EF;
  background:
    radial-gradient(circle at 50% 42%,rgba(32,86,248,.13),transparent 58%),
    #07152A;
  box-shadow:
    0 0 0 1px rgba(128,153,243,.05),
    0 0 48px rgba(32,86,248,.15);
}

#agency .orbit-core img{
  width:112px;
  max-width:72%;
}


/* ========================================================================
   03 · NODOS
   ======================================================================== */

#agency .orbit-node{
  width:104px;
  height:104px;
  padding:10px 8px;
  gap:6px;
  border-color:var(--agency-node-border);
  background:
    radial-gradient(circle at 50% 18%,rgba(32,86,248,.10),transparent 50%),
    var(--agency-node-bg);
  box-shadow:
    0 12px 30px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.025);
  color:#fff;
}

#agency .orbit-node svg{
  width:27px;
  height:27px;
  color:var(--agency-node-accent);
  stroke:currentColor;
  filter:drop-shadow(0 0 10px rgba(128,153,243,.12));
}

#agency .orbit-node span{
  display:block;
  max-width:90px;
  color:#FFFFFF;
  font-size:.66rem;
  font-weight:900;
  line-height:1.08;
  letter-spacing:.035em;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}


/* ========================================================================
   04 · TARJETAS DE CONTEXTO
   ======================================================================== */

#agency .context-cards{
  position:relative;
  margin-top:clamp(64px,7vw,96px);
}

#agency .context-card{
  min-height:180px;
  border-color:rgba(128,153,243,.18);
  background:
    radial-gradient(circle at 90% 10%,rgba(32,86,248,.07),transparent 36%),
    rgba(255,255,255,.02);
}

#agency .context-card b{
  color:#8099F3;
}

#agency .context-card h3{
  color:#FFFFFF;
}

#agency .context-card p{
  color:#9EACC1;
}


/* ========================================================================
   05 · TABLET
   ======================================================================== */

@media(max-width:980px){

  #agency .context-layout{
    gap:52px;
  }

  #agency .orbit{
    width:min(88vw,580px);
  }

  #agency .context-cards{
    margin-top:68px;
  }
}


/* ========================================================================
   06 · MOBILE
   ======================================================================== */

@media(max-width:760px){

  #agency{
    padding-top:68px;
    padding-bottom:72px;
  }

  #agency>.container{
    width:min(calc(100% - 24px),var(--max));
  }

  #agency .context-layout{
    grid-template-columns:1fr;
    gap:38px;
  }

  #agency .context-layout>div:first-child{
    max-width:100%;
  }

  #agency .context-layout>div:first-child .eyebrow{
    margin-bottom:15px;
  }

  #agency .context-layout>div:first-child h2{
    max-width:350px;
    margin-bottom:18px;
    font-size:clamp(2.45rem,11.2vw,3.6rem);
    line-height:.94;
    letter-spacing:-.055em;
  }

  #agency .context-layout>div:first-child .lead{
    max-width:350px;
    margin-bottom:0;
    color:#C1CBD9;
    font-size:.98rem;
    line-height:1.72;
  }

  /* El gráfico respira dentro del viewport */
  #agency .orbit{
    width:min(88vw,390px);
    max-width:390px;
    margin-top:6px;
    margin-bottom:2px;
    background:
      radial-gradient(circle at 50% 50%,rgba(32,86,248,.14),rgba(32,86,248,.035) 31%,transparent 58%);
  }

  #agency .orbit::before{
    inset:15.5%;
  }

  #agency .orbit::after{
    inset:32.5%;
  }

  #agency .orbit-core{
    width:122px;
    height:122px;
    box-shadow:
      0 0 0 1px rgba(128,153,243,.05),
      0 0 36px rgba(32,86,248,.12);
  }

  #agency .orbit-core img{
    width:90px;
  }

  #agency .orbit-node{
    width:78px;
    height:78px;
    padding:7px 5px;
    gap:4px;
  }

  #agency .orbit-node svg{
    width:23px;
    height:23px;
  }

  #agency .orbit-node span{
    max-width:72px;
    font-size:.55rem;
    line-height:1.04;
    letter-spacing:.018em;
  }

  /*
    Posiciones móviles refinadas:
    - estrategia centrada arriba
    - marca / experiencia laterales
    - datos / tecnología abajo
  */
  #agency .n1{
    top:-1.5%;
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }

  #agency .n2{
    right:-1.5%;
    top:30%;
  }

  #agency .n3{
    right:9%;
    bottom:2%;
  }

  #agency .n4{
    left:9%;
    bottom:2%;
  }

  #agency .n5{
    left:-1.5%;
    top:30%;
  }

  /* Tarjetas claramente separadas del ecosistema */
  #agency .context-cards{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:72px;
  }

  #agency .context-card{
    min-height:0;
    padding:24px 22px;
    border-radius:20px;
  }

  #agency .context-card h3{
    margin:14px 0 8px;
    font-size:1.2rem;
  }

  #agency .context-card p{
    font-size:.91rem;
    line-height:1.6;
  }
}


/* ========================================================================
   07 · MOBILE SMALL
   ======================================================================== */

@media(max-width:430px){

  #agency{
    padding-top:62px;
  }

  #agency .context-layout{
    gap:34px;
  }

  #agency .context-layout>div:first-child h2{
    max-width:320px;
    font-size:clamp(2.35rem,11.7vw,3.25rem);
  }

  #agency .context-layout>div:first-child .lead{
    max-width:330px;
    font-size:.94rem;
  }

  #agency .orbit{
    width:min(86vw,350px);
  }

  #agency .orbit-core{
    width:112px;
    height:112px;
  }

  #agency .orbit-core img{
    width:84px;
  }

  #agency .orbit-node{
    width:72px;
    height:72px;
  }

  #agency .orbit-node svg{
    width:21px;
    height:21px;
  }

  #agency .orbit-node span{
    font-size:.5rem;
  }

  #agency .n2{
    right:-2%;
  }

  #agency .n5{
    left:-2%;
  }

  #agency .n3{
    right:8%;
    bottom:1%;
  }

  #agency .n4{
    left:8%;
    bottom:1%;
  }

  #agency .context-cards{
    margin-top:64px;
  }
}


/* ========================================================================
   08 · VERY SMALL MOBILE
   ======================================================================== */

@media(max-width:360px){

  #agency .orbit{
    width:min(84vw,315px);
  }

  #agency .orbit-core{
    width:102px;
    height:102px;
  }

  #agency .orbit-core img{
    width:76px;
  }

  #agency .orbit-node{
    width:66px;
    height:66px;
  }

  #agency .orbit-node svg{
    width:19px;
    height:19px;
  }

  #agency .orbit-node span{
    font-size:.46rem;
  }

  #agency .n2{
    right:-2.5%;
    top:30%;
  }

  #agency .n5{
    left:-2.5%;
    top:30%;
  }

  #agency .n3{
    right:7%;
  }

  #agency .n4{
    left:7%;
  }
}


/* ========================================================================
   09 · REDUCED MOTION
   ======================================================================== */

@media(prefers-reduced-motion:reduce){
  #agency .orbit,
  #agency .orbit-node,
  #agency .orbit-core{
    animation:none!important;
    transition:none!important;
  }
}


/* ========================================================================
   FIN · B2W V10.4 AGENCY
   ======================================================================== */

/* ========================================================================
   B2W AGENCY ECUADOR · V10.5
   ATMOSPHERIC BLUE SYSTEM
   ------------------------------------------------------------------------
   Sistema visual inspirado en iluminación azul cinematográfica:
   - Gradientes radiales multicapa
   - Haz diagonal suave
   - Glow localizado
   - Grain CSS ultraligero
   - Sin imágenes adicionales
   - Sin tocar Servicios / Drawer / Request / Casos / Industrias
   ======================================================================== */


/* ========================================================================
   01 · TOKENS ATMOSPHERIC
   ======================================================================== */

:root{
  --b2w-atmo-deep:#041020;
  --b2w-atmo-navy:#071831;
  --b2w-atmo-indigo:#0E1A47;
  --b2w-atmo-blue:#2056F8;
  --b2w-atmo-blue-soft:#4268EF;
  --b2w-atmo-sky:#74C8FF;
  --b2w-atmo-ice:#C9EEFF;
}


/* ========================================================================
   02 · BASE ATMOSPHERIC
   ======================================================================== */

#agency,
#framework,
.b2wt-section{
  position:relative;
  isolation:isolate;
}

/*
   El background principal se mantiene en pseudo-elementos.
   Esto evita alterar el flujo, altura o estructura de las secciones.
*/
#agency::before,
#framework::before,
.b2wt-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}


/*
   Textura/grain ultraligera.
   No requiere imagen externa y no interfiere con clicks.
*/
#agency::after,
#framework::after,
.b2wt-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:soft-light;
  background-image:
    repeating-radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.055) 0,
      rgba(255,255,255,.055) .55px,
      transparent .65px,
      transparent 2.4px
    );
  background-size:4px 4px;
}


/* ========================================================================
   03 · AGENCY · ATMOSPHERIC MEDIUM
   ======================================================================== */

#agency{
  background:#06101F!important;
}

/*
   Referencia:
   - izquierda navy profundo
   - centro azul B2W
   - iluminación inferior/derecha
   - halo azul suave arriba
   - diagonal luminosa controlada
*/
#agency::before{
  background:
    /* glow celeste inferior derecho */
    radial-gradient(
      ellipse 52% 58% at 92% 88%,
      rgba(116,200,255,.72) 0%,
      rgba(66,104,239,.40) 22%,
      rgba(32,86,248,.18) 42%,
      transparent 70%
    ),

    /* azul eléctrico medio */
    radial-gradient(
      ellipse 46% 54% at 72% 56%,
      rgba(32,86,248,.32) 0%,
      rgba(27,53,142,.20) 43%,
      transparent 72%
    ),

    /* halo superior */
    radial-gradient(
      ellipse 42% 35% at 42% -2%,
      rgba(66,104,239,.32) 0%,
      rgba(32,86,248,.09) 50%,
      transparent 78%
    ),

    /* haz diagonal */
    linear-gradient(
      52deg,
      transparent 0%,
      transparent 43%,
      rgba(116,200,255,.00) 47%,
      rgba(116,200,255,.13) 50%,
      rgba(116,200,255,.025) 53%,
      transparent 57%,
      transparent 100%
    ),

    /* base */
    linear-gradient(
      128deg,
      #041020 0%,
      #071831 30%,
      #0E1A47 54%,
      #1B358E 76%,
      #2056F8 100%
    );
}


/* Garantiza que contenido quede por encima del fondo */
#agency>.container{
  position:relative;
  z-index:2;
}


/* El gráfico orbital recibe una integración más luminosa */
#agency .orbit{
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(32,86,248,.25) 0%,
      rgba(32,86,248,.09) 32%,
      rgba(32,86,248,.025) 49%,
      transparent 68%
    )!important;
}

#agency .orbit-core{
  background:
    radial-gradient(
      circle at 44% 35%,
      rgba(66,104,239,.24),
      transparent 52%
    ),
    rgba(4,16,32,.88)!important;
  box-shadow:
    0 0 0 1px rgba(128,153,243,.08),
    0 0 44px rgba(32,86,248,.24),
    0 18px 50px rgba(0,0,0,.16)!important;
}

#agency .orbit-node{
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(66,104,239,.16),
      transparent 48%
    ),
    rgba(5,18,39,.78)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}


/* Tarjetas inferiores: translúcidas sobre el nuevo fondo */
#agency .context-card{
  border-color:rgba(169,186,246,.20)!important;
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(66,104,239,.10),
      transparent 34%
    ),
    rgba(5,17,36,.60)!important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.08);
}


/* ========================================================================
   04 · B2W APPROACH · ATMOSPHERIC HERO
   ======================================================================== */

#framework{
  background:#041020!important;
}

#framework::before{
  background:
    /* foco principal inferior derecho */
    radial-gradient(
      ellipse 58% 70% at 92% 94%,
      rgba(133,214,255,.78) 0%,
      rgba(66,104,239,.43) 20%,
      rgba(32,86,248,.21) 42%,
      transparent 68%
    ),

    /* halo azul lateral */
    radial-gradient(
      ellipse 45% 45% at 72% 40%,
      rgba(32,86,248,.26) 0%,
      rgba(27,53,142,.16) 45%,
      transparent 72%
    ),

    /* halo superior azul profundo */
    radial-gradient(
      ellipse 52% 38% at 30% -8%,
      rgba(37,71,190,.30),
      transparent 72%
    ),

    /* haz diagonal más visible que Agency */
    linear-gradient(
      51deg,
      transparent 0%,
      transparent 42.5%,
      rgba(116,200,255,.00) 46%,
      rgba(116,200,255,.16) 49.3%,
      rgba(116,200,255,.035) 52%,
      transparent 56%,
      transparent 100%
    ),

    linear-gradient(
      130deg,
      #030B18 0%,
      #061329 27%,
      #0E1A47 53%,
      #1B358E 76%,
      #2056F8 100%
    );
}


/* Suaviza la textura del framework para no competir con el copy */
#framework::after{
  opacity:.13;
}


/* Cards integradas en el ambiente sin quedar lavadas */
#framework .approach-card{
  border-color:rgba(169,186,246,.18)!important;
  background:
    linear-gradient(
      155deg,
      rgba(11,31,65,.80),
      rgba(4,15,33,.70)
    )!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


/* ========================================================================
   05 · B2W TALKS · ATMOSPHERIC SOFT
   ======================================================================== */

.b2wt-section{
  background:#041020!important;
}

.b2wt-section::before{
  background:
    radial-gradient(
      ellipse 44% 58% at 92% 78%,
      rgba(66,104,239,.27),
      transparent 70%
    ),
    radial-gradient(
      ellipse 38% 40% at 14% 8%,
      rgba(32,86,248,.14),
      transparent 72%
    ),
    linear-gradient(
      136deg,
      #030C1A 0%,
      #061329 50%,
      #0D1D3E 100%
    );
}

.b2wt-section::after{
  opacity:.08;
}


/* Mantiene el grid característico de Talks por encima del atmosphere */
.b2wt-section .b2wt-container{
  position:relative;
  z-index:2;
}


/* ========================================================================
   06 · ATMOSPHERIC LIGHT BEAM · DESKTOP ONLY
   ======================================================================== */

@media(min-width:761px){

  /*
     Línea/haz adicional de profundidad.
     Muy tenue y sin animación para conservar performance.
  */
  #agency>.container::before,
  #framework>.container::before{
    content:"";
    position:absolute;
    z-index:-1;
    width:46%;
    height:160%;
    top:-32%;
    right:2%;
    pointer-events:none;
    opacity:.55;
    transform:rotate(-31deg);
    transform-origin:center;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(116,200,255,.00) 35%,
        rgba(116,200,255,.055) 50%,
        rgba(116,200,255,.00) 65%,
        transparent 100%
      );
    filter:blur(2px);
  }

  #framework>.container::before{
    opacity:.72;
  }
}


/* ========================================================================
   07 · MOBILE
   Se reduce el glow para evitar saturación y conservar legibilidad.
   ======================================================================== */

@media(max-width:760px){

  #agency::before{
    background:
      radial-gradient(
        ellipse 70% 40% at 100% 76%,
        rgba(86,121,240,.34),
        rgba(32,86,248,.14) 40%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 65% 35% at 30% 0%,
        rgba(32,86,248,.15),
        transparent 72%
      ),
      linear-gradient(
        155deg,
        #041020 0%,
        #071831 52%,
        #0E1A47 100%
      );
  }

  #framework::before{
    background:
      radial-gradient(
        ellipse 82% 46% at 105% 90%,
        rgba(116,200,255,.40),
        rgba(32,86,248,.18) 40%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 60% 36% at 26% 0%,
        rgba(66,104,239,.16),
        transparent 72%
      ),
      linear-gradient(
        150deg,
        #030B18 0%,
        #07162E 52%,
        #0E1A47 100%
      );
  }

  #agency::after,
  #framework::after{
    opacity:.08;
  }

  /*
     En móvil eliminamos el haz diagonal extra para evitar
     artefactos visuales y mantener el diseño limpio.
  */
  #agency>.container::before,
  #framework>.container::before{
    display:none!important;
  }

  #agency .context-card{
    background:
      radial-gradient(
        circle at 96% 0%,
        rgba(66,104,239,.08),
        transparent 38%
      ),
      rgba(5,17,36,.76)!important;
  }
}


/* ========================================================================
   08 · OLED / VERY SMALL
   ======================================================================== */

@media(max-width:430px){

  #agency::before{
    background:
      radial-gradient(
        ellipse 85% 32% at 105% 72%,
        rgba(66,104,239,.26),
        transparent 72%
      ),
      linear-gradient(
        160deg,
        #041020 0%,
        #07152B 62%,
        #0B1C3A 100%
      );
  }

  #framework::before{
    background:
      radial-gradient(
        ellipse 92% 36% at 106% 88%,
        rgba(86,121,240,.30),
        transparent 72%
      ),
      linear-gradient(
        155deg,
        #030B18 0%,
        #07152B 60%,
        #0E1A47 100%
      );
  }
}


/* ========================================================================
   09 · ACCESSIBILITY / REDUCED MOTION
   ======================================================================== */

@media(prefers-reduced-motion:reduce){

  #agency::before,
  #framework::before,
  .b2wt-section::before{
    transition:none!important;
    animation:none!important;
  }
}


/* ========================================================================
   FIN · B2W ATMOSPHERIC BLUE SYSTEM V10.5
   ======================================================================== */

/* ========================================================================
   B2W AGENCY · ENTRY EXPERIENCE V10.6
   Video inmersivo → selector ES / EN
   ------------------------------------------------------------------------
   CAPA AISLADA:
   - No modifica header, services, drawer, request, cases, industries o team.
   - Solo afecta elementos dentro de .b2w-entry.
   - Compatible con fail-open: el HTML usa [hidden] por defecto.
   - Mobile/desktop responsive.
   ======================================================================== */

.b2w-entry{
  --entry-bg:#041020;
  --entry-navy:#071831;
  --entry-indigo:#0E1A47;
  --entry-blue:#2056F8;
  --entry-blue-soft:#4268EF;
  --entry-pale:#A9BAF6;
  --entry-pale-2:#D3DCFA;
  --entry-white:#FFFFFF;
  --entry-muted:#9EACC1;

  position:fixed;
  inset:0;
  z-index:12000;

  display:grid;
  place-items:center;

  width:100vw;
  height:100dvh;
  min-height:100dvh;

  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(circle at 78% 26%,rgba(32,86,248,.22),transparent 34%),
    linear-gradient(180deg,#041020 0%,#020915 100%);

  color:var(--entry-white);
}

.b2w-entry[hidden]{
  display:none!important;
}

/* ------------------------------------------------------------------------
   MEDIA / VIDEO
------------------------------------------------------------------------ */

.b2w-entry__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 28%,rgba(32,86,248,.18),transparent 36%),
    linear-gradient(180deg,#041020,#020915);
}

.b2w-entry__video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  opacity:1;
  filter:
    saturate(.88)
    contrast(1.05)
    brightness(.78);

  transform:scale(1.005);
  transition:
    opacity .7s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1);
}

.b2w-entry.is-selecting .b2w-entry__video{
  opacity:.34;
  transform:scale(1.035);
}

/* Oscurecimiento cinematográfico + continuidad con el sistema atmosférico */
.b2w-entry__shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(2,9,21,.18) 0%,
      rgba(2,9,21,.20) 38%,
      rgba(2,9,21,.78) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2,9,21,.62) 0%,
      rgba(2,9,21,.24) 46%,
      rgba(2,9,21,.10) 100%
    ),
    radial-gradient(
      circle at 76% 34%,
      rgba(32,86,248,.16),
      transparent 38%
    );
}

/* ------------------------------------------------------------------------
   BOTÓN SALTAR
------------------------------------------------------------------------ */

.b2w-entry__skip{
  position:absolute;
  top:max(20px,env(safe-area-inset-top));
  right:max(22px,env(safe-area-inset-right));
  z-index:8;

  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;

  min-height:42px;
  padding:0 16px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  background:rgba(4,16,32,.34);
  color:rgba(255,255,255,.82);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  cursor:pointer;

  font:inherit;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    opacity .3s ease;
}

.b2w-entry__skip:hover,
.b2w-entry__skip:focus-visible{
  color:#fff;
  border-color:rgba(169,186,246,.58);
  background:rgba(32,86,248,.14);
  transform:translateY(-1px);
  outline:none;
}

.b2w-entry.is-selecting .b2w-entry__skip{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ------------------------------------------------------------------------
   MARCA DURANTE EL VIDEO
------------------------------------------------------------------------ */

.b2w-entry__brand{
  position:absolute;
  z-index:5;

  left:max(28px,env(safe-area-inset-left));
  bottom:max(30px,env(safe-area-inset-bottom));

  display:grid;
  gap:12px;

  max-width:min(520px,calc(100vw - 56px));

  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.22,1,.36,1);
}

.b2w-entry__brand img{
  display:block;
  width:min(210px,44vw);
  height:auto;
}

.b2w-entry__brand p{
  margin:0;

  color:rgba(211,220,250,.82);

  font-size:clamp(.72rem,1vw,.92rem);
  font-weight:600;
  letter-spacing:.04em;
}

.b2w-entry.is-selecting .b2w-entry__brand{
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
}

/* ------------------------------------------------------------------------
   SELECTOR DE IDIOMA
------------------------------------------------------------------------ */

.b2w-entry__language{
  position:absolute;
  inset:0;
  z-index:6;

  display:grid;
  place-items:center;

  padding:
    max(28px,env(safe-area-inset-top))
    max(28px,env(safe-area-inset-right))
    max(28px,env(safe-area-inset-bottom))
    max(28px,env(safe-area-inset-left));

  background:
    radial-gradient(circle at 78% 26%,rgba(32,86,248,.23),transparent 33%),
    linear-gradient(180deg,rgba(4,16,32,.14),rgba(2,9,21,.58));

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  animation:b2wEntryLanguageIn .72s cubic-bezier(.22,1,.36,1) both;
}

.b2w-entry__language[hidden]{
  display:none!important;
}

@keyframes b2wEntryLanguageIn{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.b2w-entry__language-inner{
  width:min(880px,100%);
  margin:auto;

  text-align:center;
}

.b2w-entry__eyebrow{
  margin:0 0 20px;

  color:var(--entry-pale);

  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.b2w-entry__language h1{
  max-width:820px;
  margin:0 auto;

  color:#fff;

  font-size:clamp(3.1rem,7vw,7.4rem);
  line-height:.9;
  letter-spacing:-.065em;
  text-wrap:balance;
}

.b2w-entry__language-lead{
  max-width:620px;
  margin:24px auto 0;

  color:rgba(211,220,250,.82);

  font-size:clamp(.98rem,1.35vw,1.16rem);
  line-height:1.65;
}

/* ------------------------------------------------------------------------
   OPCIONES ES / EN
------------------------------------------------------------------------ */

.b2w-entry__language-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  width:min(780px,100%);
  margin:42px auto 0;

  border-top:1px solid rgba(169,186,246,.22);
  border-bottom:1px solid rgba(169,186,246,.22);
}

.b2w-entry__language-option{
  position:relative;

  appearance:none;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:20px;

  min-width:0;
  min-height:126px;

  padding:24px 28px;

  border:0;
  background:rgba(255,255,255,.01);

  color:#fff;
  text-align:left;

  cursor:pointer;

  transition:
    background .25s ease,
    transform .25s ease,
    color .25s ease;
}

.b2w-entry__language-option + .b2w-entry__language-option{
  border-left:1px solid rgba(169,186,246,.22);
}

.b2w-entry__language-option::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;

  background:linear-gradient(90deg,#2056F8,#8099F3);
  transform:scaleX(0);
  transform-origin:left;

  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.b2w-entry__language-option:hover,
.b2w-entry__language-option:focus-visible{
  background:
    linear-gradient(135deg,rgba(32,86,248,.14),rgba(128,153,243,.035));
  outline:none;
}

.b2w-entry__language-option:hover::before,
.b2w-entry__language-option:focus-visible::before{
  transform:scaleX(1);
}

.b2w-entry__language-code{
  color:var(--entry-pale);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.b2w-entry__language-copy{
  display:grid;
  gap:3px;
  min-width:0;
}

.b2w-entry__language-copy strong{
  color:#fff;
  font-size:clamp(1.4rem,2.5vw,2rem);
  line-height:1.05;
  letter-spacing:-.025em;
}

.b2w-entry__language-copy small{
  color:var(--entry-muted);
  font-size:.78rem;
}

.b2w-entry__language-arrow{
  color:var(--entry-pale);
  font-size:1.2rem;
  transition:transform .22s ease;
}

.b2w-entry__language-option:hover .b2w-entry__language-arrow,
.b2w-entry__language-option:focus-visible .b2w-entry__language-arrow{
  transform:translateX(5px);
}

/* ------------------------------------------------------------------------
   CUENTA REGRESIVA
------------------------------------------------------------------------ */

.b2w-entry__countdown{
  margin:24px 0 0;

  color:rgba(169,186,246,.70);

  font-size:.72rem;
  line-height:1.5;
  letter-spacing:.02em;
}

.b2w-entry__countdown strong{
  display:inline-block;
  min-width:1ch;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------------
   ESTADOS DE CIERRE
------------------------------------------------------------------------ */

.b2w-entry.is-closing{
  pointer-events:none;
  animation:b2wEntryClose .62s cubic-bezier(.22,1,.36,1) both;
}

@keyframes b2wEntryClose{
  to{
    opacity:0;
    visibility:hidden;
  }
}

/* ------------------------------------------------------------------------
   BODY LOCK ESPECÍFICO
   No altera los locks existentes de services.js
------------------------------------------------------------------------ */

body.b2w-entry-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

/* ------------------------------------------------------------------------
   TABLET
------------------------------------------------------------------------ */

@media(max-width:900px){

  .b2w-entry__language-inner{
    width:min(720px,100%);
  }

  .b2w-entry__language h1{
    font-size:clamp(3rem,10vw,5.8rem);
  }

  .b2w-entry__language-options{
    width:min(680px,100%);
  }

  .b2w-entry__language-option{
    min-height:116px;
    padding:22px 22px;
  }
}

/* ------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------ */

@media(max-width:640px){

  .b2w-entry__video{
    object-position:center;
  }

  .b2w-entry__shade{
    background:
      linear-gradient(
        180deg,
        rgba(2,9,21,.26) 0%,
        rgba(2,9,21,.12) 34%,
        rgba(2,9,21,.80) 100%
      ),
      radial-gradient(
        circle at 70% 30%,
        rgba(32,86,248,.14),
        transparent 40%
      );
  }

  .b2w-entry__skip{
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
    min-height:38px;
    padding:0 13px;
    font-size:.6rem;
  }

  .b2w-entry__brand{
    left:max(18px,env(safe-area-inset-left));
    right:max(18px,env(safe-area-inset-right));
    bottom:max(22px,env(safe-area-inset-bottom));

    max-width:none;
  }

  .b2w-entry__brand img{
    width:min(170px,50vw);
  }

  .b2w-entry__brand p{
    max-width:290px;
    font-size:.7rem;
  }

  .b2w-entry__language{
    align-items:end;
    padding:
      max(70px,env(safe-area-inset-top))
      16px
      max(26px,env(safe-area-inset-bottom))
      16px;

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }

  .b2w-entry__language-inner{
    width:100%;
    text-align:left;
  }

  .b2w-entry__eyebrow{
    margin-bottom:14px;
    font-size:.61rem;
  }

  .b2w-entry__language h1{
    margin:0;
    max-width:340px;

    font-size:clamp(2.85rem,14vw,4.5rem);
    line-height:.92;
  }

  .b2w-entry__language-lead{
    margin:17px 0 0;
    max-width:340px;

    font-size:.9rem;
    line-height:1.55;
  }

  .b2w-entry__language-options{
    grid-template-columns:1fr;

    width:100%;
    margin-top:28px;

    border-top:1px solid rgba(169,186,246,.20);
    border-bottom:1px solid rgba(169,186,246,.20);
  }

  .b2w-entry__language-option{
    min-height:92px;
    padding:18px 10px;
    gap:14px;
  }

  .b2w-entry__language-option + .b2w-entry__language-option{
    border-left:0;
    border-top:1px solid rgba(169,186,246,.20);
  }

  .b2w-entry__language-code{
    width:30px;
    font-size:.66rem;
  }

  .b2w-entry__language-copy strong{
    font-size:1.35rem;
  }

  .b2w-entry__language-copy small{
    font-size:.72rem;
  }

  .b2w-entry__countdown{
    margin-top:18px;
    font-size:.66rem;
  }
}

/* ------------------------------------------------------------------------
   MOBILE PEQUEÑO
------------------------------------------------------------------------ */

@media(max-width:390px){

  .b2w-entry__language{
    padding-inline:14px;
  }

  .b2w-entry__language h1{
    font-size:clamp(2.55rem,14.5vw,3.75rem);
  }

  .b2w-entry__language-option{
    min-height:86px;
    padding-block:15px;
  }

  .b2w-entry__language-copy strong{
    font-size:1.22rem;
  }
}

/* ------------------------------------------------------------------------
   REDUCED MOTION
   El JS puede saltar el video; CSS evita animaciones decorativas.
------------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .b2w-entry,
  .b2w-entry *,
  .b2w-entry *::before,
  .b2w-entry *::after{
    animation:none!important;
    transition:none!important;
  }

  .b2w-entry__video{
    transform:none!important;
  }
}

/* ========================================================================
   FIN · B2W ENTRY EXPERIENCE V10.6
   ======================================================================== */

/* ========================================================================
   B2W AGENCY · ENTRY EXPERIENCE V10.7
   Audio opcional + controles inferiores + preferencia "no mostrar"
   ------------------------------------------------------------------------
   Esta capa SOLO sobreescribe el módulo .b2w-entry de V10.6.
   No modifica ningún componente existente del sitio.
   ======================================================================== */

/* ------------------------------------------------------------------------
   BLOQUE INFERIOR DURANTE EL VIDEO
------------------------------------------------------------------------ */

.b2w-entry__bottom{
  position:absolute;
  z-index:7;

  left:max(28px,env(safe-area-inset-left));
  right:max(28px,env(safe-area-inset-right));
  bottom:max(26px,env(safe-area-inset-bottom));

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "brand controls"
    "never never";
  align-items:end;
  gap:18px 28px;

  pointer-events:auto;

  transition:
    opacity .5s ease,
    transform .6s cubic-bezier(.22,1,.36,1),
    visibility .5s ease;
}

/* Cuando aparece el selector, desaparece todo el bloque inferior del video */
.b2w-entry.is-selecting .b2w-entry__bottom{
  opacity:0;
  visibility:hidden;
  transform:translateY(18px);
  pointer-events:none;
}

/* ------------------------------------------------------------------------
   MARCA · AHORA VIVE DENTRO DEL BLOQUE INFERIOR
------------------------------------------------------------------------ */

.b2w-entry__bottom .b2w-entry__brand{
  position:static;
  inset:auto;

  grid-area:brand;

  display:grid;
  gap:10px;

  max-width:min(520px,52vw);

  opacity:1;
  transform:none;
  pointer-events:auto;
}

.b2w-entry__bottom .b2w-entry__brand img{
  width:min(205px,42vw);
}

.b2w-entry__bottom .b2w-entry__brand p{
  max-width:500px;
  margin:0;
}

/*
 * V10.6 ocultaba .b2w-entry__brand directamente al entrar en selección.
 * El contenedor .b2w-entry__bottom ya gestiona ese estado.
 */
.b2w-entry.is-selecting .b2w-entry__bottom .b2w-entry__brand{
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------------------
   CONTROLES: SONIDO + SALTAR VIDEO
------------------------------------------------------------------------ */

.b2w-entry__controls{
  grid-area:controls;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.b2w-entry__control{
  position:relative;

  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:44px;
  padding:0 16px;

  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;

  background:rgba(4,16,32,.48);
  color:rgba(255,255,255,.88);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  cursor:pointer;
  font:inherit;

  font-size:.66rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;

  transition:
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.b2w-entry__control:hover,
.b2w-entry__control:focus-visible{
  color:#fff;
  border-color:rgba(169,186,246,.62);
  background:rgba(32,86,248,.16);
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  outline:none;
}

.b2w-entry__control-icon{
  display:inline-grid;
  place-items:center;

  min-width:18px;
  min-height:18px;

  font-size:.9rem;
  line-height:1;
}

/* Sonido activo */
.b2w-entry__sound[aria-pressed="true"]{
  border-color:rgba(128,153,243,.58);
  background:
    linear-gradient(135deg,rgba(32,86,248,.24),rgba(128,153,243,.09)),
    rgba(4,16,32,.52);
  color:#fff;
}

/* ------------------------------------------------------------------------
   SALTAR VIDEO · ANULA POSICIÓN ABSOLUTA DE V10.6
------------------------------------------------------------------------ */

.b2w-entry__bottom .b2w-entry__skip{
  position:relative;
  inset:auto;

  z-index:auto;

  min-height:44px;
  padding:0 16px;

  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* V10.6 ocultaba el botón de forma directa al seleccionar.
   El contenedor inferior ahora controla esa salida. */
.b2w-entry.is-selecting .b2w-entry__bottom .b2w-entry__skip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ------------------------------------------------------------------------
   NO MOSTRAR NUEVAMENTE
------------------------------------------------------------------------ */

.b2w-entry__never{
  grid-area:never;

  position:relative;

  display:inline-flex;
  align-items:center;
  gap:10px;

  width:max-content;
  max-width:100%;

  color:rgba(211,220,250,.76);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  font-size:.72rem;
  line-height:1.4;
}

.b2w-entry__never input{
  position:absolute;

  width:1px;
  height:1px;

  opacity:0;
  pointer-events:none;
}

.b2w-entry__never-box{
  position:relative;

  display:grid;
  place-items:center;

  width:18px;
  height:18px;
  flex:0 0 18px;

  border:1px solid rgba(169,186,246,.38);
  border-radius:5px;

  background:rgba(4,16,32,.54);

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.b2w-entry__never-box::after{
  content:"✓";

  color:#fff;

  font-size:.68rem;
  font-weight:900;
  line-height:1;

  opacity:0;
  transform:scale(.6);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.b2w-entry__never input:checked + .b2w-entry__never-box{
  border-color:#8099F3;
  background:linear-gradient(135deg,#2056F8,#4268EF);
  box-shadow:0 0 0 3px rgba(32,86,248,.10);
}

.b2w-entry__never input:checked + .b2w-entry__never-box::after{
  opacity:1;
  transform:scale(1);
}

.b2w-entry__never input:focus-visible + .b2w-entry__never-box{
  outline:2px solid #A9BAF6;
  outline-offset:3px;
}

.b2w-entry__never:hover .b2w-entry__never-copy{
  color:#fff;
}

.b2w-entry__never-copy{
  transition:color .2s ease;
}

/* ------------------------------------------------------------------------
   AJUSTE DE LA CAPA DE IDIOMA
------------------------------------------------------------------------ */

.b2w-entry__language{
  z-index:9;
}

/* ------------------------------------------------------------------------
   TABLET
------------------------------------------------------------------------ */

@media(max-width:900px){

  .b2w-entry__bottom{
    left:max(22px,env(safe-area-inset-left));
    right:max(22px,env(safe-area-inset-right));
    bottom:max(22px,env(safe-area-inset-bottom));

    grid-template-columns:minmax(0,1fr) auto;
    gap:16px 20px;
  }

  .b2w-entry__controls{
    gap:8px;
  }

  .b2w-entry__control{
    min-height:42px;
    padding-inline:14px;
    font-size:.62rem;
  }
}

/* ------------------------------------------------------------------------
   MOBILE
------------------------------------------------------------------------ */

@media(max-width:640px){

  .b2w-entry__bottom{
    left:max(16px,env(safe-area-inset-left));
    right:max(16px,env(safe-area-inset-right));
    bottom:max(18px,env(safe-area-inset-bottom));

    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "controls"
      "never";

    align-items:stretch;
    gap:14px;
  }

  .b2w-entry__bottom .b2w-entry__brand{
    max-width:none;
  }

  .b2w-entry__bottom .b2w-entry__brand img{
    width:min(170px,50vw);
  }

  .b2w-entry__bottom .b2w-entry__brand p{
    max-width:320px;
    font-size:.7rem;
  }

  .b2w-entry__controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .b2w-entry__control,
  .b2w-entry__bottom .b2w-entry__skip{
    width:100%;
    min-height:46px;
    padding:0 12px;
    font-size:.59rem;
  }

  .b2w-entry__never{
    width:100%;
    font-size:.68rem;
  }

  /*
   * El selector sigue ocupando la parte inferior en móvil,
   * pero al aparecer ya no compite con controles del video.
   */
  .b2w-entry__language{
    z-index:10;
  }
}

/* ------------------------------------------------------------------------
   MOBILE PEQUEÑO
------------------------------------------------------------------------ */

@media(max-width:390px){

  .b2w-entry__bottom{
    left:max(13px,env(safe-area-inset-left));
    right:max(13px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    gap:11px;
  }

  .b2w-entry__controls{
    grid-template-columns:1fr;
  }

  .b2w-entry__control,
  .b2w-entry__bottom .b2w-entry__skip{
    min-height:43px;
  }

  .b2w-entry__never{
    font-size:.64rem;
  }
}

/* ------------------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .b2w-entry__bottom,
  .b2w-entry__control,
  .b2w-entry__never-box,
  .b2w-entry__never-box::after,
  .b2w-entry__never-copy{
    transition:none!important;
  }
}

/* ========================================================================
   FIN · B2W ENTRY EXPERIENCE V10.7
   ======================================================================== */

/* ========================================================================
   B2W AGENCY · ENTRY EXPERIENCE V11.0 · ESPAÑOL
   Video responsive → scroll → web
   ------------------------------------------------------------------------
   CAPA AISLADA Y SEGURA:
   - No modifica services, drawer, request, casos, industrias ni team.
   - No oscurece ni filtra el video.
   - Desktop/tablet horizontal: video horizontal.
   - Mobile/tablet vertical: video vertical.
   - El idioma alternativo EN queda visible en el header.
   - La transición se controla con scroll + entry-experience.js V11.
   ======================================================================== */

/* ------------------------------------------------------------------------
   01 · CONTENEDOR DE ENTRADA
   La sección mide más que el viewport para permitir que el usuario
   "atraviese" el video con scroll antes de entrar a la Home.
------------------------------------------------------------------------ */

.b2w-entry-v11{
  --b2w-entry-progress:0;
  --b2w-entry-ui-opacity:1;
  --b2w-entry-ui-shift:0px;
  --b2w-entry-video-scale:1;

  position:relative;
  z-index:1;

  width:100%;
  min-height:150dvh;

  background:#020915;
  isolation:isolate;
}

.b2w-entry-v11__sticky{
  position:sticky;
  top:0;

  width:100%;
  height:100dvh;
  min-height:100dvh;

  overflow:hidden;
  background:#020915;
}

/* ------------------------------------------------------------------------
   02 · VIDEO
   IMPORTANTE: sin opacity reducida, brightness ni filtros.
------------------------------------------------------------------------ */

.b2w-entry-v11__media{
  position:absolute;
  inset:0;
  z-index:0;

  overflow:hidden;
  background:#020915;
}

.b2w-entry-v11__video{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  opacity:1!important;
  visibility:visible!important;

  filter:none!important;
  -webkit-filter:none!important;

  transform:scale(var(--b2w-entry-video-scale));
  transform-origin:center center;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:transform .12s linear;
}

/*
 * NO existe overlay general sobre el video.
 * La imagen se conserva con sus colores, contraste y luminosidad originales.
 */

/* ------------------------------------------------------------------------
   03 · UI SOBRE EL VIDEO
   Solo añadimos una pequeña zona de contraste inferior.
   No cubre ni oscurece el centro de la pieza audiovisual.
------------------------------------------------------------------------ */

.b2w-entry-v11__ui{
  position:absolute;
  inset:auto 0 0;
  z-index:3;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;

  min-height:190px;

  padding:
    58px
    max(28px,env(safe-area-inset-right))
    max(28px,env(safe-area-inset-bottom))
    max(28px,env(safe-area-inset-left));

  background:
    linear-gradient(
      180deg,
      rgba(2,9,21,0) 0%,
      rgba(2,9,21,.10) 48%,
      rgba(2,9,21,.42) 100%
    );

  opacity:var(--b2w-entry-ui-opacity);
  transform:translateY(var(--b2w-entry-ui-shift));

  pointer-events:none;

  transition:
    opacity .12s linear,
    transform .12s linear;
}

.b2w-entry-v11__brand,
.b2w-entry-v11__actions{
  pointer-events:auto;
}

/* ------------------------------------------------------------------------
   04 · MARCA
------------------------------------------------------------------------ */

.b2w-entry-v11__brand{
  display:grid;
  gap:10px;

  width:min(520px,52vw);
  min-width:0;
}

.b2w-entry-v11__brand img{
  display:block;

  width:min(205px,42vw);
  height:auto;

  max-width:100%;
}

.b2w-entry-v11__brand p{
  margin:0;

  color:rgba(255,255,255,.82);

  font-size:clamp(.72rem,1vw,.9rem);
  font-weight:650;
  letter-spacing:.025em;

  text-shadow:0 2px 16px rgba(0,0,0,.34);
}

/* ------------------------------------------------------------------------
   05 · ACCIONES: SONIDO + DESCUBRIR B2W
------------------------------------------------------------------------ */

.b2w-entry-v11__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.b2w-entry-v11__sound,
.b2w-entry-v11__scroll{
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:44px;
  padding:0 16px;

  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;

  background:rgba(2,9,21,.32);
  color:#fff;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 8px 26px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035);

  font:inherit;
  font-size:.65rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.095em;
  text-transform:uppercase;
  text-decoration:none;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.b2w-entry-v11__sound:hover,
.b2w-entry-v11__sound:focus-visible,
.b2w-entry-v11__scroll:hover,
.b2w-entry-v11__scroll:focus-visible{
  border-color:rgba(169,186,246,.72);
  background:rgba(14,26,71,.56);

  transform:translateY(-2px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    0 0 0 3px rgba(32,86,248,.08);

  outline:none;
}

.b2w-entry-v11__sound[aria-pressed="true"]{
  border-color:rgba(128,153,243,.58);

  background:
    linear-gradient(135deg,rgba(32,86,248,.28),rgba(66,104,239,.10)),
    rgba(2,9,21,.36);
}

.b2w-entry-v11__sound-icon{
  display:grid;
  place-items:center;

  min-width:18px;
  min-height:18px;

  font-size:.86rem;
  line-height:1;
}

.b2w-entry-v11__scroll{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.08);
}

.b2w-entry-v11__scroll>span:last-child{
  font-size:.95rem;
  transition:transform .22s ease;
}

.b2w-entry-v11__scroll:hover>span:last-child,
.b2w-entry-v11__scroll:focus-visible>span:last-child{
  transform:translateY(3px);
}

/* ------------------------------------------------------------------------
   06 · HEADER / IDIOMA ALTERNATIVO
   Español = mostramos EN.
------------------------------------------------------------------------ */

.language-switcher-alt{
  text-decoration:none;
}

.language-switcher-alt span{
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}

.mobile-header-actions{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.mobile-language-direct{
  display:none;
  align-items:center;
  justify-content:center;

  min-width:42px;
  height:38px;
  padding:0 11px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;

  background:rgba(4,16,32,.22);
  color:#fff;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  font-size:.68rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;

  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.mobile-language-direct:hover,
.mobile-language-direct:focus-visible{
  border-color:rgba(128,153,243,.56);
  background:rgba(32,86,248,.12);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
}

/*
 * El antiguo selector ES/EN dentro del menú móvil ya no participa
 * en la experiencia V11.
 */
.mobile-menu .mobile-language-switcher{
  display:none!important;
}

/* ------------------------------------------------------------------------
   07 · TRANSICIÓN ENTRE INTRO Y HOME
------------------------------------------------------------------------ */

#inicio{
  position:relative;
  z-index:2;
}

/*
 * Cuando termina la zona sticky, la Home entra de forma natural.
 * El JS solo ajusta variables del bloque V11; no altera el resto del DOM.
 */
.b2w-entry-v11.is-leaving .b2w-entry-v11__ui{
  pointer-events:none;
}

/* ------------------------------------------------------------------------
   08 · TABLET / NAV RESPONSIVE
------------------------------------------------------------------------ */

@media(max-width:1100px){

  .mobile-header-actions{
    display:flex;
  }

  .mobile-language-direct{
    display:inline-flex;
  }

  /*
   * El botón hamburguesa conserva la lógica existente:
   * únicamente cambia de contenedor visual.
   */
  .mobile-header-actions .mobile-toggle{
    display:block;
    flex:0 0 46px;
  }

  .b2w-entry-v11{
    min-height:145dvh;
  }

  .b2w-entry-v11__ui{
    padding-inline:max(22px,env(safe-area-inset-left));
  }
}

/* ------------------------------------------------------------------------
   09 · TABLET VERTICAL / MOBILE
------------------------------------------------------------------------ */

@media(max-width:760px){

  .b2w-entry-v11{
    min-height:138dvh;
  }

  .b2w-entry-v11__sticky{
    height:100dvh;
    min-height:100dvh;
  }

  .b2w-entry-v11__video{
    object-position:center center;
  }

  .b2w-entry-v11__ui{
    display:grid;
    grid-template-columns:1fr;
    align-items:end;

    min-height:220px;

    padding:
      66px
      max(16px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left));

    background:
      linear-gradient(
        180deg,
        rgba(2,9,21,0) 0%,
        rgba(2,9,21,.08) 54%,
        rgba(2,9,21,.34) 100%
      );
  }

  .b2w-entry-v11__brand{
    width:100%;
  }

  .b2w-entry-v11__brand img{
    width:min(170px,48vw);
  }

  .b2w-entry-v11__brand p{
    max-width:320px;
    font-size:.69rem;
  }

  .b2w-entry-v11__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:8px;
  }

  .b2w-entry-v11__sound,
  .b2w-entry-v11__scroll{
    width:100%;
    min-width:0;
    min-height:44px;
    padding-inline:10px;

    font-size:.58rem;
  }

  .mobile-header-actions{
    gap:7px;
  }

  .mobile-language-direct{
    display:inline-flex;
    min-width:40px;
    height:36px;
    padding-inline:10px;
    font-size:.64rem;
  }

  .mobile-header-actions .mobile-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
}

/* ------------------------------------------------------------------------
   10 · MOBILE PEQUEÑO
------------------------------------------------------------------------ */

@media(max-width:430px){

  .b2w-entry-v11{
    min-height:132dvh;
  }

  .b2w-entry-v11__ui{
    min-height:205px;

    padding:
      58px
      max(13px,env(safe-area-inset-right))
      max(14px,env(safe-area-inset-bottom))
      max(13px,env(safe-area-inset-left));
  }

  .b2w-entry-v11__brand img{
    width:min(150px,46vw);
  }

  .b2w-entry-v11__brand p{
    font-size:.63rem;
  }

  .b2w-entry-v11__actions{
    grid-template-columns:1fr;
  }

  .b2w-entry-v11__sound,
  .b2w-entry-v11__scroll{
    min-height:42px;
  }

  .mobile-language-direct{
    min-width:38px;
    height:34px;
    padding-inline:9px;
  }
}

/* ------------------------------------------------------------------------
   11 · ORIENTACIÓN EXPLÍCITA
   Refuerza la composición sin modificar el archivo elegido por HTML.
------------------------------------------------------------------------ */

@media(orientation:landscape){
  .b2w-entry-v11__video{
    object-fit:cover;
    object-position:center;
  }
}

@media(orientation:portrait){
  .b2w-entry-v11__video{
    object-fit:cover;
    object-position:center;
  }
}

/* ------------------------------------------------------------------------
   12 · REDUCED MOTION
------------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .b2w-entry-v11{
    min-height:100dvh;
  }

  .b2w-entry-v11__video{
    transform:none!important;
    transition:none!important;
  }

  .b2w-entry-v11__ui,
  .b2w-entry-v11__sound,
  .b2w-entry-v11__scroll,
  .mobile-language-direct{
    transition:none!important;
  }
}

/* ========================================================================
   FIN · B2W ENTRY EXPERIENCE V11.0
   ======================================================================== */

/* ========================================================================
   B2W AGENCY · ENTRY EXPERIENCE V11.1 · CINEMATIC OVERLAY
   ------------------------------------------------------------------------
   Objetivo:
   - Recuperar el comportamiento premium de la intro anterior.
   - Video fullscreen por encima de la web.
   - Header oculto mientras la intro está activa.
   - Scroll / swipe / CTA = salida inmediata hacia la Home.
   - Fin del video = salida automática.
   - Audio visible y controlable.
   - Opción "No mostrar esta introducción nuevamente".
   - Sin oscurecer el video.
   - No modifica services, drawer, request, work, industries ni otros módulos.
   ======================================================================== */

/* ------------------------------------------------------------------------
   01 · CAPA GLOBAL
------------------------------------------------------------------------ */

.b2w-entry-v11{
  position:fixed!important;
  inset:0!important;
  z-index:12000!important;

  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  isolation:isolate;

  background:#020915;

  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .62s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1),
    visibility .62s ease;
}

.b2w-entry-v11[hidden]{
  display:none!important;
}

/* Estado de salida */
.b2w-entry-v11.is-closing{
  opacity:0;
  visibility:hidden;
  transform:translateY(-2.5vh) scale(.992);
  pointer-events:none;
}

/* ------------------------------------------------------------------------
   02 · STAGE
------------------------------------------------------------------------ */

.b2w-entry-v11__stage{
  position:relative;

  width:100%;
  height:100dvh;
  min-height:100dvh;

  overflow:hidden;

  background:#020915;
}

/* ------------------------------------------------------------------------
   03 · VIDEO
   SIN OPACIDAD REDUCIDA, SIN BRILLO, SIN FILTROS.
------------------------------------------------------------------------ */

.b2w-entry-v11__media{
  position:absolute;
  inset:0;
  z-index:0;

  width:100%;
  height:100%;

  overflow:hidden;

  background:#020915;
}

.b2w-entry-v11__video{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

  opacity:1!important;
  visibility:visible!important;

  filter:none!important;
  -webkit-filter:none!important;

  transform:none!important;

  background:#020915;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* ------------------------------------------------------------------------
   04 · UI INFERIOR
   Gradiente exclusivamente en la zona inferior.
   El cuerpo del video se mantiene limpio.
------------------------------------------------------------------------ */

.b2w-entry-v11__ui{
  position:absolute;
  inset:auto 0 0;
  z-index:4;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;

  min-height:210px;

  padding:
    64px
    max(28px,env(safe-area-inset-right))
    max(28px,env(safe-area-inset-bottom))
    max(28px,env(safe-area-inset-left));

  background:
    linear-gradient(
      180deg,
      rgba(2,9,21,0) 0%,
      rgba(2,9,21,.04) 48%,
      rgba(2,9,21,.30) 74%,
      rgba(2,9,21,.48) 100%
    );

  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,1,.36,1);
}

.b2w-entry-v11.is-closing .b2w-entry-v11__ui{
  opacity:0;
  transform:translateY(18px);
}

/* ------------------------------------------------------------------------
   05 · IDENTIDAD
------------------------------------------------------------------------ */

.b2w-entry-v11__identity{
  display:grid;
  gap:16px;

  width:min(560px,52vw);
  min-width:0;
}

.b2w-entry-v11__brand{
  position:static!important;
  inset:auto!important;

  display:grid;
  gap:9px;

  width:auto!important;
  max-width:520px;
}

.b2w-entry-v11__brand img{
  display:block;

  width:min(205px,42vw)!important;
  height:auto;

  max-width:100%;
}

.b2w-entry-v11__brand p{
  margin:0;

  color:rgba(255,255,255,.86);

  font-size:clamp(.72rem,1vw,.9rem);
  font-weight:650;
  letter-spacing:.025em;

  text-shadow:0 2px 16px rgba(0,0,0,.30);
}

/* ------------------------------------------------------------------------
   06 · NO MOSTRAR NUEVAMENTE
------------------------------------------------------------------------ */

.b2w-entry-v11__never{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:9px;

  width:max-content;
  max-width:100%;

  color:rgba(255,255,255,.70);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  font-size:.69rem;
  line-height:1.4;
}

.b2w-entry-v11__never input{
  position:absolute;

  width:1px;
  height:1px;

  opacity:0;
  pointer-events:none;
}

.b2w-entry-v11__never-box{
  position:relative;

  display:grid;
  place-items:center;

  width:17px;
  height:17px;
  flex:0 0 17px;

  border:1px solid rgba(255,255,255,.34);
  border-radius:5px;

  background:rgba(2,9,21,.36);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.b2w-entry-v11__never-box::after{
  content:"✓";

  color:#fff;

  font-size:.64rem;
  font-weight:900;
  line-height:1;

  opacity:0;
  transform:scale(.6);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.b2w-entry-v11__never input:checked + .b2w-entry-v11__never-box{
  border-color:#8099F3;
  background:linear-gradient(135deg,#2056F8,#4268EF);
  box-shadow:0 0 0 3px rgba(32,86,248,.10);
}

.b2w-entry-v11__never input:checked + .b2w-entry-v11__never-box::after{
  opacity:1;
  transform:scale(1);
}

.b2w-entry-v11__never input:focus-visible + .b2w-entry-v11__never-box{
  outline:2px solid #A9BAF6;
  outline-offset:3px;
}

/* ------------------------------------------------------------------------
   07 · EXPERIENCE CONTROLS
------------------------------------------------------------------------ */

.b2w-entry-v11__experience{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;

  max-width:560px;
}

/* Audio */
.b2w-entry-v11__sound{
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:44px;
  padding:0 16px;

  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;

  background:rgba(2,9,21,.32);
  color:#fff;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 8px 26px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035);

  font:inherit;
  font-size:.64rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.095em;
  text-transform:uppercase;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.b2w-entry-v11__sound:hover,
.b2w-entry-v11__sound:focus-visible{
  border-color:rgba(169,186,246,.72);
  background:rgba(14,26,71,.56);

  transform:translateY(-2px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    0 0 0 3px rgba(32,86,248,.08);

  outline:none;
}

.b2w-entry-v11__sound[aria-pressed="true"]{
  border-color:rgba(128,153,243,.58);

  background:
    linear-gradient(135deg,rgba(32,86,248,.28),rgba(66,104,239,.10)),
    rgba(2,9,21,.36);
}

.b2w-entry-v11__sound-icon{
  display:grid;
  place-items:center;

  min-width:18px;
  min-height:18px;

  font-size:.86rem;
  line-height:1;
}

/* CTA editorial */
.b2w-entry-v11__continue{
  appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;

  min-height:44px;
  padding:0 17px;

  border:1px solid rgba(255,255,255,.40);
  border-radius:999px;

  background:rgba(255,255,255,.07);
  color:#fff;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  box-shadow:
    0 8px 26px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);

  font:inherit;
  font-size:.64rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    border-color .22s ease,
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.b2w-entry-v11__continue:hover,
.b2w-entry-v11__continue:focus-visible{
  border-color:#A9BAF6;

  background:
    linear-gradient(135deg,rgba(32,86,248,.18),rgba(128,153,243,.08)),
    rgba(255,255,255,.07);

  transform:translateY(-2px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    0 0 0 3px rgba(32,86,248,.08);

  outline:none;
}

.b2w-entry-v11__continue-arrow{
  display:inline-block;

  font-size:1rem;
  line-height:1;

  animation:b2wEntryArrow 1.65s ease-in-out infinite;
}

@keyframes b2wEntryArrow{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* ------------------------------------------------------------------------
   08 · STATUS ACCESIBLE
------------------------------------------------------------------------ */

.b2w-entry-v11__status{
  position:absolute!important;

  width:1px!important;
  height:1px!important;

  margin:-1px!important;
  padding:0!important;

  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;

  white-space:nowrap!important;
  border:0!important;
}

/* ------------------------------------------------------------------------
   09 · BODY LOCK / HEADER
------------------------------------------------------------------------ */

body.b2w-entry-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none;
}

/*
 * Durante la intro, el header principal desaparece.
 * La intro no compite visualmente con la navegación.
 */
body.b2w-entry-open .site-header{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-100%)!important;
}

/* Cuando se libera la intro, el header vuelve a su comportamiento normal */
body:not(.b2w-entry-open) .site-header{
  visibility:visible;
}

/* ------------------------------------------------------------------------
   10 · IDIOMA ALTERNATIVO EN
   Se conserva la solución V11 previa.
------------------------------------------------------------------------ */

.mobile-header-actions{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}

.mobile-language-direct{
  display:none;
  align-items:center;
  justify-content:center;

  min-width:42px;
  height:38px;
  padding:0 11px;

  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;

  background:rgba(4,16,32,.22);
  color:#fff;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  font-size:.68rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.08em;
}

/* Selector antiguo dentro del menu móvil: fuera */
.mobile-menu .mobile-language-switcher{
  display:none!important;
}

/* ------------------------------------------------------------------------
   11 · TABLET
------------------------------------------------------------------------ */

@media(max-width:1100px){

  .mobile-header-actions{
    display:flex;
  }

  .mobile-language-direct{
    display:inline-flex;
  }

  .mobile-header-actions .mobile-toggle{
    display:block;
    flex:0 0 46px;
  }

  .b2w-entry-v11__ui{
    padding-inline:max(22px,env(safe-area-inset-left));
  }
}

/* ------------------------------------------------------------------------
   12 · MOBILE
------------------------------------------------------------------------ */

@media(max-width:760px){

  .b2w-entry-v11,
  .b2w-entry-v11__stage{
    height:100dvh!important;
    min-height:100dvh!important;
  }

  .b2w-entry-v11__video{
    object-fit:cover!important;
    object-position:center center!important;
  }

  .b2w-entry-v11__ui{
    display:grid;
    grid-template-columns:1fr;
    align-content:end;
    gap:15px;

    min-height:250px;

    padding:
      70px
      max(16px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left));

    background:
      linear-gradient(
        180deg,
        rgba(2,9,21,0) 0%,
        rgba(2,9,21,.03) 48%,
        rgba(2,9,21,.28) 78%,
        rgba(2,9,21,.42) 100%
      );
  }

  .b2w-entry-v11__identity{
    width:100%;
    gap:13px;
  }

  .b2w-entry-v11__brand img{
    width:min(168px,48vw)!important;
  }

  .b2w-entry-v11__brand p{
    max-width:320px;
    font-size:.68rem;
  }

  .b2w-entry-v11__never{
    font-size:.66rem;
  }

  .b2w-entry-v11__experience{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;

    width:100%;
    max-width:none;
  }

  .b2w-entry-v11__sound,
  .b2w-entry-v11__continue{
    width:100%;
    min-width:0;
    min-height:44px;

    padding-inline:10px;

    font-size:.57rem;
  }

  .mobile-header-actions{
    gap:7px;
  }

  .mobile-language-direct{
    min-width:40px;
    height:36px;
    padding-inline:10px;
    font-size:.64rem;
  }

  .mobile-header-actions .mobile-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
}

/* ------------------------------------------------------------------------
   13 · MOBILE PEQUEÑO
------------------------------------------------------------------------ */

@media(max-width:430px){

  .b2w-entry-v11__ui{
    min-height:235px;

    padding:
      62px
      max(13px,env(safe-area-inset-right))
      max(14px,env(safe-area-inset-bottom))
      max(13px,env(safe-area-inset-left));
  }

  .b2w-entry-v11__brand img{
    width:min(148px,46vw)!important;
  }

  .b2w-entry-v11__brand p{
    font-size:.62rem;
  }

  .b2w-entry-v11__never{
    font-size:.62rem;
  }

  .b2w-entry-v11__experience{
    grid-template-columns:1fr;
  }

  .b2w-entry-v11__sound,
  .b2w-entry-v11__continue{
    min-height:42px;
  }

  .mobile-language-direct{
    min-width:38px;
    height:34px;
    padding-inline:9px;
  }
}

/* ------------------------------------------------------------------------
   14 · ORIENTACIÓN
------------------------------------------------------------------------ */

@media(orientation:landscape){
  .b2w-entry-v11__video{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

@media(orientation:portrait){
  .b2w-entry-v11__video{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* ------------------------------------------------------------------------
   15 · VIDEO NO DISPONIBLE
   El poster permanece visible; no se crea pantalla negra bloqueante.
------------------------------------------------------------------------ */

.b2w-entry-v11.is-video-unavailable .b2w-entry-v11__media{
  background:#020915;
}

.b2w-entry-v11.is-video-unavailable .b2w-entry-v11__sound{
  opacity:.56;
}

/* ------------------------------------------------------------------------
   16 · REDUCED MOTION
------------------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

  .b2w-entry-v11,
  .b2w-entry-v11__ui,
  .b2w-entry-v11__sound,
  .b2w-entry-v11__continue,
  .b2w-entry-v11__never-box,
  .b2w-entry-v11__never-box::after{
    transition:none!important;
  }

  .b2w-entry-v11__continue-arrow{
    animation:none!important;
  }

  .b2w-entry-v11__video{
    transform:none!important;
  }
}

/* ========================================================================
   FIN · B2W ENTRY EXPERIENCE V11.1
   ======================================================================== */
/* ============================================================
   B2W AGENCY · OPENING EXPERIENCE V12
   ------------------------------------------------------------
   Arquitectura:
   WELCOME → BUFFER INICIAL → AUTOPLAY → PLAYING → EXIT → HOME

   Este bloque se añade al final del CSS de producción existente
   para NO romper ni reescribir estilos ya estabilizados.
============================================================ */

/* ------------------------------------------------------------
   1. ROOT / FULLSCREEN
------------------------------------------------------------ */

.b2w-entry-v12{
  position:fixed;
  inset:0;
  z-index:12000;

  width:100vw;
  max-width:none;
  height:100dvh;
  min-height:100dvh;

  margin:0;
  padding:0;

  overflow:hidden;
  isolation:isolate;

  background:#000000;
  color:#FFFFFF;

  opacity:1;
  visibility:visible;

  transform:translate3d(0,0,0);

  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1),
    transform .72s cubic-bezier(.22,.61,.36,1),
    visibility .72s linear;
}

.b2w-entry-v12[hidden]{
  display:none !important;
}

body.b2w-entry-open{
  overflow:hidden !important;
  overscroll-behavior:none;
  touch-action:none;
}

body.b2w-entry-open .site-header{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ------------------------------------------------------------
   2. STAGE
------------------------------------------------------------ */

.b2w-entry-v12__stage{
  position:absolute;
  inset:0;

  width:100%;
  max-width:none;
  height:100%;

  margin:0;
  padding:0;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(32,86,248,.12) 0%,
      rgba(14,26,71,.08) 25%,
      rgba(0,0,0,0) 58%
    ),
    linear-gradient(
      180deg,
      #000000 0%,
      #0E1A47 100%
    );
}

/* ------------------------------------------------------------
   3. VIDEO LAYER
   Fuerza viewport completo para evitar contenedores heredados,
   max-width o barras laterales no deseadas.
------------------------------------------------------------ */

.b2w-entry-v12__media{
  position:absolute !important;
  inset:0 !important;

  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  opacity:0;
  visibility:hidden;

  background:#000000;

  transform:scale(1.018);
  transition:
    opacity .58s ease,
    visibility .58s linear,
    transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.b2w-entry-v12__video{
  position:absolute !important;
  inset:0 !important;

  display:block !important;

  width:100vw !important;
  min-width:100vw !important;
  max-width:none !important;

  height:100dvh !important;
  min-height:100dvh !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  object-fit:cover !important;
  object-position:center center !important;

  opacity:1 !important;
  visibility:visible !important;

  filter:none !important;

  transform:none !important;

  background:#000000;
}

/* Video activo durante reproducción */
.b2w-entry-v12.is-playing .b2w-entry-v12__media,
.b2w-entry-v12.is-video-ready .b2w-entry-v12__media{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

/* Mantener welcome por encima hasta que JS active playing */
.b2w-entry-v12:not(.is-playing) .b2w-entry-v12__media{
  pointer-events:none;
}

/* ------------------------------------------------------------
   4. WELCOME / BRAND INTRO
------------------------------------------------------------ */

.b2w-entry-v12__welcome{
  position:absolute;
  inset:0;
  z-index:4;

  display:grid;
  place-items:center;

  width:100%;
  height:100%;

  padding:
    max(28px, env(safe-area-inset-top))
    clamp(22px,5vw,72px)
    max(34px, env(safe-area-inset-bottom));

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(32,86,248,.16) 0%,
      rgba(32,86,248,.06) 24%,
      rgba(0,0,0,0) 52%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.96) 0%,
      rgba(14,26,71,.95) 100%
    );

  opacity:1;
  visibility:visible;

  transition:
    opacity .58s ease,
    visibility .58s linear,
    transform .72s cubic-bezier(.22,.61,.36,1);
}

.b2w-entry-v12.is-playing .b2w-entry-v12__welcome{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,-12px,0);
}

.b2w-entry-v12__welcome-inner{
  width:min(680px,100%);
  margin:auto;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

/* ------------------------------------------------------------
   5. BRAND
------------------------------------------------------------ */

.b2w-entry-v12__brand{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;

  margin:0 0 30px;
}

.b2w-entry-v12__brand img{
  display:block;

  width:min(260px,52vw);
  max-width:260px;
  height:auto;

  object-fit:contain;

  filter:none;
}

.b2w-entry-v12__welcome-copy{
  width:100%;
}

.b2w-entry-v12__eyebrow{
  margin:0 0 12px;

  color:#FFFFFF;

  font-size:clamp(.78rem,1vw,.92rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.b2w-entry-v12__tagline{
  margin:0;

  color:#A9BAF6;

  font-size:clamp(.78rem,1.1vw,.98rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.055em;
}

/* ------------------------------------------------------------
   6. BUFFER / PROGRESS
------------------------------------------------------------ */

.b2w-entry-v12__preload{
  width:min(520px,100%);
  margin:48px auto 0;
}

.b2w-entry-v12__progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  margin-bottom:12px;

  color:#FFFFFF;
}

.b2w-entry-v12__progress-head > span{
  font-size:.67rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.b2w-entry-v12__progress-head strong{
  flex:none;

  color:#FFFFFF;

  font-size:.78rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;

  font-variant-numeric:tabular-nums;
}

.b2w-entry-v12__progress-track{
  position:relative;

  width:100%;
  height:2px;

  overflow:hidden;

  background:rgba(255,255,255,.16);
}

.b2w-entry-v12__progress-fill{
  position:absolute;
  inset:0 auto 0 0;

  display:block;

  width:var(--b2w-entry-progress,0%);

  background:#2056F8;

  box-shadow:
    0 0 14px rgba(32,86,248,.50);

  transition:width .16s linear;
}

.b2w-entry-v12__buffer-note{
  margin:12px 0 0;

  color:#8099F3;

  font-size:.72rem;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.025em;
}

/* Estado listo */
.b2w-entry-v12.is-ready .b2w-entry-v12__progress-fill{
  width:100%;
}

.b2w-entry-v12.is-ready .b2w-entry-v12__progress-head strong{
  color:#FFFFFF;
}

/* ------------------------------------------------------------
   7. "NO MOSTRAR NUEVAMENTE"
------------------------------------------------------------ */

.b2w-entry-v12__never{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:30px;

  color:#A9BAF6;

  font-size:.68rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;

  cursor:pointer;
  user-select:none;
}

.b2w-entry-v12__never input{
  position:absolute;

  width:1px;
  height:1px;

  overflow:hidden;

  opacity:0;
  pointer-events:none;
}

.b2w-entry-v12__never-box{
  position:relative;

  flex:0 0 16px;

  width:16px;
  height:16px;

  border:1px solid rgba(255,255,255,.44);
  border-radius:4px;

  background:rgba(255,255,255,.02);

  transition:
    border-color .2s ease,
    background .2s ease;
}

.b2w-entry-v12__never input:checked + .b2w-entry-v12__never-box{
  border-color:#2056F8;
  background:#2056F8;
}

.b2w-entry-v12__never input:checked + .b2w-entry-v12__never-box::after{
  content:"";

  position:absolute;
  left:4px;
  top:1px;

  width:5px;
  height:9px;

  border-right:2px solid #FFFFFF;
  border-bottom:2px solid #FFFFFF;

  transform:rotate(45deg);
}

.b2w-entry-v12__never input:focus-visible + .b2w-entry-v12__never-box{
  outline:2px solid #8099F3;
  outline-offset:3px;
}

/* ------------------------------------------------------------
   8. CONTROLES DEL VIDEO
------------------------------------------------------------ */

.b2w-entry-v12__controls{
  position:absolute;
  left:clamp(20px,3vw,42px);
  right:clamp(20px,3vw,42px);
  bottom:max(26px, env(safe-area-inset-bottom));
  z-index:8;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  pointer-events:none;
}

.b2w-entry-v12__controls[hidden]{
  display:none !important;
}

.b2w-entry-v12__controls > *{
  pointer-events:auto;
}

/* Base compartida */
.b2w-entry-v12__sound,
.b2w-entry-v12__continue,
.b2w-entry-v12__skip{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  min-height:44px;

  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;

  background:rgba(0,0,0,.24);
  color:#FFFFFF;

  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);

  font:inherit;
  font-size:.64rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    opacity .22s ease,
    transform .22s ease;
}

.b2w-entry-v12__sound{
  padding:0 16px;
}

.b2w-entry-v12__continue{
  padding:0 17px;
}

.b2w-entry-v12__sound:hover,
.b2w-entry-v12__continue:hover,
.b2w-entry-v12__skip:hover,
.b2w-entry-v12__sound:focus-visible,
.b2w-entry-v12__continue:focus-visible,
.b2w-entry-v12__skip:focus-visible{
  border-color:#8099F3;
  background:rgba(32,86,248,.28);

  outline:none;

  transform:translateY(-2px);
}

.b2w-entry-v12__sound:focus-visible,
.b2w-entry-v12__continue:focus-visible,
.b2w-entry-v12__skip:focus-visible{
  box-shadow:
    0 0 0 3px rgba(128,153,243,.22),
    0 12px 32px rgba(0,0,0,.20);
}

.b2w-entry-v12__sound-icon{
  font-size:.9rem;
  line-height:1;
}

.b2w-entry-v12__continue-arrow{
  font-size:.9rem;
  line-height:1;
}

/* Audio bloqueado: hacer el control apenas más evidente */
.b2w-entry-v12.is-audio-blocked .b2w-entry-v12__sound{
  border-color:rgba(169,186,246,.68);
  background:rgba(32,86,248,.24);
}

/* ------------------------------------------------------------
   9. SKIP / IR AL SITIO
------------------------------------------------------------ */

.b2w-entry-v12__skip{
  position:absolute;
  right:clamp(20px,3vw,42px);
  top:max(24px, env(safe-area-inset-top));
  z-index:10;

  padding:0 15px;

  opacity:.78;
}

.b2w-entry-v12.is-playing .b2w-entry-v12__skip{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ------------------------------------------------------------
   10. STATUS ACCESSIBLE
------------------------------------------------------------ */

.b2w-entry-v12__status{
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  margin:-1px !important;
  padding:0 !important;

  overflow:hidden !important;

  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;

  white-space:nowrap !important;

  border:0 !important;
}

/* ------------------------------------------------------------
   11. ESTADOS DE EXPERIENCIA
------------------------------------------------------------ */

/* Entrada */
.b2w-entry-v12.is-welcome .b2w-entry-v12__welcome{
  opacity:1;
  visibility:visible;
}

/* Reproducción */
.b2w-entry-v12.is-playing{
  background:#000000;
}

.b2w-entry-v12.is-playing .b2w-entry-v12__stage{
  background:#000000;
}

/* Sombra inferior localizada para proteger controles,
   sin oscurecer el video completo */
.b2w-entry-v12.is-playing .b2w-entry-v12__stage::after{
  content:"";

  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;

  height:min(32vh,280px);

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 42%,
      rgba(0,0,0,.40) 100%
    );
}

/* Salida cinematográfica */
.b2w-entry-v12.is-closing{
  opacity:0;
  visibility:hidden;

  transform:translate3d(0,-18px,0);

  pointer-events:none;
}

/* Error de media:
   se conserva la bienvenida para no mostrar una pantalla rota */
.b2w-entry-v12.is-video-unavailable .b2w-entry-v12__media{
  display:none !important;
}

.b2w-entry-v12.is-video-unavailable .b2w-entry-v12__buffer-note{
  color:#D3DCFA;
}

/* ------------------------------------------------------------
   12. TABLET / MOBILE
------------------------------------------------------------ */

@media (max-width: 900px){

  .b2w-entry-v12__welcome{
    padding:
      max(24px, env(safe-area-inset-top))
      24px
      max(30px, env(safe-area-inset-bottom));
  }

  .b2w-entry-v12__welcome-inner{
    width:min(600px,100%);
  }

  .b2w-entry-v12__preload{
    width:min(470px,100%);
    margin-top:40px;
  }

  .b2w-entry-v12__controls{
    left:22px;
    right:22px;
  }

  .b2w-entry-v12__skip{
    right:22px;
  }
}

@media (max-width: 760px){

  .b2w-entry-v12,
  .b2w-entry-v12__stage,
  .b2w-entry-v12__media,
  .b2w-entry-v12__video{
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    min-height:100dvh !important;
  }

  .b2w-entry-v12__welcome{
    padding:
      max(22px, env(safe-area-inset-top))
      20px
      max(28px, env(safe-area-inset-bottom));
  }

  .b2w-entry-v12__brand{
    margin-bottom:26px;
  }

  .b2w-entry-v12__brand img{
    width:min(220px,52vw);
  }

  .b2w-entry-v12__eyebrow{
    font-size:.72rem;
    letter-spacing:.19em;
  }

  .b2w-entry-v12__tagline{
    max-width:330px;
    margin-inline:auto;

    font-size:.74rem;
    line-height:1.55;
  }

  .b2w-entry-v12__preload{
    margin-top:38px;
  }

  .b2w-entry-v12__progress-head{
    margin-bottom:11px;
  }

  .b2w-entry-v12__progress-head > span{
    font-size:.61rem;
    letter-spacing:.13em;
  }

  .b2w-entry-v12__progress-head strong{
    font-size:.72rem;
  }

  .b2w-entry-v12__buffer-note{
    font-size:.66rem;
  }

  .b2w-entry-v12__never{
    margin-top:26px;

    font-size:.64rem;
  }

  .b2w-entry-v12__controls{
    left:16px;
    right:16px;
    bottom:max(18px, env(safe-area-inset-bottom));

    gap:10px;
  }

  .b2w-entry-v12__sound,
  .b2w-entry-v12__continue{
    min-height:42px;

    font-size:.58rem;
    letter-spacing:.09em;
  }

  .b2w-entry-v12__sound{
    padding-inline:13px;
  }

  .b2w-entry-v12__continue{
    padding-inline:14px;
  }

  .b2w-entry-v12__skip{
    top:max(16px, env(safe-area-inset-top));
    right:16px;

    min-height:40px;
    padding-inline:13px;

    font-size:.57rem;
  }
}

@media (max-width: 430px){

  .b2w-entry-v12__welcome-inner{
    transform:translateY(-2vh);
  }

  .b2w-entry-v12__brand img{
    width:min(190px,54vw);
  }

  .b2w-entry-v12__preload{
    margin-top:34px;
  }

  .b2w-entry-v12__controls{
    align-items:flex-end;
  }

  .b2w-entry-v12__sound,
  .b2w-entry-v12__continue{
    min-height:40px;
  }

  .b2w-entry-v12__sound{
    max-width:58%;
  }

  .b2w-entry-v12__continue{
    flex:none;
  }
}

/* ------------------------------------------------------------
   13. LANDSCAPE MOBILE / TABLET
------------------------------------------------------------ */

@media (max-height: 560px) and (orientation: landscape){

  .b2w-entry-v12__welcome{
    padding:
      max(16px, env(safe-area-inset-top))
      28px
      max(18px, env(safe-area-inset-bottom));
  }

  .b2w-entry-v12__welcome-inner{
    transform:none;
  }

  .b2w-entry-v12__brand{
    margin-bottom:14px;
  }

  .b2w-entry-v12__brand img{
    width:min(170px,28vw);
  }

  .b2w-entry-v12__eyebrow{
    margin-bottom:7px;
  }

  .b2w-entry-v12__preload{
    width:min(460px,64vw);
    margin-top:22px;
  }

  .b2w-entry-v12__never{
    margin-top:17px;
  }
}

/* ------------------------------------------------------------
   14. ACCESSIBILITY / REDUCED MOTION
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){

  .b2w-entry-v12,
  .b2w-entry-v12__media,
  .b2w-entry-v12__welcome,
  .b2w-entry-v12__progress-fill,
  .b2w-entry-v12__sound,
  .b2w-entry-v12__continue,
  .b2w-entry-v12__skip{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ------------------------------------------------------------
   15. POINTER / TOUCH REFINEMENT
------------------------------------------------------------ */

@media (hover:none) and (pointer:coarse){

  .b2w-entry-v12__sound:hover,
  .b2w-entry-v12__continue:hover,
  .b2w-entry-v12__skip:hover{
    transform:none;
  }

  .b2w-entry-v12__sound,
  .b2w-entry-v12__continue,
  .b2w-entry-v12__skip{
    -webkit-tap-highlight-color:transparent;
  }
}

/* ============================================================
   /B2W AGENCY · OPENING EXPERIENCE V12
============================================================ */