/* ============================================================
   Magalí Olmedo · portfolio · sistema de diseño compartido
   Un solo lugar para tokens, layout y componentes.
   Lo usan la home (index.html) y todas las subpáginas de caso.
   ============================================================ */

/* Motion: duraciones y curva comunes */
:root{ --ease:cubic-bezier(.2,.7,.2,1); --d-fast:140ms; --d-ui:280ms; --d-reveal:600ms; }
:root{ --font:"General Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --maxw:62ch; }
html[data-theme="dark"]{ --halo-a:rgba(138,161,255,.07); --halo-b:rgba(110,140,255,.05); --card-shadow:rgba(138,161,255,.22); --bg:#0D0F14; --surface:#161922; --text:#ECEDF1; --muted:#A8ADB8; --line:#262A33; --accent:#8AA1FF; --accent-hover:#A3B5FF; --accent-soft:rgba(138,161,255,0.14); }
html[data-theme="light"]{ --halo-a:rgba(52,69,191,.045); --halo-b:rgba(52,69,191,.03); --card-shadow:rgba(52,69,191,.16); --bg:#FCFCFD; --surface:#FFFFFF; --text:#0E0F13; --muted:#4A4E57; --line:#E7E8EC; --accent:#3445BF; --accent-hover:#2B3AAD; --accent-soft:rgba(52,69,191,0.08); }
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .28s ease,color .28s ease;}
.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:40;}
.skip:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.layout{display:flex;align-items:flex-start;min-height:100vh;}
.side{position:sticky;top:0;height:100vh;width:220px;flex-shrink:0;display:flex;flex-direction:column;padding:34px 26px;}
.brand{font-size:17px;font-weight:600;letter-spacing:-0.01em;text-decoration:none;color:var(--text);}
.brand-sub{font-size:13px;color:var(--muted);margin-top:5px;}
nav.main{margin-top:42px;display:flex;flex-direction:column;gap:3px;}
nav.main a{position:relative;font-size:15px;color:var(--muted);text-decoration:none;padding:6px 0;width:max-content;transition:color .18s ease,transform .08s ease;}
nav.main a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
nav.main a:hover{color:var(--text);}
nav.main a:hover::after{transform:scaleX(1);}
nav.main a.active{color:var(--text);}
nav.main a.active::after{transform:scaleX(1);}
nav.main a:active{color:var(--accent);transform:translateY(1px);}

.topbar{position:fixed;top:22px;right:28px;z-index:30;display:flex;align-items:center;gap:18px;}
.langbar{display:flex;gap:12px;}
.langbar button{background:none;border:none;font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer;padding:2px 0;border-bottom:2px solid transparent;}
.langbar button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--accent);}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;padding:0;transition:border-color .18s ease;}
.theme-btn:hover{border-color:var(--accent);}
html[data-theme="dark"] .theme-btn .i-moon, html[data-theme="light"] .theme-btn .i-sun{display:none;}

.case-protected[hidden], .card-lock[hidden]{display:none;}
/* Volver arriba: encima del botón de accesibilidad, sin taparlo */
.to-top{position:fixed;right:28px;bottom:76px;z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease,border-color .18s ease;}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{border-color:var(--accent);}
/* CTA del home: una línea discreta bajo las cards */
.cta-line{max-width:var(--maxw);margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);}
.cta-line a{color:var(--accent);font-weight:600;text-decoration:none;}
.a11y-wrap{position:fixed;bottom:22px;right:28px;z-index:30;}
.a11y-btn{background:var(--surface);border:1px solid var(--line);color:var(--text);width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.a11y-panel{position:absolute;bottom:52px;right:0;width:216px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:none;}
.a11y-panel.open{display:block;}
.a11y-panel h3{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:500;}
.a11y-row{margin-bottom:14px;}
.a11y-row:last-child{margin-bottom:0;}
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.seg button{flex:1;background:transparent;border:none;font-family:inherit;font-size:13px;color:var(--muted);padding:7px 0;cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--text);}
.a11y-note{font-size:11px;color:var(--muted);line-height:1.5;}

main{flex:1;min-width:0;padding:0 8vw 40px;max-width:calc(var(--maxw) + 18vw);}
section{padding:88px 0 8px;}
section:first-child{min-height:86vh;padding-top:15vh;display:flex;flex-direction:column;justify-content:flex-start;}
h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;font-weight:600;letter-spacing:-0.03em;margin:0;max-width:17ch;}
h2{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0.02em;margin:0 0 26px;}
p{max-width:var(--maxw);}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--muted);margin-top:20px;}


