/* Carla de Weber · sistema 2026 · home y recursos (generado desde el borrador v7) */
/* Carla de Weber · tokens de marca 2026 (minimalista tech). Única fuente de verdad. */
@font-face{font-family:"Cal Sans";src:url("/assets/fonts/cal-sans-latin-400-normal.woff2") format("woff2");font-weight:400}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900}
:root{
  /* color: base */
  --crema:#FFF9F0; --tinta:#1F1E1E; --gris:#6B6560; --linea:#1F1E1E;
  /* color: señal (uno por pieza) */
  --rosa:#FF81A7;
  /* color: códigos de categoría (solo etiquetas, puntos y fichas) */
  --ugc:#AEDA95; --webs:#94D8F4; --mentoria:#FF987B;
  /* tintes para fondos (opcional, máx. 1 por pantalla) */
  --t-rosa:#FFE6EE; --t-ugc:#EAF5E1; --t-webs:#E1F3FB; --t-mentoria:#FFD9CB;
  /* tipografía */
  --display:"Cal Sans","Inter",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* forma */
  --r:10px; --r-lg:22px; --hair:1px solid var(--linea);
  /* espacio: escala de 8 */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
}


*{box-sizing:border-box}html{font-synthesis:none;scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--tinta);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
[data-l]{display:none}html[lang=es] [data-l=es],html[lang=en] [data-l=en]{display:inline}
.w{max-width:1120px;margin:0 auto;padding:0 24px}
.d{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.04;margin:0}
.l{font:500 .72rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.m{color:var(--gris)}
.hl{background:linear-gradient(transparent 64%,var(--rosa) 64% 92%,transparent 92%)}
.btn{display:inline-flex;align-items:center;gap:.6em;font:400 1.02rem var(--display);padding:.75em 1.2em;border:1px solid var(--tinta);border-radius:var(--r);background:transparent;color:var(--tinta);text-decoration:none;transition:background .15s,color .15s}
.btn::after{content:"→"}.btn:hover{background:var(--tinta);color:var(--crema)}
.btn.s{background:var(--tinta);color:var(--crema)}.btn.s:hover{background:var(--crema);color:var(--tinta)}
:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
header{position:sticky;top:0;z-index:9;background:var(--crema);border-bottom:var(--hair)}
header .w{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
nav{display:flex;gap:24px}nav a{text-decoration:none}nav a:hover{text-decoration:underline;text-underline-offset:6px}
.end{display:flex;align-items:center;gap:12px}
.lang button{font:500 .72rem var(--body);letter-spacing:.1em;border:0;background:none;padding:.4em .5em;cursor:pointer;color:var(--gris)}
.lang button[aria-pressed=true]{color:var(--tinta);text-decoration:underline;text-underline-offset:5px}
@media(max-width:860px){nav{display:none}}
section{padding:96px 0;border-bottom:var(--hair)}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px;flex-wrap:wrap}
h2.d{font-size:clamp(2rem,4.4vw,3.2rem)}
.hero{padding:72px 0 88px}
.hero .in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:20px 0 20px}
.hero p{font-size:1.2rem;max-width:30em;margin:0 0 28px}
.hero .ph{width:100%;aspect-ratio:4/5;object-fit:cover;border:var(--hair);border-radius:var(--r-lg)}
.cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cta img{width:70px;transform:scaleX(-1) rotate(8deg)}
@media(max-width:800px){.hero .in{grid-template-columns:1fr}.hero .ph{max-width:380px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;font:500 .72rem var(--body);letter-spacing:.1em;text-transform:uppercase;padding:.45em .8em;border:var(--hair);border-radius:99px;white-space:nowrap}
.dot{width:.6em;height:.6em;border-radius:50%;margin-right:.55em;display:inline-block}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px}
@media(max-width:800px){.two{grid-template-columns:1fr;gap:32px}}
.tl{list-style:none;margin:24px 0 0;padding:0;border-top:var(--hair)}
.tl li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:14px 0;border-bottom:var(--hair)}
.tl .n{font:500 .72rem var(--body);letter-spacing:.12em;padding-top:.45em}
.case{border:var(--hair);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media(max-width:800px){.case{grid-template-columns:1fr}}
.case .shot{background:#ECECE7;border-right:var(--hair);display:flex;align-items:flex-end;justify-content:center;padding:28px 28px 0;position:relative}
.case .shot .desk{width:100%;border:var(--hair);border-bottom:0;border-radius:12px 12px 0 0;overflow:hidden;background:#fff}
.case .shot .mob{position:absolute;right:20px;bottom:0;width:22%;border:var(--hair);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;background:#fff}
@media(max-width:800px){.case .shot{border-right:0;border-bottom:var(--hair)}}
.case .tx{padding:32px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.rev{border:var(--hair);border-radius:var(--r);padding:16px;background:var(--t-rosa)}
.rev p{margin:0 0 8px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.card{border:var(--hair);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;background:var(--crema);display:block;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card .im{aspect-ratio:8/5;border-bottom:var(--hair);overflow:hidden;background:#fff}.card .im img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:14px 16px;display:flex;flex-direction:column;gap:2px}.card .tx b{font-size:1.2rem}.card .tx .m{font-size:.88rem}
.ugc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:700px){.ugc{grid-template-columns:1fr}}
.ugc .t{border:var(--hair);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:200px;text-decoration:none}
.ugc .t b{font-size:1.5rem}
.ugc .big{grid-column:span 1;padding:0;overflow:hidden}.ugc .big img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.final{padding:96px 0;border-bottom:0}
.final h2{font-size:clamp(2.4rem,6vw,4.8rem);margin-bottom:24px}
.fb{display:flex;gap:16px;flex-wrap:wrap;margin:24px 0}
footer{border-top:var(--hair);padding:32px 0}footer .w{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}footer a{text-decoration:none}

/* v2: portada a pantalla completa, menú en píldora, tarjetas de cristal, cierre en tinta */
body{background:var(--crema)}
header{position:sticky;top:14px;height:0;margin-top:14px;border:0;background:none;z-index:20;pointer-events:none}.marq.top+header{margin-top:12px}
header .w{pointer-events:auto;max-width:1120px;height:60px;background:rgba(31,30,30,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,249,240,.18);border-radius:99px;padding:0 10px 0 22px;color:var(--crema)}
header .w img{filter:invert(1) brightness(2)}
header nav a{color:var(--crema)}header .lang button{color:rgba(255,249,240,.6)}header .lang button[aria-pressed=true]{color:var(--crema)}
header .btn.s{background:var(--crema);color:var(--tinta);border-color:var(--crema)}
header .btn.s:hover{background:var(--rosa);border-color:var(--rosa)}
.hero2{position:relative;min-height:min(100vh,860px);background:var(--tinta);color:var(--crema);overflow:hidden;padding:120px 0 64px;display:flex;align-items:flex-end;border-bottom:0}
.hero2::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 55%,rgba(255,129,167,.55),rgba(255,152,123,.18) 45%,transparent 72%),radial-gradient(40% 50% at 15% 100%,rgba(148,216,244,.18),transparent 70%)}
.hero2 .cut{position:absolute;right:max(2vw,calc((100vw - 1120px)/2));bottom:0;height:min(88%,760px);width:auto;max-width:56vw;object-fit:contain;object-position:bottom}
.hero2 .w{position:relative;z-index:2;width:100%}
.hero2 .l.m{color:rgba(255,249,240,.7)}
.hero2 h1{font-size:clamp(2.8rem,6.2vw,5.4rem);max-width:7.4em;margin:18px 0 20px}
.hero2 p{font-size:1.2rem;max-width:26em;color:rgba(255,249,240,.85);margin:0 0 28px}
.hero2 .btn{border-color:var(--crema);color:var(--crema)}.hero2 .btn:hover{background:var(--crema);color:var(--tinta)}
.hero2 .btn.s{background:var(--crema);color:var(--tinta)}.hero2 .btn.s:hover{background:var(--rosa);border-color:var(--rosa)}
.glass{background:rgba(255,249,240,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,249,240,.22);border-radius:var(--r-lg)}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.stat{padding:14px 20px;min-width:150px}.stat b{display:block;font:400 2rem/1 var(--display)}.stat span{font-size:.82rem;color:rgba(255,249,240,.75)}
.svc{position:absolute;z-index:2;right:max(24px,calc((100vw - 1120px)/2 + 24px));bottom:56px;padding:16px 18px;width:240px}
.svc .l{color:rgba(255,249,240,.6);display:block;margin-bottom:8px}.svc div{padding:8px 0;border-top:1px solid rgba(255,249,240,.16);display:flex;justify-content:space-between}
@media(max-width:900px){.hero2 .cut{opacity:.55;max-width:90vw;right:-10vw}.svc{display:none}header nav{display:none}}
.final2{background:var(--tinta);color:var(--crema);border-bottom:0;position:relative;overflow:hidden}
.final2::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 85% 100%,rgba(255,129,167,.4),transparent 70%)}
.final2 .w{position:relative}.final2 .l.m,.final2 .m{color:rgba(255,249,240,.7)}
.final2 .btn{border-color:var(--crema);color:var(--crema)}.final2 .btn:hover{background:var(--crema);color:var(--tinta)}
.final2 .btn.s{background:var(--crema);color:var(--tinta)}.final2 .btn.s:hover{background:var(--rosa);border-color:var(--rosa)}
.final2 a{color:var(--crema)}
footer{background:var(--tinta);color:var(--crema);border-top:1px solid rgba(255,249,240,.18)}footer a{color:var(--crema)}footer .m{color:rgba(255,249,240,.7)}

/* v3: versión clara */
header .w{background:rgba(255,249,240,.72);border:1px solid rgba(31,30,30,.14);color:var(--tinta)}
header .w img{filter:none}
header nav a{color:var(--tinta)}header .lang button{color:var(--gris)}header .lang button[aria-pressed=true]{color:var(--tinta)}
header .btn.s{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
header .btn.s:hover{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
.hero2{background:var(--crema);color:var(--tinta);border-bottom:1px solid var(--tinta)}
.hero2::before{background:radial-gradient(55% 70% at 74% 52%,var(--t-rosa) 0,rgba(255,129,167,.35) 38%,transparent 72%),radial-gradient(40% 55% at 8% 100%,var(--t-webs),transparent 70%)}
.hero2 .l.m{color:var(--gris)}
.hero2 p{color:var(--tinta)}
.hero2 .btn{border-color:var(--tinta);color:var(--tinta)}.hero2 .btn:hover{background:var(--tinta);color:var(--crema)}
.hero2 .btn.s{background:var(--tinta);color:var(--crema)}.hero2 .btn.s:hover{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
.glass{background:rgba(255,255,255,.62);border:1px solid rgba(31,30,30,.14)}
.stat span{color:var(--gris)}
.svc{background:rgba(255,249,240,.94);color:var(--tinta)}
.svc .l{color:var(--gris)}.svc div{border-top:1px solid rgba(31,30,30,.14)}
.final2{background:var(--t-rosa);color:var(--tinta)}
.final2::before{background:radial-gradient(50% 80% at 90% 100%,rgba(255,129,167,.35),transparent 70%)}
.final2 .l.m,.final2 .m{color:var(--gris)}
.final2 .btn{border-color:var(--tinta);color:var(--tinta)}.final2 .btn:hover{background:var(--tinta);color:var(--crema)}
.final2 .btn.s{background:var(--tinta);color:var(--crema)}.final2 .btn.s:hover{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
.final2 a{color:var(--tinta)}
.final2 .hl{background:linear-gradient(transparent 64%,var(--rosa) 64% 92%,transparent 92%)}
footer{background:var(--crema);color:var(--tinta);border-top:1px solid var(--tinta)}footer a{color:var(--tinta)}footer .m{color:var(--gris)}

/* v4: animaciones (se desactivan con prefers-reduced-motion) */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,2%,0) scale(1.06)}}
@keyframes draw{from{background-size:0% 100%}to{background-size:100% 100%}}
.hero2::before{animation:drift 14s ease-in-out infinite}
.hero2 .cut{animation:slidein .9s .25s cubic-bezier(.22,.9,.28,1) both}
.hero2 .cut-wrap{display:contents}
.hero2 .l.m,.hero2 h1,.hero2 p,.hero2 .cta,.hero2 .stat,.hero2 .svc{animation:rise .8s cubic-bezier(.22,.9,.28,1) both}
.hero2 .l.m{animation-delay:.05s}.hero2 h1{animation-delay:.15s}.hero2 p{animation-delay:.3s}.hero2 .cta{animation-delay:.42s}
.hero2 .stat:nth-child(1){animation-delay:.55s}.hero2 .stat:nth-child(2){animation-delay:.65s}.hero2 .stat:nth-child(3){animation-delay:.75s}
.hero2 .svc{animation:rise .8s .85s cubic-bezier(.22,.9,.28,1) both,bob 7s 1.8s ease-in-out infinite}
.hl{background-repeat:no-repeat;background-position:0 0;animation:draw .9s .6s cubic-bezier(.22,.9,.28,1) both}
header .w{transition:height .25s,background .25s,box-shadow .25s}
header.sc .w{height:52px;box-shadow:0 8px 28px -12px rgba(31,30,30,.35);background:rgba(255,249,240,.9)}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.9,.28,1),transform .7s cubic-bezier(.22,.9,.28,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.card,.r,.ugc .t,.case,.stat{transition:transform .25s cubic-bezier(.22,.9,.28,1),box-shadow .25s}
.card:hover,.ugc .t:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(31,30,30,.45)}
.card .im img{transition:transform .5s cubic-bezier(.22,.9,.28,1)}.card:hover .im img{transform:scale(1.04)}
.btn::after{transition:transform .2s}.btn:hover::after{transform:translateX(4px)}
.svc div span:last-child{transition:transform .2s}.svc div:hover span:last-child{transform:translateX(4px)}
.tl li{transition:padding-left .25s}.tl li:hover{padding-left:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.js .rv{opacity:1;transform:none}}

/* v5: móvil y secciones del medio */
@media(max-width:900px){
 .hero2{flex-direction:column;justify-content:flex-start;align-items:stretch;padding:96px 0 40px;min-height:0}
 .hero2 .cut{position:relative;order:-1;right:auto;bottom:auto;opacity:1;max-width:none;height:340px;width:auto;margin:0 auto 12px;display:block;z-index:1}
 .hero2 .w{z-index:2}
 .hero2 h1{max-width:none;font-size:clamp(2.5rem,11vw,3.6rem)}
 .stats{gap:8px;margin-top:28px;flex-wrap:nowrap}.stat{min-width:0;flex:1;padding:12px}.stat b{font-size:1.5rem}.stat span{font-size:.72rem;line-height:1.3}
}
@media(max-width:480px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .tx{padding:10px 12px}.card .tx b{font-size:1rem}.card .tx .m{font-size:.78rem}}
.about-ph{margin-top:28px;width:100%;max-width:300px;aspect-ratio:4/5;object-fit:cover;border:var(--hair);border-radius:var(--r-lg)}
@media(max-width:800px){.about-ph{max-width:240px}}
.feat{display:flex;flex-wrap:wrap;gap:8px}
.big-n{font:400 clamp(3.6rem,8vw,5.4rem)/.9 var(--display);letter-spacing:-.03em}
.minis{display:flex;gap:8px;flex-wrap:wrap}.mini{border:var(--hair);border-radius:var(--r);padding:8px 12px;font-size:.82rem}.mini b{display:block;font:400 1.35rem/1 var(--display)}
.ugc .t{background:rgba(255,255,255,.55)}
.ugc .t.n1{background:var(--t-ugc)}.ugc .t.n2{background:var(--t-webs)}

/* v6: botones nuevos (píldora con círculo), carrusel de ejemplos y visor */
html body .btn{display:inline-flex;align-items:center;gap:.9em;font:600 .95rem/1 var(--body);letter-spacing:0;padding:6px 6px 6px 20px;min-height:46px;border-radius:999px;border:1px solid rgba(31,30,30,.14);background:rgba(255,255,255,.7);color:var(--tinta);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
html body .btn::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFF9F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/15px no-repeat;transition:background-color .2s,transform .25s cubic-bezier(.22,.9,.28,1)}
html body .btn:hover{background:#fff;color:var(--tinta);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(31,30,30,.5)}
html body .btn:hover::after{background-color:var(--rosa);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F1E1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");transform:translateX(3px) rotate(-45deg)}
html body .btn.s{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
html body .btn.s::after{background-color:var(--crema);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F1E1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E")}
html body .btn.s:hover{background:var(--tinta);color:var(--crema)}
html body .btn.s:hover::after{background-color:var(--rosa)}
header .btn.s{min-height:42px;padding:4px 4px 4px 16px}header .btn.s::after{width:32px;height:32px}
.final2 .btn{background:rgba(255,255,255,.7);border-color:rgba(31,30,30,.14);color:var(--tinta)}
/* carrusel */
.kar{position:relative}
.bahn{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 24px 8px;margin:0 -24px;scroll-padding-left:24px}
.bahn::-webkit-scrollbar{display:none}
.feld{flex:0 0 min(560px,82%);scroll-snap-align:start;border:0;padding:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.feld .shot2{position:relative;aspect-ratio:16/10;border:var(--hair);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:transform .3s cubic-bezier(.22,.9,.28,1),box-shadow .3s}
.feld:hover .shot2,.feld:focus-visible .shot2{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(31,30,30,.55)}
.feld img{width:100%;height:100%;object-fit:cover}
.feld .ver{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;font:500 .78rem var(--body);padding:7px 11px;border-radius:99px;background:rgba(31,30,30,.78);color:var(--crema);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.feld figcaption,.feld .cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 4px 0}
.feld .cap b{font:400 1.25rem var(--display);letter-spacing:-.01em}.feld .cap span{font-size:.88rem;color:var(--gris)}
.ctl{display:flex;align-items:center;gap:12px;margin-top:20px}
.ctl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(31,30,30,.2);background:rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.ctl button:hover{background:var(--rosa)}.ctl button:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.7)}
.prog{flex:1;height:2px;background:rgba(31,30,30,.14);border-radius:2px;overflow:hidden}.prog i{display:block;height:100%;width:20%;background:var(--tinta);border-radius:2px;transition:margin-left .15s linear,width .15s}
/* visor */
.vis{position:fixed;inset:0;z-index:50;display:none;background:rgba(31,30,30,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:3vh 3vw}
.vis.on{display:flex}
.vis .box{margin:auto;width:min(1280px,100%);height:100%;background:var(--crema);border-radius:var(--r-lg);border:1px solid rgba(31,30,30,.25);display:flex;flex-direction:column;overflow:hidden}
.vis .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--hair)}
.vis .bar b{font:400 1.15rem var(--display)}.vis .bar small{display:block;color:var(--gris);font-size:.78rem}
.vis .bar .x{border:1px solid rgba(31,30,30,.2);background:rgba(255,255,255,.7);border-radius:99px;padding:.6em 1em;font:600 .85rem var(--body);cursor:pointer}
.vis iframe{flex:1;border:0;width:100%;background:#fff}

/* v6b: mockup con profundidad (inspirado en las animaciones de la referencia) */
@keyframes sway{0%,100%{transform:rotate3d(1,.55,.12,2.6deg) translate3d(0,-8px,0)}50%{transform:rotate3d(1,.55,.12,-2.8deg) translate3d(0,8px,0)}}
@keyframes bobm{0%,100%{transform:translateZ(80px) rotate(2deg) translateY(0)}50%{transform:translateZ(80px) rotate(2deg) translateY(-10px)}}
@keyframes bobc{0%,100%{transform:translateZ(120px) translateY(0)}50%{transform:translateZ(120px) translateY(-7px)}}
@keyframes halob{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes emerge{0%{opacity:0;filter:blur(16px);transform:translateY(.12em) scale(1.05)}100%{opacity:1;filter:none;transform:none}}
@keyframes sweep{0%,60%{transform:translateX(-180%) skewX(-18deg);opacity:0}70%{opacity:.9}100%{transform:translateX(420%) skewX(-18deg);opacity:0}}
.case .shot.stage{perspective:1400px;display:grid;place-items:center;padding:64px 88px 72px 56px;overflow:hidden;position:relative;background:linear-gradient(180deg,var(--t-rosa),var(--crema) 70%)}
.stage .halo{position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(255,129,167,.5),rgba(148,216,244,.25) 60%,transparent);filter:blur(30px);animation:halob 7s ease-in-out infinite}
.stage .par{position:relative;width:100%;max-width:620px;transform-style:preserve-3d;transform:rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-5deg));transition:transform .25s ease-out}
.stage .scene{position:relative;transform-style:preserve-3d;animation:sway 10s ease-in-out infinite}
.stage .dev{background:#fff;border:1px solid rgba(31,30,30,.7);box-shadow:0 60px 70px -40px rgba(31,30,30,.55),0 24px 34px -20px rgba(31,30,30,.4)}
.stage .desk{position:relative;border-radius:16px;overflow:hidden;transform:translateZ(0)}
.stage .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F4F1EC;border-bottom:1px solid rgba(31,30,30,.12)}
.stage .chrome i{width:9px;height:9px;border-radius:50%;background:#d6d1c9}.stage .chrome i:nth-child(1){background:var(--rosa)}
.stage .chrome span{margin-left:10px;flex:1;max-width:280px;font:500 .68rem var(--body);color:var(--gris);background:#fff;border-radius:99px;padding:4px 10px}
.stage .desk img{display:block;width:100%;height:auto;aspect-ratio:1440/1000;object-fit:cover}
.stage .mob{position:absolute;right:-10%;bottom:-15%;width:24%;border-radius:26px;border:5px solid var(--tinta);overflow:hidden;animation:bobm 6.5s ease-in-out infinite;transform:translateZ(80px) rotate(2deg)}
.stage .mob img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover}
.stage .float-chip{position:absolute;left:-4%;top:-9%;font:500 .72rem var(--body);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.85);border:1px solid rgba(31,30,30,.15);border-radius:99px;padding:8px 12px;box-shadow:0 14px 24px -14px rgba(31,30,30,.5);animation:bobc 5.5s ease-in-out infinite;transform:translateZ(120px)}
@media(max-width:800px){.case .shot.stage{padding:56px 52px 64px 40px;border-right:0}.stage .mob{right:-8%;bottom:-12%;width:27%}.stage .float-chip{left:0;top:-12%}}
.hero2 h1{animation:emerge 1s .15s cubic-bezier(.22,.9,.28,1) both}
html body .btn.s{position:relative;overflow:hidden}
html body .btn.s::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:sweep 6s 2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.stage .par{transform:none}}

/* v7: banner en movimiento y carrusel a sangre */
@keyframes marq{to{transform:translateX(-50%)}}
.marq{background:var(--t-rosa);border-bottom:1px solid var(--tinta);overflow:hidden;white-space:nowrap}
.marq .mt{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq:hover .mt{animation-play-state:paused}
.marq .mg{display:flex;align-items:center;gap:28px;padding:16px 14px;flex:none}
.marq .mi{font:400 1.02rem var(--body);color:var(--tinta)}.marq .mi.b{font-weight:700}
.marq .sm{flex:none;color:var(--tinta)}
@media(prefers-reduced-motion:reduce){.marq .mt{animation:none}}
main{overflow-x:clip}
.kar{margin-inline:calc(50% - 50vw)}
.bahn{padding-inline:max(24px,calc((100vw - 1120px)/2 + 24px));margin-inline:0;scroll-padding-inline:max(24px,calc((100vw - 1120px)/2 + 24px));gap:20px}
.feld{flex:0 0 min(760px,78vw)}
.ctl{padding-inline:max(24px,calc((100vw - 1120px)/2 + 24px))}
@media(max-width:600px){.feld{flex-basis:84vw}}

/* recursos v2 */
.phero{position:relative;padding:140px 0 56px;background:var(--crema);overflow:hidden;border-bottom:1px solid var(--tinta)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(45% 80% at 85% 20%,var(--t-rosa),rgba(255,129,167,.28) 45%,transparent 75%),radial-gradient(35% 60% at 5% 100%,var(--t-webs),transparent 70%);animation:drift 14s ease-in-out infinite}
.phero .w{position:relative}
.phero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);max-width:11em;margin:16px 0 18px;animation:emerge 1s .1s cubic-bezier(.22,.9,.28,1) both}
.phero p.lead{font-size:1.2rem;max-width:32em;margin:0}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.filter button{font:600 .8rem var(--body);border:1px solid rgba(31,30,30,.2);border-radius:99px;background:rgba(255,255,255,.7);padding:.7em 1.1em;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.filter button:hover{transform:translateY(-2px)}
.filter button[aria-pressed=true]{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.res{grid-template-columns:1fr}}
.r{position:relative;border:1px solid var(--tinta);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:300px;text-decoration:none;color:var(--tinta);overflow:hidden;transition:transform .3s cubic-bezier(.22,.9,.28,1),box-shadow .3s}
.r[data-c=ugc]{background:var(--t-ugc)}.r[data-c=webs]{background:var(--t-webs)}.r[data-c=mentoria]{background:var(--t-mentoria)}
.r::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px);transition:transform .5s cubic-bezier(.22,.9,.28,1)}
.r:hover{transform:translateY(-6px);box-shadow:0 22px 36px -24px rgba(31,30,30,.55)}.r:hover::before{transform:scale(1.5)}
.r>*{position:relative}
.r .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.r .chip{background:rgba(255,255,255,.7)}
.r b{font-size:1.5rem}
.r .go{align-self:flex-start;display:inline-flex;align-items:center;gap:.9em;font:600 .95rem/1 var(--body);padding:6px 6px 6px 18px;min-height:44px;border-radius:999px;background:var(--tinta);color:var(--crema)}
.r .go::after{content:"";width:32px;height:32px;border-radius:50%;background:var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F1E1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .25s,background-color .2s}
.r:hover .go::after{background-color:var(--rosa);transform:translateX(3px) rotate(-45deg)}

/* menú móvil */
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(31,30,30,.2);background:rgba(255,255,255,.7);cursor:pointer;position:relative;padding:0}
.burger span{position:absolute;left:12px;right:12px;height:1.8px;background:var(--tinta);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:25px}
#nav.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}#nav.open .burger span:nth-child(2){opacity:0}#nav.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:900px){
 header#nav nav{display:none}
 .burger{display:block}
 header#nav.open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:70px;left:0;right:0;background:rgba(255,249,240,.97);border:1px solid rgba(31,30,30,.14);border-radius:24px;padding:12px 8px;box-shadow:0 24px 40px -24px rgba(31,30,30,.5)}
 header#nav.open nav a{padding:14px 16px;font-size:.8rem;border-bottom:1px solid rgba(31,30,30,.08)}header#nav.open nav a:last-child{border-bottom:0}
}
header .w{position:relative}
.marq.top{border-top:0}

.marq .mi a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.marq .mi a:hover{text-decoration-thickness:2px}

/* móvil: cabecera sin encogerse */
.lang{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:2px}
.lang button{white-space:nowrap}
.burger{flex:none}.end{flex:none;gap:8px}
@media(max-width:420px){header .w{padding:0 8px 0 16px;gap:8px}header .w img{height:20px}.end{gap:4px}header .btn.s{padding:4px 4px 4px 12px}}
html[lang=es] img[data-l=en],html[lang=en] img[data-l=es]{display:none !important}