/* =========================================================
   Webgallery · portada del portafolio.
   Fondo de manchas de color que no paran de moverse y encima
   todo en vidrio oscuro: así los ejemplos, que son de colores,
   resaltan sin pelearse con la página que los presenta.
   ========================================================= */
:root{
  --negro:   #05070A;
  --cian:    #0C9CCC;
  --azul:    #0A6FD8;
  --hondo:   #0B3CB4;
  --oxido:   #8E1710;
  --lumbre:  #BC3E10;
  --blanco:  #FFFFFF;
  --texto:   rgba(255,255,255,.84);
  --tenue:   rgba(255,255,255,.66);
  --linea:   rgba(255,255,255,.28);
  --vidrio:  rgba(8,12,19,.52);
  --f-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-texto:  "Inter", "Segoe UI", system-ui, sans-serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --max: 1180px;
  --pad: clamp(1.1rem, 4vw, 2.4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--negro); color:var(--texto);
  font-family:var(--f-texto); font-size:1.05rem; line-height:1.65; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ margin:0; font-family:var(--f-titulo); color:var(--blanco);
  line-height:1.04; letter-spacing:-.025em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem, 6vw, 4.3rem); font-weight:700; }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); font-weight:600; }
h3{ font-size:1.35rem; font-weight:600; }
p{ margin:0 0 1rem; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blanco); outline-offset:4px; border-radius:6px; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--angosto{ max-width:820px; }
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mini{ font-size:.86rem; }

/* ---------- El fondo ----------
   Cada mancha es un círculo de color que se desvanece antes del borde.
   Se mueven con transform, que es lo único que el navegador anima sin
   repintar toda la pantalla: por eso aguanta ir rápido sin trabarse.
   Duran entre 6.5 y 12 segundos, todas distintas y sin múltiplos entre
   sí, para que la vuelta no caiga siempre en la misma combinación.
   El óxido va chico y arrinconado, de acento. */
.aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--negro); }
.mancha{ position:absolute; display:block; width:95vmax; height:95vmax; border-radius:50%;
  filter:blur(30px); will-change:transform; opacity:.95; }
.mancha--cian{
  background:radial-gradient(circle at 50% 50%, var(--cian) 0%, rgba(12,156,204,.72) 48%, transparent 76%);
  top:-28vmax; right:-24vmax; animation:vaga-1 9.5s ease-in-out infinite alternate;
}
.mancha--azul{
  width:108vmax; height:108vmax;
  background:radial-gradient(circle at 50% 50%, var(--azul) 0%, rgba(10,111,216,.7) 50%, transparent 78%);
  top:-6vmax; left:-38vmax; animation:vaga-2 7.5s ease-in-out infinite alternate;
}
.mancha--hondo{
  width:110vmax; height:110vmax;
  background:radial-gradient(circle at 50% 50%, var(--hondo) 0%, rgba(11,60,180,.62) 46%, transparent 74%);
  bottom:-52vmax; left:-12vmax; animation:vaga-3 12s ease-in-out infinite alternate;
}
.mancha--oxido{
  width:72vmax; height:72vmax; opacity:.72;
  background:radial-gradient(circle at 50% 50%, var(--oxido) 0%, rgba(142,23,16,.6) 46%, transparent 74%);
  top:-34vmax; left:-14vmax; animation:vaga-4 8.5s ease-in-out infinite alternate;
}
.mancha--lumbre{
  width:56vmax; height:56vmax; opacity:.6;
  background:radial-gradient(circle at 50% 50%, var(--lumbre) 0%, rgba(188,62,16,.5) 42%, transparent 70%);
  bottom:-26vmax; right:-20vmax; animation:vaga-5 6.5s ease-in-out infinite alternate;
}
@keyframes vaga-1{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-14vmax,12vmax,0) scale(1.14); }
  100%{ transform:translate3d(-26vmax,4vmax,0) scale(.94); }
}
@keyframes vaga-2{
  0%{ transform:translate3d(0,0,0) scale(1.05); }
  50%{ transform:translate3d(18vmax,-10vmax,0) scale(.9); }
  100%{ transform:translate3d(30vmax,14vmax,0) scale(1.18); }
}
@keyframes vaga-3{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(16vmax,-14vmax,0) scale(1.1); }
  100%{ transform:translate3d(-10vmax,-4vmax,0) scale(.92); }
}
@keyframes vaga-4{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(24vmax,10vmax,0) scale(1.2); }
  100%{ transform:translate3d(6vmax,26vmax,0) scale(.88); }
}
@keyframes vaga-5{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-20vmax,-16vmax,0) scale(1.15); }
  100%{ transform:translate3d(-6vmax,-30vmax,0) scale(.95); }
}
/* Grano fino: sin él un degradado tan grande se ve a bandas. Y encima un
   velo oscuro, que es lo que deja legible el texto blanco cuando por abajo
   pasa el cian más claro. */