.cards{display:flex;flex-direction:column;gap:14px;max-width:var(--maxw);}
.card{position:relative;display:block;color:var(--text);text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:22px 24px;transition:border-color var(--d-fast) ease,transform var(--d-ui) var(--ease),opacity var(--d-reveal) var(--ease),translate var(--d-reveal) var(--ease);}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 18px 40px -16px var(--card-shadow);opacity:0;transition:opacity var(--d-ui) var(--ease);pointer-events:none;}
.card:hover,.card:active,.card:focus,.card:visited{color:var(--text);}
.card:hover,.card:focus-visible{border-color:var(--accent);transform:translateY(-4px);}
.card:hover::after,.card:focus-visible::after{opacity:1;}
.card:active{transform:translateY(-1px);}
.card-media-wrap{display:block;overflow:hidden;border-radius:10px;margin-bottom:16px;}
.card-media-wrap .card-media{margin-bottom:0;transition:transform var(--d-ui) var(--ease);}
.card:hover .card-media-wrap .card-media,.card:focus-visible .card-media-wrap .card-media{transform:scale(1.03);}
.card-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px;}
.card-title{font-size:18px;font-weight:600;}
.card-tag{font-size:12px;color:var(--muted);}
.card-lock{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);border:1px solid var(--line);padding:2px 8px;border-radius:999px;}
.card p{margin:0;color:var(--muted);font-size:14.5px;}
.card-media{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;margin-bottom:16px;border:1px solid var(--line);background:var(--accent-soft);object-fit:cover;}
.card-media.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;text-align:center;padding:12px;}
.card-cta{display:inline-block;margin-top:14px;font-size:14px;color:var(--accent);}

.pillars{display:flex;flex-direction:column;gap:22px;max-width:var(--maxw);}
.pillar-t{font-size:17px;font-weight:600;margin:0 0 4px;}
.pillar-d{margin:0;color:var(--muted);font-size:15px;}

/* Trayectoria · línea de tiempo con acordeón */
.timeline{margin:30px 0 0;max-width:var(--maxw);}
.tl-item{display:grid;grid-template-columns:88px 1fr;}
.tl-year{font-size:13px;color:var(--muted);padding-top:20px;font-variant-numeric:tabular-nums;}
.tl-body{position:relative;padding:18px 0 18px 26px;border-left:1px solid var(--line);}
.tl-item:last-child .tl-body{border-left-color:transparent;}
.tl-dot{position:absolute;left:-5px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg);}
.tl-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:inherit;text-align:left;color:var(--text);}
.tl-role{display:block;font-size:16px;font-weight:600;}
.tl-co{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;}
.tl-chevron{flex-shrink:0;margin-top:4px;color:var(--muted);transition:transform .25s ease;}
.tl-toggle[aria-expanded="true"] .tl-chevron{transform:rotate(180deg);color:var(--accent);}
.tl-panel{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.tl-panel.open{max-height:320px;}
.tl-panel ul{margin:12px 0 2px;padding-left:18px;}
.tl-panel li{color:var(--muted);font-size:14px;margin-bottom:6px;}
.tl-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;color:var(--accent);text-decoration:none;}
.tl-link:hover{text-decoration:underline;}
.tl-link svg{flex-shrink:0;}

.about-intro{font-size:15px;color:var(--muted);font-style:italic;margin:0 0 24px;}
.about p + p{margin-top:20px;}
.contact-list{list-style:none;padding:0;margin:0;max-width:var(--maxw);}
.contact-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;}
.contact-list .k{width:130px;color:var(--muted);flex-shrink:0;}
.contact-list a{color:var(--accent);text-decoration:none;}
footer{padding:60px 8vw 90px;color:var(--muted);font-size:13px;}

/* ============================================================
   CASO DE ESTUDIO (subpáginas)
   ============================================================ */

/* Sidebar del caso: back + índice de etapas (TOC) */
.side .back{font-size:14px;color:var(--muted);text-decoration:none;margin-top:28px;transition:color .18s ease;}
.side .back:hover{color:var(--text);}
nav.toc{margin-top:26px;display:flex;flex-direction:column;gap:2px;}
nav.toc .toc-label{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:500;}
nav.toc a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:5px 0;transition:color .18s ease;}
nav.toc a:hover{color:var(--text);}
nav.toc a.active{color:var(--text);}

