/* ============================================================
   landing.css — la home. Se apoya en olegario.css (tokens, botones, topbar,
   marquee, wanted/form, footer). Aquí solo lo que es nuevo de la landing.
   ============================================================ */

/* ---------- revelado al scroll ---------- */
/* .rv (revelado al scroll) vive ahora en olegario.css, para toda la web */

/* la corona late como un segundero (en el logo y en el wordmark) */
.logo svg rect, .wordmark svg rect { transform-box: fill-box; transform-origin: center; animation: om-tick 2s steps(1, end) infinite; }
@keyframes om-tick { 0%, 100% { transform: none; } 50% { transform: scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .logo svg rect, .wordmark svg rect { animation: none; } }

/* ---------- hero ---------- */
.lhero { background: var(--tinta); color: var(--papel); position: relative; overflow: hidden; isolation: isolate; }
.lhero-bg { position: absolute; right: -6vw; top: -8vw; width: 58vw; max-width: 760px; opacity: .06; z-index: 0; pointer-events: none; }
.lhero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr); gap: clamp(26px, 4vw, 64px); align-items: center; padding-top: clamp(34px, 5vw, 72px); padding-bottom: clamp(34px, 5vw, 72px); }
.lhero .wordmark { font-size: clamp(30px, 4.6vw, 54px); margin-top: 12px; }
.lhero-h { font-weight: 900; font-size: clamp(36px, 5.6vw, 72px); letter-spacing: -.035em; line-height: .98; margin: clamp(22px, 3vw, 36px) 0 0; text-wrap: pretty; max-width: 12ch; }
.lhero-h .amb { color: var(--ambar); }
.lhero-h .mk { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: .5em; color: var(--ambar); display: inline-block; transform: rotate(-3deg) translateY(-.15em); margin-left: .25em; letter-spacing: 0; }
.lhero-p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: var(--dim); margin-top: 20px; max-width: 46ch; text-wrap: pretty; }
.lhero-p b { color: var(--papel); font-weight: 600; }
.lhero-ctas { display: flex; gap: 11px; margin-top: 28px; flex-wrap: wrap; }
.lhero-facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--borde-osc); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.lhero-facts span::before { content: '●'; color: var(--ambar); margin-right: 8px; font-size: 8px; vertical-align: 1px; }

/* la foto: polaroid ligeramente girada, con cinta y sello */
.polaroid { position: relative; justify-self: end; width: min(100%, 380px); }
.polaroid-card { background: var(--papel); padding: 12px 12px 46px; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.3); transform: rotate(-2.5deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.polaroid-card img { width: 100%; height: auto; max-height: 540px; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--tile); }
.polaroid-cap { position: absolute; left: 18px; bottom: 12px; font-family: 'Permanent Marker', cursive; color: var(--tinta); font-size: 17px; transform: rotate(-1deg); }
.polaroid-tape { position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; background: rgba(232,163,23,.85); transform: translateX(-50%) rotate(-4deg); mix-blend-mode: multiply; }
.sello-rev { position: absolute; right: -14px; top: 22px; font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--ambar); border: 2px solid var(--ambar); padding: 8px 12px; transform: rotate(8deg); background: rgba(28,23,16,.85); }

/* ---------- cabeceras de sección ---------- */
.lsec { padding-top: clamp(44px, 6vw, 84px); }
.lsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--tinta); padding-bottom: 16px; }
.lsec-title { font-weight: 900; font-size: clamp(30px, 4.6vw, 56px); letter-spacing: -.035em; line-height: .98; margin: 8px 0 0; text-wrap: pretty; }
.lsec-title .amb { color: var(--ambar-osc); }
.band-ink .lsec-head { border-bottom-color: var(--borde-osc); }
.band-ink .lsec-title .amb { color: var(--ambar); }
.band-ink .sec-eyebrow { color: var(--ambar); }
.band-ink .sec-link { color: var(--papel); }

