/* ============================================================
Finca Mirador Los Pinos — estilos compartidos
Importa este archivo en el (App.razor / index.html /
_Host.cshtml / _Layout.cshtml):
============================================================ */
:root{
/* Verdes */
--fm-verde-900:#10281B;
--fm-footer:#0B1D13;
--fm-verde-800:#17402A;
--fm-verde-700:#1D5136;
--fm-verde-500:#2F7D52;
--fm-verde-claro:#8FD1A9;
/* Cremas / neutros */
--fm-crema:#F7F2E8;
--fm-marfil:#FFFDF7;
--fm-crema-2:#EFE8D8;
--fm-borde:#E5DDCB;
--fm-borde-2:#DCD2BC;
--fm-borde-3:#CFC4AC;
--fm-img-bg:#E9E2D2;
/* Dorado / ámbar */
--fm-dorado:#D9A227;
--fm-dorado-hover:#EFB733;
--fm-dorado-claro:#F2D68A;
--fm-ambar-bg:#FBF3E2;
--fm-ambar-borde:#E8D5A6;
--fm-ambar-texto:#B4741F;
--fm-ambar-texto-2:#7A5312;
/* Texto */
--fm-texto:#16281D;
--fm-texto-suave:#5E6F63;
/* Utilidad */
--fm-whatsapp:#25D366;
--fm-serif:'Playfair Display', Georgia, serif;
--fm-sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
--fm-maxw:1200px;
}
/* ---------- base ---------- */
.fm-app *{ box-sizing:border-box; }
.fm-app{
font-family:var(--fm-sans);
color:var(--fm-texto);
background:var(--fm-crema);
-webkit-font-smoothing:antialiased;
min-height:100vh;
overflow-x:hidden;
}
.fm-app a{ color:var(--fm-verde-700); text-decoration:none; }
.fm-app a:hover{ color:var(--fm-verde-500); }
.fm-serif{ font-family:var(--fm-serif); }
.fm-wrap{ max-width:var(--fm-maxw); margin:0 auto; padding:0 24px; }
.fm-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fm-verde-500); margin-bottom:12px; }
.fm-eyebrow.on-dark{ color:var(--fm-verde-claro); }
.fm-eyebrow.gold{ color:var(--fm-dorado); }
.fm-h2{ font-family:var(--fm-serif); font-size:clamp(30px,4.4vw,44px); line-height:1.1; font-weight:700; letter-spacing:-.018em; margin:0; color:var(--fm-verde-900); }
.fm-h2.on-dark{ color:var(--fm-marfil); }
.fm-lead{ font-size:17px; line-height:1.55; color:var(--fm-texto-suave); margin:0; }
.fm-section{ padding:clamp(56px,8vw,96px) 24px; }
:where(.fm-app) :focus-visible{ outline:2px solid var(--fm-dorado); outline-offset:2px; border-radius:3px; }
/* ---------- botones ---------- */
.fm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:10px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s, color .2s, border-color .2s, box-shadow .2s; padding:14px 22px; }
.fm-btn-gold{ background:var(--fm-dorado); color:var(--fm-verde-900); font-weight:700; }
.fm-btn-gold:hover{ background:var(--fm-dorado-hover); color:var(--fm-verde-900); }
.fm-btn-dark{ background:var(--fm-verde-800); color:var(--fm-marfil); }
.fm-btn-dark:hover{ background:var(--fm-verde-700); color:var(--fm-marfil); }
.fm-btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); color:var(--fm-marfil); backdrop-filter:blur(6px); }
.fm-btn-ghost:hover{ background:rgba(255,255,255,.2); color:var(--fm-marfil); }
/* Variante para fondos claros (crema): borde y texto verde */
.fm-btn-outline{ background:transparent; border-color:var(--fm-borde-3); color:var(--fm-verde-800); }
.fm-btn-outline:hover{ background:#FBF8F0; border-color:var(--fm-verde-800); color:var(--fm-verde-800); }
/* Botones renderizados como enlaces (NavLink/): evitar que .fm-app a pise su color */
.fm-app a.fm-btn-gold{ color:var(--fm-verde-900); }
.fm-app a.fm-btn-dark{ color:var(--fm-marfil); }
.fm-app a.fm-btn-ghost{ color:var(--fm-marfil); }
.fm-app a.fm-btn-outline{ color:var(--fm-verde-800); }
/* ============================================================
HEADER
============================================================ */
.fm-header{ position:sticky; top:0; z-index:60; background:rgba(16,40,27,.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.1); line-height:1.2; }
.fm-header-in{ max-width:var(--fm-maxw); margin:0 auto; padding:12px 20px; height:62px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap; }
.fm-brand{ display:flex; align-items:center; gap:11px; }
.fm-brand-mark{ width:38px; height:38px; border-radius:10px; background:linear-gradient(160deg,var(--fm-verde-500),var(--fm-verde-800)); display:flex; align-items:center; justify-content:center; flex:none; }
.fm-brand-name{ font-family:var(--fm-serif); font-size:17px; font-weight:700; color:var(--fm-marfil); letter-spacing:-.01em; line-height:1.2; }
.fm-brand-sub{ font-size:11px; color:rgba(247,242,232,.6); letter-spacing:.04em; line-height:1.2; }
.fm-nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fm-nav-link{ position:relative; background:none; border:none; padding:9px 14px; font-family:inherit; font-size:14px; font-weight:500; color:var(--fm-marfil); cursor:pointer; border-radius:8px; line-height:1.2; }
.fm-nav-link:hover{ background:rgba(255,255,255,.09); color:var(--fm-marfil); }
.fm-app a.fm-nav-link{ color:var(--fm-marfil); }
.fm-nav-link.active::after{ content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--fm-dorado); border-radius:2px; }
.fm-nav-cta{ display:flex; align-items:center; gap:7px; background:var(--fm-dorado); color:var(--fm-verde-900); padding:10px 16px; border-radius:8px; font-size:14px; font-weight:700; line-height:1.2; }
.fm-app a.fm-nav-cta{ color:var(--fm-verde-900); }
.fm-nav-cta:hover{ background:var(--fm-dorado-hover); color:var(--fm-verde-900); }
@media (max-width:860px){
.fm-header-in{ flex-wrap:wrap; height:auto; }
.fm-nav{ order:3; width:100%; justify-content:center; }
}
/* ============================================================
HERO (inicio)
============================================================ */
.fm-hero{ position:relative; min-height:min(82vh,720px); display:flex; align-items:flex-end; overflow:hidden; background-color:#0B1D13; background-size:cover; background-position:center 62%; }
.fm-hero::before{ content:""; position:absolute; inset:0; z-index:0; background-image:inherit; background-size:cover; background-position:center 62%; filter:saturate(1.22) contrast(1.1) brightness(.86); }
.fm-hero-overlay{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 85% at 58% 40%, rgba(233,151,58,.20), transparent 56%), linear-gradient(180deg, rgba(11,29,19,.72) 0%, rgba(11,29,19,.28) 30%, rgba(11,29,19,.58) 64%, rgba(11,29,19,.97) 100%); }
.fm-hero-in{ position:relative; z-index:2; max-width:var(--fm-maxw); margin:0 auto; padding:120px 24px 56px; width:100%; }
.fm-hero-col{ max-width:660px; display:flex; flex-direction:column; gap:20px; }
.fm-badge{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:rgba(217,162,39,.16); border:1px solid rgba(217,162,39,.45); padding:7px 14px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fm-dorado-claro); }
.fm-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--fm-dorado); }
.fm-hero-title{ font-family:var(--fm-serif); font-size:clamp(40px,7vw,74px); line-height:1.02; font-weight:700; letter-spacing:-.022em; color:#FFFDF7; margin:0; text-wrap:balance; text-shadow:0 2px 32px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.35); }
.fm-hero-sub{ font-size:clamp(16px,2vw,19px); line-height:1.55; color:rgba(255,253,247,.9); margin:0; max-width:540px; text-wrap:pretty; }
.fm-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; padding-top:4px; }
.fm-hero .fm-btn-gold{ padding:16px 26px; font-size:16px; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.fm-hero .fm-btn-ghost{ padding:16px 24px; font-size:16px; }
.fm-stars{ color:var(--fm-dorado); font-size:15px; letter-spacing:1px; }
.fm-rating{ display:flex; align-items:center; gap:8px; padding-top:12px; font-size:14px; color:rgba(255,253,247,.88); }
/* ---------- franja de features ---------- */
.fm-features{ background:var(--fm-verde-900); border-top:1px solid rgba(255,255,255,.08); }
.fm-features-grid{ max-width:var(--fm-maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:rgba(255,255,255,.1); }
.fm-feature{ background:var(--fm-verde-900); padding:26px 20px; display:flex; gap:14px; align-items:flex-start; min-width:0; }
.fm-feature svg{ flex:none; margin-top:2px; }
.fm-feature > div{ min-width:0; }
.fm-feature-t{ font-size:15px; font-weight:700; color:#FFFDF7; margin-bottom:3px; }
.fm-feature-d{ font-size:13px; line-height:1.45; color:rgba(247,242,232,.6); text-wrap:pretty; }
/* Fix: que las tarjetas de features crezcan y no se corten */
.fm-features,
.fm-features-grid,
.fm-feature{ height:auto !important; min-height:0 !important; overflow:visible !important; }
.fm-feature{ align-items:flex-start !important; padding-top:10px !important; padding-bottom:22px !important; }
.fm-feature-d{ white-space:normal !important; overflow:visible !important; }
/* ============================================================
CARDS "tres maneras"
============================================================ */
.fm-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; }
.fm-card{ background:#fff; border:1px solid var(--fm-borde); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(16,40,27,.05); transition:box-shadow .25s, border-color .25s; }
.fm-card:hover{ box-shadow:0 16px 40px rgba(16,40,27,.13); border-color:var(--fm-borde-3); }
.fm-card-media{ position:relative; flex:none; aspect-ratio:16/10; background:var(--fm-img-bg); }
.fm-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
/* Ajuste específico: la imagen de glamping se recortaba; centrarla verticalmente */
.fm-card-media img[src*="glamping1"]{ object-position:center bottom; }
.fm-card-body{ padding:24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.fm-card h3{ font-family:var(--fm-serif); font-size:25px; font-weight:600; margin:0 0 8px; color:var(--fm-verde-900); }
.fm-card p{ font-size:14px; line-height:1.55; color:var(--fm-texto-suave); margin:0; }
.fm-check{ display:flex; gap:9px; align-items:center; font-size:14px; color:var(--fm-texto); }
.fm-check svg{ flex:none; }
.fm-card-foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--fm-crema-2); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.fm-price{ font-family:var(--fm-serif); font-size:32px; font-weight:700; color:var(--fm-verde-900); line-height:1; }
.fm-price-u{ font-size:12px; color:var(--fm-texto-suave); margin-top:2px; }
/* ============================================================
GALERÍA
============================================================ */
.fm-gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.fm-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.fm-gallery-cell{ position:relative; aspect-ratio:4/3; background:var(--fm-verde-700); border-radius:14px; overflow:hidden; }
.fm-gallery-cell.tall{ aspect-ratio:4/5; grid-row:span 2; }
.fm-gallery-cell img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.fm-gallery-cell.tall img{ object-position:center 40%; }
/* ============================================================
TESTIMONIOS
============================================================ */
.fm-tst-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.fm-tst-score{ margin-left:auto; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--fm-borde); border-radius:12px; padding:14px 18px; }
.fm-tst-score .n{ font-family:var(--fm-serif); font-size:34px; font-weight:700; color:var(--fm-verde-900); line-height:1; }
.fm-tst-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.fm-tst{ background:#fff; border:1px solid var(--fm-borde); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:14px; }
.fm-tst-quote{ font-family:var(--fm-serif); font-size:18px; line-height:1.5; font-style:italic; color:var(--fm-texto); margin:0; text-wrap:pretty; }
.fm-tst-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--fm-crema-2); }
.fm-tst-name{ font-size:14px; font-weight:700; color:var(--fm-verde-900); }
.fm-tst-meta{ font-size:12px; color:var(--fm-texto-suave); margin-top:2px; }
/* Carrusel de reseñas: aparición suave + puntos de navegación */
.fm-tst-grid .fm-tst{ animation:fm-fade-in .5s ease both; }
@keyframes fm-fade-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.fm-tst-dots{ display:flex; justify-content:center; gap:9px; margin-top:26px; }
.fm-tst-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:var(--fm-borde-3); cursor:pointer; transition:background .2s, transform .2s; }
.fm-tst-dot:hover{ background:var(--fm-verde-500); }
.fm-tst-dot.active{ background:var(--fm-dorado); transform:scale(1.25); }
/* ============================================================
CÓMO LLEGAR
============================================================ */
.fm-llegar{ background:var(--fm-crema-2); }
.fm-llegar-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,5vw,56px); align-items:center; }
.fm-llegar-item{ display:flex; gap:12px; align-items:flex-start; }
.fm-llegar-item svg{ flex:none; margin-top:2px; }
.fm-llegar-item div{ font-size:15px; line-height:1.55; color:var(--fm-texto); }
.fm-llegar-media{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid var(--fm-borde-2); background:var(--fm-img-bg); }
.fm-llegar-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ============================================================
FAQ (acordeón)
============================================================ */
.fm-faq-wrap{ background:var(--fm-verde-800); }
.fm-faq{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.fm-faq-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; }
.fm-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; padding:20px 22px; text-align:left; cursor:pointer; font-family:inherit; }
.fm-faq-q:hover{ background:rgba(255,255,255,.05); }
.fm-faq-q span.q{ font-family:var(--fm-serif); font-size:18px; font-weight:600; color:var(--fm-marfil); }
.fm-faq-q span.sign{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--fm-verde-500); color:var(--fm-marfil); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; line-height:1; }
.fm-faq-a{ padding:0 22px 22px; font-size:15px; line-height:1.6; color:rgba(247,242,232,.78); max-width:640px; }
/* ============================================================
TARIFAS / COTIZADOR
============================================================ */
.fm-page-head-dark{ background:var(--fm-verde-900); padding:clamp(48px,7vw,80px) 24px 0; }
.fm-page-title{ font-family:var(--fm-serif); font-size:clamp(34px,5.5vw,58px); line-height:1.05; font-weight:700; letter-spacing:-.02em; margin:0 0 16px; color:#FFFDF7; max-width:760px; text-wrap:balance; }
.fm-cot-band{ background:linear-gradient(180deg,var(--fm-verde-900) 0,var(--fm-verde-900) 140px,var(--fm-crema) 140px,var(--fm-crema) 100%); padding:0 24px clamp(48px,7vw,80px); }
.fm-cot-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; align-items:start; }
.fm-cot{ background:#fff; border:1px solid var(--fm-borde); border-radius:18px; padding:clamp(22px,3vw,32px); box-shadow:0 18px 46px rgba(16,40,27,.14); }
.fm-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fm-texto-suave); margin-bottom:8px; }
.fm-input{ width:100%; padding:13px 14px; border:1px solid var(--fm-borde-2); border-radius:9px; font-family:inherit; font-size:15px; color:var(--fm-texto); background:#FCFAF4; }
.fm-stepper-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; background:#FCFAF4; border:1px solid var(--fm-crema-2); border-radius:11px; }
.fm-stepper-row.gold{ background:var(--fm-ambar-bg); border-color:var(--fm-ambar-borde); }
.fm-stepper-t{ font-size:15px; font-weight:600; color:var(--fm-verde-900); }
.fm-stepper-d{ font-size:12px; color:var(--fm-texto-suave); margin-top:2px; }
.fm-stepper-row.gold .fm-stepper-d{ color:var(--fm-ambar-texto-2); }
.fm-stepper{ display:flex; align-items:center; gap:6px; flex:none; }
.fm-step-btn{ width:34px; height:34px; border-radius:8px; border:1px solid var(--fm-borde-2); background:#fff; color:var(--fm-verde-800); font-size:19px; font-weight:600; cursor:pointer; line-height:1; font-family:inherit; }
.fm-step-btn:hover{ background:#EDF3EE; }
.fm-stepper-row.gold .fm-step-btn{ border-color:#E0C98C; color:var(--fm-ambar-texto); }
.fm-stepper-row.gold .fm-step-btn:hover{ background:var(--fm-ambar-bg); }
.fm-step-val{ min-width:34px; text-align:center; font-size:17px; font-weight:700; color:var(--fm-verde-900); }
.fm-aviso{ display:flex; gap:11px; align-items:flex-start; margin-top:18px; padding:14px 16px; background:var(--fm-ambar-bg); border:1px solid var(--fm-ambar-borde); border-radius:11px; font-size:13px; line-height:1.5; color:var(--fm-ambar-texto-2); }
.fm-total{ margin-top:22px; padding:20px; background:var(--fm-verde-800); border-radius:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fm-total .k{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(247,242,232,.55); margin-bottom:6px; }
.fm-total .por-noche{ font-family:var(--fm-serif); font-size:28px; font-weight:700; color:#FFFDF7; line-height:1; }
.fm-total .grande{ font-family:var(--fm-serif); font-size:42px; font-weight:700; color:var(--fm-dorado); line-height:1; }
.fm-cot-cta{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; width:100%; padding:17px 24px; border-radius:11px; font-size:16px; }
.fm-cot-note{ text-align:center; font-size:12px; color:var(--fm-texto-suave); margin-top:12px; line-height:1.5; }
.fm-panel{ background:#fff; border:1px solid var(--fm-borde); border-radius:16px; padding:26px; }
.fm-panel h3{ font-family:var(--fm-serif); font-size:22px; font-weight:600; margin:0 0 18px; color:var(--fm-verde-900); }
.fm-tar-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--fm-crema-2); }
.fm-tar-row:last-child{ border-bottom:none; }
.fm-tar-name{ font-size:15px; font-weight:600; color:var(--fm-verde-900); }
.fm-tar-sub{ font-size:12px; color:var(--fm-texto-suave); margin-top:2px; }
.fm-tar-price{ font-family:var(--fm-serif); font-size:24px; font-weight:700; color:var(--fm-verde-900); }
.fm-note-amber{ margin-top:6px; padding:13px 15px; background:var(--fm-ambar-bg); border:1px solid var(--fm-ambar-borde); border-radius:10px; font-size:13px; line-height:1.5; color:var(--fm-ambar-texto-2); }
.fm-info-list{ display:flex; flex-direction:column; gap:14px; }
.fm-info-list .row{ display:flex; flex-wrap:nowrap; gap:11px; align-items:flex-start; margin:0; --bs-gutter-x:0; --bs-gutter-y:0; }
.fm-info-list .row > *{ width:auto; max-width:none; flex:0 1 auto; padding:0; margin:0; }
.fm-info-list .row svg{ flex:0 0 auto; }
/* reglas + qué llevar */
.fm-reglas-wrap{ background:var(--fm-verde-800); }
.fm-reglas-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,48px); }
.fm-regla{ display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.55; color:rgba(247,242,232,.82); }
.fm-regla .dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--fm-dorado); margin-top:8px; }
.fm-llevar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.fm-llevar{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:13px 15px; font-size:14px; color:#FFFDF7; }
.fm-h3-dark{ font-family:var(--fm-serif); font-size:clamp(26px,3.5vw,36px); line-height:1.12; font-weight:700; letter-spacing:-.015em; margin:0 0 22px; color:#FFFDF7; }
/* ============================================================
MAPA
============================================================ */
.fm-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.fm-chip{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fm-borde-2); color:var(--fm-texto); padding:10px 17px; border-radius:999px; font-family:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.fm-chip:hover{ border-color:var(--fm-verde-800); background:#FBF8F0; }
.fm-chip .dot{ width:8px; height:8px; border-radius:50%; background:#C6BCA4; }
.fm-chip .n{ opacity:.5; }
.fm-chip.active{ background:var(--fm-verde-800); border-color:var(--fm-verde-800); color:var(--fm-marfil); font-weight:600; }
.fm-chip.active .dot{ background:var(--fm-dorado); }
.fm-chip.active .n{ opacity:.6; font-weight:500; }
.fm-map-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; align-items:start; }
.fm-map-shell{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--fm-borde-2); box-shadow:0 12px 34px rgba(16,40,27,.1); background:var(--fm-crema-2); }
.fm-map{ width:100%; height:clamp(380px,64vh,660px); }
.fm-map-foot{ display:flex; align-items:center; gap:9px; padding:13px 16px; background:#fff; border-top:1px solid var(--fm-crema-2); font-size:13px; color:var(--fm-texto-suave); }
.fm-map-list{ display:flex; flex-direction:column; gap:12px; max-height:clamp(380px,64vh,660px); overflow-y:auto; padding-right:4px; }
.fm-place{ flex:0 0 auto; background:#fff; border:1px solid var(--fm-borde); border-radius:14px; overflow:hidden; }
.fm-place-btn{ width:100%; display:block; text-align:left; background:none; border:none; padding:18px 20px 0; cursor:pointer; font-family:inherit; }
.fm-place-btn:hover{ background:#FBF8F0; }
.fm-place-cat{ display:flex; align-items:center; gap:9px; margin-bottom:7px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fm-texto-suave); }
.fm-place-cat .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.fm-place-name{ font-family:var(--fm-serif); font-size:20px; font-weight:600; color:var(--fm-verde-900); margin-bottom:6px; }
.fm-place-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--fm-texto-suave); margin-bottom:9px; }
.fm-place p{ font-size:14px; line-height:1.55; color:var(--fm-texto-suave); margin:0 0 16px; text-wrap:pretty; }
.fm-place-ruta{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 20px 18px; background:#EDF3EE; color:var(--fm-verde-800); padding:11px 16px; border-radius:9px; font-size:14px; font-weight:600; }
.fm-place-ruta:hover{ background:var(--fm-verde-800); color:var(--fm-marfil); }
/* ============================================================
CTA oscuro reutilizable
============================================================ */
.fm-cta-dark{ background:var(--fm-verde-800); }
.fm-cta-center{ max-width:820px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
/* ============================================================
FOOTER + botón flotante
============================================================ */
.fm-footer{ background:var(--fm-footer); padding:clamp(40px,6vw,64px) 24px 28px; }
.fm-footer-grid{ max-width:var(--fm-maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1); }
.fm-footer h4{ font-family:var(--fm-serif); font-size:19px; font-weight:700; color:#FFFDF7; margin:0 0 10px; }
.fm-footer p{ font-size:14px; line-height:1.6; color:rgba(247,242,232,.6); margin:0; max-width:280px; }
.fm-footer-label{ font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(247,242,232,.45); margin-bottom:14px; }
.fm-footer-col a, .fm-footer-col span, .fm-footer-col button{ display:block; font-family:inherit; font-size:14px; color:rgba(247,242,232,.8); background:none; border:none; padding:0; text-align:left; cursor:pointer; margin-bottom:9px; }
.fm-footer-col a:hover, .fm-footer-col button:hover{ color:var(--fm-dorado); }
.fm-footer-bottom{ max-width:var(--fm-maxw); margin:0 auto; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:rgba(247,242,232,.4); }
.fm-fab{ position:fixed; right:18px; bottom:18px; z-index:70; display:flex; align-items:center; gap:10px; background:var(--fm-whatsapp); color:var(--fm-footer); padding:14px 20px; border-radius:999px; font-size:15px; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.fm-fab:hover{ background:#1FBE5A; color:var(--fm-footer); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (prefers-reduced-motion:reduce){
.fm-app *{ transition:none !important; animation:none !important; }
}
@media (max-width:860px){
.fm-header-in{ flex-wrap:wrap; height:auto; }
.fm-nav{ order:3; width:100%; justify-content:center; }
}
@media (max-width:640px){
.fm-tst-score{ margin-left:0; }
.fm-fab span{ display:none; }
.fm-features-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:420px){
.fm-features-grid{ grid-template-columns:1fr; }
}