/* El marco común de todas las páginas de dplasesores.com (las de capítulos y las demás): la barra de arriba con el menú,
   la música, el tema, el idioma y la cita; el menú del teléfono; los botones; y el pie con el mapa de la web. Va con
   comun.css (los colores de los dos temas) y antes de experiencia.css (capítulos) o sitio.css (las demás). */

/* ── Barra superior ─────────────────────────────────────── */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 26px; padding: 18px var(--margen); border-bottom: 1px solid transparent; transition: background .35s, padding .35s, border-color .35s; }
.barra.con-fondo { background: rgba(var(--fondo-rgb), .92); padding-top: 12px; padding-bottom: 12px; border-color: var(--linea); }
.marca { font: 700 1.55rem/1 var(--display); letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.marca small { font: 600 .62rem/1 var(--texto); letter-spacing: .28em; color: var(--tenue); margin-left: 8px; }
.punto { color: var(--cielo); }
.menu { display: flex; gap: 24px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--suave); font-size: .92rem; position: relative; padding: 6px 0; transition: color .25s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cielo); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva); }
.menu a:hover { color: var(--tinta); }
.menu a:hover::after { transform: scaleX(1); }
.menu-cliente { color: var(--indigo) !important; }
.barra-acciones { display: flex; align-items: center; gap: 10px; }
.idioma { font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--tenue); text-decoration: none; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 9px 11px; line-height: 1; }
.idioma:hover { color: var(--tinta); border-color: var(--tinta); }

/* Menú del teléfono */
.menu-boton { display: none; padding: 0; width: 40px; }
.menu-rayas { display: grid; gap: 4px; width: 16px; }
.menu-rayas i { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .3s var(--curva), opacity .3s; }
.menu-abierto .menu-rayas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abierto .menu-rayas i:nth-child(2) { opacity: 0; }
.menu-abierto .menu-rayas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-movil { position: fixed; inset: 0; z-index: 25; display: grid; align-content: center; gap: 6px; padding: 90px 28px 40px; background: rgba(var(--fondo-rgb), .97); }
.menu-movil[hidden] { display: none; }
.menu-movil a { font: 600 clamp(1.5rem, 6.5vw, 2rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--tinta); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.menu-movil a:hover, .menu-movil a:focus-visible { color: var(--cielo); }
.menu-movil .menu-movil-cta { color: var(--cielo); border-bottom: 0; margin-top: 10px; }
.menu-abierto { overflow: hidden; }

/* ── Botones ────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 .98rem/1 var(--texto); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--alza, 0px)), 0);
  transition: transform .3s var(--curva), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.boton-claro { background: var(--boton-fondo); color: var(--boton-texto); }
.boton-claro:hover { --alza: -2px; box-shadow: 0 10px 34px -8px var(--boton-sombra); }
.boton-claro::after { content: "→"; transition: transform .3s var(--curva); }
.boton-claro:hover::after { transform: translateX(4px); }
.boton-linea { border-color: var(--linea-fuerte); color: var(--tinta); background: transparent; }
.boton-linea:hover { border-color: var(--cielo); color: var(--cielo); --alza: -2px; }
.boton-pequeno { min-height: 38px; padding: 0 16px; font-size: .86rem; }
.boton-grande { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }

/* ── Pie ────────────────────────────────────────────────── */
.pie { position: relative; z-index: 2; padding: 48px var(--margen) 110px; border-top: 1px solid var(--linea); background: rgba(var(--fondo-rgb), .94); display: grid; gap: 18px; font-size: .88rem; color: var(--tenue); }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--cielo); }
.pie-marca { font: 700 1.3rem/1 var(--display); color: var(--tinta); }
.pie-marca span:last-child { font: 400 .85rem var(--texto); color: var(--tenue); margin-left: 10px; }
.pie-legal a { color: var(--tenue); }
.pie-copy { margin: 0; font-size: .8rem; }

@media (max-width: 1180px) {
  .menu { gap: 16px; }
  .menu a:nth-child(4) { display: none; }
}
@media (max-width: 1020px) {
  .menu { display: none; }
  .menu-boton { display: inline-flex; }
  .barra-acciones { margin-left: auto; }
}
@media (max-width: 760px) {
  .barra { padding: 14px 16px; gap: 12px; }
  .barra .boton-pequeno, .sonido-texto { display: none; }
  .barra-acciones { gap: 8px; }
  .redondo { min-height: 40px; min-width: 40px; padding: 0 11px; }
  .tema { width: 40px; padding: 0; }
}
@media (max-width: 420px) { .marca small { display: none; } }