/* Banner de caso protegido */
.case-protected{display:flex;align-items:center;gap:10px;max-width:var(--maxw);border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 18px;font-size:13.5px;color:var(--muted);margin-bottom:30px;}
.case-protected svg{flex-shrink:0;color:var(--accent);}

/* Hero del caso */
.case-hero{padding-top:12vh;}
.case-eyebrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:20px;}
.case-eyebrow .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);}
.case-title{font-size:clamp(34px,6vw,60px);line-height:1.08;font-weight:600;letter-spacing:-0.03em;margin:0;max-width:16ch;}
.case-summary{font-size:19px;color:var(--muted);margin-top:24px;max-width:var(--maxw);}

/* Ficha (meta) del caso */
.case-meta{display:flex;flex-wrap:wrap;gap:30px 48px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);max-width:var(--maxw);}
.case-meta .m-k{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px;}
.case-meta .m-v{font-size:15px;color:var(--text);max-width:26ch;}

/* Texto bilingüe en el cuerpo de los casos: se muestra solo el idioma activo */
html[lang="es"] [data-lang="en"], html[lang="en"] [data-lang="es"]{display:none !important;}

/* Segundo tramo de un caso (etapas opcionales) */
.case-deep{margin-top:96px;padding-top:32px;border-top:1px solid var(--line);max-width:var(--maxw);}
.case-deep p{color:var(--muted);margin:0;}
.case-deep .stage{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 8px;}
.case-deep + .case-section{padding-top:40px;}
nav.toc .toc-sub{margin-top:14px;}

/* De un vistazo (cifras del caso): mismos tokens que .case-meta */
.case-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 32px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line);max-width:var(--maxw);}
.case-glance .g-n{font-size:1.75rem;line-height:1.1;font-weight:600;letter-spacing:-0.02em;color:var(--accent);font-variant-numeric:tabular-nums;}
.case-glance .g-t{font-size:0.8125rem;line-height:1.45;color:var(--muted);margin-top:8px;}
@media (max-width:1024px){ .case-glance{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* TL;DR del caso */
.case-tldr{max-width:var(--maxw);margin-top:44px;padding:22px 0 4px;border-top:1px solid var(--line);}
.tldr-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 12px;}
.case-tldr dl{margin:0;display:grid;gap:10px;}
.tldr-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 18px;}
.case-tldr dt{font-size:14px;font-weight:600;color:var(--text);}
.case-tldr dd{margin:0;font-size:15px;color:var(--text);}
@media (max-width:560px){ .tldr-row{grid-template-columns:1fr;} }

/* Secciones de etapa */
.case-section{padding:70px 0 0;max-width:var(--maxw);}
.case-section .stage{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 12px;}
.case-section h2{font-size:clamp(24px,3.4vw,32px);line-height:1.18;font-weight:600;letter-spacing:-0.02em;color:var(--text);margin:0 0 20px;text-transform:none;}
.case-section p{font-size:16.5px;margin:0 0 18px;}
.case-section p strong{font-weight:600;color:var(--text);}

/* Lista dentro de una etapa (ej: resultados) */
.case-list{margin:0 0 18px;padding-left:20px;max-width:var(--maxw);}
.case-list li{font-size:16.5px;margin-bottom:8px;}
.case-list li::marker{color:var(--accent);}
.case-list strong{font-weight:600;color:var(--text);}

/* Frase de cierre / pull-quote por sección */
.case-section .case-quote, .case-quote{font-size:clamp(20px,2.8vw,26px);line-height:1.3;font-weight:500;color:var(--text);letter-spacing:-0.01em;margin:28px 0 8px;padding-left:20px;border-left:2px solid var(--accent);max-width:var(--maxw);}

/* Figuras / imágenes */
picture{display:block;}
figure.case-figure{margin:28px 0;max-width:var(--maxw);}
figure.case-figure img,.fig-grid img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);}
figure.case-figure figcaption{font-size:13px;color:var(--muted);margin-top:10px;}
.fig-ph{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:220px;border:1px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:13.5px;padding:24px;}
.fig-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0;max-width:var(--maxw);}
.fig-grid figure{margin:0;}
.fig-grid .fig-ph{min-height:180px;}
.fig-grid.cols-3{grid-template-columns:repeat(3,1fr);}
/* Par de fotos de distinta proporción (vertical + horizontal) a la misma altura */
.fig-pair{display:grid;grid-template-columns:1fr 1.78fr;gap:12px;}
.fig-pair img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);}
@media (max-width:820px){.fig-pair{grid-template-columns:1fr;}}
.fig-grid-4{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fig-grid-4 picture{display:block;}
.fig-grid-4 img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line);}
@media (max-width:480px){.fig-grid-4{gap:8px;}}
/* Imágenes con transparencia (pantallas recortadas, collages): sin marco ni fondo */
.cutout img,figure.cutout img{border:0;border-radius:0;background:none;}
.case-section .fig-note{font-size:13px;color:var(--muted);margin:-14px 0 28px;}

