/* ============================================================
     PALETA DE COLORES — Gyda Robles Gestoría Inmobiliaria
     ============================================================
     Colores base de marca:
       #97967a  → verde oliva grisáceo (acento secundario)
       #e4e2db  → crema/beige (fondo dominante)
       #7d7c28  → verde oliva fuerte (acento principal / CTAs)
       #1b2d54  → azul marino (texto, footer, urgency, overlays)

     Escala completa de verdes:
       #c8c7ad → oliva pálido
       #97967a → oliva grisáceo (marca)
       #7d7c28 → oliva medio (marca, CTAs)
       #5a5c1f → oliva oscuro (hover)
       #4a4b18 → oliva profundo
       #3a3b12 → oliva casi negro (extremos del gradiente USPs)

     Acento cálido (disponible, no en uso actualmente):
       #8b4a2b → terracota / tierra tostada
       #6d3820 → terracota oscuro

     Otros derivados:
       #ffffff → blanco puro
       #efeee9 → crema claro
       #d4d1c6 → beige apagado (bordes)
       #6b7189 → navy muted (texto secundario)
       #12203d → navy oscuro

     Regla de dosificación:
       - Fondos y superficies grandes: crema + verdes
       - Elementos oscuros grandes (footer, urgency): navy
       - USPs band: gradiente animado dominado por verdes con toque navy
       - Overlays sobre fotos: tinte navy suave
       - Texto principal: navy
     ============================================================ */

  :root{
    --navy:#1b2d54;
    --navy-dark:#12203d;
    --navy-muted:#6b7189;
    --olive:#7d7c28;
    --olive-dark:#5a5c1f;
    --olive-deep:#4a4b18;
    --olive-darker:#3a3b12;
    --olive-soft:#97967a;
    --olive-pale:#c8c7ad;
    --terracotta:#8b4a2b;
    --terracotta-dark:#6d3820;
    --cream:#e4e2db;
    --cream-2:#efeee9;
    --white:#FFFFFF;
    --line:#d4d1c6;

    /* Aliases retrocompatibles para no romper referencias existentes */
    --dark:var(--navy);
    --text-muted:var(--navy-muted);
    --gold:var(--olive-soft);
    --green:var(--olive-soft);

    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; font-family:var(--sans); color:var(--navy); background:var(--white); line-height:1.55;}
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
  h1,h2,h3{font-family:var(--serif); margin:0; line-height:1.15;}
  .eyebrow{
    font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
    color:var(--olive);
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 28px; border-radius:2px; font-weight:600; font-size:15px;
    text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:all .15s ease;
  }
  .btn-primary{background:var(--olive); color:var(--white);}
  .btn-primary:hover{background:var(--olive-dark);}
  .btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,.55);}
  .btn-outline:hover{border-color:var(--white);}
  .btn-dark{background:var(--navy); color:var(--white);}
  .btn-dark:hover{background:var(--navy-dark);}
  section{padding:96px 0;}
  .section-tight{padding:48px 0;}

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50; background:rgba(228,226,219,.92); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; max-width:1080px; margin:0 auto;}
  .brand{
    display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  }
  .brand-name{font-family:var(--serif); font-weight:700; font-style:italic; font-size:25px; color:var(--navy); line-height:1;}
  .brand-tag{font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.3px; color:var(--navy-muted); line-height:1;}
  .brand-tag::before{content:"· "; color:var(--olive);}
  .brand--lg .brand-name{font-size:29px;}
  .brand--lg .brand-tag{font-size:13.5px;}
  footer .brand-name{color:var(--white);}
  footer .brand-tag{color:#d4d3ab;}
  footer .brand-tag::before{color:var(--olive-pale);}
  .nav .btn{padding:11px 22px; font-size:13.5px; border-radius:30px; letter-spacing:.2px;}
  .btn-whatsapp{background:#25D366; color:#fff; gap:9px;}
  .btn-whatsapp:hover{background:#1DA851;}
  .btn img.icon{width:17px; height:17px; display:block;}

  /* ---------- Íconos de marca (redes sociales) ---------- */
  .social-icons{display:flex; gap:14px; margin-top:6px;}
  .icon-circle{
    width:46px; height:46px; min-width:46px; min-height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; box-sizing:border-box;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .icon-circle:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.28);}
  .icon-circle img{width:22px; height:22px; display:block;}
  .icon-whatsapp{background:#25D366;}
  .icon-facebook{background:#1877F2;}
  .icon-instagram{
    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .icon-linkedin{background:#0A66C2;}

  /* ---------- Hero (heredado, no se usa en index actual, pero se conserva) ---------- */
  .hero{
    position:relative; min-height:88vh; display:flex; align-items:flex-end;
    background:linear-gradient(180deg, rgba(27,45,84,.15) 0%, rgba(27,45,84,.55) 65%, rgba(27,45,84,.86) 100%),
      url('hero.jpg') center/cover no-repeat;
    color:var(--white);
  }
  .hero-inner{padding:64px 20px 56px; max-width:1080px; margin:0 auto; width:100%;}
  .hero h1{font-size:clamp(34px,6vw,58px); font-style:italic; margin-bottom:16px; max-width:14ch;}
  .hero p.lead{font-size:clamp(16px,2.2vw,19px); max-width:46ch; color:#EFEEE9; margin-bottom:28px;}
  .hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px;}
  .chips{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{
    font-size:13px; padding:7px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.4);
    color:#EFEEE9;
  }

  /* ---------- Urgency bar ---------- */
  .urgency{background:var(--navy); color:var(--cream); text-align:center; padding:12px 20px; font-size:14px;}
  .urgency b{color:var(--olive-soft);}

  /* ---------- USPs: franja con fondo dinámico + tarjetas de vidrio ----------
     Gradiente animado dominado por verdes (4 tonos oliva) con un solo paso
     de navy en el medio como acento. El navy aporta contraste sin robar
     protagonismo — verde manda en la superficie grande. */
  .usps-band{
    position:relative; padding:96px 0; overflow:hidden;
    background:linear-gradient(120deg, #3a3b12, #1b2d54, #5a5c1f, #7d7c28, #3a3b12);
    background-size:300% 300%;
    animation:gradientShift 22s ease infinite;
  }
  @keyframes gradientShift{
    0%{background-position:0% 40%;}
    50%{background-position:100% 60%;}
    100%{background-position:0% 40%;}
  }
  .usps-band .eyebrow{color:var(--olive-soft);}
  .usps-band .section-head h2{color:var(--white);}
  .usps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .usp-card{
    background:rgba(255,255,255,.05);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px; padding:30px 26px;
    box-shadow:0 16px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .usp-num{
    font-family:var(--serif); font-style:italic; font-weight:700; color:var(--olive-soft); font-size:15px; margin-bottom:14px; display:block;
  }
  .usp-card h3{font-size:20px; font-style:italic; margin-bottom:10px; color:var(--white);}
  .usp-card p{color:#E4E2DB; font-size:15px; margin:0;}
  .usps .usp-card:nth-child(1){transition-delay:0ms;}
  .usps .usp-card:nth-child(2){transition-delay:130ms;}
  .usps .usp-card:nth-child(3){transition-delay:260ms;}

  .section-head{max-width:640px; margin-bottom:40px;}
  .section-head h2{font-size:clamp(26px,4vw,36px); font-style:italic; margin-top:10px;}
  .section-head p{color:var(--navy-muted); font-size:16px; margin-top:12px;}

  .bg-cream{background:var(--cream);}

  /* ---------- Ubicacion ---------- */
  .ubic-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
  .ubic-grid img{border-radius:2px;}
  .ubic-facts{list-style:none; padding:0; margin:22px 0 0;}
  .ubic-facts li{padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; display:flex; gap:10px;}
  .ubic-facts li b{color:var(--olive); min-width:22px;}
  .ubic-maps-link{
    display:inline-block; margin-top:22px; font-size:13.5px; color:var(--olive-dark);
    text-decoration:none; border-bottom:1px solid var(--olive-soft); padding-bottom:2px;
    transition:color .15s ease, border-color .15s ease;
  }
  .ubic-maps-link:hover{color:var(--navy); border-color:var(--navy);}
  .ubic-map-img{display:block; transition:transform .3s ease, box-shadow .3s ease; cursor:pointer;}
  .ubic-map-img:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.16);}

  /* ---------- Galeria ---------- */
  .gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:360px; grid-auto-rows:220px; gap:16px; margin-bottom:60px;}
  .gallery img{width:100%; height:100%; object-fit:cover; border-radius:2px; display:block;}
  .gallery a{display:block;}
  /* Banda superior: las 2 fotos de dron, cada una a media anchura */
  .gallery a:nth-child(1),.gallery a:nth-child(2){grid-column:span 2;}
  /* Debajo: las 6 fotos originales, con la 3ra y 6ta (primera y cuarta de esa sección) altas como bookends */
  .gallery a:nth-child(3),.gallery a:nth-child(6){grid-row:span 2;}

  /* ---------- Precios ---------- */
  .price-card{
    background:rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border:1px solid rgba(255,255,255,.18);
    color:var(--white); border-radius:14px; padding:44px;
    box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
    display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;
  }
  .price-card .from{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--olive-soft); margin-bottom:8px;}
  .price-card .amount{font-family:var(--serif); font-style:italic; font-weight:700; font-size:clamp(34px,5vw,48px);}
  .price-card p{color:#EFEEE9; font-size:15px; margin-top:10px;}
  .price-side{border-left:1px solid rgba(255,255,255,.18); padding-left:36px;}
  .price-side ul{list-style:none; padding:0; margin:0 0 24px;}
  .price-side li{font-size:14.5px; padding:6px 0; color:#EFEEE9;}
  .price-side li:before{content:"— "; color:var(--olive-soft);}

  /* ---------- Legal reassurance ---------- */
  .legal-box{
    display:flex; gap:22px; align-items:flex-start; border:1px solid var(--line); border-radius:2px; padding:28px;
    background:var(--cream-2);
  }
  .legal-box .stamp{
    flex:0 0 56px; width:56px; height:56px; min-width:56px; min-height:56px;
    box-sizing:border-box; overflow:hidden; border-radius:50%; border:1.5px dashed var(--olive);
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic;
    color:var(--olive); font-size:10px; text-align:center; line-height:1.25;
  }
  .legal-box p{margin:0; color:var(--navy-muted); font-size:15px;}
  .legal-box h3{font-size:19px; font-style:italic; margin-bottom:10px;}

  /* ---------- Formulario ---------- */
  .form-wrap{
    max-width:620px; margin:0 auto; background:var(--white); border:1px solid var(--line);
    border-radius:3px; padding:40px;
  }
  .form-row{margin-bottom:20px;}
  .form-row label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--navy);}
  .form-row input, .form-row select{
    width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px; font-family:var(--sans);
    font-size:15px; background:var(--cream-2); color:var(--navy);
  }
  .form-row input:focus, .form-row select:focus{outline:2px solid var(--olive); outline-offset:1px;}
  .form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .form-submit{width:100%; padding:16px; font-size:16px; margin-top:6px;}
  .form-note{font-size:12.5px; color:var(--navy-muted); text-align:center; margin-top:14px;}
  #thanksMsg{display:none; text-align:center; padding:30px 10px;}
  #thanksMsg h3{font-style:italic; font-size:24px; margin-bottom:10px;}
  #thanksMsg p{color:var(--navy-muted);}

  /* ---------- Footer ---------- */
  footer{background:var(--olive-deep); color:#d4d3ab; padding:52px 0 90px;}
  .footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
  footer .brand{color:var(--white);}
  footer a.social{color:#e8e7c7; text-decoration:none; font-size:14.5px; display:block; margin-top:8px;}
  footer .fine{font-size:12px; color:#97967a; margin-top:36px; border-top:1px solid #5a5c1f; padding-top:20px;}

  /* ---------- Floating WhatsApp ---------- */
  .fab{
    position:fixed; bottom:22px; right:22px; z-index:60; background:#25D366; color:#fff;
    width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25); text-decoration:none; font-size:28px;
  }

  /* ---------- Captura (index.html) — formulario protagonista ----------
     Overlay del hero: tint navy semi-transparente (iluminado) — deja respirar
     los colores vivos de la foto y contrasta bien con el glass card */
  .capture-hero{
    background:linear-gradient(180deg, rgba(27,45,84,.18) 0%, rgba(27,45,84,.42) 100%), url('form-bg.jpg') center/cover no-repeat;
    padding:52px 0 60px;
  }
  .capture-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; max-width:1080px; margin:0 auto; padding:0 20px;
  }
  .capture-copy{color:var(--white); padding-top:18px;}
  .capture-copy h1{font-size:clamp(30px,4.5vw,44px); font-style:italic; color:var(--white); margin-bottom:16px; max-width:13ch;}
  .capture-copy .chips .chip{border-color:rgba(255,255,255,.4); color:#EFEEE9;}

  /* ---------- Tarjeta de captura: efecto liquid glass ---------- */
  .capture-card{
    position:relative;
    background:rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:32px;
    box-shadow:0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.18);
    color:#EFEEE9;
  }
  .capture-card h2{font-size:22px; font-style:italic; margin-bottom:6px; color:var(--white);}
  .capture-card .price-line{color:var(--olive-soft); font-weight:700; font-size:15px; margin-bottom:22px;}
  .capture-card .form-row label{color:#EFEEE9;}
  .capture-card .form-row input,
  .capture-card .form-row select{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.30);
    color:var(--white);
  }
  .capture-card .form-row input::placeholder{color:rgba(239,238,233,.55);}
  .capture-card .form-row select{color-scheme:dark;}
  .capture-card .form-row select option{color:var(--navy);}
  .capture-card .form-row input:focus,
  .capture-card .form-row select:focus{outline:2px solid var(--olive-soft); outline-offset:1px;}
  .capture-card .form-note{color:rgba(239,238,233,.68);}
  .capture-card .short-facts span{
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#EFEEE9;
    font-size:12.5px; border-radius:16px; padding:6px 12px;
  }
  .short-facts{
    display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0;
  }

  /* ---------- Pagina de informacion (post-formulario) ---------- */
  .thanks-banner{
    position:relative; text-align:center; padding:56px 20px;
    background:linear-gradient(180deg, rgba(27,45,84,.18) 0%, rgba(27,45,84,.42) 100%), url('form-bg.jpg') center 40%/cover no-repeat;
  }
  .thanks-banner p{margin:6px 0 0; color:#EFEEE9; font-size:15px;}
  .thanks-banner h2{color:var(--white); font-style:italic; font-size:24px;}

  .price-photo-band{
    padding:72px 0;
    background:linear-gradient(180deg, rgba(27,45,84,.18) 0%, rgba(27,45,84,.42) 100%), url('thanks-bg.jpg') center/cover no-repeat;
  }

  /* ---------- Panel de vidrio esmerilado (reutilizable sobre foto) ---------- */
  .glass-panel{
    max-width:620px; margin:0 auto;
    background:rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    backdrop-filter:blur(24px) saturate(150%);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:32px;
    box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  }


  /* ---------- Animaciones de scroll (reveal) ---------- */
  .reveal{
    opacity:0; transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    will-change:opacity, transform;
  }
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .gallery a.reveal:nth-child(1){transition-delay:0ms;}
  .gallery a.reveal:nth-child(2){transition-delay:90ms;}
  .gallery a.reveal:nth-child(3){transition-delay:180ms;}
  .gallery a.reveal:nth-child(4){transition-delay:270ms;}
  .gallery a.reveal:nth-child(5){transition-delay:360ms;}
  .gallery a.reveal:nth-child(6){transition-delay:450ms;}
  .gallery a.reveal:nth-child(7){transition-delay:540ms;}
  .gallery a.reveal:nth-child(8){transition-delay:630ms;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
    .usps-band{animation:none !important;}
  }


  @media (max-width:860px){
    .usps{grid-template-columns:1fr;}
    .ubic-grid{grid-template-columns:1fr;}
    .gallery{grid-template-columns:1fr; grid-template-rows:auto; grid-auto-rows:auto;}
    .gallery a:nth-child(1),.gallery a:nth-child(2),.gallery a:nth-child(3),.gallery a:nth-child(6){grid-column:1; grid-row:auto;}
    .gallery img{height:auto; aspect-ratio:4/3;}
    .price-card{grid-template-columns:1fr;}
    .price-side{border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:24px;}
    .form-grid-2{grid-template-columns:1fr;}
    .form-wrap{padding:26px;}
    section{padding:60px 0;}
    .capture-grid{grid-template-columns:1fr;}
    .capture-copy{padding-top:0;}
  }