/* ============================================================================
   Momix — Home pública (rediseño 2026-08, handoff "Modo Dual"). Vista 1.
   Todo el estilo vive acá (la CSP del proyecto no permite style="" inline).
   Tema por variables en body / body.dark (toggle manual, persistido en JS).
   Fuentes Outfit (titulares/cifras/CTAs) + Manrope (cuerpo) — self-hosted.
   ============================================================================ */

/* ── Fuentes (ya self-hosted en assets/fonts; font-src 'self') ── */
@font-face { font-family:'Outfit';  font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2'); }

/* ── Reset mínimo + tokens de tema ── */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--pg); color:var(--head);
  font-family:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .4s ease;
  /* claro (default) */
  --pg:#F8FAFC; --head:#0F172A; --kick:#0B6E63; --mut:#475569; --mut2:#5E6D82;
  --card:#FFFFFF; --bord:#E2E8F0; --inb:#5E6D82;
  /* acentos fijos (no cambian por tema) */
  --green:#22D3A6; --green-h:#14B8A6; --green-lt:#7CEAD7; --green-tint:#DDFBF5; --green-dk:#0B6E63;
  --navy:#08111F; --navy-s:#0F172A; --navy-c:#111D33; --fav:#EF4444;
  --ink-on:#F1F5F9; --body-on:#CBD5E1; --meta-on:#94A3B8;
}
body.dark {
  --pg:#0B1220; --head:#F1F5F9; --kick:#7CEAD7; --mut:#94A3B8; --mut2:#8FA0B5;
  --card:#111D33; --bord:#233047; --inb:#3E4C63;
}
a { color:var(--green-dk); text-decoration:none; }
a:hover { color:var(--green-h); }
::selection { background:var(--green-tint); color:var(--navy); }
img { max-width:100%; }

/* ── Utilidades base ── */
/* El handoff fijaba 1440px de ancho máximo, pensado para una pantalla de 1440–1920. En un monitor
   4K (3840px) eso dejaba el contenido en una columna angosta al medio con dos vacíos enormes a los
   costados — reportado tres veces. El tope pasó a 3600px para que a 3840 mande el 92% y no el tope
   (con 3000 daba 78%, medido por tests/ux/escala-check.js). Los textos largos no se estiran igual:
   cada bajada tiene su propio max-width (620/540/480), así que se ensanchan las GRILLAS y no los
   renglones de lectura. Ensanchar solo esto NO alcanzaba: ver "Monitores grandes" al final. */
.mx-wrap { max-width:min(3600px, 92vw); width:100%; margin:0 auto; box-sizing:border-box;
  padding-left:clamp(24px,4vw,56px); padding-right:clamp(24px,4vw,56px); }
.mx-kicker { font:600 14px 'Outfit',sans-serif; letter-spacing:.14em; color:var(--kick); text-transform:uppercase; }
.mx-h2 { margin:0; font:600 clamp(28px,3vw,38px) 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--head); text-wrap:balance; }
.mx-skip { position:absolute; left:-999px; top:0; background:var(--green); color:var(--navy); padding:10px 16px; border-radius:8px; z-index:100; }
.mx-skip:focus { left:12px; top:12px; }

/* Reveal al scroll (IntersectionObserver agrega .is-in).
   OJO con el fail-safe: la regla que ESCONDE cuelga de `html.js`, que pone el propio home.js apenas
   arranca. Si el JS no corre (error, bloqueado, navegador viejo), el contenido queda VISIBLE en vez
   de invisible para siempre — una home en blanco es peor que una sin animación. */
html.js [data-reveal] { opacity:0; transform:translateY(26px); }
[data-reveal] { transition:opacity .7s ease, transform .7s ease; }
html.js [data-reveal].mx-d2 { transition-delay:.12s; }
html.js [data-reveal].mx-d3 { transition-delay:.18s; }
html.js [data-reveal].is-in { opacity:1; transform:none; }

/* ── Botones / chips ── */
.mx-btn { font:600 14px 'Outfit',sans-serif; border:none; border-radius:11px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all .2s;
  text-decoration:none; }
.mx-btn:active { transform:scale(.97); }
.mx-btn-primary { background:var(--green); color:var(--navy); }
.mx-btn-primary:hover { background:var(--green-h); color:var(--navy); }
.mx-btn-ghost-hero { color:var(--ink-on); border:1px solid rgba(241,245,249,.35); padding:11px 18px; border-radius:10px; }
.mx-btn-ghost-hero:hover { background:rgba(241,245,249,.12); color:var(--ink-on); }

/* ── Header del hero ── */
.mx-header { position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px clamp(24px,4vw,56px); min-height:62px; color:var(--ink-on); flex-wrap:wrap; }
.mx-logo { display:flex; align-items:center; gap:11px; }
.mx-logo img { height:34px; display:block; }
.mx-nav { display:flex; gap:clamp(14px,2.2vw,26px); align-items:center; font:500 14px 'Manrope',sans-serif; flex-wrap:wrap; }
/* inline-flex + align-items:center: sin esto, darles alto (44px táctil) a un <a>/<button> INLINE
   le corre la línea base y el "EN" del switch de idioma quedaba flotando arriba (bug visto en
   iPhone, 2026-08-23). Con caja flex el alto crece centrado y la fila queda pareja. */
.mx-nav a, .mx-nav .mx-navlink { color:var(--ink-on); cursor:pointer; transition:opacity .2s; background:none;
  border:none; font:inherit; padding:0; display:inline-flex; align-items:center; }
