/* ============================================================
   css/cofre.css — El cofre de regalo (js/cofre.js + js/cofre-visual.js)
   Diseño elegido por Benjamín (22-10-2026): opción A, COFRE DEL TESORO, para los dos motivos (dibujo, colores y
   también el formato de los textos: chip, número grande, recuadro del tope, nota con ícono).
   Dos partes:
     1. El cartel (fondo, tarjeta, textos, botones): lo usa js/cofre.js. Colores y tamaños de la referencia
        (verde #0d5c35, naranja #ea580c para abrir; la tarjeta VIP es verde oscuro con borde dorado).
     2. El DIBUJO del cofre y sus animaciones: lo usa js/cofre-visual.js.
        Para cambiar el diseño se reemplazan cofre-visual.js y la parte 2 de este archivo.
   Público de 35 a 90 años: letra grande, un solo botón grande, nada de texto chico.
   ============================================================ */

/* ── 1. El cartel ─────────────────────────────────────────── */
.cofre-ov {
  position: fixed; inset: 0; z-index: 100010;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10, 24, 17, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overscroll-behavior: contain;
  animation: cofreFade .3s ease both;
}
.cofre-card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  background: #fff; color: #10241a;
  border-radius: 28px;
  padding: 18px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  font-family: inherit;
  animation: cofreEntrar .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.cofre-card.vip { background: #0d5c35; color: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 3px #fbbf24; }
.cofre-card.animando { overflow: hidden; }   /* mientras se abre, nada hace aparecer barras de scroll */
/* El cofre va arriba y los textos abajo, como en la referencia */
.cofre-escena { position: relative; display: block; margin: 0 0 4px; }

/* Cerrado: título, "Es para vos…" y el botón */
.cofre-cerrado { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.cofre-titulo { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 900; color: #10241a; }
.cofre-card.vip .cofre-titulo { font-size: 30px; color: #fcd34d; }
.cofre-sub { margin: 0 0 6px; font-size: 18px; line-height: 1.4; color: #4b6357; }
.cofre-card.vip .cofre-sub { color: #d1fae5; }
.cofre-cerrado .cofre-btn { margin-top: 0; }

/* Abriendo: el texto titila mientras se abre el cofre */
.cofre-abriendo-txt { margin: 6px 0 4px; font-size: 20px; font-weight: 800; color: #4b6357; animation: cofreParpadeo 1s ease-in-out infinite; }
.cofre-card.vip .cofre-abriendo-txt { color: #d1fae5; }

/* Abierto: el regalo en piezas grandes */
.cofre-revelar { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cofre-chip {
  font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0d5c35; background: #e7f4ec; border-radius: 999px; padding: 6px 14px;
}
.cofre-card.vip .cofre-chip { color: #3b2a00; background: #fbbf24; }
.cofre-numero { display: block; font-size: clamp(40px, 14vw, 54px); line-height: 1; font-weight: 900; color: #0d5c35; animation: cofreNumero .7s .2s cubic-bezier(.2, 1.6, .4, 1) both; }
.cofre-card.vip .cofre-numero { font-size: 64px; color: #fcd34d; }
.cofre-linea { font-size: 22px; line-height: 1.2; font-weight: 800; color: #10241a; }
.cofre-card.vip .cofre-linea { font-size: 26px; line-height: 1.1; font-weight: 900; color: #fff; }
.cofre-tope { font-size: 17px; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 12px; padding: 6px 12px; }
.cofre-texto { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: #10241a; }
.cofre-card.vip .cofre-texto { color: #fff; }
.cofre-texto2 { margin: 0; font-size: 17px; line-height: 1.45; color: #d1fae5; }
.cofre-nota { margin: 0 0 6px; font-size: 17px; line-height: 1.4; color: #4b6357; }
.cofre-nota svg { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.cofre-card.vip .cofre-nota { color: #a7f3d0; }
.cofre-revelar .cofre-btn { margin-top: 0; }
.cofre-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; margin-top: 16px; padding: 12px 18px; box-sizing: border-box;
  border: 0; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 21px; font-weight: 900;
  background: #0d5c35; color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cofre-btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.cofre-btn[disabled] { opacity: .8; cursor: default; }
.cofre-card.vip .cofre-btn { background: #fbbf24; color: #10241a; }
.cofre-btn.secundario { min-height: 52px; margin-top: 8px; background: transparent; color: #0d5c35; font-size: 19px; font-weight: 800; }
.cofre-card.vip .cofre-btn.secundario { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
/* "Abrir mi regalo": naranja, late suave para invitar a tocar */
#cofre-abrir { min-height: 62px; font-size: 22px; background: #ea580c; color: #fff; box-shadow: 0 6px 0 #9a3412; animation: cofreLatir 1.6s ease-in-out infinite; }
#cofre-abrir:active { transform: translateY(3px); box-shadow: 0 3px 0 #9a3412; }
#cofre-abrir[disabled] { animation: none; }
.cofre-resultado { animation: cofreRevelar .6s .05s cubic-bezier(.2, 1.3, .4, 1) both; }
html.cofre-abierto, html.cofre-abierto body { overflow: hidden !important; }

@keyframes cofreFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cofreEntrar { from { opacity: 0; transform: translateY(40px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cofreLatir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes cofreRevelar { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cofreNumero { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes cofreParpadeo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-height: 640px) {
  .cofre-titulo { font-size: 27px; }
}

/* ── 2. El dibujo: cofre del tesoro (js/cofre-visual.js) ───── */
/* Fases en el contenedor: fase-cerrado → fase-abriendo → fase-abierto */
.cv-cofre { position: relative; width: 100%; height: 232px; transition: height .5s ease; }
.cv-cofre.fase-abierto { height: 150px; }
.cv-cofre .arte { display: block; margin: 0 auto; width: 240px; height: 231px; overflow: visible; transform-origin: 50% 0; transition: transform .5s ease; }
.cv-cofre.fase-abierto .arte { transform: scale(.64); }

/* Cerrado: se menea cada tanto */
.cv-cofre .cofre { transform-box: view-box; transform-origin: 130px 198px; }
.cv-cofre.fase-cerrado .cofre { animation: cvMenear 2.4s ease-in-out infinite; }
/* Abriendo: sacude, la tapa se abre (bisagra a la izquierda), salen los rayos y las 5 bolillas */
.cv-cofre.fase-abriendo .cofre { animation: cvSacudir .45s ease-in-out; }
.cv-cofre .tapa { transform-box: view-box; transform-origin: 44px 116px; }
.cv-cofre.fase-abriendo .tapa { animation: cvAbrirTapa .7s .4s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.cv-cofre.fase-abierto .tapa { transform: translate(-4px, -14px) rotate(-22deg); }
.cv-cofre .rayos { transform-box: view-box; transform-origin: 130px 108px; opacity: 0; }
.cv-cofre.fase-abriendo .rayos { animation: cvRayosIn .7s .5s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.cv-cofre.fase-abierto .rayos { opacity: 1; animation: cvVaiven 4s ease-in-out infinite; }
.cv-cofre .moneda { transform-box: view-box; transform-origin: 130px 110px; opacity: 0; }
.cv-cofre.fase-abriendo .moneda { animation: cvBolilla .9s cubic-bezier(.2, .9, .3, 1) forwards; animation-delay: calc(.55s + var(--md, 0s)); }
.cv-cofre.fase-abierto .moneda { opacity: 1; transform: translate(var(--mx), var(--my)); }
.cv-cofre .m1 { --mx: -78px; --my: -62px; --md: 0s; }
.cv-cofre .m2 { --mx: -40px; --my: -96px; --md: .06s; }
.cv-cofre .m3 { --mx: 4px;   --my: -112px; --md: .12s; }
.cv-cofre .m4 { --mx: 46px;  --my: -94px; --md: .18s; }
.cv-cofre .m5 { --mx: 82px;  --my: -58px; --md: .24s; }
/* Destellos que titilan siempre */
.cv-cofre .destello { transform-box: fill-box; transform-origin: center; animation: cvTitilar 1.8s ease-in-out infinite; }
.cv-cofre .d2 { animation-delay: .5s; } .cv-cofre .d3 { animation-delay: 1s; } .cv-cofre .d4 { animation-delay: 1.4s; }

/* Confeti: 20 piezas (c0 a c19). Va en una capa fija sobre la pantalla, con el origen en el cofre, para que no
   haga aparecer barras de scroll en la tarjeta (js/cofre-visual.js pone --ox / --oy). */
.cv-confetis { position: fixed; inset: 0; z-index: 100011; pointer-events: none; overflow: hidden; --base: .6s; }
.cv-confetis .confeti {
  position: absolute; left: var(--ox, 50%); top: var(--oy, 46%); width: 11px; height: 6px; border-radius: 2px; opacity: 0;
  animation: cvConfeti 2.4s cubic-bezier(.25, .7, .4, 1) both; animation-delay: calc(var(--base) + var(--dd, 0s));
}
.cv-confetis .confeti.r { width: 9px; height: 9px; border-radius: 50%; }
.cv-confetis .c0  { --dx: 30px;   --up: -90px;  --dy: 300px; --r: 300deg;  --dd: 0s;   background: #1a7f4b; }
.cv-confetis .c1  { --dx: -67px;  --up: -143px; --dy: 341px; --r: -371deg; --dd: .04s; background: #f59e0b; }
.cv-confetis .c2  { --dx: 104px;  --up: -196px; --dy: 382px; --r: 442deg;  --dd: .08s; background: #ea580c; }
.cv-confetis .c3  { --dx: -141px; --up: -139px; --dy: 423px; --r: -513deg; --dd: .12s; background: #4ade80; }
.cv-confetis .c4  { --dx: 178px;  --up: -192px; --dy: 464px; --r: 584deg;  --dd: .16s; background: #fde047; }
.cv-confetis .c5  { --dx: -65px;  --up: -135px; --dy: 505px; --r: -655deg; --dd: .2s;  background: #3b82f6; }
.cv-confetis .c6  { --dx: 102px;  --up: -188px; --dy: 326px; --r: 726deg;  --dd: 0s;   background: #1a7f4b; }
.cv-confetis .c7  { --dx: -139px; --up: -131px; --dy: 367px; --r: -797deg; --dd: .04s; background: #f59e0b; }
.cv-confetis .c8  { --dx: 176px;  --up: -184px; --dy: 408px; --r: 368deg;  --dd: .08s; background: #ea580c; }
.cv-confetis .c9  { --dx: -63px;  --up: -127px; --dy: 449px; --r: -439deg; --dd: .12s; background: #4ade80; }
.cv-confetis .c10 { --dx: 100px;  --up: -180px; --dy: 490px; --r: 510deg;  --dd: .16s; background: #fde047; }
.cv-confetis .c11 { --dx: -137px; --up: -123px; --dy: 311px; --r: -581deg; --dd: .2s;  background: #3b82f6; }
.cv-confetis .c12 { --dx: 174px;  --up: -176px; --dy: 352px; --r: 652deg;  --dd: 0s;   background: #1a7f4b; }
.cv-confetis .c13 { --dx: -61px;  --up: -119px; --dy: 393px; --r: -723deg; --dd: .04s; background: #f59e0b; }
.cv-confetis .c14 { --dx: 98px;   --up: -172px; --dy: 434px; --r: 794deg;  --dd: .08s; background: #ea580c; }
.cv-confetis .c15 { --dx: -135px; --up: -115px; --dy: 475px; --r: -365deg; --dd: .12s; background: #4ade80; }
.cv-confetis .c16 { --dx: 172px;  --up: -168px; --dy: 516px; --r: 436deg;  --dd: .16s; background: #fde047; }
.cv-confetis .c17 { --dx: -59px;  --up: -111px; --dy: 337px; --r: -507deg; --dd: .2s;  background: #3b82f6; }
.cv-confetis .c18 { --dx: 96px;   --up: -164px; --dy: 378px; --r: 578deg;  --dd: 0s;   background: #1a7f4b; }
.cv-confetis .c19 { --dx: -133px; --up: -107px; --dy: 419px; --r: -649deg; --dd: .04s; background: #f59e0b; }

@keyframes cvMenear { 0%, 52%, 100% { transform: rotate(0); } 60% { transform: rotate(-4deg); } 68% { transform: rotate(4deg); } 76% { transform: rotate(-3deg); } 84% { transform: rotate(2deg); } 92% { transform: rotate(0); } }
@keyframes cvSacudir { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes cvAbrirTapa { from { transform: none; } to { transform: translate(-4px, -14px) rotate(-22deg); } }
@keyframes cvRayosIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes cvVaiven { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes cvBolilla {
  0% { opacity: 0; transform: translate(0, 10px) scale(.3); }
  15% { opacity: 1; }
  70% { transform: translate(var(--mx), calc(var(--my) - 18px)) scale(1); }
  100% { opacity: 1; transform: translate(var(--mx), var(--my)) scale(1); }
}
@keyframes cvTitilar { 0%, 100% { transform: scale(.3); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes cvConfeti {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) rotate(0); }
  6% { opacity: 1; }
  30% { transform: translate(-50%, -50%) translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .35)); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

@media (max-height: 640px) {
  .cv-cofre { height: 190px; }
  .cv-cofre .arte { transform: scale(.82); }
  .cv-cofre.fase-abierto { height: 130px; }
  .cv-cofre.fase-abierto .arte { transform: scale(.56); }
}

/* Movimiento reducido: sin meneo, sin vaivén, sin confeti; las fases saltan directo a su estado final */
@media (prefers-reduced-motion: reduce) {
  .cofre-ov, .cofre-card, .cofre-resultado, #cofre-abrir, .cofre-numero, .cofre-abriendo-txt { animation: none; }
  .cv-cofre, .cv-cofre .arte { transition: none; }
  .cv-cofre .cofre, .cv-cofre .tapa, .cv-cofre .rayos, .cv-cofre .moneda, .cv-cofre .destello {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  }
  .cv-confetis { display: none; }
}