/* ======================================================================
   MANILKA — main.css
   Estructura y componentes reutilizados de Vi-Ha36 (probados en producción),
   retematizados con los tokens reales de marca Manilka. Breakpoints
   idénticos a Vi-Ha36 (deben coincidir con tokens.css):
     Mobile:        hasta 767px  (base, mobile-first)
     Tablet:        768px  – 1023px
     Laptop pequeña:1024px – 1279px
     Desktop amplio:1280px en adelante
   ====================================================================== */

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; }
button{ font:inherit; }

/* ---- Accesibilidad ---- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--color-ink); color:var(--color-paper-hi); padding:.7rem 1.2rem;
}
.skip-link:focus{ left:.5rem; top:.5rem; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

/* ---- Nav ---- */
.nav{
  position:sticky; top:0; z-index:20; background:rgba(250,249,245,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-line-soft);
}
.nav-inner{
  max-width:var(--container-max); margin:0 auto; padding:.7rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.logo img{ height:30px; width:auto; }
.nav-toggle{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  background:none; border:1px solid var(--color-line); cursor:pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{
  display:block; width:18px; height:1.5px; background:var(--color-ink); position:relative;
}
.nav-toggle-bars::before{ content:""; position:absolute; top:-6px; }
.nav-toggle-bars::after{ content:""; position:absolute; top:6px; }

.nav-links{
  position:absolute; left:0; right:0; top:100%; background:var(--color-paper-hi);
  border-bottom:1px solid var(--color-line-soft); display:none; flex-direction:column; padding:.5rem 1rem 1rem;
}
.nav-links.is-open{ display:flex; }
.nav-links a{
  padding:.6rem 0; text-decoration:none; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-ink-70); border-bottom:1px solid var(--color-line-soft);
}
.nav-right{ display:flex; align-items:center; gap:.7rem; }
.lang-toggle{ display:flex; border:1px solid var(--color-ink); font-family:var(--font-mono); font-size:.68rem; font-weight:700; }
.lang-toggle button{
  min-width:48px; min-height:48px; padding:.3rem .7rem; border:none; background:none; cursor:pointer; color:var(--color-ink);
  display:inline-flex; align-items:center; justify-content:center;
}
.lang-toggle button[aria-pressed="true"]{ background:var(--color-ink); color:var(--color-paper-hi); }

/* ---- Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.3rem;
  font-family:var(--font-body); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  border:1.5px solid var(--color-terracota); background:var(--color-terracota); color:var(--color-paper-hi);
  text-decoration:none; cursor:pointer; border-radius:var(--radius);
  transition:background var(--dur-med) var(--ease-doc), color var(--dur-med) var(--ease-doc), border-color var(--dur-med) var(--ease-doc);
}
.btn:hover{ background:var(--color-ink); border-color:var(--color-ink); color:var(--color-paper-hi); }
.btn-ghost{ background:transparent; color:var(--color-ink); border-color:var(--color-ink-40); }
.btn-ghost:hover{ border-color:var(--color-ink); color:var(--color-ink); background:transparent; }
.btn-on-dark{ border-color:var(--color-paper-hi); }
.btn-ghost-on-dark{ background:transparent; color:var(--color-paper-hi); border-color:rgba(250,249,245,.55); }
.btn-ghost-on-dark:hover{ border-color:var(--color-paper-hi); color:var(--color-paper-hi); }

/* ---- Reveal (visible por defecto — nunca depende de JS para mostrarse) ---- */
.reveal{ opacity:1; transform:none; }
.js-armed .reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease-doc), transform var(--dur-slow) var(--ease-doc); }
.js-armed .reveal.js-in{ opacity:1; transform:translateY(0); }