.mx-nav .mx-navdim { opacity:.75; }
.mx-nav .mx-navdim:hover { opacity:1; }
.mx-theme { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid rgba(241,245,249,.25); background:none; transition:all .2s; }
.mx-theme:hover { background:rgba(241,245,249,.12); }
.mx-theme .mx-sun { display:none; }
body.dark .mx-theme .mx-moon { display:none; }
body.dark .mx-theme .mx-sun { display:block; }
.mx-sound { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid rgba(241,245,249,.25); background:none; transition:all .2s; }
.mx-sound:hover { background:rgba(241,245,249,.12); }
.mx-sound .mx-sound-off { display:none; }
.mx-sound.is-muted .mx-sound-on { display:none; }
.mx-sound.is-muted .mx-sound-off { display:block; }
.mx-lang { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 11px; border-radius:999px;
  border:1px solid rgba(241,245,249,.25); cursor:pointer; font:600 12.5px 'Outfit',sans-serif;
  letter-spacing:.06em; color:var(--ink-on); text-decoration:none; transition:background .2s; }
.mx-lang:hover { background:rgba(241,245,249,.12); color:var(--ink-on); }
.mx-lang .on { color:var(--green-lt); }
.mx-lang .off { opacity:.45; }
.mx-lang .sep { opacity:.4; }
.mx-avatar { width:38px; height:38px; border-radius:999px; background:var(--green); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; font:600 15px 'Outfit',sans-serif; }

/* ── Menú de usuario (burbuja + desplegable) ──
   La home no carga style.css, así que las clases `.av` del CRM se redefinen acá en chico: la foto
   si el usuario subió una, o su inicial sobre verde. */
/* El menú del usuario del CRM se mudó a assets/public-usermenu.css: lo dibujan la home Y el
   explorador (components/public_usermenu.php), y tenerlo solo acá era la razón de que en
   Home-Mapa el avatar saliera como un recuadro negro sin estilo (Máximo, 2026-08-26). */


/* El slot del visitante lo repinta home.js y hoy trae TRES piezas (Mi cuenta · burbuja · Salir).
   Como inline se pegaban entre sí y el alto quedaba desparejo con el resto de la barra. */
[data-login-slot] { display:inline-flex; align-items:center; gap:10px; }

/* ── Hero ── */
/* Alto: Máximo pidió que en pantalla mediana y grande NO ocupe todo (se ve la sección de abajo
   asomando, y eso invita a scrollear). Pero 860px fijos en un 4K son el 40% de la pantalla y el
   hero queda como una franja perdida arriba. La fórmula lee al revés de lo que parece:
   min(…, 96vh) es el techo —nunca tapa la pantalla entera— y max(860px, 80vh) es el piso, que
   solo empieza a mandar cuando la pantalla pasa de ~1075px de alto. Hasta 1080p el número sigue
   siendo 860 exacto: los monitores de siempre no cambian.

   EL PISO ES 80vh Y NO 62vh (Máximo, 04/09/2026, monitor 8K de 27"). Con 62vh la portada era una
   fracción MÁS CHICA de la pantalla cuanto más grande el monitor —96% en un portátil de 800px de
   alto, 80% en un Full HD, 62% de 1435px para arriba— y en su pantalla quedaba una franja blanca
   con media fila de tarjetas asomando: la página «no se mostraba completa». Con 80vh la portada
   ocupa la MISMA proporción en todos los monitores altos, que es lo que ya hacía el Full HD.
   Los monitores donde el diseño está aprobado no se mueven: 800 y 1050 de alto quedan idénticos
   (manda el techo de 96vh o el piso de 860px) y 1080 pasa de 860 a 864px, cuatro píxeles. */
.mx-hero { position:relative; height:min(max(860px,80vh),96vh); min-height:640px; overflow:hidden; background:var(--navy);
  display:flex; flex-direction:column; }
.mx-hero-layers { position:absolute; inset:0; }
/* Una sola foto: se ve sin que ningún JS le ponga una clase (antes empezaba en opacity:0 y la
   encendía el carrusel). El zoom lento sigue: es el hero cinemático del diseño, no la rotación. */
.mx-hero-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:mxKen 26s ease-in-out infinite alternate; }
.mx-hero-veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,17,31,.66) 0%, rgba(8,17,31,.26) 42%, rgba(8,17,31,.82) 100%); }
.mx-hero-head { position:relative; }
.mx-hero-copy { position:relative; padding:clamp(16px,6vh,96px) clamp(24px,4vw,56px) 0; max-width:1080px; }
.mx-hero-eyebrow { font:600 13.5px 'Outfit',sans-serif; letter-spacing:.16em; color:var(--green);
  text-transform:uppercase; margin-bottom:18px; }
.mx-h1 { margin:0 0 16px; font:600 clamp(42px,5.4vw,76px)/1.04 'Outfit',sans-serif; letter-spacing:-.025em;
  color:var(--ink-on); text-wrap:balance; }
.mx-rotator { color:var(--green); display:inline-block; transition:opacity .38s ease, transform .38s ease; }
.mx-rotator.is-out { opacity:0; transform:translateY(12px); }
.mx-hero-lead { font:400 18px/1.6 'Manrope',sans-serif; color:var(--body-on); max-width:540px; }

/* Barra de búsqueda (glass) + solapas de operación.
   Las dos piezas son UNA: por eso quien se posiciona es el envoltorio y la barra vive adentro,
   estática. Si posicionara la barra, las solapas quedarían flotando por su cuenta y cualquier
   cambio de alto las despegaría.
   La barra entra en UNA SOLA LÍNEA de 900px para arriba (pedido de Máximo, 2026-08-24): con el tipo
   comprimido a ícono todo cabe en un renglón —incluido "Buscar"— y el campo de zona se queda con el
   resto. `flex-wrap:wrap` sigue abajo de 900px, donde envolver es lo correcto. */
.mx-searchwrap { position:absolute; left:clamp(24px,4vw,56px); right:clamp(24px,4vw,56px); bottom:118px; z-index:3; }
.mx-search { display:flex; align-items:center; gap:10px; background:rgba(241,245,249,.10); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border:1px solid rgba(241,245,249,.18);
  border-radius:0 18px 18px 18px; padding:12px; flex-wrap:wrap; }
