/* =============================================================
   responsive.css — se carga DESPUÉS de app.css
   =============================================================

   PROBLEMA QUE RESUELVE
   El sitio tenía dos sistemas de contenedor peleando:

     .wrap        520px → 900px (a 900) → 1200px (a 1040)
     .band-inner  1200px siempre

   Entre 521 y 899px, y otra vez entre 1024 y 1039px, los dos no
   coinciden. En /salon eso se ve como una banda oscura de 834px de
   ancho seguida de una columna de texto de 486px: 314px de desfase
   en la misma pantalla.

   Por eso "se ve bien en el teléfono y mal en la computadora": abajo
   de 520 y arriba de 1040 los dos sistemas coinciden por casualidad.
   En el medio — tablet, pantalla partida, y sobre todo una ventana de
   navegador que no está maximizada — se rompe.

   LA REGLA: un solo contenedor fluido. El fondo llega a los bordes,
   el contenido se alinea a la misma reja en toda la página, y el
   ancho de LECTURA se limita aparte (que era el motivo real por el
   que alguien puso 520px).
   ============================================================= */

:root{
  --shell:1200px;                       /* reja única de contenido */
  --gutter:clamp(17px,4vw,40px);        /* aire lateral, continuo */
  --measure:66ch;                       /* largo de línea legible */
  --measure-h:20ch;                     /* titulares display */
  --bar-h:78px;                         /* medido: era 74 y quedaba corto */
}

/* ---------- 1. Un solo contenedor ---------- */
.wrap,
.band-inner,
.foot-inner,
.panel-main{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 2. Los elementos fijos van a sangre completa ----------
   El header sticky tenía max-width y margin auto: era una caja de
   1200px centrada con fondo claro. En una pantalla de 1440 el
   contenido pasaba por detrás solo en el medio y quedaba a la vista
   en las dos franjas de los costados al hacer scroll.

   Es el patrón que el pie ya usaba bien. */
.site-head,
.bottom-bar{
  max-width:none;
  padding-inline:calc(max(0px,(100% - var(--shell)) / 2) + var(--gutter));
}
.site-head{padding-block:var(--sp-3)}

/* app.css libera .site-main a `max-width:none` para que las bandas
   lleguen a los bordes... y 300 líneas después el bloque de desktop
   lo vuelve a capar en 1200px. Resultado: TODA la idea de bandas a
   sangre completa se anula justo arriba de 1040px, que es donde más
   se nota. Es una sola línea y se come la mitad del rediseño. */
.site-main{max-width:none}

/* La portada tiene que alinear con el contenido de abajo. */
.band{padding-inline:calc(max(0px,(100% - var(--shell)) / 2) + var(--gutter))}

/* ---------- 3. Largo de línea ----------
   Sin esto, en 1440 un párrafo corre 134 caracteres. El rango cómodo
   es 45–75: pasando de ahí el ojo pierde el renglón al volver. */
.wrap > p,
.wrap > .lead,
.wrap > .muted,
.wrap > .note,
.band-inner > p,
.band-inner > .lead,
.band-inner > .muted,
.band-inner > .note,
.proof-empty,
.brands-empty{max-width:var(--measure)}

.sec-h2,
.band-h1{max-width:var(--measure-h)}

/* Dentro de tarjetas y celdas de grilla el ancho ya lo pone la grilla. */
.card p,.door p,.review p,.clase p,.agenda-col p,
.review-body,.card-benefit{max-width:none}

/* ---------- 4. Escala de desktop ---------- */
@media(min-width:1040px){
  body{font-size:17px}
  p,.lead{font-size:16.5px}
  .muted{font-size:15px}
  .note{font-size:13px}
  h2{font-size:clamp(26px,2.2vw,32px)}
  .row-n1,.pl-n{font-size:16.5px}
  .row-n2,.pl-d{font-size:13px}
  .card-name{font-size:18px}
  .card-benefit{font-size:13px}
  .card-price{font-size:23px}
  .door-t1{font-size:22px}
  .door-t2{font-size:13px}
  .foot-list a,.foot-p{font-size:15px}
  .review-body{font-size:15px}
  .local-v{font-size:16px}
}

/* ---------- 5. Piso de tamaño de letra ----------
   Había etiquetas de 8 y 9px en versalitas con letter-spacing, y son
   justo las que dicen el área y el precio. */
.mark-desc,.lang-sw,.foot-desc{font-size:10px}
.kicker,.sec-eyebrow,.band-eyebrow,.local-lb,.next-lb,
.pricebox-lb,.field label,.field legend,.foot-h{font-size:11px}
.badge,.seats,.st-lb,.ph b{font-size:10.5px}
@media(min-width:1040px){
  .mark-desc,.lang-sw,.foot-desc{font-size:11px}
  .kicker,.sec-eyebrow,.band-eyebrow,.local-lb,.foot-h{font-size:11.5px}
}

/* ---------- 6. La zona intermedia ---------- */
@media(min-width:640px) and (max-width:1039px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px) and (max-width:1039px){
  .doors{grid-template-columns:1fr 1fr}
  .door-wide{grid-column:span 2}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(3,1fr)}
}