/* ---- Hero ---- */
.act-hero{ position:relative; height:92vh; min-height:560px; background:var(--color-ink); overflow:hidden; }
/* Oscurecido a ~70-75% (aprobado): el movimiento debe acompañar, no llamar
   la atención — "debe sentirse casi como una fotografía". */
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.78) contrast(1.05) brightness(.44); }
.act-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,16,12,.5) 0%, rgba(21,16,12,.86) 100%); }
.hero-copy{ position:absolute; left:0; right:0; bottom:0; padding:0 1.2rem 2.4rem; color:var(--color-paper-hi); z-index:2; max-width:760px; }
.hero-copy .eyebrow{ color:var(--color-sand); }
.act-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem,6vw,4.2rem); line-height:1.08; margin:.5rem 0; text-wrap:balance; }
.act-hero h1 em{ font-style:italic; color:var(--color-sand); }
.act-hero .lede{ font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:rgba(250,249,245,.88); margin:0 0 1.4rem; max-width:52ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; }
.hero-ctas-stack{ flex-direction:column; align-items:flex-start; gap:.6rem; }
.link-quiet-on-dark{ font-family:var(--font-body); font-size:.8rem; color:rgba(250,249,245,.82); text-decoration:none; border-bottom:1px solid rgba(250,249,245,.4); padding-bottom:.15rem; transition:border-color var(--dur-med) var(--ease-doc), color var(--dur-med) var(--ease-doc); }
.link-quiet-on-dark:hover{ color:var(--color-paper-hi); border-color:var(--color-paper-hi); }
/* Primero entender, después explorar — el segundo paso pesa un poco menos */
.hero-ctas-stack .link-quiet-on-dark:last-child{ font-size:.76rem; color:rgba(250,249,245,.6); border-color:rgba(250,249,245,.25); }
.scrolldown{ position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:2; color:var(--color-paper-hi); opacity:.6; font-size:1.1rem; }

/* ---- Secciones genéricas ---- */
section[id]{ scroll-margin-top:70px; }
main > section:not(.act-hero){ padding:var(--sp-8) 1.2rem; border-bottom:1px solid var(--color-line-soft); }
/* La página debe respirar (MANILKA_BRAND_PERSONALITY.md) — secciones que
   son puramente conceptuales/emocionales llevan aún más aire que el resto. */
main > section.act-breathe{ padding-top:calc(var(--sp-8) + var(--sp-6)); padding-bottom:calc(var(--sp-8) + var(--sp-6)); }
.eyebrow{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-70); margin:0 0 var(--sp-3); }
h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.16; margin:0 0 var(--sp-4); text-wrap:balance; }
h2 em{ font-style:italic; color:var(--color-terracota); }
section p{ color:var(--color-ink-70); max-width:62ch; margin:0 0 1rem; }
.lede-body{ font-size:1.05rem; line-height:1.7; }
.act-centered{ text-align:center; }
.act-centered p{ margin-left:auto; margin-right:auto; }
.fine-note{ font-size:.8rem; color:var(--color-ink-70); }
.credit{ font-family:var(--font-mono); font-size:.72rem; color:var(--color-ink-70); }

/* ---- Media / figuras ---- */
.act-media{ margin:0 0 var(--sp-5); }
.act-media img{ width:100%; height:280px; object-fit:cover; }
.act-media figcaption{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--color-ink-70); padding-top:.4rem; }

/* ---- Precio de entrada — una sola línea silenciosa, no una tarjeta de estadística ---- */
.price-quiet{ font-family:var(--font-display); font-size:1.15rem; color:var(--color-ink); margin:var(--sp-5) 0 0; }
.price-quiet-note{ font-family:var(--font-body); font-size:.76rem; color:var(--color-ink-40); margin-left:.3rem; }

/* ---- Disparador de video — un solo trigger discreto, no un CTA adicional ---- */
.watch-video-trigger{
  display:inline-flex; align-items:center; gap:.7rem; margin:var(--sp-6) auto 0; padding:0;
  background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:.82rem;
  color:var(--color-ink-70); letter-spacing:.02em;
}
.watch-video-play{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--color-ink-40); color:var(--color-ink); font-size:.7rem; flex:none;
  transition:border-color var(--dur-med) var(--ease-doc), background var(--dur-med) var(--ease-doc), color var(--dur-med) var(--ease-doc);
}
.watch-video-trigger:hover .watch-video-play{ background:var(--color-terracota); border-color:var(--color-terracota); color:var(--color-paper-hi); }

/* ---- Modal de video completo — fondo oscuro, sin salir del sitio ---- */
.video-modal{
  position:fixed; inset:0; z-index:60; background:rgba(15,12,9,.94); display:flex; align-items:center; justify-content:center;
  padding:3rem 1.2rem; opacity:0; transition:opacity var(--dur-slow) var(--ease-doc);
}
.video-modal.is-open{ opacity:1; }
.video-modal[hidden]{ display:none; }
.video-modal-stage{ position:relative; width:100%; max-width:1100px; max-height:82vh; aspect-ratio:16/9; box-shadow:0 40px 80px -20px rgba(0,0,0,.6); }
.video-modal-stage video{ width:100%; height:100%; display:block; }