/* Navegación inferior del caso */
.case-foot{margin-top:80px;padding-top:32px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:var(--maxw);}
.case-foot a{color:var(--accent);text-decoration:none;font-size:15px;}

/* Texto destacado en grande (statement) */
.case-section .case-highlight, .case-highlight{font-size:clamp(24px,3.4vw,34px);line-height:1.2;font-weight:600;letter-spacing:-0.02em;color:var(--text);margin:48px 0;max-width:var(--maxw);padding:28px 32px;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;text-wrap:balance;}
.case-highlight em{font-style:normal;color:var(--accent);}

/* Imagen ancha, rompe el ancho de lectura para dar impacto */
figure.case-figure.wide{max-width:var(--maxw);}
figure.case-figure.wide .fig-ph{min-height:340px;}

/* Prototipo / video embebido */
.case-embed{position:relative;width:100%;max-width:var(--maxw);aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:28px 0;background:var(--surface);}
.case-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Animación de aparición al scrollear (scroll-reveal) */
.js-motion .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease);}
.js-motion .reveal.is-visible{opacity:1;transform:none;}
/* Cards de Work: entran escalonadas (translate) sin interferir con el hover (transform) */
.js-motion .cards .card{opacity:0;translate:0 16px;}
.js-motion .cards.is-visible .card{opacity:1;translate:0 0;}
.js-motion .cards.is-visible .card:nth-child(2){transition-delay:0s,0s,70ms,70ms;}
.js-motion .cards.is-visible .card:nth-child(3){transition-delay:0s,0s,140ms,140ms;}
@media (prefers-reduced-motion:reduce){ .js-motion .reveal,.js-motion .cards .card{opacity:1;transform:none;translate:none;transition:none;} }

/* Panel de navegación: en escritorio no altera el layout */
.side-menu{display:contents;}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;padding:0;}
.menu-btn[aria-expanded="true"]{border-color:var(--accent);}
@media (max-width:820px){
  .layout{flex-direction:column;align-items:stretch;}
  .side{position:sticky;top:0;z-index:25;height:auto;width:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 6vw;background:var(--bg);border-bottom:1px solid var(--line);}
  .side .brand-sub{display:none;}
  .side-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:8px 6vw 18px;background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100vh - 64px);overflow:auto;}
  .side.menu-open .side-menu{display:flex;}
  .side-menu a{display:flex;align-items:center;min-height:44px;}
  .menu-btn{display:inline-flex;}
  section,.case-section,.case-tldr{scroll-margin-top:80px;}
  nav.main{flex-direction:column;gap:0;margin-top:0;}
  nav.main a{padding:0;}
  nav.toc{margin-top:8px;}
  .side .back{margin-top:0;}
  main{padding:0 6vw 40px;max-width:none;}
  section:first-child{padding-top:46px;min-height:auto;}
  .case-hero{padding-top:24px;}
  .topbar{top:10px;right:6vw;gap:12px;}
  .fig-grid,.fig-grid.cols-3{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Fondo: halo de acento muy suave, fijo, que deriva lento */
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at 25% 20%,var(--halo-a),transparent 70%),radial-gradient(35% 30% at 80% 75%,var(--halo-b),transparent 70%);will-change:transform;}

/* Subrayado de acento que crece (mismo patrón que el menú) */
.contact-list a,.case-foot a,.card-cta{position:relative;}
.contact-list a::after,.case-foot a::after,.card-cta::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-ui) var(--ease);}
.contact-list a:hover::after,.contact-list a:focus-visible::after,.case-foot a:hover::after,.case-foot a:focus-visible::after,.card:hover .card-cta::after,.card:focus-visible .card-cta::after{transform:scaleX(1);}
.cta-line a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}