/* ---------- vitrina ---------- */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.vcard { border: 1px solid var(--tinta); background: var(--blanco); display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.vcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,23,16,.16); }
.vcard-photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--tile); border-bottom: 1px solid var(--tinta); }
.vcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform .8s cubic-bezier(.2,.7,.2,1); }
.vcard-photo img.b { opacity: 0; }
.vcard:hover .vcard-photo img.a { transform: scale(1.04); }
.vcard:hover .vcard-photo img.b { opacity: 1; }
.vcard-estado { position: absolute; left: 10px; top: 10px; font-weight: 900; font-size: 10px; letter-spacing: .14em; background: var(--papel); color: var(--tinta); padding: 6px 9px; border: 1px solid var(--tinta); }
.vcard-estado.res { background: var(--ambar); }
.vcard-body { padding: 14px 13px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vcard-top b { font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.vcard-top span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--dim); text-align: right; }
.vcard p { font-size: 13.5px; color: var(--gris); line-height: 1.45; margin: 0; }
.vcard--mas { display: none; }
.vgrid.abierta .vcard--mas { display: flex; }
.vmas { grid-column: 1 / -1; margin-top: 4px; padding: 18px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); font-family: 'Onest', system-ui, sans-serif; font-weight: 900; font-size: 12.5px; letter-spacing: .12em; cursor: pointer; transition: background .15s, color .15s; }
.vmas:hover { background: var(--tinta); color: var(--papel); }
.vgrid.abierta .vmas { display: none; }
.vfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.vfoot .mono { font-size: 10px; letter-spacing: .14em; color: var(--dim); }
.vask { margin-top: 26px; border: 1px solid var(--tinta); background: var(--tile); padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.vask h3 { margin: 0; font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
.vask p { margin: 4px 0 0; font-size: 13.5px; color: var(--gris); }

/* ---------- dónde comprar: franja compacta ---------- */
.plats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 24px; }
.plat { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1px solid var(--tinta); color: var(--tinta); text-decoration: none; background: var(--papel); transition: background .15s, color .15s, transform .35s cubic-bezier(.2,.7,.2,1); }
.plat:hover { background: var(--tinta); color: var(--papel); transform: translateY(-3px); }
.plat .n { font-weight: 900; font-size: 17px; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.plat .n .plat-ico { width: 20px; height: 20px; display: inline-flex; }
.plat .n .plat-ico svg { width: 100%; height: 100%; }
.plat .h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ambar-osc); }
.plat:hover .h { color: var(--ambar); }
.plat .d { font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.plat:hover .d { color: var(--dim); }
.plat--amber { background: var(--ambar); }
.plat--amber .h { color: var(--tinta); font-weight: 600; }
.plat--amber .d { color: var(--tinta); }

/* ---------- quién hay detrás (banda tinta) ---------- */
.band-ink { background: var(--tinta); color: var(--papel); margin-top: clamp(44px, 6vw, 84px); padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 84px); }
.who { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: clamp(26px, 4vw, 64px); align-items: center; margin-top: 28px; }
.who-photo { position: relative; }
.who-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--borde-osc); display: block; }
.who-photo .mk { position: absolute; right: -8px; bottom: -14px; font-family: 'Permanent Marker', cursive; color: var(--ambar); font-size: 20px; transform: rotate(-4deg); background: var(--tinta); padding: 4px 8px; }
.who-claim { font-weight: 900; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; line-height: 1.08; margin: 0; text-wrap: pretty; }
.who-notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.who-nota { border-top: 1px solid var(--borde-osc); padding-top: 12px; }
.who-nota .n { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--ambar); }
.who-nota .h { font-weight: 900; font-size: 15px; margin: 6px 0 4px; letter-spacing: -.01em; }
.who-nota .t { font-size: 13px; line-height: 1.55; color: var(--dim); margin: 0; }
.who-quote { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.who-quote p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--papel); max-width: 60ch; }
.who-quote .btn-card { color: var(--papel); border-color: var(--papel); }
.who-quote .btn-card:hover { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }

