/* =========================================================
   Portafolio de Sebastián Bedoya · estilos
   Orden: fuentes, tokens, base, piezas que se repiten y una
   sección tras otra (cada una con su comentario de inicio y fin).
   ========================================================= */

/* ---------- Fuentes (archivos dentro del proyecto) ---------- */
@font-face{font-family:"Rochester";src:url(../fonts/rochester-400.woff2) format("woff2");font-weight:400;font-display:swap}
/* la T mayúscula de Rochester parece una J ("Jexicor"): solo esa letra se toma de Dancing Script.
   Va después de la principal para que el navegador la prefiera en la T */
@font-face{font-family:"Rochester";src:url(../fonts/dancing-script-t.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0054}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-300i.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* solo trae las letras de "Special Gothic Condensed" para la muestra de Boost Crew */
@font-face{font-family:"Special Gothic Condensed One";src:url(../fonts/special-gothic-condensed-muestra.woff2) format("woff2");font-display:swap}

/* ---------- Tokens de la marca ---------- */
:root{
  --navy-900:#062A3F;
  --navy:#0A3149;
  --navy-700:#1D485E;
  --navy-400:#3D6376;
  --cream:#F7ECD2;
  --cream-2:#EDE3CA;
  --cream-muted:rgba(247,236,210,.84);   /* un poco más clara (antes .76): se lee bien aun sobre las luces del fondo */
  --red:#C0111E;
  --red-press:#9C0D18;
  --ink:#0A3149;
  --ink-muted:rgba(10,49,73,.8);
  --line:rgba(247,236,210,.45);
  --line-soft:rgba(247,236,210,.2);
  --line-ink:rgba(10,49,73,.22);
  --cta:var(--red);
  --cta-ink:var(--cream);
  --cta-hover:var(--red-press);
  --marcador:#FFE14D;
  --font-script:"Rochester","Brush Script MT",cursive;
  --font-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-pop:cubic-bezier(.34,1.4,.64,1);
  --dur:1.15s; --dist:28px; --t-hover:.45s;
  --gutter:clamp(16px,5vw,56px);
  --maxw:1180px;
  --section-y:clamp(72px,11vw,150px);
  --sombra:0 22px 44px -22px rgba(2,18,30,.85),0 2px 6px rgba(2,18,30,.22);
  /* las secciones azules son transparentes: se ve el fondo vivo que va detrás de toda la página */
  --fondo-azul:transparent;
  --fondo-crema:linear-gradient(170deg,#FBF1D9 0%,var(--cream-2) 100%);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;background:var(--navy)}
/* el cuerpo va sin fondo para que se vea el fondo vivo (que está detrás, en la capa -1) */
body{margin:0;background:transparent;color:var(--cream);font:400 16px/1.6 var(--font-sans);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
p,h1,h2,h3,h4,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.sobre :focus-visible,.panel-crema :focus-visible{outline-color:var(--ink)}

/* el grano de tus fondos: muy leve, quieto y sin recibir clics */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background:url(../img/grano.png) repeat;opacity:.38}

/* ======================================================
   INICIO Fondo vivo: profundidad en el azul
   Dos tiras largas de luces (azul claro y algún brillo crema) y sombras (azul casi negro) que
   suben más lento que la página: al bajar entran luces y sombras nuevas, cada vez en otro lugar.
   La tira lejana va más lenta que la cercana, así se cruzan y el fondo cambia todo el tiempo.
   Encima, destellos diminutos. Solo se mueve con transform y opacity: no pesa en el celular.
   ====================================================== */
.fondo-vivo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--navy);contain:strict}
/* respaldo quieto (sin JS o con menos movimiento): luz a la derecha y sombra a la izquierda */
.fv-base{position:absolute;inset:0;transition:opacity 1.2s ease;background:
  radial-gradient(60vmax 60vmax at 100% 0%,rgba(70,113,134,.62),rgba(70,113,134,.3) 40%,rgba(70,113,134,0) 72%),
  radial-gradient(55vmax 55vmax at 0% 12%,rgba(0,10,18,.8),rgba(0,10,18,.4) 45%,rgba(0,10,18,0) 72%),
  radial-gradient(48vmax 48vmax at 90% 100%,rgba(70,113,134,.4),rgba(70,113,134,0) 72%)}
.fondo-vivo.is-vivo .fv-base{opacity:0}   /* con movimiento, las tiras toman su lugar */
.fv-pista{position:absolute;left:0;top:0;width:100%;will-change:transform}
.fv-pozo{position:absolute;border-radius:50%}
/* viñeta: los bordes de la pantalla un poco más oscuros, como una foto con profundidad */
.fondo-vivo::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 42%,rgba(2,18,30,0) 48%,rgba(2,18,30,.5) 100%)}
/* destellos: una estrellita de luz crema que brilla 1 segundo (el brillo lo anima main.js) */
.fv-destellos{position:absolute;inset:0}
.fv-destello{position:absolute;width:var(--t,12px);height:var(--t,12px);margin:calc(var(--t,12px)/-2) 0 0 calc(var(--t,12px)/-2);opacity:0;rotate:var(--g,0deg);
  background:
    radial-gradient(circle,rgba(255,250,236,.95) 0 9%,rgba(247,236,210,.32) 24%,rgba(247,236,210,0) 52%),
    linear-gradient(90deg,rgba(247,236,210,0),rgba(247,236,210,.8) 50%,rgba(247,236,210,0)) 50% 50%/100% 1px no-repeat,
    linear-gradient(0deg,rgba(247,236,210,0),rgba(247,236,210,.8) 50%,rgba(247,236,210,0)) 50% 50%/1px 100% no-repeat}
/* ===== FIN Fondo vivo ===== */

/* Lenis (scroll suave) */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Piezas que se repiten ---------- */
/* al saltar con un enlace, la barra de arriba no tapa el inicio de la sección */
section[id]{scroll-margin-top:12px}
@media (min-width:900px){ section[id]{scroll-margin-top:92px} }
.contenedor{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* nombre corto de sección con la cinta roja chiquita */
.ceja{display:inline-flex;align-items:center;gap:12px;font:600 clamp(16.5px,1.45vw,19px)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.ceja::before{content:"";width:14px;height:22px;background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);flex:none}

/* títulos en cursiva que se escriben solos: aire para las colitas y las curvas */
[data-escribir]{display:inline-block;padding:.3em .22em .46em;margin:-.3em -.22em -.46em}
.is-writing{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--wipe,100%) - 14%),transparent var(--wipe,100%));mask-image:linear-gradient(90deg,#000 calc(var(--wipe,100%) - 14%),transparent var(--wipe,100%))}

/* marcador amarillo: un dato que falta y no se publica así */
.marcador{background:var(--marcador);color:#0A3149;font-weight:600;font-style:normal;padding:.08em .4em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;
  font:600 14px/1 var(--font-sans);letter-spacing:.06em;white-space:nowrap;border:0;
  transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),scale .18s var(--ease)}
