/* Layout: cabecera fija con logo, menú y controles; hero con retrato a la derecha;
   secciones en cuadrícula de paneles de cristal. En móvil el menú pasa a hamburguesa
   y la cabecera se oculta al bajar y reaparece al subir. */

/* Paletas del portfolio (se eligen con el icono de paleta) */
:root,
:root[data-palette="azul"]{--a:#4aa8ff;--b:#22d3ee;--c:#3b6cf6;--bgd:#06121f;--bgl:#e3f2fd}
:root[data-palette="gris"]{--a:#e2e8f0;--b:#94a3b8;--c:#64748b;--bgd:#0c0e12;--bgl:#eceef2}
:root[data-palette="turquesa"]{--a:#2dd4bf;--b:#5eead4;--c:#0d9488;--bgd:#04161a;--bgl:#dcf6f2}
:root[data-palette="violeta"]{--a:#a78bfa;--b:#e879f9;--c:#7c3aed;--bgd:#110a22;--bgl:#ece6ff}
:root[data-palette="ambar"]{--a:#fbbf24;--b:#fb923c;--c:#f59e0b;--bgd:#1a1204;--bgl:#fff3d6}
:root[data-palette="coral"]{--a:#fb7185;--b:#fdba74;--c:#f43f5e;--bgd:#1c0a10;--bgl:#ffe6e8}

/* Tema oscuro por defecto */
:root{
  --bg:var(--bgd);--ink:#f4f6fb;--mute:#c0c8d8;
  --glass:rgba(255,255,255,.08);--edge:rgba(255,255,255,.24);--hi:rgba(255,255,255,.38);
  --shadow:rgba(0,0,0,.35);--menu:rgba(18,24,38,.92);
  --t1:var(--a);--t2:var(--b);--on:#08111c;
  /* Colores de categoría: tipos de proyecto y grupos de skills */
  --k-azul:#60a5fa;--k-gris:#a9b4c8;--k-turquesa:#2dd4bf;--k-violeta:#a78bfa;--k-ambar:#fbbf24;--k-coral:#fb7185;
  --kp:68%;--kbase:#ffffff;--k:var(--t2);--spot:rgba(255,255,255,.24);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:var(--bgl);--ink:#1a2233;--mute:#4a5468;
    --glass:rgba(255,255,255,.5);--edge:rgba(255,255,255,.85);--hi:#fff;
    --shadow:rgba(30,50,90,.16);--menu:rgba(255,255,255,.95);
    --t1:color-mix(in srgb,var(--a) 55%,#101a2c);--t2:color-mix(in srgb,var(--b) 55%,#101a2c);
    --kp:58%;--kbase:#101a2c;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:var(--bgl);--ink:#1a2233;--mute:#4a5468;
  --glass:rgba(255,255,255,.5);--edge:rgba(255,255,255,.85);--hi:#fff;
  --shadow:rgba(30,50,90,.16);--menu:rgba(255,255,255,.95);
  --t1:color-mix(in srgb,var(--a) 55%,#101a2c);--t2:color-mix(in srgb,var(--b) 55%,#101a2c);
  --kp:58%;--kbase:#101a2c;
  color-scheme:light;
}

.k-azul{--k:var(--k-azul)}
.k-gris{--k:var(--k-gris)}
.k-turquesa{--k:var(--k-turquesa)}
.k-violeta{--k:var(--k-violeta)}
.k-ambar{--k:var(--k-ambar)}
.k-coral{--k:var(--k-coral)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 "DM Sans",system-ui,sans-serif;overflow-x:hidden;transition:background .5s,color .5s}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.1;margin:0;text-wrap:balance}
img{max-width:100%;display:block}

.blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);transition:background .5s}
/* Manchas de fondo: degradado radial que reproduce un círculo con blur de 70px, pero sin usar filter.
   Se ve igual y la GPU no tiene que desenfocar tres capas enormes en cada fotograma.
   Cada caja es 350px mayor que la mancha (hueco para el difuminado) y se desplaza 175px para que el centro quede igual. */
@property --ba{syntax:"<color>";inherits:false;initial-value:#4aa8ff}
.blobs i{
  position:absolute;opacity:.7;will-change:transform;
  animation:drift 22s steps(160) infinite alternate;transition:--ba .6s;
  background:radial-gradient(closest-side,
    var(--ba) calc(100% - 350px),
    color-mix(in srgb,var(--ba) 97.7%,transparent) calc(100% - 315px),
    color-mix(in srgb,var(--ba) 93.3%,transparent) calc(100% - 280px),
    color-mix(in srgb,var(--ba) 84.1%,transparent) calc(100% - 245px),
    color-mix(in srgb,var(--ba) 69.1%,transparent) calc(100% - 210px),
    color-mix(in srgb,var(--ba) 50.0%,transparent) calc(100% - 175px),
    color-mix(in srgb,var(--ba) 30.9%,transparent) calc(100% - 140px),
    color-mix(in srgb,var(--ba) 15.9%,transparent) calc(100% - 105px),
    color-mix(in srgb,var(--ba) 6.7%,transparent) calc(100% - 70px),
    color-mix(in srgb,var(--ba) 2.3%,transparent) calc(100% - 35px),
    transparent 100%);
}
.blobs i:nth-child(1){--ba:var(--a);width:calc(46vmax + 350px);height:calc(46vmax + 350px);top:calc(-12vmax - 175px);left:calc(-10vmax - 175px)}
.blobs i:nth-child(2){--ba:var(--b);width:calc(40vmax + 350px);height:calc(40vmax + 350px);bottom:calc(-14vmax - 175px);right:calc(-8vmax - 175px);animation-delay:-8s}
.blobs i:nth-child(3){--ba:var(--c);width:calc(30vmax + 350px);height:calc(30vmax + 350px);top:calc(35% - 175px);left:calc(45% - 175px);animation-delay:-14s;opacity:.5}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}

.glass{
  background:linear-gradient(135deg,var(--glass),rgba(255,255,255,.02));
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--edge);border-radius:26px;
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -1px 0 rgba(255,255,255,.06),0 18px 50px var(--shadow);
}

/* Brillo de cristal que sigue al ratón */
.spot{position:relative}
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%);
}
.spot:hover::after{opacity:1}

/* Logo SH */
.logo{display:block;width:var(--lw,30px);height:calc(var(--lw,30px) * .787);fill:currentColor}

/* Cabecera fija: logo · menú · controles */
.cabecera{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.3,.9,.3,1);
}
.cabecera>*{pointer-events:auto}
.cabecera--oculta{transform:translateY(calc(-100% - 100px))}

/* Logo grande de fondo, fijo arriba a la izquierda. Los paneles de cristal lo desenfocan al pasar por encima */
.fondo-logo{
  --lw:clamp(300px,46vw,720px);
  position:fixed;top:3vh;left:-2vw;z-index:-1;pointer-events:none;
  color:color-mix(in srgb,var(--t2) 45%,var(--ink));opacity:.48;
}
.fondo-logo .logo{
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--t2) 60%,transparent)) drop-shadow(0 8px 40px color-mix(in srgb,var(--t1) 50%,transparent));
}
/* Logo del pie: solo el trazo con una luz del color de la paleta */
.sello-btn .logo{
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--t2) 70%,transparent)) drop-shadow(0 3px 14px color-mix(in srgb,var(--t1) 55%,transparent));
  transition:filter .35s;
}
.sello-btn:hover .logo,.sello-btn:focus-visible .logo,.sello.abierto .logo{
  filter:drop-shadow(0 0 8px var(--t2)) drop-shadow(0 4px 22px var(--t1));
}

