/* Sistema visual "dossier técnico" — §5 del spec.
   Regla de oro: el navy es TINTA, no fondo. El dorado es DATO, no relleno.
   El fondo hueso existe para que las fotos (frías, a media luz) salten. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --hueso: #F2F0EC;
  --hueso-2: #E7E3DB;   /* separadores y fondos hundidos */
  --navy: #142634;
  --navy-70: rgba(20, 38, 52, .70);
  --navy-45: rgba(20, 38, 52, .45);
  --oro: #E4AD5E;
  --oro-tinta: #8A6528;  /* dorado legible sobre hueso — el #E4AD5E no pasa contraste en texto */
  --linea: #D6D1C7;
  --verde: #2E7D4F;      /* estado "abierto" — fuera de la paleta de marca a propósito: es indicador de estado, no color de marca */

  --f-t: 'Outfit', system-ui, sans-serif;      /* títulos */
  --f-x: 'Inter', system-ui, sans-serif;       /* texto */
  --f-m: 'IBM Plex Mono', ui-monospace, monospace; /* datos técnicos */

  --ancho: 1180px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--navy);
  font-family: var(--f-x);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height: auto es obligatorio acá: las imágenes llevan width/height en el HTML
   a propósito (para reservar espacio y evitar que salte el layout), pero eso
   fija un alto usado que gana por sobre cualquier aspect-ratio en CSS. Sin
   este height: auto, el atributo manda y el aspect-ratio queda mudo — no lo
   borres pensando que sobra. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--f-t); letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.02; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; }

/* Etiqueta técnica: el idioma del dossier. */
.et {
  font-family: var(--f-m);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}

/* ---------------- cabecera ---------------- */
.cabecera {
  border-bottom: 1px solid var(--navy);
  background: var(--hueso);
  position: sticky; top: 0; z-index: 20;
}
.cabecera .fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px var(--gutter);
  max-width: var(--ancho); margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 11px; }
.marca .sello {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--navy); display: grid; place-items: center; flex: none;
}
/* El trazo del techo original es ~2% del ancho: escalado a 30px queda bajo el
   píxel y se ve como un garabato. Se fija en px reales. Ver §10 del spec. */
.techo { width: 26px; color: var(--oro-tinta); display: block; }
.techo path { vector-effect: non-scaling-stroke; stroke-width: 1.7px; }
.marca b {
  font-family: var(--f-t); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .17em; display: block; line-height: 1;
}
.marca i { display: block; height: 1px; background: var(--oro); margin: 4px 0 3px; }
.marca small {
  font-size: .5rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--oro-tinta); display: block; line-height: 1; font-style: normal;
}
.menu { display: flex; gap: 22px; }
.menu a { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-70); }
.menu a:hover { color: var(--navy); }

/* Botón hamburguesa: sólo existe (visualmente) bajo 860px, donde `.menu`
   horizontal no cabe. Dibujado con 3 barras de CSS, nunca un emoji (regla
   de marca). 44px de lado: mínimo cómodo para tocar con el pulgar. */
.hamburguesa {
  display: none; flex: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--navy); border-radius: 3px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.hamburguesa span { width: 20px; height: 2px; background: var(--navy); display: block; }

@media (max-width: 860px) {
  .menu { display: none; }
  .hamburguesa { display: flex; }
  /* `.cabecera` es `position: sticky`, así que ya es el contenedor de
     posicionamiento para este desplegable: no hace falta tocarla. Ancho
     completo, bajo la cabecera, encima del contenido de la página pero muy
     por debajo del conmutador/whatsapp/cookies (55-60) para no crear una
     colisión nueva con esa banda fija de abajo — éste vive arriba. */
  .menu.abierto {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 25;
    background: var(--hueso); border-bottom: 1px solid var(--navy);
    padding: 4px var(--gutter) 8px;
  }
  .menu.abierto a { padding: 13px 2px; border-top: 1px solid var(--linea); }
  .menu.abierto a:first-child { border-top: none; }
}

