/* ==========================================================
   FRANJA "CERTIFICACIONES" — mesa de certificados.
   Cada certificado es una hoja (imagen de la primera página del PDF) ligeramente inclinada;
   al pasar el cursor se endereza y sube. Texto siempre en el HTML. Móvil: carrusel lateral con snap.
   ========================================================== */
.cer{position:relative;background:var(--grafito);padding:clamp(80px,12vh,140px) 0 clamp(72px,10vh,120px);overflow:hidden;
  background-image:radial-gradient(ellipse 65% 45% at 50% 62%,rgba(0,134,255,.10),transparent 70%)}
.cer__head{max-width:1320px;margin:0 auto clamp(40px,7vh,80px);padding:0 clamp(24px,4vw,56px)}
.cer__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--azul-luz);margin:0 0 18px}
.cer__h2{margin:0;font-weight:300;font-size:clamp(32px,3.7vw,60px);line-height:1.05;letter-spacing:-.012em;color:var(--hueso)}
.cer__h2 span{display:block}
.cer__h2 em{font-style:normal;background:linear-gradient(90deg,var(--azul),#4fd0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.06em}
.cer__sub{margin:18px 0 0;max-width:46ch;font-family:Inter,system-ui,sans-serif;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--acero)}

.cer__row{list-style:none;margin:0 auto;padding:0 clamp(24px,4vw,56px);max-width:1320px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,1.8vw,28px);align-items:start}
.cer__card{display:flex;flex-direction:column;gap:0;min-width:0}
.cer__doc{position:relative;display:block;aspect-ratio:595/842;transform:translateY(var(--y,0)) rotate(var(--r,0deg));transform-origin:50% 60%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);text-decoration:none;outline:none}
.cer__doc::before{content:"";position:absolute;inset:0;background:#d9d5cb;border-radius:3px;transform:translate(7px,7px) rotate(2.2deg);box-shadow:0 18px 30px -16px rgba(0,0,0,.8)}
.cer__doc img{position:relative;display:block;width:100%;height:100%;object-fit:cover;background:#fff;border-radius:3px;box-shadow:0 26px 44px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .5s}
.cer__card:hover .cer__doc,.cer__card:focus-within .cer__doc{transform:translateY(-12px) rotate(0deg) scale(1.035)}
.cer__card:hover .cer__doc img,.cer__card:focus-within .cer__doc img{box-shadow:0 34px 56px -20px rgba(0,0,0,.9),0 0 0 1px rgba(63,164,255,.5),0 0 46px -4px var(--azul-glow)}

.cer__body{display:flex;flex-direction:column;gap:8px;padding-top:52px}
.cer__t{margin:0;font-weight:300;font-size:clamp(15px,1.25vw,19px);line-height:1.25;color:var(--hueso)}
.cer__n{display:block;white-space:nowrap;font-family:var(--cond);font-weight:500;font-size:clamp(19px,1.75vw,28px);letter-spacing:.015em;line-height:1.05;color:var(--azul-luz);margin-bottom:5px}
.cer__d{margin:0;font-family:Inter,system-ui,sans-serif;font-size:12.5px;line-height:1.5;color:rgba(247,245,240,.7)}
.cer__meta{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--acero);overflow-wrap:anywhere}
.cer__go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso);text-decoration:none;border-bottom:1px solid var(--azul);padding-bottom:4px;transition:color .2s,gap .2s}
.cer__go svg{width:13px;height:13px;color:var(--azul-luz)}
.cer__go:hover,.cer__go:focus-visible{color:var(--azul-luz);gap:12px}
.cer__go:focus-visible{outline:2px solid var(--azul-luz);outline-offset:4px}

.cer__foot{max-width:1320px;margin:clamp(40px,6vh,64px) auto 0;padding:0 clamp(24px,4vw,56px);display:flex;justify-content:center}

/* entrada: las hojas caen sobre la mesa (partiendo de un estado visible si no hay JS) */
.cer.is-pre .cer__doc{opacity:0;transform:translateY(calc(var(--y,0px) + 40px)) rotate(calc(var(--r,0deg) * 2.2))}
.cer .cer__doc{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .7s}
.cer.is-in .cer__card:nth-child(2) .cer__doc{transition-delay:.08s}.cer.is-in .cer__card:nth-child(3) .cer__doc{transition-delay:.16s}
.cer.is-in .cer__card:nth-child(4) .cer__doc{transition-delay:.24s}.cer.is-in .cer__card:nth-child(5) .cer__doc{transition-delay:.32s}
.cer.is-in .cer__card:hover .cer__doc,.cer.is-in .cer__card:focus-within .cer__doc{transition-delay:0s;transition:transform .6s cubic-bezier(.2,.7,.2,1)}

@media(min-width:761px) and (max-width:1100px){
  .cer__row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
}
/* móvil: carrusel lateral */
@media(max-width:760px){
  .cer{padding:34px 0 48px}
  .cer__head{margin-bottom:26px}
  .cer__h2{font-size:clamp(32px,9.6vw,42px)}
  .cer__row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding:28px 24px 16px;scrollbar-width:none}
  .cer__row::-webkit-scrollbar{display:none}
  .cer__card{flex:0 0 min(64vw,270px);scroll-snap-align:start}
  .cer__d{font-size:13px}
  .cer__n{font-size:28px}
  .cer__foot .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.cer .cer__doc,.cer__doc img{transition:none!important}.cer.is-pre .cer__doc{opacity:1;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}}