/* Navegación en pantallas pequeñas.
 *
 * Va aparte de theme.css a propósito: aquel se GENERA desde los documentos de
 * diseño (tools/convertir_diseno.py) y cualquier cosa escrita a mano allí se
 * perdería en la siguiente regeneración.
 *
 * Se respetan las reglas del sistema: un solo acento, un solo radio (8px),
 * entradas con ease-out entre 130 y 280ms, salidas más rápidas que entradas,
 * :active { scale(.97) } en todo lo pulsable, hover tras @media (hover:hover)
 * y prefers-reduced-motion cubierto.
 */

.cag-hamb { display: none; }
.cag-menu { display: none; }

@media (max-width: 1080px) {

  /* --- barra --- */

  /* El diseño lleva los estilos EN LÍNEA, que ganan a cualquier hoja: sin
     !important estas reglas no se aplican. El propio diseño hace lo mismo en
     sus media queries (.navlinks { display:none !important }). */
  .cag-nav { padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; }

  /* El nombre completo no cabe en una línea de teléfono: se deja en dos,
     con menos tracking, en vez de recortarlo o abreviar la institución. */
  .cag-marca-txt {
    white-space: normal !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
    line-height: 1.28 !important;
    max-width: 20ch;
  }
  .cag-marca { gap: 9px !important; }
  .cag-marca img { height: 30px !important; }

  /* El conmutador de idioma se muda al panel: en la barra no queda sitio. */
  .cag-lang { display: none !important; }

  .cag-hamb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(91, 79, 190, .45);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
  }

  /* Tres trazos que se vuelven aspa: el de en medio se desvanece y los otros
     dos giran sobre el centro. */
  .cag-hamb-i,
  .cag-hamb-i::before,
  .cag-hamb-i::after {
    display: block;
    width: 17px;
    height: 1.5px;
    border-radius: 2px;
    background: #4a3fa8;
    transition: transform 220ms var(--ease-out), opacity 130ms ease;
  }
  .cag-hamb-i { position: relative; }
  .cag-hamb-i::before,
  .cag-hamb-i::after { content: ""; position: absolute; left: 0; }
  .cag-hamb-i::before { top: -5.5px; }
  .cag-hamb-i::after  { top:  5.5px; }

  .cag-hamb[aria-expanded="true"] .cag-hamb-i { background: transparent; }
  .cag-hamb[aria-expanded="true"] .cag-hamb-i::before { transform: translateY(5.5px) rotate(45deg); }
  .cag-hamb[aria-expanded="true"] .cag-hamb-i::after  { transform: translateY(-5.5px) rotate(-45deg); }

  /* --- panel --- */

  /* Cerrado colapsa a altura cero. Con visibility:hidden a secas la caja seguía
     ocupando su sitio y dejaba un hueco enorme bajo la barra. El relleno vive en
     .cag-menu-int para que aquí no sume altura. */
  .cag-menu {
    display: block;
    position: sticky;
    top: 72px;
    z-index: 49;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(245, 244, 248, .96);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    /* Sale más rápido de lo que entra. */
    transition: max-height 140ms var(--ease-out), opacity 130ms var(--ease-out),
                border-color 130ms ease, visibility 0s linear 140ms;
  }
  .cag-menu.open {
    max-height: 78dvh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    border-bottom-color: var(--line);
    transition: max-height 260ms var(--ease-out), opacity 200ms var(--ease-out),
                border-color 200ms ease, visibility 0s;
  }
  .cag-menu-int { padding: 6px 20px 20px; }

  .cag-menu-link {
    display: block;
    padding: 15px 2px;          /* zona de toque cómoda */
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -.01em;
    transition: color 160ms ease, padding-left 200ms var(--ease-out);
  }
  .cag-menu-link:active { padding-left: 8px; color: #3d3392; }

  .cag-menu-lang {
    margin-top: 18px;
    padding: 12px 20px;
    border: 1px solid rgba(91, 79, 190, .45);
    border-radius: 8px;
    background: transparent;
    color: #4a3fa8;
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .06em;
    cursor: pointer;
  }

  .cag-menu-link:active,
  .cag-menu-lang:active { transform: scale(.97); }
}

@media (hover: hover) and (pointer: fine) {
  .cag-hamb:hover     { background-color: rgba(91, 79, 190, .09); }
  .cag-menu-link:hover { color: #3d3392; }
  .cag-menu-lang:hover { background-color: rgba(91, 79, 190, .09); }
}

@media (prefers-reduced-motion: reduce) {
  .cag-menu,
  .cag-hamb-i,
  .cag-hamb-i::before,
  .cag-hamb-i::after,
  .cag-menu-link { transition-duration: 1ms !important; }
  .cag-menu-link:active,
  .cag-menu-lang:active { transform: none; }
}

/* --- cabecera de la ficha ---------------------------------------------- */

.cag-ficha-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cag-ficha-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }

.cag-ficha-casa {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.cag-ficha-salon {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4a3fa8;
  line-height: 1.3;
  margin-top: 2px;
}

.cag-compartir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* El nombre de la casa se repite en la barra del sitio, justo encima; aquí
     sobra y era lo que partía el rótulo en cuatro renglones. */
  .cag-ficha-casa { display: none; }

  .cag-ficha-salon { font-size: 10px; letter-spacing: .1em; }

  /* El botón se queda en el icono: con el texto no cabía junto al cierre. */
  .cag-compartir { width: 36px; padding: 0; justify-content: center; }
  .cag-compartir [data-compartir="txt"] { display: none; }

  .cag-ficha-cab { gap: 12px; margin-bottom: 20px; }
}

/* --- cabecera de salón con foto ---------------------------------------- */

.cag-salon-hero {
  position: relative;
  max-width: 1400px;
  margin: 0 auto 72px;
  padding: 0 40px;
}
.cag-salon-hero > img {
  display: block;
  width: 100%;
  aspect-ratio: 26/10;
  max-height: 62dvh;
  object-fit: cover;
  border-radius: 8px;
  background: #e4e3ec;
}

/* Papel translúcido con desenfoque: la misma receta de la barra de navegación,
   para que la pieza pertenezca al mismo sistema. Claro, nunca oscuro. */
.cag-salon-panel {
  position: absolute;
  left: 76px;
  bottom: 36px;
  max-width: min(52ch, calc(100% - 152px));
  padding: 28px 32px 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(245, 244, 248, .86);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(27, 28, 41, .16);
}
.cag-salon-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}
.cag-salon-panel h1 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.0;
  letter-spacing: -.035em;
  max-width: 14ch;
  text-wrap: balance;
}
/* La bajada baja de cuerpo: sobre la foto compite con el título si no. */
.cag-salon-panel p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
  font-weight: 300;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .cag-salon-hero { padding: 0 20px; margin-bottom: 48px; }
  .cag-salon-hero > img { aspect-ratio: 4/3; max-height: 56dvh; }
  /* En pantalla estrecha el panel no cabe encima sin tapar la sala:
     se apoya en el borde inferior y ocupa el ancho. */
  .cag-salon-panel {
    left: 28px; right: 28px; bottom: 16px;
    max-width: none;
    padding: 20px 22px 22px;
  }
  .cag-salon-panel h1 { max-width: none; font-size: clamp(26px, 7vw, 36px); }
  .cag-salon-panel p { font-size: 13.5px; }
}

@media (max-width: 560px) {
  /* Muy estrecho: el texto tapa la foto entera. Mejor debajo, sin panel. */
  .cag-salon-hero > img { aspect-ratio: 5/4; }
  .cag-salon-panel {
    position: static;
    margin-top: 14px;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}