/* ============================================================
   Bento — sección de proyectos destacados (rediseño)
   Hereda tokens del sitio (Poppins, colores de marca, radios).
   ============================================================ */

/* Fondo blanco para los títulos sticky de sección y del bloque de detalles */
.h2:not(.none-sticky) {
  background-color: #ffffff;
  z-index: 10;
}

/* Imagen principal de hero en páginas de detalle de proyecto */
.hero-cover-img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  display: block;
}

:root {
  --bento-gap: 20px;
  --bento-radius: 20px;
  --bento-accent: var(--blue);
}

#Projectslist {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 80px 120px !important;
  font-family: var(--_type-weight---font-family);
  overflow-x: hidden;
}

/* Listing pages: clear the fixed header (más específico que #Projectslist) */
#Projectslist.masonry-section {
  padding: 150px 80px 120px !important;
}

/* ---------- Encabezado de la sección ---------- */
.bento-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.bento-head__left { display: flex; flex-direction: column; gap: 6px; }
.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--subtitle);
}
.bento-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}
.bento-h {
  margin: 0;
  font-family: var(--_type-weight---font-family);
  font-size: 44px;
  line-height: 1.04;
  font-weight: 300;
  color: var(--title);
}
.bento-h b { font-weight: 600; }
.bento-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--subtitle);
  white-space: nowrap;
  padding-bottom: 6px;
}
.bento-count b { color: var(--title); font-weight: 600; }

/* ---------- Grid base ---------- */
.bento-grid {
  display: grid;
  gap: var(--bento-gap);
  grid-auto-flow: dense;
  min-height: 56vh;
}

/* ---------- Tarjeta ---------- */
.bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bento-radius);
  background: #0f1c2c;
  text-decoration: none;
  min-height: 240px;
  transform: translateY(80px) scale(0.96);
  opacity: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1),
              opacity .7s cubic-bezier(.16,1,.3,1),
              box-shadow .35s ease;
  box-shadow: 0 1px 2px rgba(16,28,44,.06);
  will-change: transform, opacity;
}
/* Dispara la revelación reutilizando tal cual la transition .7s
   cubic-bezier(.16,1,.3,1) de la regla base .bento-card de arriba —
   no la redefine, así el movimiento/easing es exactamente el mismo
   que antes, solo más rápido. bento.js la agrega con un delay
   escalonado por card al cargar la página en vez de esperar a que
   entre por scroll. !important porque las reglas de posición inicial
   .bento-card:not(.is-in)[data-anim-dir] (más abajo) tienen mayor
   especificidad y, mientras .is-in no esté presente, seguirían
   ganando y anulando esta transición sin él. */
.bento-card.is-triggered {
  transform: none !important;
  opacity: 1 !important;
}
.bento-card.is-in {
  transform: none;
  opacity: 1;
  /* Transición rápida spring para hover — override de la .7s de arriba,
     ya con la card revelada (ver bento.js: se agrega después de que
     termina la transición de entrada, sin salto porque el estado final
     es idéntico) */
  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .35s ease;
}
.bento-card:hover {
  box-shadow: 0 26px 60px -18px rgba(16,28,44,.45);
}
.bento-card.is-in:hover {
  transform: scale(1.04) rotateZ(-1.5deg);
  box-shadow: 0 32px 72px -16px rgba(16,28,44,.52);
}

/* media (video + poster) */
.bento-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bento-media video,
.bento-media .bento-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.bento-card:hover .bento-media video,
.bento-card:hover .bento-poster {
  transform: scale(1.06);
}
.bento-poster {
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.10), transparent 55%),
    var(--bento-accent);
}

/* veladura para legibilidad del texto */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(10,18,30,0) 30%,
      rgba(10,18,30,.18) 52%,
      rgba(10,18,30,.78) 100%);
  pointer-events: none;
  transition: background .35s ease;
}
.bento-card:hover::after {
  background: linear-gradient(180deg,
      rgba(10,18,30,.05) 22%,
      rgba(10,18,30,.30) 55%,
      rgba(10,18,30,.82) 100%);
}