/* Menú principal */
.menu{justify-self:center;display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;max-width:100%}
.menu a{
  position:relative;color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem;padding:8px 14px;border-radius:999px;white-space:nowrap;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1),filter .3s,opacity .3s,background .25s;
}
.menu a:hover,.menu a:focus-visible{background:rgba(255,255,255,.2)}
/* Escritorio: zoom en el enlace activo y desenfoque en el resto */
@media (min-width:761px){
  .menu{grid-column:2}
  .corner{grid-column:3}
  .menu a:hover,.menu a:focus-visible{transform:scale(1.16)}
  .menu:has(a:hover) a:not(:hover),.menu:has(a:focus-visible) a:not(:focus-visible){filter:blur(2.5px);opacity:.5}
}

/* Controles: color y tema (y hamburguesa en móvil) */
.corner{justify-self:end;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px}
.pal{position:relative}
.cbtn{
  all:unset;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink);
  transition:background .25s,transform .25s;
}
.cbtn:hover,.cbtn:focus-visible{background:rgba(255,255,255,.22)}
.cbtn:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
#palBtn svg{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
#palBtn:hover svg,#palBtn[aria-expanded="true"] svg{transform:rotate(-18deg) scale(1.12)}

.pal-menu{
  position:absolute;top:calc(100% + 14px);right:-4px;min-width:160px;padding:6px;border-radius:18px;
  background:var(--menu);border:1px solid var(--edge);box-shadow:0 18px 40px var(--shadow);
  display:grid;gap:2px;animation:pop .22s cubic-bezier(.3,1.4,.5,1) both;transform-origin:top right;
}
.pal-menu[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:scale(.86) translateY(-6px)}}
.opt{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;
  font-weight:500;font-size:.95rem;color:var(--ink);transition:background .2s,transform .2s;
}
.opt:hover,.opt:focus-visible{background:rgba(127,150,190,.2);transform:translateX(3px)}
.opt:focus-visible{outline:2px solid var(--t2)}
.opt i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);transition:transform .25s,box-shadow .25s}
.opt[data-p="azul"] i{background:linear-gradient(135deg,#4aa8ff,#22d3ee)}
.opt[data-p="gris"] i{background:linear-gradient(135deg,#e2e8f0,#64748b)}
.opt[data-p="turquesa"] i{background:linear-gradient(135deg,#2dd4bf,#0d9488)}
.opt[data-p="violeta"] i{background:linear-gradient(135deg,#a78bfa,#e879f9)}
.opt[data-p="ambar"] i{background:linear-gradient(135deg,#fbbf24,#fb923c)}
.opt[data-p="coral"] i{background:linear-gradient(135deg,#fb7185,#fdba74)}
.opt[aria-pressed="true"]{font-weight:700}
.opt[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--menu),0 0 0 4px var(--ink)}

/* Sol / luna: al cambiar de tema el sol se convierte en luna */
.mode svg{transition:transform .7s cubic-bezier(.3,1.5,.5,1);overflow:visible}
.mode .core{r:5;transition:r .5s ease}
.mode .cut{cx:24;cy:0;r:0;transition:cx .5s ease,cy .5s ease,r .5s ease}
.mode .rays{transform-origin:12px 12px;transition:transform .6s ease,opacity .35s ease}
.mode[data-state="light"] svg{transform:rotate(90deg)}
.mode[data-state="dark"] svg{transform:rotate(-25deg)}
.mode[data-state="dark"] .core{r:9}
.mode[data-state="dark"] .cut{cx:18;cy:6;r:8}
.mode[data-state="dark"] .rays{transform:rotate(-90deg) scale(.2);opacity:0}
.mode:hover svg{filter:drop-shadow(0 0 6px var(--t2))}

/* Hamburguesa (solo móvil) */
.corner .hamburguesa{display:none;position:relative}
.hamburguesa span{
  position:absolute;left:10px;right:10px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s,top .35s;
}
.hamburguesa span:nth-child(1){top:13px}
.hamburguesa span:nth-child(2){top:18px}
.hamburguesa span:nth-child(3){top:23px}
.hamburguesa[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.hamburguesa[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}

main{max-width:1040px;margin:0 auto;padding:0 16px 40px}
section{padding-top:84px}

/* Hero */
.hero{padding-top:112px}
.hero .card{
  padding:clamp(26px,5vw,60px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(24px,5vw,56px);align-items:center;
}
h1{font-size:clamp(2.4rem,6.6vw,4.8rem);font-weight:800;letter-spacing:-.03em}
h1 span{
  background:linear-gradient(100deg,var(--t1),var(--t2),var(--t1));background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s ease-in-out 1.2s 2 alternate;
}
@keyframes flow{to{background-position:100% 0}}
.lead{max-width:56ch;color:var(--mute);font-size:1.1rem;margin:22px 0 30px}

.foto{position:relative;width:100%;aspect-ratio:1;border-radius:50%;padding:10px;justify-self:center;max-width:300px;animation:float 6s ease-in-out 1.2s 3}
.foto::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;z-index:-1;filter:blur(16px);opacity:.65;
  background:conic-gradient(var(--a),var(--b),var(--c),var(--a));animation:spin 12s linear 1.2s 2;
}
.foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1.04);filter:contrast(1.03);transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.foto:hover img{transform:scale(1.1)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{translate:0 -10px}}

.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  position:relative;overflow:hidden;display:inline-block;text-decoration:none;color:var(--ink);font-weight:600;padding:13px 26px;border-radius:999px;
  border:1px solid var(--edge);background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 var(--hi);
  transition:transform .25s,background .25s,box-shadow .25s;align-self:flex-start;
}
.btn::after{
  content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .6s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.24);box-shadow:inset 0 1px 0 var(--hi),0 12px 28px var(--shadow)}
.btn:hover::after,.btn:focus-visible::after{left:130%}
.btn.main{background:linear-gradient(100deg,var(--a),var(--b));color:var(--on);border:0}
.btn.main:hover,.btn.main:focus-visible{background:linear-gradient(100deg,var(--a),var(--b));filter:brightness(1.08)}

h2{font-size:clamp(1.9rem,4.5vw,2.8rem);margin-bottom:26px;letter-spacing:-.02em}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}

/* Proyectos: el color de la etiqueta y del borde indica el tipo de proyecto */
.proj{
  --spot:color-mix(in srgb,var(--k) 38%,rgba(255,255,255,.2));
  padding:26px;display:flex;flex-direction:column;gap:12px;
  border-color:color-mix(in srgb,var(--k) 38%,var(--edge));
  transition:transform .35s cubic-bezier(.3,1.3,.5,1),box-shadow .35s;
}
.proj:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 var(--hi),0 26px 60px color-mix(in srgb,var(--k) 26%,var(--shadow))}
.proj.big{grid-column:1/-1}
.proj h3{font-size:1.4rem}
.proj p{margin:0;color:var(--mute)}
/* Proyecto destacado */
.feat{
  padding:clamp(28px,4vw,42px);gap:14px;
  box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px color-mix(in srgb,var(--k) 30%,transparent),0 24px 70px color-mix(in srgb,var(--k) 22%,var(--shadow));
}
.feat:hover{box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px color-mix(in srgb,var(--k) 40%,transparent),0 30px 80px color-mix(in srgb,var(--k) 32%,var(--shadow))}
.feat h3{font-size:clamp(1.9rem,4.2vw,2.6rem);letter-spacing:-.02em}
.feat p{max-width:70ch;font-size:1.05rem}
.kind{
  display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600;
  color:color-mix(in srgb,var(--k) var(--kp),var(--kbase));
}
.kind::before,.skill h3::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--k);box-shadow:0 0 12px var(--k);
}

/* Etiquetas: tintadas con el color del grupo; al pasar el ratón se mueven y se iluminan con el color de su logo */
ul.tags,ul.chips{padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tags{margin-top:auto;padding-top:6px}
.tags li,.chips li{
  --brand:var(--t2);
  position:relative;isolation:isolate;list-style:none;cursor:default;
  font-size:.82rem;font-weight:500;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--k) 14%,rgba(255,255,255,.12));
  border:1px solid color-mix(in srgb,var(--k) 42%,var(--edge));
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),border-color .3s,background .3s,color .3s;
}
.tags li::before,.chips li::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;background:var(--brand);
  filter:blur(11px);opacity:0;transform:scale(.7);transition:opacity .35s,transform .35s;
}
.tags li:hover,.chips li:hover{
  transform:translateY(-4px) scale(1.1);border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 26%,transparent);
  animation:wiggle .5s ease;
}
.tags li:hover::before,.chips li:hover::before{opacity:.65;transform:scale(1.05)}
@keyframes wiggle{
  0%{rotate:0deg}25%{rotate:-5deg}55%{rotate:4deg}80%{rotate:-2deg}100%{rotate:0deg}
}

.about{padding:clamp(24px,4vw,40px);display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.about p{margin:0;color:var(--mute)}
.about h3{font-size:1.15rem;margin-bottom:10px}
.about>div{transition:filter .35s,opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1)}
.about>div:hover{transform:scale(1.03)}
/* Al pasar el ratón por una parte, las otras se desenfocan */
.about:has(>div:hover)>div:not(:hover){filter:blur(4px);opacity:.45}

/* Skills: el punto y el tinte de las etiquetas indican el grupo */
.skill{
  --spot:color-mix(in srgb,var(--k) 38%,rgba(255,255,255,.2));
  padding:22px;transition:transform .35s cubic-bezier(.3,1.3,.5,1);
  border-color:color-mix(in srgb,var(--k) 32%,var(--edge));
}
.skill:hover{transform:translateY(-4px)}
.skill h3{display:flex;align-items:center;gap:10px;font-size:1.1rem;margin-bottom:14px}

.tl{padding:clamp(22px,4vw,36px);display:grid;gap:24px}
.tl>div{position:relative;border-left:2px solid var(--edge);padding-left:20px;min-width:0;transition:border-color .3s,padding-left .3s}
.tl>div::before{
  content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--t2);box-shadow:0 0 0 0 var(--t2);transition:transform .3s,box-shadow .4s;
}
.tl>div:hover{border-color:var(--t2);padding-left:26px}
.tl>div:hover::before{transform:scale(1.3);box-shadow:0 0 14px 3px var(--t2)}
.tl h3{font-size:1.1rem}
.tl small{color:var(--mute)}
.tl p{margin:4px 0 0;color:var(--mute)}

