/* Musselli — shared static styles.
   Progressive-enhancement reveal: elements fade/slide in via JS; without JS the
   <noscript> rule in each page forces them visible. Authored inline opacity/transform
   on [data-reveal] provides the start state; site.js clears it on scroll into view. */

*{ box-sizing:border-box; }
img{ max-width:100%; }

/* Reveal-in animation is driven by the element's own authored inline transition. */
[data-reveal]{ will-change:opacity, transform; }

/* ==========================================================================
   KITS — menú desplegable (el markup lo genera site.js)
   ========================================================================== */
.kits-btn{
  background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:6px;
  color:#d8d2c8; font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:400; transition:color .25s ease;
}
.kits-btn:hover, .kits-btn.open{ color:#C89B6C; }
.kits-btn.open span{ transform:rotate(180deg); }

.kits-panel{
  position:absolute; top:100%; left:0; right:0;
  display:none; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  padding:clamp(24px,3vw,40px) clamp(20px,4vw,56px) clamp(28px,3.4vw,44px);
  background:rgba(14,13,12,.985); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(200,155,108,.22); box-shadow:0 24px 60px rgba(0,0,0,.55);
  text-align:left;
}
.kits-panel.open{ display:grid; animation:kitsIn .28s ease; }
@keyframes kitsIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

.kits-coltitle{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:#C89B6C; font-weight:600; margin:0 0 14px; padding-bottom:10px;
  border-bottom:1px solid rgba(200,155,108,.18);
}
.kits-link{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:#d8d2c8; font-family:'Jost',sans-serif; font-size:13.5px; font-weight:300;
  line-height:1.35; padding:7px 0; transition:color .2s ease, padding-left .2s ease;
}
.kits-link:hover{ color:#C89B6C; padding-left:4px; }
.kits-sep{ height:1px; background:rgba(200,155,108,.16); margin:12px 0 10px; }

/* ==========================================================================
   FORMACIÓN — mini-desplegable hover (Luthería / Guitar Tech)
   ========================================================================== */
.formacion-panel{
  position:absolute; top:100%; left:0; margin-top:16px; min-width:172px;
  display:flex; flex-direction:column; padding:8px;
  background:rgba(14,13,12,.985); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(200,155,108,.22); box-shadow:0 20px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.formacion-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.formacion-link{
  display:block; text-decoration:none; color:#d8d2c8; font-family:'Jost',sans-serif;
  font-size:12.5px; letter-spacing:.06em; padding:10px 12px; transition:color .2s ease, background .2s ease;
}
.formacion-link:hover, .formacion-link:focus-visible{ color:#C89B6C; background:rgba(200,155,108,.08); }

/* Móvil: acordeón dentro del menú hamburguesa.
   Antes el menú estaba centrado (justify-content:center) y pasaba a
   flex-start recién al abrir un acordeón — el cambio de modo hacía que TODOS
   los ítems saltaran de golpe a una posición nueva. Ahora queda siempre
   anclado arriba: nada se reacomoda cuando algo se abre/cierra. */
[data-mobilemenu]{ overflow-y:auto; justify-content:flex-start !important; padding:140px 24px 40px; }
.kits-mobile{ width:100%; max-width:320px; text-align:center; }
.kits-mbtn{
  background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:8px;
  color:#FBFBFB; font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:.2em; text-transform:uppercase;
}
.kits-mobile.open .kits-mbtn{ color:#C89B6C; }
.kits-mobile.open .kits-mbtn span{ transform:rotate(180deg); }
/* Colapso suave (mismo motor que el acordeón de FAQ): la fila de grid va a
   0fr/1fr y min-height:0 le saca al item su alto mínimo automático. El
   espaciado vertical va como MARGEN de los hijos, nunca como padding del
   contenedor que colapsa — un padding fijo ahí no baja de ese valor aunque
   la fila del grid sí llegue a 0 (ver el mismo comentario en la sección
   ACORDEÓN genérico más abajo). */
.kits-mlist{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; min-height:0; text-align:left; }
.kits-mobile.open .kits-mlist{ grid-template-rows:1fr; }
.kits-mlist-inner{ overflow:hidden; min-height:0; padding:0 6px; }
.kits-mlist-inner .kits-coltitle{ margin-top:18px; }
.kits-mlist-inner .kits-link{ font-size:14px; padding:8px 0; }

/* Móvil: "Formación" es el mismo tipo de acordeón que Kits — un solo target
   de touch grande, sin flechita chica ambigua pegada al texto. */
.formacion-mobile{ width:100%; max-width:320px; text-align:center; }
.formacion-mbtn{
  background:none; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:8px;
  color:#FBFBFB; font-family:'Cormorant Garamond',serif; font-size:16px; letter-spacing:.2em; text-transform:uppercase;
}
.formacion-mobile.open .formacion-mbtn{ color:#C89B6C; }
.formacion-mobile.open .formacion-mbtn span{ transform:rotate(180deg); }
.formacion-mlist{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; min-height:0; }
.formacion-mobile.open .formacion-mlist{ grid-template-rows:1fr; }
.formacion-mlist-inner{ overflow:hidden; min-height:0; }
.formacion-mlink{
  display:block; text-decoration:none; color:#d8d2c8; font-family:'Jost',sans-serif;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin:14px 0 0;
}
.formacion-mlink:hover, .formacion-mlink:focus-visible{ color:#C89B6C; }

/* ==========================================================================
   TELÉFONO — selector de código de país + número (site.js: buildPhoneCountrySelects)
   ========================================================================== */
.phone-group{ display:flex; gap:8px; }
.phone-country-select{
  flex:0 0 auto; width:auto; background:#141212; color:#FBFBFB;
  border:1px solid rgba(200,155,108,.3); padding:0 8px; height:53px;
  font-family:'Jost',sans-serif; font-size:14px; outline:none; cursor:pointer;
  transition:border-color .2s ease;
}
.phone-country-select:focus{ border-color:#C89B6C; }
/* flex-basis manda por sobre el width:100% !important del .form-control
   compartido — así el número ocupa el resto de la fila sin desbordar. */
.phone-group .phone-number-input{ flex:1 1 0%; min-width:0; }

/* "Iniciar sesión" en móvil conserva el peso visual de botón (como ya lo
   tenía antes de convertirse en desplegable), en vez de verse como un ítem
   de menú más. */
.login-mobile .formacion-mbtn{
  margin-top:10px; background:#5D0002; color:#FBFBFB; font-family:'Jost',sans-serif;
  font-size:12px; letter-spacing:.18em; padding:13px 30px;
}
.login-mobile.open .formacion-mbtn{ color:#FBFBFB; }
.login-mobile .formacion-mlist-inner{ text-align:center; }

@media (max-width: 1100px){
  .kits-panel{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:28px; }
}

/* Contacto en móvil: la tarjeta de WhatsApp se apila para que el número no se corte. */
@media (max-width: 560px){
  [data-wacard]{ flex-direction:column; align-items:flex-start !important; gap:16px !important; }
  [data-wacard] > span{ flex:0 0 auto !important; }
}

/* ==========================================================================
   ACORDEÓN genérico — FAQ y "El programa" (motor común en site.js,
   [data-acc-group] / .acc-item / .acc-trigger / .acc-panel / .acc-panel-inner)
   ========================================================================== */
.acc-item{ border-bottom:1px solid rgba(200,155,108,.16); }
.acc-item:first-child{ border-top:1px solid rgba(200,155,108,.16); }
.acc-trigger{
  all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  gap:20px; width:100%; padding:20px 4px; cursor:pointer;
}
.acc-caret{ flex:none; color:#C89B6C; transition:transform .3s ease; }
.acc-item.open .acc-caret{ transform:rotate(180deg); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; min-height:0; }
.acc-item.open .acc-panel{ grid-template-rows:1fr; }
/* min-height:0 es necesario: sin esto, el grid item respeta el alto mínimo de
   su contenido y "0fr" no colapsa de verdad -> quedaba todo visible siempre. */
.acc-panel-inner{ overflow:hidden; min-height:0; }

/* Variante FAQ: pregunta en negrita, tono conversacional, sin labels. */
.acc--faq .acc-trigger{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:#FBFBFB; text-align:left; line-height:1.35;
}
.acc--faq .acc-panel-inner{ padding:0 4px; }
/* El espaciado va como MARGEN del párrafo, no padding del contenedor que se
   colapsa: un padding fijo ahí no se reduce a 0 aunque la fila del grid sí. */
.acc--faq .acc-panel-inner p{
  margin:0 0 24px; font-family:'Jost',sans-serif; font-size:15px; line-height:1.7; font-weight:300; color:#d2ccc1;
}

/* Variante "El programa": fila = etapa (número + título + descripción corta);
   al abrir muestra sus módulos y clases. */
.acc--programa .acc-trigger{ padding:24px 4px; align-items:flex-start; }
.acc--programa .acc-head{ text-align:left; }
.acc--programa .acc-num{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#C89B6C; margin-bottom:8px;
}
.acc--programa .acc-title{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.2rem,2vw,1.6rem); color:#FBFBFB; margin-bottom:6px;
}
.acc--programa .acc-desc{ font-family:'Jost',sans-serif; font-size:14px; font-weight:300; color:#8a8275; }
.acc--programa .acc-panel-inner{ padding:0 4px; display:flex; flex-direction:column; gap:22px; }
.acc-modulo{ padding-top:4px; }
.acc-modulo:last-child{ margin-bottom:32px; }
.acc-modulo-titulo{
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#C89B6C;
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid rgba(200,155,108,.14);
}
.acc-clases{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.acc-clases li{ font-family:'Jost',sans-serif; font-size:14px; font-weight:300; color:#d2ccc1; line-height:1.6; padding-left:16px; position:relative; }
.acc-clases li::before{ content:'—'; position:absolute; left:0; color:#5f594f; }

/* Gallery thumbnail hover-zoom (guitar-tech) — the thumb carries its own transition inline. */
[data-galbtn]:hover [data-galthumb]{ transform:scale(1.05); }
[data-lightbox] [data-lb-prev]:hover, [data-lightbox] [data-lb-next]:hover{ background:rgba(200,155,108,.25); border-color:#C89B6C; }