/* Portada del modal — se ve primero, el video no se reproduce hasta hacer clic en Play */
.video-modal-cover{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  background-size:cover; background-position:center; cursor:pointer;
  transition:opacity var(--dur-slow) var(--ease-doc); opacity:1;
}
.video-modal-cover::before{ content:""; position:absolute; inset:0; background:rgba(15,12,9,.62); }
.video-modal-cover.is-hidden{ opacity:0; pointer-events:none; }
.video-modal-cover-logo{ position:relative; width:44px; height:auto; opacity:.92; }
.video-modal-cover-text{
  position:relative; font-family:var(--font-display); font-size:1.3rem; line-height:1.3; color:var(--color-paper-hi);
  text-align:center; margin:0;
}
.video-modal-play{
  position:relative; width:64px; height:64px; border-radius:50%; border:1.5px solid rgba(250,249,245,.7); background:rgba(250,249,245,.08);
  color:var(--color-paper-hi); font-size:1.1rem; cursor:pointer;
  transition:background var(--dur-med) var(--ease-doc), transform var(--dur-med) var(--ease-doc);
}
.video-modal-play:hover{ background:var(--color-terracota); border-color:var(--color-terracota); }
.video-modal-close{
  position:absolute; top:1.3rem; right:1.3rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(250,249,245,.4);
  background:transparent; color:var(--color-paper-hi); font-size:1rem; cursor:pointer;
  transition:border-color var(--dur-med) var(--ease-doc), background var(--dur-med) var(--ease-doc);
}
.video-modal-close:hover{ background:rgba(250,249,245,.12); border-color:var(--color-paper-hi); }

/* ---- Ubicación ---- */
.location-list{ display:grid; gap:.55rem; margin:var(--sp-5) 0 0; max-width:420px; }
.location-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--color-line-soft); font-size:.92rem; }
.location-list .dest{ color:var(--color-ink); }
.location-list .time{ font-family:var(--font-mono); color:var(--color-terracota); font-weight:600; white-space:nowrap; }
.location-list-open li{ padding:.85rem 0; }

/* ---- Amenidades — tres momentos grandes, no un catálogo ---- */
.moment-list{ display:grid; gap:var(--sp-4); margin-top:var(--sp-6); text-align:left; }
.moment{ margin:0; }
.moment img{ width:100%; height:320px; object-fit:cover; }
.moment figcaption{ display:flex; flex-direction:column; gap:.2rem; padding-top:.7rem; }
.moment figcaption .eyebrow{ margin:0; }
.moment figcaption span:last-child{ font-family:var(--font-display); font-size:1.1rem; color:var(--color-ink); }

/* ---- Master Plan ---- */
.pill{ font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .5rem; border:1px solid currentColor; border-radius:999px; }
.pill-available{ color:var(--color-good); }
.pill-reserved{ color:var(--color-warn); }
.pill-blocked{ color:var(--color-blocked); }
.pill-sold{ color:var(--color-sold); }
.pill-unknown{ color:var(--color-ink-40); }

.mp-toolbar{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-4) 0 var(--sp-5); padding-bottom:var(--sp-4); border-bottom:1px solid var(--color-line-soft); }
.filter-chip{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.4rem .7rem; border:1px solid var(--color-line); background:transparent; color:var(--color-ink-70);
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; min-height:48px;
  transition:border-color var(--dur-med) var(--ease-doc), color var(--dur-med) var(--ease-doc);
}
.filter-chip:hover{ border-color:var(--color-ink-40); color:var(--color-ink); }
.filter-chip[aria-pressed="true"]{ border-color:var(--color-ink); color:var(--color-ink); background:var(--color-paper-hi); }

.mp-map-wrap{ background:var(--color-paper-hi); border:1px solid var(--color-line); padding:var(--sp-4); }
.mp-map-caption{ font-family:var(--font-mono); font-size:.6rem; color:var(--color-ink-40); margin-top:var(--sp-3); letter-spacing:.03em; }
.mp-street{ position:relative; width:100%; aspect-ratio:4/3; background:var(--color-paper); }
.mp-street svg{ position:absolute; inset:0; width:100%; height:100%; }