/* `:not(.band-plain)` es OBLIGATORIO: la banda SIN foto tiene que
   seguir colapsando a alto automático, si no quedan 600px de negro
   vacío con el título abajo del todo. No sacar. */
@media(min-width:768px) and (max-width:1039px){
  .band:not(.band-plain){min-height:440px;height:52vh}
}

/* ---------- 7. Detalles de pantalla grande ---------- */
@media(min-width:1040px){
  /* El sticky sale de la altura real del header, no de un 96 a ojo. */
  .a-services,.catalog-side{top:calc(var(--head-h) + var(--sp-3))}
  .hero{min-height:320px}
  .hero img{max-height:420px}
}

/* ---------- 6. Area sin fotos: la lista en dos columnas ----------
   app.css deja .a-services en 720px cuando no hay columna izquierda.
   El comentario de esa regla dice "ocupa todo el ancho", pero el cap
   de 720 hace lo contrario: en /salon, que hoy es solo la lista de
   servicios, quedaban 480px de blanco a la derecha y la pagina se
   leia a medio terminar.

   Va en dos columnas con `columns`, no con grid: multicol llena de
   arriba hacia abajo (1-6 en la izquierda, 7-12 en la derecha), que
   es como se lee una carta. Un grid de dos columnas llenaria de a
   pares en horizontal y habria que leer en zigzag.

   break-inside evita que una fila se parta al pie de la columna. */
@media(min-width:1040px){
  .area-grid--solo .a-services{max-width:none}
  .area-grid--solo .a-services .list{columns:2;column-gap:var(--sp-6)}
  .area-grid--solo .a-services .row-link{break-inside:avoid}
  /* Las dos columnas cierran con regla: si no, la izquierda termina
     con linea y la derecha sin ella. */
  .area-grid--solo .a-services .row-link:last-child{border-bottom:1px solid var(--rule)}
}

/* ---------- 7. Navegación ----------
   El header pasa de "logotipo + datos de contacto" a un header con menú.
   Todo lo de acá es nuevo; no pisa reglas viejas salvo .mark-desc, que dejó
   de ser un <span> adentro del enlace del logotipo para ser su propio <a>. */

/* Logotipo y alto del header.
   A 92px el logotipo empujaba el header a 130px: una franja fija que se
   come un quinto de la pantalla de un telefono y acompania TODO el scroll.
   44px deja leer la marca y devuelve esa altura al contenido. */
:root{--logo-h:36px;--head-h:60px}
@media(min-width:1040px){:root{--logo-h:44px;--head-h:72px}}
/* Sticky con la misma altura: sin version compacta no hay salto al scrollear. */
.site-head{min-height:var(--head-h)}

.head-mark{display:flex;flex-direction:column;line-height:1;gap:4px}
.mark-desc{text-decoration:none;display:inline-block}
a.mark-desc:hover{color:var(--noir)}

/* --- el menú --- */
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-3);flex-wrap:wrap}
.site-nav a{
  text-decoration:none;color:var(--ink);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;
  /* 44px de alto tactil sin agrandar la fila: el padding hace el area. */
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--brass-dk)}
/* El activo se marca con la regla dorada, no solo con color: el color solo
   no alcanza para quien no distingue el dorado del negro. */
.site-nav a[aria-current="page"]{color:var(--brass-dk);border-bottom-color:var(--brass)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--rule);cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;padding:0;
}
.nav-bars,.nav-bars::before,.nav-bars::after{
  display:block;width:18px;height:2px;background:var(--noir);content:'';position:relative;
}
.nav-bars::before{position:absolute;top:-6px}
.nav-bars::after{position:absolute;top:6px}
[aria-expanded="true"] .nav-bars{background:transparent}
[aria-expanded="true"] .nav-bars::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .nav-bars::after{top:0;transform:rotate(-45deg)}

