/* Capa de acabado para las landings (LOOM y La Bendición): barra flotante, botones en píldora con flecha,
   doble marco en fotos y tarjetas, etiquetas en píldora, grano de papel y más aire. Va después del estilo de cada página. */
:root { --curva: cubic-bezier(.32, .72, 0, 1); }

/* Grano de papel, fijo y sin tocar el scroll */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .022;
  background-image: url("assets/grano.png"); background-size: 96px; }

/* Barra en isla: flota despegada del borde */
header.top { position: fixed !important; inset: auto !important; top: 14px !important; left: 50% !important; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  z-index: 60; border-radius: 999px; background: rgba(26, 23, 20, .58) !important; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 50px -18px rgba(0, 0, 0, .45); }
header.top .wrap { height: auto !important; max-width: none; padding: 7px 7px 7px 22px !important; gap: 26px !important; }
header.top nav { gap: 24px !important; }
header.top nav a:not(.btn) { color: rgba(255, 255, 255, .82) !important; transition: color .4s var(--curva); }
header.top nav a:not(.btn):hover { color: #fff !important; }
header.top img { height: 30px !important; }
header.top * { white-space: nowrap; }

/* Botones: píldora, presión física y flecha en su propio círculo */
.btn { border-radius: 999px !important; transition: transform .5s var(--curva), background .5s var(--curva), color .5s var(--curva), box-shadow .5s var(--curva), border-color .5s var(--curva) !important; }
.btn:active { transform: scale(.98); }
.btn .flecha { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: -16px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 14px; line-height: 1; transition: transform .5s var(--curva); }
.btn:hover .flecha { transform: translate(3px, -1px) scale(1.06); }
.btn-linea .flecha, .btn-borde .flecha { background: rgba(0, 0, 0, .07); }

/* Etiqueta sobre cada titular, en píldora */
.rotulo, .pre { display: inline-flex !important; align-items: center; width: max-content; border-radius: 999px; padding: 6px 13px; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .2em !important; text-transform: uppercase;
  background: color-mix(in srgb, currentColor 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }

/* Doble marco: bandeja exterior con línea fina y contenido interior con su propio radio */
.bezel { padding: 6px; border-radius: 30px; background: rgba(28, 25, 22, .045); box-shadow: inset 0 0 0 1px rgba(28, 25, 22, .07), 0 30px 60px -40px rgba(28, 25, 22, .35); }
.bezel.osc { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -40px rgba(0, 0, 0, .6); }
.bezel { display: flex; flex-direction: column; }
.bezel > * { flex: 1 1 auto; min-height: 0; border-radius: 24px !important; overflow: hidden; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .15); }
.bezel > img, .bezel > iframe { display: block; }

/* Más aire entre secciones */
section:not(.hero):not(.banda) { padding-top: clamp(88px, 11vw, 150px); padding-bottom: clamp(88px, 11vw, 150px); }

/* Curvas de resorte también en enlaces, pestañas y filas */
a, .tabs button, .fila, details summary { transition-timing-function: var(--curva) !important; }

/* Menú del celular */
.hamb { display: none; position: relative; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
.hamb i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .6s var(--curva); }
.hamb i:first-child { transform: translateY(-4px); }
.hamb i:last-child { transform: translateY(4px); }
.menu-on .hamb i:first-child { transform: rotate(45deg); }
.menu-on .hamb i:last-child { transform: rotate(-45deg); }
.menu-cel { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 100px 28px 40px;
  background: rgba(20, 18, 16, .82); backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .6s var(--curva), visibility 0s .6s; }
.menu-on .menu-cel { opacity: 1; visibility: visible; transition: opacity .6s var(--curva); }
.menu-cel a, .menu-cel button { font-family: inherit; background: none; border: 0; text-align: left; cursor: pointer; color: #fff; text-decoration: none; font-size: 34px; line-height: 1.25; letter-spacing: -.01em; padding: 8px 0; opacity: 0; transform: translateY(40px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.menu-on .menu-cel a, .menu-on .menu-cel button { opacity: 1; transform: none; }
.menu-cel .cta { margin-top: 26px; align-self: flex-start; font-size: 17px; font-weight: 600; padding: 15px 26px; border-radius: 999px; background: #fff; color: #1c1917; }
.menu-on { overflow: hidden; }
.menu-on body { overflow: hidden; }

@media (max-width: 760px) {
  .hamb { display: block; }
  header.top nav { display: none !important; }
  header.top { top: 10px !important; }
  header.top .wrap { padding: 6px 6px 6px 16px !important; gap: 14px !important; }
  header.top img { height: 26px !important; }
  header.top .logo span { font-size: 14px !important; }
  header.top .btn { min-height: 40px !important; padding: 0 16px !important; font-size: 14px !important; }
  header.top .btn .flecha { display: none; }
  .bezel { padding: 4px; border-radius: 22px; }
  .bezel > * { border-radius: 18px !important; }
  .btn .flecha { width: 26px; height: 26px; margin-right: -12px; }
}

/* Con el plano abierto a pantalla completa la barra flotante se esconde */
.modal-on header.top, body.modal-on header.top { opacity: 0; pointer-events: none; }

/* ---------- Segunda ronda: cine, recorrido y detalles ---------- */
/* Portada: la foto entra acercándose y luego se mueve un poco con el scroll (profundidad) */
.hero > img, .hero figure img { animation: entraFoto 1.9s var(--curva) both; }
@keyframes entraFoto { from { scale: 1.14; filter: brightness(.65); } to { scale: 1.04; filter: none; } }
@supports (animation-timeline: scroll()) {
  .hero > img, .hero figure img { animation: entraFoto 1.9s var(--curva) both, profundidad linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 110vh; }
  @keyframes profundidad { to { translate: 0 14%; } }
  /* Línea de progreso arriba */
  body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; transform-origin: 0 50%; scale: 0 1; background: var(--progreso, #c2aa63); animation: progreso linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes progreso { to { scale: 1 1; } }
}
/* Lote escogido: aparece con un pulso */
.elegido:not([hidden]), #elegido:not([hidden]) { animation: pulso 1.1s var(--curva) both; }
@keyframes pulso { 0% { opacity: 0; transform: translateY(14px) scale(.97); } 60% { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgba(194, 170, 99, .35); } 100% { box-shadow: 0 0 0 0 rgba(194, 170, 99, 0); } }
/* Barra inferior del celular: se esconde al bajar y vuelve al subir */
.sticky { transition: translate .5s var(--curva), visibility .5s !important; }
.sticky.oculta { translate: 0 110%; }
/* Pantalla de entrada (solo la primera vez en la sesión) */
.carga { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--carga-fondo, #1c1a17); transition: opacity .7s var(--curva), visibility .7s; }
.carga img { width: 120px; max-width: 40vw; animation: cargaLogo 1.2s var(--curva) both; }
@keyframes cargaLogo { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.carga.fuera, .sin-carga .carga { opacity: 0; visibility: hidden; }
/* Cursor propio (solo mouse) */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; background: rgba(28, 25, 22, .85); color: #fff;
  display: grid; place-items: center; font: 600 11px system-ui, sans-serif; letter-spacing: .04em; transition: width .45s var(--curva), height .45s var(--curva), margin .45s var(--curva), background .45s var(--curva), opacity .3s; mix-blend-mode: normal; }
.cursor span { opacity: 0; transition: opacity .3s; }
.cursor.grande { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(28, 25, 22, .72); backdrop-filter: blur(4px); }
.cursor.grande span { opacity: 1; }
.cursor.enlace { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(194, 170, 99, .35); }
.cursor.fuera { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
/* Botón imán: se mueve con translate para no chocar con el escalado al presionar */
.btn { transition: translate .6s var(--curva), transform .5s var(--curva), background .5s var(--curva), color .5s var(--curva), box-shadow .5s var(--curva) !important; }
@media (prefers-reduced-motion: reduce) { .hero > img, .hero figure img, body::before, .carga img { animation: none !important; } }

/* La foto de portada crece al entrar: que no genere scroll de lado */
.hero { overflow: hidden; }

/* Botones en una sola línea; en celular la flecha se esconde si no cabe */
.btn { white-space: nowrap; }
@media (max-width: 420px) { .hero .acc .btn .flecha { display: none; } .hero .acc .btn { padding: 0 18px !important; } }

/* Reunión 30-oct: más margen a los lados y la invitación al quiz del lote ideal */
.wrap { padding-left: clamp(24px, 5vw, 64px) !important; padding-right: clamp(24px, 5vw, 64px) !important; }
.mosaico { padding-left: clamp(24px, 5vw, 64px) !important; padding-right: clamp(24px, 5vw, 64px) !important; }
/* 31-oct: la invitación cubre toda la pantalla */
.invita { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(20,17,15,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: invita-fondo .5s ease-out both; }
.invita[hidden] { display: none; }
.invita .tarjeta { width: min(520px, 100%); padding: clamp(28px, 5vw, 44px); border-radius: 28px; background: #fff; color: #1c1917; text-align: center; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); animation: invita .8s var(--curva) .1s both; }
@keyframes invita-fondo { from { opacity: 0; } }
@keyframes invita { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.invita p { margin: 0 0 26px; font-size: 16px; line-height: 1.5; color: #57534e; }
.invita .pre { margin: 0 0 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #B35F27; font-weight: 600; }
.invita b { display: block; margin-bottom: 10px; font-size: clamp(26px, 4.4vw, 34px); line-height: 1.15; color: #1c1917; }
.invita div { display: flex; flex-direction: column; gap: 10px; }
.invita button { min-height: 54px; border-radius: 999px; border: 0; font: 600 16px inherit; cursor: pointer; font-family: inherit; transition: transform .2s var(--curva); }
.invita button:active { transform: scale(.98); }
.invita .si { background: #1c1917; color: #fff; animation: invita-pulso 2.2s ease-in-out 1.2s infinite; }
.invita .no { background: transparent; color: #78716c; min-height: 44px; }
@keyframes invita-pulso { 50% { box-shadow: 0 0 0 10px rgba(179,95,39,.18); } }

/* El video va pegado a las fotos, sin franja oscura grande */
section.video:not(.hero) { padding-top: clamp(20px, 4vw, 56px); padding-bottom: clamp(20px, 4vw, 56px); }