/* Campaña 2026 — afiche con esquina levantada, datos y videos */

.c26-hero { padding-block: clamp(2.5rem, 6vw, var(--s-8)); background: linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #E8F2FA; }
.c26-hero-grid { display: grid; gap: var(--s-7); align-items: center; }
.c26-hero h1 { color: #fff; margin-block: var(--s-3) var(--s-4); }
.c26-hero .lead { color: #C9DDF0; }
.c26-facts { list-style: none; padding: 0; margin: var(--s-6) 0; display: grid; gap: var(--s-3); }
.c26-facts li { display: flex; gap: var(--s-3); align-items: baseline; }
.c26-facts strong { font-family: var(--font-hand); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7FD0F5; min-width: 5.5rem; }
.c26-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Fondo con capas (parallax por mouse/scroll) */
.c26-hero { position: relative; overflow: hidden; --mx: 0; --my: 0; --sy: 0px; }
.c26-hero > .container { position: relative; z-index: 1; }
.c26-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.c26-bg > * { position: absolute; will-change: transform; }
.c26-orb { border-radius: 50%; filter: blur(60px); opacity: .55; }
.c26-orb--a { width: 34rem; height: 34rem; left: -10rem; top: -8rem; background: #1b6fb8;
  transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -14px + var(--sy) * .08), 0); }
.c26-orb--b { width: 28rem; height: 28rem; right: -8rem; bottom: -10rem; background: #f28a1f; opacity: .22;
  transform: translate3d(calc(var(--mx) * 30px), calc(var(--my) * 24px - var(--sy) * .1), 0); }
.c26-ribbon { width: 140%; max-width: none; left: -20%; top: 4%; opacity: .5;
  transform: rotate(-8deg); animation: c26-ribbon-flow 9s ease-in-out infinite alternate; }
@keyframes c26-ribbon-flow { from { translate: -7% -3%; rotate: -2deg; } to { translate: 7% 4%; rotate: 2.5deg; } }

/* Hoja del afiche: esquina levantada + inclinación 3D + flotación */
.c26-stage { touch-action: pan-y; perspective: 1100px; justify-self: center; width: min(100%, 440px); margin: 0 auto; }
.c26-float { animation: c26-float 6s ease-in-out infinite; }
@keyframes c26-float { 50% { transform: translateY(-12px); } }
.c26-sheet { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; position: relative; width: 100%; margin: 0; cursor: pointer;
  transform-style: preserve-3d; filter: drop-shadow(0 18px 28px rgba(0,0,0,.4));
  transition: transform .6s var(--ease);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(1.2deg); }
.c26-sheet.is-tilting { transition: transform .12s ease-out; }
.c26-sheet img { display: block; width: 100%; height: auto; border-radius: 3px; }
.c26-shine { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.38), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }
.c26-sheet.is-tilting .c26-shine { opacity: 1; }
.c26-sheet button { position: absolute; inset: 0; background: none; border: 0; cursor: zoom-in; }
.c26-hint { text-align: center; font-size: .85rem; color: #9FBBD6; margin-top: var(--s-4); }

/* Videos */

/* Categorías y pasos */
.c26-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.c26-cats li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.c26-cats li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.c26-cats li img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.c26-cats li div { padding: var(--s-4) var(--s-5) var(--s-5); }
.c26-cats strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: var(--navy-700); text-transform: uppercase; }
.c26-cats span { color: var(--muted); }
.c26-prize { margin-top: var(--s-6); display: inline-block; background: var(--orange-500); color: #fff; font-family: var(--font-head); font-size: clamp(1.4rem, 4vw, 2rem); padding: .4em .9em; border-radius: var(--radius); }
.c26-steps { counter-reset: p; list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-4); }
.c26-steps li { counter-increment: p; display: flex; gap: var(--s-4); align-items: center; font-size: 1.1rem; }
.c26-steps li::before { content: counter(p); flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--orange-500); color: #fff; font-family: var(--font-head); }

/* Visor del afiche */
.c26-zoom { position: fixed; inset: 0; z-index: 100; background: rgba(5,15,30,.92); display: grid; place-items: center; padding: 1rem; overflow: auto; }
.c26-zoom[hidden] { display: none; }
.c26-zoom img { max-width: min(100%, 900px); max-height: 100%; height: auto; border-radius: 4px; }
.c26-zoom button { position: fixed; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: #fff; color: var(--navy-900); font-size: 1.5rem; cursor: pointer; }

@media (max-width: 479px) { .c26-cats { grid-template-columns: 1fr; } }
@media (min-width: 900px) {
  .c26-cats { grid-template-columns: repeat(3, 1fr); }
  .c26-hero-grid { grid-template-columns: 1.1fr .9fr; }
  .c26-feature { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .c26-feature--rev { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .c26-feature--rev .c26-panel { order: 2; }
  .c26-media { aspect-ratio: auto; width: 100%; min-height: 22rem; }
}
@media (prefers-reduced-motion: reduce) { .c26-ribbon { animation: none; } .c26-sheet { transition: none; transform: none; } .c26-float { animation: none; } .c26-bg > * { transform: none !important; } .c26-shine { display: none; } }

.c26-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.c26-hero .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* Videos en tarjetas: panel de color + video en forma de píldora */
.c26-showcase { background: #0A1F3C; }
.c26-showcase .section-head h2 { color: #fff; }
.c26-feature { display: grid; gap: var(--s-4); margin-top: clamp(3rem, 7vw, 6rem); }
.c26-feature:first-of-type { margin-top: var(--s-6); }
.c26-panel { display: flex; flex-direction: column; gap: var(--s-5); justify-content: space-between; border-radius: 18px; padding: clamp(1.25rem, 3vw, 2.25rem); color: var(--navy-900); min-height: 20rem; }
.c26-feature--cyan .c26-panel { background: #5CC8F5; }
.c26-feature--orange .c26-panel { background: #FFA047; }
.c26-panel h3 { font-family: var(--font-head); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; color: var(--navy-900); margin: 0; }
.c26-panel p { margin: 0; font-weight: 500; line-height: 1.45; max-width: 38ch; }
.c26-go { align-self: flex-start; display: inline-flex; gap: .4rem; text-decoration: none; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em; }
.c26-go > span { display: inline-flex; align-items: center; background: var(--navy-900); color: #fff; border-radius: 10px; padding: .85rem 1.1rem; transition: background .2s, transform .2s; }
.c26-go-ico { padding: .85rem .8rem !important; }
.c26-go:hover > span, .c26-go:focus-visible > span { background: var(--orange-600); transform: translateY(-2px); }
.c26-media { border-radius: clamp(48px, 9vw, 170px); overflow: hidden; background: #000; aspect-ratio: 16 / 9; align-self: stretch; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.c26-media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Video vertical (9:16): columna angosta, centrado y con esquinas menos redondeadas */
.c26-feature--vertical .c26-media { aspect-ratio: 9 / 16; width: min(100%, 19rem); justify-self: center; border-radius: clamp(32px, 8vw, 56px); }
@media (min-width: 900px) {
  .c26-feature--vertical { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .c26-feature--vertical .c26-media { aspect-ratio: 9 / 16; min-height: 0; width: 19rem; }
  .c26-feature--vertical .c26-panel { align-self: stretch; }
}

/* Menos espacio entre "Categorías y premios" y "Cómo inscribirte" */
.c26-cats-sec { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
.c26-how-sec { padding-top: clamp(1.75rem, 4vw, 3rem); }