/* Abajo de 1040 el menú se colapsa. La clase con-js la pone nav.js: sin JS
   el panel queda a la vista y el menú sigue siendo usable. */
@media(max-width:1039px){
  .nav-toggle{display:inline-flex}
  .con-js .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:var(--sp-3) var(--gutter);box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .con-js .site-nav.abierto{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav a{width:100%;border-bottom:1px solid var(--rule)}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--brass)}
  .site-head{position:sticky;flex-wrap:wrap}
  body.nav-abierto{overflow:hidden}
}
@media(min-width:1040px){
  /* Inline y centrado: el spacer de la derecha lo empuja al medio. */
  .site-nav{margin-inline:auto}
}

/* --- contacto como botones --- */
.hc-btn{font-size:11px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center}

/* --- miga de pan --- */
.miga{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:var(--sp-3) var(--gutter) 0;
}
.miga ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  font-size:11.5px;letter-spacing:.06em}
.miga li+li::before{content:'›';margin-right:6px;color:var(--soft)}
.miga a{color:var(--soft);text-decoration:none}
.miga a:hover{color:var(--brass-dk);text-decoration:underline}
.miga [aria-current="page"]{color:var(--ink);font-weight:700}

/* --- saltar a las otras puertas, arriba del H1 --- */
.puertas-sw{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-3)}
.puertas-sw a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--rule);text-decoration:none;color:var(--ink);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.puertas-sw a:hover{border-color:var(--brass);color:var(--brass-dk)}

/* El .wrap que envuelve los chips solo aporta la reja: sin su padding vertical
   quedaria un hueco entre la miga y la portada. */
.puertas-wrap{padding-top:var(--sp-3);padding-bottom:0}
.puertas-wrap .puertas-sw{margin-bottom:var(--sp-3)}

/* ---------- 8. Placeholder de marca ----------
   Para productos sin foto de marca sin SVG propio. Mismo fondo tenido que los
   SVG (--brass-wash) y el dorado profundo, que es el unico que pasa AA sobre
   fondo tenido: --brass-dk ahi cae a 4.3:1. Ver tokens.css. */
.ph-marca{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;background:var(--brass-wash);
  border:1px solid var(--brass-lt);
}
.ph-marca > span{
  font-family:var(--display);font-size:44px;color:var(--brass-dp);line-height:1;
}
.ph-marca.big > span{font-size:72px}

/* ---------- 9. Galería filtrable ----------
   Los botones existen en el marcado siempre, pero se ven recién cuando
   gallery.js marca .con-js. Sin JS se muestran todas las fotos y los
   botones no aparecen: un filtro que no filtra confunde más que la
   grilla completa. */
.gal-filtros{display:none}
.con-js .gal-filtros{display:flex;flex-wrap:wrap;gap:8px}
.gal-filtros .chip{font:inherit;cursor:pointer;background:none}
.gal-filtros .chip[aria-pressed="true"]{
  background:var(--paper);border-color:var(--paper);color:var(--noir);
}
.gal-vacio{color:#B9B0A4;font-size:14px;margin-top:var(--sp-3)}

/* ---------- 10. Header compacto ----------
   Antes: logotipo de 92px, header de 130px y dos botones solidos peleando.
   Ahora una sola accion principal y una franja que no se come la pantalla. */

/* El switch de idioma pasa de 9-11px a 13px con area tactil de 44px.
   A 11px es un enlace que se falla al tocar; la mitad de quien entra en
   ingles lo hace desde el telefono. */
.lang-sw{font-size:13px;letter-spacing:.1em;gap:7px}
.lang-sw a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:44px;padding:0 4px;
}

/* Telefono como icono: sigue siendo un target de 44px. */
.hc-tel{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);
}
.hc-tel:hover{color:var(--brass-dk);border-color:var(--brass)}

@media(max-width:1039px){
  /* En 60px entran cuatro cosas y nada mas: logo, idioma, WhatsApp,
     hamburguesa. El telefono vive completo en la barra fija de abajo.

     app.css esconde .head-contact ENTERO abajo de 1040 (venia de cuando
     era una ficha de datos que no entraba). Hay que devolverlo a flex o
     el boton de WhatsApp no existe en mobile. */
  .head-contact{display:flex;align-items:center}
  .hc-tel{display:none}
  .head-contact{order:3}
  .nav-toggle{order:4}
  .head-spacer{display:none}
  .site-head{gap:var(--sp-2);justify-content:space-between}
  .head-mark{margin-right:auto}
  .hc-btn{font-size:10.5px;padding:9px 12px}
}