.btn {
  background: var(--navy); color: var(--hueso);
  padding: 10px 16px; border: 1px solid var(--navy); border-radius: 3px;
  font-size: .82rem; letter-spacing: .05em; display: inline-block;
}
.btn:hover { background: #0d1a24; }
.btn.fantasma { background: transparent; color: var(--navy); }
.btn.fantasma:hover { background: var(--hueso-2); }

/* ---------------- ficha de obra ---------------- */
/* La ficha es la unidad del sistema: mata el aire muerto con información en
   vez de relleno, y es lo que se enriquece plan a plan. */
.ficha { background: var(--hueso); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.ficha .foto { position: relative; }
/* El marco se decide mirando las fotos que van en esta superficie, nunca
   asumiendo un solo formato (§2.4 del spec: 4 de las 5 fotos del Básico son
   verticales, pero terraza.jpg es apaisada — y los planes 2 y 3 son todo
   apaisado). Por default (`data-forma="vertical"`, o sin atributo) el marco
   es 739/860: recorta ~12-21% del ALTO de una foto vertical (bien: mismo
   lado que sobra) para que la ficha no quede gigante en la grilla de 4
   columnas. `data-forma="apaisada"` (ver `.ficha .foto[data-forma]` más abajo
   y `FORMA` en obras.js) le da a las fotos apaisadas su propio marco en vez
   de forzarlas al mismo — un marco vertical sobre una apaisada recorta por
   los COSTADOS (~35% del ancho), que es el error que le criticábamos a la v1,
   invertido. `.ficha` es flex-column: la grilla tolera fichas con distinto
   alto de foto sin romperse. */
.ficha .foto img { width: 100%; aspect-ratio: 739 / 860; object-fit: cover; }
.ficha .foto[data-forma="apaisada"] img { aspect-ratio: 739 / 555; }
.placa {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--navy-70); backdrop-filter: blur(3px);
  color: var(--hueso); padding: 7px 11px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.placa .n { font-family: var(--f-m); font-size: .62rem; letter-spacing: .1em; color: var(--oro); }
.placa .s { font-family: var(--f-m); font-size: .62rem; letter-spacing: .1em; }
.ficha .cuerpo { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ficha h3 { font-size: 1.02rem; font-weight: 600; }
.ficha .desc { font-size: .86rem; color: var(--navy-70); margin: 0; }
/* Fila de datos TIPO/ESTADO de la ficha. Se llama `.ficha-pie`, NO `.ficha .pie`:
   el pie de página (más abajo, §pie) también se llama `.pie` y una tarea
   posterior lo agregó sin saber que esta fila ya existía. Con el nombre
   anidado, esta fila heredaba background/padding de `.pie` (navy sobre navy,
   texto invisible) porque `.ficha .pie` nunca redeclaraba esas propiedades.
   Un nombre propio, no compartido con ningún componente de página, es lo que
   impide que vuelva a pasar — no alcanza con resetear background/padding acá,
   el próximo componente anidado caería en la misma trampa. */
.ficha-pie {
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--f-m); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-45);
}

/* ---------------- franja de datos ---------------- */
.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--navy); border: 1px solid var(--navy); }
@media (min-width: 720px) { .datos { grid-template-columns: repeat(4, 1fr); } }
.dato { background: var(--hueso); padding: 13px 14px; }
/* 1.25rem en vez de 1.5rem: así "Pre compra" cabe en una sola línea en el ancho angosto de la columna */
.dato b { font-family: var(--f-t); font-size: 1.25rem; font-weight: 700; display: block; line-height: 1.1; }
.dato span { font-family: var(--f-m); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: var(--navy-45); }