.btn svg{width:14px;height:14px;flex:none;transition:translate var(--t-hover) var(--ease)}
.btn--cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 14px 30px -14px rgba(192,17,30,.9)}
.btn--linea{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.btn--chico{min-height:44px;padding:0 18px;font-size:13px}
@media (hover:hover){
  .btn--cta:hover{background:var(--cta-hover)}
  .btn--linea:hover{box-shadow:inset 0 0 0 1px var(--cream)}
  .btn:hover svg{translate:3px -3px}
}
.btn:active{scale:.97}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* enlace con flecha */
.enlace{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:600 13.5px/1.2 var(--font-sans);letter-spacing:.05em;border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--ease)}
.enlace svg{width:13px;height:13px;flex:none;transition:translate var(--t-hover) var(--ease)}
@media (hover:hover){ .enlace:hover{border-bottom-color:currentColor} .enlace:hover svg{translate:3px 0} }

/* paneles crema (como los fondos claros de tus diapositivas) */
.panel-crema{background:var(--fondo-crema);color:var(--ink);border-radius:var(--r-xl);padding:clamp(22px,4.5vw,56px);
  box-shadow:0 36px 70px -40px rgba(1,14,24,.95),0 2px 8px rgba(1,14,24,.2)}

/* la pieza a la que te lleva la rueda se marca un momento */
.is-destacado{position:relative;z-index:2;animation:realce 1s var(--ease)}
/* anillo rojo como tu cinta: se ve igual sobre el azul y sobre la crema */
.is-destacado::after{content:"";position:absolute;inset:-7px;border:3px solid var(--red);border-radius:calc(var(--r-md) + 7px);pointer-events:none;
  box-shadow:0 0 0 5px rgba(192,17,30,.18),0 0 26px rgba(192,17,30,.35);animation:anillo 3s var(--ease) forwards}
@keyframes realce{0%{scale:1}35%{scale:1.05}100%{scale:1}}
@keyframes anillo{0%{opacity:0;scale:1.1}15%{opacity:1;scale:1}75%{opacity:1;scale:1}100%{opacity:0;scale:1}}

/* aviso solo para revisar en tu computador (no aparece en el sitio publicado) */
/* aviso para quien tiene las animaciones apagadas en su equipo: puede elegir verlas */
.aviso-mov{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 8px 8px var(--gutter);background:var(--cream);color:var(--ink);font-size:13px;line-height:1.35;text-align:left}
.aviso-mov[hidden]{display:none}
.aviso-mov p{max-width:30ch}
.aviso-mov__si{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--red);color:var(--cream);font-weight:600;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.aviso-mov__cerrar{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink)}
.aviso-mov__cerrar svg{width:12px;height:12px}
@media (hover:hover){ .aviso-mov__si:hover{background:var(--red-press)} .aviso-mov__cerrar:hover{background:rgba(10,49,73,.08)} }
.aviso-mov :focus-visible{outline-color:var(--ink)}

/* ======================================================
   INICIO Barra de arriba (computador) y barra fija (celular)
   ====================================================== */
.barra-top{position:fixed;top:12px;left:16px;right:16px;max-width:1180px;margin:0 auto;z-index:100;display:none;align-items:center;gap:22px;
  padding:7px 7px 7px 10px;border-radius:999px;background:rgba(6,42,63,.9);box-shadow:inset 0 0 0 1px var(--line-soft),0 18px 40px -24px rgba(0,0,0,.8);
  transform:translateY(-160%);transition:transform .6s var(--ease)}
.barra-top.is-visible{transform:none}
.barra-top__links{display:flex;gap:26px;list-style:none;margin:0 0 0 auto}
.barra-top__links a{text-decoration:none;font:500 13px/1 var(--font-sans);letter-spacing:.04em;color:var(--cream-muted);transition:color var(--t-hover) var(--ease)}
.barra-top__links a:hover{color:var(--cream)}
.barra-top .btn{min-height:44px}
@media (min-width:900px){ .barra-top{display:flex} }

.barra-movil{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:100;display:none;gap:8px;
  transform:translateY(calc(100% + 110px));transition:transform .6s var(--ease)}
.barra-movil.is-visible{transform:none}
.barra-movil .btn{flex:1;min-height:52px}
.barra-movil .monograma{background:rgba(6,42,63,.92);width:52px;height:52px}
@media (max-width:899px){ .barra-movil{display:flex} }
/* publicado en Netlify (cuenta gratis): su botón "Powered by Netlify" ocupa la esquina de abajo (64 px de alto);
   la barra sube para que no le tape "Hablemos" y el pie deja más espacio al final */
.en-netlify .barra-movil{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:899px){ .en-netlify .pie{padding-bottom:170px} }
/* ===== FIN Barras ===== */

/* ======================================================
   INICIO Portada
   ====================================================== */
.portada{
  position:relative;min-height:calc(100svh - var(--aviso-h,0px));min-height:max(calc(100svh - var(--aviso-h,0px)),600px);overflow:hidden;isolation:isolate;
  /* la luz de la esquina y la sombra de abajo de siempre, sobre el fondo vivo (que se ve a través) */
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(61,99,118,.55) 0%,rgba(61,99,118,0) 62%),
    radial-gradient(70% 60% at 0% 100%,rgba(4,34,52,.85) 0%,rgba(4,34,52,0) 70%),
    linear-gradient(180deg,rgba(6,42,63,0) 0%,rgba(6,42,63,.7) 100%);
  --titulo-top:118px;
  --titulo-size:clamp(84px,min(25vw,27svh),260px);
  --hub-b:58px;
  --cinta-w:clamp(46px,13.5vw,104px);
}

/* el marco fino: con JS se dibuja; sin JS queda como borde */
.marco{position:absolute;inset:10px;z-index:6;pointer-events:none;--r-marco:22px}
.marco::before{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:var(--r-marco)}
.marco.has-trazo::before{display:none}
.marco svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.marco path{fill:none;stroke:var(--line);stroke-width:1}