/* El alto lo fija el padding, no min-height: el hijo mas alto son los targets
   de 44px, asi que 44 + 2*8 = 60 en mobile y 44 + 2*14 = 72 en desktop. */
.site-head{padding-block:8px}
@media(min-width:1040px){.site-head{padding-block:14px}}
/* flex:none o el icono se comprime a ~29px y deja de ser target de 44. */
.hc-tel{flex:none}
/* El .btn base trae su propio padding y llevaba el bloque de contacto a 55px.
   44 exactos: sigue siendo el minimo tactil y el header cierra en 72. */
.hc-btn{height:44px;min-height:0;padding-block:0}
/* El .btn base trae margin propio: con align-items:center se centra la caja de
   margen, no la del borde, y eso descolocaba el boton 5px y estiraba la fila. */
.hc-btn{margin:0}

/* Card de puerta sin foto: bloque de marca en vez del rayado.
   Mismo criterio y mismos tokens que el placeholder de producto. */
.ph-area{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:16/9;background:var(--brass-wash);
  border-bottom:1px solid var(--rule);
}
.ph-area > span{
  font-family:var(--display);font-size:clamp(22px,3vw,30px);
  color:var(--brass-dp);letter-spacing:.02em;
}

/* ---------- 11. Página de área ---------- */
.area-intro{
  font-size:clamp(16px,2.2vw,18px);line-height:1.6;color:var(--ink);
  max-width:var(--measure);margin:0 0 var(--sp-4);
}
/* Galería del área: las que pasan de 8 esperan detrás de "Ver más".
   La clase .recortada la pone gallery.js; sin ese script no existe y se
   ven todas las fotos. El boton nace con hidden y el mismo script lo
   muestra, asi que nunca hay un boton que no despliegue nada. */
.gallery.recortada .gal-extra{display:none}
.gal-mas{display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:220px;margin-top:var(--sp-3)}

/* Foto de la card: mismo alto que las vecinas y recortada al centro, para que
   las tres puertas queden parejas aunque las fotos tengan proporciones
   distintas. Sin velo: el del hero existe para que se lea el titulo encima. */
.door-media{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-bottom:1px solid var(--rule)}
.door-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 12. Header: tres zonas y blindaje del .btn ----------

   1. Blindaje. .hc-btn ya anulaba el margen, pero por CLASE: cualquier .btn
      que alguien agregue mañana al header vuelve a heredar el margin-top del
      boton base y a descolgarse. La regla va por CONTENEDOR, que es lo que
      no se olvida. */
.head-contact .btn{
  margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;min-height:0;padding:0 20px;
  /* El line-height heredado infla la caja aunque la altura este fija. */
  line-height:1;
}
@media(max-width:1039px){.head-contact .btn{height:40px;padding:0 16px}}

/* 2. Tres zonas: logo | nav centrado | idioma + boton.

   .head-spacer con flex:1 se comia TODO el sobrante de un lado y empujaba el
   nav contra el logo: 11px de separacion de un lado y 182px de hueco del
   otro. Se neutraliza y el centrado lo hace el margen automatico del nav,
   que reparte el sobrante en partes iguales. */
.head-spacer{flex:0}
@media(min-width:1040px){
  .site-nav{margin-inline:auto}
  /* Piso de separacion: sin esto, en un ancho justo el nav vuelve a tocar
     el logotipo cuando el margen automatico se queda sin sobrante. */
  .head-mark{margin-right:40px}
  .lang-sw{margin-left:40px}
  .site-nav ul{gap:30px}
}

/* 3. Selector de idioma: un escalon por debajo del nav, no compitiendo.
      El subrayado va pegado al texto —2px— en vez de colgar 5px abajo. */
.lang-sw{font-size:12px;letter-spacing:.1em}
.lang-sw a{
  min-width:32px;min-height:44px;padding:0 3px 2px;
  border-bottom:2px solid transparent;color:var(--soft);
  /* El alto tactil lo da el flex, no el padding: asi el borde queda contra
     la palabra y no al fondo de una caja de 44px. */
  display:inline-flex;align-items:flex-end;justify-content:center;
}
.lang-sw a.on{color:var(--noir);border-bottom-color:var(--brass)}
.lang-sw a:hover{color:var(--noir)}