/* contenido */
.bento-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  pointer-events: none;
}
.bento-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.bento-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
}
.bento-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.bento-title {
  margin: 0;
  color: #fff;
  font-family: var(--_type-weight---font-family);
  font-weight: 550;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -.01em;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.bento-sub {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.72);
  max-width: 32ch;
  opacity: 0;
  max-height: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, max-height .4s ease;
}
.bento-card:hover .bento-sub { opacity: 1; transform: translateY(0); max-height: 60px; }

.bento-arrow {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--bento-accent);
  display: grid;
  place-items: center;
  transform: rotate(-32deg) scale(.86);
  opacity: .92;
  transition: transform .45s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.bento-card:hover .bento-arrow {
  transform: rotate(0deg) scale(1);
  background: var(--yellow);
  color: var(--title);
}
.bento-arrow svg { width: 26px; height: 26px; }

/* bento-arrow dentro de botones del hero — color por botón */
.hero.design-prod .bento-arrow        { background: #d2c8fa; color: #4c3b90; }
.hero.about-me-button .bento-arrow    { background: #3e4f5f; color: #dae7f2; }
.hero._3d .bento-arrow                { background: #c1f2ec; color: #4c8b84; }
.hero.graphic .bento-arrow            { background: #c2dbf2; color: #23486a; }
.hero.contacto.button .bento-arrow    { background: #23486a; color: #dae7f2; }
.hero.button.scroll .bento-arrow      { background: #3e4f5f; color: #eef0f2; }

/* hover: deshacer rotación */
.hero.design-prod:hover .bento-arrow,
.hero.about-me-button:hover .bento-arrow,
.hero._3d:hover .bento-arrow,
.hero.graphic:hover .bento-arrow,
.hero.contacto.button:hover .bento-arrow,
.hero.button.scroll:hover .bento-arrow { transform: rotate(0deg) scale(1); }

/* acento por tarjeta */
.bento-card[data-accent="blue"]   { --bento-accent: var(--blue); }
.bento-card[data-accent="purple"] { --bento-accent: var(--purple); }
.bento-card[data-accent="green"]  { --bento-accent: var(--green); }

/* barra de acento superior animada */
.bento-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px; width: 100%;
  background: var(--bento-accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 3;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.bento-card:hover::before { transform: scaleX(1); }

/* =====================================================
   VARIACIONES
   ===================================================== */

/* ---- A · Asimétrico: escalonado con aire (default) ---- */
#Projectslist[data-variant="a"] .bento-grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 12vh);
}
#Projectslist[data-variant="a"] .bento-card { min-height: 0; }
#Projectslist[data-variant="a"] .bento-card:nth-child(1) {
  grid-column: 1 / 6;
  grid-row: 1 / 6;
  align-self: center;
  height: 46vh;
}
#Projectslist[data-variant="a"] .bento-card:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 3; }
#Projectslist[data-variant="a"] .bento-card:nth-child(3) { grid-column: 6 / 10; grid-row: 3 / 6; }
#Projectslist[data-variant="a"] .bento-card:nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 5; margin-right: 6%; }
#Projectslist[data-variant="a"] .bento-card:nth-child(1) .bento-title { font-size: 40px; }

/* ---- B · Escalonado: pinwheel asimétrico con inset ---- */
#Projectslist[data-variant="b"] .bento-grid {
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
}
#Projectslist[data-variant="b"] .bento-card:nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 2; }
#Projectslist[data-variant="b"] .bento-card:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; margin-top: 7%; }
#Projectslist[data-variant="b"] .bento-card:nth-child(3) { grid-column: 1 / 5;  grid-row: 2 / 3; }
#Projectslist[data-variant="b"] .bento-card:nth-child(4) { grid-column: 5 / 8;  grid-row: 2 / 3; margin-bottom: 8%; }
#Projectslist[data-variant="b"] .bento-card:nth-child(2) .bento-title { font-size: 34px; }

/* ---- C · Editorial: destacado ancho arriba + 3 iguales abajo ---- */
#Projectslist[data-variant="c"] .bento-grid {
  grid-template-columns: repeat(3, 1fr);
}
#Projectslist[data-variant="c"] .bento-card:nth-child(1) {
  grid-column: 1 / 4;
  min-height: 34vh;
}
#Projectslist[data-variant="c"] .bento-card:nth-child(1) .bento-title { font-size: 42px; }
#Projectslist[data-variant="c"] .bento-card:nth-child(n+2) { min-height: 24vh; }

/* ---------- Tarjeta-botón (CTA) ---------- */
.bento-cta {
  background: #4c3b90;
}
.bento-cta::after { display: none; }
.bento-cta .bento-body { padding: 24px; }
.bento-cta .bento-badge {
  border-color: rgba(210,200,250,.35);
  background: rgba(210,200,250,.08);
}
.bento-cta .bento-title { font-size: 24px; max-width: 14ch; color: #d2c8fa; }
.bento-cta .bento-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.bento-cta .bento-arrow {
  width: 46px; height: 46px;
  background: #d2c8fa;
  color: #4c3b90;
  transform: rotate(0deg) scale(1);
  opacity: 1;
}
.bento-cta:hover { background: #261e48; }
.bento-cta:hover .bento-arrow { transform: translate(4px, -4px) scale(1.05); }
.bento-cta::before { background: #d2c8fa; }

/* gradiente decorativo en tono púrpura */
.bento-cta .bento-media { opacity: .45; }
.bento-cta .bento-poster {
  background:
    radial-gradient(circle at 85% 20%, rgba(162,140,255,.45), transparent 40%),
    radial-gradient(circle at 15% 90%, rgba(100,80,200,.30), transparent 45%);
}
.bento-cta video { display: none; }

/* =====================================================
   Responsive
   ===================================================== */
@media screen and (max-width: 880px) {
  #Projectslist { padding: 32px 24px 80px !important; }
  #Projectslist.masonry-section { padding: 120px 24px 80px !important; }
  .bento-h { font-size: 34px; }
  #Projectslist[data-variant] .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    min-height: 0;
  }
  #Projectslist[data-variant] .bento-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 260px !important;
    margin: 0 !important;
  }
  #Projectslist[data-variant="a"] .bento-card:nth-child(1),
  #Projectslist[data-variant="b"] .bento-card:nth-child(1),
  #Projectslist[data-variant="c"] .bento-card:nth-child(1),
  #Projectslist[data-variant] .bento-card:nth-child(3),
  #Projectslist[data-variant] .bento-cta {
    grid-column: 1 / 3 !important;
    min-height: 300px !important;
  }
  /* Texto e iconos — tablet */
  .bento-card .bento-arrow,
  .bento-cta  .bento-arrow  { width: 40px; height: 40px; }
  .bento-card .bento-arrow svg,
  .bento-cta  .bento-arrow svg { width: 20px; height: 20px; }
  .bento-title              { font-size: 22px; }
  .bento-body               { padding: 16px; }
}

@media screen and (max-width: 560px) {
  #Projectslist { padding: 24px 16px 64px !important; }
  #Projectslist.masonry-section { padding: 110px 16px 64px !important; }
  .bento-head { flex-direction: column; align-items: flex-start; }
  .bento-h { font-size: 30px; }
  .bento-grid { grid-template-columns: 1fr !important; min-height: 0; }
  #Projectslist .bento-card,
  #Projectslist[data-variant="a"] .bento-card:nth-child(1),
  #Projectslist[data-variant="c"] .bento-card:nth-child(1) {
    grid-column: 1 / 2 !important;
    min-height: 300px;
  }
  /* Texto e iconos — mobile */
  .bento-card .bento-arrow,
  .bento-cta  .bento-arrow  { width: 36px; height: 36px; }
  .bento-card .bento-arrow svg,
  .bento-cta  .bento-arrow svg { width: 18px; height: 18px; }
  .bento-title              { font-size: 20px; }
  .bento-body               { padding: 14px; }
  /* Títulos grandes de tarjetas destacadas */
  #Projectslist[data-variant="a"] .bento-card:nth-child(1) .bento-title,
  #Projectslist[data-variant="b"] .bento-card:nth-child(2) .bento-title,
  #Projectslist[data-variant="c"] .bento-card:nth-child(1) .bento-title { font-size: 26px; }
}

@media screen and (max-width: 479px) {
  /* Texto e iconos — mobile pequeño */
  .bento-card .bento-arrow,
  .bento-cta  .bento-arrow  { width: 32px !important; height: 32px !important; }
  .bento-card .bento-arrow svg,
  .bento-cta  .bento-arrow svg { width: 16px !important; height: 16px !important; }
  .bento-title              { font-size: 18px !important; }
  .bento-body               { padding: 12px !important; }
  /* Títulos grandes → cap a 22px */
  #Projectslist[data-variant="a"] .bento-card:nth-child(1) .bento-title,
  #Projectslist[data-variant="b"] .bento-card:nth-child(2) .bento-title,
  #Projectslist[data-variant="c"] .bento-card:nth-child(1) .bento-title { font-size: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card { transition: box-shadow .35s ease; transform: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────
   Header — ajustes
   ───────────────────────────────────────────────────── */

/* 80% de ancho centrado. Aplica a todos los breakpoints y
   reemplaza la combinación 95vw + 5% de margen / 0%+10px del CSS de Webflow. */
.header {
  width: 80vw !important;
  top:   0    !important;
  left:  10vw !important;
  right: 10vw !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Efecto flotante → pegado al hacer scroll.
   El espacio superior "flotante" es el margin-top: var(--_type-size---menu-sup)
   ya definido en test-8f6a83.webflow.css (.header); esa misma regla ya trae
   transition: all .2s, así que solo hace falta sumar/quitar esta clase
   (ver js/header.js) — la transición ya existe, no se duplica aquí. */
.header.is-scrolled {
  margin-top: 0;
}

/* Logo del header: siempre visible en todas las páginas.
   En páginas con data-wf-page, Webflow IX pone .hero en opacity:0
   y no lo restaura fuera del home. !important en stylesheet
   gana sobre el inline style que IX inyecta. */
.header .hero.home-button.menu {
  opacity: 1 !important;
}

/* Botón "¡Contáctame!": hover con crecimiento además del cambio de color
   (antes no tenía ningún estado hover). */
.header .button.w-button {
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.header .button.w-button:hover {
  background-color: var(--yellow);
  color: var(--gray);
  transform: scale(1.08);
}

/* En mobile (≤991px) el header usa display:flex.
   Ajustes para que el logo y el botón queden dentro. */
@media screen and (max-width: 991px) {
  .header {
    width: 92vw !important;
    left:  4vw  !important;
    right: 4vw  !important;
    display: flex !important;
    align-items: center !important;
    padding-left:  12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Logo amarillo — float:left de Webflow se ignora en flex;
     tamaño explícito para que no colapse.
     opacity:1 !important: en páginas con data-wf-page Webflow IX pone
     todos los .hero en opacity:0 como estado inicial y no los restaura
     fuera del home — !important en stylesheet prevalece sobre inline. */
  .header .w-nav-brand,
  .header .hero.home-button.menu {
    float: none !important;
    flex-shrink: 0 !important;
    width:  46px !important;
    height: 46px !important;
    min-width:  46px !important;
    min-height: 46px !important;
    display: block !important;
    background-color: var(--yellow) !important;
    opacity: 1 !important;
  }

  /* Botón hamburger — float:right también se ignora en flex;
     tamaño contenido para que no desborde */
  .menu-button.w-nav-button {
    float: none !important;
    flex-shrink: 0 !important;
    width:  44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Menú desplegable: Webflow fija height:40vw (~150px en iPhone)
     lo que corta los 4 ítems de navegación. height:auto deja que
     el overlay de Webflow calcule la altura correcta al abrir. */
  .nav-menu.w-nav-menu {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────
   Hero section — mobile adjustments
   ───────────────────────────────────────────────────── */

/* Tablet (≤991px): iconos más pequeños + clip overflow de animación IX.
   Webflow IX posiciona los botones en translateX(±440px) antes de
   traerlos al centro; en mobile hero-anim.js no corre, así que sin
   overflow:hidden ese offset temporal crea scroll horizontal. */
@media screen and (max-width: 991px) {
  .hero .bento-arrow       { width: 40px; height: 40px; }
  .hero .bento-arrow svg   { width: 20px; height: 20px; }
  section.main-hero        { overflow: hidden; }

  /* .hero.space es un espaciador puramente decorativo (fondo gris claro,
     sin contenido) que en desktop da aire junto a "Acerca de mí"/"3D
     Projects". test-8f6a83.webflow.css ya oculta a .space.transparent
     en este mismo breakpoint, pero nunca hace lo mismo con .hero.space,
     así que quedaba como un rectángulo gris vacío sin propósito en
     mobile. */
  .hero.space { display: none !important; }
}

/* Mobile (≤479px) */
@media screen and (max-width: 479px) {
  /* Iconos más compactos — 52 px → 32 px */
  .hero .bento-arrow       { width: 32px !important; height: 32px !important; }
  .hero .bento-arrow svg   { width: 16px !important; height: 16px !important; }

  /* Logo amarillo: tamaño explícito para no depender de la cadena
     height:% del padre (que puede colapsar a 0 en ciertos contextos) */
  .hero.home-button {
    width:  56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
  }

  /* Reducir padding en botones pequeños para que texto + icono no se corten */
  .hero.about-me-button    { padding: 8px !important; }
  .hero._3d                { padding: 8px !important; }
  .hero.design-prod        { padding: 8px !important; }
  .hero.graphic            { padding: 8px !important; }
  .hero.contacto.button    { padding: 8px !important; }
}

@media print {
  .bento-card { transform: none !important; opacity: 1 !important; }
}

/* =====================================================
   Animación snap-in — posiciones de inicio por dirección
   Usa :not(.is-in) para que las reglas dejen de aplicar
   en cuanto JS añade la clase, sin necesidad de !important
   ni de superar la especificidad de .bento-card.is-in.
   ===================================================== */

/* Posiciones de inicio (pre-entrada) — deben coincidir exactamente
   con los OFFSETS de bento.js para que CSS y JS arranquen igual     */

.bento-card:not(.is-in)[data-anim-dir="left"] {
  transform: translateX(-80px) scale(0.96);
  opacity: 0;
}

.bento-card:not(.is-in)[data-anim-dir="up"] {
  transform: translateY(-80px) scale(0.96);
  opacity: 0;
}

.bento-card:not(.is-in)[data-anim-dir="down"] {
  transform: translateY(80px) scale(0.96);
  opacity: 0;
}

.bento-card:not(.is-in)[data-anim-dir="right"] {
  transform: translateX(80px) scale(0.96);
  opacity: 0;
}

/* =====================================================
   MASONRY — páginas de categoría
   Grid: 6 cols × auto-rows 80px, gap 16px.
   Cada tarjeta recibe grid-column/grid-row como inline style.
   ===================================================== */

.masonry-section {
  padding: 200px 80px 120px;
  box-sizing: border-box;
}

/* --- Encabezado de sección --- */
.masonry-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.masonry-head__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.masonry-h {
  margin: 0;
  font-family: var(--_type-weight---font-family);
  font-size: 44px;
  line-height: 1.04;
  font-weight: 300;
  color: var(--title);
}
.masonry-h b { font-weight: 600; }
.masonry-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--subtitle);
  white-space: nowrap;
  padding-bottom: 6px;
}
.masonry-count b { color: var(--title); font-weight: 600; }

/* --- Grid --- */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
  gap: 16px;
  overflow: hidden;
  overflow: clip;
}

/* Acento amarillo (Graphic Design) */
.bento-card[data-accent="yellow"] { --bento-accent: var(--yellow); }

/* ── Tarjetas modo claro (páginas de listado) ────────────────── */
#Projectslist[data-theme="light"] .bento-card {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(28,47,64,.08);
}
#Projectslist[data-theme="light"] .bento-poster {
  background: #eef0f2;
}
#Projectslist[data-theme="light"] .masonry-grid,
#Projectslist[data-theme="light"] .bento-grid {
  overflow: visible;
}
#Projectslist[data-theme="light"] .bento-card::after {
  display: none;
}
/* :not([data-view="list"]) en las 3 reglas de hover de acá abajo: en
   modo lista (ver toggle mosaico/lista) las tarjetas no tienen imagen
   de fondo detrás del texto, así que ni el degradado ni la inversión de
   color de texto deben activarse ahí — y como :hover suma especificidad,
   sin el :not() esta regla le ganaría igual a la de list-view que apaga
   el ::after, mostrando una barra oscura de fondo sobre la fila. */
#Projectslist[data-theme="light"]:not([data-view="list"]) .bento-card:hover::after {
  display: block;
  background: linear-gradient(180deg,
    rgba(10,18,30,0) 30%,
    rgba(10,18,30,.55) 62%,
    rgba(10,18,30,.92) 100%);
}
#Projectslist[data-theme="light"] .bento-title { color: #1c2f40; }
#Projectslist[data-theme="light"] .bento-sub   { color: #8093a4; }
/* En hover el degradado pasa de blanco a oscuro, así que el texto
   también invierte a blanco para seguir siendo legible encima. */
