/* Conecta · /conecta/. A full-screen map with a panel on it. Scoped to .latinosbe-connect; the theme's own variables. */
.latinosbe-connect { --cx-gap: clamp(20px, 3vw, 36px); --cx-panel: 400px; }
.latinosbe-connect .cx-wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 var(--gutter); }
.latinosbe-connect .cx-preview-note { margin: 0; padding: var(--sp-2) var(--gutter); background: var(--c-gold-50); color: var(--c-gold-ink); font-size: var(--t-small); text-align: center; border-bottom: 1px solid var(--c-gold-200); }
.latinosbe-connect .cx-skip-map {
  position: absolute; top: 8px; left: 8px; z-index: 12; padding: 10px 14px;
  border-radius: 8px; background: var(--c-white); color: var(--c-ink); font-weight: 750;
}
.latinosbe-connect .cx-skip-map:not(:focus) { clip-path: inset(50%); }
.latinosbe-connect .cx-skip-map:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.latinosbe-connect .cx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stage: the map fills the screen under the header ---------- */
.latinosbe-connect .cx-stage { position: relative; height: calc(100svh - var(--cx-top, 76px)); min-height: 560px; max-height: 1100px; background: var(--c-ink); overflow: hidden; }
.latinosbe-connect .cx-map-wrap { position: absolute; inset: 0; }
.latinosbe-connect .cx-map-canvas { position: absolute; inset: 0; }
.latinosbe-connect .cx-map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--cx-panel) + 64px); }
.latinosbe-connect .cx-map-fallback[hidden] { display: none; }
.latinosbe-connect .cx-map-svg { width: 100%; height: 100%; max-height: 100%; }
.latinosbe-connect .cx-dot circle { fill: var(--c-teal); fill-opacity: .85; stroke: var(--c-white); stroke-width: 1.5; }
.latinosbe-connect .cx-dot.has-events circle { stroke: var(--c-gold); stroke-width: 3; }
.latinosbe-connect .cx-dot.is-current circle { fill: var(--c-gold); stroke: var(--c-ink); stroke-width: 2.5; }
.latinosbe-connect .cx-map-note { position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-text-2); font-size: var(--t-small); box-shadow: var(--e-2); }

/* Map toolbar (all of Belgium, 3D / flat) */
.latinosbe-connect .cx-map-bar { position: absolute; top: var(--sp-4); right: 64px; display: flex; gap: var(--sp-2); z-index: 2; }
.latinosbe-connect .cx-map-btn { min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font: 700 var(--t-small)/1 var(--f-text); box-shadow: var(--e-2); cursor: pointer; }
.latinosbe-connect .cx-map-btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); }
@media (hover: hover) { .latinosbe-connect .cx-map-btn:hover { background: var(--c-teal-50); } .latinosbe-connect .cx-map-btn[aria-pressed="true"]:hover { background: var(--c-deep); } }

/* Filter chips (between the panel's head and its list) */
.latinosbe-connect .cx-chips { flex: 0 0 auto; display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.latinosbe-connect .cx-fchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font: 600 var(--t-micro)/1 var(--f-text); cursor: pointer; white-space: nowrap; }
.latinosbe-connect .cx-fchip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--c-white), 0 0 0 3px var(--c); }
.latinosbe-connect .cx-fchip b { font-weight: 700; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.latinosbe-connect .cx-fchip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.latinosbe-connect .cx-fchip[aria-pressed="true"] b { color: var(--c-on-deep-2); }
@media (hover: hover) { .latinosbe-connect .cx-fchip:hover { border-color: var(--c-teal); } }
.latinosbe-connect .cx-fchip:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

/* Pin card */
.latinosbe-connect .cx-popup .maplibregl-popup-content { padding: 0; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--e-3); }
.latinosbe-connect .cx-popup .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 22px; color: var(--c-ink); background: rgba(255, 255, 255, .92); border-radius: 0 var(--r-m) 0 var(--r-m); }
.latinosbe-connect .cx-pop { width: 280px; font-family: var(--f-text); }
.latinosbe-connect .cx-pop-img { display: block; width: 100%; height: 140px; object-fit: cover; background: var(--c-sunken); }
.latinosbe-connect .cx-pop-img.is-logo { object-fit: contain; padding: var(--sp-4); background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.latinosbe-connect .cx-pop-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.latinosbe-connect .cx-pop-body p { margin: 0; }
.latinosbe-connect .cx-pop-date { display: inline-block; margin-bottom: var(--sp-1) !important; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-gold-50); color: var(--c-gold-ink); font-weight: 700; font-size: var(--t-micro); }
.latinosbe-connect .cx-pop-title { font: 700 1rem/1.3 var(--f-display); color: var(--c-ink); }
.latinosbe-connect .cx-pop-meta { margin-top: 2px !important; font-size: var(--t-micro); color: var(--c-text-2); }
.latinosbe-connect .cx-pop-note { margin-top: var(--sp-2) !important; font-size: 12px; line-height: 1.4; color: var(--c-text-3); }
.latinosbe-connect .cx-pop-go { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: var(--sp-3); border-radius: var(--r-m); background: var(--c-ink); color: var(--c-white); font-weight: 700; font-size: var(--t-small); text-decoration: none; }
@media (hover: hover) { .latinosbe-connect .cx-pop-go:hover { background: var(--c-deep); } }

/* Featured events under the map: the organisers' own flyers */
.latinosbe-connect .cx-featured { padding: var(--cx-gap) 0 0; background: var(--c-white); }
.latinosbe-connect .cx-featured-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.latinosbe-connect .cx-featured-head .cx-h2 { margin: 0; font-size: var(--t-h3); }
.latinosbe-connect .cx-featured-head a { font-weight: 700; color: var(--c-teal-700); }
.latinosbe-connect .cx-fev { list-style: none; margin: 0; padding: 0 0 var(--sp-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; }
.latinosbe-connect .cx-fev li { scroll-snap-align: start; }
.latinosbe-connect .cx-fev a { display: block; height: 100%; border: 1px solid var(--c-line); border-radius: var(--r-m); overflow: hidden; background: var(--c-white); color: var(--c-ink); text-decoration: none; }
.latinosbe-connect .cx-fev-img { position: relative; aspect-ratio: 4 / 3; background: var(--c-sunken); }
.latinosbe-connect .cx-fev-img img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-fev-date { position: absolute; left: var(--sp-2); top: var(--sp-2); padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-white); font-weight: 700; font-size: var(--t-micro); }
.latinosbe-connect .cx-fev-body { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.latinosbe-connect .cx-fev-title { font: 700 1rem/1.3 var(--f-display); }
.latinosbe-connect .cx-fev-meta { font-size: var(--t-micro); color: var(--c-text-2); }
@media (hover: hover) { .latinosbe-connect .cx-fev a:hover { border-color: var(--c-teal); box-shadow: var(--e-2); } }

/* Tools with icons */
.latinosbe-connect .cx-tool { grid-template-columns: 44px 1fr; align-items: start; column-gap: var(--sp-3); }
.latinosbe-connect .cx-tool-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .cx-tool-icon svg { width: 24px; height: 24px; }

/* MapLibre controls in the brand */
.latinosbe-connect .maplibregl-ctrl-group { border-radius: var(--r-m); box-shadow: var(--e-2); }
.latinosbe-connect .maplibregl-ctrl-group button { width: 40px; height: 40px; }
.latinosbe-connect .maplibregl-ctrl-attrib { font-size: 11px; }

/* ---------- Panel ---------- */
.latinosbe-connect .cx-panel {
  position: absolute; top: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); z-index: 3; width: var(--cx-panel); display: flex; flex-direction: column;
  background: var(--c-white); border-radius: var(--r-l); box-shadow: var(--e-3); overflow: hidden;
}
.latinosbe-connect .cx-panel-head { flex: 0 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-4); background: var(--c-ink); color: var(--c-on-deep); }
.latinosbe-connect .cx-eyebrow { margin: 0 0 var(--sp-1); font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gold); }
.latinosbe-connect .cx-panel h1 { margin: 0; font: 700 clamp(1.45rem, 1.2rem + .8vw, 1.9rem)/1.1 var(--f-display); letter-spacing: var(--track-head); color: var(--c-on-deep); }
.latinosbe-connect .cx-lead { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--t-small); line-height: 1.5; color: var(--c-on-deep-2); }
.latinosbe-connect .cx-search label, .latinosbe-connect .cx-city label { display: block; margin: 0 0 var(--sp-1); font-size: var(--t-small); font-weight: 700; color: var(--c-on-deep); }
.latinosbe-connect .cx-city { margin-top: var(--sp-3); }
.latinosbe-connect .cx-row { display: flex; gap: var(--sp-2); }
.latinosbe-connect .cx-search input[type="search"], .latinosbe-connect .cx-city select {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-m);
  font: inherit; font-size: 1rem; color: var(--c-ink); background: var(--c-white);
}
.latinosbe-connect .cx-btn { flex: 0 0 auto; min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--c-on-deep-2); border-radius: var(--r-m); font: 700 .95rem/1 var(--f-text); color: var(--c-on-deep); background: transparent; cursor: pointer; }
.latinosbe-connect .cx-btn--primary { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }
@media (hover: hover) { .latinosbe-connect .cx-btn:hover { background: var(--c-deep); } .latinosbe-connect .cx-btn--primary:hover { background: var(--c-gold-200); border-color: var(--c-gold-200); } }
.latinosbe-connect .cx-home { margin: var(--sp-3) 0 0; }
.latinosbe-connect .cx-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-ink); font-weight: 700; font-size: var(--t-small); text-decoration: none; }
.latinosbe-connect .cx-figures { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; font-size: var(--t-micro); color: var(--c-on-deep-2); font-variant-numeric: tabular-nums; }

.latinosbe-connect .cx-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5) var(--sp-5); scrollbar-width: thin; }
.latinosbe-connect .cx-panel-body:focus-visible { outline: 3px solid var(--c-teal); outline-offset: -4px; }
.latinosbe-connect .cx-h2 { margin: 0 0 var(--sp-3); font: 700 var(--t-h4)/1.25 var(--f-display); color: var(--c-ink); }
.latinosbe-connect .cx-h3 { margin: 0 0 var(--sp-2); font: 700 var(--t-small)/1.3 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); }
.latinosbe-connect .cx-back { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); font-size: var(--t-small); }
.latinosbe-connect .cx-block { margin-bottom: var(--sp-5); }
.latinosbe-connect .cx-cards, .latinosbe-connect .cx-top { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.latinosbe-connect .cx-card a {
  display: flex; gap: var(--sp-3); align-items: center; min-height: 60px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line);
  border-radius: var(--r-m); background: var(--c-white); color: var(--c-ink); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .latinosbe-connect .cx-card a:hover { border-color: var(--c-teal); box-shadow: var(--e-1); } }
.latinosbe-connect .cx-card-media { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-s); overflow: hidden; background: var(--c-sunken); }
.latinosbe-connect .cx-card-media img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-card-media.is-logo { background: var(--c-white); border: 1px solid var(--c-line); }
.latinosbe-connect .cx-card-media.is-logo img { object-fit: contain; padding: 3px; }
.latinosbe-connect .cx-card-date { flex: 0 0 58px; padding: var(--sp-2) 2px; border-radius: var(--r-s); background: var(--c-gold-50); color: var(--c-gold-ink); font-weight: 700; font-size: var(--t-micro); text-align: center; line-height: 1.25; }
.latinosbe-connect .cx-card-body { display: grid; gap: 2px; min-width: 0; }
.latinosbe-connect .cx-card-title { font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.latinosbe-connect .cx-card-meta { font-size: var(--t-micro); color: var(--c-text-2); }
.latinosbe-connect .cx-loadmore { display: block; width: 100%; min-height: 44px; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-teal); border-radius: var(--r-m); background: transparent; color: var(--c-teal-700); font: 700 var(--t-small)/1.3 var(--f-text); cursor: pointer; }
@media (hover: hover) { .latinosbe-connect .cx-loadmore:hover { background: color-mix(in srgb, var(--c-teal) 10%, transparent); } }
.latinosbe-connect .cx-loadmore:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.latinosbe-connect .cx-more { margin: var(--sp-2) 0 0; font-weight: 600; font-size: var(--t-small); }
.latinosbe-connect .cx-more a, .latinosbe-connect .cx-back a, .latinosbe-connect .cx-empty a { color: var(--c-teal-700); }
.latinosbe-connect .cx-empty { padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-m); font-size: var(--t-small); }
.latinosbe-connect .cx-empty p { margin: 0; }
.latinosbe-connect .cx-empty p + p { margin-top: var(--sp-2); font-weight: 600; }
.latinosbe-connect .cx-note { margin: var(--sp-2) 0 0; font-size: var(--t-micro); color: var(--c-text-2); }
.latinosbe-connect .cx-top a { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); color: var(--c-ink); text-decoration: none; font-weight: 600; }
.latinosbe-connect .cx-top strong { font-weight: 600; font-size: var(--t-micro); color: var(--c-text-2); }
@media (hover: hover) { .latinosbe-connect .cx-top a:hover { border-color: var(--c-teal); } }
.latinosbe-connect .cx-mapcard { display: none; }

/* ---------- The rest of the site ---------- */
.latinosbe-connect .cx-tools { padding: var(--cx-gap) 0 var(--sp-section); background: var(--c-white); }
.latinosbe-connect .cx-tools .cx-h2 { font-size: var(--t-h3); margin-bottom: var(--sp-4); }
.latinosbe-connect .cx-tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.latinosbe-connect .cx-tool { display: grid; gap: var(--sp-1); height: 100%; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-m); color: var(--c-ink); text-decoration: none; background: var(--c-mist); }
.latinosbe-connect .cx-tool-name { font: 700 var(--t-h4)/1.3 var(--f-display); }
.latinosbe-connect .cx-tool-text { font-size: var(--t-small); color: var(--c-text-2); }
@media (hover: hover) { .latinosbe-connect .cx-tool:hover { border-color: var(--c-teal); background: var(--c-white); } }

.latinosbe-connect a:focus-visible, .latinosbe-connect .cx-btn:focus-visible, .latinosbe-connect .cx-map-btn:focus-visible, .latinosbe-connect input:focus-visible, .latinosbe-connect select:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.latinosbe-connect .cx-panel-body a:focus-visible, .latinosbe-connect .cx-tools a:focus-visible, .latinosbe-connect .cx-map-btn:focus-visible { outline-color: var(--c-ink); }

/* ---------- Tablets and phones: the map on top, the panel as a sheet under it ---------- */
@media (max-width: 960px) {
  .latinosbe-connect .cx-stage { height: auto; min-height: 0; max-height: none; overflow: visible; background: var(--c-mist); }
  .latinosbe-connect .cx-map-wrap { position: relative; height: 62svh; min-height: 380px; }
  .latinosbe-connect .cx-map-fallback { padding: var(--sp-4); }
  .latinosbe-connect .cx-map-bar { top: var(--sp-3); left: var(--sp-3); right: auto; }
  .latinosbe-connect .cx-panel { position: relative; inset: auto; width: auto; margin-top: -28px; border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: 0 -12px 32px -18px rgba(20, 36, 58, .35); }
  .latinosbe-connect .cx-panel-head { padding: var(--sp-5) var(--gutter) var(--sp-4); }
  .latinosbe-connect .cx-panel-body { overflow: visible; padding: var(--sp-5) var(--gutter); }
  .latinosbe-connect .cx-mapcard { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: calc(28px + var(--sp-3)); z-index: 2; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--c-white); box-shadow: var(--e-3); font-size: var(--t-small); }
  .latinosbe-connect .cx-mapcard[hidden] { display: none; }
  .latinosbe-connect .cx-mapcard strong { font-family: var(--f-display); font-size: 1rem; }
  .latinosbe-connect .cx-mapcard span { color: var(--c-text-2); }
  .latinosbe-connect .cx-mapcard-go { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-white); font-weight: 700; text-decoration: none; }
}
@media (max-width: 480px) {
  .latinosbe-connect .cx-search .cx-row { flex-direction: column; }
  .latinosbe-connect .cx-search .cx-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect *, .latinosbe-connect *::after { transition: none !important; animation: none !important; }
}

/* Authorised address in the pin card, «Cómo llegar», «Dónde estoy» and the «you are here» dot */
.latinosbe-connect .cx-pop-addr { margin-top: var(--sp-2) !important; padding-left: 18px; position: relative; font-size: var(--t-micro); line-height: 1.45; color: var(--c-ink); }
.latinosbe-connect .cx-pop-addr::before { content: ""; position: absolute; left: 2px; top: 3px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-red); }
.latinosbe-connect .cx-pop-how { display: inline-block; margin-top: var(--sp-1); font-size: var(--t-micro); font-weight: 700; color: var(--c-teal-700); }
.latinosbe-connect .cx-map-btn--me { background: var(--c-gold); color: var(--c-ink); }
.latinosbe-connect .cx-map-btn--me:disabled { opacity: .7; cursor: progress; }
@media (hover: hover) { .latinosbe-connect .cx-map-btn--me:hover { background: var(--c-gold-200); } }
.latinosbe-connect .cx-me { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: #2f6fb5; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(20, 36, 58, .3), 0 4px 10px rgba(20, 36, 58, .35); }
.latinosbe-connect .cx-me::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: rgba(47, 111, 181, .22); animation: cx-me 2.4s ease-out infinite; }
@keyframes cx-me { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.latinosbe-connect .cx-note--top { margin: calc(var(--sp-2) * -1) 0 var(--sp-2); }
@media (max-width: 960px) { .latinosbe-connect .cx-map-bar { flex-wrap: wrap; right: 64px; } }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-me::after { animation: none; } }

