/* =========================
   HOME — estilos específicos
   ========================= */

/* Espaciado vertical coherente entre bloques */
section { padding: clamp(80px, 12vh, 160px) 0; }
section:first-of-type { padding-top: clamp(8px, 2vh, 24px); }

/* =========================
   Div_01 — LOOP / CAROUSEL
   ========================= */
.loop-images{
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel-track{
 --left: -300rem;
  position: relative;
  min-width: calc(10rem * var(--total));
  height: 30rem;
  margin-top: -56px;
}

.carousel-item{
  position: absolute;
  width: 30rem;
  height: 30rem;
  left: 100%;
  display: flex;
  justify-content: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  animation: scroll-left var(--time) linear infinite;
  animation-delay: calc(var(--time) / var(--total) * (var(--i) - 1) - var(--time));
  will-change: left, transform;
  transition: transform .5s ease;
  cursor: pointer;
}

.carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  transform: rotateY(-45deg);
  transition: transform .5s ease, filter .35s ease, opacity .35s ease;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
          mask-image: linear-gradient(#000 72%, transparent 100%);
}

.carousel-item:hover img{
  transform: rotateY(0deg) translateY(-1rem);
}

@keyframes scroll-left{
  to { left: var(--left); }
}

/* Scroll hint (sube un poco) */
.scroll-down{
  position: absolute;
  bottom: clamp(64px, 12vh, 128px); /* antes: 24px */
  left: 0; right: 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  opacity: .7;
  user-select: none;
}

.scroll-down .arrow{ display:inline-block; animation: arrow 1.4s infinite; }
@keyframes arrow{
  0%{ transform: translateY(0); opacity:.6 }
  50%{ transform: translateY(6px); opacity:1 }
  100%{ transform: translateY(0); opacity:.6 }
}

/* =========================
   Div_02 — MINI ABOUT
   ========================= */
.mini-about .mini-about__inner{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 6vw, 72px);
  align-items: center;
}

.mini-about__photo{
  width: 100%;
  display: grid;
  place-items: center;
}