#Projectslist[data-theme="light"]:not([data-view="list"]) .bento-card:hover .bento-title { color: #ffffff; }
#Projectslist[data-theme="light"]:not([data-view="list"]) .bento-card:hover .bento-sub   { color: rgba(255,255,255,.82); }

/* Tarjetas con thumbnail oscuro donde el título navy por defecto no se
   lee bien en estado normal (sin hover) — fuerza blanco también fuera
   de hover. Solo en mosaico: en modo lista el texto va sobre fondo
   blanco liso, sin imagen detrás, así que ahí debe quedarse el navy
   default. */
#Projectslist[data-theme="light"]:not([data-view="list"]) .bento-card.bento-title-light .bento-title { color: #ffffff; }
#Projectslist[data-theme="light"]:not([data-view="list"]) .bento-card.bento-title-light .bento-sub   { color: rgba(255,255,255,.82); }
#Projectslist[data-theme="light"] .bento-badge {
  border-color: rgba(28,47,64,.20);
  color: #1c2f40;
  background: rgba(28,47,64,.05);
}
#Projectslist[data-theme="light"] .bento-arrow {
  background: #1c2f40;
  color: #ffffff;
}
#Projectslist[data-theme="light"] .bento-card:hover .bento-arrow {
  background: var(--yellow);
}

