/* Lucía Belén Temperley — portfolio
   Tokens del design system (bento orgánico, verde profundo, fondo crema) */
:root {
  --bg: #f0eee6;
  --card: #ffffff;
  --pill: #e4e1d6;
  --line: #cfcabb;
  --ink: #121815;
  --muted: #4f5a55;
  --brand: #113633;
  --on-brand: #ffffff;
  --soft: #d6e4bd;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --display: "Outfit", "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --pad: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--brand); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Resaltado de palabra */
.mark { background: linear-gradient(var(--soft), var(--soft)) no-repeat left center / 100% 100%; border-radius: 999px; padding: 0 .22em; margin-left: -.06em; color: var(--ink); }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font: 500 14px/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--ink); color: var(--on-brand); }
.btn-outline { color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); }
.btn-soft { background: var(--soft); color: var(--ink); }
.btn-soft:hover { background: var(--card); color: var(--ink); }
.btn-ghost-light { color: var(--on-brand); border-color: var(--on-brand); }
.btn-ghost-light:hover { background: var(--on-brand); color: var(--brand); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 500 18px var(--display); }
.logo-mark { position: relative; width: 34px; height: 24px; flex: none; }
.logo-mark::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); }
.logo-mark::after { content: ""; position: absolute; left: 27px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.nav { display: flex; gap: 8px; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--pill); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .25s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--soft); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pill); color: var(--ink); cursor: pointer; place-items: center; }

/* Hero */
.hero { padding: 48px 0 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: end; }
.hero-title { grid-column: span 8; display: flex; flex-direction: column; gap: 20px; }
.hero-title h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.hero-intro { grid-column: span 4; display: flex; flex-direction: column; gap: 20px; padding-bottom: 8px; }
.hero-intro p { font-size: 16px; line-height: 1.6; }

