/* ── PALETA: Nuevo Rumbo (S6.131 — proporciones definidas)
       60% Crema #ECE3D1 (fondo) · 25% Azul #2C4356 (títulos/estructura/footer)
       10% Verde oliva #5B6C46 (terreno: eyebrows, apoyos, secciones)
       5%  Amarillo arena #E3B96E (SOLO acentos/CTA, con texto azul encima:
           arena sobre crema no contrasta — el texto lleva el azul)
       + Gris neutro #3A3A3A para cuerpos de texto largos (el azul en párrafos
         largos cansa; queda para títulos).
    ── */
    :root {
      --azul:      #2C4356;      /* azul profundo (confianza): títulos/footer */
      --azul-osc:  #22374a;      /* azul hover */
      --dorado:    #E3B96E;      /* arena (acento/CTA) */
      --dorado-cl: #9a7a45;      /* arena oscura (hover) */
      --negro:     #ECE3D1;      /* FONDO off-white/crema */
      --negro-cl:  #E4D8C0;      /* crema un tono más */
      --gris-osc:  #5B6C46;      /* verde oliva (eyebrows) */
      --gris:      #5B6C46;      /* verde oliva (muted) */
      --gris-cl:   #8aa88a;      /* verde claro */
      --crema:     #ffffff;      /* superficie clara */
      --crema-osc: #f1ede3;      /* superficie apenas cálida */
      --blanco:    #2C4356;      /* AZUL (títulos/marca) — el verde queda en
                                    eyebrows/apoyos para no pisar a la escribanía */
      --texto:     #3A3A3A;      /* gris neutro oscuro (cuerpo largo) */
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Montserrat', sans-serif;
      font-weight: 300;
      background: var(--negro);
      color: var(--texto);
      overflow-x: hidden;
    }

    /* ══════════════════ NAV ══════════════════ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 6%; height: 78px;
      background: rgba(236,227,209,0.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(227,185,110,0.2);
      transition: all .4s;
    }

    .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .nav-logo-img {
      width: 54px; height: 54px;
      object-fit: contain;
      background: transparent;
      border-radius: 50%;
      padding: 4px;
    }
    .nav-brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
    .nav-brand-txt .nb1 {
      font-family: 'Montserrat', serif;
      font-size: 17px; font-weight: 600;
      color: var(--blanco); letter-spacing: .3px;
    }
    .nav-brand-txt .nb2 {
      font-size: 9px; font-weight: 400;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--dorado);
    }

    .nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
    .nav-links a {
      color: #2C4356; text-decoration: none;
      font-size: 10px; font-weight: 400;
      letter-spacing: 2px; text-transform: uppercase;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--dorado); }
    .nav-cta {
      border: 1px solid var(--dorado) !important;
      color: var(--dorado) !important;
      padding: 9px 22px !important;
      letter-spacing: 1.5px !important;
      transition: background .2s, color .2s !important;
    }
    .nav-cta:hover {
      background: var(--dorado) !important;
      color: var(--crema) !important;
    }

    .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
    .hamburger span {
      display: block; width: 22px; height: 1px;
      background: var(--dorado); transition: .3s;
    }

    /* ══════════════════ HERO ══════════════════ */
    /* Fondo crema texturado, NO negro */
    .hero {
      min-height: 100vh;
      background-color: var(--negro);
      background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23bb955c' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
      padding-top: 78px;
    }

    .hero-left {
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 80px 8% 80px 8%;
      position: relative; z-index: 2;
    }

    .hero-eyebrow {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 28px;
    }
    .hero-eyebrow-bar { width: 28px; height: 1px; background: var(--gris); }
    .hero-eyebrow span {
      font-size: 10px; font-weight: 400;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--gris-osc);
    }

    .hero h1 {
      font-family: 'Montserrat', serif;
      font-size: clamp(44px, 5.5vw, 80px);
      font-weight: 300; line-height: 1.05;
      color: var(--blanco); margin-bottom: 28px;
      letter-spacing: -.5px;
    }
    .hero h1 em {
      font-style: italic; font-weight: 300;
      color: var(--dorado);
    }

    .hero-tagline {
      font-family: 'Montserrat', serif;
      font-size: clamp(18px, 2.2vw, 28px);
      font-weight: 300; font-style: italic;
      color: #2C4356;
      line-height: 1.4;
      margin-bottom: 16px;
      letter-spacing: .3px;
    }

    .hero-desc {
      font-size: 15px; line-height: 1.85;
      color: #2C4356;
      max-width: 420px; margin-bottom: 48px;
    }

    .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

    .btn-solid {
      display: inline-flex; align-items: center; gap: 10px;
      /* S6.131 — CTA en arena (el 5% de la paleta) con texto AZUL: arena con
         texto claro no llega a AA; el azul oscuro encima sí. */
      background: var(--dorado); color: var(--azul);
      padding: 15px 34px; text-decoration: none;
      font-size: 11px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase;
      transition: background .2s;
    }
    .btn-solid:hover { background: #d6a751; }

    .btn-outline {
      display: inline-flex; align-items: center; gap: 10px;
      border: 1px solid rgba(91,108,70,0.25);
      color: #2C4356;
      padding: 14px 34px; text-decoration: none;
      font-size: 11px; font-weight: 400;
      letter-spacing: 2px; text-transform: uppercase;
      transition: border-color .2s, color .2s;
    }
    .btn-outline:hover { border-color: var(--dorado); color: var(--dorado); }

    /* Hero derecha — logo flotante sobre fondo crema */
    .hero-right {
      display: flex; align-items: center; justify-content: center;
      padding: 60px 8%;
      position: relative;
    }
    /* Círculo de fondo decorativo */
    /* 7/9/2026: el disco crema y el anillo eran del logo redondo (badge). Con el
       logo completo transparente el disco se veía como un "fondo crema distinto"
       al del sitio (dueño). Se apagan; el logo apoya directo sobre el hero. */
    .hero-right::before, .hero-right::after { display: none; }
    .hero-right::before {
      content: '';
      position: absolute;
      width: clamp(300px, 38vw, 500px);
      height: clamp(300px, 38vw, 500px);
      border-radius: 50%;
      border: 1px solid rgba(227,185,110,0.2);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .hero-right::after {
      content: '';
      position: absolute;
      width: clamp(280px, 35vw, 470px);
      height: clamp(280px, 35vw, 470px);
      border-radius: 50%;
      background: rgba(227,185,110,0.10);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      opacity: 1;
      box-shadow: 0 0 0 20px rgba(227,185,110,0.08);
    }

    .hero-logo-img {
      width: clamp(470px, 56vw, 800px);
      height: clamp(470px, 56vw, 800px);
      object-fit: contain;
      position: relative; z-index: 2;
      animation: flotar 7s ease-in-out infinite;
    }
    @keyframes flotar {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33%       { transform: translateY(-10px) rotate(.5deg); }
      66%       { transform: translateY(-6px) rotate(-.3deg); }
    }

    /* Stats sobre el hero */
    .hero-stats {
      grid-column: 1 / -1;
      display: flex;
      border-top: 1px solid rgba(227,185,110,0.2);
    }
    .hero-stat {
      flex: 1; padding: 28px 6%;
      display: flex; align-items: center; gap: 20px;
      border-right: 1px solid rgba(227,185,110,0.15);
    }
    .hero-stat:last-child { border-right: none; }
    .stat-num {
      font-family: 'Montserrat', serif;
      font-size: 44px; font-weight: 300; line-height: 1;
      color: var(--dorado);
    }
    .stat-info {}
    .stat-lbl {
      font-size: 10px; font-weight: 400; letter-spacing: 2px;
      text-transform: uppercase; color: #2C4356;
    }
    .stat-sub { font-size: 11px; color: #2C4356; margin-top: 2px; }

    /* ══════════════════ MARQUEE ══════════════════ */
    .marquee-wrap {
      background: var(--dorado);
      overflow: hidden; padding: 15px 0;
    }
    .marquee-track {
      display: flex; white-space: nowrap;
      animation: mq 24s linear infinite;
    }
    .mq-item {
      flex-shrink: 0; padding: 0 40px;
      font-size: 10px; font-weight: 500;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--blanco);
    }
    .mq-sep {
      flex-shrink: 0; width: 3px; height: 3px;
      background: rgba(0,0,0,0.25); border-radius: 50%;
      align-self: center;
    }
    @keyframes mq {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ══════════════════ SECCIONES ══════════════════ */
    .sec { padding: 110px 6%; }
    .sec-inner { max-width: 1200px; margin: 0 auto; }

    .eyebrow {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 20px;
    }
    .eyebrow-bar { width: 28px; height: 1px; background: var(--dorado); }
    .eyebrow span {
      font-size: 10px; font-weight: 400; letter-spacing: 3px;
      text-transform: uppercase; color: var(--gris-osc);
    }

    .sec-h2 {
      font-family: 'Montserrat', serif;
      font-size: clamp(30px, 3.5vw, 52px);
      font-weight: 300; line-height: 1.15; color: var(--blanco);
    }
    .sec-h2 em { font-style: italic; color: var(--dorado); }
    .sec-h2.inv { color: var(--blanco); }
    .sec-h2.inv em { color: var(--dorado); }

    /* ══════════════════ NOSOTROS ══════════════════ */
    .nosotros { background: var(--negro-cl); }

    .nos-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 90px; align-items: center;
    }

    /* Marco cuadrado con logo centrado */
    .nos-visual {
      position: relative;
    }
    .nos-logo-frame {
      aspect-ratio: 1;
      background: rgba(227,185,110,0.08);
      border-radius: 50%;        /* círculo */
      border: 3px solid rgba(227,185,110,0.3);
      box-shadow: 0 0 0 12px rgba(227,185,110,0.08),
                  0 20px 60px rgba(0,0,0,0.4);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .nos-logo-frame::before { display: none; }
    .nos-logo-frame img {
      width: 85%; height: 85%;
      object-fit: contain; position: relative; z-index: 2;
    }
    .nos-badge {
      position: absolute; bottom: 0; right: 0;
      background: var(--dorado); color: var(--crema);
      padding: 16px 20px;
      font-size: 10px; font-weight: 500;
      letter-spacing: 1px; text-transform: uppercase;
      line-height: 1.6;
    }

    .nos-text p {
      font-size: 15px; line-height: 1.9;
      color: #2C4356; margin-top: 22px;
    }

    /* Valores en la home: 4 columnas en desktop, 2 en mobile */
#valores .nos-valores { grid-template-columns:repeat(4,1fr); }
@media (max-width:820px){ #valores .nos-valores { grid-template-columns:1fr 1fr; } }

.mv-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 6px; }
@media (max-width:720px){ .mv-grid { grid-template-columns:1fr; } }
.mv-card { border:1px solid rgba(227,185,110,.25); border-left:3px solid var(--dorado);
           background:rgba(227,185,110,.05); padding:16px 18px; border-radius:6px; }
.mv-t { font-family:'Cinzel', serif; font-size:14px; font-weight:700; color:var(--dorado);
        letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.mv-d { font-size:12.5px; line-height:1.75; color:#2C4356; }

.nos-valores {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px; background: rgba(227,185,110,0.15);
      border: 1px solid rgba(227,185,110,0.15);
      margin-top: 36px;
    }
    .valor {
      background: rgba(91,108,70,0.04); padding: 22px 20px;
      border-left: 2px solid transparent;
      transition: border-color .3s, background .2s;
    }
    .valor:hover { border-left-color: var(--dorado); background: rgba(227,185,110,0.06); }
    .valor-t { font-size: 12px; font-weight: 500; color: var(--dorado); margin-bottom: 5px; }
    .valor-d { font-size: 11px; line-height: 1.6; color: #2C4356; }

    /* ══════════════════ PROYECTOS ══════════════════ */
    .proyectos { background: var(--negro); }

    .proy-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 56px;
    }
    .ver-link {
      color: var(--dorado); text-decoration: none;
      font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
      transition: color .2s, gap .2s;
    }
    .ver-link::after { content: '→'; }
    .ver-link:hover { color: var(--blanco); gap: 14px; }

    .proy-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: 2px;
    }

    .proy-card {
      position: relative; overflow: hidden;
      background: var(--negro-cl);
      cursor: pointer;
      min-height: 440px;
    }
    .proy-card:first-child { min-height: 520px; }

    /* Fondo con textura del lino en tonos oscuros */
    .proy-bg {
      position: absolute; inset: 0;
      transition: transform .6s ease;
    }
    .proy-bg-1 { background: linear-gradient(150deg, #5B6C46 0%, #5B6C46 100%); }
    .proy-bg-2 { background: linear-gradient(150deg, #5B6C46 0%, #5B6C46 100%); }
    .proy-bg-3 { background: linear-gradient(150deg, #5B6C46 0%, #5B6C46 100%); }
    .proy-card:hover .proy-bg { transform: scale(1.04); }

    .proy-overlay {
      position: absolute; inset: 0;
      /* Con la foto al 100% este velo es lo ÚNICO que sostiene el texto de
         abajo, así que sube a 0.96 y arranca más arriba: sobre una foto clara
         un degradado corto dejaba el nombre del loteo en el aire. */
      background: linear-gradient(0deg, rgba(30,26,22,0.96) 0%, rgba(30,26,22,0.86) 28%, transparent 68%);
    }

    .proy-num {
      /* Va sobre la foto, que puede ser clara o oscura: la sombra lo sostiene
         en las dos. */
      text-shadow: 0 2px 12px rgba(20,16,12,0.55);
      position: absolute; top: 24px; left: 24px;
      font-family: 'Montserrat', serif;
      font-size: 96px; font-weight: 300;
      color: rgba(236,227,209,0.45); line-height: 1;
    }

    /* Patrón crema sutil en las cards */
    .proy-pattern {
      position: absolute; inset: 0; opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0ece4' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    }

    .proy-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 28px 26px;
    }
    .proy-tag {
      display: inline-block;
      border: 1px solid rgba(91,108,70,0.2);
      color: #ECE3D1;
      padding: 4px 12px;
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 12px;
    }
    .proy-nombre {
      font-family: 'Cinzel', serif;
      font-size: 24px; font-weight: 300;
      color: #ECE3D1; margin-bottom: 5px;
    }
    .proy-ubic {
      font-size: 11px; color: rgba(236,227,209,0.88); letter-spacing: 1px;
    }

    /* ══════════════════ INSTAGRAM ══════════════════ */
    .instagram { background: var(--negro-cl); }

    .ig-top {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 44px;
    }
    .ig-handle {
      display: flex; align-items: center; gap: 16px;
      text-decoration: none; color: var(--blanco);
    }
    .ig-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: linear-gradient(45deg,#E3B96E,#e6683c,#dc2743,#cc2366,#bc1888);
      display: flex; align-items: center; justify-content: center;
    }
    .ig-icon svg { width: 22px; height: 22px; fill: white; }
    .ig-name { font-size: 14px; font-weight: 500; color: var(--blanco); }
    .ig-sub  { font-size: 11px; color: #2C4356; margin-top: 2px; }

    .ig-grid {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 3px;
    }
    .ig-post {
      aspect-ratio: 1;
      background: rgba(91,108,70,0.05);
      overflow: hidden; position: relative; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .ig-post::after {
      content: ''; position: absolute; inset: 0;
      background: rgba(30,26,22,0.18);
      opacity: 0; transition: opacity .2s;
    }
    .ig-post:hover::after { opacity: 1; }
    .ig-post-label {
      font-size: 28px; opacity: .3;
    }

    /* ══════════════════ CONTACTO ══════════════════ */
    .contacto { background: var(--negro); }

    .contacto-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: start;
    }

    .c-intro p {
      font-size: 15px; line-height: 1.85;
      color: #2C4356; margin-top: 22px; max-width: 380px;
    }

    .c-datos { display: flex; flex-direction: column; gap: 0; margin-top: 36px; }
    .c-dato {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 0; border-bottom: 1px solid var(--crema-osc);
      font-size: 14px; color: var(--gris-osc);
    }
    .c-dato:first-child { border-top: 1px solid var(--crema-osc); }
    .c-ico {
      width: 36px; height: 36px; flex-shrink: 0;
      border: 1px solid rgba(227,185,110,0.25);
      display: flex; align-items: center; justify-content: center;
    }
    .c-ico svg { width: 15px; height: 15px; fill: var(--dorado); }
    .c-dato a { color: #2C4356; text-decoration: none; transition: color .2s; }
    .c-dato a:hover { color: var(--dorado); }

    /* Form líneas minimalistas */
    .cf { display: flex; flex-direction: column; gap: 20px; }
    .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .cf-g {}
    .cf-g label {
      display: block; font-size: 9px; font-weight: 500;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--gris); margin-bottom: 10px;
    }
    .cf-g input, .cf-g select, .cf-g textarea {
      width: 100%;
      border: none; border-bottom: 1px solid rgba(91,108,70,0.18);
      padding: 10px 0; background: transparent;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px; font-weight: 300; color: var(--blanco);
      outline: none; transition: border-color .2s; border-radius: 0;
    }
    .cf-g input::placeholder, .cf-g textarea::placeholder {
      color: #2C4356;
    }
    .cf-g input:focus, .cf-g select:focus, .cf-g textarea:focus {
      border-bottom-color: var(--dorado);
    }
    .cf-g textarea { height: 90px; resize: none; }
    .cf-g select { cursor: pointer; color-scheme: dark; }
    .cf-submit {
      background: var(--dorado); color: var(--crema);
      border: none; cursor: pointer; padding: 16px;
      font-family: 'Montserrat', sans-serif;
      font-size: 11px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase;
      transition: background .2s; align-self: flex-start;
      padding-left: 40px; padding-right: 40px;
    }
    .cf-submit:hover { background: var(--dorado-cl); }

    /* ══════════════════ WA FLOAT ══════════════════ */
    /* S6.121 — botón flotante de WhatsApp OCULTO. Queda solo el asesor virtual
       (chatbot widget) que se abre automáticamente. */
    .wa-float {
      display: none !important;
    }
    .wa-float-hidden-old {
      position: fixed; bottom: 96px; right: 28px; z-index: 600;
      width: 56px; height: 56px; background: #25D366;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      box-shadow: 0 4px 18px rgba(37,211,102,0.3);
      animation: wapulse 3s ease-in-out infinite;
    }
    .wa-float svg { width: 26px; height: 26px; fill: white; }
    @keyframes wapulse {
      0%,100% { box-shadow:0 4px 18px rgba(37,211,102,.3); }
      50%      { box-shadow:0 4px 32px rgba(37,211,102,.55); }
    }

    /* ══════════════════ FOOTER ══════════════════ */
    footer {
      /* S6.131 — el footer es del azul (estructura/confianza). */
      background: var(--azul);
      padding: 64px 6% 32px;
    }
    .foot-inner { max-width: 1200px; margin: 0 auto; }
    .foot-top {
      display: grid; grid-template-columns: 1.5fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(236,227,209,0.15);
      margin-bottom: 28px;
    }
    .foot-brand {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 18px;
    }
    .foot-brand-img {
      width: 60px; height: 60px;
      object-fit: contain;
      /* S6.131 #1484 — el logo es navy: sobre el footer azul desaparecía.
         Chip crema detrás, como en papelería. */
      background: var(--negro);
      border-radius: 50%;
      padding: 5px;
      filter: none; opacity: 1;
    }
    .foot-brand-name {
      font-family: 'Montserrat', serif;
      font-size: 17px; font-weight: 400; color: var(--negro);
    }
    .foot-desc {
      font-size: 13px; line-height: 1.75;
      color: rgba(236,227,209,0.85);
    }
    .foot-col h3 {
      font-size: 9px; font-weight: 500; letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--dorado); margin-bottom: 18px;
    }
    .foot-col a {
      display: block; color: rgba(236,227,209,0.85); text-decoration: none;
      font-size: 13px; margin-bottom: 12px; transition: color .2s;
    }
    .foot-col a:hover { color: var(--dorado); }
    .foot-bottom {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 11px; color: rgba(236,227,209,0.6);
      flex-wrap: wrap; gap: 12px;
    }
    .foot-ig {
      display: flex; align-items: center; gap: 8px;
      color: rgba(236,227,209,0.85) !important; text-decoration: none;
      transition: color .2s;
    }
    .foot-ig:hover { color: var(--dorado) !important; }

    /* ══════════════════ RESPONSIVE ══════════════════ */
    @media (max-width: 1024px) {
      .hero { grid-template-columns: 1fr; }
      .hero-right { display: none; }
      .hero-stats { flex-direction: column; }
      .hero-stat { border-right: none; border-bottom: 1px solid var(--crema-osc); }
      .nos-grid { grid-template-columns: 1fr; }
      .nos-visual { max-width: 360px; }
      .proy-grid { grid-template-columns: 1fr 1fr; }
      .contacto-grid { grid-template-columns: 1fr; }
      .ig-grid { grid-template-columns: repeat(3,1fr); }
      .foot-top { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .nav-links { display: none; }
      .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 78px; left: 0; right: 0;
        /* #1445: el panel era crema plano y desentonaba sobre el hero verde.
           2026-08-31: pasa al AZUL de la marca (Confianza). Con el verde la
           letra crema quedaba en 4.4 —al filo— y encima el azul no aparecía en
           ningún lado desde el celular, que es donde más se entra. Sobre el
           azul la misma letra da 8.60 y el menú se lee de una. */
        background: #2C4356;
        padding: 22px 6%; gap: 18px;
        border-bottom: 2px solid var(--dorado);
        box-shadow: 0 14px 34px rgba(0,0,0,.28);
        z-index: 100;
      }
      .nav-links.open a { color: #ECE3D1; }   /* el crema de la paleta: 8.60 sobre el azul */
      .nav-links.open a:hover { color: var(--dorado); }
      .hamburger { display: flex; }
      .proy-grid { grid-template-columns: 1fr; }
      .ig-grid { grid-template-columns: repeat(2,1fr); }
      .proy-header { flex-direction: column; align-items: flex-start; gap: 16px; }
      .cf-row { grid-template-columns: 1fr; }
    }
  
    /* ══════════════════ HISTORIAS DE SUEÑOS ══════════════════ */
    .historias-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    .historia-card {
      background: var(--negro-cl);
      display: flex; flex-direction: column;
      overflow: hidden;
      transition: transform .3s;
    }
    .historia-card:hover { transform: translateY(-4px); }
    .historia-media {
      aspect-ratio: 9/16;
      max-height: 420px;
      overflow: hidden; position: relative;
      background: var(--negro-cl);
    }
    .historia-media video,
    .historia-media img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .historia-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #5B6C46 0%, #5B6C46 100%);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .3s;
    }
    .historia-placeholder:hover {
      background: linear-gradient(135deg, #5B6C46 0%, #5B6C46 100%);
    }
    .historia-info {
      padding: 24px 22px; flex: 1;
      border-top: 1px solid rgba(91,108,70,.06);
    }
    .historia-tag {
      display: inline-block;
      border: 1px solid rgba(91,108,70,.2);
      color: #2C4356;
      padding: 3px 10px;
      font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      margin-bottom: 12px;
    }
    .historia-texto {
      font-size: 14px; line-height: 1.7;
      color: #2C4356;
      font-style: italic;
      margin-bottom: 14px;
    }
    .historia-autor {
      font-size: 11px; letter-spacing: 1px;
      color: #2C4356;
    }

    /* Grid de proyectos — 4 en 2x2 en desktop */
    .proy-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
    }

    @media (max-width: 768px) {
      .historias-grid { grid-template-columns: 1fr; }
    }

    /* Proyectos dinámicos */
    .proy-loading { display: contents; }
    .proy-skeleton {
      min-height: 440px;
      background: linear-gradient(90deg,
        var(--negro-cl) 25%, var(--gris-osc) 37%, var(--negro-cl) 63%);
      background-size: 400px 100%;
      animation: shimmer 1.4s ease infinite;
    }
    @keyframes shimmer {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .proy-card-img {
      position: absolute; inset: 0;
      object-fit: cover; width: 100%; height: 100%;
      /* La foto se veía al 45% sobre un fondo casi negro: quedaba tan oscura
         que parecía que la tarjeta no tenía foto. Va entera. El texto de abajo
         no depende de esto: lo cubre .proy-overlay, que es un degradado oscuro
         propio. */
      opacity: 1;
      transition: transform .5s ease;
    }
    .proy-card:hover .proy-card-img { transform: scale(1.04); }
    .proy-precio {
      font-size: 13px; color: #2C4356;
      margin-top: 4px; letter-spacing: .5px;
    }

    .proy-cta {
      margin-top: 14px;
      font-size: 11px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #E3B96E;
      font-weight: 500;
      display: inline-block;
      padding-top: 8px;
      border-top: 1px solid rgba(91,108,70,0.15);
    }
    .proy-card:hover .proy-cta { color: #2C4356; }

    /* S6.71 — Autofill override (Chrome al autocompletar rompía theme dark
       con fondo amarillo claro y texto negro. Force shadow inset del bg). */
    input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
    input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #ECE3D1 inset !important;
      -webkit-text-fill-color: #5B6C46 !important;
      caret-color: #5B6C46;
      transition: background-color 5000s ease-in-out 0s;
    }

    /* ══════════════════ WORDMARK (placeholder texto — sin logo aún) ══════════════════
       Nuevo Rumbo todavía no subió su logo. Mientras tanto usamos wordmarks
       tipográficos con el color de acento. Reemplazar por <img> cuando llegue. */
    .nav-logo-text {
      font-family: 'Montserrat', serif;
      font-size: 22px; font-weight: 600;
      letter-spacing: 4px; text-transform: uppercase;
      color: var(--dorado); white-space: nowrap;
    }
    .hero-logo-text {
      font-family: 'Montserrat', serif;
      font-size: clamp(48px, 6vw, 96px);
      font-weight: 300; line-height: 1;
      letter-spacing: 8px; text-transform: uppercase;
      color: var(--dorado); text-align: center;
      position: relative; z-index: 2;
    }
    .nos-logo-text {
      font-family: 'Montserrat', serif;
      font-size: clamp(24px, 4vw, 40px);
      font-weight: 400; line-height: 1.1;
      letter-spacing: 4px; text-transform: uppercase;
      color: var(--blanco); text-align: center;
    }
    /* Logo real Nuevo Rumbo (emblema circular sobre fondo crema → badge). */
    .nav-logo-img { height: 46px; width: auto; border-radius: 0; display: block; object-fit: contain; }  /* monograma NR apaisado, sin recorte circular (7/9/2026) */
    /* Logo completo con fondo transparente (subido por el dueño el 7/9/2026): sin
       círculo ni box-shadow (sobre un PNG transparente el box-shadow dibuja un
       rectángulo); la sombra sigue la silueta con drop-shadow. Nunca más ancho que
       su columna. */
    .hero-logo-img { width: min(100%, clamp(400px, 40vw, 620px)); height: auto;
      display: block; margin: 0 auto; position: relative; z-index: 2;
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.28)); }
    /* 25/9/2026 — dueño: "en Nosotros el círculo tapa Nuevo Rumbo".
       El logo es apaisado y acá tenía border-radius: 50% aplicado A LA IMAGEN, no al marco:
       un redondeo circular sobre algo que no es cuadrado lo recorta en elipse y se come las
       puntas — en este caso la "O" final de NUEVO RUMBO y el borde derecho de
       "DESARROLLOS & PROPIEDADES". El círculo ya lo hace .nos-logo-frame, que además mete la
       imagen entera con object-fit: contain. La imagen no tiene que redondearse. */
    .nos-logo-img { width: clamp(170px, 24vw, 250px); height: auto;
      display: block; margin: 0 auto; }
    .foot-logo-img { height: 42px; width: 42px; border-radius: 50%; vertical-align: middle;
      margin-right: 10px; }
/* S6.126 — Hero con fondo verde → texto crema (contraste). El resto del sitio
   es crema con texto verde; solo el hero invierte. */
.hero-eyebrow span { color:#3D5165 !important; }
.hero-eyebrow-bar { background:rgba(249,240,225,0.5) !important; }
.hero h1 { color:#2C4356 !important; }
.hero h1 em { color:#8D641B !important; }
.hero-tagline { color:rgba(44,67,86,0.92) !important; }
.hero-desc { color:rgba(44,67,86,0.88) !important; }
.hero .btn-outline { color:#2C4356 !important; border-color:rgba(249,240,225,0.45) !important; }
.hero .btn-outline:hover { color:#8D641B !important; border-color:var(--dorado) !important; }
.hero-stats .stat-lbl, .hero-stats .stat-num { color:#2C4356 !important; }
.hero-stats .stat-sub { color:rgba(44,67,86,0.75) !important; }

/* ═══ Rebrand bronce + tipografía Cinzel/Montserrat (S6.126b) ═══ */
.hero h1, .foot-brand-name, .nav-brand-txt .nb1 { font-family:'Cinzel', serif !important; font-weight:700 !important; letter-spacing:.5px; }
.sec-h2, .hero-eyebrow span, .nav-brand-txt .nb2 { font-family:'Montserrat', sans-serif; font-weight:600; }
.valor, .valor-d, .valor-t, [class*="precio"], [class*="price"] { font-family:'Montserrat', sans-serif !important; font-weight:700; }
body { font-weight:400; }

/* ── Proyectos separados por partido ──────────────────────────────────────
   Los botones llevan a cada bloque y el bloque dice cuántos desarrollos tiene.
   El scroll suave ya está en html{scroll-behavior}, así que el salto no marea.

   Usa los nombres de variables de este sitio (--dorado, --blanco, --gris): el
   bloque venía escrito con otros nombres de un renombre que se dio de baja. */
.partido-botones { display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
                   margin:0 0 34px; }
.partido-btn { display:inline-flex; align-items:center; gap:8px;
               padding:14px 28px; border:1px solid rgba(91,108,70,0.25);
               color:#5B6C46; background:transparent; text-decoration:none;
               font-family:'Montserrat',sans-serif; font-size:11px; font-weight:400;
               letter-spacing:2px; text-transform:uppercase;
               transition:background .2s, color .2s, border-color .2s; }
.partido-btn:hover, .partido-btn:focus-visible {
               background:var(--dorado); border-color:var(--dorado);
               color:var(--crema); }
/* El contador hereda el color del botón: con un color propio quedaba ilegible
   al pasar el mouse, que es cuando el fondo cambia. */
.partido-btn-n { font-size:10px; opacity:.7; letter-spacing:.06em; }

.partido-bloque { margin-bottom:44px; }
.partido-bloque:last-child { margin-bottom:0; }
.partido-titulo { display:flex; align-items:baseline; gap:12px; margin:0 0 18px;
                  padding-bottom:10px; border-bottom:1px solid var(--crema-osc); }
.partido-titulo > span:first-child {
                  /* S6.128 — Cinzel es la tipografía de la marca y estaba sólo en el
                     hero, el nav y el footer: el título del partido y el nombre del
                     loteo se veían de otra familia que el resto del sitio. */
                  font-family:'Cinzel', serif; font-size:26px;
                  font-weight:300; line-height:1.15; color:var(--blanco); }
/* .partido-n retirado (S6.128): el dueño no quiere el número de desarrollos al
   lado del partido. Se deja la regla por si vuelve, sin nada que la use. */
.partido-n { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:400;
             letter-spacing:3px; text-transform:uppercase; color:var(--gris-osc); }

/* El ancla queda debajo del header fijo si no se compensa: el título del
   partido terminaba tapado justo después de apretar el botón. */
.partido-bloque { scroll-margin-top:92px; }

@media (max-width:640px) {
  .partido-titulo > span:first-child { font-size:18px; }
  .partido-btn { padding:10px 16px; font-size:10px; }
}

/* ═══ Videos de la home: de la rotonda de Cañuelas al loteo (8/9/2026) ═══
   El dueño: "desde la rotonda, un botón para ir volando al loteo". Un solo
   player que cambia de video, con el CTA al loteo encima.
   OJO: --negro en este sitio es CREMA (#ECE3D1) desde el rebrand, así que la
   sección es de fondo claro y los textos van en azul/verde, nunca en crema. */
.videos-intro {
  font-family: Montserrat, sans-serif; font-size: 14px; color: #5B6C46;
  margin: 0 0 28px; max-width: 560px; line-height: 1.7;
}
.vuelo-player {
  position: relative; background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 68vh;
}
.vuelo-player video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vuelo-cta {
  position: absolute; right: 16px; bottom: 60px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #E3B96E; color: #2C4356; text-decoration: none;
  padding: 13px 26px; border-radius: 3px;
  font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background .2s;
}
.vuelo-cta::after { content: '\2192'; }
.vuelo-cta:hover { background: #d6a751; }

.vuelo-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
.vuelo-donde {
  font-family: Montserrat, sans-serif; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: #5B6C46;
}
.vuelo-reset {
  background: none; border: 1px solid rgba(91,108,70,0.35); color: #2C4356;
  padding: 9px 18px; border-radius: 30px; cursor: pointer;
  font-family: Montserrat, sans-serif; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; transition: border-color .2s, background .2s;
}
.vuelo-reset:hover { border-color: #E3B96E; background: #E3B96E; }

.videos-loteos { margin-top: 34px; }
.videos-loteos-lbl {
  display: block; font-family: Montserrat, sans-serif; font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase; color: #5B6C46; margin-bottom: 14px;
}
.videos-loteos-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.videos-loteos-btns a {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(91,108,70,0.35); color: #2C4356; text-decoration: none;
  padding: 11px 22px; border-radius: 30px; background: #ffffff;
  font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.videos-loteos-btns a.con-vuelo { border-color: #E3B96E; }
.videos-loteos-btns a.con-vuelo::before { content: '\2708'; margin-right: 8px; }
.videos-loteos-btns a:hover {
  border-color: #E3B96E; color: #2C4356; background: #E3B96E;
}
@media (max-width: 560px) {
  .vuelo-player { aspect-ratio: 4 / 3; }
  .vuelo-cta { right: 10px; bottom: 54px; padding: 11px 18px; font-size: 10px; }
  .videos-loteos-btns a { padding: 10px 18px; font-size: 10px; }
}

/* La vista 360 de la rotonda y el CTA grande al terminar el vuelo (8/9/2026). */
.rotonda-360 {
  width: 100%; background: #000; border-radius: 12px; overflow: hidden;
  min-height: 320px; aspect-ratio: 16 / 9; max-height: 68vh;
}
.rotonda-360 canvas { display: block; width: 100% !important; height: 100% !important; }
.rotonda-pie {
  font-family: Montserrat, sans-serif; font-size: 12px; color: #5B6C46;
  letter-spacing: 1px; margin: 10px 0 0;
}
.vuelo-cta.vuelo-cta-fin {
  right: 50%; transform: translateX(50%); bottom: 50%;
  padding: 18px 40px; font-size: 13px;
}

/* Botones adentro de la foto 360 de la rotonda (dueño 8/9/2026). */
.rotonda-caja { position: relative; }
.rotonda-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 34px 16px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.82) 100%);
  border-radius: 0 0 12px 12px; pointer-events: none;
}
.rotonda-overlay-lbl {
  display: block; font-family: Montserrat, sans-serif; font-size: 10px;
  letter-spacing: 3px; text-transform: uppercase; color: #F0D9A8; margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.rotonda-overlay-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rotonda-overlay-btns a {
  pointer-events: auto;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.92); color: #2C4356; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 30px;
  padding: 10px 18px; cursor: pointer;
  font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.rotonda-overlay-btns a.con-vuelo { background: #E3B96E; }
.rotonda-overlay-btns a.con-vuelo::before { content: '\2708'; margin-right: 7px; }
.rotonda-overlay-btns a:hover { background: #E3B96E; color: #2C4356; }
@media (max-width: 560px) {
  .rotonda-overlay { padding: 26px 10px 10px; }
  .rotonda-overlay-btns a { padding: 9px 13px; font-size: 10px; letter-spacing: .8px; }
}

/* Flechas para girar la vista 360 y el cartel de hacia dónde se está mirando. */
.rotonda-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.9);
  color: #2C4356; font-size: 26px; line-height: 1; font-family: Montserrat, sans-serif;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: background .2s;
}
.rotonda-flecha:hover { background: #E3B96E; }
.rotonda-flecha.izq { left: 12px; }
.rotonda-flecha.der { right: 12px; }
.rotonda-mirando {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(44,67,86,0.85); color: #ECE3D1; border-radius: 30px;
  padding: 9px 18px; font-family: Montserrat, sans-serif; font-size: 12px;
  letter-spacing: 1px; white-space: nowrap;
}
@media (max-width: 560px) {
  .rotonda-flecha { width: 38px; height: 38px; font-size: 22px; }
  .rotonda-mirando { font-size: 10px; padding: 7px 12px; }
}

/* Volver a la rotonda desde el vuelo, adentro de la foto 360. */
.rotonda-volver {
  position: absolute; top: 14px; right: 14px; z-index: 6; cursor: pointer;
  background: rgba(44,67,86,0.85); color: #ECE3D1; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 30px; padding: 9px 16px;
  font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 1px;
}
.rotonda-volver:hover { background: #E3B96E; color: #2C4356; }

/* En el celular la franja de botones tapaba media foto: una sola fila que se
   desliza al costado (dueño 8/9). */
@media (max-width: 700px) {
  .rotonda-overlay { padding: 20px 8px 8px; }
  .rotonda-overlay-lbl { margin-bottom: 6px; font-size: 9px; letter-spacing: 2px; }
  .rotonda-overlay-btns {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .rotonda-overlay-btns::-webkit-scrollbar { display: none; }
  .rotonda-overlay-btns a { flex: 0 0 auto; padding: 9px 14px; font-size: 10px; letter-spacing: .6px; }
  .rotonda-360 { aspect-ratio: 3 / 4; }
}

/* ── (20/9/2026) Tarjetas de loteos más chicas: 4 por línea ────────────────────────────────────────────
   Dueño: "las tarjetas de los lotes en web podrían ser más chicas, ocupan mucho espacio… poner 4 por línea".
   Antes: 2 por línea y 440-520 px de alto cada una. Va al final para ganarle a las reglas de arriba. */
.proy-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; }
.proy-card, .proy-card:first-child { min-height: 300px; }
.proy-card .proy-nombre { font-size: 19px; }
.proy-card .proy-info { padding: 18px; }
@media (max-width: 1100px) { .proy-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .proy-grid { grid-template-columns: 1fr 1fr; }
                             .proy-card, .proy-card:first-child { min-height: 230px; }
                             .proy-card .proy-nombre { font-size: 16px; } .proy-card .proy-info { padding: 12px; } }