@keyframes swap-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes arrive{from{opacity:.25;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes halo-drift{from{transform:translate3d(0,0,0) rotate(0deg);}to{transform:translate3d(-6%,4%,0) rotate(8deg);}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px);}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
  body::before{animation:halo-drift 40s var(--ease) infinite alternate;}
  .swap-in{animation:swap-in var(--d-ui) var(--ease) both;}
  .arrive{animation:arrive 500ms var(--ease) both;}
  .side.menu-open .side-menu{animation:menu-in var(--d-ui) var(--ease) both;}
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:vt-out 180ms var(--ease) both;}
  ::view-transition-new(root){animation:vt-in var(--d-ui) var(--ease) both;}
}

/* Alcance del sistema (caso sistema de diseño): números con ícono, siguen el tema por currentColor */
.reach{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,7vw,80px);margin:28px 0}
.reach-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.reach-ic{width:52px;height:52px}
.reach-num{font-size:clamp(44px,8vw,84px);font-weight:600;line-height:1}
.reach-lab{font-size:15px;color:var(--muted)}

/* Termostato: foto y GIF en una fila a la misma altura (ancho proporcional a su formato) */
.fig-row{display:flex;gap:12px;align-items:flex-start;}
.fig-row-item{flex:var(--ar) 1 0;min-width:0;}
.fig-row-item picture{display:block;}
.fig-row-item img{display:block;width:100%;height:auto;}
.fig-row-item:not(.cutout) img{border:0;border-radius:12px;outline:1px solid var(--line);outline-offset:-1px;}
@media (max-width:560px){.fig-row{flex-direction:column;}.fig-row-item{flex:none;width:100%;}}
/* Termostato: tablero 2x2 de pantallas animadas en el hero */
.hero-gifs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:var(--maxw);margin-top:32px;}
.hero-gifs picture{display:block;}
.hero-gifs img{display:block;width:100%;height:auto;}
@media (max-width:560px){.hero-gifs{gap:10px;}}

/* Cards de casos: radios concéntricos. radio_externo = radio_interno + distancia (padding + borde) */
:root{--card-pad:16px;--card-bw:1px;--card-r-in:10px;--card-r:calc(var(--card-r-in) + var(--card-pad) + var(--card-bw));--card-text-inset:8px;}
.card{border-width:var(--card-bw);border-radius:var(--card-r);padding:var(--card-pad) var(--card-pad) 22px;}
.card > :not(.card-media-wrap){margin-left:var(--card-text-inset);margin-right:var(--card-text-inset);}
.card-media-wrap,.card-media{border-radius:var(--card-r-in);}

/* Sidebar: foto sobre el nombre y estado de disponibilidad */
html[data-theme="dark"]{--ok:#4ADE80;--ok-ring:rgba(74,222,128,.42);}
html[data-theme="light"]{--ok:#16A34A;--ok-ring:rgba(22,163,74,.38);}
.brand-id{display:grid;width:max-content;}
.brand-photo{display:block;margin-bottom:14px;}
.brand-photo img{display:block;width:0;min-width:100%;height:auto;aspect-ratio:1;border-radius:14px;object-fit:cover;outline:1px solid var(--line);outline-offset:-1px;}
.brand-status{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:13px;color:var(--muted);}
.status-dot{position:relative;flex-shrink:0;width:8px;height:8px;margin-left:2px;}
.status-dot::before,.status-dot::after{content:"";position:absolute;border-radius:50%;}
.status-dot::before{inset:-5px;background:var(--ok);filter:blur(3px);opacity:.18;}
.status-dot::after{inset:0;background:var(--ok);box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ok-ring);}
@keyframes status-breathe{0%,100%{opacity:.1;transform:scale(.75);}50%{opacity:.38;transform:scale(1.15);}}
@media (prefers-reduced-motion:no-preference){.status-dot::before{animation:status-breathe 2.8s ease-in-out infinite;will-change:opacity,transform;}}
@media (max-width:820px){
  .brand-block{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;}
  .brand-id{display:contents;}
  .brand-photo{grid-row:1 / span 2;margin-bottom:0;}
  .brand-photo img{width:40px;min-width:0;border-radius:10px;}
  .brand{line-height:1.25;}
  .brand-status{margin-top:2px;font-size:12px;}
}
@media (max-width:380px){
  .brand-block{column-gap:8px;}
  .brand-photo img{width:32px;border-radius:8px;}
  .side .brand{font-size:15px;}
}

/* Home · Trabajo: en pantallas anchas las cards van una al lado de la otra,
   ocupando más que la columna de texto (ancho disponible junto al sidebar) */
@media (min-width:1360px){
  .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(1180px,calc(100vw - 220px - 16vw));max-width:none;}
  .cards .card{display:flex;flex-direction:column;}
  .cards .card p{margin-bottom:14px;}
  .cards .card-cta{margin-top:auto;align-self:flex-start;}
}