.grano{
  position:absolute; inset:-50%; display:block; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}
.aurora::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,10,.38) 0%, rgba(5,7,10,.26) 40%, rgba(5,7,10,.44) 100%);
}
@media (prefers-reduced-motion:reduce){ .mancha{ animation:none; } }

/* ---------- Entradas ---------- */
.js .aparece{ opacity:0; transform:translateY(18px); }
.js .aparece.visible{ opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion:reduce){
  .js .aparece{ opacity:1; transform:none; }
}

/* ---------- Piezas sueltas ---------- */
.sobre{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 1rem;
  font-weight:500; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tenue); }
.sobre .ico{ width:15px; height:15px; }
.seccion{ padding:clamp(3.2rem, 7vw, 5.5rem) 0; }
.sec-head{ max-width:660px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.sec-head__txt{ margin:1rem 0 0; color:var(--tenue); }

/* ---------- Botones ---------- */
.btn{
  --bg:transparent; --fg:var(--blanco); --bd:var(--linea); --bg-h:rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.8rem 1.5rem;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd); border-radius:999px;
  font-weight:500; font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:hover{ background:var(--bg-h); border-color:rgba(255,255,255,.6); }
.btn:active{ transform:translateY(1px); }
.btn--grande{ min-height:58px; padding:1rem 1.9rem; font-size:1.02rem; }
/* El blanco sólido es el que manda: sobre este fondo, nada resalta más. */
.btn--claro{ --bg:var(--blanco); --fg:#0A0D12; --bd:var(--blanco); --bg-h:rgba(255,255,255,.86); }
.btn--claro:hover{ border-color:rgba(255,255,255,.86); }
.btn .ico{ width:18px; height:18px; }
.btn--linea .ico[href$="i-wa"]{ fill:currentColor; }

/* ---------- Cabecera ---------- */
.cabecera{ position:sticky; top:0; z-index:100; background:rgba(5,7,10,.42);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12); }
.cabecera__inner{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }
.marca{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none;
  font-family:var(--f-titulo); font-weight:700; font-size:1.12rem; letter-spacing:-.02em;
  color:var(--blanco); }
/* El logo trae su propio fondo crema: se deja tal cual, en su recuadro,
   que es como está dibujado. Sobre lo oscuro funciona de pastilla. */
.marca__logo{ display:block; width:42px; height:42px; border-radius:11px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 8px 18px -10px rgba(0,0,0,.8); }
.marca__logo img{ width:100%; height:100%; }
.marca__txt{ letter-spacing:.005em; }
.nav{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
.nav a{ text-decoration:none; font-size:.9rem; letter-spacing:.06em; color:var(--tenue); }
.nav a:not(.btn):hover{ color:var(--blanco); }
.nav a.btn{ color:var(--fg); min-height:42px; padding:.5rem 1.15rem; font-size:.88rem; }
@media (max-width:620px){ .nav a:not(.btn){ display:none; } }

/* ---------- Hero ---------- */
.hero{ padding:clamp(3.4rem, 9vw, 7rem) 0 clamp(2.6rem, 5vw, 4rem); }
.hero .lede{ max-width:56ch; margin:1.5rem 0 2.2rem; font-size:1.13rem; color:var(--texto); }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__datos{ display:flex; flex-wrap:wrap; gap:.7rem 1.9rem; margin-top:2.6rem;
  font-size:.93rem; color:var(--tenue); }
.hero__datos li{ display:inline-flex; align-items:center; gap:.55rem; }
.hero__datos .ico{ width:17px; height:17px; color:var(--blanco); }
@media (max-width:560px){ .hero__acciones .btn{ width:100%; } }

/* ---------- Ejemplos ---------- */
.ejemplos{ display:grid; gap:clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.ejemplo{ background:var(--vidrio); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ejemplo:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.42);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85); }
.ejemplo__liga{ display:block; text-decoration:none; color:inherit; height:100%; }
.ejemplo__foto{ margin:0; aspect-ratio:16/10; overflow:hidden; background:#0A0D12;
  border-bottom:1px solid rgba(255,255,255,.12); }
.ejemplo__foto img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .5s ease; }
.ejemplo:hover .ejemplo__foto img{ transform:scale(1.03); }
.ejemplo__cuerpo{ padding:1.5rem 1.5rem 1.7rem; }
.ejemplo__giro{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:0 0 .5rem; padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tenue); }
.ejemplo__n{ font-size:.74rem; letter-spacing:.1em; color:rgba(255,255,255,.5); }
.ejemplo__que{ margin:.7rem 0 1.2rem; font-size:.97rem; color:var(--tenue); }
.ejemplo__ver{ display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:500; color:var(--blanco); }
.ejemplo__ver .ico{ width:17px; height:17px; transition:transform .25s ease; }
.ejemplo:hover .ejemplo__ver .ico{ transform:translateX(4px); }
.ejemplo--proximo{ display:grid; place-items:center; text-align:center;
  background:transparent; border-style:dashed; }