/* --- Responsive masonry --- */
@media screen and (max-width: 880px) {
  .masonry-section { padding: 120px 24px 80px; }
  .masonry-h { font-size: 34px; }
  .masonry-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 14px;
  }
  .masonry-grid .bento-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 220px;
    height: 240px;
  }
  .masonry-grid .bento-cta {
    grid-column: 1 / 3 !important;
    min-height: 200px !important;
    height: auto !important;
  }
}

@media screen and (max-width: 560px) {
  .masonry-section { padding: 110px 16px 64px; }
  .masonry-h { font-size: 30px; }
  .masonry-head { flex-direction: column; align-items: flex-start; }
  .masonry-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 12px;
  }
  .masonry-grid .bento-card {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px;
    height: 220px;
  }
  .masonry-grid .bento-cta {
    grid-column: 1 / 3 !important;
    min-height: 180px !important;
    height: auto !important;
  }
}

@media screen and (max-width: 479px) {
  .masonry-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .masonry-grid .bento-card,
  .masonry-grid .bento-cta {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    min-height: 200px;
    height: 240px;
  }
}

/* ---------- Vista de lista (toggle mosaico/lista en páginas de listado) ----------
   Todo vía atributo de estado en el <section>, mismo patrón ya usado por
   data-theme/data-hover-video: #Projectslist[data-view="list"]. Reestructura
   .bento-card de tile-con-imagen-de-fondo-y-texto-superpuesto a fila flex
   con imagen fija a la izquierda y texto en flujo normal a la derecha —
   no se toca ningún color de los ya definidos por data-theme="light". */