.contact{text-align:center;padding:clamp(32px,6vw,64px)}
.contact p{color:var(--mute);max-width:46ch;margin:0 auto 26px}
.contact .btns{justify-content:center}
.contact .addr{margin:18px auto 0;font-weight:500;color:var(--ink);user-select:all;overflow-wrap:anywhere}

/* Pie */
footer{display:grid;justify-items:center;gap:14px;color:var(--mute);font-size:.88rem;padding:10px 16px 44px;text-align:center}
footer p{margin:0}

/* Logo del pie con ventana de cristal */
.sello{position:relative;display:grid;justify-items:center;margin-top:10px}
.sello-btn{
  --lw:64px;cursor:pointer;display:grid;place-items:center;padding:10px 14px;margin:0;border:0;border-radius:18px;background:none;
  color:var(--ink);font:inherit;appearance:none;-webkit-appearance:none;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1);
}
.sello-btn:hover,.sello-btn:focus-visible{transform:scale(1.08) rotate(-3deg)}
.pop{
  position:absolute;left:50%;bottom:calc(100% + 14px);z-index:8;width:max-content;min-width:200px;max-width:calc(100vw - 32px);
  padding:8px;border-radius:22px;display:grid;gap:2px;text-align:left;
  background:linear-gradient(135deg,color-mix(in srgb,var(--bg) 54%,transparent),color-mix(in srgb,var(--bg) 30%,transparent));
  backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  visibility:hidden;opacity:0;transform:translate(-50%,10px) scale(.94);transform-origin:bottom center;
  transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1),visibility 0s .4s;
}
/* Puente invisible para que el ratón pueda pasar del logo a la ventana */
.pop::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.sello.abierto .pop,
.sello:has(:focus-visible) .pop{visibility:visible;opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1),visibility 0s}
@media (hover:hover){
  .sello:hover .pop{visibility:visible;opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .25s,transform .4s cubic-bezier(.3,1.5,.5,1),visibility 0s}
}
.pop a{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;color:var(--ink);text-decoration:none;
  font-weight:500;font-size:.95rem;transition:background .2s,transform .25s;
}
.pop a svg{flex:none;transition:color .2s,transform .25s}
.pop a:hover,.pop a:focus-visible{background:rgba(255,255,255,.22);transform:translateX(3px)}
.pop a:hover svg,.pop a:focus-visible svg{color:var(--brand,var(--t2));transform:scale(1.15)}

