/* ============================================================
   home.css  ·  VyoCorpsys/css/home.css
   Home Boulevard (Propuesta C) — vidrio cálido + ciudad-grabado.
   El color madera NO se toca. Va enlazado SOLO en Default.aspx.
   ============================================================ */
.vyo-home{ --crema:#f4ede2; --naranjo:#ff8c00; --madera:#5a3d24; --madera-2:#3a2614; --tinta:#26201a; color:var(--tinta); }
.vyo-home .serif{ font-family:"Playfair Display",Georgia,serif; }

/* ===== HERO: madera + vidrio + sello de agua ===== */
.vyo-home .hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,#5a3d24,#3a2614 120%); border-radius:10px; }
.vyo-home .hero .sello{ position:absolute; inset:0; z-index:1; opacity:.14; background-repeat:no-repeat; background-position:center bottom; background-size:cover; }
.vyo-home .hero::before{ content:''; position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,180,90,.28), transparent 42%),
    radial-gradient(circle at 80% 75%, rgba(90,61,36,.5), transparent 45%),
    linear-gradient(180deg, rgba(58,38,20,.15), rgba(58,38,20,.55));
  backdrop-filter:blur(.5px); }
.vyo-home .hero-wrap{ position:relative; z-index:3; display:grid; grid-template-columns:1.3fr .9fr; min-height:490px; }
.vyo-home .hero-left{ padding:56px clamp(24px,5vw,72px); display:flex; flex-direction:column; justify-content:center; color:#f6efe4; }
.vyo-home .eyebrow{ font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:#ffcf8f; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.vyo-home .eyebrow::before{ content:''; width:34px; height:1px; background:#ffcf8f; }
.vyo-home .hero h1{ font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:800; line-height:1.1; margin:0 0 20px; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.vyo-home .hero h1 em{ font-style:italic; color:#ffcf8f; }
.vyo-home .hero .lead{ font-size:1.08rem; color:#e6dccd; line-height:1.6; max-width:520px; margin:0 0 30px; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.vyo-home .btn-paseo{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background:var(--naranjo); color:#3a2614; font-weight:700; border:none; padding:15px 30px; border-radius:3px; font-size:1.05rem; cursor:pointer; text-decoration:none; transition:.2s; box-shadow:0 8px 22px rgba(0,0,0,.3); }
.vyo-home .btn-paseo:hover{ background:#ffcf8f; transform:translateX(3px); color:#3a2614; }
.vyo-home .hero-right{ position:relative; display:flex; align-items:center; justify-content:center; padding:30px; }
.vyo-home .cartel{ text-align:center; background:rgba(244,237,226,.1); border:1px solid rgba(255,207,143,.35); backdrop-filter:blur(6px); border-radius:8px; padding:34px 30px; }
.vyo-home .cartel .marquee{ font-family:"Playfair Display",serif; font-style:italic; font-size:1.45rem; color:#f6efe4; line-height:1.5; }
.vyo-home .cartel .marquee span{ color:#ffcf8f; }
.vyo-home .cartel .hr{ width:60px; height:2px; background:#ffcf8f; margin:16px auto; }
.vyo-home .cartel small{ letter-spacing:.25em; text-transform:uppercase; font-size:.66rem; color:#d9cbb6; }

/* Barra Jazz */
.vyo-home .jazz-bar{ position:relative; z-index:3; background:rgba(0,0,0,.28); border-top:1px solid rgba(255,207,143,.25); padding:12px clamp(24px,5vw,72px); display:flex; align-items:center; gap:14px; color:#f6efe4; border-radius:0 0 10px 10px; }
.vyo-home .jazz-bar .play{ width:38px; height:38px; border-radius:50%; background:var(--naranjo); border:none; color:#3a2614; cursor:pointer; flex:none; font-weight:700; }
.vyo-home .jazz-bar .eq{ display:flex; align-items:flex-end; gap:3px; height:20px; }
.vyo-home .jazz-bar .eq span{ width:3px; background:#ffcf8f; border-radius:2px; animation:vyoEq 1s infinite ease-in-out; }
.vyo-home .jazz-bar .eq span:nth-child(2){animation-delay:.15s}.vyo-home .jazz-bar .eq span:nth-child(3){animation-delay:.35s}.vyo-home .jazz-bar .eq span:nth-child(4){animation-delay:.25s}.vyo-home .jazz-bar .eq span:nth-child(5){animation-delay:.05s}
@keyframes vyoEq{0%,100%{height:5px}50%{height:20px}}
.vyo-home .jazz-bar .txt small{ display:block; font-size:.64rem; color:#d9cbb6; letter-spacing:.05em; text-transform:uppercase; }
.vyo-home .jazz-bar .txt b{ font-family:"Playfair Display",serif; font-style:italic; }

/* ===== SECTORES vitrina ===== */
.vyo-home .sectores{ padding:48px 0 20px; }
.vyo-home .sec-title h2{ font-family:"Playfair Display",serif; font-size:2rem; font-weight:800; margin:0; color:var(--madera); text-align:center; }
.vyo-home .sec-sub{ text-align:center; color:#8a7d6b; margin-bottom:34px; font-style:italic; }
.vyo-home .grid-sec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2px; border:1px solid #e3d8c6; border-radius:6px; overflow:hidden; }
.vyo-home .vitrina{ position:relative; min-height:280px; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; transition:.3s; overflow:hidden; text-decoration:none; }
.vyo-home .vitrina::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55)); transition:.3s; }
.vyo-home .vitrina:hover::after{ background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.66)); }
.vyo-home .vitrina > *{ position:relative; z-index:2; color:#fff; }
.vyo-home .vitrina .num{ position:absolute; top:20px; left:24px; font-family:"Playfair Display",serif; font-size:1rem; color:rgba(255,255,255,.6); z-index:2; }
.vyo-home .vitrina .cat{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:#ffcf8f; font-weight:700; margin-bottom:8px; }
.vyo-home .vitrina h3{ font-family:"Playfair Display",serif; font-size:1.5rem; font-weight:700; margin:0 0 8px; }
.vyo-home .vitrina p{ font-size:.85rem; color:rgba(255,255,255,.82); margin:0 0 14px; }
.vyo-home .vitrina .go{ font-size:.8rem; font-weight:600; color:#ffcf8f; display:inline-flex; align-items:center; gap:6px; }
/* atmósferas por defecto (si la BD no trae una) */
.vyo-home .v-cultural{ background:linear-gradient(160deg,#6b4a2a,#3a2413); }
.vyo-home .v-gastro{ background:linear-gradient(160deg,#8a3a2a,#3d1a14); }
.vyo-home .v-tecno{ background:linear-gradient(160deg,#26405f,#0e1c30); }
.vyo-home .v-humano{ background:linear-gradient(160deg,#3a5a44,#17281d); }
e fix fondo · CSS
/* ============================================================
   FIX FONDO — pega esto AL FINAL de home.css
   Da el fondo crema cafesoso y elimina los márgenes blancos.
   ============================================================ */
/* El Home ocupa todo el ancho del contenido, con fondo crema, sin márgenes blancos */
#main-content:has(.vyo-home) {
    padding: 0 !important;
    background: #efe6d6 !important;
}

/* Por si el navegador no soporta :has(), forzamos también desde el contenedor */
.vyo-home {
    background: #efe6d6; /* crema cafesoso de base */
    margin: 0;
    padding: 24px clamp(16px,3vw,40px) 40px; /* aire interno, no blanco alrededor */
    min-height: 100%;
}

    /* Que el hero y las secciones respiren dentro del crema */
    .vyo-home .hero {
        margin-bottom: 8px;
    }

/* ============================================================
   FIX FONDO v2 — pega al final de home.css
   Elimina el marco blanco alrededor del Home (sin :has()).
   ============================================================ */

/* El contenedor de contenido de la Master: sin padding ni blanco */
#main-content {
    padding: 0 !important;
    background: #efe6d6 !important;
}

/* El wrapper también en crema (por si el blanco venía de ahí) */
.wrapper {
    background: #efe6d6 !important;
}

/* El Home ocupa todo, con su aire interno propio */
.vyo-home {
    background: #efe6d6;
    margin: 0;
    padding: 24px clamp(16px,3vw,40px) 40px;
    min-height: 100%;
}
/* ============================================================
   RESPONSIVE HOME — pega al final de home.css
   Móvil: el hero se apila, el cartel y jazz se ajustan.
   ============================================================ */

/* ---- Tablet (≤ 992px) ---- */
@media (max-width:992px) {
    .vyo-home .hero-wrap {
        grid-template-columns: 1fr;
    }
    /* hero en 1 columna */
    .vyo-home .hero-right {
        border-left: none;
        padding-top: 0;
    }

    .vyo-home .hero-left {
        padding-bottom: 24px;
    }
}

/* ---- Móvil (≤ 768px) ---- */
@media (max-width:768px) {
    .vyo-home {
        padding: 14px 12px 28px;
    }

        .vyo-home .hero {
            border-radius: 8px;
        }

        .vyo-home .hero-left {
            padding: 34px 22px 18px;
        }

        .vyo-home .hero h1 {
            font-size: 1.7rem;
            line-height: 1.18;
        }

        .vyo-home .hero .lead {
            font-size: .98rem;
        }

        .vyo-home .btn-paseo {
            width: 100%;
            justify-content: center;
            padding: 14px;
        }

        /* Cartel: más compacto y centrado */
        .vyo-home .hero-right {
            padding: 0 22px 30px;
        }

        .vyo-home .cartel {
            padding: 22px 20px;
        }

            .vyo-home .cartel .marquee {
                font-size: 1.15rem;
            }

        /* Barra de Jazz: texto más chico, no se desborda */
        .vyo-home .jazz-bar {
            padding: 10px 18px;
            gap: 10px;
            flex-wrap: wrap;
        }

            .vyo-home .jazz-bar .txt b {
                font-size: .9rem;
            }

        /* Sectores: 1 columna, tarjetas un poco más bajas */
        .vyo-home .grid-sec {
            grid-template-columns: 1fr;
        }

        .vyo-home .vitrina {
            min-height: 210px;
        }

        .vyo-home .sec-title h2 {
            font-size: 1.6rem;
        }
}

/* ---- Móvil chico (≤ 420px) ---- */
@media (max-width:420px) {
    .vyo-home .hero h1 {
        font-size: 1.5rem;
    }

    .vyo-home .eyebrow {
        font-size: .66rem;
        letter-spacing: .2em;
    }

    .vyo-home .cartel .marquee {
        font-size: 1.05rem;
    }
}