/* =========================================================
   Sobre nosotros
   ========================================================= */

/* ---------- Portada: texto a la izquierda, el taller en vídeo flotando a la derecha ---------- */
.ab-hero {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(24px, 4vw, 60px);
  padding: clamp(120px, 14vh, 160px) max(var(--gutter), calc((100vw - var(--max)) / 2)) clamp(60px, 9vh, 100px);
  overflow: hidden;
}
.ab-hero__title { margin: 0 0 22px; font-size: clamp(56px, 8.4vw, 132px); line-height: .9; letter-spacing: -.01em; }
.ab-hero__title .drip { display: inline-block; }
.ab-hero__title .drip:nth-child(2) { color: #fff; rotate: -2deg; }
.ab-hero__title .drip:nth-child(3) { color: var(--yolk); }
.ab-hero__lead { max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; margin: 0 0 26px; }
.ab-quote { margin: 0; max-width: 520px; padding: 16px 20px 14px; background: rgba(30, 15, 46, .32); border-radius: 18px; border-left: 5px solid var(--yolk); backdrop-filter: blur(4px); }
.ab-quote p { margin: 0 0 6px; font-family: var(--font-marker); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.35; }
.ab-quote cite { font-style: normal; font-weight: 800; font-size: 14px; opacity: .8; }

.ab-hero__reels { position: relative; height: min(78svh, 680px); }
.ab-reel { position: absolute; margin: 0; width: min(46%, 250px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #2a0d24; box-shadow: 0 0 0 6px #fff, 0 30px 60px -20px rgba(30, 15, 46, .7); animation: abFloat 7s ease-in-out infinite alternate; }
.ab-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-reel--1 { left: 2%; top: 10%; rotate: -7deg; }
.ab-reel--2 { left: 34%; top: 0; rotate: 4deg; z-index: 2; animation-delay: -2.5s; width: min(52%, 280px); }
.ab-reel--3 { right: 0; top: 30%; rotate: -2deg; animation-delay: -5s; }
/* cinta adhesiva en cada vídeo, como fotos pegadas en la pared */
.ab-reel::before { content: ''; position: absolute; z-index: 2; top: -8px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(255, 239, 200, .85); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
@keyframes abFloat { to { translate: 0 -16px; } }

/* ---------- Stand: fecha gigante fija + eventos que pasan ---------- */
.ab-stand { background: var(--paper); padding: clamp(80px, 11vw, 150px) var(--gutter); position: relative; }
.ab-stand__head { max-width: var(--max); margin: 0 auto clamp(30px, 5vw, 60px); }
.ab-stand__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 70px); }
.ab-date__sticky { position: sticky; top: 22vh; display: grid; justify-items: start; padding-left: 26px; }
.ab-date__day, .ab-date__month, .ab-date__year { display: block; font-family: var(--font-display); line-height: .9; }
.ab-date__day { font-size: clamp(70px, 9vw, 150px); color: var(--wall); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); }
.ab-date__month { font-size: clamp(34px, 4.4vw, 70px); text-transform: uppercase; letter-spacing: -.01em; }
.ab-date__year { font-family: var(--font-marker); font-size: clamp(26px, 3vw, 44px); color: var(--wall); rotate: -3deg; margin-top: 6px; }
.ab-date .is-in { animation: abIn .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes abIn { from { opacity: 0; translate: 0 18px; } }
.ab-date__bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 6px; border-radius: 99px; background: rgba(30, 15, 46, .1); overflow: hidden; }
.ab-date__bar b { position: absolute; inset: 0; background: linear-gradient(var(--wall), var(--sun)); transform-origin: top; transform: scaleY(0); }

.ab-events { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 8vh, 90px); }
.ab-ev { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; opacity: .45; transition: opacity .4s; }
.ab-ev.is-on { opacity: 1; }
.ab-ev > time { display: none; }
.ab-ev__media { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 5px #fff, 0 24px 50px -24px rgba(30, 15, 46, .55); rotate: -1.5deg; transition: rotate .4s; }
.ab-ev:nth-child(even) .ab-ev__media { rotate: 1.5deg; }
.ab-ev.is-on .ab-ev__media { rotate: 0deg; }
.ab-ev__media img, .ab-ev__media video { width: 100%; height: auto; display: block; }
.ab-ev__media--video { max-width: 330px; justify-self: center; aspect-ratio: 9 / 16; }
.ab-ev__media--video video { height: 100%; object-fit: cover; }
.ab-ev__kicker { margin: 0 0 6px; font-family: var(--font-marker); color: var(--wall); font-size: 18px; rotate: -1.5deg; display: inline-block; }
.ab-ev__text h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1; }
.ab-ev__text p { margin: 0 0 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }
.ab-ev__text a:not(.btn) { color: var(--wall); font-weight: 800; text-decoration: none; }
.ab-ev__text a:not(.btn):hover { text-decoration: underline; }
.ab-ev--next { grid-template-columns: 1fr; padding: clamp(24px, 3vw, 36px); border-radius: 24px; border: 3px dashed rgba(30, 15, 46, .2); background: #fff; }

/* ---------- El taller: pasos con su vídeo ---------- */
.ab-shop { padding: clamp(80px, 11vw, 150px) var(--gutter); }
.ab-shop__head { max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 70px); }
.ab-shop .section__lead { color: rgba(255, 255, 255, .85); }
.ab-steps { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: grid; gap: clamp(40px, 7vw, 90px); }
.ab-step { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.ab-step:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); }
.ab-step:nth-child(even) figure { order: 2; }
.ab-step figure { margin: 0; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #2a0d24; box-shadow: 0 0 0 5px #fff, 0 30px 60px -24px rgba(0, 0, 0, .7); rotate: -2.5deg; }
.ab-step:nth-child(even) figure { rotate: 2.5deg; }
.ab-step video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-step b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 9vw, 130px); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--yolk); }
.ab-step h3 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; }
.ab-step p { margin: 0; max-width: 480px; font-size: 17.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .ab-hero { grid-template-columns: 1fr; padding-top: 110px; }
  .ab-hero__reels { height: min(92vw, 520px); }
  .ab-reel { width: 31%; }
  .ab-reel--2 { width: 36%; }
  .ab-stand__grid { grid-template-columns: 1fr; }
  .ab-date { display: none; }
  .ab-ev, .ab-ev--next { grid-template-columns: 1fr; opacity: 1; }
  .ab-ev > time { display: inline-block; justify-self: start; font-family: var(--font-display); font-size: 22px; background: var(--ink); color: var(--yolk); padding: 6px 14px; border-radius: 999px; rotate: -2deg; position: sticky; top: 76px; z-index: 2; }
  .ab-step, .ab-step:nth-child(even) { grid-template-columns: 1fr; }
  .ab-step:nth-child(even) figure { order: 0; }
  .ab-step figure { width: min(70%, 280px); justify-self: center; }
}