.lot-shape{
  cursor:pointer; fill-opacity:.14; stroke-width:1; stroke-opacity:.5;
  transition:fill-opacity 300ms var(--ease-doc), stroke-opacity 300ms var(--ease-doc), stroke-width 300ms var(--ease-doc);
}
.lot-shape:focus-visible{ outline:2px solid var(--color-ink); outline-offset:1px; stroke-opacity:.9; }
.lot-shape.st-available{ fill:var(--color-good); stroke:var(--color-good); }
.lot-shape.st-reserved{ fill:var(--color-warn); stroke:var(--color-warn); stroke-dasharray:5 3; }
.lot-shape.st-blocked{ fill:var(--color-blocked); stroke:var(--color-blocked); stroke-dasharray:1 3; }
.lot-shape.st-sold{ fill:var(--color-sold); stroke:var(--color-sold); }
.lot-shape.st-unknown{ fill:var(--color-ink-40); stroke:var(--color-ink-40); }

.lot-shape:hover{ fill-opacity:.35; stroke-opacity:.9; stroke-width:2; }
.lot-shape.is-filtered-match{ fill-opacity:.4; stroke-opacity:.9; }
.lot-shape.is-dimmed{ fill-opacity:.05; stroke-opacity:.15; }
.lot-shape.is-selected{ fill-opacity:.55; stroke-opacity:1; stroke-width:2.6; }
.lot-num{ font-family:var(--font-mono); font-size:11px; fill:var(--color-ink); text-anchor:middle; dominant-baseline:middle; pointer-events:none; }

.mp-legend{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin:var(--sp-4) 0 0; padding:0; list-style:none; }
.mp-legend li{ font-family:var(--font-mono); font-size:.64rem; color:var(--color-ink-70); display:inline-flex; align-items:center; gap:.4rem; }
.mp-legend-swatch{ width:10px; height:10px; display:inline-block; border:1px solid currentColor; }
.mp-legend-swatch.st-available{ background:rgba(92,110,63,.4); color:var(--color-good); }
.mp-legend-swatch.st-reserved{ background:rgba(138,90,34,.3); color:var(--color-warn); border-style:dashed; }
.mp-legend-swatch.st-blocked{ background:rgba(107,100,89,.25); color:var(--color-blocked); border-style:dotted; }
.mp-legend-swatch.st-sold{ background:rgba(122,85,72,.5); color:var(--color-sold); }

.mp-mobile-strip{ display:none; }
.mp-panel{ border:1px solid var(--color-line); background:var(--color-paper-hi); padding:var(--sp-4); margin-top:var(--sp-4); }
.mp-panel-empty{ color:var(--color-ink-70); font-size:.86rem; text-align:center; padding:var(--sp-4) 0; }
.mp-panel-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-3); gap:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--color-line-soft); }
.mp-panel-head h3{ font-family:var(--font-display); font-weight:400; font-size:1.25rem; margin:0; }
.mp-spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-4); margin:0 0 var(--sp-3); }
.mp-spec-grid dt{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-40); margin:0; }
.mp-spec-grid dd{ margin:.15rem 0 0; font-size:.9rem; }
/* Precio del lote — mismo lenguaje visual que .price-quiet/.price-quiet-note
   (usado en la sección "Porque" para el "Desde $1,870,000 MXN"): precio
   total con jerarquía principal, precio/m² como nota secundaria discreta.
   Sin badges ni color de oferta, solo tipografía/tokens ya existentes. */
.mp-spec-grid dd.mp-price-value{ font-family:var(--font-display); font-size:1.05rem; color:var(--color-ink); }
.mp-price-persqm{ display:block; margin-top:.15rem; font-family:var(--font-body); font-size:.72rem; color:var(--color-ink-40); }
.mp-actions{ display:flex; flex-direction:column; gap:var(--sp-2); }
.vh-btn{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.75rem 1rem; min-height:48px; border:1px solid var(--color-ink); background:var(--color-ink); color:var(--color-paper-hi);
  text-align:center; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center;
  transition:opacity var(--dur-med) var(--ease-doc);
}
.vh-btn:hover{ opacity:.82; }
.vh-btn-ghost{ background:transparent; color:var(--color-ink); }
.mp-error{ font-size:.85rem; color:var(--color-warn); }

/* ---- Inventario (tabla/tarjetas) ---- */
.inv-toolbar{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4); align-items:center; }
.inv-toolbar input[type="search"]{ min-height:48px; border:1px solid var(--color-line); background:var(--color-paper-hi); padding:0 .8rem; font-family:var(--font-body); font-size:.9rem; flex:1; min-width:180px; }
.inv-summary{ font-family:var(--font-mono); font-size:.72rem; color:var(--color-ink-70); margin-bottom:var(--sp-3); }
.inv-table-wrap{ overflow-x:auto; border:1px solid var(--color-line); }
.inv-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:560px; }
.inv-table th, .inv-table td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--color-line-soft); white-space:nowrap; }
.inv-table th{ font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-40); background:var(--color-paper-hi); }
.inv-table tbody tr:hover{ background:var(--color-paper-hi); }
.inv-table .inv-link{ font-family:var(--font-mono); font-size:.72rem; text-decoration:underline; cursor:pointer; color:var(--color-terracota); background:none; border:none; padding:0; }