.mini-about__photo img{
  width: clamp(220px, 28vw, 420px);
  height: clamp(220px, 28vw, 420px);
  object-fit: cover;
  border-radius: 999px;
  outline: 2px solid var(--soft);
  outline-offset: 6px;
  transform: translateZ(0);
  transition: transform .45s ease, box-shadow .45s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
.mini-about__photo img:hover{
  transform: scale(1.02);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}

.mini-about__text h2{
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.1;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
}
.mini-about__text p{
  color: var(--muted);
  margin: 10px 0;
  max-width: 62ch;
}
.mini-about .btn{ margin-top: 18px; }

/* =========================
   Div_03 — SKILLS (Tarjetas fluidas, 4 ítems)
   ========================= */
.skills-module{padding:96px 24px 72px;display:flex;flex-direction:column;align-items:center}
.skills-module h2.fluid{--font-size-min:22;--font-level:4.25;margin:0 0 8px}
.skills-intro{margin:0 0 32px;color:var(--muted);text-align:center}

.skills-cards{
  display:grid; container-type:inline-size;
  grid-template-columns: 10fr 1fr 1fr 1fr; /* 4 */
  gap:8px; list-style:none; padding:0; margin:0;
  height: clamp(300px, 40dvh, 474px);
  width: 820px; max-width: calc(100% - 48px);
  transition: grid-template-columns .6s ease;
}

.skills-cards li{
  position:relative; overflow:hidden; min-width: clamp(48px,8cqi,80px);
  border-radius:12px; border:1px solid color-mix(in hsl, var(--text), transparent 70%);
  background: var(--page-bg);
}

.skills-cards article{
  --base: clamp(2rem, 8cqi, 80px);
  width: calc(var(--article-width, 320) * 1px);
  height:100%; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:1rem;
  padding-inline: calc(var(--base) * 0.5 - 9px); padding-bottom:1rem; overflow:hidden; font-family: monospace;
}
.skills-cards article h3{
  position:absolute; top:1rem; left: calc(var(--base) * 0.5);
  transform-origin:0 50%; rotate:90deg; font-size:1rem; font-weight:300; text-transform:uppercase;
}
.skills-cards article svg{ width:18px }
.skills-cards article p{ font-size:13px; line-height:1.25; color:var(--muted); opacity:.85 }
.skills-cards article a{ position:absolute; bottom:1rem; height:18px; line-height:1; }
.skills-cards article a span{ display:inline-block; line-height:18px; translate: calc(var(--base) * 0.5); font-weight:600 }
.skills-cards article img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  mask: radial-gradient(100% 100% at 100% 0, #fff, #0000);
  filter: grayscale(1) brightness(1.5); transform: scale(1.06); transition: filter .6s, transform .6s;
}

.skills-cards li :is(h3,svg){opacity:.6; transition:opacity .6s}
.skills-cards li :is(a,p){opacity:0; transition:opacity .6s}
.skills-cards li[data-active="true"] :is(a,p,h3,svg){opacity:1}
.skills-cards li[data-active="true"] article img{ filter:none; transform:none }

@media (max-width:900px){
  .skills-cards{ grid-template-columns: 10fr 2fr 2fr 2fr; height: min(420px, 60vh); }
}

/* ==== DIV_03 — Safety reset si el hover se queda “pegado” ==== */
.skills-cards:not(:hover) li[data-active="true"] :is(a,p){
  opacity: 0;
}
.skills-cards:not(:hover) li[data-active="true"] :is(h3,svg){
  opacity: .6;
}
.skills-cards:not(:hover) li[data-active="true"] article img{
  filter: grayscale(1) brightness(1.5);
  transform: scale(1.06);
}

/* ==== DIV_03 — Layout dinámico según tarjeta activa ==== */
.skills-cards:has(li:nth-child(1)[data-active]) { grid-template-columns: 10fr 1fr 1fr 1fr; }
.skills-cards:has(li:nth-child(2)[data-active]) { grid-template-columns: 1fr 10fr 1fr 1fr; }
.skills-cards:has(li:nth-child(3)[data-active]) { grid-template-columns: 1fr 1fr 10fr 1fr; }
.skills-cards:has(li:nth-child(4)[data-active]) { grid-template-columns: 1fr 1fr 1fr 10fr; }

/* Antipega hover (si te vas del bloque, no queda “enganchado”) */
.skills-cards:not(:hover) li[data-active="true"] :is(a,p){ opacity: 0; }
.skills-cards:not(:hover) li[data-active="true"] :is(h3,svg){ opacity: .6; }
.skills-cards:not(:hover) li[data-active="true"] article img{
  filter: grayscale(1) brightness(1.5);
  transform: scale(1.06);
}

/* ==== DIV_03 — Gradientes en vez de imágenes ==== */

/* 1) Oculta las imágenes originales de las tarjetas */
.skills-cards article img{
  display: none !important;
}

/* 2) Fondo por degradado radial (anclado en la esquina superior derecha) */
.skills-cards article::before{
  content: "";
  position: absolute;
  inset: 0;
  /* Radial desde la esquina superior derecha */
  background: radial-gradient(130% 130% at 100% 0%,
              var(--g1) 0%,
              var(--g2) 45%,
              var(--g3) 100%);
  transform: scale(1.06);
  filter: brightness(1.05);
  transition: transform .6s ease, filter .6s ease, opacity .6s ease;
  z-index: 0; /* el contenido (textos/íconos) queda encima */
}

/* 3) Estados: activa/inactiva (replican el comportamiento que tenías con <img>) */
.skills-cards li[data-active="true"] article::before{
  transform: none;
  filter: none;
}

.skills-cards:not(:hover) li[data-active="true"] article::before{
  /* Cuando sales del bloque, vuelve al estado “cerrado” para que no se quede enganchado */
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* 4) Paletas por tarjeta (puedes ajustar colores a tu gusto) */
.skills-cards li:nth-child(1){ /* BRAND SYSTEMS */
  --g1:#FFF6E0; /* luz cálida */
  --g2:#FFD39A; /* ámbar */
  --g3:#F59E0B; /* dorado intenso */
}
.skills-cards li:nth-child(2){ /* UX / UI */
  --g1:#E6F6FF; /* azul muy claro */
  --g2:#A5D8FF; /* azul medio */
  --g3:#3B82F6; /* azul fuerte */
}
.skills-cards li:nth-child(3){ /* MOTION & 3D */
  --g1:#FFE8F4; /* rosa lavado */
  --g2:#F5C2E7; /* magenta suave */
  --g3:#DB2777; /* fucsia intenso */
}
.skills-cards li:nth-child(4){ /* FRONT-END & PROTO */
  --g1:#E8FFF4; /* verde menta claro */
  --g2:#A7F3D0; /* verde medio */
  --g3:#10B981; /* verde intenso */
}

/* 5) Asegura jerarquía de capas para que el contenido quede visible */
.skills-cards article{
  position: absolute;
}
.skills-cards article > *{
  position: relative;
  z-index: 1; /* por encima del ::before */
}

/* ==== DIV_03 — Fondo con degradado en TODA la tarjeta ==== */

/* Seguimos ocultando las imágenes originales */
.skills-cards article img{
  display: none !important;
}

/* El degradado ahora vive en el <li> completo (cubre 100%) */
.skills-cards li::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  z-index:0;
  pointer-events:none;

  /* Radial desde la esquina superior derecha */
  background: radial-gradient(130% 130% at 100% 0%,
              var(--g1) 0%,
              var(--g2) 45%,
              var(--g3) 100%);

  transform: scale(1.06);
  filter: brightness(1.05);
  transition: transform .6s ease, filter .6s ease, opacity .6s ease;
}

