/* =========================================================
   PÁGINA: INICIO — estilos exclusivos de index.html
   ========================================================= */

/* ---------- Hero ----------
   El header (común, transparente) flota encima gracias al margen
   negativo: ver la regla .header en common.css para el porqué. */
   .hero {
    position: relative;
    margin-top: -84px;
    background: var(--ink);
    color: var(--white);
    overflow: hidden;
    min-height: 94vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(84px + 3rem) 0 clamp(3.5rem, 8vw, 5.5rem);
  }
  .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Velo oscuro sobre el video para que el título/subtítulo blancos
     mantengan contraste (el metraje trae zonas muy claras). */
  .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(12, 31, 65, .72);
  }
  .hero__inner {
    position: relative;
    z-index: 1;
    max-width: min(760px, 90%);
    margin: 0;
    padding: 0;
    padding-left: clamp(1.5rem, 7vw, 5rem);
    will-change: transform, opacity;
  }
  .hero__title {
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: .6em;
  }
  .hero__subtitle {
    font-size: clamp(.95rem, 1.3vw, 1.05rem);
    font-weight: 300;
    color: var(--brand-mist);
    max-width: 52ch;
    margin-bottom: 2.2rem;
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
  
  /* ---------- Categorías: carrusel horizontal ---------- */
  .cat-carousel {
    position: relative;
    max-width: min(1700px, 96vw);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .cat-carousel__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .6rem .25rem 1.3rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .cat-carousel__track::-webkit-scrollbar { display: none; }
  
  /* Tile simple tipo catálogo industrial: sin caja, sin bordes, sin
     sombra — imagen con esquinas levemente redondeadas y nombre +
     flecha justo debajo. Todo el artículo crece un poco al hover. */
  .cat-tile {
    scroll-snap-align: start;
    position: relative;
    flex: 0 0 auto;
    width: clamp(230px, 22vw, 290px);
    display: flex;
    flex-direction: column;
    transition: transform .3s var(--ease);
  }
  .cat-tile:hover { transform: scale(1.035); z-index: 2; }
  .cat-tile__media {
    aspect-ratio: 4 / 3;
    background: var(--paper-alt);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .cat-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cat-tile__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 0 0;
  }
  .cat-tile__label span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  .cat-tile__label svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 2.4;
    color: var(--ink-faint);
    transition: color .2s var(--ease);
  }
  .cat-tile:hover .cat-tile__label svg { color: var(--accent); }
  
  .cat-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
  }
  .cat-carousel__arrow:hover { color: var(--ink); border-color: var(--ink); }
  .cat-carousel__arrow svg { width: 17px; height: 17px; }
  .cat-carousel__arrow--prev { left: 0; }
  .cat-carousel__arrow--next { right: 0; }
  .cat-carousel__arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
  
  .cat-grid__cta { text-align: center; margin-top: 2.2rem; }

  /* ---------- Productos destacados: galería estática (mismas tarjetas
     .cat-tile del carrusel de categorías). Flexbox (no grid) a propósito:
     así la última fila incompleta queda centrada en vez de pegada a la
     izquierda — un grid comparte columnas entre filas y no puede hacer
     esto solo con CSS. */
  .featured-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  }
  /* Tarjetas más angostas que en el carrusel de categorías, para que
     quepan ~5 por fila en pantallas grandes (7 productos → 5 + 2). */
  .featured-grid .cat-tile { width: clamp(170px, 17vw, 200px); }

  /* ---------- Marcas: carrusel automático ---------- */
  .brand-marquee { padding: 1.5rem 0 2.5rem; background: var(--paper); }
  .brand-marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .brand-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    width: max-content;
    animation: brandMarquee 26s linear infinite;
  }
  .brand-marquee:hover .brand-marquee__track,
  .brand-marquee__track:focus-within {
    animation-play-state: paused;
  }
  /* 4 copias en el DOM; solo recorremos el ancho de UNA copia (-25% del
     total) para que el loop sea perfecto sin importar qué tan angosto
     sea el set frente al viewport (evita el corte/reinicio en seco). */
  @keyframes brandMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-25%); }
  }
  .brand-marquee__item {
    display: block;
    height: clamp(26px, 3vw, 36px);
    width: auto;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: .55;
    transition: opacity .25s var(--ease), filter .25s var(--ease);
  }
  .brand-marquee__item:hover { opacity: 1; filter: grayscale(0); }

  @media (prefers-reduced-motion: reduce) {
    .brand-marquee__track { animation: none; }
  }

  /* Prueba: el mismo carrusel, flotando dentro del hero debajo de los
     botones — sin fondo propio, y se rompe fuera del ancho angosto del
     hero__inner para correr a lo ancho de toda la sección (el overflow:
     hidden del .hero recorta cualquier sobrante). Logos en su color
     real a opacidad reducida en reposo, color/opacidad completa al
     hover, igual que la versión de fondo claro. */
  .brand-marquee--hero {
    background: none;
    padding: clamp(3rem, 8vw, 5rem) 0 0;
    width: 100vw;
    margin-left: calc(-1 * clamp(1.5rem, 7vw, 5rem));
  }
  .brand-marquee--hero .brand-marquee__item { filter: none; opacity: .6; }
  .brand-marquee--hero .brand-marquee__item:hover { opacity: 1; }
  
  /* ---------- Por qué elegirnos: sección fija, una razón por scroll ----------
     La sección mide 4×100vh; el bloque interno queda sticky y JS (ver
     inicio.js → vcInitWhyPin) decide qué paso mostrar según cuánto se
     ha scrolleado dentro de esa altura. Al llegar al último paso, la
     sección termina y el scroll normal continúa a la siguiente. */
  .why-pin {
    position: relative;
    height: 400vh;
    height: 400dvh;
    background: var(--ink);
  }
  .why-pin__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .why-pin__inner { width: 100%; max-width: min(1600px, 94vw); }
  
  /* Dos columnas: el texto conserva exactamente su tamaño/posición de
     antes (los anchos en ch de h3/p ya lo acotaban), la imagen ocupa el
     espacio que quedaba vacío a la derecha y no cambia entre pasos —
     vive fuera de .why-pin__steps, así que el sticky la mantiene fija
     mientras el texto va rotando, hasta que la sección suelta el scroll. */
  .why-pin__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .why-pin__media { position: relative; }
  .why-pin__canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .why-pin__head { margin-bottom: clamp(2.5rem, 8vw, 5rem); }
  .why-pin__kicker {
    margin: 0;
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 600;
    color: var(--brand-mist);
  }
  
  .why-pin__steps { position: relative; min-height: clamp(220px, 38vw, 320px); }
  .why-pin__step {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    pointer-events: none;
  }
  .why-pin__step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .why-pin__step h3 {
    font-size: clamp(2.4rem, 6.5vw, 4.5rem);
    font-weight: 800;
    color: var(--white);
    max-width: 16ch;
    margin: 0 0 1.2rem;
  }
  .why-pin__step p {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 300;
    color: var(--brand-mist);
    max-width: 48ch;
    margin: 0;
  }
  
  .why-pin__dots { display: flex; gap: .6rem; margin-top: clamp(2rem, 6vw, 3.5rem); }
  .why-pin__dot {
    width: 32px;
    height: 3px;
    background: var(--line-dark);
    transition: background-color .35s var(--ease);
  }
  .why-pin__dot.is-active { background: var(--accent); }
  
  /* ---------- Sobre VC (resumen) ----------
     Sección full-bleed (sin el padding vertical de .section ni el
     max-width de .container): la foto debe tocar arriba, abajo e
     izquierda sin márgenes, como una franja de página completa. */
  .about-summary { padding: 0; overflow: hidden; }
  .about-summary__grid {
    display: grid;
    grid-template-columns: minmax(260px, 36%) 1fr;
    min-height: clamp(460px, 68vh, 760px);
  }
  .about-summary__media { position: relative; height: 100%; }
  .about-summary__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .about-summary__copy-wrap {
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  }
  .about-summary__copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .about-summary__copy p { max-width: 52ch; }
  
  /* ---------- CTA final ---------- */
  .cta-final {
    background: var(--brand-blue);
    min-height: 90vh;
    min-height: 90dvh;
    display: flex;
    align-items: center;
    padding: clamp(3.5rem, 8vw, 6rem) 0;
  }
  .cta-final__inner { text-align: center; }
  .cta-final h2 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 22ch; margin: 0 auto 1.8rem; }
  .cta-final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .about-summary__grid { grid-template-columns: 1fr; min-height: 0; }
    .about-summary__media { height: clamp(320px, 60vh, 480px); }
    /* La sección why-pin tiene altura fija (pantalla completa); en
       móvil no alcanza el espacio para foto + las 4 razones completas
       sin encimarse, así que se prioriza el texto y se oculta la foto. */
    .why-pin__layout { grid-template-columns: 1fr; }
    .why-pin__media { display: none; }
  }
  @media (max-width: 640px) {
    .why-item { grid-template-columns: 1fr; gap: .5rem; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .cat-carousel__arrow { display: none; }
    .cat-carousel__track {
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }
  }