/* ---------------- conmutador ---------------- */
.conmutador {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 60;
  display: flex; align-items: center; gap: 4px;
  background: var(--navy); color: var(--hueso);
  padding: 5px 6px; border-radius: 100px;
  box-shadow: 0 8px 28px rgba(20, 38, 52, .3);
}
.conmutador .cm-et {
  font-family: var(--f-m); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oro); padding: 0 6px 0 8px;
}
.conmutador button {
  background: transparent; border: 0; color: rgba(242, 240, 236, .62);
  padding: 7px 12px; border-radius: 100px; font-size: .78rem; letter-spacing: .02em;
}
.conmutador button[aria-current="true"] { background: var(--oro); color: var(--navy); font-weight: 600; }
@media (max-width: 420px) {
  .conmutador .cm-et { display: none; }
  .conmutador button { padding: 7px 10px; font-size: .74rem; }
}

/* ---------------- revelado ---------------- */
/* Ojo: esto es lo que hace que las capturas full_page salgan vacías si el
   test no scrollea. Es artefacto, no bug. Ver §11 del spec. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.reveal.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- portada ---------------- */
.portada { padding: 34px 0 40px; border-bottom: 1px solid var(--navy); }
.pt-grid { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .pt-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; }
  .portada { padding: 54px 0 60px; }
}
.pt-txt h1 em { font-style: normal; color: var(--oro-tinta); }
.pt-txt .bajada { color: var(--navy-70); max-width: 40ch; margin: 14px 0 20px; }
.pt-cta { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.pt-foto { margin: 0; position: relative; }
/* Vertical, como la foto. Nada de recortarla a panorámica. */
.pt-foto img { width: 100%; aspect-ratio: 739 / 760; object-fit: cover; object-position: center 38%; }

/* ---------------- secciones ---------------- */
.seccion { padding: 40px 0; border-bottom: 1px solid var(--linea); }
.seccion > .contenedor > .et { margin: 0 0 4px; }
.seccion > .contenedor > h2 { margin-bottom: 22px; }
@media (min-width: 900px) { .seccion { padding: 60px 0; } }

.areas { display: grid; gap: 1px; background: var(--navy); border: 1px solid var(--navy); }
@media (min-width: 820px) { .areas { grid-template-columns: 1fr 1fr; } }
.area { background: var(--hueso); padding: 22px 20px; }
.area h3 { font-size: 1.3rem; margin: 6px 0 8px; }
.area > p { color: var(--navy-70); font-size: .92rem; margin: 0 0 14px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  font-size: .88rem; padding: 7px 0 7px 18px; border-top: 1px solid var(--linea);
  position: relative;
}
/* Guión técnico, no tick de colores: el idioma del dossier (regla de marca). */
.lista li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px; background: var(--oro-tinta);
}

/* ---------------- horario ---------------- */
.horario { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--linea); padding: 13px 14px; max-width: 520px; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-45); flex: none; margin-top: 6px; }
.punto[data-abierto="true"] { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent); }
.hr-estado { font-family: var(--f-t); font-weight: 600; margin: 0 0 2px; }
.hr-detalle { font-size: .78rem; color: var(--navy-70); margin: 0; }
.hr-detalle em { font-style: normal; color: var(--navy-45); font-family: var(--f-m); font-size: .68rem; }

/* ---------------- rejilla de obras ---------------- */
.rejilla-obras { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla-obras { grid-template-columns: repeat(2, 1fr); } }
/* Son 5 obras: 4 columnas deja una tarjeta huérfana con 3 slots vacíos. 3 columnas = 3+2. */
@media (min-width: 980px) { .rejilla-obras { grid-template-columns: repeat(3, 1fr); } }
.btn.chico { padding: 7px 12px; font-size: .74rem; align-self: flex-start; }