@media (min-width:900px) { .mx-search { flex-wrap:nowrap; } }

/* Solapas de operación (referencia ZonaProp, lenguaje Momix).
   El truco para que se lean como una carpeta y no como cuatro botones sueltos: la solapa ACTIVA
   comparte fondo y borde con la barra, no tiene borde abajo y se superpone 1px sobre ella
   (margin-bottom:-1px) para tapar la línea que las separaría. Y la barra pierde el redondeo de la
   esquina superior IZQUIERDA, que es donde apoyan. El subrayado verde es el acento de Momix — el
   naranja de la referencia no existe en esta paleta. */
.mx-tabs { display:flex; gap:3px; padding-left:0; }
.mx-tab { position:relative; display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 20px 8px;
  border:1px solid transparent; border-bottom:none; border-radius:14px 14px 0 0; background:rgba(8,17,31,.38);
  color:var(--body-on); font:500 15px 'Manrope',sans-serif; cursor:pointer; white-space:nowrap;
  transition:background .2s, color .2s; margin-bottom:-1px; }
.mx-tab:hover { background:rgba(8,17,31,.56); color:var(--ink-on); }
.mx-tab.on { background:rgba(241,245,249,.10); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-color:rgba(241,245,249,.18); color:var(--ink-on); font-weight:600; font-family:'Outfit',sans-serif; }
/* El subrayado va DEBAJO del texto, como en la referencia. No puede ir pegado al borde inferior:
   ahí la solapa se funde con la barra y la línea se leería como una grieta entre las dos. */
.mx-tab.on::after { content:''; position:absolute; left:20px; right:20px; bottom:8px; height:3px;
  background:var(--green); border-radius:2px; }
.mx-tab svg { flex:none; }
.mx-seg { display:flex; background:rgba(8,17,31,.45); border-radius:12px; padding:4px; flex:none; }
.mx-seg button { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border:none; border-radius:9px;
  background:none; color:var(--body-on); font:500 14px 'Manrope',sans-serif; cursor:pointer; transition:all .2s; }
.mx-seg button.on { background:rgba(241,245,249,.16); color:var(--ink-on); font-weight:600; font-family:'Outfit',sans-serif; }
.mx-seg-green button.on { background:var(--green); color:var(--navy); }
/* El campo de zona es el protagonista de la barra: se queda con TODO el resto de la fila y se
   distingue del resto con más contraste y un borde que se enciende en verde al enfocar. Antes tenía
   el mismo fondo que los botones y en un monitor grande parecía un vacío. */
.mx-search-field { flex:1 1 auto; min-width:180px; position:relative; }
.mx-search-inp { display:flex; align-items:center; gap:10px; padding:0 18px; height:48px; background:rgba(8,17,31,.62);
  border:1px solid rgba(241,245,249,.22); border-radius:12px; transition:border-color .2s, background .2s; }
.mx-search-inp:focus-within { border-color:var(--green); background:rgba(8,17,31,.74); }
.mx-search-inp input { flex:1; background:transparent; border:none; outline:none; color:var(--ink-on);
  font:400 15px 'Manrope',sans-serif; min-width:0; }
.mx-search-inp svg, .mx-pick svg { flex:none; }
/* ── Panel "Más filtros" del hero ──
   Abre HACIA ARRIBA como el resto de los desplegables de la barra (regla del handoff) y usa la
   misma superficie oscura, para que se lea como parte del buscador y no como un modal aparte. */
.mx-ff { position:relative; flex:none; }
.mx-ff-btn { position:relative; height:48px; display:inline-flex; align-items:center; gap:8px; padding:0 16px;
  border-radius:12px; border:1px solid rgba(241,245,249,.22); background:rgba(241,245,249,.10);
  color:var(--ink-on); font:500 14px 'Manrope',sans-serif; cursor:pointer; transition:background .2s; }