.masonry-head__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(28, 47, 64, 0.14);
  border-radius: 40px;
  background: #fff;
}
.view-toggle-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--subtitle);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.view-toggle-btn svg { width: 16px; height: 16px; }
.view-toggle-btn[aria-pressed="true"] { background: #1c2f40; color: #fff; }
.view-toggle-btn:not([aria-pressed="true"]):hover { background: rgba(28, 47, 64, 0.06); }

/* Grid a columna única; !important neutraliza el grid-column/row inline
   que trae cada tarjeta (necesario para el mosaico), igual que ya hacen
   los breakpoints ≤880/560/479px de arriba para el propio modo mosaico. */
#Projectslist[data-view="list"] .masonry-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 12px;
}
#Projectslist[data-view="list"] .bento-card {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}
#Projectslist[data-view="list"] .bento-card:hover,
#Projectslist[data-view="list"] .bento-card.is-in:hover { transform: none; }
#Projectslist[data-view="list"] .bento-card::after { display: none; }

/* Imagen: de fondo absoluto a caja fija a la izquierda */
#Projectslist[data-view="list"] .bento-media {
  position: relative;
  inset: auto;
  flex: 0 0 240px;
  aspect-ratio: 4 / 3;
}
#Projectslist[data-view="list"] .bento-media video,
#Projectslist[data-view="list"] .bento-media .bento-poster { position: absolute; inset: 0; }