/* Premium in the panel and the pin card: the distinction first, «Patrocinado» when paid; a gold edge on the card */
.latinosbe-connect .cx-ptag { display: inline-flex; align-items: center; width: fit-content; margin: 0 6px 2px 0; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-ink); font: 800 10.5px/1.4 var(--f-text); letter-spacing: .03em; text-transform: uppercase; }
.latinosbe-connect .cx-ptag--paid { background: var(--c-white); color: var(--c-gold-ink); box-shadow: inset 0 0 0 1px var(--c-gold); }
.latinosbe-connect .cx-card.is-premium a { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold), 0 6px 16px -10px rgba(122, 86, 5, .55); background: linear-gradient(180deg, var(--c-gold-50), var(--c-white) 60%); }
.latinosbe-connect .cx-card-body > .cx-ptag { grid-column: 1; }
.latinosbe-connect .cx-pop-tags { display: flex; flex-wrap: wrap; margin-bottom: var(--sp-1) !important; }

/* ---------- Social: «¿Qué hacemos hoy?», plans, the chat, the create form, a plan's page ---------- */
.latinosbe-connect .cx-social { padding: var(--cx-gap) 0; background: var(--c-mist); border-top: 1px solid var(--c-line); }
.latinosbe-connect .cx-social-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.latinosbe-connect .cx-social-head .cx-h2 { margin: 0 auto 0 0; font-size: var(--t-h3); }
.latinosbe-connect .cx-btn.cx-create, .latinosbe-connect .cx-social-page .cx-btn { color: var(--c-ink); border-color: var(--c-teal); text-decoration: none; display: inline-flex; align-items: center; }
.latinosbe-connect .cx-social-page .cx-btn--primary, .latinosbe-connect .cx-btn.cx-create { background: var(--c-gold); border-color: var(--c-gold); }
.latinosbe-connect .cx-mine-link { font-weight: 700; color: var(--c-teal-700); }
.latinosbe-connect .cx-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.latinosbe-connect .cx-quick { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.latinosbe-connect .cx-quick a { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-white); color: var(--c-ink); font-weight: 700; font-size: var(--t-small); text-decoration: none; }
.latinosbe-connect .cx-quick a span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-teal-50); color: var(--c-teal-700); }
@media (hover: hover) { .latinosbe-connect .cx-quick a:hover { border-color: var(--c-teal); } }
.latinosbe-connect .cx-social-grid { display: grid; gap: var(--cx-gap); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.latinosbe-connect .cx-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.latinosbe-connect .cx-plan-card a { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-white); color: var(--c-ink); text-decoration: none; }
.latinosbe-connect .cx-plan-ico { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--c-red-50); color: var(--c-red-700); }
.latinosbe-connect .cx-plan-ico--big { flex-basis: 64px; width: 64px; height: 64px; }
.latinosbe-connect .cx-plan-ico--big .cx-ico { width: 32px; height: 32px; }
.latinosbe-connect .cx-plan-body { display: grid; gap: 2px; min-width: 0; }
.latinosbe-connect .cx-plan-cat { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-red-700); }
.latinosbe-connect .cx-plan-title { font-weight: 700; overflow-wrap: anywhere; }
.latinosbe-connect .cx-plan-meta, .latinosbe-connect .cx-plan-spots { font-size: var(--t-micro); color: var(--c-text-2); }
.latinosbe-connect .cx-chatbox { padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-l); background: var(--c-white); }
.latinosbe-connect .cx-chat-status { margin: 0 0 var(--sp-2); font-size: var(--t-micro); color: var(--c-text-3); }
.latinosbe-connect .cx-chat-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; max-height: 380px; overflow-y: auto; display: grid; gap: var(--sp-2); }
.latinosbe-connect .cx-msg { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-sunken); }
.latinosbe-connect .cx-msg.is-mine { background: var(--c-teal-50); }
.latinosbe-connect .cx-msg.is-note { background: none; color: var(--c-text-2); font-size: var(--t-small); }
.latinosbe-connect .cx-msg.is-failed { outline: 1px solid var(--c-red); cursor: pointer; }
.latinosbe-connect .cx-msg p { margin: 0; }
.latinosbe-connect .cx-msg-head { font-size: var(--t-micro); color: var(--c-text-3); }
.latinosbe-connect .cx-msg-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.latinosbe-connect .cx-msg-text.is-deleted { font-style: italic; color: var(--c-text-3); }
.latinosbe-connect .cx-msg-tools { display: flex; gap: var(--sp-3); }
.latinosbe-connect .cx-link { min-height: 32px; padding: 0; border: 0; background: none; color: var(--c-teal-700); font: 600 var(--t-micro)/1 var(--f-text); text-decoration: underline; cursor: pointer; }
.latinosbe-connect .cx-danger { color: var(--c-red-700); }
.latinosbe-connect .cx-chat-form { display: flex; gap: var(--sp-2); align-items: flex-end; }
.latinosbe-connect .cx-chat-form textarea { flex: 1; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-m); font: inherit; resize: vertical; }
.latinosbe-connect.cx-social-page { padding: var(--sp-5) 0 var(--sp-section); }
.latinosbe-connect .cx-page-title { margin: var(--sp-2) 0; font: 700 var(--t-h2)/var(--lh-head) var(--f-display); color: var(--c-ink); }
.latinosbe-connect .cx-lead-dark { color: var(--c-text-2); max-width: 60ch; }
.latinosbe-connect .cx-create-wrap, .latinosbe-connect .cx-plan-wrap, .latinosbe-connect .cx-mine-wrap { max-width: 860px; }
.latinosbe-connect .cx-form { display: grid; gap: var(--sp-4); margin: var(--sp-5) 0; }
.latinosbe-connect .cx-field { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; font-weight: 600; }
.latinosbe-connect .cx-field legend { margin-bottom: var(--sp-2); font-weight: 700; }
.latinosbe-connect .cx-field input:not([type=radio]):not([type=checkbox]), .latinosbe-connect .cx-field textarea, .latinosbe-connect .cx-field select, .latinosbe-connect .cx-row2 input, .latinosbe-connect .cx-row2 select { min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-m); font: 400 1rem var(--f-text); width: 100%; }
.latinosbe-connect .cx-hint { font-weight: 400; font-size: var(--t-micro); color: var(--c-text-2); }
.latinosbe-connect .cx-seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.latinosbe-connect .cx-seg label, .latinosbe-connect .cx-seg-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); font-weight: 600; font-size: var(--t-small); }
.latinosbe-connect .cx-seg label:has(input:checked) { border-color: var(--c-ink); background: var(--c-teal-50); }
.latinosbe-connect .cx-seg-link { color: var(--c-teal-700); }
.latinosbe-connect .cx-cats { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.latinosbe-connect .cx-cat { position: relative; }
.latinosbe-connect .cx-cat input { position: absolute; opacity: 0; }
.latinosbe-connect .cx-cat span { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-m); background: var(--c-white); font-size: var(--t-small); cursor: pointer; }
.latinosbe-connect .cx-cat input:checked + span { border: 2px solid var(--c-ink); background: var(--c-gold-50); }
.latinosbe-connect .cx-cat input:focus-visible + span { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.latinosbe-connect .cx-place { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.latinosbe-connect .cx-place[hidden] { display: none; }
.latinosbe-connect .cx-pick { height: 280px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--c-line); }
.latinosbe-connect .cx-chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.latinosbe-connect .cx-chipset button { min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); font: 600 var(--t-small) var(--f-text); cursor: pointer; }
.latinosbe-connect .cx-chipset button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.latinosbe-connect .cx-row2 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.latinosbe-connect .cx-row2 label { display: grid; gap: var(--sp-2); font-weight: 600; }
.latinosbe-connect .cx-form-error { margin: 0; padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-red-50); color: var(--c-red-700); font-weight: 600; }
.latinosbe-connect .cx-form-error[hidden] { display: none; }
.latinosbe-connect .cx-btn--big { min-height: 52px; font-size: 1.05rem; justify-self: start; padding: 0 var(--sp-6); }
.latinosbe-connect .cx-done { padding: var(--sp-5); border-radius: var(--r-l); background: var(--c-white); border: 1px solid var(--c-line); }
.latinosbe-connect .cx-share { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.latinosbe-connect .cx-plan { margin: var(--sp-4) 0; padding: var(--sp-5); border-radius: var(--r-l); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--e-1); }
.latinosbe-connect .cx-plan-head { display: flex; gap: var(--sp-4); align-items: center; }
.latinosbe-connect .cx-plan-org { margin: 0; color: var(--c-text-2); }
.latinosbe-connect .cx-remaining { display: inline-block; margin: var(--sp-3) 0 0; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-gold-50); color: var(--c-gold-ink); font-weight: 700; font-size: var(--t-small); }
.latinosbe-connect .cx-state { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-sunken); font-weight: 700; }
.latinosbe-connect .cx-facts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--sp-4) 0; }
.latinosbe-connect .cx-facts dt { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); }
.latinosbe-connect .cx-facts dd { margin: 2px 0 0; }
.latinosbe-connect .cx-plan-text { margin: var(--sp-3) 0; }
.latinosbe-connect .cx-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-4) 0; }
.latinosbe-connect .cx-badge { margin: 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-teal-50); color: var(--c-teal-700); font-weight: 700; }
.latinosbe-connect .cx-org[hidden] { display: none; }
.latinosbe-connect .cx-org, .latinosbe-connect .cx-plan .cx-chatbox { margin-top: var(--sp-5); }
.latinosbe-connect .cx-req { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.latinosbe-connect .cx-req.is-new { font-weight: 700; }
.latinosbe-connect .cx-safety { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-l); background: var(--c-teal-50); }
.latinosbe-connect .cx-safety ul { margin: 0; padding-left: 1.2em; font-size: var(--t-small); }
.latinosbe-connect .cx-pop-cat { margin-top: 2px !important; font-size: var(--t-micro); font-weight: 700; color: var(--c-red-700); }
@media (max-width: 860px) { .latinosbe-connect .cx-social-grid, .latinosbe-connect .cx-row2 { grid-template-columns: 1fr; } }

/* Plans filters and the invitation QR code */
.latinosbe-connect .cx-pfilters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; margin: 0 0 var(--sp-3); }
.latinosbe-connect .cx-pfilters label { display: grid; gap: 4px; font-size: var(--t-micro); font-weight: 700; color: var(--c-text-2); }
.latinosbe-connect .cx-pfilters select { min-height: 40px; padding: 0 var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-m); font: 400 var(--t-small) var(--f-text); color: var(--c-ink); background: var(--c-white); }
.latinosbe-connect .cx-pfilters .cx-btn { min-height: 40px; color: var(--c-ink); border-color: var(--c-teal); }
.latinosbe-connect .cx-qr { flex-basis: 100%; max-width: 220px; padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-white); }
.latinosbe-connect .cx-qr[hidden] { display: none; }
.latinosbe-connect .cx-qr svg { display: block; width: 100%; height: auto; }

/* Plan pictures and notice preferences */
.latinosbe-connect .cx-plan-ico--img { overflow: hidden; background: var(--c-sunken); }
.latinosbe-connect .cx-plan-ico--img img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-plan-photo { display: block; width: 100%; max-height: 360px; object-fit: cover; margin: var(--sp-4) 0 0; border-radius: var(--r-m); }
.latinosbe-connect .cx-prefs { border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); }
.latinosbe-connect .cx-prefs label { display: flex; gap: var(--sp-2); align-items: center; min-height: 40px; }

/* ======================================================================================================
 * SmartMap Motion System 2.0 + premium social interface (07/11/2026). Tokens first; every motion is
 * transform/opacity; .is-calm (visitor's choice) and prefers-reduced-motion stop loops and long transitions.
 * ==================================================================================================== */
.latinosbe-connect {
  --cx-fast: 140ms; --cx-std: 200ms; --cx-emph: 300ms;
  --cx-ease: cubic-bezier(.2, .7, .2, 1); --cx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --cx-gold-1: #c79a3d; --cx-gold-2: #eac875; --cx-gold-3: #8a641f;
  --cx-elev-1: 0 1px 2px rgba(20, 36, 58, .06), 0 4px 12px -4px rgba(20, 36, 58, .12);
  --cx-elev-2: 0 2px 4px rgba(20, 36, 58, .06), 0 14px 32px -12px rgba(20, 36, 58, .28);
  --cx-elev-3: 0 4px 8px rgba(20, 36, 58, .08), 0 28px 60px -20px rgba(20, 36, 58, .42);
  --cx-radius: 16px;
}