/* ---------------- contacto ---------------- */
.ct-grid { display: grid; gap: 22px; }
@media (min-width: 880px) { .ct-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
.ct-form { display: flex; flex-direction: column; gap: 12px; }
.ct-form label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-family: var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-45); }
.ct-form input, .ct-form select, .ct-form textarea {
  font-family: var(--f-x); font-size: .95rem; color: var(--navy);
  background: var(--hueso); border: 1px solid var(--linea); border-radius: 3px;
  padding: 10px 11px; text-transform: none; letter-spacing: 0;
}
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus {
  outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--navy);
}
.ct-form .btn { align-self: flex-start; }
.ct-nota { font-size: .78rem; color: var(--navy-45); margin: 0; }
.ct-lado { display: flex; flex-direction: column; gap: 16px; }
.ct-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-datos li { display: flex; flex-direction: column; gap: 1px; font-size: .92rem; border-top: 1px solid var(--linea); padding-top: 8px; }
.ct-datos a:hover { color: var(--oro-tinta); }
.ct-redes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: 10px; font-size: .9rem; }
.ct-redes a { border-bottom: 1px solid var(--oro); }
.nota-ej { font-family: var(--f-m); font-size: .64rem; color: var(--navy-45); font-style: normal; }
.ct-qr { margin: 0; display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--linea); padding-top: 12px; }
.ct-qr img { border: 1px solid var(--linea); }
.ct-qr figcaption { font-size: .78rem; color: var(--navy-70); }
.ct-mapa { margin-top: 24px; }
.ct-mapa iframe { width: 100%; height: 260px; border: 1px solid var(--navy); display: block; filter: grayscale(.35); }

/* El main llevaba 210px de respiro abajo para que el WhatsApp flotante no
   tapara su última línea al final del scroll. Desde que el <footer> cierra la
   página ese trabajo lo hace el pie (padding-bottom: 88px): al final del scroll
   las píldoras flotan sobre el navy del pie, no sobre contenido. El respiro acá
   ya sólo dejaba un vacío de hueso enorme antes del pie — aire muerto. */
main { padding-bottom: 0; }

/* ---------------- whatsapp flotante ---------------- */
.wsp-flotante { position: fixed; right: 14px; bottom: 76px; z-index: 55; display: flex; flex-direction: column; gap: 8px; transition: bottom .15s; }
/* En 390px el aviso de cookies y estas píldoras compiten por la misma banda
   inferior: en la primera visita el aviso (más alto, z-index 58) quedaba
   pintado encima del botón de WhatsApp, tapando la conversión más
   importante del sitio. Mientras el aviso está visible, html.hay-cookies
   sube esta franja por sobre su alto REAL (medido en JS, no adivinado, para
   no depender de cuánto se envuelva el texto) más un respiro de 14px. */
html.hay-cookies .wsp-flotante { bottom: calc(76px + var(--cookies-alto, 120px) + 14px); }
.wsp-flotante a {
  background: var(--navy); color: var(--hueso); border: 1px solid var(--oro);
  padding: 9px 13px; border-radius: 100px; font-size: .76rem; letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(20, 38, 52, .25);
}
.wsp-flotante a:hover { background: var(--oro); color: var(--navy); }

/* ---------------- chat ---------------- */
/* Mueble fijo. Ojo con la banda de abajo: .conmutador (60), .cookies (58),
   .wsp-flotante (55). El chat va sobre ellos pero no los tapa: vive a la
   izquierda, no a la derecha. */
.chat { position: fixed; left: 14px; bottom: 76px; z-index: 57; }
/* El aviso de cookies (z-index 58, izq/der 14px — full width en 390px) se
   pinta encima de esta misma esquina en la primera visita, exactamente el
   defecto que el comentario de .wsp-flotante ya describe para el otro lado
   de la banda. Se sube por el mismo --cookies-alto medido en JS, con el
   mismo respiro de 14px que usa .wsp-flotante — para quedar a su misma
   altura en vez de a una arbitraria. */