/* Home · cifras de la intro: número protagonista, label en mayúsculas, subtexto tenue */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:var(--maxw);margin-top:40px;}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0;}
.stat-num{display:inline-block;font-size:clamp(30px,2.8vw,36px);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.stat-lab{margin-top:6px;font-size:11px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text);}
.stat-sub{font-size:13px;line-height:1.4;color:var(--muted);}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats{gap:28px 20px;}
}
.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;}

/* Home · CTA discreto hacia los casos (scroll suave por CSS; directo con reduced motion) */
.cases-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;margin-top:22px;padding:10px 0;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;}
.cases-cta svg{transition:transform .25s ease;}
.cases-cta:hover svg,.cases-cta:focus-visible svg{transform:translateY(3px);}
.cases-cta:hover span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;}



/* Home · entrada del titular: cada palabra sube desde una máscara, luego intro y botones.
   Solo transform y opacity. Sin JS el texto se ve normal; con reduced motion no hay animación. */
#headline .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em 0 .14em;margin:-.1em 0 -.14em;}
#headline .w > span{display:inline-block;}
@media (prefers-reduced-motion:no-preference){
  .js-motion #headline:not(.hl-ready){opacity:0;animation:hl-failsafe 0s linear 1.5s forwards;}
  .js-motion #headline .w > span{transform:translateY(108%);}
  .js-motion #intro.intro-in #headline .w > span{transform:none;transition:transform 900ms cubic-bezier(.16,1,.3,1) calc(var(--i) * 70ms + 80ms);}
  .js-motion #intro #subline,.js-motion #intro .stats,.js-motion #intro .cases-cta{opacity:0;transform:translateY(12px);}
  .js-motion #intro.intro-in #subline{opacity:1;transform:none;transition:opacity 700ms ease 520ms,transform 700ms cubic-bezier(.16,1,.3,1) 520ms;}
  .js-motion #intro.intro-in .stats{opacity:1;transform:none;transition:opacity 700ms ease 680ms,transform 700ms cubic-bezier(.16,1,.3,1) 680ms;}
  .js-motion #intro.intro-in .cases-cta{opacity:1;transform:none;transition:opacity 700ms ease 840ms,transform 700ms cubic-bezier(.16,1,.3,1) 840ms;}
}
@keyframes hl-failsafe{to{opacity:1;}}
@media (max-width:820px){ .stat-num{font-size:clamp(34px,9vw,44px);} }

/* Home · intro: tres párrafos bajo el titular */
#subline p{margin:0;max-width:var(--maxw);}
#subline p + p{margin-top:12px;}

/* Home · grilla decorativa de fondo, solo detrás del titular y los párrafos de #intro.
   Termina un poco por debajo del texto; las cifras quedan fuera, con aire entre las puntas y los números.
   Líneas de 1px (token --grid-line por tema), por debajo del límite que mantiene el texto en AAA. */
html[data-theme="dark"]{--grid-line:rgba(255,255,255,.065);}
html[data-theme="light"]{--grid-line:rgba(0,0,0,.055);}
#intro{position:relative;isolation:isolate;--grid-cell:clamp(64px,6vw,96px);--intro-bleed:8vw;--intro-top:15vh;--grid-tail:36px;}
.intro-top{position:relative;}
.intro-grid{position:absolute;top:calc(-1 * var(--intro-top));bottom:calc(-1 * var(--grid-tail));left:calc(-1 * var(--intro-bleed));right:calc(-1 * var(--intro-bleed));z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-cell) var(--grid-cell);background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);
  mask-composite:intersect;}
#intro .stats{margin-top:calc(var(--grid-tail) + 52px);}
@media (max-width:820px){ #intro{--intro-bleed:6vw;--intro-top:46px;--grid-tail:28px;} #intro .stats{margin-top:calc(var(--grid-tail) + 40px);} }
#headline{max-width:none;}
#headline .hl-accent{color:var(--accent);}

/* Contacto en móviles angostos: etiqueta arriba del dato, para que el correo entre sin scroll horizontal */
@media (max-width:480px){
  .contact-list li{flex-direction:column;gap:2px;}
  .contact-list .k{width:auto;}
  .contact-list a{overflow-wrap:anywhere;}
}