/* ---- Financiamiento ---- */
.financing-box{ border:1px solid var(--color-line); background:var(--color-paper-hi); padding:var(--sp-5); max-width:640px; margin:var(--sp-4) auto 0; text-align:left; }
.financing-box p{ margin:0 0 .8rem; }
.financing-conflict-note{ font-size:.8rem; color:var(--color-ink-40); border-top:1px solid var(--color-line-soft); padding-top:.8rem; margin-top:.8rem; }

/* ---- Cronograma ---- */
.timeline-rail{ display:flex; gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-3); -webkit-overflow-scrolling:touch; }
.timeline-item{ flex:none; width:200px; border:1px solid var(--color-line); background:var(--color-paper-hi); padding:var(--sp-4); }
.timeline-item.is-featured{ border-color:var(--color-terracota); border-width:2px; }
.timeline-item .t-date{ font-family:var(--font-mono); font-size:.72rem; color:var(--color-terracota); margin:0 0 .4rem; }
.timeline-item .t-label{ font-size:.88rem; margin:0; }
.timeline-item .t-note{ font-size:.72rem; color:var(--color-ink-40); margin-top:.4rem; }

/* ---- Galería ---- */
.gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.gallery-grid img{ width:100%; height:200px; object-fit:cover; }
.gallery-pending{ border:1px dashed var(--color-line); background:var(--color-paper-hi); padding:var(--sp-5); text-align:center; font-size:.85rem; color:var(--color-ink-70); margin-top:var(--sp-3); }

/* ---- Modelos ---- */
.model-pending-note{ font-size:.85rem; color:var(--color-ink-70); font-style:italic; border:1px dashed var(--color-line); padding:var(--sp-4); background:var(--color-paper-hi); }

/* ---- Clara / chat ---- */
.chatbox{ border:1px solid var(--color-line); background:var(--color-paper-hi); padding:1rem; text-align:left; max-width:460px; margin:var(--sp-5) auto; }
.chat-tag{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--color-ink-70) !important; margin-bottom:.6rem; }
.chat-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--color-good); }
.chat-transcript{ display:flex; flex-direction:column; max-height:360px; overflow-y:auto; scroll-behavior:smooth; }
.bubble{ max-width:82%; padding:.55rem .8rem; margin:0 0 .5rem; border-radius:12px; font-size:.86rem; }
.bubble-in{ background:var(--color-paper-deep); color:var(--color-ink) !important; }
.bubble-out{ background:var(--color-ink); color:var(--color-paper-hi) !important; margin-left:auto; }
.bubble-link{ text-decoration:none; cursor:pointer; display:block; }
.bubble-link:hover{ background:var(--color-terracota); }
.bubble-meta{ background:none !important; color:var(--color-ink-40) !important; font-family:var(--font-mono); font-size:.66rem; padding:0 .1rem .5rem; max-width:100%; }
.bubble-typing{ display:inline-flex; gap:3px; align-items:center; min-width:2.4rem; }
.bubble-typing span{ width:5px; height:5px; border-radius:50%; background:var(--color-paper-hi); opacity:.4; animation:manilka-typing 1.1s var(--ease-doc) infinite; }
.bubble-typing span:nth-child(2){ animation-delay:.15s; }
.bubble-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes manilka-typing{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion: reduce){ .bubble-typing span{ animation:none; opacity:.75; } }
.chat-form{ display:flex; gap:.5rem; margin-top:.7rem; }
.chat-form input{
  flex:1; min-width:0; min-height:44px; border:1px solid var(--color-line); background:var(--color-paper-hi);
  padding:0 .8rem; font-family:var(--font-body); font-size:.88rem;
}
.chat-send{
  flex:none; width:44px; min-height:44px; border:1.5px solid var(--color-ink); background:var(--color-ink);
  color:var(--color-paper-hi); font-size:1rem; line-height:1; cursor:pointer; border-radius:var(--radius);
  transition:background var(--dur-med) var(--ease-doc), border-color var(--dur-med) var(--ease-doc);
}
.chat-send:hover{ background:var(--color-terracota); border-color:var(--color-terracota); }
.chat-send:disabled{ opacity:.5; cursor:default; }