/* ---------- Buttons: one base everywhere (ink on white); the dark panel head keeps its light version ---------- */
.latinosbe-connect .cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-line-strong); border-radius: 12px; background: var(--c-white); color: var(--c-ink); font: 700 .95rem/1 var(--f-text); text-decoration: none; cursor: pointer; box-shadow: var(--cx-elev-1); transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-btn--primary { background: linear-gradient(180deg, #f2bd3a, var(--c-gold)); border-color: #d99e10; color: var(--c-ink); }
.latinosbe-connect .cx-panel-head .cx-btn { background: transparent; border-color: rgba(201, 214, 224, .55); color: var(--c-on-deep); box-shadow: none; }
.latinosbe-connect .cx-panel-head .cx-btn--primary { background: linear-gradient(180deg, #f2bd3a, var(--c-gold)); border-color: #d99e10; color: var(--c-ink); }
@media (hover: hover) {
  .latinosbe-connect .cx-btn:hover { transform: translateY(-1px); box-shadow: var(--cx-elev-2); border-color: var(--c-teal); }
  .latinosbe-connect .cx-panel-head .cx-btn:hover { background: rgba(255, 255, 255, .08); }
}
.latinosbe-connect .cx-btn:active { transform: translateY(0) scale(.98); }
.latinosbe-connect .cx-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Premium radar marker ---------- */
.latinosbe-connect .cx-radar { position: relative; display: block; width: var(--s, 56px); height: var(--s, 56px); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.latinosbe-connect .cx-radar-core { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 50%; background: var(--c-white); border: 3px solid var(--cx-gold-1);
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 5px rgba(199, 154, 61, .28), 0 10px 22px -8px rgba(20, 36, 58, .6); transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-radar-core img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-radar-core.is-logo img { object-fit: contain; padding: 14%; }
.latinosbe-connect .cx-radar::before { content: ""; position: absolute; inset: -3px; z-index: 3; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 290deg, rgba(234, 200, 117, .0) 300deg, rgba(255, 244, 214, .95) 330deg, rgba(234, 200, 117, .0) 350deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: cx-sheen 7s linear infinite; }
.latinosbe-connect .cx-radar-ring { position: absolute; inset: 0; z-index: 1; border-radius: 50%; border: 2px solid var(--cx-gold-2); background: radial-gradient(circle, rgba(234, 200, 117, .22), rgba(199, 154, 61, 0) 70%);
  opacity: 0; pointer-events: none; animation: cx-radar 3.1s cubic-bezier(.22, .61, .36, 1) infinite; will-change: transform, opacity; }
.latinosbe-connect .cx-radar-ring--2 { animation-delay: 1.4s; }
.latinosbe-connect .cx-radar-badge { position: absolute; top: -3px; right: -3px; z-index: 4; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(160deg, var(--cx-gold-2), var(--cx-gold-1) 55%, var(--cx-gold-3)); color: var(--c-white); font-size: 11px; line-height: 1; box-shadow: 0 0 0 2px var(--c-white), 0 2px 6px rgba(20, 36, 58, .35); }
.latinosbe-connect .cx-radar:hover .cx-radar-core, .latinosbe-connect .cx-radar.is-hot .cx-radar-core { transform: scale(1.08); box-shadow: 0 0 0 2px var(--c-white), 0 0 0 6px rgba(199, 154, 61, .4), 0 14px 28px -8px rgba(20, 36, 58, .65); }
.latinosbe-connect .cx-radar.is-selected .cx-radar-core { transform: none; box-shadow: 0 0 0 3px var(--c-white), 0 0 0 7px var(--c-ink), 0 16px 30px -8px rgba(20, 36, 58, .7); }
.latinosbe-connect .cx-radar.is-selected::before, .latinosbe-connect .cx-radar.is-selected .cx-radar-ring { display: none; }
.latinosbe-connect .cx-radar:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 6px; }
@keyframes cx-radar { 0% { transform: scale(1); opacity: .55; } 75% { opacity: 0; } 100% { transform: scale(2.25); opacity: 0; } }
@keyframes cx-sheen { to { transform: rotate(360deg); } }

/* ---------- Pin card (desktop popup) ---------- */
.latinosbe-connect .cx-popup .maplibregl-popup-content { padding: 0; border-radius: var(--cx-radius); overflow: hidden; box-shadow: var(--cx-elev-3); animation: cx-pop-in 220ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-popup .maplibregl-popup-tip { display: none; }
.latinosbe-connect .cx-popup .maplibregl-popup-close-button { top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: var(--cx-elev-1); font-size: 20px; line-height: 1; color: var(--c-ink); }
.latinosbe-connect .cx-popup .maplibregl-popup-close-button:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.latinosbe-connect .cx-pop { width: 300px; }
.latinosbe-connect .cx-pop-img { height: 150px; }
.latinosbe-connect .cx-pop-body { padding: 14px 18px 18px; }
.latinosbe-connect .cx-pop-title { font-size: 1.08rem; letter-spacing: -.01em; }
.latinosbe-connect .cx-pop-go { min-height: 44px; border-radius: 12px; background: linear-gradient(180deg, #1c3049, var(--c-ink)); box-shadow: var(--cx-elev-1); transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-pop-go:hover { transform: translateY(-1px); box-shadow: var(--cx-elev-2); } }
@keyframes cx-pop-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Pin card on phones: a sheet over the bottom of the map ---------- */
.latinosbe-connect .cx-sheet { position: absolute; left: 8px; right: 8px; bottom: 36px; z-index: 6; max-height: 72%; overflow: auto; border-radius: 18px; background: var(--c-white); box-shadow: var(--cx-elev-3);
  transform: translateY(calc(100% + 48px)); visibility: hidden; transition: transform var(--cx-emph) var(--cx-ease-out), visibility 0s linear var(--cx-emph); }
.latinosbe-connect .cx-sheet.is-open { transform: none; visibility: visible; transition: transform var(--cx-emph) var(--cx-ease-out); }
.latinosbe-connect .cx-sheet .cx-pop { width: auto; }
.latinosbe-connect .cx-sheet-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: var(--cx-elev-1); font-size: 24px; line-height: 1; color: var(--c-ink); cursor: pointer; }
@media (min-width: 961px) { .latinosbe-connect .cx-sheet { display: none; } }

/* ---------- Panel: fold away on desktop, cards in sync with the map ---------- */
.latinosbe-connect .cx-panel { transition: transform var(--cx-emph) var(--cx-ease-out), opacity var(--cx-emph) var(--cx-ease); }
.latinosbe-connect .cx-stage.is-panel-hidden .cx-panel { transform: translateX(calc(-100% - 40px)); opacity: 0; }
.latinosbe-connect .cx-panel-fold { position: absolute; top: var(--sp-4); left: calc(var(--cx-panel) + 28px); z-index: 4; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .96); color: var(--c-ink); font: 700 var(--t-micro)/1 var(--f-text); box-shadow: var(--cx-elev-2); cursor: pointer; transition: left var(--cx-emph) var(--cx-ease-out), transform var(--cx-fast) var(--cx-ease); }
.latinosbe-connect .cx-stage.is-panel-hidden .cx-panel-fold { left: var(--sp-4); }
.latinosbe-connect .cx-panel-fold:focus-visible, .latinosbe-connect .cx-map-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
@media (max-width: 960px) { .latinosbe-connect .cx-panel-fold { display: none; } }
.latinosbe-connect .cx-card a { transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-card.is-hot a { border-color: var(--c-teal); box-shadow: 0 0 0 1px var(--c-teal), var(--cx-elev-1); transform: translateX(2px); }
.latinosbe-connect .cx-card.is-selected a { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-ink), var(--cx-elev-2); }
.latinosbe-connect .cx-map-btn--fx { background: rgba(255, 255, 255, .96); }
.latinosbe-connect .cx-map-btn--fx[aria-pressed="true"] { background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; box-shadow: var(--cx-elev-2); }
.latinosbe-connect .maplibregl-ctrl-group button { transition: background-color var(--cx-fast) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .maplibregl-ctrl-group button:hover { background-color: var(--c-teal-50); } }
.latinosbe-connect .maplibregl-ctrl-group button:focus-visible { outline: 3px solid var(--c-gold); outline-offset: -3px; }
.latinosbe-connect .cx-stage { background: radial-gradient(120% 90% at 60% 45%, #1d3550 0%, #14243a 55%, #0e1a2b 100%); }

/* ---------- Social: «¿Qué hacemos hoy?» ---------- */
.latinosbe-connect .cx-social { padding: clamp(40px, 6vw, 72px) 0; background: linear-gradient(180deg, var(--c-white) 0%, var(--c-mist) 100%); border-top: 0; }
.latinosbe-connect .cx-social-head { align-items: flex-end; margin-bottom: var(--sp-5); }
.latinosbe-connect .cx-social-eyebrow { margin: 0 0 6px; font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal); }
.latinosbe-connect .cx-social-head .cx-h2 { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.latinosbe-connect .cx-social-lead { margin: 8px 0 0; max-width: 52ch; color: var(--c-text-2); }
.latinosbe-connect .cx-social-titles { margin-right: auto; }
.latinosbe-connect .cx-quick { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); margin-bottom: var(--sp-6); }
.latinosbe-connect .cx-quick a { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 112px; padding: 16px; border-radius: var(--cx-radius); border-color: var(--c-line); box-shadow: var(--cx-elev-1); font-size: .95rem; transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-quick a span { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(150deg, var(--c-teal-50), #d6ecee); }
.latinosbe-connect .cx-quick li:nth-child(1) a span, .latinosbe-connect .cx-quick li:nth-child(6) a span { background: linear-gradient(150deg, #fff3d6, #fde6ad); color: var(--c-gold-ink); }
.latinosbe-connect .cx-quick li:nth-child(3) a span, .latinosbe-connect .cx-quick li:nth-child(4) a span { background: linear-gradient(150deg, #e8eef8, #d7e2f3); color: #2f5b94; }
@media (hover: hover) { .latinosbe-connect .cx-quick a:hover { transform: translateY(-3px); box-shadow: var(--cx-elev-2); border-color: var(--c-teal); } }
.latinosbe-connect .cx-social-grid { gap: clamp(20px, 3vw, 40px); }
.latinosbe-connect .cx-social .cx-h3 { font-size: var(--t-micro); letter-spacing: .1em; color: var(--c-text-3); margin-bottom: 12px; }
.latinosbe-connect .cx-pfilters { padding: 12px; border: 1px solid var(--c-line); border-radius: var(--cx-radius); background: var(--c-white); box-shadow: var(--cx-elev-1); }
.latinosbe-connect .cx-pfilters select { min-height: 44px; border-radius: 10px; border-color: var(--c-line-strong); }
.latinosbe-connect .cx-plan-list { gap: 12px; }
.latinosbe-connect .cx-plan-card a { padding: 14px 16px; border-radius: var(--cx-radius); box-shadow: var(--cx-elev-1); transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-plan-card a:hover { transform: translateY(-2px); box-shadow: var(--cx-elev-2); border-color: var(--c-teal); } }
.latinosbe-connect .cx-plan-ico { flex-basis: 60px; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(150deg, #fbe9ea, #f5d5d7); }
.latinosbe-connect .cx-plan-ico--img { border-radius: 16px; }
.latinosbe-connect .cx-plan-cat { display: inline-flex; width: fit-content; padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-red-50); font-size: 10.5px; }
.latinosbe-connect .cx-plan-title { font: 700 1.05rem/1.25 var(--f-display); letter-spacing: -.01em; }
.latinosbe-connect .cx-plan-spots { display: inline-flex; width: fit-content; margin-top: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-teal-50); color: var(--c-teal-700); font-weight: 700; }

/* ---------- Community chat ---------- */
.latinosbe-connect .cx-chatbox { padding: 18px; border-radius: 20px; border-color: var(--c-line); background: var(--c-white); box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-chatbox > .cx-h3 { display: flex; align-items: center; gap: 8px; }
.latinosbe-connect .cx-chatbox > .cx-h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #23a36b; box-shadow: 0 0 0 4px rgba(35, 163, 107, .16); }
.latinosbe-connect .cx-chat-status { display: inline-flex; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-sunken); }
.latinosbe-connect .cx-chat-list { padding: 4px 2px; }
.latinosbe-connect .cx-msg { position: relative; padding: 10px 14px 10px 50px; border-radius: 16px 16px 16px 6px; background: var(--c-mist); border: 1px solid var(--c-line); }
.latinosbe-connect .cx-msg::before { content: attr(data-initial); position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg, var(--c-teal), var(--c-deep)); color: var(--c-white); font: 800 .8rem/1 var(--f-text); }
.latinosbe-connect .cx-msg.is-mine { border-radius: 16px 16px 6px 16px; background: var(--c-teal-50); border-color: var(--c-teal-100); }
.latinosbe-connect .cx-msg.is-mine::before { background: linear-gradient(150deg, var(--c-gold), var(--cx-gold-3)); }
.latinosbe-connect .cx-msg.is-note { padding: 14px; border: 1px dashed var(--c-line-strong); background: none; text-align: center; }
.latinosbe-connect .cx-msg.is-note::before { display: none; }
.latinosbe-connect .cx-chat-form { padding: 6px; border: 1px solid var(--c-line-strong); border-radius: 16px; background: var(--c-white); }
.latinosbe-connect .cx-chat-form textarea { border: 0; min-height: 44px; }
.latinosbe-connect .cx-chat-form textarea:focus-visible { outline: none; }
.latinosbe-connect .cx-chat-form:focus-within { border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(23, 107, 118, .18); }

/* ---------- Create form, published state, a plan's page ---------- */
.latinosbe-connect.cx-social-page { padding: clamp(28px, 4vw, 48px) 0 var(--sp-section); background: linear-gradient(180deg, var(--c-mist), var(--c-white) 360px); }
.latinosbe-connect .cx-create-wrap .cx-back, .latinosbe-connect .cx-plan-wrap .cx-back, .latinosbe-connect .cx-mine-wrap .cx-back { margin: 0 0 12px; }
.latinosbe-connect .cx-page-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); letter-spacing: -.025em; }
.latinosbe-connect .cx-form { gap: 16px; }
.latinosbe-connect .cx-form > .cx-field, .latinosbe-connect .cx-form > .cx-row2 { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--cx-radius); background: var(--c-white); box-shadow: var(--cx-elev-1); }
.latinosbe-connect .cx-form legend { float: left; width: 100%; margin-bottom: 12px; font: 700 1rem/1.3 var(--f-display); }
.latinosbe-connect .cx-cat span { min-height: 60px; border-radius: 14px; transition: transform var(--cx-fast) var(--cx-ease), border-color var(--cx-std) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-cat span:hover { transform: translateY(-1px); box-shadow: var(--cx-elev-1); border-color: var(--c-teal); } }
.latinosbe-connect .cx-cat input:checked + span { border: 2px solid var(--c-gold); background: linear-gradient(150deg, #fffaf0, var(--c-gold-50)); box-shadow: 0 0 0 3px rgba(235, 173, 23, .18); }
.latinosbe-connect .cx-seg label { min-height: 44px; padding: 0 16px; transition: border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-btn--big { min-height: 56px; padding: 0 36px; border-radius: 14px; font-size: 1.05rem; box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-done { padding: 28px; border-radius: 20px; text-align: left; box-shadow: var(--cx-elev-2); animation: cx-pop-in 300ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-done > .cx-h2 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; }
.latinosbe-connect .cx-done > .cx-h2::before { content: "✓"; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, #2fbf7f, #1d8f5c); color: var(--c-white); font-size: 1.2rem; box-shadow: 0 6px 16px -6px rgba(29, 143, 92, .6); }
.latinosbe-connect .cx-done > .cx-btn { margin: 4px 0 8px; }
.latinosbe-connect .cx-share .cx-btn { min-height: 42px; font-size: .9rem; }
.latinosbe-connect .cx-plan { padding: clamp(20px, 3vw, 32px); border-radius: 22px; box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-plan-photo { max-height: 380px; border-radius: 16px; box-shadow: var(--cx-elev-1); }
.latinosbe-connect .cx-facts div { padding: 14px 16px; border-radius: 14px; background: var(--c-mist); border: 1px solid var(--c-line); }
.latinosbe-connect .cx-remaining { padding: 6px 14px; background: linear-gradient(150deg, #fff6df, var(--c-gold-50)); box-shadow: inset 0 0 0 1px var(--c-gold-200); }
.latinosbe-connect .cx-safety { border-radius: 20px; background: linear-gradient(150deg, var(--c-teal-50), #f2f8f8); border: 1px solid var(--c-teal-100); }

/* ---------- Calm: the visitor's «Efectos: reducidos» or the device's reduced motion ---------- */
.latinosbe-connect .is-calm .cx-radar-ring, .latinosbe-connect .is-calm .cx-radar::before { animation: none; display: none; }
.latinosbe-connect .cx-popup.is-calm .maplibregl-popup-content, .latinosbe-connect .is-calm .cx-sheet { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-radar-ring, .latinosbe-connect .cx-radar::before { animation: none; display: none; }
  .latinosbe-connect .cx-popup .maplibregl-popup-content, .latinosbe-connect .cx-done { animation: none; }
  .latinosbe-connect .cx-sheet, .latinosbe-connect .cx-panel, .latinosbe-connect .cx-panel-fold { transition: none; }
}

/* ======================================================================================================
 * r12 · Premium interface (owner, 07/11/2026): the social section fills the screen like the map, on the deep navy
 * of the panel with a slow aurora and a fine grid; glass tiles; «Tendencia» with a living flame; premium events in
 * their own frame colour (the same tones as Eventos); a plan's page as a ticket. Calm mode stops every loop.
 * ==================================================================================================== */
.latinosbe-connect .cx-social .cx-wrap, .latinosbe-connect .cx-featured .cx-wrap, .latinosbe-connect .cx-tools .cx-wrap { max-width: 1560px; }

/* ---------- The section ---------- */
/* Clip the decorative glow without creating a scroll container for the Chat anchor. */
.latinosbe-connect .cx-social { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: center; min-height: min(100svh, 1080px); padding: clamp(48px, 7vw, 96px) 0; background: #0b1626; color: var(--c-white); border: 0; }
.latinosbe-connect .cx-social::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); }
.latinosbe-connect .cx-aurora { position: absolute; inset: -25%; z-index: -2; pointer-events: none; filter: blur(30px); will-change: transform;
  background: radial-gradient(38% 46% at 14% 22%, rgba(23, 107, 118, .62), transparent 70%), radial-gradient(32% 40% at 86% 14%, rgba(179, 47, 53, .38), transparent 70%), radial-gradient(44% 46% at 62% 92%, rgba(235, 173, 23, .16), transparent 70%), radial-gradient(30% 36% at 40% 55%, rgba(47, 111, 181, .22), transparent 70%);
  animation: cx-aurora 26s ease-in-out infinite alternate; }
@keyframes cx-aurora { to { transform: translate3d(4%, -3%, 0) rotate(7deg) scale(1.06); } }
.latinosbe-connect .cx-social-head { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(24px, 3vw, 40px); }
.latinosbe-connect .cx-social-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(143, 208, 216, .12); border: 1px solid rgba(143, 208, 216, .28); color: #9fdde4; letter-spacing: .12em; }
.latinosbe-connect .cx-social-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: cx-live 2.4s ease-out infinite; }
@keyframes cx-live { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.latinosbe-connect .cx-social-head .cx-h2 { margin: 14px 0 0; font: 800 clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem)/1.02 var(--f-display); letter-spacing: -.035em; background: linear-gradient(180deg, #fff 30%, #b9e2e7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.latinosbe-connect .cx-social-lead { margin: 14px 0 0; max-width: 56ch; color: rgba(255, 255, 255, .74); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.latinosbe-connect .cx-social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.latinosbe-connect .cx-social .cx-create { min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 1rem; box-shadow: 0 10px 30px -10px rgba(235, 173, 23, .65); }
.latinosbe-connect .cx-social .cx-mine-link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); color: var(--c-white); font-weight: 700; text-decoration: none; transition: background-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-social .cx-mine-link:hover { background: rgba(255, 255, 255, .08); } }

/* ---------- Glass: quick ideas, filters, plans ---------- */
.latinosbe-connect .cx-social .cx-quick a { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13); color: var(--c-white); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 700; }
.latinosbe-connect .cx-social .cx-quick a span { background: linear-gradient(150deg, rgba(23, 107, 118, .55), rgba(23, 107, 118, .2)); color: #bff0f4; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.latinosbe-connect .cx-social .cx-quick li:nth-child(1) a span, .latinosbe-connect .cx-social .cx-quick li:nth-child(6) a span { background: linear-gradient(150deg, rgba(235, 173, 23, .5), rgba(235, 173, 23, .16)); color: #ffe7a3; }
.latinosbe-connect .cx-social .cx-quick li:nth-child(3) a span, .latinosbe-connect .cx-social .cx-quick li:nth-child(4) a span { background: linear-gradient(150deg, rgba(47, 111, 181, .55), rgba(47, 111, 181, .18)); color: #cfe0ff; }
.latinosbe-connect .cx-social .cx-quick li:nth-child(5) a span { background: linear-gradient(150deg, rgba(179, 47, 53, .55), rgba(179, 47, 53, .18)); color: #ffd0d3; }
.latinosbe-connect .cx-social .cx-quick a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--cx-ease-out); pointer-events: none; }
@media (hover: hover) {
  .latinosbe-connect .cx-social .cx-quick a:hover { transform: translateY(-4px); border-color: rgba(143, 208, 216, .55); box-shadow: 0 0 0 1px rgba(143, 208, 216, .25), 0 24px 44px -20px rgba(0, 0, 0, .8), 0 0 40px -12px rgba(23, 107, 118, .7); }
  .latinosbe-connect .cx-social .cx-quick a:hover::after { transform: translateX(120%); }
}
.latinosbe-connect .cx-social .cx-quick a:focus-visible, .latinosbe-connect .cx-social .cx-plan-card a:focus-visible, .latinosbe-connect .cx-social .cx-mine-link:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.latinosbe-connect .cx-social .cx-h3 { color: rgba(255, 255, 255, .62); }
.latinosbe-connect .cx-social .cx-pfilters { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.latinosbe-connect .cx-social .cx-pfilters label { color: rgba(255, 255, 255, .72); }
.latinosbe-connect .cx-social .cx-pfilters select { background-color: rgba(8, 18, 32, .65); color: var(--c-white); border-color: rgba(255, 255, 255, .22); color-scheme: dark; }
.latinosbe-connect .cx-social .cx-empty { background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .82); border-radius: var(--cx-radius); }
.latinosbe-connect .cx-social .cx-empty a { color: #ffd166; }
.latinosbe-connect .cx-social .cx-plan-card a { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 52px 16px 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .13); color: var(--c-white); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (hover: hover) { .latinosbe-connect .cx-social .cx-plan-card a:hover { border-color: rgba(255, 255, 255, .32); box-shadow: 0 24px 44px -22px rgba(0, 0, 0, .9), 0 0 36px -14px rgba(179, 47, 53, .7); } }
.latinosbe-connect .cx-social .cx-plan-ico { flex: 0 0 64px; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(150deg, #d9474e, #8f1f25); color: var(--c-white); box-shadow: 0 10px 22px -10px rgba(179, 47, 53, .9), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.latinosbe-connect .cx-social .is-room .cx-plan-ico { background: linear-gradient(150deg, #2f6fb5, #153c59); box-shadow: 0 10px 22px -10px rgba(47, 111, 181, .9), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.latinosbe-connect .cx-social .cx-plan-ico img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-plan-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.latinosbe-connect .cx-social .cx-plan-cat { background: rgba(255, 255, 255, .1); color: #ffc2c6; letter-spacing: .06em; }
.latinosbe-connect .cx-plan-kind, .latinosbe-connect .cx-plan-when { display: inline-flex; padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.latinosbe-connect .cx-plan-kind { background: rgba(47, 111, 181, .16); color: #2f5b94; }
.latinosbe-connect .cx-plan-when { background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .cx-social .cx-plan-kind { background: rgba(47, 111, 181, .3); color: #cfe0ff; }
.latinosbe-connect .cx-social .cx-plan-when { background: rgba(61, 220, 151, .16); color: #9ff0c9; }
.latinosbe-connect .cx-social .cx-plan-title { color: var(--c-white); font-size: 1.15rem; }
.latinosbe-connect .cx-social .cx-plan-meta { color: rgba(255, 255, 255, .7); }
.latinosbe-connect .cx-social .cx-plan-spots { background: rgba(143, 208, 216, .14); color: #bff0f4; }
.latinosbe-connect .cx-plan-go { position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; transition: transform var(--cx-std) var(--cx-ease-out), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-plan-go::before { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
@media (hover: hover) { .latinosbe-connect .cx-plan-card a:hover .cx-plan-go, .latinosbe-connect .cx-social .cx-plan-card a:hover .cx-plan-go { transform: translateX(4px); background: #ebad17; color: var(--c-ink); } }
.latinosbe-connect .cx-plan-card .cx-plan-go { background: var(--c-sunken); color: var(--c-ink); }
.latinosbe-connect .cx-social .cx-plan-card .cx-plan-go { background: rgba(255, 255, 255, .1); color: var(--c-white); }
.latinosbe-connect .cx-plan-card a { position: relative; padding-right: 56px; }

/* ---------- Chat: a bright card floating on the night ---------- */
.latinosbe-connect .cx-social .cx-chatbox { border: 0; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08); color: var(--c-ink); }
.latinosbe-connect .cx-social .cx-chatbox .cx-h3 { color: var(--c-ink); }
.latinosbe-connect .cx-msg-head strong { color: var(--c-ink); }

/* ---------- Featured events: premium in its own frame ---------- */
.latinosbe-connect .cx-featured { padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.latinosbe-connect .cx-featured-head .cx-h2 { font: 800 clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -.025em; }
.latinosbe-connect .cx-fev { gap: 20px; grid-auto-columns: minmax(240px, 1fr); padding: 14px 4px 18px; scrollbar-width: thin; }
.latinosbe-connect .cx-fev a { position: relative; border-radius: 20px; border-color: var(--c-line); box-shadow: var(--cx-elev-1); transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-fev-img { overflow: hidden; aspect-ratio: 4 / 5; }
.latinosbe-connect .cx-fev-img img { transition: transform 900ms var(--cx-ease-out); }
.latinosbe-connect .cx-fev-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 22, 38, 0) 55%, rgba(11, 22, 38, .55)); pointer-events: none; }
.latinosbe-connect .cx-fev-date { z-index: 2; padding: 6px 12px; background: rgba(11, 22, 38, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
@media (hover: hover) {
  .latinosbe-connect .cx-fev a:hover { transform: translateY(-6px); box-shadow: var(--cx-elev-3); }
  .latinosbe-connect .cx-fev a:hover .cx-fev-img img { transform: scale(1.06); }
}
.latinosbe-connect .cx-tone--destacado { --tone: #ebad17; --tone-glow: rgba(235, 173, 23, .55); --tone-pill: linear-gradient(135deg, #ffe39a, #ebad17 60%, #d39b10); --tone-ink: #14243a; }
.latinosbe-connect .cx-tone--neon { --tone: #a855f7; --tone-glow: rgba(168, 85, 247, .55); --tone-pill: linear-gradient(135deg, #6d28d9, #a855f7); --tone-ink: #fff; }
.latinosbe-connect .cx-tone--diamante { --tone: #8fd0d8; --tone-glow: rgba(143, 208, 216, .65); --tone-pill: linear-gradient(135deg, #14243a, #1d4a63); --tone-ink: #fff; }
.latinosbe-connect .cx-tone--platino { --tone: #aab7c3; --tone-glow: rgba(170, 183, 195, .7); --tone-pill: linear-gradient(135deg, #f7f9fb, #aab7c3); --tone-ink: #14243a; }
.latinosbe-connect .cx-tone--oro { --tone: #d39b10; --tone-glow: rgba(211, 155, 16, .55); --tone-pill: linear-gradient(135deg, #fdf6e3, #f0d28a); --tone-ink: #7a5605; }
.latinosbe-connect .cx-tone--esmeralda { --tone: #2f9c9a; --tone-glow: rgba(47, 156, 154, .55); --tone-pill: linear-gradient(135deg, #e7f2f3, #a9d2d6); --tone-ink: #105a63; }
.latinosbe-connect .cx-tone--recomendado { --tone: #2c7be5; --tone-glow: rgba(29, 111, 209, .5); --tone-pill: linear-gradient(135deg, #2c7be5, #1d5fb8); --tone-ink: #fff; }
.latinosbe-connect .cx-fev li.is-premium a { border-color: transparent; box-shadow: 0 0 0 2px var(--tone, #ebad17), 0 18px 44px -16px var(--tone-glow, rgba(235, 173, 23, .55)); }
.latinosbe-connect .cx-fev li.is-premium a::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; animation: cx-fev-sheen 6s ease-in-out infinite; }
@keyframes cx-fev-sheen { 0%, 70% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.latinosbe-connect .cx-fev-tags { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.latinosbe-connect .cx-fev-tags .cx-ptag { padding: 5px 10px 5px 8px; border-radius: var(--r-pill); background: var(--tone-pill, #ebad17); color: var(--tone-ink, #14243a); font-size: 11px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 16px -6px var(--tone-glow, rgba(0, 0, 0, .4)); }
.latinosbe-connect .cx-fev-tags .cx-ptag:first-child::before { content: "✦"; margin-right: 5px; }
.latinosbe-connect .cx-fev-tags .cx-ptag--paid { background: rgba(255, 255, 255, .95); color: var(--c-ink); }
.latinosbe-connect .cx-tools a { transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-tools a:hover { transform: translateY(-3px); box-shadow: var(--cx-elev-2); } }

/* ---------- Panel: plans, «Tendencia» ---------- */
.latinosbe-connect .cx-card-date--plan { display: grid; align-content: center; gap: 2px; background: linear-gradient(150deg, #d9474e, #9e2329); color: var(--c-white); font-size: .95rem; box-shadow: 0 6px 14px -8px rgba(179, 47, 53, .9); }
.latinosbe-connect .cx-card-date--plan small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.latinosbe-connect .cx-card-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-red, #b32f35); }
.latinosbe-connect .cx-flame { width: 16px; height: 16px; flex: 0 0 auto; transform-origin: 50% 90%; animation: cx-flicker 1.6s ease-in-out infinite; }
.latinosbe-connect .cx-flame-o { fill: #f97316; }
.latinosbe-connect .cx-flame-i { fill: #fde047; }
@keyframes cx-flicker { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 35% { transform: scale(1.06, 1.12) rotate(2deg); } 65% { transform: scale(.97, 1.04) rotate(-1deg); } }
.latinosbe-connect .cx-fchip--trend { border-color: #fdba74; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #9a3412; }
.latinosbe-connect .cx-fchip--trend[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, #f97316, #dc2626); color: var(--c-white); box-shadow: 0 6px 18px -6px rgba(234, 88, 12, .65); }
.latinosbe-connect .cx-fchip--trend[aria-pressed="true"] .cx-flame-o { fill: #fff3c4; }
.latinosbe-connect .cx-fchip--trend[aria-pressed="true"] .cx-flame-i { fill: #fff; }
.latinosbe-connect .cx-trend-tag { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 2px 9px 2px 5px; border-radius: var(--r-pill); background: linear-gradient(135deg, #fff1e6, #ffe4cc); color: #9a3412; font-size: 11px; font-weight: 800; }
.latinosbe-connect .cx-card.is-trend a { border-color: #fdba74; background: linear-gradient(100deg, #fff7ed, var(--c-white) 55%); }
.latinosbe-connect .cx-block--trend .cx-h3 { display: flex; align-items: center; gap: 6px; color: #9a3412; }

/* ---------- Create: day picker, published state ---------- */
.latinosbe-connect .cx-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.latinosbe-connect .cx-days label { position: relative; }
.latinosbe-connect .cx-days input { position: absolute; opacity: 0; pointer-events: none; }
.latinosbe-connect .cx-days span { display: grid; gap: 2px; min-height: 64px; align-content: center; padding: 10px; border: 1px solid var(--c-line-strong); border-radius: 14px; background: var(--c-white); text-align: center; cursor: pointer; transition: border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease), transform var(--cx-fast) var(--cx-ease); }
.latinosbe-connect .cx-days b { font: 700 1rem/1.2 var(--f-display); color: var(--c-ink); }
.latinosbe-connect .cx-days small { color: var(--c-text-2); text-transform: capitalize; }
.latinosbe-connect .cx-days input:checked + span { border: 2px solid var(--c-teal); background: linear-gradient(150deg, var(--c-teal-50), #f2fafa); box-shadow: 0 0 0 3px rgba(23, 107, 118, .15); }
.latinosbe-connect .cx-days input:focus-visible + span { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.latinosbe-connect .cx-days input:disabled + span { opacity: .45; cursor: not-allowed; }
@media (hover: hover) { .latinosbe-connect .cx-days input:not(:disabled) + span:hover { transform: translateY(-1px); border-color: var(--c-teal); } }
.latinosbe-connect .cx-chipset [hidden] { display: none; }
.latinosbe-connect .cx-done-lead { margin: 0 0 16px; color: var(--c-text-2); }
.latinosbe-connect .cx-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- A plan's page: a ticket ---------- */
.latinosbe-connect .cx-plan { padding: 0 0 clamp(20px, 3vw, 32px); overflow: hidden; border: 0; border-radius: 26px; box-shadow: var(--cx-elev-3); }
.latinosbe-connect .cx-plan > :not(.cx-plan-head) { margin-left: clamp(20px, 3vw, 36px); margin-right: clamp(20px, 3vw, 36px); }
.latinosbe-connect .cx-plan-head { position: relative; flex-wrap: wrap; margin-bottom: 24px; padding: clamp(24px, 4vw, 40px); color: var(--c-white); isolation: isolate;
  background: radial-gradient(110% 140% at 0% 0%, rgba(23, 107, 118, .6), transparent 60%), radial-gradient(80% 120% at 100% 0%, rgba(179, 47, 53, .4), transparent 55%), linear-gradient(160deg, #14243a, #0b1626); }
.latinosbe-connect .cx-plan-head::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 10px, transparent 10px 18px); }
.latinosbe-connect .cx-plan-head .cx-page-title { margin: 6px 0; color: var(--c-white); }
.latinosbe-connect .cx-plan-head .cx-plan-cat { color: #9fdde4; background: rgba(143, 208, 216, .12); }
.latinosbe-connect .cx-plan-org { color: rgba(255, 255, 255, .74); }
.latinosbe-connect .cx-plan-ico--big { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(150deg, #d9474e, #8f1f25); color: var(--c-white); box-shadow: 0 14px 30px -12px rgba(179, 47, 53, .9), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.latinosbe-connect .cx-ticket { order: 5; display: grid; gap: 2px; margin: 0 0 0 auto; padding: 12px 20px; border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.latinosbe-connect .cx-ticket small { color: #9ff0c9; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.latinosbe-connect .cx-ticket b { font: 800 1.35rem/1.1 var(--f-display); }
.latinosbe-connect .cx-ticket span { color: rgba(255, 255, 255, .8); font-size: .9rem; font-weight: 700; }
.latinosbe-connect .cx-plan-photo { width: calc(100% - 2 * clamp(20px, 3vw, 36px)); object-fit: cover; }
.latinosbe-connect .cx-remaining { display: inline-flex; align-items: center; gap: 8px; }
.latinosbe-connect .cx-remaining::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #23a36b; animation: cx-live 2.4s ease-out infinite; }
.latinosbe-connect .cx-remaining--soon::before { background: var(--c-teal); }
.latinosbe-connect .cx-facts { gap: 12px; }
.latinosbe-connect .cx-facts dt { font-size: 10.5px; letter-spacing: .1em; color: var(--c-text-3); }
.latinosbe-connect .cx-facts dd { font-weight: 700; color: var(--c-ink); }
.latinosbe-connect .cx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; margin-bottom: 20px; padding: 16px; border-radius: 18px; background: var(--c-mist); border: 1px solid var(--c-line); }
.latinosbe-connect .cx-actions:empty { display: none; }
.latinosbe-connect .cx-org { margin-top: 16px; margin-bottom: 16px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--c-line); background: var(--c-white); }
.latinosbe-connect .cx-req { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.latinosbe-connect .cx-req:last-child { border-bottom: 0; }
.latinosbe-connect .cx-plan .cx-chatbox { margin-top: 20px; }

/* ---------- Reveal on scroll (added by the script only when motion is allowed) ---------- */
.latinosbe-connect .cx-rv { opacity: 0; transform: translate3d(0, 22px, 0); }
.latinosbe-connect .cx-rv.is-in { opacity: 1; transform: none; transition: opacity 600ms var(--cx-ease-out) calc(var(--rv, 0) * 70ms), transform 700ms var(--cx-ease-out) calc(var(--rv, 0) * 70ms); }

@media (max-width: 960px) {
  .latinosbe-connect .cx-social { min-height: 0; }
  .latinosbe-connect .cx-days { gap: 6px; }
  .latinosbe-connect .cx-ticket { order: 0; margin: 0; width: 100%; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; text-align: left; }
}
.latinosbe-connect .is-calm .cx-flame, .latinosbe-connect.is-calm .cx-flame { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-aurora, .latinosbe-connect .cx-social-eyebrow::before, .latinosbe-connect .cx-flame, .latinosbe-connect .cx-fev li.is-premium a::before, .latinosbe-connect .cx-remaining::before { animation: none; }
  .latinosbe-connect .cx-social .cx-quick a::after { display: none; }
  .latinosbe-connect .cx-fev-img img { transition: none; }
}

/* ---------- Chat: member photos (opt-in) and the guest allowance ---------- */
.latinosbe-connect .cx-msg-av { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c-white), 0 2px 6px rgba(20, 36, 58, .25); }
.latinosbe-connect .cx-msg.has-photo::before { display: none; }
.latinosbe-connect .cx-msg.is-guest::before { background: linear-gradient(150deg, #8a9bb0, #5b6b7d); }
.latinosbe-connect .cx-guest-note { margin: 8px 0 0; font-size: var(--t-micro); color: var(--c-text-3); }
.latinosbe-connect .cx-guest-wall { display: grid; gap: 8px; margin: 12px 0 0; padding: 18px; border-radius: 16px; text-align: center; color: var(--c-white); background: radial-gradient(120% 140% at 0% 0%, rgba(23, 107, 118, .7), transparent 60%), linear-gradient(160deg, #14243a, #0b1626); box-shadow: var(--cx-elev-2); animation: cx-pop-in 300ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-guest-wall strong { font: 800 1.15rem/1.2 var(--f-display); }
.latinosbe-connect .cx-guest-wall p { margin: 0; color: rgba(255, 255, 255, .82); }
.latinosbe-connect .cx-guest-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px !important; }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-guest-wall { animation: none; } }

/* ======================================================================================================
 * r15 · Create a plan, premium (owner, 07/11/2026): dark hero, numbered steps that tick themselves, type cards,
 * teal selection (gold stays for paid premium), live preview of the card with a progress checklist, sticky publish.
 * ==================================================================================================== */
.latinosbe-connect.cx-social-page { overflow-x: clip; }
.latinosbe-connect.cx-social-page:has(.cx-create-hero) { padding-top: 0; }
.latinosbe-connect .cx-create-wrap { max-width: 1240px; }
.latinosbe-connect .cx-create-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(50% - 50vw); padding: clamp(28px, 4vw, 44px) calc(50vw - 50%) 88px; background: #0b1626; color: var(--c-white); }
.latinosbe-connect .cx-create-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 30% 30%, #000 20%, transparent 75%); }
.latinosbe-connect .cx-create-hero .cx-back a { color: #9fdde4; }
.latinosbe-connect .cx-create-hero .cx-page-title { margin: 14px 0 8px; font: 800 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1.05 var(--f-display); letter-spacing: -.03em; background: linear-gradient(180deg, #fff 30%, #b9e2e7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.latinosbe-connect .cx-create-hero .cx-lead-dark { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .76); font-size: 1.05rem; }
.latinosbe-connect .cx-create-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: -56px; }
.latinosbe-connect .cx-create-grid .cx-form { display: grid; gap: 18px; }
.latinosbe-connect .cx-step { position: relative; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--c-line); border-radius: 22px; background: var(--c-white); box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.latinosbe-connect .cx-step-n { position: relative; display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: linear-gradient(150deg, var(--c-teal), #0f4f58); color: var(--c-white); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(23, 107, 118, .7); }
.latinosbe-connect .cx-step.is-done .cx-step-n::after { content: "✓"; position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #23a36b; color: var(--c-white); font-size: 11px; box-shadow: 0 0 0 2px var(--c-white); animation: cx-pop-in 220ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-step-t { margin: 0; font: 800 clamp(1.15rem, 1rem + .5vw, 1.35rem)/1.2 var(--f-display); letter-spacing: -.01em; color: var(--c-ink); }
.latinosbe-connect .cx-step .cx-field { margin: 0 0 16px; padding: 0; border: 0; background: none; box-shadow: none; }
.latinosbe-connect .cx-step .cx-field:last-child { margin-bottom: 0; }
.latinosbe-connect .cx-step label, .latinosbe-connect .cx-step legend { font-weight: 700; color: var(--c-ink); }
.latinosbe-connect .cx-step input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .latinosbe-connect .cx-step select, .latinosbe-connect .cx-step textarea { width: 100%; min-height: 50px; margin-top: 6px; padding: 12px 14px; border: 1.5px solid var(--c-line-strong); border-radius: 12px; background: var(--c-mist); color: var(--c-ink); font-size: 1rem; transition: border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-step input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus, .latinosbe-connect .cx-step select:focus, .latinosbe-connect .cx-step textarea:focus { border-color: var(--c-teal); background: var(--c-white); box-shadow: 0 0 0 4px rgba(23, 107, 118, .16); outline: 2px solid transparent; }
/* Type cards */
.latinosbe-connect .cx-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.latinosbe-connect .cx-type { position: relative; display: block; color: inherit; text-decoration: none; }
.latinosbe-connect .cx-type input { position: absolute; opacity: 0; pointer-events: none; }
.latinosbe-connect .cx-type > span { position: relative; display: grid; gap: 4px; height: 100%; padding: 16px; border: 1.5px solid var(--c-line-strong); border-radius: 16px; background: var(--c-white); cursor: pointer; transition: transform var(--cx-fast) var(--cx-ease), border-color var(--cx-std) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-type i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .cx-type b { font: 700 1rem/1.25 var(--f-display); color: var(--c-ink); }
.latinosbe-connect .cx-type small { color: var(--c-text-2); font-weight: 500; }
.latinosbe-connect .cx-type input:checked + span { border-color: var(--c-teal); background: linear-gradient(160deg, #f2fafa, #e3f3f4); box-shadow: 0 0 0 3px rgba(23, 107, 118, .18); }
.latinosbe-connect .cx-type input:checked + span i { background: var(--c-teal); color: var(--c-white); }
.latinosbe-connect .cx-type input:checked + span::after { content: "✓"; position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-teal); color: var(--c-white); font-size: 12px; font-weight: 800; }
.latinosbe-connect .cx-type input:focus-visible + span, .latinosbe-connect .cx-type--link:focus-visible > span { outline: 3px solid var(--c-ink); outline-offset: 2px; }
.latinosbe-connect .cx-type--link > span { border-style: dashed; background: var(--c-mist); }
.latinosbe-connect .cx-type--link i { background: rgba(235, 173, 23, .16); color: var(--c-gold-ink); }
@media (hover: hover) { .latinosbe-connect .cx-type > span:hover { transform: translateY(-2px); border-color: var(--c-teal); box-shadow: var(--cx-elev-1); } }
/* Categories: teal, not gold */
.latinosbe-connect .cx-step .cx-cats { gap: 10px; }
.latinosbe-connect .cx-step .cx-cat span { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: 14px; background: var(--c-white); font-weight: 700; line-height: 1.2; }
.latinosbe-connect .cx-step .cx-cat svg { flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--c-teal-50); color: var(--c-teal-700); transition: background-color var(--cx-std) var(--cx-ease), color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-step .cx-cat input:checked + span { border: 2px solid var(--c-teal); background: linear-gradient(160deg, #f2fafa, #e3f3f4); box-shadow: 0 0 0 3px rgba(23, 107, 118, .15); }
.latinosbe-connect .cx-step .cx-cat input:checked + span svg { background: var(--c-teal); color: var(--c-white); }
.latinosbe-connect .cx-step .cx-cat input:focus-visible + span { outline: 3px solid var(--c-ink); outline-offset: 2px; }
/* Pills: place, languages, time chips */
.latinosbe-connect .cx-step .cx-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.latinosbe-connect .cx-step .cx-seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); font-weight: 600; cursor: pointer; transition: border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-step .cx-seg label[hidden] { display: none; }
.latinosbe-connect .cx-step .cx-seg label:has(input:checked) { border-color: var(--c-teal); background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .cx-step .cx-seg input { accent-color: var(--c-teal); }
.latinosbe-connect .cx-step .cx-chipset { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.latinosbe-connect .cx-step .cx-chipset button { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font-weight: 600; cursor: pointer; transition: background-color var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-step .cx-chipset button[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-white); }
.latinosbe-connect .cx-step .cx-chipset button:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.latinosbe-connect .cx-step .cx-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 12px; }
.latinosbe-connect .cx-step .cx-place { display: grid; gap: 4px; margin-top: 14px; padding: 16px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-mist); }
.latinosbe-connect .cx-step .cx-place[hidden] { display: none; }
.latinosbe-connect .cx-step .cx-place input:not([type="radio"]) { background: var(--c-white); }
.latinosbe-connect .cx-step .cx-pick { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--c-line); }
/* Picture */
.latinosbe-connect .cx-drop { position: relative; }
.latinosbe-connect .cx-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.latinosbe-connect .cx-drop-zone { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--c-line-strong); border-radius: 18px; background: var(--c-mist); text-align: center; cursor: pointer; transition: border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-drop-zone svg { width: 34px; height: 34px; color: var(--c-teal); }
.latinosbe-connect .cx-drop-zone small { color: var(--c-text-3); font-weight: 500; }
.latinosbe-connect .cx-drop-name { color: var(--c-teal-700); font-weight: 700; overflow-wrap: anywhere; }
.latinosbe-connect .cx-drop-input:focus-visible + .cx-drop-zone { outline: 3px solid var(--c-ink); outline-offset: 2px; }
@media (hover: hover) { .latinosbe-connect .cx-drop-zone:hover { border-color: var(--c-teal); background: var(--c-teal-50); } }
/* Publish bar */
.latinosbe-connect .cx-submit-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px; border-radius: 20px; background: rgba(11, 22, 38, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--cx-elev-3); }
.latinosbe-connect .cx-submit-bar .cx-form-error { flex: 1 1 260px; margin: 0; color: #ffc2c6; font-weight: 600; }
.latinosbe-connect .cx-submit-bar .cx-btn--big { box-shadow: 0 10px 30px -10px rgba(235, 173, 23, .7); }
/* Live preview */
.latinosbe-connect .cx-create-aside { position: sticky; top: 112px; }
.latinosbe-connect .cx-aside-in { padding: 20px; border-radius: 22px; color: var(--c-white); background: radial-gradient(120% 100% at 0% 0%, rgba(23, 107, 118, .5), transparent 60%), linear-gradient(160deg, #14243a, #0b1626); box-shadow: var(--cx-elev-3); }
.latinosbe-connect .cx-aside-t { margin: 0 0 12px; font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9fdde4; }
.latinosbe-connect .cx-preview { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); }
.latinosbe-connect .cx-pv-ico { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, #d9474e, #8f1f25); color: var(--c-white); box-shadow: 0 8px 18px -8px rgba(179, 47, 53, .9); }
.latinosbe-connect .cx-preview.is-room .cx-pv-ico { background: linear-gradient(150deg, #2f6fb5, #153c59); }
.latinosbe-connect .cx-pv-ico svg { width: 26px; height: 26px; }
.latinosbe-connect .cx-pv-ico img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-pv-body { display: grid; gap: 4px; min-width: 0; }
.latinosbe-connect .cx-pv-top { display: flex; flex-wrap: wrap; gap: 6px; }
.latinosbe-connect .cx-pv-cat, .latinosbe-connect .cx-pv-when { padding: 2px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.latinosbe-connect .cx-pv-cat { background: rgba(255, 255, 255, .1); color: #ffc2c6; text-transform: uppercase; }
.latinosbe-connect .cx-pv-when:empty { display: none; }
.latinosbe-connect .cx-pv-when { background: rgba(61, 220, 151, .16); color: #9ff0c9; }
.latinosbe-connect .cx-pv-title { font: 700 1.05rem/1.25 var(--f-display); overflow-wrap: anywhere; }
.latinosbe-connect .cx-pv-meta { color: rgba(255, 255, 255, .7); font-size: .85rem; }
.latinosbe-connect .cx-progress-bar { height: 6px; margin: 18px 0 12px; overflow: hidden; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); }
.latinosbe-connect .cx-progress-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #3ddc97, #8fd0d8); transition: transform var(--cx-emph) var(--cx-ease-out); }
.latinosbe-connect .cx-progress { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: cx-pg; }
.latinosbe-connect .cx-progress li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .7); font-weight: 600; counter-increment: cx-pg; }
.latinosbe-connect .cx-progress li::before { content: counter(cx-pg); display: grid; place-items: center; flex: 0 0 24px; height: 24px; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%; font-size: 12px; transition: background-color var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-progress li.is-done { color: var(--c-white); }
.latinosbe-connect .cx-progress li.is-done::before { content: "✓"; border-color: #23a36b; background: #23a36b; }
@media (max-width: 960px) {
  .latinosbe-connect .cx-create-grid { grid-template-columns: 1fr; margin-top: -48px; }
  .latinosbe-connect .cx-create-aside { position: static; order: -1; }
  .latinosbe-connect .cx-progress { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: 11px; }
  .latinosbe-connect .cx-progress li { flex-direction: column; gap: 4px; text-align: center; }
  .latinosbe-connect .cx-submit-bar { bottom: 8px; }
  .latinosbe-connect .cx-submit-bar .cx-btn--big { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-progress-bar i, .latinosbe-connect .cx-type > span { transition: none; }
  .latinosbe-connect .cx-step.is-done .cx-step-n::after { animation: none; }
}

/* ---------- Map: trending flames, legend ---------- */
.latinosbe-connect .cx-hot { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px 3px 5px; border: 0; border-radius: var(--r-pill); background: linear-gradient(135deg, #f97316, #dc2626); color: var(--c-white); font: 800 11px/1 var(--f-text); box-shadow: 0 0 0 2px var(--c-white), 0 6px 14px -4px rgba(220, 38, 38, .7); cursor: pointer; animation: cx-hot-in 360ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-hot .cx-flame { width: 14px; height: 14px; }
.latinosbe-connect .cx-hot .cx-flame-o { fill: #fff3c4; }
.latinosbe-connect .cx-hot .cx-flame-i { fill: var(--c-white); }
.latinosbe-connect .cx-hot:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
@keyframes cx-hot-in { from { opacity: 0; transform: translateY(6px) scale(.8); } to { opacity: 1; transform: none; } }
.latinosbe-connect .cx-legend { position: absolute; right: 12px; bottom: 34px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; max-width: min(560px, 60%); padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--cx-elev-2); font-size: 11.5px; font-weight: 700; color: var(--c-ink); pointer-events: none; }
.latinosbe-connect .cx-lg { display: inline-flex; align-items: center; gap: 6px; }
.latinosbe-connect .cx-lg i { width: 10px; height: 10px; border-radius: 50%; background: #176b76; box-shadow: 0 0 0 2px var(--c-white), 0 0 0 3px rgba(20, 36, 58, .15); }
.latinosbe-connect .cx-lg--pr i { background: var(--c-white); box-shadow: 0 0 0 2px var(--cx-gold-1), 0 0 0 4px rgba(199, 154, 61, .3); }
.latinosbe-connect .cx-lg--p i { background: #b32f35; }
.latinosbe-connect .cx-lg--e i { background: #ebad17; }
.latinosbe-connect .cx-lg .cx-flame { width: 13px; height: 13px; }
@media (max-width: 960px) { .latinosbe-connect .cx-legend { display: none; } }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-hot { animation: none; } }
.latinosbe-connect .is-calm .cx-hot { animation: none; }

/* ---------- «Volver a Conecta»: a real button with a sliding arrow and a sheen (every Conecta page) ---------- */
.latinosbe-connect .cx-back { margin: 0 0 14px; }
.latinosbe-connect .cx-back a { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px 0 6px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font-size: .92rem; font-weight: 700; text-decoration: none; box-shadow: var(--cx-elev-1); transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-back a::before { content: ""; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--cx-std) var(--cx-ease-out), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-back a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--cx-ease-out); }
@media (hover: hover) {
  .latinosbe-connect .cx-back a:hover { transform: translateY(-1px); border-color: var(--c-teal); box-shadow: var(--cx-elev-2); }
  .latinosbe-connect .cx-back a:hover::before { transform: translateX(-3px); background-color: var(--c-teal); }
  .latinosbe-connect .cx-back a:hover::after { transform: translateX(120%); }
}
.latinosbe-connect .cx-back a:active { transform: scale(.98); }
.latinosbe-connect .cx-back a:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.latinosbe-connect .cx-create-hero .cx-back a { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--c-white); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.latinosbe-connect .cx-create-hero .cx-back a::before { background-color: #ebad17; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314243a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.latinosbe-connect .cx-create-hero .cx-back a::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); }
@media (hover: hover) {
  .latinosbe-connect .cx-create-hero .cx-back a:hover { border-color: rgba(143, 208, 216, .6); background: rgba(255, 255, 255, .14); box-shadow: 0 0 30px -10px rgba(143, 208, 216, .6); }
  .latinosbe-connect .cx-create-hero .cx-back a:hover::before { background-color: #ffd166; }
}
.latinosbe-connect .cx-create-hero .cx-back a:focus-visible { outline-color: #ffd166; }

/* ---------- «Mis planes» ---------- */
.latinosbe-connect .cx-mine-wrap { max-width: 1240px; }
.latinosbe-connect .cx-hero-actions { margin: 20px 0 0; }
.latinosbe-connect .cx-mine-hero .cx-create { min-height: 52px; padding: 0 26px; border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(235, 173, 23, .65); }
.latinosbe-connect .cx-mine-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: -56px; }
.latinosbe-connect .cx-mine-grid > p { padding: 20px; border-radius: 18px; background: var(--c-white); box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-mine-card { margin: 0; padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--c-line); border-radius: 22px; background: var(--c-white); box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-mine-card--plans { grid-row: span 5; }
.latinosbe-connect .cx-mine-card .cx-h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--c-ink); font: 800 1.1rem/1.2 var(--f-display); letter-spacing: -.01em; text-transform: none; }
.latinosbe-connect .cx-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-teal-50); color: var(--c-teal-700); font-size: .8rem; font-weight: 800; }
.latinosbe-connect .cx-mine-card .cx-plan-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.latinosbe-connect .cx-mine-card .cx-plan-card a { display: flex; align-items: center; gap: 14px; padding: 14px 52px 14px 14px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-white); color: var(--c-ink); text-decoration: none; transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-mine-card .cx-plan-card a:hover { transform: translateY(-2px); border-color: var(--c-teal); box-shadow: var(--cx-elev-2); } }
.latinosbe-connect .cx-mine-card .cx-plan-card a:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.latinosbe-connect .cx-mine-card .cx-plan-ico { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: linear-gradient(150deg, #d9474e, #8f1f25); color: var(--c-white); font: 800 1.35rem/1 var(--f-display); box-shadow: 0 8px 18px -10px rgba(179, 47, 53, .9); }
.latinosbe-connect .cx-mine-card .is-room .cx-plan-ico { background: linear-gradient(150deg, #2f6fb5, #153c59); }
.latinosbe-connect .cx-mine-card .cx-plan-ico img { width: 100%; height: 100%; object-fit: cover; }
.latinosbe-connect .cx-mine-card .cx-plan-body { display: grid; gap: 4px; min-width: 0; }
.latinosbe-connect .cx-plan-status { display: inline-flex; padding: 3px 8px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.latinosbe-connect .cx-plan-status:empty { display: none; }
.latinosbe-connect .cx-plan-status--owner { background: var(--c-teal-50); color: var(--c-teal-700); }
.latinosbe-connect .cx-plan-status--accepted { background: #e6f6ee; color: #17663f; }
.latinosbe-connect .cx-plan-status--pending, .latinosbe-connect .cx-plan-status--waitlist { background: #fff4dc; color: #7a5605; }
.latinosbe-connect .cx-mine-card .cx-plan-card--expired a, .latinosbe-connect .cx-mine-card .cx-plan-card--cancelled a { opacity: .6; }
.latinosbe-connect .cx-mine-card .cx-req { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.latinosbe-connect .cx-mine-card .cx-req:last-child { border-bottom: 0; }
.latinosbe-connect .cx-mine-card ul { margin: 0; padding: 0; list-style: none; }
.latinosbe-connect .cx-person { font-weight: 700; }
.latinosbe-connect .cx-person::before { content: attr(data-initial); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, var(--c-teal), var(--c-deep)); color: var(--c-white); font: 800 .85rem/1 var(--f-text); }
.latinosbe-connect .cx-mine-card .cx-req.is-new { position: relative; padding-left: 16px; font-weight: 600; }
.latinosbe-connect .cx-mine-card .cx-req.is-new::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #b32f35; }
.latinosbe-connect .cx-mine-card .cx-link { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font-weight: 700; text-decoration: none; cursor: pointer; }
.latinosbe-connect .cx-mine-card .cx-link:first-of-type { border-color: var(--c-teal); background: var(--c-teal); color: var(--c-white); }
/* Preferences as switches */
.latinosbe-connect .cx-prefs label { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-weight: 600; cursor: pointer; }
.latinosbe-connect .cx-prefs input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; border-radius: var(--r-pill); background: var(--c-line-strong); cursor: pointer; transition: background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-prefs input[type="checkbox"]::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgba(20, 36, 58, .3); transition: transform var(--cx-std) var(--cx-ease-out); }
.latinosbe-connect .cx-prefs input[type="checkbox"]:checked { background: var(--c-teal); }
.latinosbe-connect .cx-prefs input[type="checkbox"]:checked::before { transform: translateX(18px); }
.latinosbe-connect .cx-prefs input[type="checkbox"]:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }
@media (max-width: 960px) {
  .latinosbe-connect .cx-mine-grid { grid-template-columns: 1fr; margin-top: -48px; }
  .latinosbe-connect .cx-mine-card--plans { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-back a, .latinosbe-connect .cx-back a::before, .latinosbe-connect .cx-back a::after, .latinosbe-connect .cx-prefs input[type="checkbox"], .latinosbe-connect .cx-prefs input[type="checkbox"]::before { transition: none; }
}

/* ---------- r17 · Share bar with network icons (owner, 07/11/2026) ---------- */
.latinosbe-connect .cx-share { display: grid; gap: 12px; margin-top: 4px; }
.latinosbe-connect .cx-actions .cx-share, .latinosbe-connect .cx-org .cx-share { flex: 1 1 100%; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.latinosbe-connect .cx-share-t { margin: 0; font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); }
.latinosbe-connect .cx-share-row { display: flex; flex-wrap: wrap; gap: 14px 6px; }
.latinosbe-connect .cx-sh { --sh: var(--c-ink); display: grid; justify-items: center; gap: 6px; width: 74px; padding: 0; border: 0; background: none; color: var(--c-ink); font: 600 11.5px/1.2 var(--f-text); text-align: center; text-decoration: none; cursor: pointer; }
.latinosbe-connect .cx-sh-i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--sh); color: var(--c-white); box-shadow: 0 8px 18px -10px var(--sh), inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform var(--cx-std) var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-sh-i svg { width: 22px; height: 22px; fill: currentColor; }
.latinosbe-connect .cx-sh--share { --sh: var(--c-teal); }
.latinosbe-connect .cx-sh--share .cx-sh-i { background: linear-gradient(150deg, var(--c-teal), #0f4f58); }
.latinosbe-connect .cx-sh--wa { --sh: #25d366; }
.latinosbe-connect .cx-sh--fb { --sh: #1877f2; }
.latinosbe-connect .cx-sh--tg { --sh: #229ed9; }
.latinosbe-connect .cx-sh--x { --sh: #0f1419; }
.latinosbe-connect .cx-sh--li { --sh: #0a66c2; }
.latinosbe-connect .cx-sh--mail { --sh: #5b6b7d; }
.latinosbe-connect .cx-sh--copy { --sh: var(--c-ink); }
.latinosbe-connect .cx-sh--qr { --sh: #2f3d4f; }
.latinosbe-connect .cx-sh.is-done .cx-sh-i { background: #23a36b; }
.latinosbe-connect .cx-sh[aria-expanded="true"] .cx-sh-i { box-shadow: 0 0 0 3px var(--c-white), 0 0 0 5px var(--c-teal); }
@media (hover: hover) {
  .latinosbe-connect .cx-sh:hover .cx-sh-i { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 26px -10px var(--sh), inset 0 0 0 1px rgba(255, 255, 255, .2); }
}
.latinosbe-connect .cx-sh:active .cx-sh-i { transform: scale(.96); }
.latinosbe-connect .cx-sh:focus-visible { outline: none; }
.latinosbe-connect .cx-sh:focus-visible .cx-sh-i { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.latinosbe-connect .cx-qr { justify-self: start; width: 188px; padding: 12px; border-radius: 16px; background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--cx-elev-2); animation: cx-pop-in 220ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-qr[hidden] { display: none; }
.latinosbe-connect .cx-qr svg { display: block; width: 100%; height: auto; }
/* Save and cancel */
.latinosbe-connect .cx-btn--save::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.latinosbe-connect .cx-danger { margin-top: 14px; border: 1.5px solid #e4b4b7; background: var(--c-white); color: #9e2329; }
@media (hover: hover) { .latinosbe-connect .cx-danger:hover { border-color: #b32f35; background: #fbedee; } }
.latinosbe-connect .cx-actions { gap: 12px; }
@media (max-width: 480px) { .latinosbe-connect .cx-sh { width: calc(25% - 5px); } }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-sh-i { transition: none; } .latinosbe-connect .cx-qr { animation: none; } }

/* ======================================================================================================
 * r18 · Fifteen new functions (owner, 07/11/2026): map search, share this view, radius, routes, copy address,
 * recently viewed, «Nuevo», data report link, keys, first-visit guide, plan countdown/calendar/mini map,
 * «Ahora en Conecta», unread badge.
 * ==================================================================================================== */
/* Map search */
.latinosbe-connect .cx-msearch { position: absolute; top: var(--sp-4); left: calc(var(--cx-panel) + 170px); z-index: 5; width: min(360px, calc(100% - var(--cx-panel) - 560px)); min-width: 220px; transition: left var(--cx-emph) var(--cx-ease-out); }
.latinosbe-connect .cx-stage.is-panel-hidden .cx-msearch { left: 170px; }
.latinosbe-connect .cx-msearch input { width: 100%; min-height: 42px; padding: 0 14px 0 40px; border: 1px solid rgba(20, 36, 58, .12); border-radius: var(--r-pill); background: rgba(255, 255, 255, .96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314243a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px no-repeat; color: var(--c-ink); font-size: .95rem; box-shadow: var(--cx-elev-2); }
.latinosbe-connect .cx-msearch input:focus { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.latinosbe-connect .cx-msearch-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; max-height: 360px; overflow: auto; list-style: none; border-radius: 16px; background: var(--c-white); box-shadow: var(--cx-elev-3); animation: cx-pop-in 160ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-msearch-item { display: grid; gap: 2px; padding: 9px 12px 9px 30px; border-radius: 10px; cursor: pointer; position: relative; }
.latinosbe-connect .cx-msearch-item::before { content: ""; position: absolute; left: 12px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: #176b76; }
.latinosbe-connect .cx-msearch-item--e::before { background: #ebad17; }
.latinosbe-connect .cx-msearch-item--p::before { background: #b32f35; }
.latinosbe-connect .cx-msearch-item--c::before { background: var(--c-white); box-shadow: 0 0 0 2px var(--c-ink); }
.latinosbe-connect .cx-msearch-item b { font-size: .92rem; color: var(--c-ink); }
.latinosbe-connect .cx-msearch-item span { font-size: .78rem; color: var(--c-text-3); }
.latinosbe-connect .cx-msearch-item[aria-selected="true"], .latinosbe-connect .cx-msearch-item:hover { background: var(--c-teal-50); }
.latinosbe-connect .cx-msearch-status {
  position: absolute; inset: calc(100% + 6px) 0 auto; margin: 0; padding: 10px 12px;
  border-radius: 12px; color: var(--c-text-2); background: var(--c-white);
  box-shadow: var(--cx-elev-3); font-size: .9rem;
}
.latinosbe-connect .cx-msearch-status[hidden], .latinosbe-connect .cx-map-btn--guide[hidden] { display: none; }
@media (max-width: 1240px) { .latinosbe-connect .cx-msearch { top: 64px; left: calc(var(--cx-panel) + 28px); width: 320px; } .latinosbe-connect .cx-stage.is-panel-hidden .cx-msearch { left: 16px; } }
@media (max-width: 960px) { .latinosbe-connect .cx-msearch { top: 10px; left: 10px; right: 10px; width: auto; min-width: 0; } }
/* Card extras */
.latinosbe-connect .cx-new-tag { display: inline-flex; width: fit-content; padding: 2px 8px; border-radius: var(--r-pill); background: linear-gradient(135deg, #e7f7ef, #c9eedb); color: #17663f; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.latinosbe-connect .cx-pop-routes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .8rem; color: var(--c-text-3); }
.latinosbe-connect .cx-pop-routes .cx-pop-how { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-teal-50); color: var(--c-teal-700); font-weight: 700; text-decoration: none; }
.latinosbe-connect .cx-pop-tools { margin: 8px 0 4px; }
.latinosbe-connect .cx-pop-copy { min-height: 34px; padding: 0 12px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font-size: .82rem; font-weight: 700; cursor: pointer; }
.latinosbe-connect .cx-pop-wrong { display: block; margin-top: 10px; font-size: .78rem; color: var(--c-text-3); }
.latinosbe-connect .cx-radius-chips { display: flex; gap: 8px; margin: 4px 0 12px; }
.latinosbe-connect .cx-block--recent .cx-h3 { display: flex; align-items: center; justify-content: space-between; }
.latinosbe-connect .cx-recent-clear { padding: 2px 10px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-white); color: var(--c-text-2); font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
/* First-visit guide */
.latinosbe-connect .cx-tips { position: absolute; left: calc(var(--cx-panel) + 28px); bottom: 40px; z-index: 6; width: 320px; padding: 18px 18px 16px; border-radius: 20px; color: var(--c-white); background: radial-gradient(120% 120% at 0% 0%, rgba(23, 107, 118, .6), transparent 60%), linear-gradient(160deg, #14243a, #0b1626); box-shadow: var(--cx-elev-3); animation: cx-pop-in 300ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-tips-t { margin: 0 0 6px; color: #9fdde4; font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.latinosbe-connect .cx-tips-x { margin: 0 0 8px; font-weight: 600; line-height: 1.45; }
.latinosbe-connect .cx-tips-k { margin: 0 0 12px; color: rgba(255, 255, 255, .62); font-size: .78rem; }
.latinosbe-connect .cx-tips-dots { float: left; margin: 10px 0 0; color: rgba(255, 255, 255, .6); font-size: .8rem; }
.latinosbe-connect .cx-tips-next { float: right; min-height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f2bd3a, var(--c-gold)); color: var(--c-ink); font-weight: 800; cursor: pointer; }
.latinosbe-connect .cx-tips-close { position: absolute; right: 8px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--c-white); font-size: 20px; line-height: 1; cursor: pointer; }
.latinosbe-connect .cx-tips button:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.latinosbe-connect .cx-stage.is-panel-hidden .cx-tips { left: 16px; }
@media (max-width: 960px) { .latinosbe-connect .cx-tips { left: 10px; right: 10px; bottom: 44px; width: auto; } }
/* «Ahora en Conecta» */
.latinosbe-connect .cx-now { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 24px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.latinosbe-connect .cx-now-t { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #9fdde4; font-size: var(--t-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.latinosbe-connect .cx-now-t::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; animation: cx-live 2.4s ease-out infinite; }
.latinosbe-connect .cx-now ul { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.latinosbe-connect .cx-now li { display: flex; align-items: baseline; gap: 8px; }
.latinosbe-connect .cx-now b { font: 800 1.6rem/1 var(--f-display); color: var(--c-white); font-variant-numeric: tabular-nums; }
.latinosbe-connect .cx-now span { color: rgba(255, 255, 255, .72); font-size: .9rem; }
.latinosbe-connect .cx-unread { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: var(--r-pill); background: #b32f35; color: var(--c-white); font-size: .75rem; font-weight: 800; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
/* Plan page: calendar button, mini map */
.latinosbe-connect .cx-btn--cal::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.latinosbe-connect .cx-plan-map { height: 260px; margin-top: 16px; overflow: hidden; border-radius: 18px; background: var(--c-sunken); box-shadow: inset 0 0 0 1px var(--c-line), var(--cx-elev-1); }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-tips, .latinosbe-connect .cx-msearch-list { animation: none; } .latinosbe-connect .cx-now-t::before { animation: none; } }
.latinosbe-connect .is-calm .cx-tips { animation: none; }

/* r20b · Delete a plan for good */
.latinosbe-connect .cx-danger--solid { margin-left: 8px; border-color: #b32f35; background: #b32f35; color: var(--c-white); }
@media (hover: hover) { .latinosbe-connect .cx-danger--solid:hover { background: #8f1f25; border-color: #8f1f25; color: var(--c-white); } }

/* ======================================================================================================
 * r21 · 27 premium improvements (owner, 07/11/2026). Effects are transform/opacity; reduced motion and
 * «Efectos: reducidos» stop them (see the end of this block).
 * ==================================================================================================== */
/* 1 · Reading progress */
.cx-progress-top { position: fixed; left: 0; right: 0; top: 0; z-index: 99999; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #176b76, #3ddc97, #ebad17, #b32f35); pointer-events: none; }
.admin-bar .cx-progress-top { top: 32px; }
/* 2 · Panel title with a slow shine */
.latinosbe-connect .cx-panel-head h1 { background: linear-gradient(100deg, #fff 0%, #fff 40%, #bff0f4 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shine 7s ease-in-out infinite; }
@keyframes cx-shine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
/* 3 · Map toolbar: glass buttons with icons */
.latinosbe-connect .cx-map-btn { display: inline-flex; align-items: center; gap: 7px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--cx-elev-2); transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-map-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(23, 107, 118, .35), 0 12px 26px -10px rgba(20, 36, 58, .5); } }
.latinosbe-connect .cx-map-btn--me::before, .latinosbe-connect .cx-map-btn--all::before, .latinosbe-connect .cx-map-btn--tilt::before, .latinosbe-connect .cx-map-btn--share::before, .latinosbe-connect .cx-map-btn--fx::before { content: ""; width: 15px; height: 15px; flex: 0 0 15px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.latinosbe-connect .cx-map-btn--me { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23000'/%3E%3Cpath d='M12 1v4M12 19v4M1 12h4M19 12h4'/%3E%3C/svg%3E"); }
.latinosbe-connect .cx-map-btn--all { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.latinosbe-connect .cx-map-btn--tilt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2 3 7v10l9 5 9-5V7z'/%3E%3Cpath d='M3 7l9 5 9-5M12 12v10'/%3E%3C/svg%3E"); }
.latinosbe-connect .cx-map-btn--share { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a3 3 0 1 0-2.9-3.7L8.6 7.9a3 3 0 1 0 0 4.2l6.5 3.6A3 3 0 1 0 16 14l-6.5-3.6a3 3 0 0 0 0-.8L16 6a3 3 0 0 0 2 2z'/%3E%3C/svg%3E"); }
.latinosbe-connect .cx-map-btn--fx { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z'/%3E%3C/svg%3E"); }
/* 4 · First visit: «Dónde estoy» glows */
.latinosbe-connect .cx-map-btn--me.is-hint { animation: cx-hint 2.2s ease-out infinite; }
@keyframes cx-hint { 0% { box-shadow: 0 0 0 0 rgba(235, 173, 23, .7), var(--cx-elev-2); } 70%, 100% { box-shadow: 0 0 0 14px rgba(235, 173, 23, 0), var(--cx-elev-2); } }
/* 6 · Name by the pointer */
.latinosbe-connect .cx-tip { position: absolute; left: 0; top: 0; z-index: 7; max-width: 240px; padding: 6px 10px; border-radius: 10px; background: rgba(11, 22, 38, .92); color: var(--c-white); font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; box-shadow: var(--cx-elev-2); }
/* 7 · Chips */
.latinosbe-connect .cx-fchip { transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), background-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-fchip:hover { transform: translateY(-1px); box-shadow: var(--cx-elev-1); } }
.latinosbe-connect .cx-fchip[aria-pressed="true"]:not(.cx-fchip--trend) { background: linear-gradient(135deg, #1c3049, var(--c-ink)); border-color: transparent; color: var(--c-white); box-shadow: 0 6px 16px -6px rgba(20, 36, 58, .6); }
/* 8 · Panel cards */
.latinosbe-connect .cx-card a { position: relative; overflow: hidden; }
.latinosbe-connect .cx-card a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); transition: transform 700ms var(--cx-ease-out); pointer-events: none; }
@media (hover: hover) {
  .latinosbe-connect .cx-card a:hover { transform: translateY(-2px); box-shadow: var(--cx-elev-2); }
  .latinosbe-connect .cx-card a:hover::after { transform: translateX(120%); }
  .latinosbe-connect .cx-card a:hover .cx-card-media img { transform: scale(1.08); }
}
.latinosbe-connect .cx-card-media img { transition: transform 500ms var(--cx-ease-out); }
/* 9 · Pictures fade in */
.latinosbe-connect .cx-card-media img, .latinosbe-connect .cx-fev-img img, .latinosbe-connect .cx-pop-img, .latinosbe-connect .cx-radar-core img { animation: cx-img-in 500ms var(--cx-ease-out) both; }
@keyframes cx-img-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
/* 11 · Pin card: a colour ribbon by kind */
.latinosbe-connect .cx-pop { position: relative; }
.latinosbe-connect .cx-pop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 4px; background: linear-gradient(90deg, #176b76, #3ddc97); }
.latinosbe-connect .cx-pop--e::before { background: linear-gradient(90deg, #ebad17, #ffd166); }
.latinosbe-connect .cx-pop--p::before { background: linear-gradient(90deg, #b32f35, #ff7a7f); }
.latinosbe-connect .cx-pop-img { transition: transform 600ms var(--cx-ease-out); }
@media (hover: hover) { .latinosbe-connect .cx-pop:hover .cx-pop-img { transform: scale(1.04); } }
/* 12 · Notes on the map: glass, sliding in */
.latinosbe-connect .cx-map-note { border-radius: 14px; background: rgba(11, 22, 38, .9); color: var(--c-white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--cx-elev-3); animation: cx-note-in 320ms var(--cx-ease-out) both; }
@keyframes cx-note-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* 14 · Cue under the map */
.latinosbe-connect .cx-cue { display: flex; align-items: center; gap: 10px; margin: -22px auto 0; position: relative; z-index: 4; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink); font-weight: 800; box-shadow: var(--cx-elev-3); cursor: pointer; }
.latinosbe-connect .cx-cue i { width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-3px); animation: cx-bob 1.6s ease-in-out infinite; }
@keyframes cx-bob { 50% { transform: rotate(45deg) translate(3px, 0); } }
.latinosbe-connect .cx-cue:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }
.latinosbe-connect .cx-cue--community { width: fit-content; text-decoration: none; }
/* 15 · Spotlight on the night section */
.latinosbe-connect .cx-social::after, .latinosbe-connect .cx-create-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(143, 208, 216, .14), transparent 70%); transition: opacity 400ms var(--cx-ease); }
.latinosbe-connect .has-spot::after { opacity: 1; }
/* 16 · Tilt with glare */
.latinosbe-connect .cx-tilt { transition: transform 180ms var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease); transform-style: preserve-3d; will-change: transform; }
.latinosbe-connect .cx-quick a.cx-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .18), transparent 60%); opacity: 0; transition: opacity 300ms; }
.latinosbe-connect .cx-quick a.cx-tilt:hover::before { opacity: 1; }
/* 17 · Magnetic main buttons */
.latinosbe-connect .cx-create, .latinosbe-connect .cx-btn--big { transition: transform 160ms var(--cx-ease-out), box-shadow var(--cx-std) var(--cx-ease); }
/* 18 · Confetti */
.cx-confetti { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
/* 19 · Welcome back */
.latinosbe-connect .cx-welcome { position: absolute; left: 50%; top: 70px; z-index: 6; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 24px)); padding: 12px 12px 12px 16px; border-radius: 18px; color: var(--c-white); background: linear-gradient(160deg, rgba(20, 36, 58, .95), rgba(11, 22, 38, .95)); box-shadow: 0 0 0 1px rgba(61, 220, 151, .35), var(--cx-elev-3); transform: translateX(-50%); animation: cx-pop-in 400ms var(--cx-ease-out) both; }
.latinosbe-connect .cx-welcome p { flex: 1; margin: 0; font-weight: 700; font-size: .92rem; }
.latinosbe-connect .cx-welcome-i { flex: 0 0 10px; height: 10px; border-radius: 50%; background: #3ddc97; animation: cx-live 2.4s ease-out infinite; }
.latinosbe-connect .cx-welcome-go { padding: 8px 14px; border-radius: 12px; background: linear-gradient(180deg, #f2bd3a, var(--c-gold)); color: var(--c-ink); font-weight: 800; text-decoration: none; white-space: nowrap; }
.latinosbe-connect .cx-welcome-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--c-white); font-size: 20px; cursor: pointer; }
/* 20 · Happening now */
.latinosbe-connect .cx-live-tag, .latinosbe-connect .cx-plan-live { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 9px 2px 7px; border-radius: var(--r-pill); background: #fdecec; color: #9e2329; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.latinosbe-connect .cx-live-tag::before, .latinosbe-connect .cx-plan-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0353d; animation: cx-live-red 1.6s ease-out infinite; }
@keyframes cx-live-red { 0% { box-shadow: 0 0 0 0 rgba(224, 53, 61, .6); } 80%, 100% { box-shadow: 0 0 0 7px rgba(224, 53, 61, 0); } }
.latinosbe-connect .cx-social .cx-plan-live { background: rgba(224, 53, 61, .22); color: #ffc2c6; }
/* 21 · Cities as tiles */
.latinosbe-connect .cx-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.latinosbe-connect .cx-top a { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 14px; background: linear-gradient(150deg, var(--c-white), var(--c-mist)); color: var(--c-ink); font-weight: 700; text-decoration: none; transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease), border-color var(--cx-std) var(--cx-ease); }
@media (hover: hover) { .latinosbe-connect .cx-top a:hover { transform: translateY(-2px); border-color: var(--c-teal); box-shadow: 0 0 0 1px rgba(23, 107, 118, .25), var(--cx-elev-2); } }
/* 22 · Phones: quick bar */
/* 23 · Invite */
.latinosbe-connect .cx-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(28px, 4vw, 44px); padding: 20px 24px; border-radius: 22px; background: linear-gradient(120deg, rgba(37, 211, 102, .14), rgba(255, 255, 255, .05) 45%); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.latinosbe-connect .cx-invite-i { position: relative; flex: 0 0 64px; height: 64px; border-radius: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.8-.2 1.3z'/%3E%3C/svg%3E") center / 38px no-repeat, linear-gradient(160deg, #5ef08f 0%, #25d366 45%, #128c4a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -6px 12px rgba(7, 94, 84, .35), 0 14px 30px -10px rgba(37, 211, 102, .75), 0 0 0 1px rgba(255, 255, 255, .12); transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.latinosbe-connect .cx-invite-i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.latinosbe-connect .cx-invite-i::after { content: ""; position: absolute; inset: -6px; border-radius: 24px; border: 2px solid rgba(37, 211, 102, .55); opacity: 0; animation: cx-wa-ping 2.8s ease-out infinite; pointer-events: none; }
@keyframes cx-wa-ping { 0% { transform: scale(.92); opacity: .8; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
@media (hover: hover) { .latinosbe-connect .cx-invite:hover .cx-invite-i { transform: rotate(-6deg) scale(1.06); } }
.latinosbe-connect .cx-invite-wa::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.8-.2 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.8-.2 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-invite-i::after { animation: none; display: none; } .latinosbe-connect .cx-invite-i { transition: none; } }
.latinosbe-connect .is-calm .cx-invite-i::after { animation: none; display: none; }
.latinosbe-connect .cx-invite-in { flex: 1 1 320px; }
.latinosbe-connect .cx-invite-t { margin: 0 0 4px; font: 800 1.15rem/1.25 var(--f-display); color: var(--c-white); }
.latinosbe-connect .cx-invite-x { margin: 0; color: rgba(255, 255, 255, .74); }
.latinosbe-connect .cx-invite-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.latinosbe-connect .cx-invite-wa { border-color: #25d366; background: linear-gradient(180deg, #2fe07a, #1fb85a); color: #06371a; }
/* 24 · Featured events arrows */
.latinosbe-connect .cx-featured-head { gap: 12px; }
.latinosbe-connect .cx-fev-nav { display: flex; gap: 8px; margin-left: auto; }
.latinosbe-connect .cx-fev-btn { width: 42px; height: 42px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-white); box-shadow: var(--cx-elev-1); cursor: pointer; position: relative; transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-std) var(--cx-ease); }
.latinosbe-connect .cx-fev-btn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-top: 2.5px solid var(--c-ink); border-right: 2.5px solid var(--c-ink); transform: translateX(-2px) rotate(45deg); }
.latinosbe-connect .cx-fev-btn--prev::before { transform: translateX(2px) rotate(-135deg); }
@media (hover: hover) { .latinosbe-connect .cx-fev-btn:hover { transform: translateY(-2px); box-shadow: var(--cx-elev-2); } }
.latinosbe-connect .cx-fev-btn:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
/* 25 · A glowing line above sections */
.latinosbe-connect .cx-featured, .latinosbe-connect .cx-tools { position: relative; }
.latinosbe-connect .cx-featured::before, .latinosbe-connect .cx-tools::before { content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 70%); height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #3ddc97, #176b76, #ebad17, transparent); background-size: 200% 100%; animation: cx-line 6s linear infinite; opacity: .8; }
@keyframes cx-line { to { background-position: -200% 0; } }
/* 26 · Empty state with a drawing (no photos of people) */
.latinosbe-connect .cx-social .cx-empty { padding-top: 92px; position: relative; text-align: center; }
.latinosbe-connect .cx-social .cx-empty::before { content: ""; position: absolute; left: 50%; top: 18px; width: 64px; height: 64px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect x='8' y='12' width='48' height='44' rx='10' fill='%23176b76' fill-opacity='.35' stroke='%238fd0d8' stroke-width='2'/%3E%3Cpath d='M20 6v12M44 6v12M8 26h48' stroke='%238fd0d8' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M32 34v14M25 41h14' stroke='%23ffd166' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* 27 · A pop when pressed */
.latinosbe-connect .is-pop { animation: cx-pop 420ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cx-pop { 40% { transform: scale(1.08); } 100% { transform: none; } }

/* Calm: system setting or «Efectos: reducidos» */
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-panel-head h1, .latinosbe-connect .cx-map-btn--me.is-hint, .latinosbe-connect .cx-cue i, .latinosbe-connect .cx-live-tag::before, .latinosbe-connect .cx-plan-live::before, .latinosbe-connect .cx-featured::before, .latinosbe-connect .cx-tools::before, .latinosbe-connect .is-pop, .latinosbe-connect .cx-welcome, .latinosbe-connect .cx-welcome-i, .latinosbe-connect .cx-map-note, .latinosbe-connect .cx-card-media img, .latinosbe-connect .cx-fev-img img, .latinosbe-connect .cx-pop-img, .latinosbe-connect .cx-radar-core img { animation: none; }
  .latinosbe-connect .cx-card a::after { display: none; }
}
.latinosbe-connect .is-calm .cx-map-btn--me.is-hint, .latinosbe-connect.is-calm .cx-panel-head h1, .latinosbe-connect .is-calm .cx-panel-head h1 { animation: none; }
@media (max-width: 960px) { .latinosbe-connect .cx-welcome { top: 60px; } .latinosbe-connect .cx-cue { display: none; } }

/* ---------- r23 · Premium members in the chat: an icon in their premium colour, and the message stands out ---------- */
.latinosbe-connect .cx-tone--premium { --tone: #c79a3d; --tone-glow: rgba(199, 154, 61, .5); --tone-pill: linear-gradient(135deg, #eac875, #c79a3d 60%, #8a641f); --tone-ink: #fff; }
.latinosbe-connect .cx-pbadge { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 2px 0 6px; vertical-align: -3px; border-radius: 50%; background: var(--tone-pill, #c79a3d); box-shadow: 0 0 0 2px var(--c-white), 0 3px 10px -2px var(--tone-glow, rgba(0, 0, 0, .3)); overflow: hidden; }
.latinosbe-connect .cx-pbadge::before { content: ""; width: 11px; height: 11px; background: var(--tone-ink, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 4l4.5 8L21 8l-2 11H5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 4l4.5 8L21 8l-2 11H5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.latinosbe-connect .cx-pbadge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); transform: translateX(-120%); animation: cx-pb-shine 3.6s ease-in-out infinite; }
@keyframes cx-pb-shine { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.latinosbe-connect .cx-msg.has-pb { border-color: var(--tone, #c79a3d); background: linear-gradient(135deg, var(--c-white), var(--c-mist)); box-shadow: inset 3px 0 0 var(--tone, #c79a3d), 0 8px 20px -14px var(--tone-glow, rgba(0, 0, 0, .3)); }
.latinosbe-connect .cx-msg.has-pb::before, .latinosbe-connect .cx-msg.has-pb .cx-msg-av { box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--tone, #c79a3d); }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-pbadge::after { animation: none; display: none; } }
.latinosbe-connect .is-calm .cx-pbadge::after { animation: none; display: none; }

/* ---------- r26 · Invite: one official WhatsApp logo, and the message as it will look ---------- */
.latinosbe-connect .cx-invite { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(32px, 5vw, 56px); padding: clamp(22px, 3vw, 34px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .12); background: radial-gradient(90% 120% at 0% 0%, rgba(37, 211, 102, .16), transparent 55%), linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.latinosbe-connect .cx-invite-in { min-width: 0; }
.latinosbe-connect .cx-invite-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.latinosbe-connect .cx-invite-i { position: relative; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / 34px no-repeat, linear-gradient(180deg, #5fe48a 0%, #25d366 55%, #1db954 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(0, 80, 40, .25), 0 12px 26px -10px rgba(37, 211, 102, .7); transform: rotate(-4deg); transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1); }
.latinosbe-connect .cx-invite-i::before, .latinosbe-connect .cx-invite-i::after { content: none; display: none; animation: none; }
@media (hover: hover) { .latinosbe-connect .cx-invite:hover .cx-invite-i { transform: rotate(0) scale(1.06); } }
.latinosbe-connect .cx-invite-t { margin: 0; font: 800 clamp(1.2rem, 1rem + .8vw, 1.55rem)/1.2 var(--f-display); letter-spacing: -.015em; color: var(--c-white); }
.latinosbe-connect .cx-invite-x { margin: 0 0 20px; max-width: 46ch; color: rgba(255, 255, 255, .76); }
.latinosbe-connect .cx-invite-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.latinosbe-connect .cx-invite-wa, .latinosbe-connect .cx-invite-copy { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 14px; font: 800 .98rem/1 var(--f-text); text-decoration: none; cursor: pointer; transition: transform 160ms var(--cx-ease), box-shadow 200ms var(--cx-ease), background-color 200ms var(--cx-ease); }
.latinosbe-connect .cx-invite-wa { border: 0; background: linear-gradient(180deg, #2fe07a, #1fb85a); color: #04361a; box-shadow: 0 10px 24px -10px rgba(37, 211, 102, .75); }
.latinosbe-connect .cx-invite-wa::before { content: none; display: none; }
.latinosbe-connect .cx-invite-copy { border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: var(--c-white); }
@media (hover: hover) { .latinosbe-connect .cx-invite-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .85); } .latinosbe-connect .cx-invite-copy:hover { background: rgba(255, 255, 255, .14); } }
.latinosbe-connect .cx-invite-wa:focus-visible, .latinosbe-connect .cx-invite-copy:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
/* The message as WhatsApp will show it (its dark theme, which matches this section) */
.latinosbe-connect .cx-wa { justify-self: end; width: min(100%, 380px); padding: 18px 16px 22px; border-radius: 24px; background-color: #0b141a; background-image: radial-gradient(rgba(255, 255, 255, .035) 1.2px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, .025) 1.2px, transparent 1.3px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .9); transform: rotate(1.5deg); }
.latinosbe-connect .cx-wa-chat { display: flex; justify-content: flex-end; }
.latinosbe-connect .cx-wa-msg { position: relative; display: grid; gap: 6px; max-width: 92%; padding: 5px 5px 8px; border-radius: 12px 0 12px 12px; background: #005c4b; color: #e9edef; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.latinosbe-connect .cx-wa-msg::before { content: ""; position: absolute; right: -8px; top: 0; border-width: 0 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #005c4b; }
.latinosbe-connect .cx-wa-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: #025144; border-left: 4px solid #25d366; }
.latinosbe-connect .cx-wa-card b { font-size: .9rem; color: #e9edef; }
.latinosbe-connect .cx-wa-card small { font-size: .75rem; color: rgba(233, 237, 239, .6); }
.latinosbe-connect .cx-wa-text { padding: 0 7px; font-size: .92rem; line-height: 1.4; }
.latinosbe-connect .cx-wa-text u { color: #53bdeb; text-decoration: none; }
.latinosbe-connect .cx-wa-ticks { justify-self: end; width: 18px; height: 11px; margin-right: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11' fill='none' stroke='%2353bdeb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3 3 6-7M7 9l1 1 8-9'/%3E%3C/svg%3E") center / contain no-repeat; }
@supports (animation-timeline: view()) {
  .latinosbe-connect .cx-wa-msg { animation: cx-wa-in linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  @keyframes cx-wa-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) { .latinosbe-connect .cx-invite { grid-template-columns: 1fr; } .latinosbe-connect .cx-wa { justify-self: stretch; width: auto; transform: none; } }
@media (prefers-reduced-motion: reduce) { .latinosbe-connect .cx-wa-msg { animation: none; } .latinosbe-connect .cx-invite-i { transition: none; } }

/* r29 · Phones: one row of icon buttons under the map search (they overlapped), names kept for screen readers */
@media (max-width: 960px) {
  .latinosbe-connect .cx-map-bar { top: 60px; left: 10px; right: 64px; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .latinosbe-connect .cx-map-bar .cx-map-btn--me, .latinosbe-connect .cx-map-bar .cx-map-btn--all, .latinosbe-connect .cx-map-bar .cx-map-btn--tilt, .latinosbe-connect .cx-map-bar .cx-map-btn--share, .latinosbe-connect .cx-map-bar .cx-map-btn--fx { flex: 0 0 auto; width: 42px; min-height: 42px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
  .latinosbe-connect .cx-map-bar .cx-map-btn::before { width: 18px; height: 18px; flex-basis: 18px; }
  .latinosbe-connect .cx-msearch { top: 10px; left: 10px; right: 64px; }
  .latinosbe-connect .cx-panel-fold { display: none; }
}

/* Mobile viewport fallback while the interactive map starts. */
@media (max-width: 960px) {
  .latinosbe-connect .cx-map-wrap { height: 74svh; min-height: 400px; }
  .latinosbe-connect .cx-tips { left: 10px; right: 10px; bottom: 12px; width: auto; padding: 14px; }
  .latinosbe-connect .cx-tips-x { font-size: .92rem; }
  .latinosbe-connect .cx-map-wrap:not(.is-live) .cx-map-canvas { visibility: hidden; }
}
@media (pointer: coarse) { .latinosbe-connect .cx-tips-k { display: none; } }

/* Dedicated mobile map. All overlays share the same measured map viewport. */
.latinosbe-connect [data-cx-mobile-nav][hidden],
.latinosbe-connect .cx-mobile-sheet[hidden],
.latinosbe-connect .cx-mobile-sheet [hidden],
.latinosbe-connect .cx-mobile-dock[hidden],
.latinosbe-connect [data-cx-mobile-assistant][hidden] { display: none; }

@media (max-width: 960px) {
  html.cx-map-shell {
    scroll-padding-top: var(--cx-shell-header, 56px);
    scroll-padding-bottom: var(--cx-shell-nav-height, 54px);
  }
  .cx-map-shell body { padding-bottom: var(--cx-shell-nav-height, 54px); }
  .cx-map-shell .site-header .header-inner { min-height: 56px; }
  .cx-map-shell .site-header .brand-logo { width: auto; height: 40px; }
  .cx-map-shell :is(.lbe-claudia, .lbe-to-top) { bottom: calc(var(--cx-shell-nav-height, 54px) + 12px) !important; }
  body.cx-map-app-in-view .lbe-claudia:not(:focus-within) { display: none; }
  .latinosbe-connect .cx-cue--community { display: flex; margin: 8px auto; }
  .cx-map-shell .latinosbe-connect .cx-cue--community { display: none; }
  .latinosbe-connect .cx-stage.is-mobile-app {
    --cx-edge-start: max(10px, env(safe-area-inset-left));
    --cx-edge-end: max(10px, env(safe-area-inset-right));
    isolation: isolate; height: var(--cx-keyboard-height, calc(100dvh - var(--cx-top, 76px)));
    min-height: 280px; overflow: hidden; overflow: clip; background: var(--c-mist);
  }
  .latinosbe-connect .is-mobile-app .cx-map-wrap { position: absolute; inset: 0; height: auto; min-height: 0; }
  .latinosbe-connect .is-mobile-app.is-map-passing :is(.maplibregl-canvas-container, .maplibregl-canvas, .maplibregl-marker) {
    pointer-events: none;
  }
  .latinosbe-connect .cx-stage.is-mobile-app .cx-panel {
    position: absolute; inset: 0 0 auto; z-index: 5; width: auto;
    margin: 0; overflow: visible; border-radius: 0; transform: none; opacity: 1;
  }
  .latinosbe-connect .is-mobile-app .cx-panel-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(126px, 32%);
    gap: 3px 8px; padding: 6px var(--cx-edge-end) 1px var(--cx-edge-start);
  }
  .latinosbe-connect .is-mobile-app .cx-eyebrow { display: none; }
  .latinosbe-connect .is-mobile-app .cx-panel h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; animation: none;
  }
  .latinosbe-connect .is-mobile-app :is(.cx-lead, .cx-search, .cx-figures, .cx-city button, .cx-legend, .cx-tips:not(.is-requested), .cx-panel-fold, .maplibregl-ctrl-fullscreen, .maplibregl-ctrl-shrink) { display: none; }
  .latinosbe-connect .cx-stage.is-mobile-app .cx-msearch { position: relative; inset: auto; min-width: 0; width: auto; transition: none; }
  .latinosbe-connect .is-mobile-app .cx-msearch input {
    min-height: 44px; font-size: 16px; padding-inline-start: 35px;
    background-position: 10px center; border-radius: 10px; box-shadow: none;
  }
  .latinosbe-connect .is-mobile-app .cx-tips.is-requested {
    z-index: 8; inset: calc(var(--cx-mobile-top, 116px) + 8px) var(--cx-edge-end) auto var(--cx-edge-start);
    max-height: calc(100% - var(--cx-mobile-top, 116px) - var(--cx-mobile-nav, 54px) - 16px);
    overflow: auto; overscroll-behavior: contain;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-toast {
    z-index: 9; bottom: calc(var(--cx-mobile-nav, 54px) + 68px);
    width: max-content; max-width: calc(100% - 24px); padding: 8px 12px;
    box-shadow: 0 3px 18px rgba(20, 36, 58, .22); pointer-events: none;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools .cx-home { margin: 0; padding: 3px; }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools .cx-home a { min-height: 44px; }
  .latinosbe-connect .is-mobile-app .cx-msearch-list { max-height: min(38dvh, 280px); overscroll-behavior: contain; }
  .latinosbe-connect .is-mobile-app .cx-city { margin: 0; min-width: 0; }
  .latinosbe-connect .is-mobile-app .cx-city label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .latinosbe-connect .is-mobile-app .cx-city select { width: 100%; font-size: 16px; padding-inline: 7px; appearance: auto; background: var(--c-white); }
  .latinosbe-connect .is-mobile-app .cx-chips {
    grid-column: 1 / -1; gap: 6px; margin-inline: -4px; padding: 3px 4px 4px;
    border: 0; background: transparent; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .latinosbe-connect .is-mobile-app .cx-chips button { min-height: 40px; }
  .latinosbe-connect .is-mobile-app .cx-chips button[aria-pressed="true"] {
    border-color: var(--c-gold); background: var(--c-gold); color: var(--c-ink);
  }
  .latinosbe-connect .is-mobile-app .cx-chips button[aria-pressed="true"] b { color: var(--c-ink); }
  .latinosbe-connect .is-mobile-app .cx-chips button:focus-visible { outline-color: var(--c-gold); }

  .latinosbe-connect .is-mobile-app .maplibregl-ctrl-top-right { top: calc(var(--cx-mobile-top, 116px) + 8px); right: var(--cx-edge-end); }
  .latinosbe-connect .is-mobile-app .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0; }
  .latinosbe-connect .is-mobile-app .maplibregl-ctrl-top-right .maplibregl-ctrl:has(.maplibregl-ctrl-fullscreen, .maplibregl-ctrl-shrink) { display: none; }
  .latinosbe-connect .is-mobile-app .maplibregl-ctrl-top-right button { width: 44px; height: 44px; }
  .latinosbe-connect .is-mobile-app[data-cx-map-space="compact"] .maplibregl-ctrl-top-right .maplibregl-ctrl-group { display: flex; }
  .latinosbe-connect .is-mobile-app[data-cx-map-space="compact"] .maplibregl-ctrl-top-right button + button {
    border-top: 0; border-left: 1px solid var(--c-line, #dce3e9);
  }
  .latinosbe-connect .is-mobile-app[data-cx-map-space="covered"] :is(.cx-mobile-dock, .maplibregl-ctrl-top-right) { visibility: hidden; }
  .latinosbe-connect .is-mobile-app .maplibregl-ctrl-bottom-right { bottom: var(--cx-mobile-bottom, 144px); right: var(--cx-edge-end); }
  .latinosbe-connect .is-mobile-app .cx-mobile-dock:not([hidden]) {
    position: absolute; z-index: 5; top: calc(var(--cx-mobile-top, 116px) + 8px); left: var(--cx-edge-start);
    display: flex; align-items: flex-start; gap: 6px;
    max-width: calc(100% - var(--cx-edge-start) - var(--cx-edge-end) - 52px);
  }
  .latinosbe-connect .is-mobile-app[data-cx-map-space="compact"] .cx-mobile-dock {
    max-width: calc(100% - var(--cx-edge-start) - var(--cx-edge-end) - 142px);
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-dock > .cx-map-btn--me {
    width: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0;
    justify-content: center; border-radius: 10px; font-size: 0;
    touch-action: manipulation;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-dock > .cx-map-btn--me::before {
    width: 20px; height: 20px; flex-basis: 20px;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools summary {
    display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden;
    font-size: 0; border-radius: 10px; list-style: none; cursor: pointer;
    color: var(--c-ink); background: var(--c-white); box-shadow: var(--e-2);
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools:not([open]) summary {
    box-shadow: inset 0 0 0 1px var(--c-gold), 0 0 0 2px rgb(235 173 23 / .3), 0 0 10px rgb(235 173 23 / .55), var(--e-2);
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools[open] summary { background: var(--c-gold-50, #fdf6e3); }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools summary::-webkit-details-marker { display: none; }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools summary::before {
    content: '•••'; font: 800 17px/1 system-ui; letter-spacing: .1em;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools .cx-map-bar {
    position: absolute; inset: 50px auto auto 0; display: grid; gap: 3px;
    width: max-content; max-width: min(245px, calc(100vw - 82px)); max-height: max(80px, calc(100dvh - var(--cx-top, 76px) - var(--cx-mobile-top, 116px) - 68px));
    padding: 4px; border-radius: 12px; background: var(--c-white); box-shadow: var(--e-3);
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-tools:not([open]) .cx-map-bar { display: none; }
  .latinosbe-connect .is-mobile-app .cx-map-btn--assistant {
    display: flex; align-items: center; text-decoration: none;
  }
  .latinosbe-connect .is-mobile-app .cx-map-bar .cx-map-btn {
    width: auto; min-height: 44px; justify-content: start; gap: 8px;
    padding: 6px 10px; border-radius: 8px; box-shadow: none; font-size: .85rem; text-align: left;
  }

  .latinosbe-connect .is-mobile-app .cx-mobile-sheet-frame {
    position: absolute; z-index: 4; inset: 0 0 var(--cx-mobile-nav, 0px);
    overflow: hidden; overflow: clip; pointer-events: none;
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-sheet {
    position: absolute; inset: auto 0 0; pointer-events: auto;
    display: flex; flex-direction: column; height: var(--cx-sheet-max, 140px);
    color: var(--c-ink); background: var(--c-white); overflow: hidden; border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 26px rgba(20, 36, 58, .17);
    transform: translateY(var(--cx-sheet-shift, 0px)); transition: transform 240ms var(--cx-ease-out, ease-out);
  }
  .latinosbe-connect .cx-mobile-sheet.is-dragging, .latinosbe-connect .is-calm .cx-mobile-sheet { transition: none; }
  .latinosbe-connect .cx-mobile-rail {
    display: flex; flex: 0 0 auto; align-items: stretch; justify-content: space-between; gap: 8px;
    min-height: 58px; padding: 0 var(--cx-edge-end) 0 var(--cx-edge-start);
    border-bottom: 1px solid var(--c-line, #dce3e9);
  }
  .latinosbe-connect :is(.cx-mobile-handle, .cx-mobile-step, .cx-mobile-back) {
    border: 0; color: var(--c-ink); font-family: var(--f-text); cursor: pointer;
  }
  .latinosbe-connect .cx-mobile-handle {
    display: grid; flex: 1; min-width: 0; align-content: start; justify-items: start;
    padding: 7px 4px 5px; text-align: start; background: transparent; touch-action: none; user-select: none;
  }
  .latinosbe-connect .cx-mobile-grip {
    width: 36px; height: 4px; margin: 0 0 5px; border-radius: 5px; background: var(--c-text-3, #64748b);
  }
  .latinosbe-connect .cx-mobile-count { font-size: .92rem; line-height: 1.2; }
  .latinosbe-connect .cx-mobile-preview {
    max-width: 100%; overflow: hidden; color: var(--c-text-2); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap;
  }
  .latinosbe-connect .cx-mobile-steps { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
  .latinosbe-connect .cx-mobile-step { width: 44px; height: 44px; border-radius: 12px; background: var(--c-teal-50, #e7f2f3); font-size: 1.35rem; }
  .latinosbe-connect .cx-mobile-step[aria-disabled="true"] { opacity: .5; cursor: default; }
  .latinosbe-connect .is-mobile-app :is(.cx-panel-body, .cx-mobile-detail):not([hidden]) {
    display: block; flex: 0 0 var(--cx-sheet-body, 0px); min-height: 0; box-sizing: border-box;
    overflow: auto; overscroll-behavior: contain auto; touch-action: pan-y pinch-zoom;
    padding: 10px var(--cx-edge-end) 12px var(--cx-edge-start);
  }
  .latinosbe-connect .is-mobile-app .cx-mobile-sheet [inert] { visibility: hidden; }
  .latinosbe-connect .cx-mobile-sort {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-weight: 700;
  }
  .latinosbe-connect .cx-mobile-sort select {
    min-height: 44px; max-width: 66%; padding-inline: 8px; border: 1px solid var(--c-line, #dce3e9);
    border-radius: 8px; background: var(--c-white); color: var(--c-ink); font-size: 16px;
  }
  .latinosbe-connect .cx-mobile-detail .cx-pop { width: auto; }
  .latinosbe-connect .cx-mobile-detail .cx-pop-img { max-height: 116px; border-radius: 10px; }
  .latinosbe-connect .cx-mobile-detail .cx-pop-body { padding-inline: 4px; }
  .latinosbe-connect .cx-mobile-back { min-height: 44px; margin-bottom: 4px; padding: 0 8px; background: transparent; font-weight: 800; }

  .latinosbe-connect .cx-mobile-nav {
    position: fixed; z-index: 45; inset: auto 0 0; display: flex; gap: 3px;
    padding: 3px max(8px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--c-ink); color: var(--c-white); box-shadow: 0 -1px 0 rgb(255 255 255 / .16);
  }
  .latinosbe-connect .cx-mobile-nav a {
    display: grid; flex: 1 1 0; min-width: 0; min-height: 48px; align-content: center; justify-items: center;
    gap: 2px; padding: 2px; color: inherit; font-size: clamp(.66rem, 2.75vw, .8rem); font-weight: 750;
    line-height: 1.15; text-align: center; text-decoration: none; touch-action: manipulation;
  }
  .latinosbe-connect .cx-mobile-nav svg { display: block; width: 20px; height: 20px; color: var(--c-gold); }
  .latinosbe-connect .cx-mobile-nav a[aria-current] { background: #153c59; border-radius: 10px; }
  .latinosbe-connect .cx-mobile-nav a[href="#cx-comunidad"] { flex-grow: 1.35; color: #ffe39a; }
  .latinosbe-connect :is(.cx-mobile-handle, .cx-mobile-step, .cx-mobile-back, .cx-mobile-nav a, .cx-mobile-dock > button, .cx-mobile-tools summary):focus-visible {
    outline: 3px solid var(--c-teal); outline-offset: -3px;
  }
  .latinosbe-connect .cx-mobile-nav a:focus-visible { outline-color: var(--c-gold); }
  .latinosbe-connect .cx-community-map { display: inline-flex; min-height: 44px; align-items: center; color: var(--c-white); text-underline-offset: 3px; }
}
@media (min-width: 961px) { .latinosbe-connect .cx-community-map { display: none; } }
.latinosbe-connect .cx-area-search { display: none; }
@media (max-width: 960px) {
  .latinosbe-connect .is-mobile-app[data-cx-map-space="open"] .cx-area-search:not([hidden]) {
    position: absolute; z-index: 5; display: block; inset: auto auto calc(var(--cx-mobile-bottom) + 8px) 50%;
    transform: translateX(-50%); min-height: 44px; max-width: calc(100% - 80px);
    padding: 7px 14px; border: 1px solid var(--c-line); border-radius: 999px;
    background: var(--c-white); color: var(--c-ink); box-shadow: var(--e-2); font: 800 .82rem/1.25 var(--f-text);
  }
  .latinosbe-connect .is-mobile-app .cx-area-search[data-search="false"] { background: var(--c-teal-50); }
  .latinosbe-connect .cx-mobile-step.is-list { width: auto; min-width: 48px; padding-inline: 9px; font-size: .83rem; font-weight: 800; }
  .latinosbe-connect .cx-area-clear { min-height: 44px; margin-block: 0 8px; }
}
@media (max-width: 960px) and (max-height: 460px) {
  .latinosbe-connect .is-mobile-app .cx-panel-head { grid-template-columns: minmax(0, 1fr) minmax(126px, 26%); align-items: center; }
  .latinosbe-connect .cx-mobile-nav a { min-height: 44px; grid-auto-flow: column; align-items: center; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .latinosbe-connect .cx-mobile-sheet { transition: none; }
}
.latinosbe-connect.is-calm .cx-rv { opacity: 1; transform: none; transition: none; }