.ejemplo--proximo:hover{ transform:none; box-shadow:none; border-color:rgba(255,255,255,.3); }
.ejemplo--proximo .ejemplo__giro{ justify-content:center; gap:.7rem; }
.ejemplo__ver--apagado{ color:rgba(255,255,255,.45); }

/* ---------- Sobre mí ----------
   El logo hace de retrato: es una cabeza, así que en grande funciona
   como la foto que llevaría un portafolio. */
.yo{ display:grid; grid-template-columns:240px 1fr; gap:clamp(1.8rem, 4vw, 3.2rem);
  align-items:start; padding:clamp(1.6rem, 3.5vw, 2.8rem);
  background:var(--vidrio); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); }
.yo__logo{ display:block; border-radius:28px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 30px 60px -30px rgba(0,0,0,.9); }
.yo__logo img{ width:100%; height:auto; }
.yo__firma{ margin:1.1rem 0 0; font-family:var(--f-titulo); font-weight:600; font-size:1.08rem;
  letter-spacing:-.02em; color:var(--blanco); }
.yo__firma span{ display:block; margin-top:.15rem; font-family:var(--f-texto); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tenue); }
.yo__txt h2{ margin-bottom:1.3rem; }
.yo__txt p{ max-width:58ch; }
.yo__rotulo{ margin:2rem 0 .9rem; font-size:.76rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tenue); }
.yo__notas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.yo__notas li{ padding:.42rem .95rem; border:1px solid rgba(255,255,255,.26); border-radius:999px;
  font-size:.82rem; color:var(--tenue); }
@media (max-width:480px){
  /* Con el tamaño normal el nombre parte en tres renglones y el de en
     medio queda suelto; achicándolo tantito entra en dos. */
  .yo__txt h2{ font-size:1.62rem; }
}
@media (max-width:780px){
  .yo{ grid-template-columns:1fr; }
  .yo__quien{ display:flex; align-items:center; gap:1.1rem; }
  .yo__logo{ width:104px; flex:none; border-radius:20px; }
  .yo__firma{ margin:0; }
}

/* ---------- Qué incluye ----------
   Lista de renglones con línea fina y número a la derecha: cabe mucho
   sin que se vea cargado, y se lee de corrido. */
.incluye li{ display:flex; align-items:flex-start; gap:1.2rem;
  padding:1.15rem .4rem; border-bottom:1px solid rgba(255,255,255,.16);
  font-size:.99rem; color:var(--tenue);
  transition:background .25s ease, padding .25s ease, border-color .25s ease; }
.incluye li:first-child{ border-top:1px solid rgba(255,255,255,.16); }
.incluye li > div{ flex:1; }   /* si no, el número se pega al texto */
.incluye li:hover{ background:rgba(255,255,255,.06); padding-left:.9rem;
  border-color:rgba(255,255,255,.4); }
.incluye strong{ display:block; font-weight:600; color:var(--blanco); }
.incluye__n{ flex:none; font-size:.75rem; letter-spacing:.1em; color:rgba(255,255,255,.45);
  padding-top:.25rem; }

/* ---------- Pasos ---------- */
.pasos{ display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.pasos li{ background:var(--vidrio); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md); padding:1.8rem 1.5rem; }
.paso__n{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:1.1rem;
  border-radius:50%; border:1px solid var(--linea); color:var(--blanco);
  font-family:var(--f-titulo); font-weight:600; font-size:1.05rem; }
.pasos h3{ margin-bottom:.5rem; }
.pasos p{ margin:0; font-size:.97rem; color:var(--tenue); }

/* ---------- Cierre ---------- */
.seccion--cierre{ padding-bottom:clamp(3.5rem,8vw,6rem); }
.cierre__inner{ display:flex; flex-wrap:wrap; gap:1.8rem; align-items:center;
  justify-content:space-between; padding:clamp(1.8rem,4vw,3rem);
  background:var(--vidrio); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); }
.cierre__inner p{ margin:.8rem 0 0; max-width:46ch; color:var(--tenue); }
@media (max-width:560px){ .seccion--cierre .btn{ width:100%; } }

/* ---------- Pie ---------- */
.pie{ padding:0 0 3rem; text-align:center; color:var(--tenue); }
.pie__inner{ border-top:1px solid rgba(255,255,255,.14); padding-top:2rem; }
.pie p{ margin:0 0 .35rem; }
.pie .mini{ color:rgba(255,255,255,.5); }