/* Texto: de overlay a flujo normal, descripción siempre visible (ya no
   depende de :hover) */
#Projectslist[data-view="list"] .bento-body {
  height: auto;
  flex: 1 1 auto;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
}
#Projectslist[data-view="list"] .bento-top { justify-content: flex-start; }
#Projectslist[data-view="list"] .bento-bottom { align-items: center; }
#Projectslist[data-view="list"] .bento-sub {
  opacity: 1;
  max-height: none;
  transform: none;
}
#Projectslist[data-view="list"] .bento-cta .bento-bottom { flex-direction: row; align-items: center; }

@media screen and (max-width: 560px) {
  #Projectslist[data-view="list"] .bento-media { flex-basis: 110px; }
  #Projectslist[data-view="list"] .bento-body { padding: 14px 16px; }
}

/* ---------- Flechas de carrusel (.div-slider) ----------
   Antes vivía duplicado idéntico en el <style> de cada página de
   proyecto que usa carrusel; se centraliza acá para que las páginas
   nuevas lo hereden automáticamente y no queden inconsistentes. */
.left-arrow.w-slider-arrow-left,
.right-arrow.w-slider-arrow-right {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  transition: background 0.25s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.left-arrow.w-slider-arrow-left:hover,
.right-arrow.w-slider-arrow-right:hover { background: rgba(0,0,0,0.70); }
.icon-3.w-icon-slider-left,
.w-icon-slider-right {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  color: #ffffff;
  font-size: 20px;
}
@media (max-width: 479px) {
  .left-arrow.w-slider-arrow-left,
  .right-arrow.w-slider-arrow-right { width: 36px; height: 36px; }
}

/* ---------- Grids e imágenes de proyecto ----------
   Antes vivía duplicado en el <style> de cada página de proyecto
   (algunas con las 4 clases, otras solo con las que usaban); se
   centraliza acá completo para que cualquier página, nueva o vieja,
   tenga las 5 disponibles sin tener que acordarse de copiarlas. */
.project-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.project-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.project-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.project-img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
  object-fit: cover;
}
.project-img-full {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
  margin: 28px 0;
}
@media (max-width: 767px) {
  .project-grid-3,
  .project-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .project-grid-3,
  .project-grid-4,
  .project-grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Grid de 4 columnas que NO colapsa en mobile ----------
   Para filas de fotos/íconos cuadrados (ej. perfiles de usuario) donde
   se quieren ver las 4 alineadas horizontalmente siempre, incluso en
   pantallas angostas, a diferencia de .project-grid-4 que sí colapsa. */
.project-grid-4-fixed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 28px 0;
}
@media (max-width: 479px) {
  .project-grid-4-fixed { gap: 8px; }
}