.feature { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding-bottom: 56px; }
.about-pill { margin-left: calc(-1 * var(--pad)); background: var(--soft); border-radius: 0 999px 999px 0; padding: 28px 28px 28px calc(var(--pad) + 12px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; text-decoration: none; color: var(--ink); transition: background-color .3s; }
.about-pill:hover { background: #cadcad; color: var(--ink); }
.about-pill img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--card); }
.about-pill strong { font: 400 20px/1.3 var(--display); display: block; }
.about-pill span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.showcase { position: relative; min-height: 400px; border-radius: var(--r-xl); background: var(--brand); color: var(--on-brand); overflow: clip; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.showcase .tags { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.tag-light { font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--on-brand); color: var(--on-brand); }
.showcase-art { position: absolute; inset: 0; pointer-events: none; }
.showcase-art span { position: absolute; border-radius: 999px; }
.showcase-art .a { width: 340px; height: 340px; right: 18%; top: -90px; background: #1b4a45; }
.showcase-art .b { width: 120px; height: 120px; right: calc(18% - 140px); top: 70px; background: var(--soft); }
.showcase-art .c { width: 46px; height: 46px; right: calc(18% - 196px); top: 107px; background: var(--soft); }
.showcase-art .d { width: 260px; height: 110px; left: 28px; bottom: 120px; border: 1.5px solid #3c6b65; }
.showcase-quote { position: relative; z-index: 1; font: 400 clamp(26px, 3vw, 40px)/1.15 var(--display); max-width: 14ch; }
.stat-card { position: absolute; right: 24px; bottom: 24px; z-index: 1; max-width: 300px; background: var(--card); color: var(--ink); border-radius: 24px 24px 8px 24px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.stat-card b { font: 400 44px/1 var(--display); }
.stat-card span { font-size: 14px; line-height: 1.45; }

/* Marquesina */
.marquee { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 14px 0; overflow-x: clip; }
.marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; padding-left: 28px; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font: 400 28px/36px var(--display); white-space: nowrap; }
.marquee-track i { flex: none; width: 56px; height: 32px; border-radius: 999px; background: var(--soft); }
.marquee-track i:nth-of-type(3n+2) { background: var(--brand); }
.marquee-track i:nth-of-type(3n) { background: var(--pill); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Secciones */
.section { padding: 80px 0 32px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2, .h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--pill); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; transition: background-color .25s; }
.filters button:hover { background: #d9d5c7; }
.filters button[aria-pressed="true"] { background: var(--soft); }
.filters .count { margin-left: 8px; font-size: 13px; color: var(--muted); }

/* Proyectos */
.projects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.project { grid-column: span 2; background: var(--card); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 14px; transition: translate .35s var(--ease), box-shadow .35s; }
.project.w3 { grid-column: span 3; }
.project.w4 { grid-column: span 4; }
.project:hover { translate: 0 -6px; box-shadow: 0 10px 28px rgba(17, 54, 51, .09); }
.project[hidden] { display: none; }
.cover { position: relative; height: 210px; border-radius: var(--r-md); overflow: clip; display: flex; align-items: flex-end; padding: 18px 20px; background: var(--soft); }
.w4 .cover, .project.tall .cover { height: 300px; }
.w3 .cover { height: 240px; }
.cover.brand { background: var(--brand); color: var(--on-brand); }
.cover.pill { background: var(--pill); }
.cover b { font: 400 clamp(34px, 4vw, 52px)/1 var(--display); letter-spacing: -0.02em; position: relative; z-index: 1; }
.cover::before { content: ""; position: absolute; right: 26px; top: 22px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .35; }
.cover::after { content: ""; position: absolute; right: 10px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: .35; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-body { padding: 0 10px 8px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.project-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.project h3 { font-size: 22px; line-height: 1.25; }
.project .kind { font-size: 13px; color: var(--muted); }
.project p { font-size: 14px; line-height: 1.5; }
.arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); display: grid; place-items: center; transition: rotate .35s var(--ease), background-color .3s, color .3s, border-color .3s; }
.arrow svg { width: 15px; height: 15px; }
.project:hover .arrow, .arrow:hover, .arrow:focus-visible { rotate: 45deg; background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.chip { font-size: 12px; line-height: 16px; padding: 5px 12px; border-radius: 999px; background: var(--pill); color: var(--ink); }

/* Sobre mí */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.about .h2 { grid-column: 1 / -1; padding-bottom: 12px; }
.exp { grid-column: span 7; position: relative; }
.exp-bg { position: absolute; inset: 0; background: var(--card); border-radius: var(--r-lg); }
.exp-title { position: absolute; left: 0; top: 0; padding: 12px 20px 0 6px; font: 400 28px/34px var(--display); }
.exp-body { position: relative; padding: 84px 28px 20px; }
.exp-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.exp-row strong { display: block; font: 500 18px/1.35 var(--display); }
.exp-row small, .exp-row time { font-size: 13px; color: var(--muted); }
.exp-row time { white-space: nowrap; }
.how { grid-column: span 5; background: var(--soft); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.how .label { color: var(--ink); }
.how p.big { font: 400 24px/1.35 var(--display); }
.tools { grid-column: span 8; background: var(--card); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tools .chips, .methods .chips { margin-top: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.tool-group { display: flex; flex-direction: column; gap: 10px; }
.tool-group h4 { margin: 0; font: 400 17px/1.3 var(--display); }
.chip.learning { background: transparent; border: 1px dashed var(--muted); padding: 4px 11px; }
.methods { grid-column: span 4; background: var(--card); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }

/* Contacto */
.contact { margin: 80px 0 64px; background: var(--brand); color: var(--on-brand); border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.contact h2 { grid-column: span 8; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; text-wrap: balance; }
.contact .mark { color: var(--ink); display: inline-block; margin-top: 14px; padding: 2px 20px 6px; }
.hero-title .mark { display: inline-block; margin-top: 8px; padding: 0 .22em .06em; line-height: 1.1; }
.contact-side { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contact-side a.mail { color: var(--on-brand); }

/* Footer */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer nav { display: flex; gap: 20px; }

/* Caso de estudio */
.back { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 14px; color: var(--ink); }
.case-hero { padding: 28px 0 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: end; }
.case-hero > div { grid-column: span 8; display: flex; flex-direction: column; gap: 14px; }
.case-hero h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1.02; letter-spacing: -0.02em; }
.case-hero > p { grid-column: span 4; padding-bottom: 8px; }
/* Caso: portada enmarcada y medios */
.case-intro { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding-bottom: 8px; }
.case-hero > .case-intro { grid-column: span 4; }
.case-cover.framed { background: var(--soft); padding: clamp(20px, 5vw, 56px); padding-top: clamp(28px, 6vw, 72px); }
.browser { border-radius: 18px; overflow: clip; background: var(--card); box-shadow: 0 24px 48px -24px rgba(17, 54, 51, .35); }
.browser-bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--pill); }
.browser-bar span { margin-left: 16px; padding: 4px 14px; border-radius: 999px; background: var(--bg); font-size: 12px; color: var(--muted); }
.browser img { width: 100%; height: auto; }
.scroll-view { --vh: clamp(220px, 40vw, 540px); height: var(--vh); overflow: hidden; }
.scroll-view img { animation: pageScroll 80s linear infinite alternate; }
@keyframes pageScroll { 0%, 4% { transform: translateY(0); } 96%, 100% { transform: translateY(calc(-100% + var(--vh))); } }
.case-media { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 80px; }
.case-media figure { margin: 0; border-radius: var(--r-lg); overflow: clip; min-height: 360px; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .case-media { grid-template-columns: 1fr; } .case-intro { grid-column: 1 / -1; } }

.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding-bottom: 16px; }
.meta div { background: var(--card); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.meta b { font: 400 18px/1.35 var(--display); }
.case-cover { border-radius: var(--r-xl); background: var(--soft); position: relative; overflow: clip; }
.case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-bottom: 72px; }
.case-block h2 { grid-column: span 4; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; }
.case-block > div { grid-column: span 8; display: flex; flex-direction: column; gap: 16px; }
.case-block .lead { font: 400 26px/1.4 var(--display); }
.case-cover { margin: 0 0 80px; } .case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-block p { font-size: 16px; line-height: 1.65; }
.case-block .lead.small, .result-text .lead.small { font-size: 24px; line-height: 1.4; }
.pill-quote { margin: 4px 0 0; align-self: flex-start; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--soft); border-radius: 999px; padding: 16px 28px; font: 400 22px/1.3 var(--display); }
.pill-quote span { font-size: 40px; line-height: .6; padding-top: 12px; }
.pill-quote cite { font: normal 13px var(--sans); color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step { background: var(--card); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 12px; min-height: 190px; }
.step.alt { background: var(--soft); }
.step span { font: 400 15px var(--display); color: var(--muted); }
.step h3 { font-size: 22px; line-height: 1.25; }
.step p { font-size: 14px; line-height: 1.5; }
.case-gif { margin: 0 0 80px; border-radius: var(--r-lg); overflow: clip; background: var(--brand); }
.case-gif img { width: 100%; height: auto; }
.results { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding-bottom: 64px; }
.results .h2 { grid-column: 1 / -1; margin-bottom: 8px; }
.result-stat { grid-column: span 4; background: var(--brand); color: var(--on-brand); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 240px; }
.result-stat .label { color: var(--on-brand); }
.result-stat b { font: 400 72px/1 var(--display); }
.result-stat span:last-child { font-size: 14px; line-height: 1.45; }
.result-text { grid-column: span 8; background: var(--card); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.closing { margin: 0 auto; padding: 24px 0 88px; max-width: 20ch; text-align: center; font: 400 clamp(30px, 4vw, 44px)/1.2 var(--display); text-wrap: balance; }
.closing .mark { display: inline-block; padding: 0 .3em .06em; line-height: 1.1; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .result-stat, .result-text { grid-column: 1 / -1; } }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } .pill-quote { border-radius: 24px; } }
.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 64px; background: var(--brand); color: var(--on-brand); border-radius: var(--r-xl); padding: 40px 48px; text-decoration: none; }
.next:hover { color: var(--on-brand); }
.next b { display: block; font: 400 44px/1.1 var(--display); }
.next .arrow { width: 64px; height: 64px; background: var(--soft); border-color: var(--soft); color: var(--ink); }

/* Animaciones */
@keyframes up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes paint { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.in-1, .in-2, .in-3, .in-4 { animation: up .9s var(--ease) both; }
.in-2 { animation-delay: .12s; } .in-3 { animation-delay: .26s; } .in-4 { animation-delay: .4s; }
.in-2 .mark { animation: paint .9s cubic-bezier(.6, 0, .2, 1) .6s both; }
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .zoom > .showcase-art { transform: scale(1.12); transition: transform 1.8s var(--ease); }
.js .zoom.is-in > .showcase-art { transform: none; }


/* Hover */
:root { --spring: cubic-bezier(.22, 1, .36, 1); }
.project { transition: translate .5s var(--spring), box-shadow .5s, border-radius .6s var(--spring); }
.js .project.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease), translate .5s var(--spring), box-shadow .5s, border-radius .6s var(--spring); }
.project:hover { translate: 0 -6px; box-shadow: 0 22px 44px -18px rgba(17, 54, 51, .28); border-radius: 44px 18px 44px 18px; }
.cover { transition: border-radius .6s var(--spring); }
.project:hover .cover { border-radius: 34px 12px 34px 12px; }
.cover::before, .cover::after { transition: translate .8s var(--spring), scale .8s var(--spring), opacity .4s; }
.project:hover .cover::before { scale: 1.6; translate: -24px 16px; opacity: .3; }
.project:hover .cover::after { translate: -60px 36px; opacity: .6; }
.cover b { transition: translate .6s var(--spring); }
.project:hover .cover b { translate: 8px 0; }
.project h3 { transition: translate .5s var(--spring); }
.project:hover h3 { translate: 6px 0; }
.project .chip { transition: background-color .35s, translate .45s var(--spring); }
.project:hover .chip { background: var(--soft); }
.project:hover .chip:nth-child(2) { transition-delay: .05s; } .project:hover .chip:nth-child(3) { transition-delay: .1s; } .project:hover .chip:nth-child(4) { transition-delay: .15s; } .project:hover .chip:nth-child(5) { transition-delay: .2s; }
.arrow { transition: rotate .5s var(--spring), scale .5s var(--spring), background-color .3s, color .3s, border-color .3s; }

.btn { transition: background-color .3s, color .3s, border-color .3s, translate .4s var(--spring), box-shadow .4s; }
.btn svg { transition: translate .4s var(--spring); }
.btn:hover { translate: 0 -3px; box-shadow: 0 10px 20px -10px rgba(17, 54, 51, .45); }
.btn:hover svg { translate: 2px -2px; }
.btn[download]:hover svg { translate: 0 3px; }
.nav a { transition: background-color .3s, scale .4s var(--spring); }

.about-pill { transition: padding .6s var(--spring), background-color .3s; }
.about-pill:hover { padding-right: 36px; }
.about-pill img { transition: rotate .6s var(--spring), scale .6s var(--spring); }
.about-pill:hover img { scale: 1.04; }
.about-pill svg { transition: translate .4s var(--spring); }
.about-pill:hover svg { translate: 3px -3px; }
.showcase-art span { transition: translate 1.1s var(--spring), scale 1.1s var(--spring), rotate 1.1s var(--spring); }
.showcase:hover .showcase-art .a { translate: -36px 18px; }
.showcase:hover .showcase-art .b { translate: -30px 20px; }
.showcase:hover .showcase-art .c { translate: -50px 30px; }
.showcase:hover .showcase-art .d { translate: 10px -6px; }
.stat-card { transition: rotate .6s var(--spring), translate .6s var(--spring); }
.showcase:hover .stat-card { translate: 0 -4px; }
@media (hover: none) { .project:hover, .btn:hover { translate: none; } }


/* Caso: hovers */
.meta div, .step, .result-text { transition: translate .5s var(--spring), box-shadow .5s, background-color .3s, border-radius .6s var(--spring); }
.result-text:hover { translate: 0 -6px; box-shadow: 0 18px 36px -18px rgba(17, 54, 51, .25); }
.pill-quote, .result-stat { transition: rotate .6s var(--spring), translate .6s var(--spring), scale .6s var(--spring); }

.result-stat:hover { translate: 0 -4px; }
.result-stat b { display: inline-block; transition: translate .6s var(--spring), scale .6s var(--spring); }

.case-media img { transition: scale .9s var(--spring); }
.case-media figure:hover img { scale: 1.04; }
.back { transition: translate .4s var(--spring); } .back:hover { translate: -6px 0; }



/* Caso: paneles que se apilan al hacer scroll */
.stack { padding-bottom: 48px; }
.stack-panel { position: relative; min-height: 600px; margin-bottom: 40px; border-radius: var(--r-xl); padding: 52px 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-content: start; box-shadow: 0 -18px 40px -28px rgba(17, 54, 51, .35); }
.stack-panel.is-white { background: var(--card); }
.stack-panel.is-soft { background: var(--soft); }
.stack-panel.is-dark { background: var(--brand); color: var(--on-brand); }
.stack-panel.is-dark .label { color: var(--on-brand); opacity: .75; }
.stack-head { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
.stack-head h2 { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.1; }
.stack-body { grid-column: span 8; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.6; }
.stack-body .lead { font: 400 clamp(22px, 2.2vw, 30px)/1.35 var(--display); }
.stack-body .lead.soft { color: var(--soft); }
.stack-body .small-note { font-size: 15px; opacity: .8; }
.steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stack-panel.is-white .step { background: var(--bg); } .stack-panel.is-white .step.alt { background: var(--soft); }
.res-top { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.res-top b { font: 400 clamp(64px, 7vw, 96px)/.9 var(--display); }
.res-top span { font-size: 15px; line-height: 1.45; max-width: 30ch; padding-bottom: 8px; }
@media (min-width: 1025px) and (min-height: 760px) {
  .stack-panel { position: sticky; top: calc(104px + var(--i) * 28px); }
}
@media (max-width: 1024px) { .stack-head, .stack-body { grid-column: 1 / -1; } .stack-panel { min-height: 0; padding: 36px 28px; } }
@media (max-width: 720px) { .steps.two { grid-template-columns: 1fr; } .stack-panel { padding: 28px 22px; margin-bottom: 16px; } }


/* Mobile: paneles apilados y pasos en carrusel */
@media (max-width: 720px) {
  .steps.two { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -22px; padding: 0 22px 4px; }
  .steps.two .step { flex: none; width: 240px; min-height: 170px; scroll-snap-align: start; }
  .stack-body { font-size: 15px; }
  .pill-quote { font-size: 18px; padding: 14px 18px; }
  .pill-quote span { display: none; }
}
@media (max-width: 720px) and (min-height: 640px) {
  .stack-panel { position: sticky; top: calc(76px + var(--i) * 14px); box-shadow: 0 -14px 30px -22px rgba(17, 54, 51, .4); }
}

/* Apertura progresiva */
.wipe span { display: inline-block; }
.js .wipe span { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.js .wipe.is-in span { clip-path: inset(0 -10px 0 0); }
.js .open { opacity: 0; transform: translateY(40px); clip-path: inset(35% 0 0 0 round 28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease), translate .5s var(--spring), box-shadow .5s, border-radius .6s var(--spring), background-color .3s; }
.js .open.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0px); }
.js .open.is-done { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .open { opacity: 1; transform: none; clip-path: none; }
  .js .wipe span { clip-path: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-title, .hero-intro { grid-column: 1 / -1; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project, .project.w3, .project.w4 { grid-column: span 1; }
  .project.w4 { grid-column: 1 / -1; }
  .exp, .how, .tools, .methods { grid-column: 1 / -1; }
  .contact h2, .contact-side { grid-column: 1 / -1; }
  .case-hero > div, .case-hero > p, .case-block h2, .case-block > div { grid-column: 1 / -1; }
}

/* Mobile */
@media (max-width: 720px) {
  :root { --pad: 20px; }
  .site-header .wrap { height: 68px; }
  .logo { font-size: 16px; }
  .menu-btn { display: grid; }
  .nav { display: none; position: absolute; top: 68px; left: 12px; right: 12px; flex-direction: column; background: var(--card); padding: 12px; border-radius: 24px; box-shadow: 0 10px 28px rgba(17, 54, 51, .12); }
  .nav.open { display: flex; }
  .nav a { height: 48px; }
  .header-cta { display: none; }
  .hero { padding-top: 28px; }
  .feature { grid-template-columns: 1fr; }
  .about-pill { margin-left: calc(-1 * var(--pad)); margin-right: 40px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 16px 24px 16px var(--pad); }
  .about-pill img { width: 76px; height: 76px; }
  .showcase { min-height: 340px; padding: 22px; }
  .showcase { gap: 20px; }
  .stat-card { position: relative; left: auto; right: auto; bottom: auto; max-width: none; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .stat-card b { font-size: 34px; }
  .stat-card span { font-size: 13px; }
  .showcase-quote { font-size: 26px; }
  .marquee-track span { font-size: 20px; line-height: 28px; }
  .marquee-track i { width: 40px; height: 24px; }
  .section { padding-top: 56px; }
  .filters { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 4px; width: calc(100% + 2 * var(--pad)); }
  .filters button { flex: none; }
  .projects { grid-template-columns: 1fr; }
  .project, .project.w3, .project.w4 { grid-column: 1 / -1; }
  .cover, .w3 .cover, .w4 .cover { height: 190px; }
  .exp-title { font-size: 24px; }
  .exp-body { padding: 72px 20px 12px; }
  .exp-row { flex-direction: column; gap: 4px; }
  .how p.big { font-size: 20px; }
  .tool-grid { grid-template-columns: 1fr; }
  .contact { padding: 32px 24px; margin-top: 56px; }
  .next { padding: 28px 24px; }
  .next b { font-size: 32px; }
}

/* Muesca (esquina recortada con esquinas invertidas) */
.notch {
  --k: linear-gradient(#000, #000);
  --c: radial-gradient(circle var(--R) at center, #000 calc(100% - 1px), transparent 100%);
  -webkit-mask: var(--k), var(--k), var(--c), var(--k), var(--k), var(--c), radial-gradient(circle var(--R) at 0 0, transparent calc(100% - 1px), #000 100%);
  mask: var(--k), var(--k), var(--c), var(--k), var(--k), var(--c), radial-gradient(circle var(--R) at 0 0, transparent calc(100% - 1px), #000 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: calc(var(--nw) + var(--R)) 0, var(--nw) var(--R), var(--nw) 0, 0 calc(var(--nh) + var(--R)), var(--R) var(--nh), 0 var(--nh), calc(var(--nw) - var(--R)) calc(var(--nh) - var(--R));
  mask-position: calc(var(--nw) + var(--R)) 0, var(--nw) var(--R), var(--nw) 0, 0 calc(var(--nh) + var(--R)), var(--R) var(--nh), 0 var(--nh), calc(var(--nw) - var(--R)) calc(var(--nh) - var(--R));
  -webkit-mask-size: calc(100% - var(--nw) - var(--R)) 100%, var(--R) calc(100% - var(--R)), calc(2 * var(--R)) calc(2 * var(--R)), 100% calc(100% - var(--nh) - var(--R)), calc(100% - var(--R)) var(--R), calc(2 * var(--R)) calc(2 * var(--R)), var(--R) var(--R);
  mask-size: calc(100% - var(--nw) - var(--R)) 100%, var(--R) calc(100% - var(--R)), calc(2 * var(--R)) calc(2 * var(--R)), 100% calc(100% - var(--nh) - var(--R)), calc(100% - var(--R)) var(--R), calc(2 * var(--R)) calc(2 * var(--R)), var(--R) var(--R);
}
.exp-bg.notch { --R: 28px; --nw: 220px; --nh: 64px; }
.cover:has(img)::before, .cover:has(img)::after { display: none; }
.cover img { transition: scale .8s var(--spring); }
.project:hover .cover img { scale: 1.04; }

/* Barra de progreso de scroll (GSAP + ScrollTrigger) */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 100; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); border-radius: 0 4px 4px 0; }

/* Herramientas: scroll horizontal fijado (GSAP ScrollTrigger) */
.hscroll { padding: 72px 0 40px; }
.hscroll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.hscroll-head > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.hscroll-bar { flex: none; width: 160px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.hscroll-bar span { display: block; height: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(.2); }
.hscroll-view { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hscroll-view::-webkit-scrollbar { display: none; }
.hscroll.is-pinned .hscroll-view { overflow: visible; scroll-snap-type: none; }
.hscroll-track { display: flex; gap: 16px; width: max-content; padding-bottom: 4px; }
.h-card { flex: none; width: 440px; height: 420px; scroll-snap-align: start; border-radius: var(--r-xl); padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.h-card.is-white { background: var(--card); } .h-card.is-soft { background: var(--soft); } .h-card.is-dark { background: var(--brand); color: var(--on-brand); }
.h-card.is-soft .chip { background: var(--card); } .h-card.is-dark .chip { background: rgba(255, 255, 255, .14); color: var(--on-brand); }
.h-top { display: flex; justify-content: space-between; align-items: flex-start; }
.h-num { font: 400 80px/.9 var(--display); }
.h-count { font-size: 12px; opacity: .7; }
.h-body { display: flex; flex-direction: column; gap: 14px; }
.h-body h3 { font-size: 32px; line-height: 1.15; }
.h-body p { font-size: 15px; line-height: 1.5; opacity: .85; }
.h-body .chip { font-size: 13px; padding: 7px 14px; }
@media (max-width: 720px) {
  .hscroll { padding-top: 48px; }
  .hscroll-head { margin-bottom: 20px; } .hscroll-bar { width: 64px; }
  .hscroll-view { margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .h-card { width: 280px; height: 340px; padding: 24px; border-radius: var(--r-lg); }
  .h-num { font-size: 56px; } .h-body h3 { font-size: 24px; } .h-body p { font-size: 14px; }
}

/* Caso: comparación propuesta vs. final */
.compare { padding: 24px 0 88px; display: flex; flex-direction: column; gap: 24px; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare-card { background: var(--card); border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.compare-card.is-soft { background: var(--soft); }
.compare-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.compare-head b { font: 400 22px var(--display); }
.compare-head span { font-size: 13px; color: var(--muted); }
.scroll-view.sm { --vh: clamp(220px, 32vw, 460px); }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }

/* Video de presentación */
.sec-head{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:end}
.sec-head p{margin:0;font-size:17px;line-height:27px}
.video-frame{border-radius:32px;overflow:hidden;background:var(--soft,#d6e4bd);line-height:0}
.video-frame video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:10px}.sec-head p{font-size:15px;line-height:23px}.video-frame{border-radius:22px}}

/* Caso Tramicar: bloques de contenido */
.mini-grid{display:grid;gap:12px}
.mini-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mini{background:var(--bg);border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.mini b{font:400 22px/1.2 var(--display)}
.mini span{font-size:14px;line-height:21px;color:var(--muted)}
.mini.is-card{background:var(--card);padding:24px}
.mini.is-card span{font-size:15px;line-height:24px;color:var(--ink)}
.stack-body .note{font-size:15px;line-height:24px;color:var(--muted)}
.res-list{list-style:none;margin:6px 0 0;padding:0}
.res-list li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.18);font-size:17px;line-height:26px}
.res-list li span{font:400 14px var(--display);color:var(--soft)}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.stage{background:var(--card);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:10px}
.stage.alt{background:var(--soft)}
.stage .n{font:400 15px var(--display);color:var(--muted)}
.stage h3{margin:0;font:400 26px/1.1 var(--display)}
.stage p{margin:0;font-size:14px;line-height:21px;color:var(--muted)}
.stage ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.stage li{font-size:14px;line-height:20px;padding:8px 12px;border-radius:999px;background:var(--bg)}
.annot{background:var(--soft);border-radius:32px;padding:32px;display:flex;flex-direction:column;gap:28px}
.annot-img{position:relative;border-radius:18px;overflow:hidden;line-height:0;box-shadow:0 20px 40px -24px rgba(17,54,51,.45)}
.annot-img img{width:100%;height:auto;aspect-ratio:1440/624;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--on-brand);border:3px solid #fff;display:grid;place-items:center;font:400 15px/1 var(--display);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.annot-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.annot-legend>div{display:flex;gap:14px;align-items:flex-start}
.pin-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font:400 14px var(--display)}
.annot-legend b{display:block;font:400 19px/24px var(--display)}
.annot-legend span span{display:block;font-size:14px;line-height:21px;color:var(--muted);margin-top:4px}
@media (max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.annot-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
.mini-grid.three,.mini-grid.two{grid-template-columns:1fr}
.stages{grid-template-columns:1fr}
.stage ul{flex-direction:row;flex-wrap:wrap}
.stage li{font-size:12px;padding:6px 10px}
.annot{padding:14px;border-radius:24px;gap:16px}
.annot-img{border-radius:12px}
.pin{width:22px;height:22px;border-width:2px;font-size:11px}
.annot-legend{grid-template-columns:1fr;gap:14px;padding:0 4px 6px}
}

.scroll-view.static { --vh: auto; height: auto; }
.scroll-view.static img { animation: none; width: 100%; aspect-ratio: 1440 / 860; object-fit: cover; object-position: top; }

.slide-img { border-radius: 14px; overflow: hidden; line-height: 0; box-shadow: 0 20px 40px -24px rgba(17,54,51,.45); }
.slide-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; object-fit: cover; }

.vx-m { display: none; }
@media (max-width: 760px) { .vx-d { display: none; } .vx-m { display: block; } }

.volt-guide { padding: 16px 0 72px; }
.volt-guide figure { width: 720px; }
@media (max-width: 760px) { .volt-guide { padding: 8px 0 40px; } .volt-guide figure { width: 300px !important; } }

/* Hover en tarjetas informativas de los casos */
.meta div, .step, .mini { transition: translate .5s var(--spring), border-radius .6s var(--spring), box-shadow .5s, background-color .3s, opacity .9s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease); }
.meta div:hover { translate: 0 -6px; background: var(--soft); box-shadow: 0 18px 36px -18px rgba(17, 54, 51, .25); }
.step:hover, .mini:hover { translate: 0 -8px; border-radius: 36px 14px 36px 14px; box-shadow: 0 18px 36px -18px rgba(17, 54, 51, .25); }
.step h3, .mini b { transition: translate .5s var(--spring); } .step:hover h3, .mini:hover b { translate: 6px 0; }
@media (hover: none) { .meta div:hover, .step:hover, .mini:hover { translate: none; box-shadow: none; } }
@media (max-width: 720px) { .vreel { padding: 4px 0 32px !important; } .vreel > div { border-radius: 22px !important; } .vreel-snd { right: 12px !important; bottom: 12px !important; height: 36px !important; padding: 0 14px !important; font-size: 12px !important; } }
@media (max-width: 720px) { .case-hero > .case-intro { grid-column: 1 / -1; } }
@media (max-width: 720px) { .vreel-snd .snd-t { display: none; } .vreel-snd { width: 36px; padding: 0 !important; justify-content: center; } }

/* Hero: prototipo -> sitio */
@keyframes protoWipe{0%,24%{clip-path:inset(0 100% 0 0)}44%,84%{clip-path:inset(0 0 0 0)}98%,100%{clip-path:inset(0 100% 0 0)}}@keyframes protoScan{0%,24%{left:0%;opacity:0}26%{opacity:1}44%{left:100%;opacity:1}46%,84%{left:100%;opacity:0}86%{opacity:1}98%{left:0%;opacity:1}100%{left:0%;opacity:0}}@keyframes protoA{0%,30%{opacity:1}36%,90%{opacity:0}96%,100%{opacity:1}}@keyframes protoB{0%,30%{opacity:0}36%,90%{opacity:1}96%,100%{opacity:0}}.proto-site{animation:protoWipe 9s cubic-bezier(.65,0,.35,1) infinite}.proto-scan{animation:protoScan 9s cubic-bezier(.65,0,.35,1) infinite}.proto-la{animation:protoA 9s ease infinite}.proto-lb{animation:protoB 9s ease infinite}@media (prefers-reduced-motion: reduce){.proto-site{animation:none;clip-path:none}.proto-scan,.proto-la{display:none}.proto-lb{animation:none;opacity:1}}
.showcase-art .b { right: 22px; top: 18px; }
.showcase .stat-card { z-index: 2; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); }
@media (max-width: 720px) { .showcase .proto { position: relative !important; right: auto !important; top: auto !important; width: 100% !important; border-radius: 12px !important; } }
@media (max-width: 720px) { .showcase-art .b { display: none; } }

/* Hero v3: foto más grande + abanico de proyectos */
@keyframes fanIn{from{opacity:0;transform:translateX(-50%) translateY(60px) scale(.55)}}.fan-card{animation:fanIn .9s cubic-bezier(.22,1,.36,1) both;transition:translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}.fan-card:hover{translate:0 -14px;box-shadow:0 40px 70px -28px rgba(0,0,0,.7)}.fan-card .fan-name{opacity:0;translate:0 6px;transition:opacity .35s ease,translate .35s ease}.fan-card:hover .fan-name{opacity:1;translate:0 0}@media (prefers-reduced-motion: reduce){.fan-card{animation:none}}
.feature2 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; padding-bottom: 56px; }
.about-card { text-decoration: none; color: var(--ink); background: var(--soft); border-radius: 32px; padding: 14px 14px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; transition: translate .5s var(--ease); }
.about-card:hover { translate: 0 -4px; }
.about-photo { display: block; border-radius: 22px; overflow: hidden; line-height: 0; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.about-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 0 8px; }
.about-foot > span { display: flex; flex-direction: column; gap: 4px; }
.about-foot strong { font: 400 22px/26px var(--display); }
.about-foot small { font-size: 13px; color: var(--muted); }
.about-foot i { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-style: normal; }
.showcase2 { position: relative; min-height: 440px; border-radius: var(--r-xl); background: var(--brand); color: var(--on-brand); overflow: clip; }
.showcase2 .a2 { position: absolute; width: 520px; height: 520px; left: 50%; margin-left: -260px; top: 120px; border-radius: 50%; background: #1b4a45; }
.fan-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.fan-m { display: none; }
.sc-head { position: absolute; left: 28px; top: 26px; display: flex; flex-direction: column; gap: 16px; z-index: 4; pointer-events: none; }
.sc-head .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-head .showcase-quote { margin: 0; font-size: 34px; max-width: 16ch; }
.stat2 { position: absolute; z-index: 4; right: 24px; top: 24px; max-width: 250px; background: var(--card); color: var(--ink); border-radius: 24px 24px 24px 8px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); }
.stat2 b { font: 400 40px/1 var(--display); }
.stat2 span { font-size: 13px; line-height: 19px; }
@media (max-width: 1100px) { .fan-d .fan-card { width: 360px !important; } }
@media (max-width: 720px) {
  .feature2 { grid-template-columns: 1fr; padding-bottom: 36px; }
  .about-card { flex-direction: row; align-items: center; padding: 12px; border-radius: 24px; }
  .about-photo { width: 120px; flex: none; border-radius: 16px; }
  .about-photo img { aspect-ratio: 1 / 1; }
  .about-foot { flex: 1; padding: 0 6px 0 0; align-items: center; }
  .showcase2 { min-height: 400px; border-radius: 28px; }
  .showcase2 .a2 { width: 300px; height: 300px; margin-left: -150px; top: 110px; }
  .fan-d { display: none; } .fan-m { display: block; }
  .sc-head { left: 20px; top: 22px; } .sc-head .tags { display: none; }
  .sc-head .showcase-quote { font-size: 28px; max-width: 11ch; }
  .stat2 { top: auto; left: 14px; right: 14px; bottom: 14px; max-width: none; border-radius: 20px; padding: 14px 16px; }
  .stat2 b { font-size: 32px; }
}

/* Hero v4: bento */
.bento{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:150px minmax(0,1fr) 150px;gap:16px;height:480px}.bento>*{position:relative;border-radius:32px;overflow:hidden;text-decoration:none;transition:translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}.bento>a:hover{translate:0 -4px;box-shadow:0 24px 44px -28px rgba(17,54,51,.6)}.bento .b-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:scale 1s cubic-bezier(.22,1,.36,1)}.bento>a:hover .b-cover{scale:1.04}.b-feat{grid-column:1;grid-row:1/3;background:#113633}.b-feat .b-cover{object-position:top}.b-volt{grid-column:2;grid-row:2/4;background:#0a0a0a}.b-pill{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#121815;font:600 13px/1 Manrope,system-ui,sans-serif;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}.b-pill em{font-style:normal;font-weight:500;color:#4f5a55}.b-stat{grid-column:2;grid-row:1;background:#ffffff;color:#121815;padding:20px 22px;display:flex;align-items:center;gap:14px;box-shadow:inset 0 0 0 1px #e4e1d6}.b-stat b{font:400 48px/1 'Outfit', 'Manrope', system-ui, sans-serif}.b-stat span{font-size:13px;line-height:19px}.b-say{grid-column:1;grid-row:3;background:#113633;color:#ffffff;padding:22px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px}.b-say p{margin:0;font:400 30px/1.15 'Outfit', 'Manrope', system-ui, sans-serif}.b-tags{display:flex;flex-wrap:wrap;gap:8px}.b-tags span{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.45);font-size:12px;color:#ffffff}.bento.is-m { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }.bento.is-m .b-feat { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; border-radius: 24px; }.bento.is-m .b-stat { grid-column: 1; grid-row: auto; border-radius: 24px; padding: 18px; flex-direction: column; align-items: flex-start; justify-content: space-between; }.bento.is-m .b-volt { grid-column: 2; grid-row: auto; aspect-ratio: 1 / 1.15; border-radius: 24px; }.bento.is-m .b-say { grid-column: 1 / -1; grid-row: auto; border-radius: 24px; padding: 22px 20px; }.bento.is-m .b-say p { font-size: 26px; } .bento.is-m .b-stat b { font-size: 40px; }@media (max-width:720px){.bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }.bento .b-feat { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; border-radius: 24px; }.bento .b-stat { grid-column: 1; grid-row: auto; border-radius: 24px; padding: 18px; flex-direction: column; align-items: flex-start; justify-content: space-between; }.bento .b-volt { grid-column: 2; grid-row: auto; aspect-ratio: 1 / 1.15; border-radius: 24px; }.bento .b-say { grid-column: 1 / -1; grid-row: auto; border-radius: 24px; padding: 22px 20px; }.bento .b-say p { font-size: 26px; } .bento .b-stat b { font-size: 40px; }}@media (min-width:721px) and (max-width:1100px){.bento{grid-template-columns:minmax(0,1fr) 260px}.b-say p{font-size:24px}.b-stat b{font-size:38px}}
@media (max-width: 720px) { .in-4 > .bento { margin-bottom: -20px; } }

/* Sobre mí con foto */
.me-card{position:relative;border-radius:28px;overflow:hidden;background:#d6e4bd;aspect-ratio:1/1}.me-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}.me-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:0 4px;color:#4f5a55;font:500 13px/1 Manrope,system-ui,sans-serif}
.about .me { grid-column: span 3; grid-row: span 2; align-self: start; }
.about .exp, .about .how { grid-column: span 9; }
@media (max-width: 720px) { .about .me { grid-column: 1 / -1; grid-row: auto; width: 200px; } .about .exp, .about .how { grid-column: 1 / -1; } }

/* Blob widget */

.bw-rig{position:relative;line-height:0;container-type:inline-size;user-select:none}
.bw-rig img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.bw-rig .bw-sizer{visibility:hidden}
.bw-rig .bw-pt{position:absolute;left:0;top:0;width:100%;height:auto}
.bw-rig .bw-head{height:100%}
.bw-d .bw-tail{transform-origin:47.73% 74.62%}.bw-d .bw-antl{transform-origin:48.18% 24.27%}.bw-d .bw-antr{transform-origin:59.85% 28.85%}
.bw-d .bw-arml{transform-origin:25.76% 52.7%}.bw-d .bw-armr{transform-origin:53.8% 65.2%}.bw-d .bw-head{transform-origin:48.48% 52.7%}
.bw-f .bw-tail{transform-origin:48.85% 73.81%}.bw-f .bw-antl{transform-origin:41.3% 23.68%}.bw-f .bw-antr{transform-origin:55.9% 25.42%}
.bw-f .bw-arml{transform-origin:27.16% 59.92%}.bw-f .bw-armr{transform-origin:70.34% 59.51%}.bw-f .bw-head{transform-origin:48.74% 53.93%}
.bw-tail{animation:bwTail 3.4s ease-in-out infinite alternate}.bw-antl{animation:bwAnt 2.2s ease-in-out infinite alternate}.bw-antr{animation:bwAnt 2.7s ease-in-out -1s infinite alternate-reverse}
.bw-arml{animation:bwArm 3.1s ease-in-out infinite alternate}.bw-armr{animation:bwArmR 3.6s ease-in-out -1.2s infinite alternate}
.bw-head{animation:bwHead 6s ease-in-out infinite;transition:rotate .45s cubic-bezier(.22,1,.36,1)}
@keyframes bwTail{from{rotate:-6deg}to{rotate:7deg}}@keyframes bwAnt{from{rotate:-7deg}to{rotate:7deg}}@keyframes bwArm{from{rotate:-3deg}to{rotate:4deg}}@keyframes bwArmR{from{rotate:3deg}to{rotate:-5deg}}
@keyframes bwHead{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes bwWaveL{from{rotate:0deg}to{rotate:12deg}}@keyframes bwWaveR{from{rotate:0deg}to{rotate:-12deg}}
@keyframes bwFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.is-wave .bw-arml{animation:bwWaveL .32s ease-in-out 6 alternate}.is-wave .bw-armr{animation:bwWaveR .32s ease-in-out 6 alternate}
.is-hype .bw-antl,.is-hype .bw-antr{animation-duration:.45s}.is-hype .bw-tail{animation-duration:.8s}
.look-l .bw-head{rotate:-9deg}.look-r .bw-head{rotate:9deg}
.bw-face{position:absolute;z-index:2;transform:translate(-50%,-50%);transition:opacity .12s ease,translate .35s cubic-bezier(.22,1,.36,1);pointer-events:none;line-height:0}
.bw-d .bw-face{left:46.57%;top:43.9%;transform:translate(-50%,-50%) rotate(20.8deg)}.bw-f .bw-face{left:48.8%;top:42.78%}
.look-l .bw-f .bw-face{translate:-18% 0}.look-r .bw-f .bw-face{translate:18% 0}
.bw-face svg{display:block;height:auto;shape-rendering:crispEdges}.bw-face svg rect{fill:#f4ead5}.bw-face.is-flick{opacity:0}
/* intro */
.bw-intro{position:fixed;inset:0;z-index:9998;pointer-events:auto}
.bw-cover{position:absolute;inset:0;background:#113633;clip-path:circle(150% at 50% 50%)}
.bw-dot{position:absolute;left:50%;top:50%;width:min(12vw,90px);aspect-ratio:1;border-radius:50%;background:#1b4a45;translate:-50% -50%;scale:0}
.bw-fly{position:absolute;inset:0;pointer-events:none}
.bw-big{position:absolute;left:50%;top:50%;translate:-50% -46%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))}
.bw-big.bw-f{width:min(34vw,44vh,320px)}.bw-big.bw-d{width:min(40vw,52vh,380px);display:none}
.bw-intro.diag .bw-big.bw-f{display:none}.bw-intro.diag .bw-big.bw-d{display:block}
.bw-intro .bw-pt,.bw-intro .bw-head{transition:scale .5s cubic-bezier(.22,1.2,.36,1),rotate .45s cubic-bezier(.22,1,.36,1)}
.bw-intro.building .bw-pt{scale:0}.bw-intro.building .bw-head{scale:0}.bw-intro.pre .bw-fly{opacity:0}
.bw-skip{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:max(20px,env(safe-area-inset-top,0px));z-index:3;font:600 13px/1 Manrope,system-ui,sans-serif;color:#e9efe6;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 16px;cursor:pointer}
.bw-skip:focus-visible,.bw-badge:focus-visible,.bw-close:focus-visible{outline:2px solid #d6e4bd;outline-offset:3px}
/* dock */
.bw-col{display:flex;flex-direction:column;align-items:center;gap:40px;pointer-events:auto}
.bw-wa{width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.45);transition:translate .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.bw-wa:hover{translate:0 -3px;box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}.bw-wa:focus-visible{outline:2px solid #113633;outline-offset:3px}
@media (max-width:720px){.bw-col{gap:32px}.bw-wa{width:48px;height:48px}.bw-wa svg{width:24px;height:24px}}
.bw-dock{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:9990;display:flex;align-items:flex-end;gap:10px;pointer-events:none}
.bw-badge{pointer-events:auto;position:relative;width:96px;height:96px;border-radius:50%;border:0;padding:0;background:#113633;cursor:pointer;box-shadow:0 18px 36px -18px rgba(17,54,51,.7)}
.bw-badge .bw-rig{position:absolute;left:50%;bottom:6px;width:104px;margin-left:-52px;animation:bwFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.bw-bubble{pointer-events:auto;position:relative;margin:0 0 30px;max-width:270px;background:#fff;color:#121815;border-radius:18px 18px 6px 18px;padding:12px 34px 12px 14px;font:500 13.5px/1.42 Manrope,system-ui,sans-serif;box-shadow:0 16px 34px -18px rgba(0,0,0,.45);border:1px solid #e4e1d6;opacity:0;translate:0 6px;transition:opacity .25s ease,translate .25s ease;visibility:hidden}
.bw-bubble b{display:block;font:700 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#56615b;margin-bottom:5px}
.bw-dock.talk .bw-bubble{opacity:1;translate:0 0;visibility:visible}
.bw-close{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:#56615b;font:400 18px/1 Manrope,system-ui,sans-serif;cursor:pointer}
@media (max-width:720px){.bw-badge{width:78px;height:78px}.bw-badge .bw-rig{width:86px;margin-left:-43px}.bw-bubble{max-width:200px;font-size:12.5px;margin-bottom:22px}}
@media (prefers-reduced-motion: reduce){.bw-rig *,.bw-badge .bw-rig{animation:none!important}.bw-intro .bw-pt{transition:none}}