/* Quitamos el pseudo del article para evitar solapes */
.skills-cards article::before{ content:none !important; }

/* Estado activo (hover/tap): “entra” el degradado */
.skills-cards li[data-active="true"]::before{
  transform: none;
  filter: none;
}

/* Al salir del bloque, que no se quede “enganchado” */
.skills-cards:not(:hover) li[data-active="true"]::before{
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Asegura que los textos/íconos queden por encima del fondo */
.skills-cards article > *{ position:relative; z-index:1; }

/* Paletas (las mismas que ya tenías; ajusta si quieres) */
.skills-cards li:nth-child(1){ --g1:#FFF6E0; --g2:#FFD39A; --g3:#F59E0B; }
.skills-cards li:nth-child(2){ --g1:#E6F6FF; --g2:#A5D8FF; --g3:#3B82F6; }
.skills-cards li:nth-child(3){ --g1:#FFE8F4; --g2:#F5C2E7; --g3:#DB2777; }
.skills-cards li:nth-child(4){ --g1:#E8FFF4; --g2:#A7F3D0; --g3:#10B981; }


/* =========================
   Div_04 — CTA CONTACTO
   ========================= */
.contact-cta{
  text-align: center;
}
.contact-cta__inner{
  max-width: 900px;
  margin: 0 auto;
}
.contact-cta h2{
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 10px 0;
}
.contact-cta p{
  color: var(--muted);
  margin: 0 0 22px 0;
}

/* =========================
   Div_05 — FOOTER simple + marquee
   ========================= */
.site-footer{ padding-top: 0; }
.footer-top{
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
}
.socials{
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0 24px;
}
.socials a{
  font-weight: 600;
  opacity: .9;
}
.socials a:hover{ opacity: 1; }

.marquee{
  overflow: hidden;
  border-top: 1px solid var(--soft);
  border-bottom: 1px solid var(--soft);
  margin-top: 18px;
}
.marquee__track{
  display: inline-flex;
  gap: 2rem;
  white-space: nowrap;
  padding: 16px 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 5.5vw, 64px);
  animation: marquee 22s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .mini-about .mini-about__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mini-about__photo img{ width: clamp(220px, 42vw, 360px); height: clamp(220px, 42vw, 360px); }
}

/* ===== DIV_03 — forzar tipografía en negro en las tarjetas ===== */
.skills-cards article { color:#111; }                       /* color base dentro de la tarjeta */
.skills-cards article h3 { color:#111; }                    /* título vertical */
.skills-cards article p { color:#111; opacity:1; }          /* descripción (quitamos gris) */
.skills-cards article a,
.skills-cards article a span { color:#111; }                /* CTA "See work" */

/* Iconos en negro (si son SVG) */
.skills-cards article svg { color:#111; }
.skills-cards article svg * { stroke: currentColor; fill: currentColor; }

/* Mantén la lógica de visibilidad por estados, solo quitamos el tinte gris en activo */
.skills-cards li[data-active="true"] :is(a,p,h3,svg){ opacity:1; }