/* El Arsenal (tienda.html): en dorado en la barra y en el menú del teléfono, para que se vea que es la tienda */
.menu a.menu-tienda, .menu-movil a.menu-tienda { color: var(--oro); }
.menu a.menu-tienda::before, .menu-movil a.menu-tienda::before { content: "✦ "; }
.menu a.menu-tienda::after { background: var(--oro); }

/* La página en la que se está, marcada en los menús */
.menu a[aria-current="page"] { color: var(--tinta); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a.menu-tienda[aria-current="page"] { color: var(--oro); }
.menu-movil a[aria-current="page"] { color: var(--cielo); }

/* Entre el escritorio ancho y el teléfono (1021–1280 px) la barra se partía en dos o tres líneas: sin partir los textos,
   la música con solo su icono y menos aire entre piezas */
.menu a, .barra-acciones > * { white-space: nowrap; }
@media (max-width: 1280px) {
  .barra { gap: 18px; }
  .menu { gap: 16px; }
  .barra .sonido-texto { display: none; }
  .barra .sonido { padding: 0; width: 36px; }
}

/* ── El Arsenal, la tienda: que se vea en todas las páginas ── */
/* El botón dorado de la barra (en el teléfono, solo la estrella) */
.tienda-boton {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--oro); color: var(--oro); text-decoration: none; white-space: nowrap; font: 600 .86rem/1 var(--display);
  background: linear-gradient(120deg, rgba(251, 191, 36, .18), rgba(251, 191, 36, .04) 60%);
  box-shadow: 0 0 22px -8px var(--oro); transition: background .3s, color .3s, box-shadow .3s;
}
.tienda-boton:hover, .tienda-boton[aria-current="page"] { background: var(--oro); color: var(--fondo); box-shadow: 0 0 30px -6px var(--oro); }
.tienda-estrella, .chip-tienda-estrella { display: inline-block; animation: tienda-brillo 2.8s ease-in-out infinite; }
@keyframes tienda-brillo { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.35) rotate(90deg); } }
/* El distintivo de las portadas */
.chip-tienda {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--oro); color: var(--oro); background: rgba(251, 191, 36, .08); font: 600 .82rem/1.2 var(--texto);
  transition: background .3s, color .3s;
}
.chip-tienda:hover { background: var(--oro); color: var(--fondo); }
/* El escaparate antes del pie */
.vitrina { position: relative; z-index: 2; padding: 56px var(--margen) 64px; }
.vitrina-enlace {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 34px; max-width: 1180px; margin: 0 auto;
  padding: 28px 32px; border-radius: 26px; text-decoration: none; color: var(--tinta); border: 1px solid var(--oro);
  background: radial-gradient(120% 160% at 0% 0%, rgba(251, 191, 36, .16), transparent 55%), var(--panel);
  box-shadow: 0 0 60px -28px var(--oro); transition: transform .35s var(--curva), box-shadow .35s;
}
.vitrina-enlace:hover { transform: translateY(-3px); box-shadow: 0 0 70px -20px var(--oro); }
.vitrina-marca { font: 700 clamp(1.7rem, 3vw, 2.5rem)/1 var(--display); letter-spacing: -.03em; color: var(--oro); white-space: nowrap; }
.vitrina-texto { display: grid; gap: 10px; }
.vitrina-titulo { font: 600 1.06rem/1.35 var(--display); color: var(--tinta); }
.vitrina-precios { display: flex; flex-wrap: wrap; gap: 8px; }
.vitrina-precios > span { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font: 400 .82rem/1.4 var(--texto); color: var(--suave); }
.vitrina-precios b { color: var(--tinta); font-weight: 600; }
.vitrina-ir { justify-self: end; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--oro); color: var(--fondo); font: 600 .95rem/1 var(--texto); white-space: nowrap; }
@media (max-width: 860px) {
  .vitrina-enlace { grid-template-columns: 1fr; padding: 24px 20px; }
  .vitrina-ir { justify-self: start; }
}
@media (max-width: 760px) {
  .tienda-boton { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .tienda-texto { display: none; }
  .vitrina { padding: 40px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { .tienda-estrella, .chip-tienda-estrella { animation: none; } }
/* De 1021 a 1100 px tampoco caben seis enlaces con el botón de la tienda: uno menos (sigue en el menú del teléfono y en el pie) */
@media (max-width: 1100px) { .menu a:nth-child(5) { display: none; } }