/* ---------- los vídeos: muro de portadas ---------- */
.reels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 26px; }
.reel { position: relative; display: block; aspect-ratio: 9/16; overflow: hidden; border: 1px solid var(--tinta); background: var(--tinta); text-decoration: none; color: var(--papel); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.reel:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(28,23,16,.28); }
.reel:hover img { transform: scale(1.05); }
.reel .play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(247,243,234,.92); display: flex; align-items: center; justify-content: center; transition: transform .35s; }
.reel .play::after { content: ''; border-left: 16px solid var(--tinta); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.reel:hover .play { transform: scale(1.12); }
.reel .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; background: linear-gradient(transparent, rgba(28,23,16,.92)); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--ambar); }
.reels-foot { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .vgrid { grid-template-columns: repeat(2, 1fr); }
  .plats { grid-template-columns: repeat(3, 1fr); }
  .reels { grid-template-columns: repeat(3, 1fr); }
  .who-notas { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lhero-grid { grid-template-columns: 1fr; padding-top: 28px; }
  .lhero-h { font-size: clamp(34px, 11vw, 48px); max-width: none; }
  .polaroid { justify-self: center; width: min(78vw, 300px); margin-top: 8px; }
  .sello-rev { right: -6px; }
  .who { grid-template-columns: 1fr; }
  .who-photo { max-width: 320px; }
  .plats { grid-template-columns: 1fr 1fr; }
  .plat--amber { grid-column: 1 / -1; }
  .reels { grid-template-columns: repeat(2, 1fr); }
  .vgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vcard-top b { font-size: 15px; }
  .vcard p { font-size: 12.5px; }
}

.band-ink, .lhero { --dim: #a59c89; }

/* ---------- entrada del hero: una vez, al cargar (arranca cuando se va la pantalla de carga) ---------- */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-mk { from { opacity: 0; transform: rotate(-3deg) translateY(.35em); } to { opacity: 1; transform: rotate(-3deg) translateY(-.15em); } }
@keyframes hero-h { from { transform: translateY(26px); } to { transform: none; } }
@keyframes hero-pol { from { transform: translateY(40px) rotate(3deg); } to { transform: none; } }
@keyframes hero-sello { 0% { opacity: 0; transform: rotate(8deg) scale(2.3); } 60% { opacity: 1; transform: rotate(8deg) scale(.94); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }
.lhero .eyebrow-amber, .lhero .wordmark, .lhero-p, .lhero-ctas, .lhero-facts { animation: hero-in .7s var(--ease-out) both; }
.lhero-h > span:not(.mk) { display: inline-block; animation: hero-h .8s var(--ease-out) both; }
.lhero-h > .mk { animation: hero-mk .6s var(--ease-out) .34s both; }
.lhero .eyebrow-amber { animation-delay: 0s; } .lhero .wordmark { animation-delay: .04s; }
.lhero-h > span:nth-child(1) { animation-delay: .08s; } .lhero-h > span:nth-child(2) { animation-delay: .16s; } .lhero-h > span:nth-child(3) { animation-delay: .24s; }
.lhero-p { animation-delay: .32s; } .lhero-ctas { animation-delay: .4s; } .lhero-facts { animation-delay: .48s; }
.polaroid { perspective: 900px; animation: hero-pol .9s var(--ease-out) .12s both; }
.polaroid-card { transform-style: preserve-3d; }
.sello-rev { animation: hero-sello .45s var(--ease-out) .95s both; }
html.sin-carga .lhero .eyebrow-amber, html.sin-carga .lhero .wordmark, html.sin-carga .lhero-h > span, html.sin-carga .lhero-p, html.sin-carga .lhero-ctas, html.sin-carga .lhero-facts, html.sin-carga .polaroid, html.sin-carga .sello-rev,
html.hero-go .lhero .eyebrow-amber, html.hero-go .lhero .wordmark, html.hero-go .lhero-h > span, html.hero-go .lhero-p, html.hero-go .lhero-ctas, html.hero-go .lhero-facts, html.hero-go .polaroid, html.hero-go .sello-rev { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .lhero .eyebrow-amber, .lhero .wordmark, .lhero-h > span, .lhero-p, .lhero-ctas, .lhero-facts, .polaroid, .sello-rev { animation: none; } }
/* el botón de play de los vídeos respira un poco al pasar por encima */
.reel .play { transition: transform .35s var(--ease-out), background .2s; }
.reel:hover .play { transform: scale(1.14); background: var(--ambar); }