html.hay-cookies .chat { bottom: calc(76px + var(--cookies-alto, 120px) + 14px); }
.chat[hidden] { display: none; }
.ch-tab {
  background: var(--navy); color: var(--hueso); border: 1px solid var(--oro);
  padding: 9px 15px; border-radius: 100px; font-size: .78rem; letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(20, 38, 52, .25);
}
.ch-tab:hover { background: var(--oro); color: var(--navy); }
/* El panel vive a la izquierda (.chat: left 14px) y las píldoras de
   .wsp-flotante a la derecha (right: 14px). Con width: min(320px,
   100vw - 28px) el panel llegaba a x ≈ 334 a 390px, invadiendo las píldoras
   de WhatsApp/Llamar (su borde izquierdo cae cerca de x ≈ 272-280, igual
   cuenta de "Cómo llegar" ~104px + 14px de right que ya usa .pie-fila para
   reservarles sitio). En vez de adivinar un número nuevo, se resta la misma
   zona reservada (120px) más el respiro de .chat (14px) al ancho del panel:
   así el panel se angosta solo en las pantallas donde de verdad falta
   espacio (celular) y sigue topado en 320px donde sobra (escritorio), sin
   tocar la posición ni el tamaño de las píldoras.*/
.ch-panel {
  position: absolute; bottom: 46px; left: 0;
  width: min(320px, calc(100vw - 14px - 120px - 14px));
  background: var(--hueso); border: 1px solid var(--navy);
  box-shadow: 0 14px 40px rgba(20, 38, 52, .28); padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ch-panel[hidden] { display: none; }
.ch-cab b { font-family: var(--f-t); font-size: .95rem; display: block; }
.ch-cab small { font-size: .7rem; color: var(--navy-45); }
.ch-hilo { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.ch-msg { font-size: .84rem; padding: 8px 10px; border-radius: 3px; max-width: 88%; }
.ch-yo { background: var(--navy); color: var(--hueso); align-self: flex-end; }
.ch-ellos { background: var(--hueso-2); color: var(--navy); align-self: flex-start; }
.ch-ops { display: flex; flex-direction: column; gap: 5px; }
.ch-ops button {
  background: transparent; border: 1px solid var(--linea); border-radius: 3px;
  padding: 7px 9px; font-size: .78rem; text-align: left; color: var(--navy);
}
.ch-ops button:hover { border-color: var(--navy); background: var(--hueso-2); }
.chat .btn.chico { text-align: center; }

/* ---------------- garantía y sellos ---------------- */
.gr-grid { display: grid; gap: 22px; }
@media (min-width: 880px) { .gr-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
.sellos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.sello-item { background: var(--hueso); padding: 13px 14px; }
.sello-item b { display: block; font-family: var(--f-t); font-size: .96rem; margin: 3px 0 2px; }
.sello-item small { font-size: .74rem; color: var(--navy-45); }

/* ---------------- pie ---------------- */
.pie { background: var(--navy); color: var(--hueso); padding: 26px 0 88px; }
.pie-fila { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pie-marca { font-family: var(--f-t); font-weight: 700; letter-spacing: .1em; margin: 0 0 4px; font-size: .92rem; }
.pie-txt { font-size: .8rem; color: rgba(242, 240, 236, .6); margin: 0; max-width: 46ch; }
.compartir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compartir .et { color: var(--oro); }
.compartir a { font-size: .82rem; border-bottom: 1px solid rgba(228, 173, 94, .5); }
/* Las píldoras flotantes son fixed a la derecha y al final del scroll caen justo
   encima del pie: sin reservarles la banda, cortaban "…& Construcción SpA" y la
   bajada a media palabra — y también los links de Compartir.
   "Cómo llegar" (la más ancha) mide ~104px más los 14px de right: del
   .wsp-flotante, así que hacen falta ~120px de aire a la derecha del pie
   SIEMPRE, no solo bajo un ancho fijo: con un breakpoint en 1219px, entre
   ahí y donde el margen del .contenedor (que crece con (100vw - --ancho)/2)
   vuelve a dar esos 120px por sí solo — recién cerca de 1374px — quedaba una
   franja muerta donde ni el padding ni el margen alcanzaban y las píldoras
   volvían a tapar el pie. En vez de adivinar un segundo número mágico para
   mover el quiebre, se pide el padding que falta: 120px menos lo que el
   margen del contenedor ya puso, nunca menos que --gutter. Así el padding se
   derrite solo, exactamente cuando el margen ya alcanza, sin salto ni resto
   de aire de más en anchos grandes. */
.pie-fila {
  padding-right: max(var(--gutter), 120px - max(0px, (100vw - var(--ancho)) / 2));
}

/* ---------------- cookies ---------------- */
.cookies {
  position: fixed; left: 14px; right: 14px; bottom: 76px; z-index: 58;
  background: var(--navy); color: var(--hueso); border: 1px solid var(--oro);
  padding: 13px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; box-shadow: 0 10px 30px rgba(20, 38, 52, .35);
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0; font-size: .8rem; }
.ck-link { color: var(--oro); border-bottom: 1px solid var(--oro); }
.cookies .btn { background: var(--oro); color: var(--navy); border-color: var(--oro); }
@media (min-width: 720px) { .cookies { left: auto; right: 14px; max-width: 460px; } }

/* ---------------- menú extra del Profesional ---------------- */
/* Los enlaces a las páginas propias. En Básico plan.js los oculta con hidden. */
.menu-pro { display: contents; }
.menu-pro[hidden] { display: none; }

/* ---------------- cotizador ---------------- */
.cz-bajada { color: var(--navy-70); margin: 0 0 20px; max-width: 46ch; }
.cz-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .cz-grid { grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; } }
.cz-form { display: flex; flex-direction: column; gap: 12px; }
.cz-form label { display: flex; flex-direction: column; gap: 5px; font-family: var(--f-m); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-45); }
.cz-form input, .cz-form select, .cz-form textarea {
  font-family: var(--f-x); font-size: .95rem; color: var(--navy);
  background: var(--hueso); border: 1px solid var(--linea); border-radius: 3px;
  padding: 10px 11px; text-transform: none; letter-spacing: 0;
}
.cz-form input:focus, .cz-form select:focus, .cz-form textarea:focus {
  outline: 2px solid var(--oro); outline-offset: 1px; border-color: var(--navy);
}
/* Sin el punto de quiebre, el par queda en 2 columnas también a 390px: el
   input y el select no bajan de su ancho mínimo de contenido, la fila se
   angosta menos de lo que el grid le pide y toda la cadena de ancestros
   (cz-form → cz-grid → contenedor → main) se estira para darle cabida —
   la página entera queda con scroll horizontal en celular. */
.cz-par { display: grid; gap: 12px; }
@media (min-width: 480px) { .cz-par { grid-template-columns: 1fr 1fr; } }
.cz-resumen { border: 1px solid var(--navy); padding: 16px 16px 18px; position: sticky; top: 78px; }
.cz-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.cz-fila b { font-family: var(--f-t); font-weight: 600; font-size: 1rem; text-align: right; }
.cz-resumen .btn { margin-top: 14px; width: 100%; text-align: center; }
.cz-nota { font-size: .76rem; color: var(--navy-45); margin: 8px 0 0; }
@media (max-width: 899px) { .cz-resumen { position: static; } }

/* ---------------- agenda ---------------- */
.ag-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .ag-grid { grid-template-columns: 1.2fr .8fr; gap: 30px; } }
.ag-dias { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.ag-dias button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--hueso); border: 1px solid var(--linea); border-radius: 3px;
  padding: 10px 12px; text-align: left; color: var(--navy);
}
.ag-dias button:hover { border-color: var(--navy); }
.ag-dias button[aria-pressed="true"] { border-color: var(--navy); background: var(--hueso-2); }
.ag-dia { font-family: var(--f-t); font-weight: 600; font-size: .95rem; text-transform: capitalize; }
.ag-cupos { font-family: var(--f-m); font-size: .62rem; letter-spacing: .08em; color: var(--oro-tinta); }
.ag-horas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; min-height: 44px; }
/* scroll-margin-bottom: en el Profesional a 390px, el navegador puede llevar
   este botón justo al borde inferior de la ventana al traerlo a la vista —
   exactamente donde vive la banda de muebles fijos (conmutador, cookies,
   WhatsApp, chat), que a veces sube más (--cookies-alto) mientras el aviso
   de cookies está visible. Sin este respiro, el botón podía quedar tapado
   por esos muebles justo cuando se le hace click (visto con el chat de la
   Tarea 4: tests/test_agenda.py::test_elegir_dia_y_hora_arma_el_whatsapp).
   El número no puede ser fijo: --cookies-alto se mide en JS del aviso real
   (index.html), no se adivina — si el texto del aviso alguna vez se envuelve
   a otra línea (copy más largo, otra fuente), un 230px fijo se queda corto
   en silencio y reabre la regresión que este respiro existe para cerrar. Se
   arma con la misma cuenta que ya usan `.wsp-flotante`/`.chat` para subir
   con el aviso — 76px (banda base de muebles fijos) + var(--cookies-alto)
   (alto real del aviso) + 14px (mismo respiro que ellos) — más 20px de
   colchón por el alto propio de la pila de píldoras/chat que queda por
   encima de ese punto. Con el fallback de 120px da los mismos 230px de
   antes; si el aviso real mide más, el respiro crece con él. */