/* la cinta roja con corte en V, sale de tu hoja de vida */
.cinta{position:absolute;top:0;left:50%;margin-left:calc(var(--cinta-w)/-2);width:var(--cinta-w);z-index:1;transform-origin:50% 0;
  /* el JS la mide exacto; sin JS baja hasta un poco más abajo de tu nombre */
  height:var(--cinta-h,calc(var(--titulo-top) + var(--titulo-size) * 1.05 + 50px));
  background:linear-gradient(180deg,#A90E19 0%,var(--red) 38%,#C9151F 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - var(--cinta-w)*.46),0 100%)}

.portada__top{position:absolute;top:26px;left:26px;right:24px;z-index:7;display:flex;justify-content:space-between;align-items:flex-start}
.portada__hola{font:600 13.5px/1.35 var(--font-sans);letter-spacing:.16em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:20px}
.nav__links{display:none;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font:500 13px/1 var(--font-sans);letter-spacing:.04em;color:var(--cream-muted);transition:color var(--t-hover) var(--ease)}
.nav__links a:hover{color:var(--cream)}
.monograma{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:none;text-decoration:none;font:400 21px/1 var(--font-script);-webkit-text-stroke:.4px var(--cream);padding-top:2px;color:var(--cream)}

.portada__centro{position:absolute;left:0;right:0;top:var(--titulo-top);z-index:3;text-align:center}
.portada__titulo{margin:0;display:inline-block;font:400 var(--titulo-size)/1.05 var(--font-script);color:var(--cream);-webkit-text-stroke:.017em var(--cream);white-space:nowrap;
  padding:.3em .22em .46em;margin:-.3em -.22em -.46em}
/* "By Sebastián Bedoya" y "Diseñador gráfico - Diseñador UI/UX" juntos y centrados debajo de Portafolio
   (en celular uno encima del otro; en computador en una línea con un punto rojo en medio) */
.portada__meta{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 20px;margin-top:12px;font:500 11px/1.3 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.portada__meta span{text-shadow:0 1px 8px rgba(6,42,63,.6)}
.portada__lead{margin:30px auto 0;max-width:15em;font:300 16px/1.5 var(--font-sans);color:var(--cream-muted);padding:0 20px}
.portada__lead b{font-weight:600;color:var(--cream)}
.portada__marcas{position:absolute;right:50px;bottom:66px;z-index:3;text-align:right;white-space:nowrap;font:500 13px/1.6 var(--font-sans);color:var(--cream-muted)}
.portada__marcas span{display:block;font:600 10.5px/1 var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:10px}
.portada__marcas a{text-decoration:none;transition:color var(--t-hover) var(--ease)}
.portada__marcas a:hover{color:var(--cream)}

/* las letras que ruedan: cuatro caras, relleno y contorno alternados */
.roll{display:inline-block;perspective:4.5em;--d:.525em}
.roll__in{display:block;position:relative;transform-style:preserve-3d;transform-origin:50% 50% calc(var(--d)*-1);transform:rotateX(var(--rx,0deg))}
.roll__f{display:block;font-style:normal;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:50% 50% calc(var(--d)*-1)}
.roll__f1,.roll__f2,.roll__f3{position:absolute;left:0;top:0;width:100%;height:100%}
.roll__f1{transform:rotateX(-90deg)}
.roll__f2{transform:rotateX(-180deg)}
.roll__f3{transform:rotateX(-270deg)}
.roll__f1,.roll__f3{color:transparent;-webkit-text-stroke:calc(.007em + .7px) var(--cream)}

/* la rueda de piezas: cada una lleva a su proyecto */
.rueda{position:absolute;left:50%;bottom:var(--hub-b);width:0;height:0;z-index:2;
  --cw:clamp(104px,min(35vw,18.5svh),196px);--ch:calc(var(--cw)*1.25);--R:calc(var(--cw)*1.96)}
.rueda__giro{position:absolute;left:0;top:0;width:0;height:0;margin:0;padding:0;list-style:none}
.rueda__carta{position:absolute;left:calc(var(--cw)/-2);top:calc(-1*var(--R) - var(--ch)/2);width:var(--cw);height:var(--ch);
  transform-origin:50% calc(var(--R) + var(--ch)/2);transform:rotate(calc(var(--i)*-30deg))}
.rueda__link{position:absolute;inset:0;display:block;border-radius:var(--r-md);overflow:hidden;background:var(--navy-700);box-shadow:var(--sombra);
  transition:translate var(--t-hover) var(--ease)}
.rueda__link::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(247,236,210,.32);pointer-events:none}
.rueda__link img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.rueda__link:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media (hover:hover) and (pointer:fine){ .rueda__link:hover{translate:0 -10px} }
.rueda__dial{position:absolute;--dial:calc((var(--R) - var(--ch)/2 - 6px)*2);left:calc(var(--dial)/-2);top:calc(var(--dial)/-2);width:var(--dial);height:var(--dial);overflow:visible;pointer-events:none}
.rueda__dial circle{fill:none;stroke:var(--line-soft);stroke-width:.45}
.rueda__etiqueta,.rueda__mando{z-index:120}
/* centrados sin translate: GSAP convierte translate en píxeles fijos */
.rueda__etiqueta{position:absolute;left:-210px;width:420px;top:calc(-1*(var(--R) - var(--ch)/2) + 14px);white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;color:var(--cream);pointer-events:none}
.rueda__etiqueta svg{width:9px;height:8px;fill:var(--red)}
.rueda__etiqueta span{display:block}
.rueda__etiqueta b{display:block;font:600 10.5px/1.2 var(--font-sans);letter-spacing:.2em;text-transform:uppercase}
.rueda__etiqueta small{display:block;margin-top:4px;font:400 12px/1.2 var(--font-sans);color:var(--cream-muted)}
.rueda__mando{position:absolute;left:-200px;width:400px;top:0;height:0;display:flex;align-items:center;justify-content:center;gap:20px}
.rueda__flecha{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(6,42,63,.35);display:grid;place-items:center;
  transition:background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),scale .18s var(--ease)}
.rueda__flecha svg{width:12px;height:12px;fill:var(--cream)}
.rueda__flecha:active{scale:.94}
@media (hover:hover){ .rueda__flecha:hover{background:rgba(247,236,210,.12);border-color:var(--cream)} }

/* estados ocultos de la entrada: solo con JS y con rescate a los 4 s */
.js [data-in],.js .portada__titulo,.js .rueda__carta{visibility:hidden;animation:rescate 0s 4s forwards}
@keyframes rescate{to{visibility:visible}}

/* celular: sin la frase del centro (tapaba las piezas de la rueda) y con "Bienvenidos a mi" centrado arriba,
   en una sola línea; el monograma queda a la derecha */
@media (max-width:899px){
  .portada__centro .portada__lead{display:none}
  .portada__top{justify-content:flex-end;align-items:center}
  .portada__hola{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;
    font-size:clamp(11px,3.3vw,13px);letter-spacing:.22em}
  .portada__hola br{display:none}
  /* sin la frase, el título baja un poco y las piezas crecen, para repartir el espacio parejo */
  .portada{--titulo-top:clamp(84px,11svh,110px)}
  /* las piezas crecen solo hasta donde quepan debajo del título y tu nombre, con 50 px de aire: nunca se encima el texto */
  .rueda{--cw:clamp(96px,min(48vw,22svh,calc((100svh - var(--aviso-h,0px) - 168px - var(--titulo-top) - 1.05 * var(--titulo-size)) / 2.585)),196px)}
}
@media (max-height:700px) and (max-width:899px){
  .portada{--titulo-top:96px}
}
@media (min-width:900px){
  .portada{--titulo-top:68px;--hub-b:66px;--cinta-w:clamp(112px,8.8vw,144px)}
  .portada .marco{inset:16px;--r-marco:28px}
  .portada__top{top:38px;left:48px;right:48px;justify-content:flex-end}
  /* "Bienvenidos a mi" va centrado sobre la cinta roja, arriba del título (sin tocar sus letras) */
  .portada__hola{position:absolute;left:50%;top:-8px;width:var(--cinta-w);margin-left:calc(var(--cinta-w)/-2);text-align:center;
    font-size:clamp(11.5px,.95vw,14px);letter-spacing:.1em;line-height:1.45}
  .nav__links{display:flex;gap:28px}
  /* a los dos lados de la cinta, pegados a ella: la cinta queda limpia en medio */
  .portada__meta{display:grid;grid-template-columns:1fr 230px 1fr;align-items:center;gap:0;padding:0 50px;margin-top:10px;font-size:12.5px}
  .portada__meta span:first-child{grid-column:1;text-align:right}
  .portada__meta span+span{grid-column:3;text-align:left}
  .portada__lead{position:absolute;left:50px;bottom:66px;margin:0;padding:0;text-align:left;max-width:24ch;font-size:16px;z-index:3}
  .portada__centro .portada__lead{display:none}
  .rueda__mando{gap:30px}
  .btn{min-height:52px;padding:0 28px}
  .btn--chico,.barra-top .btn{min-height:44px;padding:0 20px}
}
@media (max-width:899px){ .portada__sello,.portada__marcas{display:none} }
/* ===== FIN Portada ===== */

/* ======================================================
   INICIO Sobre mí (como tu hoja de vida)
   ====================================================== */
.sobre{position:relative;background:var(--fondo-crema);color:var(--ink);padding:var(--section-y) 0;overflow:hidden}
.sobre .ceja{color:var(--ink)}
/* arriba: foto y, al lado, nombre + perfil + contacto (en celular, uno debajo de otro) */
.sobre__intro{display:grid;gap:clamp(24px,4vw,40px)}
.sobre__foto{max-width:420px;margin:0 auto;width:100%}
.sobre__foto img{width:100%}
.sobre__titulo{text-align:center;font:400 clamp(54px,14vw,100px)/1.02 var(--font-script);-webkit-text-stroke:.012em var(--ink);color:var(--ink)}
.sobre__bio{margin-top:18px;font:400 clamp(16.5px,1.45vw,19px)/1.65 var(--font-sans);color:var(--ink-muted)}
.sobre__bio b{font-weight:700;color:var(--ink)}

/* la cinta de contacto de tu hoja de vida */
.cinta-contacto{position:relative;margin:32px 0 0 calc(-1 * var(--gutter));padding:22px 78px 24px var(--gutter);max-width:600px;color:var(--cream);
  background:linear-gradient(90deg,#A90E19 0%,var(--red) 55%,#CA1521 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 56px) 50%,100% 100%,0 100%)}
.cinta-contacto__titulo{font:700 17px/1.2 var(--font-sans);margin-bottom:10px}
.cinta-contacto a{display:flex;align-items:center;gap:10px;min-height:40px;text-decoration:none;font:400 italic clamp(16px,1.6vw,19px)/1.25 var(--font-sans);word-break:break-word}
.cinta-contacto a span{border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--ease)}
.cinta-contacto a:hover span{border-bottom-color:var(--cream)}
.cinta-contacto svg{width:17px;height:17px;flex:none;fill:currentColor}

/* abajo: experiencia y formación en una franja con la línea de tu hoja de vida */
.sobre__cv{display:grid;gap:36px;margin-top:clamp(44px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:2px solid var(--ink)}
.sobre__cv h3{font:700 clamp(20px,1.8vw,24px)/1.2 var(--font-sans);margin-bottom:22px}
.sobre__empleos{display:grid;gap:30px}
.empleo h4{font:700 clamp(17px,1.5vw,20px)/1.3 var(--font-sans)}
.lista{list-style:none;margin-top:14px;display:grid;gap:8px}
.lista li{position:relative;padding-left:22px;color:var(--ink-muted);font-size:16px;line-height:1.5}
.lista li b{font-weight:600;color:var(--ink)}
.lista li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* Skills: tus porcentajes */
.skills{margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,5vw,56px);border-top:2px solid var(--ink);text-align:center}
.skills h3{font:700 clamp(20px,1.8vw,24px)/1.2 var(--font-sans)}
.skills__lista{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px;max-width:820px;margin:30px auto 0}
.skill{display:grid;justify-items:center;gap:10px}
.skill svg{width:clamp(86px,22vw,124px);height:auto;overflow:visible}
.skill__num{font:500 clamp(24px,2.4vw,30px)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.skill__barra{width:min(140px,80%);height:3px;border-radius:3px;background:var(--line-ink);overflow:hidden}
.skill__barra span{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.skill__nombre{font:600 11.5px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

@media (min-width:900px){
  .sobre__intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,72px);align-items:center}
  .sobre__foto{max-width:none}
  .sobre__titulo{text-align:left;font-size:clamp(58px,6.3vw,100px);white-space:nowrap}
  .cinta-contacto{margin-left:0;padding-left:30px;max-width:560px}
  /* los 3 trabajos en una fila; Formación debajo, en una línea */
  .sobre__empleos{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,48px)}
  .sobre__cv .formacion{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 40px;padding-top:30px;border-top:1px solid var(--line-ink)}
  .sobre__cv .formacion h3{margin:0}
  .sobre__cv .formacion .lista{display:flex;flex-wrap:wrap;gap:8px 40px;margin:0}
  .skills__lista{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ===== FIN Sobre mí ===== */

/* ======================================================
   INICIO Contenido (índice de proyectos)
   ====================================================== */
.contenido{position:relative;padding:var(--section-y) 0 clamp(40px,5vw,64px);background:var(--fondo-azul);text-align:center}
.contenido__titulo{font:400 clamp(76px,19vw,176px)/1 var(--font-script);-webkit-text-stroke:.014em var(--cream);color:var(--cream)}
/* "Oprime un proyecto": pastilla con flecha para que no pase desapercibida */
.contenido__intro{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 22px;border:1.5px solid rgba(247,236,210,.55);border-radius:999px;background:rgba(247,236,210,.08);
  color:var(--cream);font:500 clamp(16px,1.5vw,19px)/1.3 var(--font-sans);letter-spacing:.01em}
.contenido__intro svg{width:16px;height:16px;flex:none;animation:intro-baja 1.6s var(--ease) infinite}
@media (max-width:420px){.contenido__intro{gap:8px;padding:10px 14px;font-size:13px}}
@keyframes intro-baja{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.indice{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,5vw,64px)}
.indice li{position:relative}
.indice li::before,.indice li::after{content:"";position:absolute;display:none;background:var(--line);pointer-events:none}
.indice li::before{right:0;width:1px;transform-origin:50% 0;transform:scaleY(var(--linea,1))}
.indice li::after{left:8%;right:8%;bottom:0;height:1px;transform-origin:0 50%;transform:scaleX(var(--linea,1))}
/* en celular: dos columnas, el quinto proyecto centrado abajo; líneas entre columnas y entre filas */
@media (max-width:899px){
  .indice li:last-child:nth-child(odd){grid-column:1 / -1}
  .indice li:nth-child(odd):not(:last-child)::before{display:block;top:12%;bottom:12%}
  .indice li:not(:last-child)::after{display:block}
}
.indice a{display:block;padding:26px 10px 30px;text-decoration:none;color:var(--cream)}
.indice__num{display:block;overflow:hidden;padding:.12em .1em .18em;margin:-.12em -.1em -.18em}
.indice__num span{display:block;font:400 clamp(76px,17vw,150px)/1 var(--font-script);-webkit-text-stroke:.012em var(--cream);color:var(--cream);transition:color var(--t-hover) var(--ease)}
.indice__nombre{display:block;margin-top:8px;font:400 clamp(19px,2.3vw,32px)/1.2 var(--font-sans)}
.indice__tipos{display:grid;gap:10px;margin-top:14px;font:300 italic clamp(14px,1.45vw,19px)/1.3 var(--font-sans);color:var(--cream-muted)}
@media (hover:hover){
  .indice a:hover .indice__num span{color:transparent;-webkit-text-stroke:1px var(--cream)}
}
.contenido__accion{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(40px,5vw,64px)}
/* Hablemos (rojo, principal) y Behance (borde, secundario) lado a lado; en celular se apilan */
.botonera{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contenido__accion p{color:var(--cream-muted)}
@media (min-width:900px){
  .indice{grid-template-columns:repeat(5,minmax(0,1fr))}
  .indice li:not(:last-child)::before{display:block;top:4%;bottom:4%}
  .indice a{padding:26px 12px 30px}
  .indice__num span{font-size:clamp(64px,8.4vw,126px)}
  .indice__nombre{font-size:clamp(18px,1.8vw,26px)}
  .indice__tipos{font-size:clamp(13px,1.15vw,16.5px)}
}
/* ===== FIN Contenido ===== */

/* ======================================================
   INICIO Cintas rojas con texto que corre (como en tus videos)
   ====================================================== */
/* 58 px de alto y letra de 32 px en una pantalla de 1400, igual que en el video */
.banda{position:relative;overflow:hidden;background:var(--red);color:#fff;font:400 italic clamp(17px,2.28vw,36px)/1 var(--font-sans);
  padding:.405em 0;white-space:pre;-webkit-user-select:none;user-select:none}
.banda__pista{display:flex;width:max-content}
.banda__grupo{display:block;flex:none}
.banda.is-viva .banda__pista{animation:banda var(--dur,40s) linear infinite;will-change:transform}
.banda.is-pausa .banda__pista{animation-play-state:paused}
/* de izquierda a derecha: la pista arranca corrida una copia hacia la izquierda y avanza hasta su lugar */
@keyframes banda{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* las que van dentro de un proyecto también salen de borde a borde de la pantalla */
.banda--sangre{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.banda--entre{margin-top:clamp(36px,4.5vw,58px)}
/* menos aire arriba de la cinta, como en el video (doble clase para ganarle a .proyecto) */
.proyecto.proyecto--banda{padding-top:clamp(32px,4vw,56px)}
.proyecto--banda > .banda{margin-bottom:clamp(26px,2.6vw,36px)}
/* ===== FIN Cintas ===== */

/* ======================================================
   INICIO Proyectos (estructura común)
   ====================================================== */
.proyecto{position:relative;padding:var(--section-y) 0 0;background:var(--fondo-azul)}
.proyecto:last-of-type{padding-bottom:var(--section-y)}

/* la barra crema con el número y el nombre, como en tus diapositivas */
.proyecto__barra{position:relative;isolation:isolate;color:var(--ink);padding:clamp(10px,1.6vw,20px) clamp(18px,4vw,48px)}
/* el fondo crema va aparte para poder abrirlo de izquierda a derecha sin cortar la cinta */
.proyecto__barra::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-lg);background:linear-gradient(100deg,#EBE0C6 0%,#F8EED5 55%,#FCF3DD 100%);
  box-shadow:0 30px 56px -30px rgba(1,14,24,.95),0 2px 8px rgba(1,14,24,.25);   /* la barra flota sobre el azul */
  transform-origin:0 50%;transform:scaleX(var(--fondo,1))}
.proyecto__titulo{position:relative;z-index:1;font:400 clamp(52px,15vw,170px)/1.08 var(--font-script);-webkit-text-stroke:.014em var(--ink);color:var(--ink);white-space:nowrap}
/* "03. Boost Crew" es más largo: un poco más chico para que la cinta no tape la última letra */
.proyecto__titulo--largo{font-size:clamp(44px,12.4vw,170px)}
/* "05. Semillas que conectan" va en dos renglones */
.proyecto__titulo--dos{font-size:clamp(44px,11vw,148px);line-height:.84;padding-bottom:.16em}   /* aire para la colita de la q */
/* la cinta cuelga de la barra como un separador de libro */
.proyecto__cinta{position:absolute;top:0;right:clamp(22px,7vw,96px);z-index:0;--w:clamp(30px,4.6vw,54px);width:var(--w);height:calc(100% + clamp(24px,3.4vw,42px));
  background:linear-gradient(180deg,#A90E19 0%,var(--red) 40%,#C9151F 100%);transform-origin:50% 0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - var(--w)*.46),0 100%)}

/* la ficha: logo, descripción, sector y año */
/* los recuadros llevan un velo oscuro y una sombra larga: flotan sobre el fondo vivo */
.ficha{margin-top:clamp(28px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);display:grid;gap:26px;align-items:center;
  background:rgba(6,42,63,.3);box-shadow:0 34px 64px -42px rgba(1,14,24,.9)}
/* logos de cada proyecto: pequeños en celular, más presentes en computador */
.ficha__logo{width:var(--logo-m,140px);max-width:100%;height:auto}
.ficha__logo--selecta,.ficha__logo--texicor{--logo-m:clamp(128px,20vw,190px);--logo-d:250px}
.ficha__logo--dood{--logo-m:clamp(100px,15vw,150px);--logo-d:240px}
.ficha__logo--semillas{--logo-m:clamp(88px,13vw,130px);--logo-d:215px}
.ficha__desc{font:300 clamp(16.5px,1.55vw,20px)/1.6 var(--font-sans);color:var(--cream-muted)}
.ficha__desc b{font-weight:600;color:var(--cream)}
/* línea fina que separa los dos párrafos de la descripción */
.ficha__sep{margin-top:1em;padding-top:1em;border-top:1px solid rgba(247,236,210,.22)}
.ficha__datos{display:grid;gap:4px;font:400 clamp(16.5px,1.5vw,20px)/1.4 var(--font-sans)}
.ficha__datos div{display:flex;flex-wrap:wrap;column-gap:8px}
.ficha__datos dt{font-weight:700}
.ficha__datos dd{margin:0;color:var(--cream-muted)}
@media (min-width:900px){
  /* la columna del logo crece un poco para que quepan los logos más grandes */
  .ficha{grid-template-columns:minmax(0,1.2fr) minmax(0,1.9fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:start}
  .ficha__logo{align-self:center;width:var(--logo-d,240px)}
}

/* Instagram Feed */
.feed{margin-top:clamp(40px,5vw,64px)}
.feed__cabeza h3{font:700 clamp(20px,1.9vw,26px)/1.2 var(--font-sans)}
.feed__cabeza p{margin-top:4px;color:var(--cream-muted);font-size:15.5px}
.feed__grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.post{position:relative;border-radius:var(--r-md);aspect-ratio:4/5;background:var(--navy-700);box-shadow:var(--sombra)}
.post img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.post::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(247,236,210,.28);pointer-events:none;z-index:1}
@media (min-width:760px){ .feed__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)} }

/* galería de Semillas: en celular una debajo de otra; en computador de a dos con la misma altura.
   Sin overflow:hidden en la figura, así el anillo rojo de la rueda no se corta */
.galeria{display:grid;gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,4vw,48px)}
.galeria__fila{display:grid;gap:clamp(16px,2.4vw,28px)}
.galeria__item{position:relative;border-radius:var(--r-lg);box-shadow:var(--sombra);background:var(--navy-700)}
.galeria__item img{width:100%;border-radius:inherit}
.galeria__item.is-destacado::after{border-radius:calc(var(--r-lg) + 7px)}
/* Semillas: el banner negro de ilustraciones ocupa todo el ancho de las dos de arriba, pero es bajito
   (recorta el patrón, no lo estira): 1180 × 285 px en computador */
.galeria__fila--chica .galeria__item img{aspect-ratio:2.58;object-fit:cover}
@media (min-width:900px){ .galeria__fila--chica .galeria__item img{aspect-ratio:1180/285} }
@media (min-width:900px){
  .galeria__fila{display:flex}
  .galeria__item{flex:var(--ar,1) 1 0%;min-width:0}
}

/* montajes: celulares, papelería, empaque */
.montajes{display:grid;gap:clamp(16px,2.4vw,28px);margin-top:clamp(28px,4vw,48px)}
.montaje{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra);background:var(--navy-700)}
.montaje img{width:100%}
@media (min-width:900px){ .montajes--lado{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* pie de cada proyecto: siguiente y WhatsApp */
.proyecto__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:clamp(28px,4vw,44px);padding-top:14px;border-top:1px solid var(--line-soft)}
.proyecto__pie .enlace{color:var(--cream)}
/* ===== FIN Proyectos (estructura común) ===== */

/* ======================================================
   INICIO Boost Crew (prototipado web)
   ====================================================== */
.boost-intro{margin-top:clamp(28px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);display:grid;gap:30px;align-items:center;
  background:rgba(6,42,63,.3);box-shadow:0 34px 64px -42px rgba(1,14,24,.9)}
.boost-intro__logo{width:clamp(130px,22vw,200px)}
@media (min-width:900px){ .boost-intro__logo{width:min(250px,66%)} }   /* en computador queda como estaba */
.boost-intro__tipo{margin-top:16px}
.boost-intro__tipo h3{font:700 clamp(21px,2vw,27px)/1.2 var(--font-sans)}
.boost-intro__tipo p{margin-top:4px;color:var(--cream-muted);font-size:15.5px}
.boost-intro .ficha__desc{margin-top:22px}
.boost-intro .ficha__datos{margin-top:26px}
.boost-intro__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra)}
@media (min-width:900px){ .boost-intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }

.responsive{margin-top:clamp(28px,4vw,40px);display:grid;gap:30px;align-items:center}
.responsive__titulo{font:700 clamp(24px,2.5vw,32px)/1.2 var(--font-sans);color:var(--red)}
.responsive__lead{margin-top:14px;font:400 clamp(17px,1.6vw,20px)/1.45 var(--font-sans)}
.responsive__lead b{font-weight:700}
.responsive__texto{margin-top:14px;color:var(--ink-muted);font-size:16px;line-height:1.55}
.responsive__img{border-radius:var(--r-lg);overflow:hidden}
.ventajas{list-style:none;display:grid;gap:18px}
.ventajas li{display:flex;align-items:center;gap:16px;font:400 clamp(15.5px,1.4vw,18px)/1.35 var(--font-sans)}
.ventajas svg{width:clamp(52px,5vw,64px);height:auto;flex:none}
@media (min-width:900px){
  .responsive{grid-template-columns:minmax(0,3.2fr) minmax(0,5fr) minmax(0,3.4fr)}
  .ventajas{border-left:2px solid var(--ink);padding-left:clamp(20px,2.5vw,32px)}
}

.detalles-ui{margin-top:clamp(28px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);display:grid;gap:34px;
  background:rgba(6,42,63,.3);box-shadow:0 34px 64px -42px rgba(1,14,24,.9)}
.detalles-ui h3{font:700 clamp(20px,1.9vw,26px)/1.2 var(--font-sans);margin-bottom:18px}
.detalles-ui__texto{font:300 clamp(17px,1.6vw,21px)/1.5 var(--font-sans);color:var(--cream-muted)}
.detalles-ui__texto b{font-weight:600;color:var(--cream)}
.colores{list-style:none;display:grid;gap:12px}
.colores li{display:flex;align-items:center;gap:18px;font:400 clamp(17px,1.6vw,21px)/1 var(--font-sans);letter-spacing:.04em}
.colores i{width:clamp(76px,7vw,96px);height:clamp(38px,3.4vw,46px);border-radius:8px;flex:none}
.tipos-ui{display:grid;gap:22px}
.tipos-ui strong{display:block;font-weight:400;line-height:1}
.tipos-ui__gothic{font:400 clamp(38px,4vw,54px)/1 "Special Gothic Condensed One","Arial Narrow",sans-serif;letter-spacing:.005em}
.tipos-ui__poppins{font:600 clamp(36px,3.6vw,48px)/1 var(--font-sans)}
.tipos-ui span{display:block;margin-top:8px;color:var(--cream-muted);font-size:clamp(16px,1.5vw,20px)}
@media (min-width:900px){
  .detalles-ui{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr);gap:0}
  .detalles-ui > div{padding:0 clamp(20px,3vw,44px)}
  .detalles-ui > div:first-child{padding-left:0}
  .detalles-ui > div + div{border-left:1px solid var(--line)}
}

.vistas{margin-top:clamp(28px,4vw,40px);text-align:center}
.vistas h3{font:700 clamp(24px,2.6vw,34px)/1.2 var(--font-sans);color:var(--red)}
.vistas__intro{margin-top:8px;font-size:clamp(16px,1.6vw,21px);color:var(--ink-muted)}
.telefonos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:clamp(26px,4vw,44px)}
.telefono{max-width:250px;margin:0 auto;width:100%}
.telefono__marco{position:relative;border-radius:clamp(22px,3vw,34px);padding:clamp(6px,.8vw,9px);background:#141414;box-shadow:0 24px 40px -22px rgba(6,42,63,.8),inset 0 0 0 1px #3a3a3a}
.telefono__marco img{width:100%;aspect-ratio:332/594;object-fit:cover;border-radius:clamp(16px,2.3vw,26px)}
.telefono__marco.is-destacado::after{border-radius:calc(clamp(22px,3vw,34px) + 7px)}
.telefono__nombre{display:block;margin-top:14px;font:400 clamp(15px,1.6vw,22px)/1.2 var(--font-sans);color:var(--ink)}
@media (min-width:760px){ .telefonos{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} }
/* ===== FIN Boost Crew ===== */

/* ======================================================
   INICIO Dood (branding)
   ====================================================== */
.tablero{display:grid;gap:12px;margin-top:clamp(28px,4vw,40px);grid-template-columns:repeat(6,minmax(0,1fr))}
.tablero img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}
.tablero__logo{grid-column:span 6}
.tablero__iso{grid-column:span 2}
.tablero__colores{grid-column:span 4;list-style:none;display:grid;gap:10px}
.tablero__colores li{display:grid;place-items:center;border-radius:var(--r-md);font:500 clamp(15px,1.6vw,22px)/1 var(--font-sans);letter-spacing:.04em;min-height:52px}
.tablero__tipos{grid-column:span 6;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tablero__tipos li{display:grid;gap:8px;justify-items:center}
.tablero__tipos span{font-size:12.5px;color:var(--cream-muted)}
.tablero__foto{grid-column:span 6;border-radius:var(--r-md);overflow:hidden}
@media (min-width:600px){ .tablero__foto{grid-column:span 3} }
@media (min-width:900px){
  .tablero{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr);gap:clamp(14px,1.8vw,24px)}
  .tablero__logo,.tablero__iso,.tablero__colores{grid-column:auto}
  .tablero__tipos{grid-column:1 / -1;gap:clamp(14px,1.8vw,24px)}
  .tablero__tipos span{display:none}
  .tablero__fotos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
  .tablero__foto{grid-column:auto}
}
@media (max-width:899px){ .tablero__fotos{display:contents} }
.feed--crema{margin-top:clamp(28px,4vw,40px)}
.feed--crema .feed__cabeza p{color:var(--ink-muted)}
/* ===== FIN Dood ===== */

/* ======================================================
   INICIO Cierre (Gracias por ver) y pie
   ====================================================== */
.cierre{position:relative;isolation:isolate;overflow:hidden;min-height:max(88svh,600px);display:grid;place-items:center;text-align:center;
  padding:clamp(150px,22vw,220px) var(--gutter) clamp(80px,10vw,120px);
  background:
    radial-gradient(70% 55% at 100% 35%,rgba(61,99,118,.45) 0%,rgba(61,99,118,0) 64%),
    radial-gradient(70% 60% at 0% 100%,rgba(4,34,52,.85) 0%,rgba(4,34,52,0) 70%),
    linear-gradient(180deg,rgba(6,42,63,0) 0%,rgba(6,42,63,.7) 100%);
  --cinta-w:clamp(46px,9vw,104px)}
.cierre .marco{inset:clamp(10px,1.4vw,16px);--r-marco:clamp(22px,2vw,28px)}
.cierre .cinta{height:clamp(170px,30svh,300px)}
.cierre__in{position:relative;z-index:2;display:grid;justify-items:center}
.cierre__gracias{position:relative;display:inline-block;padding-bottom:.08em}
.cierre__titulo{display:block;font:400 clamp(96px,26vw,290px)/1 var(--font-script);-webkit-text-stroke:.017em var(--cream);color:var(--cream)}
.cierre__porver{position:absolute;right:.4em;bottom:-.25em;font:400 clamp(20px,3vw,40px)/1 var(--font-sans);color:var(--cream)}
.cierre__pregunta,.cierre__invita{display:block}
.cierre__invita{margin-top:.35em;color:var(--cream);font-weight:600}
.cierre__texto{max-width:46ch;margin-top:clamp(34px,5vw,52px);color:var(--cream-muted);font-size:clamp(16.5px,1.5vw,19px);line-height:1.55}
.cierre__boton{margin-top:24px}
.cierre__nota{margin-top:12px;font-size:13.5px;color:var(--cream-muted)}
.cierre__datos{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;margin-top:20px}
.cierre__datos a{color:var(--cream)}

.pie{background:var(--navy-900);border-top:1px solid var(--line-soft);padding:34px 0 40px;font-size:13.5px;color:var(--cream-muted)}
.pie__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.pie__marca{display:flex;align-items:center;gap:14px}
.pie__marca b{display:block;color:var(--cream);font-weight:600}
.pie__links{display:flex;flex-wrap:wrap;gap:0 22px;list-style:none}
.pie__links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.pie__links svg{width:11px;height:11px}
.pie__links a:hover{color:var(--cream)}
.pie__links li[hidden]{display:none}
.pie__mov{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
.pie__mov:hover{color:var(--cream)}
@media (max-width:899px){ .pie{padding-bottom:110px} }
/* ===== FIN Cierre y pie ===== */

/* ===== Menos movimiento ===== */
@media (prefers-reduced-motion:reduce){
  html:not(.forzar) *,html:not(.forzar) *::before,html:not(.forzar) *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html:not(.forzar).js [data-in],html:not(.forzar).js .portada__titulo,html:not(.forzar).js .rueda__carta{visibility:visible}
  html:not(.forzar) .is-destacado{animation:none}
  html:not(.forzar) .banda .banda__pista{animation:none}
  html:not(.forzar) .is-destacado::after{animation:none;opacity:1}
}

/* ======================================================
   Celulares de Boost Crew: más largos (barra de estado arriba y barra de inicio abajo, sin estirar la pantalla)
   ====================================================== */
.telefono__marco{container-type:inline-size;cursor:zoom-in}
.telefono__marco img{border-radius:0;display:block}
.telefono__marco > *:first-child{border-radius:clamp(16px,2.3vw,26px) clamp(16px,2.3vw,26px) 0 0}
.telefono__estado{position:relative;display:flex;align-items:center;justify-content:space-between;height:15cqw;padding:2cqw 9cqw 0;background:var(--arriba,#f2f2f2);color:#111;
  border-radius:clamp(16px,2.3vw,26px) clamp(16px,2.3vw,26px) 0 0}
.telefono__estado b{font:600 4.6cqw/1 var(--font-sans);letter-spacing:.02em}
.telefono__estado i{width:7cqw;height:3.4cqw;border:.5cqw solid currentColor;border-radius:1cqw;position:relative;opacity:.85}
.telefono__estado i::after{content:"";position:absolute;inset:.5cqw;right:1.6cqw;background:currentColor;border-radius:.4cqw}
.telefono__estado::after{content:"";position:absolute;left:50%;top:3cqw;width:26cqw;height:7.5cqw;margin-left:-13cqw;border-radius:99px;background:#0b0b0b}
.telefono__inicio{display:flex;align-items:center;justify-content:center;height:11cqw;background:var(--abajo,#111);border-radius:0 0 clamp(16px,2.3vw,26px) clamp(16px,2.3vw,26px)}
.telefono__inicio::after{content:"";width:34cqw;height:1.4cqw;border-radius:99px;background:rgba(255,255,255,.85)}
.telefono__inicio--oscuro::after{background:rgba(0,0,0,.75)}

/* Semillas: la IA en el proyecto */
.ficha__ia{margin-top:1em;padding-top:1em;border-top:1px solid rgba(247,236,210,.22)}
.ficha__ia-chip{display:table;margin-bottom:.7em;padding:.35em .9em;border-radius:99px;background:var(--red);color:var(--cream);font:600 12.5px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}

/* ======================================================
   Ampliar celulares: al oprimirlos salen hacia la pantalla (lo arma main.js)
   ====================================================== */
[data-ampliar]{cursor:zoom-in}
[data-ampliar]:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.ampliar{position:fixed;inset:0;z-index:300;background:rgba(3,20,31,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out}
.ampliar[hidden]{display:none}
.ampliar__pieza{position:fixed;margin:0;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);transform-origin:0 0;pointer-events:none}
.ampliar__cerrar{position:fixed;top:16px;right:16px;z-index:2;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(6,42,63,.7);color:var(--cream);display:grid;place-items:center;cursor:pointer}
.ampliar__cerrar svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
.ampliar__nota{position:fixed;left:0;right:0;bottom:18px;text-align:center;font:400 12.5px/1.3 var(--font-sans);color:var(--cream-muted)}
/* sello de la portada (computador): abajo a la izquierda, discreto; gira muy despacio */
.portada__sello{position:absolute;left:50px;bottom:56px;z-index:3;width:clamp(104px,8.4vw,128px);aspect-ratio:1;display:block;color:var(--cream);opacity:.82;transition:opacity var(--t-hover) var(--ease)}
.portada__sello:hover,.portada__sello:focus-visible{opacity:1}
.portada__sello svg{width:100%;height:100%;overflow:visible}
.portada__sello-aro{fill:none;stroke:var(--line);stroke-width:1}
.portada__sello text{font:600 10.5px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;fill:var(--cream-muted)}
.portada__sello-giro{transform-origin:60px 60px;animation:sello-gira 32s linear infinite}
.portada__sello-centro{fill:var(--red)}
.portada__sello-flecha{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-hover) var(--ease)}
.portada__sello:hover .portada__sello-flecha{transform:translateY(3px)}
@keyframes sello-gira{to{transform:rotate(360deg)}}
@media (max-width:899px){ .portada__sello{display:none} }
/* Posts con enlace a su publicación de Instagram: al pasar el cursor la imagen crece apenas y aparece el ícono;
   en celular el ícono se ve siempre, pequeño, para que se sepa que se puede oprimir */
.post__ig{position:relative;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.post__ig img{transition:transform .6s var(--ease)}
.post__ig-icono{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(6,42,63,.72);color:var(--cream);box-shadow:0 4px 14px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.post__ig-icono svg{width:17px;height:17px}
.post__ig:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .post__ig-icono{opacity:0;transform:scale(.8)}
  .post__ig:hover img,.post__ig:focus-visible img{transform:scale(1.04)}
  .post__ig:hover .post__ig-icono,.post__ig:focus-visible .post__ig-icono{opacity:1;transform:none}
}
@media (max-width:759px){ .post__ig-icono{top:7px;right:7px;width:28px;height:28px} .post__ig-icono svg{width:14px;height:14px} }
/* Piezas que se hicieron para pauta (anuncios pagados), no para el feed: llevan su etiqueta roja */
.post__pauta,.feed__nota-chip{display:inline-block;padding:.38em .75em;border-radius:99px;background:var(--red);color:var(--cream);
  font:600 10.5px/1.1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.post__pauta{position:absolute;bottom:10px;left:10px;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.feed__nota{margin-top:10px;font-size:14px;line-height:1.5}
.feed__nota-chip{margin-right:6px;font-size:9.5px;vertical-align:.12em}
.feed--crema .feed__nota{color:var(--ink-muted)}
@media (max-width:759px){ .post__pauta{bottom:7px;left:7px;font-size:9px;padding:.35em .6em} }