/* ---- Formulario de contacto ---- */
.lead-form{ display:flex; flex-direction:column; gap:.6rem; max-width:520px; margin:var(--sp-5) auto 0; text-align:left; }
.lead-form label{ font-size:.78rem; color:var(--color-ink-70); }
.lead-form input, .lead-form select, .lead-form textarea{
  min-height:48px; border:1px solid var(--color-line); background:var(--color-paper-hi); padding:.5rem .8rem;
  font-family:var(--font-body); font-size:.92rem; width:100%;
}
.lead-form textarea{ min-height:80px; }
.consent-label{ display:flex; align-items:flex-start; gap:.5rem; font-size:.78rem; }
.consent-label input{ min-height:auto; width:auto; margin-top:.2rem; }
.honeypot{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-status{ font-size:.85rem; min-height:1.2em; }

/* ---- Footer + WhatsApp flotante ---- */
.site-footer{ padding:2rem 1.2rem; font-size:.75rem; color:var(--color-ink-70); text-align:center; }
.footer-legal-link{ margin-top:.4rem; }
.footer-legal-link a{ color:var(--color-ink-40); text-decoration:underline; }
.footer-legal-link a:hover{ color:var(--color-ink); }
.floating-wa{
  position:fixed; right:1rem; bottom:1rem; z-index:30; display:flex; align-items:center; gap:.5rem;
  min-height:48px; background:var(--color-terracota); color:var(--color-paper-hi); padding:0 1rem; border-radius:999px;
  text-decoration:none; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  box-shadow:0 14px 30px -14px rgba(33,26,20,.55); transition:background var(--dur-med) var(--ease-doc);
}
.floating-wa:hover{ background:var(--color-ink); }
.floating-wa svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ======================================================================
   TABLET — 768px en adelante
   ====================================================================== */
@media (min-width: 768px){
  .stat-n{ font-size:1.6rem; }
  .lead-form{ max-width:600px; }
  main > section:not(.act-hero){ padding:var(--sp-8) 2rem; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ======================================================================
   LAPTOP PEQUEÑA — 1024px en adelante
   ====================================================================== */
@media (min-width: 1024px){
  .nav-toggle{ display:none; }
  .nav-links{
    position:static; display:flex; flex-direction:row; gap:1.4rem; padding:0; border:none; background:none;
  }
  .nav-links a{ border-bottom:none; padding:0; font-size:.76rem; }

  main > section:not(.act-hero){ padding:var(--sp-9) 3rem; max-width:var(--container-max); margin:0 auto; }
  .act-hero .hero-copy{ left:6%; padding-left:0; padding-bottom:0; top:50%; bottom:auto; transform:translateY(-50%); }

  .act-split{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-8); align-items:center; }
  .act-split-reverse{ grid-template-columns:1fr 1.3fr; }
  .act-split-reverse .act-media{ order:2; }
  .act-media img{ height:440px; }

  .mp-layout{ display:grid; grid-template-columns:1.8fr 1fr; gap:var(--sp-7); align-items:start; }
  .mp-panel{ margin-top:0; }

  .moment-list{ grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
  .moment img{ height:260px; }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); }

  .floating-wa{ right:2rem; bottom:2rem; padding:0 1.3rem; }
}

/* ======================================================================
   DESKTOP AMPLIO — 1280px en adelante
   ====================================================================== */
@media (min-width: 1280px){
  main > section:not(.act-hero){ padding:var(--sp-9) var(--sp-9); }
}

/* ---- Master Plan: tira móvil de apoyo, nunca reemplaza el plano ---- */
@media (max-width: 767px){
  .mp-mobile-strip{ display:flex; gap:var(--sp-3); overflow-x:auto; padding-bottom:var(--sp-3); margin-bottom:var(--sp-4); -webkit-overflow-scrolling:touch; }
  .mp-mobile-card{
    flex:none; width:104px; min-height:48px; padding:var(--sp-3); border:1px solid var(--color-line); background:var(--color-paper-hi);
    cursor:pointer; text-align:left; font-family:var(--font-body);
  }
  .mp-mobile-card .num{ font-family:var(--font-display); font-size:1.2rem; display:block; }
  .mp-mobile-card .st{ font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; margin-top:.3rem; display:block; color:var(--color-ink-70); }
  .mp-mobile-card.is-selected{ border-color:var(--color-ink); border-width:2px; }
  .mp-street{ max-width:420px; margin:0 auto; }
  .location-list{ max-width:none; }
}