.ag-horas button { scroll-margin-bottom: calc(76px + var(--cookies-alto, 120px) + 14px + 20px); }
.ag-horas button {
  background: var(--hueso); border: 1px solid var(--linea); border-radius: 3px;
  padding: 9px 13px; font-family: var(--f-m); font-size: .82rem; color: var(--navy);
}
.ag-horas button[aria-pressed="true"] { background: var(--navy); color: var(--hueso); border-color: var(--navy); }
.ag-vacio { font-size: .84rem; color: var(--navy-45); margin: 0; }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------------- comparador antes/después ---------------- */
/* Geometría heredada del par ya alineado (728x820). --cw fija el ancho interno
   de la foto "antes" para que las anclas calcen. No tocar sin realinear. */
/* margin: 0 auto centra la foto dentro de .contenedor — sin esto, en
   escritorio (donde .contenedor mide hasta 1180px y la foto no pasa de
   620px) el bloque quedaba pegado al margen izquierdo con un vacío enorme
   y asimétrico a la derecha: exactamente el tipo de "se ve pobre" que
   hundió la v1. La geometría propia de la foto (max-width, aspect-ratio)
   no se toca. */
.cmp {
  position: relative; overflow: hidden; user-select: none; touch-action: none;
  cursor: ew-resize; border: 1px solid var(--navy); max-width: 620px; margin: 0 auto;
}
.cmp img { width: 100%; aspect-ratio: 728 / 820; object-fit: cover; display: block; pointer-events: none; }
.cmp-a { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.cmp-a img { width: var(--cw, 620px); max-width: none; height: 100%; }
.cmp-h { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--oro); transform: translateX(-1px); }
.cmp-h::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: var(--oro);
  box-shadow: 0 6px 20px rgba(20, 38, 52, .4);
}
.cmp-h:focus-visible { outline: none; }
.cmp-h:focus-visible::after { box-shadow: 0 0 0 3px var(--navy); }
.cmp-tag {
  position: absolute; top: 12px; font-family: var(--f-m); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px;
  background: var(--navy-70); color: var(--hueso); pointer-events: none;
}
.cmp-tag.l { left: 12px; }
.cmp-tag.r { right: 12px; background: var(--oro); color: var(--navy); }