/* ---------- Hero: imagen ancha del proyecto ---------- */
.hero-entry-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(28, 47, 64, 0.14);
  overflow: hidden;
}
/* Hero más ancho que el resto del contenido (940px), sin llegar a
   full-bleed — sigue centrado en la página. margin-top:0 acorta el
   espacio entre el bloque de título y la imagen del hero (de 80px a
   los 40px del margin-bottom del bloque de título — no se toca ese
   lado para no perder aire respecto al header). */
.hero-media {
  max-width: 1200px;
  margin-top: 0;
}

/* ---------- Mismo redondeo (12px) en todo el contenido de proyecto:
   imágenes (.project-img/-full), hero (arriba) y carruseles. El
   redondeo de estos últimos vive en .w-slider-mask (el elemento que
   realmente recorta vía overflow:hidden) — .slider por sí solo no
   recorta nada, así que ponerle radio a .slider no tenía efecto visual. */
.w-slider-mask {
  border-radius: 24px;
}

/* ---------- Scroll fade-in (.fade-up) ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--stagger-delay, 0s);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Botón de replay (js/video-replay.js) ----------
   Antes vivía duplicado en el <style> de cada página con video; se
   centraliza acá igual que el resto. Mismo look que las flechas de
   carrusel/lightbox (44px, circular, fondo oscuro translúcido con blur). */