:focus-visible{outline:2px solid var(--t2);outline-offset:3px}

/* Entrada de la presentación: una sola secuencia al cargar */
.in{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-text>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero-text h1{animation-delay:.15s}
.hero-text .lead{animation-delay:.3s}
.hero-text .btns{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}}

/* Móvil: menú hamburguesa */
@media (max-width:760px){
  .cabecera{grid-template-columns:1fr}
  .corner{grid-column:1}
  .corner .hamburguesa{display:grid}
  .menu{
    position:absolute;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 12px + 48px + 10px);
    justify-self:stretch;width:auto;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:24px;
    visibility:hidden;opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top center;
    transition:opacity .25s,transform .35s cubic-bezier(.3,1.3,.5,1),visibility 0s .35s;
  }
  .menu.menu--abierto{
    visibility:visible;opacity:1;transform:none;
    transition:opacity .25s,transform .35s cubic-bezier(.3,1.3,.5,1),visibility 0s;
  }
  .menu a{padding:14px 16px;font-size:1rem}
  .menu a:hover,.menu a:focus-visible{transform:translateX(4px)}
  .hero{padding-top:104px}
  .hero .card{grid-template-columns:minmax(0,1fr)}
  .foto{order:-1;max-width:200px}
}
/* Las animaciones de la presentación se pausan cuando ya no se ve (lo marca script.js) */
.hero.fuera .foto,.hero.fuera .foto::before,.hero.fuera h1 span{animation-play-state:paused}

/* Modo ligero: equipos modestos o "ahorro de datos". Mismo diseño, menos trabajo para la GPU */
html.lite .blobs i,html.lite .foto,html.lite .foto::before,html.lite h1 span{animation:none}
html.lite .glass,html.lite .pop{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}