/* ---------------- galería ---------------- */
.gl-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.gl-filtros button {
  background: transparent; border: 1px solid var(--linea); border-radius: 100px;
  padding: 7px 14px; font-family: var(--f-m); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-70);
}
.gl-filtros button:hover { border-color: var(--navy); color: var(--navy); }
.gl-filtros button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--hueso); }
/* Masonry real con columnas CSS, no grid. `align-items: start` (el intento
   anterior) resolvía el estirado de un <button> a la altura de la fila más
   alta moviendo el hueco de arriba (58px) hacia ABAJO en vez de sacarlo: a
   1440px cada ficha corta seguía dejando hasta 114px de hueco muerto bajo
   ella, en las 4 filas — 35% del alto de fila — porque un grid reparte el
   alto de cada FILA según el ítem más alto de esa fila, mueva uno donde
   mueva el hueco. `columns` no tiene ese problema: cada columna fluye
   independiente y cada .gl-item mide exactamente lo suyo. `break-inside:
   avoid` evita que una foto se parta entre columnas; `margin-bottom`
   reemplaza el `gap` vertical del grid (columns sólo trae `column-gap`
   entre columnas, no separación entre filas). */
.gl-rejilla { columns: 2; column-gap: 8px; }
@media (min-width: 720px) { .gl-rejilla { columns: 3; } }
@media (min-width: 1040px) { .gl-rejilla { columns: 4; } }
.gl-item {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--linea); background: var(--hueso); overflow: hidden;
  cursor: zoom-in; break-inside: avoid; margin-bottom: 8px;
}
.gl-item[hidden] { display: none; }
/* Cada foto en su formato: la serie de la ampliación es apaisada (spec §2.4). */
.gl-item img { width: 100%; display: block; }
.gl-item[data-forma="vertical"] img { aspect-ratio: 739 / 860; object-fit: cover; }
.gl-item[data-forma="apaisada"] img { aspect-ratio: 739 / 555; object-fit: cover; }
.gl-item:hover { border-color: var(--navy); }
.gl-obra {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--navy-70);
  color: var(--hueso); font-family: var(--f-m); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 7px; text-align: left;
}
.gl-zoom {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 38, 52, .93);
  display: grid; place-items: center; padding: 20px;
}
.gl-zoom[hidden] { display: none; }
.gl-zoom figure { margin: 0; max-width: min(860px, 92vw); }
.gl-zoom img { width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.gl-zoom figcaption {
  font-family: var(--f-m); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro); padding-top: 10px; text-align: center;
}
.gl-cerrar {
  position: absolute; top: 16px; right: 16px; background: transparent;
  border: 1px solid var(--oro); color: var(--oro); border-radius: 100px;
  padding: 8px 15px; font-size: .78rem;
}
.gl-cerrar:hover { background: var(--oro); color: var(--navy); }

/* ---------------- promo: banner ---------------- */
/* Va arriba de todo, sobre la cabecera sticky (z-20): es lo primero que se
   ve al pasar a Profesional con el conmutador. No es fixed — empuja la
   página, así que no colisiona con nada del mueble inferior. */
.promo-banner {
  background: var(--navy);
  color: var(--hueso);
  font-family: var(--f-x);
  font-size: 13px;
  line-height: 1.4;
}
.promo-banner p {
  margin: 0 auto;
  max-width: var(--ancho);
  padding: 9px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.promo-banner b { color: var(--oro); }
.pb-reloj {
  font-family: var(--f-m);
  font-size: 12px;
  color: rgba(242, 240, 236, .72);
}
.pb-reloj b { color: var(--hueso); }
/* La marca de ejemplo no se esconde: el dato es inventado sobre una empresa
   real (§7 del spec 2b). */
.pb-ej {
  font-family: var(--f-m);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(242, 240, 236, .55);
  border: 1px solid rgba(242, 240, 236, .3);
  border-radius: 3px;
  padding: 1px 5px;
}