/* LA CABECERA DE LA CASA, PARA LOS LANDINGS DE VENTA (13-sep-2026).
   Decisión de Juanfe: «Hagámoslo completo, como se ve desde el home, pero excluye las
   experiencias gratuitas». Es la misma cabecera del home (public/styles.css §.site-header:
   hamburguesa a la izquierda, «Hazte caso» con los tres puntos en el centro, menú desplegable
   con los seis mundos), portada con nombres PROPIOS (.casa-*) porque cada landing trae su CSS
   inline con .hero, .btn, .brand… y cargar /styles.css encima los rompería. Los colores van
   fijos aquí (los del home) y no por variables, por la misma razón: cada landing define las
   suyas. Un solo archivo para los diez; se cambia aquí. */
.casa-header{
  --casa-cream:#FBF4EA;--casa-ink:#2E1F2B;--casa-plum:#6B2D5C;--casa-gold:#C9952B;--casa-gold-ink:#7E5C14;
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;
  padding:clamp(11px,1.2vw,14px) clamp(20px,6vw,128px);
  background:rgba(251,244,234,.93);
  transition:background-color .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1);
  font-family:"Hanken Grotesk",system-ui,sans-serif}
@media(min-width:768px) and (pointer:fine){.casa-header{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}}
.casa-header.is-scrolled{background:rgba(251,244,234,.98);
  box-shadow:0 8px 30px -12px rgba(107,45,92,.08);border-bottom:1px solid rgba(201,149,43,.18)}
.casa-wordmark{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:.5em;
  color:var(--casa-ink);line-height:1;text-decoration:none}
.casa-wordmark__name{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 0;
  font-style:italic;font-weight:480;font-size:clamp(1.1rem,3vw,1.35rem);letter-spacing:.005em}
.casa-wordmark__dots{width:.82em;height:auto;flex:none;transform:translateY(.08em)}
.casa-wordmark__dots circle{fill:var(--casa-gold-ink)}
.casa-toggle{grid-column:1;justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-10px;padding:0;background:none;border:0;cursor:pointer;color:var(--casa-ink)}
.casa-toggle__box{display:flex;flex-direction:column;gap:6px;width:22px}
.casa-toggle__box span{display:block;height:1.5px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s cubic-bezier(.22,.61,.36,1)}
.casa-toggle[aria-expanded="true"] .casa-toggle__box span:first-child{transform:translateY(3.75px) rotate(45deg)}
.casa-toggle[aria-expanded="true"] .casa-toggle__box span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.casa-menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;gap:8px;
  padding:24px clamp(20px,6vw,128px) 48px;background:var(--casa-cream);
  border-bottom:1px solid rgba(201,149,43,.22);box-shadow:0 8px 30px -12px rgba(107,45,92,.08)}
.casa-menu[hidden]{display:none}
.casa-menu a{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 0;
  font-size:clamp(1.4rem,6vw,1.8rem);font-weight:460;color:var(--casa-ink);text-decoration:none;
  padding:16px 0;border-bottom:1px solid rgba(46,31,43,.08)}
.casa-menu a:last-child{border-bottom:0}
.casa-menu a:hover{color:var(--casa-plum)}
/* La tercera columna queda vacía a propósito: el home lleva ahí «Descubre tu ritual» → /ritual,
   y en un landing que YA es un ritual ese botón compite con comprar. Si Juanfe lo quiere, es
   un <a class="casa-btn"> en esa columna. */
.casa-header__vacio{grid-column:3}
/* La marca que cada landing traía arriba («nadia · hazte caso» / «Nadia Hazte Caso») ya no hace
   falta: la cabecera la trae. Se esconde, no se borra, por si se quita la cabecera. */
.casa-header ~ .wrap .brand,.casa-header ~ .tramo .membrete,body.con-casa .brand,body.con-casa .membrete{display:none}