/* ==========================================================================
   Mudanzas · 05 Contacto: una caja de mudanza que se abre y de ella salen
   los datos de contacto, más «Abierto ahora» y botones de Llamar / WhatsApp.
   Secuencia (mudanzas-contacto.js agrega las clases en orden):
     .cc--llega  la caja cae y aterriza
     .cc--cinta  se jala la cinta
     .cc--abre   se abren las solapas
     .cc--listo  las tarjetas ya salieron; se puede tocar la caja para repetir
   Sin JavaScript o con «reducir movimiento» todo se ve ya abierto.
   ========================================================================== */

.cc { --carton: #c99d64; --carton-claro: #d6ad74; --carton-oscuro: #ad8048; --cinta: #e9d4a6; }

/* ------------------------------------------------------------------ encabezado */
.cc-encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.cc-accion { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.cc-estado { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.cc-estado b { font-weight: 600; }
.cc-punto { width: 9px; height: 9px; border-radius: 50%; background: #9aa3b2; flex: none; }
.cc-estado.abierto .cc-punto { background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); animation: cc-late 1.8s ease-out infinite; }
.cc-estado.pronto .cc-punto { background: #e0a100; }
.cc-estado.cerrado .cc-punto { background: #da3029; }
@keyframes cc-late { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .45); } 80%, 100% { box-shadow: 0 0 0 9px rgba(31, 157, 85, 0); } }
.cc-botones { display: flex; gap: 10px; }
.cc-botones .button { min-width: 150px; }
.cc-whatsapp { background: #1f9d55; }
.cc-whatsapp:hover { background: #17834a; }
.cc-horario span.hoy { font-weight: 700; color: var(--ink); }
.cc-horario span.hoy::after { content: " · hoy"; font-weight: 600; color: var(--blue); }

/* ------------------------------------------------------------------ escena */
.cc-escena { position: relative; margin-top: 34px; display: flex; flex-direction: column; align-items: center; }
.cc-caja-boton { all: unset; position: relative; display: block; width: 330px; height: 330px; perspective: 1000px; cursor: default; }
.cc--listo .cc-caja-boton { cursor: pointer; }
.cc-caja-boton:focus-visible { outline: 3px solid #2754a9; outline-offset: 6px; border-radius: 8px; }
.cc-pista { margin: 2px 0 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .5s; }
.cc--listo .cc-pista { opacity: 1; }
.cc-tarjetas { width: 100%; margin-top: 30px; }

/* caja: 240 de frente × 150 de alto × 170 de fondo */
.cc-caja { position: absolute; left: 45px; top: 92px; width: 240px; height: 150px; transform-style: preserve-3d; transform: scale(1.25) rotateX(-22deg) rotateY(-30deg); }
.cc-cara { position: absolute; left: 0; top: 0; width: 240px; height: 150px; background: var(--carton); box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .18); backface-visibility: hidden; }
.cc-frente { transform: translateZ(85px); background: linear-gradient(180deg, var(--carton-claro), var(--carton)); display: grid; place-items: center; }
.cc-atras { transform: rotateY(180deg) translateZ(85px); }
.cc-izq, .cc-der { width: 170px; left: 35px; background: var(--carton-oscuro); }
.cc-izq { transform: rotateY(-90deg) translateZ(120px); }
.cc-der { transform: rotateY(90deg) translateZ(120px); }
.cc-fondo { height: 170px; top: -10px; transform: rotateX(-90deg) translateZ(75px); background: var(--carton-oscuro); }
.cc-etiqueta { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px 9px; background: #fbfaf6; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); transform: translateY(6px); }
.cc-etiqueta img { width: 128px; height: auto; display: block; }
.cc-etiqueta b { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #5a4a2e; }
.cc-flechas { position: absolute; left: 12px; top: 10px; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: -2px; color: rgba(70, 45, 15, .55); }

/* tapa: plano horizontal arriba de la caja con las cuatro solapas */
.cc-arriba { position: absolute; left: 0; top: -10px; width: 240px; height: 170px; transform-style: preserve-3d; transform: translateY(-75px) rotateX(90deg); }
.cc-hueco { position: absolute; inset: 0; background: #5b3f1c; }
.cc-solapa { position: absolute; background: var(--carton-claro); box-shadow: inset 0 0 0 1px rgba(90, 60, 25, .2); transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.cc-solapa--atras { left: 0; top: 0; width: 240px; height: 85px; transform-origin: 50% 0; transform: translateZ(2px); }
.cc-solapa--frente { left: 0; top: 85px; width: 240px; height: 85px; transform-origin: 50% 100%; transform: translateZ(2px); }
.cc-solapa--izq { left: 0; top: 0; width: 120px; height: 170px; transform-origin: 0 50%; transform: translateZ(1px); background: var(--carton); }
.cc-solapa--der { left: 120px; top: 0; width: 120px; height: 170px; transform-origin: 100% 50%; transform: translateZ(1px); background: var(--carton); }
.cc-cinta { position: absolute; left: -2px; top: 73px; width: 244px; height: 24px; transform: translateZ(3px); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.5, 0, .2, 1);
  background: repeating-linear-gradient(90deg, var(--cinta) 0 46px, #e2cb98 46px 48px); box-shadow: 0 0 0 1px rgba(90, 60, 25, .12); }
/* punto de salida de las tarjetas: el centro de la boca de la caja */
.cc-boca { position: absolute; left: 115px; top: -12px; width: 10px; height: 10px; }
.cc-sombra { position: absolute; z-index: -1; left: 50px; right: 50px; bottom: 6px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(24, 26, 29, .28), transparent); }

/* ------------------------------------------------------------------ secuencia */
.cc--preparada .cc-caja-boton { opacity: 0; }
.cc--preparada .cc-pista { opacity: 0; }
.cc--preparada.cc--listo .cc-pista { opacity: 1; }
.cc--preparada .cc-tarjetas > div { opacity: 0; }
.cc--llega .cc-caja-boton { opacity: 1; animation: cc-cae .75s cubic-bezier(.3, 0, .3, 1) both; }
@keyframes cc-cae {
  0% { transform: translateY(-140px); opacity: 0; }
  55% { transform: translateY(0) scale(1.04, .94); opacity: 1; }
  75% { transform: translateY(-10px) scale(.99, 1.02); }
  100% { transform: none; opacity: 1; }
}
.cc--cinta .cc-cinta { transform: translateZ(3px) scaleX(0); }
.cc--abre .cc-solapa--frente { transform: translateZ(2px) rotateX(-235deg); }
.cc--abre .cc-solapa--atras { transform: translateZ(2px) rotateX(235deg); }
.cc--abre .cc-solapa--izq { transform: translateZ(1px) rotateY(-230deg); transition-delay: .18s; }
.cc--abre .cc-solapa--der { transform: translateZ(1px) rotateY(230deg); transition-delay: .18s; }

@media (max-width: 760px) {
  .cc-encabezado { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cc-accion { align-items: stretch; width: 100%; }
  .cc-estado { align-self: flex-start; font-size: 12px; }
  .cc-botones .button { flex: 1; min-width: 0; }
  .cc-escena { margin-top: 18px; }
  .cc-caja-boton { width: 260px; height: 200px; }
  .cc-caja { left: 10px; top: 44px; transform: scale(.78) rotateX(-22deg) rotateY(-30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-solapa, .cc-cinta { transition: none; }
  .cc--llega .cc-caja-boton { animation: none; }
  .cc-estado.abierto .cc-punto { animation: none; }
}