:root{
  --primario:#C9A28A; --fondo:#F4ECE5; --texto:#3A3A3A; --acento:#E8B4B8;
  --tarjeta:#fffdfa; --sombra:0 10px 30px rgba(80,55,40,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--fondo); color:var(--texto);
  -webkit-font-smoothing:antialiased;
}
.oculto{display:none!important}

/* ---------- MAPA / SELECCIÓN ---------- */
#mapa{max-width:880px;margin:0 auto;padding:32px 20px 60px}
.cabecera{text-align:center;margin-bottom:28px}
.cabecera h1{font-size:1.7rem;line-height:1.2;color:#6e4f3a}
.cabecera p{margin-top:8px;color:#8a7666;font-style:italic}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.modulo-card{
  background:var(--tarjeta);border-radius:18px;padding:18px 16px;cursor:pointer;
  box-shadow:var(--sombra);border:2px solid transparent;transition:transform .15s,border-color .15s;
  display:flex;flex-direction:column;gap:8px;min-height:120px;position:relative;
}
.modulo-card:hover{transform:translateY(-3px);border-color:var(--primario)}
.modulo-card .num{
  width:34px;height:34px;border-radius:50%;background:var(--primario);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.modulo-card h3{font-size:.98rem;line-height:1.25;color:#5c4636}
.modulo-card.bloqueado{opacity:.55;cursor:not-allowed}
.modulo-card .candado{position:absolute;top:14px;right:14px;font-size:1.1rem}
.modulo-card .listo{position:absolute;top:14px;right:14px;color:#5a9a6b;font-weight:700}

/* ---------- REPRODUCTOR ---------- */
#player{position:fixed;inset:0;background:#1c140e;display:flex;flex-direction:column}
.escenario{position:relative;flex:1;overflow:hidden;background:#1c140e}
.backdrop{position:absolute;inset:0;background:#1c140e center/cover no-repeat;
  filter:blur(34px) brightness(.55);transform:scale(1.2);z-index:0}
.avatar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;transition:opacity .4s ease}
.avatar-video.oculto{display:none}
.avatar-video.cargando{opacity:0}
.degradado{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(20,14,9,.85) 0%,rgba(20,14,9,.15) 38%,transparent 60%);}

/* tarjeta de texto (planos de ambiente) — SIEMPRE por delante del vídeo */
.subtitulo{
  position:absolute;left:0;right:0;bottom:96px;z-index:3;padding:0 24px;text-align:center;
  color:#fff;font-size:1.18rem;line-height:1.45;text-shadow:0 2px 12px rgba(0,0,0,.55);
  transition:opacity .4s; max-width:720px;margin:0 auto;
}

/* botón CTA de WhatsApp (segmento de contacto) */
.cta-whatsapp{
  position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:4;
  background:#25D366;color:#fff;text-decoration:none;padding:15px 24px;border-radius:32px;
  font-weight:700;font-size:1.05rem;box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  animation:ctaIn .5s ease both;
}
.cta-whatsapp:active{transform:translateX(-50%) scale(.97)}
.cta-whatsapp.oculto{display:none}
@keyframes ctaIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* tarjeta de producto (segmentos producto) */
.producto{
  position:absolute;right:18px;bottom:104px;z-index:4;width:min(290px,72vw);background:var(--tarjeta);
  border-radius:18px;box-shadow:var(--sombra);overflow:hidden;
  transform:translateX(120%);transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.producto.dentro{transform:translateX(0)}
.producto img{width:100%;height:190px;object-fit:contain;background:#fff;padding:10px}
.producto .info{padding:12px 14px 16px}
.producto .info .et{font-size:.78rem;color:#9a8472;text-transform:uppercase;letter-spacing:.04em}
.producto .info h4{font-size:1.05rem;color:#5c4636;margin:2px 0 10px}
.producto .info a{
  display:block;text-align:center;background:var(--primario);color:#fff;text-decoration:none;
  padding:11px;border-radius:12px;font-weight:600;
}
.producto .info a:active{transform:scale(.98)}

/* barra de control */
.controles{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#140e09;color:#f4ece5}
.controles button{
  background:#2c2018;color:#f4ece5;border:none;width:46px;height:46px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.controles button.play{background:var(--primario);width:56px;height:56px;font-size:1.4rem}
.controles .titulo-mod{flex:1;font-size:.92rem;opacity:.85}
.progreso{height:4px;background:#2a1f16;overflow:hidden}
.barra-fill{height:100%;width:0;background:var(--primario);transition:width .25s linear}
.btn-volver{position:absolute;top:14px;left:14px;z-index:5;background:rgba(0,0,0,.45);color:#fff;
  border:none;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:.85rem}
/* zoom suave (Ken Burns) sobre la foto real del producto */
.producto img.zoom{animation:kenburns 14s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}

/* MODO PRODUCTO: la foto real es la protagonista, ficha grande y centrada */
#escenario.modo-producto .backdrop{
  background:radial-gradient(circle at 50% 38%,#f0e4d8,#d6c1af);
  filter:none;transform:none;opacity:1
}
#escenario.modo-producto .degradado{opacity:0}
.modo-producto .producto{
  right:auto;bottom:auto;top:50%;left:50%;width:min(380px,88vw);
  transform:translate(-50%,-48%) scale(.92);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s;
}
.modo-producto .producto.dentro{transform:translate(-50%,-50%) scale(1);opacity:1}
.modo-producto .producto img{height:min(46vh,420px)}

@media(min-width:560px){
  .subtitulo{font-size:1.3rem;bottom:110px}
}