.video-replay-wrap {
  position: relative;
}
.video-replay-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.video-replay-btn svg {
  width: 20px;
  height: 20px;
}
.video-replay-btn[hidden] {
  display: none;
}

/* ---------- Mosaico de proyectos (una imagen + caption por proyecto) ----------
   Usado por la plantilla "Mosaico" (templates/plantilla-mosaico.html) para
   listados donde cada proyecto es solo una imagen con una explicación breve
   (ej. Proyectos de Modelado 3D). Se usa columns (CSS multi-columna) en vez
   del grid-column/row manual de las páginas de listado — así cada ítem nuevo
   simplemente se agrega al final, sin calcular coordenadas de grid a mano. */
.project-mosaic {
  columns: 2;
  column-gap: 20px;
  margin: 28px 0;
}
.project-mosaic-item {
  break-inside: avoid;
  margin-bottom: 20px;
}
.project-mosaic-item .project-img {
  margin-bottom: 8px;
}
.mosaic-caption {
  font-size: 14px;
  color: var(--subtitle);
  margin: 0;
}
@media (max-width: 479px) {
  .project-mosaic { columns: 1; }
}

/* ---------- Mosaico: contenido más ancho ----------
   La plantilla Mosaico no lleva menú lateral ni ficha, así que su
   contenido (intro + cuadrícula) puede aprovechar más ancho que el
   contenedor estándar de 940px (.w-container). Mismo valor ya usado
   en .hero-media para el hero de las demás plantillas. */
.content-wide {
  max-width: 1200px;
}

/* ---------- Carrusel proporcional ----------
   El carrusel estándar de Webflow (.slide) fuerza aspect-ratio:16/9 y
   un ancho fijo en todas las imágenes — funciona bien cuando todas
   comparten esa proporción, pero con fotos de proporciones muy
   distintas entre sí (ej. un dieline técnico, un empaque cuadrado y
   una foto panorámica en el mismo carrusel) quedaban recortadas o
   deformadas. Este es un carrusel propio: alto fijo, cada imagen
   mantiene su propia proporción (object-fit:contain) y el ancho se
   ajusta solo. Reutiliza .left-arrow/.right-arrow (mismo look que el
   resto del sitio). Autoplay + se detiene al interactuar, igual que el
   carrusel nativo de Webflow — ver js/proportional-carousel.js. */
.proportional-carousel {
  position: relative;
  width: 100%;
  height: min(528px, 56.25vw);
  margin: 28px auto;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}
.proportional-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.proportional-carousel-img.is-active {
  opacity: 1;
  pointer-events: auto;
}
.proportional-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.proportional-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(28, 47, 64, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.proportional-carousel-dot.is-active {
  background: #1c2f40;
  transform: scale(1.3);
}