.mx-ff-btn:hover { background:rgba(241,245,249,.18); }
.mx-ff-badge { min-width:20px; height:20px; border-radius:999px; background:var(--green); color:var(--navy);
  font:600 11.5px 'Outfit',sans-serif; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.mx-ff-badge[hidden] { display:none; }
/* El PANEL en sí ya no se dibuja acá: es una pieza compartida con el explorador
   (assets/filters.css + components/public_filters.php + assets/filters.js), a pedido de Máximo
   (2026-08-24): "los filtros tienen que ser iguales porque la lógica debe estar en el mismo lugar".
   Lo único que queda de la home es SU PALETA, en los tokens `--mxf-*` que lee esa hoja.

   Acá el drawer va sobre la home, que es oscura de punta a punta (también en tema claro: el hero es
   una foto con velo), así que los valores son los de la superficie navy y NO cambian con el tema —
   igual que la barra de búsqueda del hero, que tampoco cambia. */
body {
  /* Menú del usuario del CRM (assets/public-usermenu.css). Se mapea a la paleta CLARA a
     propósito: el panel es una superficie clara aunque la barra que lo contiene sea oscura. */
  --mxum-card:var(--card); --mxum-bord:var(--bord); --mxum-tx:var(--head); --mxum-tx2:var(--mut);
  --mxum-hover:var(--pg); --mxum-av-bg:var(--green); --mxum-av-tx:var(--navy);
  /* La insignia del rol y el rojo de «Cerrar sesión»: los mismos que usa el panel, mapeados a
     la paleta de la home para que no se vean pegoteados de otro lado. */
  --mxum-badge-bg:var(--accent-soft,#DDFBF5); --mxum-badge-tx:var(--accent-soft-fg,#0B6E63);
  --mxum-danger:#A32B2B; --mxum-warn-bg:#FEF3C7; --mxum-warn-tx:#92400E;   /* los MISMOS valores que la insignia y el rojo del menú del panel */
  --mxf-surface:var(--navy-s);
  --mxf-surface-2:rgba(8,17,31,.35);
  --mxf-border:rgba(148,163,184,.25);
  --mxf-border-soft:rgba(148,163,184,.18);
  --mxf-tx:var(--ink-on);
  --mxf-tx2:var(--body-on);
  --mxf-tx3:var(--meta-on);
  --mxf-on-bg:#12362D;
  --mxf-on-tx:var(--green-lt);
  --mxf-track:var(--inb);
  --mxf-thumb-bd:var(--navy-s);
  --mxf-shadow:-18px 0 44px rgba(8,17,31,.55);
  --mxf-foot-shadow:0 -8px 20px rgba(8,17,31,.35);
}

/* Dropdowns del hero: abren HACIA ARRIBA */
.mx-drop { position:absolute; bottom:56px; left:0; right:0; background:var(--navy-s); border:1px solid rgba(148,163,184,.22);
  border-radius:14px; padding:8px; box-shadow:0 10px 24px rgba(8,17,31,.5); z-index:9; }

/* Los pickers de operación y tipo son angostos, así que su desplegable no puede heredar el
   `left:0;right:0` de .mx-drop (quedaría del ancho del botón y se cortarían los nombres largos).
   Se ancla a la izquierda con ancho propio, y sale HACIA ARRIBA como el resto del hero. */
.mx-drop-l { left:0; right:auto; width:238px; max-height:min(60vh,380px); overflow-y:auto; }
.mx-drop-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:9px; cursor:pointer;
  color:var(--ink-on); font:400 14px 'Manrope',sans-serif; transition:background .15s; background:none; border:none; width:100%; text-align:left; }
.mx-drop-item:hover { background:#1E293B; }
.mx-drop-item.on { background:#12362D; color:var(--green-lt); }
.mx-drop-item .mx-drop-count { margin-left:auto; flex:none; background:var(--green-tint); color:var(--green-dk);
  font:600 11.5px 'Manrope',sans-serif; padding:2px 8px; border-radius:999px; }
/* Sugerencias de lugares (assets/places-search.js, la misma pieza que el explorador). El nombre en
   negrita y la referencia —ciudad o provincia— atrás, apagada: alcanza para distinguir dos "Pilar". */
.mx-sug-t { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-sug-s { color:var(--meta-on); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-drop-item.on { background:#1E293B; }
/* Pickers de OPERACIÓN y TIPO: ícono + texto + flechita, el mismo componente que el mobile del
   explorador. Cuando hay algo elegido se enciende en verde, que es la única señal de "hay un filtro
   puesto" ahora que no están los chips. */
.mx-pick { position:relative; flex:none; }
.mx-pick-btn { display:flex; align-items:center; gap:9px; padding:0 15px; height:48px; background:rgba(8,17,31,.45);
  border:1px solid rgba(241,245,249,.14); border-radius:12px; color:var(--body-on);
  font:500 15px 'Manrope',sans-serif; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.mx-pick-btn:hover { background:rgba(8,17,31,.62); color:var(--ink-on); }
.mx-pick-btn.is-set { border-color:var(--green); color:var(--green-lt); font-weight:600; }
.mx-pick-caret { opacity:.6; }
.mx-drop-item svg { flex:none; color:var(--meta-on); }
.mx-drop-item.on svg { color:var(--green-lt); }
.mx-search-go { background:var(--green); color:var(--navy); font:600 15px 'Outfit',sans-serif; height:48px;
  display:inline-flex; align-items:center; gap:8px; padding:0 30px; border:none; border-radius:12px; cursor:pointer; flex:none; transition:all .2s; }
.mx-search-go:hover { background:var(--green-h); }
.mx-search-go:active { transform:scale(.96); }

/* Stats + hint */
.mx-stats { position:absolute; left:clamp(24px,4vw,56px); bottom:30px; display:flex; gap:clamp(18px,3.5vw,44px);
  color:var(--ink-on); flex-wrap:wrap; }
.mx-stat-n { font:600 27px 'Outfit',sans-serif; font-variant-numeric:tabular-nums; }
.mx-stat-l { font:400 12.5px 'Manrope',sans-serif; color:var(--meta-on); }
.mx-hint { position:absolute; right:clamp(24px,4vw,56px); bottom:30px; z-index:3; display:flex; flex-direction:column;
  align-items:flex-end; gap:10px; }
.mx-hint-txt { color:var(--meta-on); font:500 12px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; }
.mx-hint-txt svg { animation:mxFloat 2.2s ease-in-out infinite; }

/* ── Sección Destacadas ── */
.mx-sec { padding:clamp(56px,7vw,88px) 0 24px; }
.mx-sec-tight { padding:clamp(48px,6vw,72px) 0; }
.mx-sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:30px;
  flex-wrap:wrap; }
/* A 320px (el ancho más chico que existe) el "Ver todas" no entraba al lado del título y empujaba
   scroll horizontal: que envuelva y que pueda achicarse. */
.mx-seemore { min-width:0; max-width:100%; }
.mx-sec-head .mx-kicker { margin-bottom:8px; display:block; }
.mx-seemore { font:500 14px 'Manrope',sans-serif; color:var(--kick); cursor:pointer; background:none; border:none; flex:none; }
.mx-seemore:hover { color:var(--green-h); }
.mx-grid-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:20px; }
.mx-card { position:relative; border-radius:16px; overflow:hidden; height:440px; cursor:pointer; display:block;
  transition:transform .25s, box-shadow .25s; background:var(--navy-c); }
.mx-card:hover { transform:translateY(-5px); box-shadow:0 10px 24px rgba(8,17,31,.2); }
.mx-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.mx-card:hover .mx-card-img { transform:scale(1.05); }
.mx-card-noimg { position:absolute; inset:0; background:linear-gradient(135deg,#1E293B,#0F172A); }
.mx-card-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,17,31,0) 40%, rgba(8,17,31,.84) 100%); }
.mx-badge-op { position:absolute; top:16px; left:16px; font:600 12px 'Outfit',sans-serif; padding:5px 12px; border-radius:999px; }
.mx-badge-venta { background:var(--green); color:var(--navy); }
.mx-badge-alq { background:rgba(241,245,249,.92); color:var(--navy-s); }
.mx-fav { position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:999px;
  background:rgba(241,245,249,.92); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:none; transition:transform .15s; }
.mx-fav:active { transform:scale(.82); }
.mx-fav svg { fill:none; stroke:rgba(15,23,42,.55); stroke-width:1.6; }
.mx-fav.is-fav svg { fill:var(--fav); stroke:var(--fav); }
.mx-card-body { position:absolute; left:22px; right:22px; bottom:20px; color:var(--ink-on); }
.mx-card-price { font:600 23px 'Outfit',sans-serif; margin-bottom:4px; }
.mx-card-price .per { font:400 14px 'Manrope',sans-serif; color:var(--body-on); }
.mx-card-title { font:500 15px 'Manrope',sans-serif; }
.mx-card-meta { font:400 13px 'Manrope',sans-serif; color:var(--meta-on); margin-top:3px; }

/* ── Barrios ── */
/* 220px de mínimo metía 7 y 8 barrios por fila (medido: 237px reales a 1920) — una tira de
   estampillas donde no se lee el nombre. Con 280 el navegador arma menos columnas y cada baldosa
   crece; el alto acompaña en los tramos de abajo. */
.mx-grid-nb { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:18px; }
.mx-nb { position:relative; height:230px; border-radius:16px; overflow:hidden; cursor:pointer; display:block; background:var(--navy-c); }
.mx-nb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:linear-gradient(150deg,#1E293B,#0F172A); transition:transform .6s; }
.mx-nb:hover .mx-nb-img { transform:scale(1.06); }
.mx-nb-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,17,31,.05) 30%, rgba(8,17,31,.78) 100%); }
.mx-nb-body { position:absolute; left:18px; bottom:16px; color:var(--ink-on); }
.mx-nb-name { font:600 19px 'Outfit',sans-serif; }
.mx-nb-count { font:400 12.5px 'Manrope',sans-serif; color:var(--body-on); }

/* ── Para inmobiliarias (navy, no cambia por tema) ── */
.mx-b2b { background:var(--navy-s); margin-top:24px; }
.mx-b2b .mx-kicker { color:var(--green-lt); margin-bottom:12px; display:block; }
.mx-b2b-h2 { margin:0 0 10px; font:600 clamp(28px,3vw,40px)/1.12 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--ink-on); text-wrap:balance; }
.mx-b2b-lead { font:400 15px/1.65 'Manrope',sans-serif; color:var(--body-on); max-width:620px; }
.mx-b2b-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:18px; margin-top:40px; }
.mx-b2b-card { background:var(--navy-c); border:1px solid rgba(148,163,184,.14); border-radius:16px; padding:24px; }
.mx-b2b-ico { width:42px; height:42px; border-radius:12px; background:#12362D; color:var(--green-lt);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.mx-b2b-t { font:600 16px 'Outfit',sans-serif; color:var(--ink-on); margin-bottom:6px; }
.mx-b2b-d { font:400 13px/1.6 'Manrope',sans-serif; color:var(--meta-on); }
.mx-portals { display:flex; align-items:center; gap:36px; margin-top:44px; padding-top:28px;
  border-top:1px solid rgba(148,163,184,.14); flex-wrap:wrap; }
.mx-portals-lbl { font:600 13px 'Outfit',sans-serif; letter-spacing:.14em; color:var(--meta-on); text-transform:uppercase; flex:none; }
/* Cada portal va en una PASTILLA CLARA con su logo a color. Antes se les aplicaba
   `grayscale(1) brightness(3)` para volverlos blancos sobre el navy: los logos reales no son
   siluetas planas y quedaban convertidos en manchas irreconocibles (se veía una "llave" y una
   "nube"). Sobre blanco se leen como son, que es el punto de mostrar la marca. */
.mx-portal { display:inline-flex; align-items:center; justify-content:center; height:40px; min-width:56px;
  padding:0 14px; border-radius:10px; background:#F1F5F9; transition:transform .2s, background .2s; }
.mx-portal:hover { transform:translateY(-2px); background:#fff; }
.mx-portal img { height:22px; width:auto; display:block; }
.mx-portal-mono { font:700 14px 'Outfit',sans-serif; letter-spacing:.02em; color:#0F172A; text-transform:uppercase; }
.mx-portals .mx-portal-note { font:500 13px 'Manrope',sans-serif; color:var(--meta-on); display:inline-flex; align-items:center; gap:7px; }

/* ── Demo ── */
.mx-demo { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(28px,4vw,56px); align-items:center; }
.mx-demo .mx-kicker { margin-bottom:12px; display:block; }
.mx-demo-h2 { margin:0 0 12px; font:600 clamp(28px,3vw,40px)/1.12 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--head); text-wrap:balance; }
.mx-demo-lead { font:400 15px/1.7 'Manrope',sans-serif; color:var(--mut); max-width:480px; }
.mx-demo-mini { display:flex; gap:28px; margin-top:28px; flex-wrap:wrap; }
.mx-demo-mini b { display:block; font:600 22px 'Outfit',sans-serif; color:var(--head); }
.mx-demo-mini span { font:400 12.5px 'Manrope',sans-serif; color:var(--mut2); }
.mx-demo-card { background:var(--card); border:1px solid var(--bord); border-radius:18px; padding:32px; box-shadow:0 10px 24px rgba(8,17,31,.08); }
.mx-field { height:50px; width:100%; border:1px solid var(--inb); border-radius:12px; padding:0 16px; margin-bottom:12px;
  font:400 14px 'Manrope',sans-serif; color:var(--head); background:transparent; outline:none; }
.mx-field:focus { border-color:var(--green); }
.mx-demo-card .mx-btn { width:100%; height:54px; margin-top:8px; font-size:15.5px; }
/* --mut2 y no --meta-on: este último (#94A3B8) es el gris para fondo OSCURO, y acá la tarjeta es
   blanca — daba 2.56:1. Mismo desliz que ya se corrigió en la inmobiliaria de cada tarjeta. */
.mx-demo-note { font:400 12.5px 'Manrope',sans-serif; color:var(--mut2); margin-top:12px; text-align:center; }
.mx-hpot { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.mx-flash { border-radius:12px; padding:14px 18px; font:500 14px 'Manrope',sans-serif; margin-bottom:16px; }
.mx-flash-ok { background:var(--green-tint); color:var(--green-dk); border:1px solid var(--green); }
.mx-flash-err { background:#FEE2E2; color:#B91C1C; border:1px solid #FCA5A5; }

/* ── Footer ── */
.mx-footer { background:var(--navy-s); color:var(--meta-on); margin-top:auto; }
.mx-footer-in { display:flex; align-items:center; justify-content:space-between; padding:36px 0;
  font:400 13px 'Manrope',sans-serif; flex-wrap:wrap; gap:14px; }
.mx-footer-logo { display:flex; align-items:center; gap:8px; }
.mx-footer-logo img { height:26px; display:block; }
.mx-footer-links { display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
/* background/border/padding explícitos: `.mx-navlink` acá es un <button> y sin esto el navegador le
   pone su fondo gris nativo (buttonface) — se veía una píldora gris en el footer y axe lo marcaba
   como contraste 1.3 (texto claro sobre gris). Bug visto en iPhone, 2026-08-23. */
.mx-footer-links a, .mx-footer-links .mx-navlink { color:var(--body-on); cursor:pointer; background:none;
  border:none; font:inherit; padding:0; display:inline-flex; align-items:center; }

/* ── Volver arriba ── */
.mx-top { position:fixed; bottom:20px; right:20px; z-index:35; width:46px; height:46px; border-radius:999px;
  background:rgba(15,23,42,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; opacity:0; transform:translateY(14px);
  pointer-events:none; transition:opacity .3s, transform .3s, background .2s; }
.mx-top.is-on { opacity:.85; transform:none; pointer-events:auto; }
.mx-top.is-on:hover { opacity:1; background:var(--navy-s); }

/* ── Login modal (visitante) ── */
.mx-login-scrim { position:fixed; inset:0; background:rgba(8,17,31,.55); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); z-index:65; display:flex; align-items:center; justify-content:center; padding:16px; }
/* .clase{display:flex} le gana al [hidden] del navegador por cascada — hay que declararlo (trampa CLAUDE.md) */
.mx-login-scrim[hidden] { display:none; }
/* La burbuja del "Ingresar" — adentro va /login?embed=1, la pantalla de verdad.
   Ancho fijo y alto acotado a la ventana: el login tiene pasos de distinta altura (email →
   contraseña → código → 2FA) y sin un alto estable la burbuja saltaría en cada paso. */
.mx-login-pop { position:relative; width:440px; max-width:calc(100vw - 32px);
  height:min(640px, calc(100vh - 48px));   /* 48 y no 80: con el margen viejo, en una ventana
     de 660 el paso de la contraseña se pasaba por 11px y aparecía la barra de scroll justo
     en el paso que más se usa (Máximo, 02/09). 24px arriba y abajo siguen despegándolo. */ background:var(--card); border:1px solid var(--bord);
  border-radius:18px; box-shadow:0 28px 70px rgba(8,17,31,.42); overflow:hidden;
  animation:mxLoginIn .22s cubic-bezier(.3,.7,.2,1); }
/* El iframe no pinta nada: el fondo lo pone el login adentro, según SU tema. Si acá se pintara,
   quedaría un color asomando por debajo en el tema contrario (Máximo, 02/09). */
.mx-login-frame { display:block; width:100%; height:100%; border:0; background:transparent; }
.mx-login-x { position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px;
  background:var(--pg); color:var(--mut); cursor:pointer; }
.mx-login-x:hover { color:var(--head); }
.mx-login-x:focus-visible { outline:2px solid #22D3A6; outline-offset:2px; }
@keyframes mxLoginIn { from { opacity:0; transform:translateY(-10px) scale(.985); } to { opacity:1; transform:none; } }
/* Con la burbuja abierta, el fondo no scrollea. */
html.mx-login-abierta, html.mx-login-abierta body { overflow:hidden; }




[data-login-step][hidden] { display:none; }

/* ── Toast ── */
.mx-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--navy-s); color:var(--ink-on);
  font:500 13.5px 'Manrope',sans-serif; padding:12px 22px; border-radius:999px; box-shadow:0 10px 24px rgba(8,17,31,.35);
  z-index:70; display:none; align-items:center; gap:9px; }
.mx-toast.is-on { display:flex; animation:mxToastIn .25s ease; }
.mx-toast .dot { width:8px; height:8px; border-radius:999px; background:var(--green); flex:none; }

/* ── Capa Modo Mapa (explorador deslizante) ── */
.mx-layer { position:fixed; inset:0; z-index:40; background:var(--navy-s); transform:translateX(102%);
  transition:transform .6s cubic-bezier(.3,.7,.2,1); box-shadow:-20px 0 60px rgba(8,17,31,.45); }
.mx-layer.is-on { transform:none; }
.mx-layer iframe { width:100%; height:100%; border:none; display:block; }
.mx-layer-home { position:absolute; bottom:18px; left:18px; z-index:60; display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 18px 0 14px; border-radius:999px; background:rgba(15,23,42,.88); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); color:var(--ink-on); font:600 13px 'Outfit',sans-serif; cursor:pointer; border:none;
  box-shadow:0 10px 24px rgba(8,17,31,.35); opacity:.85; transition:all .25s; }
.mx-layer-home:hover { opacity:1; background:var(--navy-s); padding-right:22px; }

/* ── Animaciones ── */
@keyframes mxKen { from { transform:scale(1); } to { transform:scale(1.1); } }
@keyframes mxFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }
@keyframes mxToastIn { from { opacity:0; transform:translate(-50%,14px); } to { opacity:1; transform:translate(-50%,0); } }

/* ── Responsive (breakpoint JS único 800px oculta el hint) ── */
@media (max-width:800px) { .mx-hint .mx-hint-txt { display:none; } }
@media (max-width:720px) {
  .mx-searchwrap { bottom:96px; }
  .mx-stats { position:static; margin-top:14px; padding:0 clamp(24px,4vw,56px) 24px; }
  .mx-hint { display:none; }
}
@media (max-width:560px) {
  .mx-hero { height:auto; min-height:0; padding-bottom:20px; }
  .mx-hero-layers, .mx-hero-veil { position:absolute; }
  .mx-searchwrap { position:static; margin:16px clamp(16px,4vw,24px) 0; }
  /* En pantalla angosta las cuatro solapas no entran: se deslizan de costado en vez de envolver
     (envolver haría dos filas de solapas, que no se lee como carpeta). `min-width:0` porque un
     ítem flex no se achica sin eso — trampa conocida. */
  .mx-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; }
  .mx-tabs::-webkit-scrollbar { display:none; }
  .mx-tab { padding:0 14px; font-size:14px; }
  .mx-search-field { min-width:0; flex-basis:100%; }
  .mx-h1 { font-size:clamp(34px,8vw,46px); }
  /* Los dos pickers comparten la fila con Lista/Mapa: que puedan achicarse (min-width:0 — un ítem
     flex NO se achica sin eso, trampa conocida) y que el texto se recorte antes de desbordar.
     Reemplaza al ajuste que necesitaba el viejo segmentado de cuatro chips, que a 360px se pasaba
     1px del viewport. */
  .mx-pick { flex:0 1 auto; min-width:0; }
  .mx-pick-btn { min-width:0; padding:0 12px; }
  .mx-pick-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto; }
}
/* iOS Safari hace ZOOM automático al enfocar un campo con letra menor a 16px, y después deja la
   página zoomeada: se ven los laterales cortados y se puede arrastrar de costado (reportado desde
   un iPhone, 2026-08-24). No se arregla con maximum-scale —eso rompe el zoom a mano, que es una
   herramienta de accesibilidad—: se arregla dándole 16px a los campos en pantallas táctiles. */
@media (pointer:coarse) {
  /* Los campos del drawer de filtros ya no están acá: filters.css trae su propia regla táctil. */
  .mx-field, #mxQ, .mx-search-inp input, input[type="text"], input[type="email"], select, textarea{ font-size:16px; }
}

/* Táctil: el estándar del proyecto pide 44px MÍNIMO en todo control operable (antes acá decía 38 y
   la suite de UX marcaba 18 controles cortos). Los que son chicos a propósito (dots del carrusel,
   toggles redondos) no se agrandan visualmente: se les amplía el ÁREA DE TOQUE con un ::after
   centrado de 44×44, que es la técnica correcta — el dibujo queda igual, el dedo tiene dónde caer. */
@media (pointer:coarse) {
  .mx-nav .mx-navlink, .mx-nav a, .mx-lang, .mx-seg button, .mx-pick-btn, .mx-search-go,
  .mx-btn-ghost-hero, .mx-seemore, .mx-footer-links a, .mx-footer-links .mx-navlink,
  .mx-logo, .mx-footer-logo { min-height:44px; }
  /* min-width también: en inglés "Log in" mide 39px y no llegaba al piso de 44 (en español
     "Ingresar" sí). El ancho lo tiene que garantizar el CSS, no el largo de la traducción. */
  .mx-nav .mx-navlink, .mx-nav a { min-width:44px; justify-content:center; }
  .mx-theme, .mx-sound { width:44px; height:44px; }
  .mx-search-inp, .mx-search-inp input { min-height:44px; }
  /* El "ES / EN" son dos palabras de 18px de ancho: se ensanchan con padding (el alto ya lo da la
     fila), que es lo que pide WCAG 2.5.8 sin agrandar la tipografía. */
  .mx-lang .on, .mx-lang .off { min-width:44px; justify-content:center; display:inline-flex; align-items:center; align-self:stretch; }
  /* El corazón mide 42px por diseño; en TÁCTIL manda el piso de 44px del estándar (en mouse queda
     como el diseño). Los dots del carrusel son 7px a propósito: ahí sí va el ::after invisible,
     porque agrandarlos rompería el dibujo. */
  .mx-fav { width:44px; height:44px; }
}

/* ── Monitores grandes (≥1700px y ≥2400px) ─────────────────────────────────────────────────────
   Máximo reportó tres veces que la home "no se adapta al tamaño del monitor" — con fotos de un 27"
   4K y de un 22". Las dos primeras vueltas ensancharon el contenedor, y no era eso: el contenido
   YA ocupaba el 92% del ancho. Lo que no crecía era TODO LO DEMÁS. Con la tipografía y las alturas
   en píxeles fijos, una pantalla más grande no muestra la página más grande: muestra la misma
   página más chica y con más aire muerto. `tests/ux/escala-check.js` lo puso en números (titular a
   1,98% del ancho en 4K, baldosas de barrio de 237px).

   La regla de diseño acá es: en un monitor más grande las cosas se hacen MÁS GRANDES, no MÁS.
   Los saltos son dos y arrancan en 1700px, así que 1280 · 1366 · 1440 · 1680 (los monitores donde
   el diseño ya estaba aprobado) no se tocan ni un píxel. */
@media (min-width:1700px) {
  .mx-h1 { font-size:92px; }
  .mx-hero-lead { font-size:20px; max-width:620px; }
  .mx-hero-eyebrow { font-size:15px; }
  .mx-h2 { font-size:44px; }
  .mx-kicker { font-size:15px; }
  .mx-card { height:520px; }
  .mx-card-price { font-size:26px; }
  .mx-card-title { font-size:17px; }
  .mx-card-meta { font-size:14px; }
  .mx-nb { height:268px; }
  .mx-nb-name { font-size:22px; }
  .mx-nb-count { font-size:14px; }
  /* El header y las cifras del hero no los agarraba ningún criterio del test, pero en la captura de
     4K se veían como una hilera de letra chica arriba de una foto enorme. Se miran igual que el
     resto: son parte de la escala de la página. */
  .mx-nav, .mx-btn { font-size:15px; }
  .mx-logo img { height:38px; }
  .mx-stat-n { font-size:31px; }
  .mx-stat-l { font-size:14px; }
  .mx-seemore { font-size:15px; }
}
@media (min-width:2400px) {
  .mx-h1 { font-size:116px; }
  .mx-hero-lead { font-size:23px; max-width:720px; }
  .mx-hero-eyebrow { font-size:17px; }
  .mx-h2 { font-size:54px; }
  .mx-kicker { font-size:17px; }
  .mx-card { height:620px; }
  .mx-card-price { font-size:31px; }
  .mx-card-title { font-size:19px; }
  .mx-card-meta { font-size:16px; }
  .mx-nb { height:330px; }
  .mx-nb-name { font-size:26px; }
  .mx-nb-count { font-size:16px; }
  /* La barra del hero también es de píxeles fijos: sin esto queda como una ranura fina en el medio
     de una foto enorme. El alto va junto con la tipografía o el texto no respira. */
  /* Todos los controles de la barra al MISMO alto o se ve como una fila desprolija: el segmentado
     y "Más filtros" quedaban 10px más bajos que el resto (visto en la captura a 2560). El
     segmentado suma padding propio, por eso 48+5+5 = 58. */
  .mx-search-inp, .mx-pick-btn, .mx-search-go, .mx-ff-btn { height:58px; font-size:17px; }
  .mx-tab { height:54px; font-size:17px; }
  .mx-search-inp input { font-size:17px; }
  .mx-seg { padding:5px; }
  .mx-seg button { height:48px; font-size:16px; }
  .mx-nav, .mx-btn { font-size:17px; }
  .mx-logo img { height:46px; }
  .mx-stat-n { font-size:38px; }
  .mx-stat-l { font-size:16px; }
  .mx-seemore { font-size:17px; }
  .mx-lang { font-size:15px; }
  .mx-theme, .mx-sound { width:44px; height:44px; }
  .mx-avatar, .mx-um .av { width:46px; height:46px; font-size:18px; }
}


/* ── Solapas del "Ingresar": visitante / inmobiliaria (2026-08-25) ───────────────────────────
   El mismo botón es la puerta de las dos identidades. La solapa del CRM no trae campos: manda a
   /login, que es la pantalla real (bloqueo por intentos, segundo factor, dispositivo nuevo).
   Ver el porqué en components/public_login.php. */










/* Menú del visitante: la forma vive en assets/public-usermenu.css (una sola copia). Acá quedan
   solo los colores, que cada pantalla nombra con sus propias variables de tema. */
.pu-um-panel { background:var(--card); border:1px solid var(--bord); }
.pu-um-head { border-bottom:1px solid var(--bord); }
.pu-um-head strong, .pu-um-item { color:var(--head); }
.pu-um-item:hover, .pu-um-item:focus-visible { background:var(--inb); }
.pu-um-sep { border-top:1px solid var(--bord); }

/* ── El botón que se llena mientras se manda el código (2026-08-25) ──────────────────────────
   Ver assets/public-login.js para el porqué de los tiempos. La barra es un ::after con el ancho
   en una variable: sin nodos extra y sin `style=""` en el HTML, que la CSP prohíbe.
   Los 900ms de la transición son el tramo 20%→90%; el salto a 100% usa su propia clase. */


   /* el botón sigue "vivo": es la barra la que informa */

/* `.av-36` es el tamaño que pide components/public_usermenu.php y no estaba definido en ninguna
   hoja: el avatar quedaba del tamaño de su letra. Ver el bloque gemelo en global.css. */
.mx-um .av-36 { width:36px; height:36px; font-size:15px; }

/* El botón "Ingresar" de la home medía 19px de alto: es un <button> con estilo de link y sin caja
   propia. Incumple el mínimo de 44px de la norma del proyecto para todo control operable, y encima
   quedaba distinto del gemelo del explorador, que sí mide 44 (lo comparó tests/ux/vision-check.js,
   2026-08-25). El área de toque crece; el aspecto de link se mantiene.
   `padding` en vez de `height` para que el texto siga alineado con el resto de la barra. */
.mx-nav [data-login-open] { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; }

/* ── GUARDA GLOBAL [hidden] (02/09/2026) ────────────────────────────────────────────────────
   Cualquier `.clase{display:…}` le gana por cascada al [hidden] del navegador, y el elemento oculto
   se sigue viendo. Pasó CINCO veces más en el testing de hoy (botones, m² manual, chips, selector de
   inmobiliarias) después de haber pasado tres antes: la solución por caso no escala. Con esto,
   `hidden` significa oculto, siempre. Va al FINAL del archivo y con !important a propósito. */
[hidden]{display:none!important}