/* ═══════════════════════════════════════════════════════════
   Pittahaya · El carrete
   Las rejillas de tarjetas dejan de ser una columna infinita.
   En el teléfono se arrastran con el dedo: la centrada crece y
   abre su texto, las vecinas se retraen. En escritorio la
   tarjeta reacciona al puntero con una filigrana y un barrido.
   Sólo transform y opacity: nada aquí toca la maquetación.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Escritorio: la tarjeta cobra vida ──────────────────── */
@media (hover: hover) and (pointer: fine){
  .crt-card{
    position:relative;overflow:hidden;isolation:isolate;
    transition:transform .26s cubic-bezier(.16,.7,.2,1),
               border-color .26s ease,
               box-shadow .3s cubic-bezier(.16,.7,.2,1);
  }

  /* la filigrana: el índice enorme al fondo, revelado al pasar.
     Con z-index:-1 quedaba detrás del fondo opaco de la tarjeta y no
     se veía: va en 0 y el contenido sube a 1. */
  .crt-card > *{ position:relative;z-index:1; }
  /* casa.css apaga .card::before/::after con !important para matar el
     halo magenta heredado; hay que reclamarlos para el carrete. */
  .crt-card::before{
    content:attr(data-crt-n)!important;opacity:1!important;
    position:absolute;z-index:0;top:-.3em;right:.04em;
    font-family:var(--serif,"Playfair Display",Georgia,serif);
    font-size:clamp(96px,11vw,170px);line-height:1;font-weight:300;
    color:rgba(255,255,255,.028);
    transform:translateY(14px);
    transition:transform .7s cubic-bezier(.16,.7,.2,1),color .5s ease;
    pointer-events:none;
  }
  .crt-card:hover::before,.crt-card:focus-within::before{
    transform:translateY(0);
    color:rgba(255,255,255,.055);
  }

  /* el barrido de luz cruza la tarjeta una sola vez */
  .crt-card::after{
    content:""!important;opacity:1!important;
    position:absolute;z-index:2;inset:0;pointer-events:none;
    background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.055) 50%,transparent 60%)!important;
    transform:translateX(-125%);
  }
  .crt-card:hover::after,.crt-card:focus-within::after{
    animation:crt-sweep .9s cubic-bezier(.3,0,.2,1) forwards;
  }
  @keyframes crt-sweep{ to{ transform:translateX(125%); } }

  .crt-card:hover,.crt-card:focus-within{ transform:translateY(-5px); }
}

/* ── 2. Teléfono: el carrete ───────────────────────────────── */
@media (max-width: 860px){
  .crt-rail{
    --crt-w:min(268px,74vw);
    display:flex!important;
    grid-template-columns:none!important;
    /* altura pareja: con flex-start la más alta fija el alto del carrete
       y las cortas dejaban un hueco muerto debajo */
    align-items:stretch;
    gap:12px;
    margin-inline:calc(50% - 50vw);
    padding:6px 0 4px;
    /* el relleno deja centrar la primera y la última */
    padding-inline:calc(50vw - var(--crt-w) / 2);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .crt-rail::-webkit-scrollbar{ display:none; }

  .crt-card{
    position:relative;
    flex:0 0 var(--crt-w);
    width:auto!important;max-width:none!important;
    scroll-snap-align:center;
    /* --k: 1 centrada, 0 en los extremos. Lo escribe el motor. */
    transform:scale(calc(.895 + var(--k,0) * .105));
    opacity:calc(.4 + var(--k,0) * .6);
    transition:transform .4s cubic-bezier(.16,.7,.2,1),
               opacity .4s ease,
               border-color .4s ease;
    will-change:transform,opacity;
  }
  .crt-card.is-foco{ border-color:var(--crt-acento,rgba(255,255,255,.28)); }

  /* el índice pasa a filigrana dentro de la tarjeta */
  .crt-card[data-crt-n]::before{
    content:attr(data-crt-n)!important;opacity:1!important;
    position:absolute;z-index:0;top:10px;right:14px;
    font-family:var(--serif,"Playfair Display",Georgia,serif);
    font-size:46px;line-height:1;font-weight:300;letter-spacing:-2px;
    color:rgba(255,255,255,.05);
    transform:translateY(calc((1 - var(--k,0)) * 7px));
    transition:color .4s ease,transform .4s cubic-bezier(.16,.7,.2,1);
    pointer-events:none;
  }
  .crt-card.is-foco[data-crt-n]::before{ color:var(--crt-filigrana,rgba(255,255,255,.11)); }

  /* el párrafo sólo aparece cuando la tarjeta está en foco:
     así no se ven seis bloques de texto a la vez */
  .crt-card p{
    opacity:calc(var(--k,0) * var(--k,0));
    transform:translateY(calc((1 - var(--k,0)) * 7px));
    transition:opacity .45s ease,transform .45s cubic-bezier(.16,.7,.2,1);
  }

  /* ── 3. La barra de avance ───────────────────────────────── */
  .crt-bar{
    position:relative;height:1px;margin:16px auto 0;
    width:min(100% - 44px,320px);
    background:rgba(255,255,255,.12);
  }
  .crt-bar i{
    position:absolute;top:-1px;left:0;height:3px;border-radius:3px;
    width:var(--w,20%);
    background:var(--crt-acento,rgba(255,255,255,.6));
    transform:translateX(var(--x,0));
    transition:transform .16s linear;
  }
}

@media (max-width: 400px){
  .crt-rail{ --crt-w:min(248px,80vw); }
}

@media (prefers-reduced-motion: reduce){
  .crt-card,.crt-card::before,.crt-card::after,.crt-card p{
    transform:none!important;opacity:1!important;animation:none!important;transition:none!important;
  }
}