/* =========================================================
   HOME — Colección Dispersa (mobile-first, breakpoint único: 1024px)
   ========================================================= */

/* ---------- 0. Textura de archivo ---------- */
.textura-papel { position: relative; }
.textura-papel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 1. Banda superior: título ---------- */
.hero-titulo {
  flex: 0 0 auto;
  text-align: center;
  padding-block: clamp(.4rem, 1.2vh, .85rem);
}
.hero-titulo__eyebrow {
  display: block;
  font-family: 'Source Serif 4', serif;
  font-size: clamp(.65rem, .85vw, .78rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: #B08D57;
  margin-bottom: .4rem;
}
.hero-titulo__subtitulo {
  font-size: clamp(.9rem, 1.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.5;
  color: color-mix(in srgb, #2E3238 100%, transparent 5%);
  max-width: 62ch;
  margin-inline: auto;
}

/* ---------- 2. Banda media: cúmulo + cédula (base = mobile) ---------- */
.coleccion-dispersa {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

/* Indicador visual sutil de carrusel continuo en mobile */
.coleccion-dispersa::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 3.5rem);
  background: linear-gradient(90deg, transparent, #EAE7E2);
  pointer-events: none;
  z-index: 3;
}

/* Cúmulo — mobile: carrusel horizontal */
.cluster-grid {
  position: relative;
  z-index: 2;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: .25rem .25rem .75rem;
  -webkit-overflow-scrolling: touch;
}

.tarjeta-nicho {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden; /* clave: recorta cualquier texto que se salga de la curva */
  padding: clamp(1.1rem, 2vw, 1.75rem);
  text-decoration: none;
  cursor: pointer;
  flex: 0 0 78%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: center;
  border-radius: 28px;
  rotate: 0deg;
  animation: none;
  background: linear-gradient(160deg,
    color-mix(in srgb, #EAE7E2 100%, white 8%) 0%,
    color-mix(in srgb, #EAE7E2 100%, black 6%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -10px 16px -12px rgba(46, 50, 56, .16),
    0 4px 8px rgba(46, 50, 56, .10),
    0 16px 28px -14px rgba(46, 50, 56, .26);
  transition: translate .35s cubic-bezier(.22,.61,.36,1),
              scale .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
}

.tarjeta-nicho:hover,
.tarjeta-nicho:focus-visible {
  animation-play-state: paused;
  translate: 0 -8px;
  scale: 1.035;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -10px 16px -12px rgba(46, 50, 56, .16),
    0 10px 16px rgba(46, 50, 56, .14),
    0 26px 40px -16px rgba(46, 50, 56, .32);
}
.tarjeta-nicho:focus-visible { outline: 2px solid #B08D57; outline-offset: 4px; }

.tarjeta-nicho__indice {
  font-family: 'Source Serif 4', serif;
  font-size: .7rem;
  letter-spacing: .2em;
  color: #B08D57;
  margin-bottom: .4rem;
}
.tarjeta-nicho__titulo {
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.25;
  color: #2E3238;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta-nicho__linea {
  display: block;
  width: 2rem;
  height: 1px;
  margin-top: .75rem;
  background: #B08D57;
  transition: width .35s ease;
}
.tarjeta-nicho:hover .tarjeta-nicho__linea,
.tarjeta-nicho:focus-visible .tarjeta-nicho__linea { width: 3.5rem; }

.tarjeta-nicho__resumen-movil {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-top: .6rem;
  font-size: .78rem;
  line-height: 1.5;
  color: color-mix(in srgb, #2E3238 100%, white 15%);
  overflow: hidden;
}

.tarjeta-nicho--01 .tarjeta-nicho__resumen-movil {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

@keyframes respirar-tarjeta {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Cédula de detalle — oculta en mobile */
.detalle-rail { display: none; }

/* ---------- 3. Banda inferior: cintillo (cita + firma) ---------- */
.cintillo-final {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(.6rem, 1.6vh, 1rem);
  padding-block: clamp(.5rem, 1.4vh, .9rem);
}
.cintillo-final__frase { max-width: 46ch; }
.cintillo-final__texto {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: clamp(.8rem, 1vw, .95rem);
  line-height: 1.5;
  color: color-mix(in srgb, #2E3238 100%, white 10%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* reserva fija: evita salto al rotar frases de distinto largo */
  transition: opacity .5s ease;
}
.cintillo-final__texto[data-estado="saliendo"] { opacity: 0; }
.cintillo-final__atribucion {
  display: block;
  margin-top: .35rem;
  font-family: 'Source Serif 4', serif;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B08D57;
}
.cintillo-final__divisor {
  display: block;
  width: 1px;
  align-self: stretch;
  background: color-mix(in srgb, #2E3238 100%, transparent 85%);
}
.cintillo-final__firma { display: flex; flex-direction: column; align-items: center; }
.cintillo-final__wordmark {
  font-family: 'Alex Brush', cursive;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: #2E3238;
  line-height: 1;
}
.cintillo-final__subtitulo {
  margin-top: .2rem;
  font-size: 8px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: color-mix(in srgb, #2E3238 100%, transparent 40%);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-nicho { animation: none; }
  .tarjeta-nicho:hover, .tarjeta-nicho:focus-visible { translate: 0; scale: 1; }
}

/* =========================================================
   DESKTOP — ≥1024px (único breakpoint de todo el archivo)
   ========================================================= */
@media (min-width: 1024px) {

  .coleccion-dispersa { flex-direction: row; }
  .coleccion-dispersa::after { display: none; }

  /* Cúmulo: carrusel → grid 3×3, tarjeta 01 ocupa 2×2 */
  .cluster-grid {
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "n1 n1 n2"
      "n1 n1 n3"
      "n4 n5 n6";
    gap: clamp(.9rem, 1.6vw, 1.5rem);
    flex: 0 0 70%;
    height: 100%;
  }

  .tarjeta-nicho {
    flex: initial;
    aspect-ratio: auto;
    scroll-snap-align: none;
    justify-content: center; /* Centrado vertical manteniendo inclinación */
    animation: respirar-tarjeta 5.5s ease-in-out infinite;
    animation-delay: var(--stagger, 0s);
  }

  .tarjeta-nicho--01 { 
    grid-area: n1; 
    rotate: -1deg;  
    border-radius: 54% 46% 52% 48% / 48% 54% 46% 52%; 
    --stagger: 0s; 
    padding: clamp(1.75rem, 3vw, 2.75rem); 
  }
  .tarjeta-nicho--02 { 
    grid-area: n2; 
    rotate: 1.2deg;  
    border-radius: 44% 56% 46% 54% / 54% 44% 56% 46%; 
    --stagger: .6s; 
    padding: clamp(1rem, 2vw, 1.5rem); 
  }
  .tarjeta-nicho--03 { 
    grid-area: n3; 
    rotate: -1.4deg; 
    border-radius: 50% 50% 58% 42% / 42% 58% 50% 50%; 
    --stagger: 1.1s; 
    padding: clamp(1rem, 2vw, 1.5rem); 
  }
  .tarjeta-nicho--04 { 
    grid-area: n4; 
    rotate: 1deg;    
    border-radius: 46% 54% 42% 58% / 58% 42% 54% 46%; 
    --stagger: 1.7s; 
    padding: clamp(1rem, 2vw, 1.5rem); 
  }
.tarjeta-nicho--05 {
    grid-area: n5;
    rotate: -1.2deg;
    border-radius: 58% 42% 50% 50% / 50% 54% 46% 50%;
    --stagger: 2.3s;
    margin: 0 auto;
    padding: clamp(1.1rem, 2vw, 1.5rem);
  }
  .tarjeta-nicho--05 .tarjeta-nicho__titulo {
    font-size: clamp(0.72rem, 0.95vw, 0.95rem);
    text-align: center;
    padding-inline: 0.25rem;
  }
  .tarjeta-nicho--06 { 
    grid-area: n6; 
    rotate: 1.4deg;  
    border-radius: 42% 58% 54% 46% / 54% 46% 42% 58%; 
    --stagger: 2.9s; 
    padding: clamp(1rem, 2vw, 1.5rem); 
  }

  .tarjeta-nicho__titulo {
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    line-height: 1.15;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    text-wrap: pretty;
  }

  .tarjeta-nicho__resumen-movil { display: none; }

  /* Cédula de detalle */
  .detalle-rail {
    display: block;
    position: relative;
    z-index: 2;
    flex: 0 0 30%;
    height: 100%;
    padding-left: clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid color-mix(in srgb, #2E3238 100%, transparent 85%);
  }
  .detalle-rail__idle,
  .detalle-rail__item {
    position: absolute;
    inset: 0;
    padding-left: clamp(1rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
  }
  .detalle-rail__idle { opacity: 1; visibility: visible; }
  .detalle-rail__indice {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 300;
    color: #B08D57;
    opacity: .3;
    line-height: 1;
    margin-bottom: .5rem;
  }
  .detalle-rail__titulo {
    font-family: 'Source Serif 4', serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: #2E3238;
    margin-bottom: .6rem;
  }
  .detalle-rail__resumen {
    font-size: .82rem;
    line-height: 1.55;
    color: color-mix(in srgb, #2E3238 100%, white 15%);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .detalle-rail__cta {
    align-self: flex-start;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2E3238;
    border-bottom: 1px solid #B08D57;
    padding-bottom: .2rem;
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease;
  }
  .detalle-rail__cta:hover { color: #B08D57; }
  .detalle-rail__idle-label {
    font-family: 'Source Serif 4', serif;
    font-size: .78rem;
    font-style: italic;
    color: color-mix(in srgb, #2E3238 100%, white 30%);
  }

  /* Activación de la cédula — una regla por nicho, sin JS */
  .coleccion-dispersa:has(.tarjeta-nicho--01:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--01:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--01:hover) .detalle-rail__item[data-panel="01"],
  .coleccion-dispersa:has(.tarjeta-nicho--01:focus-visible) .detalle-rail__item[data-panel="01"] { opacity: 1; visibility: visible; }

  .coleccion-dispersa:has(.tarjeta-nicho--02:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--02:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--02:hover) .detalle-rail__item[data-panel="02"],
  .coleccion-dispersa:has(.tarjeta-nicho--02:focus-visible) .detalle-rail__item[data-panel="02"] { opacity: 1; visibility: visible; }

  .coleccion-dispersa:has(.tarjeta-nicho--03:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--03:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--03:hover) .detalle-rail__item[data-panel="03"],
  .coleccion-dispersa:has(.tarjeta-nicho--03:focus-visible) .detalle-rail__item[data-panel="03"] { opacity: 1; visibility: visible; }

  .coleccion-dispersa:has(.tarjeta-nicho--04:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--04:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--04:hover) .detalle-rail__item[data-panel="04"],
  .coleccion-dispersa:has(.tarjeta-nicho--04:focus-visible) .detalle-rail__item[data-panel="04"] { opacity: 1; visibility: visible; }

  .coleccion-dispersa:has(.tarjeta-nicho--05:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--05:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--05:hover) .detalle-rail__item[data-panel="05"],
  .coleccion-dispersa:has(.tarjeta-nicho--05:focus-visible) .detalle-rail__item[data-panel="05"] { opacity: 1; visibility: visible; }

  .coleccion-dispersa:has(.tarjeta-nicho--06:hover) .detalle-rail__idle,
  .coleccion-dispersa:has(.tarjeta-nicho--06:focus-visible) .detalle-rail__idle { opacity: 0; }
  .coleccion-dispersa:has(.tarjeta-nicho--06:hover) .detalle-rail__item[data-panel="06"],
  .coleccion-dispersa:has(.tarjeta-nicho--06:focus-visible) .detalle-rail__item[data-panel="06"] { opacity: 1; visibility: visible; }

  /* Cintillo en fila */
  .cintillo-final { flex-direction: row; gap: clamp(1.5rem, 3vw, 3rem); }
  .cintillo-final__divisor {
    display: block;
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, #2E3238 100%, transparent 85%);
  }
}
/* =========================================================
   AÑADIR AL FINAL DE home.css — 100% aditivo, no reemplaza nada
   Fix: número-ficha grande en mobile (evita sensación de "cargando")
   ========================================================= */
@media (max-width: 1023px) {
  
  .tarjeta-nicho__indice {
    position: absolute;
    top: .5rem;
    right: .75rem;
    margin-bottom: 0;
    font-size: clamp(3.25rem, 17vw, 4.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: #B08D57;
    opacity: .22;
  }
  
  .tarjeta-nicho__titulo {
    margin-bottom: .8rem;
  }
  
  .tarjeta-nicho__resumen-movil {
    margin-top: .9rem;
    font-size: .85rem;
  }
  
  /* Ajuste secundario opcional: tarjeta un poco menos alargada,
     reduce el peso visual del vacío restante. Prueba primero solo
     el número de arriba — si ya te convence, puedes omitir esto. */
  .tarjeta-nicho { aspect-ratio: 4 / 4.6; }
  
}