.nav-green {
    --nav-bg: rgb(var(--green-rgb));
    --nav-shadow: rgba(0, 0, 0, 0.3);
    --nav-text: white;
    --nav-text2: white;

    --nav-tiktok-bg: rgb(var(--green-rgb));
    --nav-tiktok-border-size: 2px;
    --nav-tiktok-border-color: rgba(255, 255, 255, 1);

    --nav-ig-bg: rgb(var(--green-rgb));
    --nav-ig-border-color: rgba(255, 255, 255, 1);

    --nav-wsp-bg: rgb(var(--green-rgb));
    --nav-wsp-border-color: rgba(255, 255, 255, 1);
    --nav-wsp-color: white;
}

/* =========================
   VIEW-LIVING
========================= */

#view-living {
  --accent-color: rgb(var(--green-rgb));
  --accent-color-rgb: var(--green-rgb);
  --accent-bg: var(--green-bg);

  --accent-soft: #f4ffe9;

  --accent-soft-2: #ecffd9;

  --green-dark: #4f8d1b;

  --green-dark-rgb: 79, 141, 27;

  --text: #2a2a2a;

  --card-bg: rgba(255, 255, 255, .82);

  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   HERO
========================= */

.li-hero {
  width: min(1250px, 94%);
  margin-top: 6rem;

  display: grid;
  grid-template-columns:
    1.1fr .9fr;

  gap: 3rem;
  align-items: start;
}

.li-hero-text{

    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.li-hero-title{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(3rem, 7vw, 5.5rem);

    line-height:
        .95;

    color:
        var(--accent-color);
}

.li-hero-title span{

    color:
        var(--green-dark);
}

.li-hero-subtitle{

    max-width:
        650px;

    font-size:
        1.1rem;

    line-height:
        1.8;

    color:
        #4b4b4b;
}

/* =========================
   HERO FEATURES
========================= */

.li-hero-features{

    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

.li-feature{

    background:
        white;

    border-radius:
        22px;

    padding:
        1rem 1.2rem;

    box-shadow:
        0 10px 30px rgba(var(--green-rgb), .10);

    flex:
        1 1 220px;
}

.li-feature h3{

    font-size:
        1rem;

    color:
        var(--green-dark);

    margin-bottom:
        .45rem;
}

.li-feature p{

    font-size:
        .95rem;

    line-height:
        1.5;
}

/* =========================
   HERO IMAGE
========================= */

.li-hero-visual{

    position:relative;
}

.li-hero-main-image{

    width:100%;
    aspect-ratio:1 / 1;

    border-radius:
        40px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(var(--green-rgb), .18),
            rgba(var(--green-rgb), .06)
        );

    box-shadow:
        0 30px 80px rgba(var(--green-rgb), .18);

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:
        700;

    color:
        var(--green-dark);

    font-size:
        1.2rem;
}

#view-living img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================
   PRICE SECTION
========================= */

.li-price-section{

    width:min(1150px, 92%);
    margin-top:5rem;

    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap:2rem;
}

.li-price-card{

    position:relative;

    background:
        white;

    border-radius:
        34px;

    overflow:hidden;

    box-shadow:
        0 16px 45px rgba(var(--green-rgb), .12);

    transition:
        .28s ease;
}

.li-price-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 24px 55px rgba(var(--green-rgb), .18);
}

.li-price-top{

    background:
        linear-gradient(
            135deg,
            var(--accent-color),
            #97f24d
        );

    color:white;

    padding:
        2rem;
}

.li-price-top h2{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        2rem;

    margin-bottom:
        .6rem;
}

.li-price-top p{

    opacity:.92;

    line-height:1.6;
}

.li-price-content{

    padding:
        2rem;
}

.li-price-line{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:
        1rem 0;

    border-bottom:
        1px solid rgba(0,0,0,.07);
}

.li-price-line:last-child{
    border-bottom:none;
}

.li-price-label{

    font-weight:
        600;
}

.li-price-value{

    font-weight:
        700;

    color:
        var(--green-dark);

    font-size:
        1.15rem;
}

/* =========================
   CAMINOS
========================= */

.li-runner-showcase{

    width:min(1150px, 94%);

    margin-top:5rem;

    display:grid;
    grid-template-columns:
        1fr 1fr;

    background:white;

    border-radius:36px;

    overflow:hidden;

    box-shadow:
        0 20px 50px rgba(var(--green-rgb), .12);
}

.li-runner-showcase-image{

    padding:2rem;

    display:flex;
    justify-content:center;
    align-items:center;

    background:
        linear-gradient(
            135deg,
            rgba(var(--green-rgb), .10),
            rgba(var(--green-rgb), .02)
        );
}

.li-runner-showcase-image img{

    width:100%;
    max-width:420px;

    object-fit:contain;
}

.li-runner-showcase-content{

    padding:3rem;

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:1.1rem;
}

.li-runner-showcase-content span{

    font-weight:700;

    color:
        var(--green-dark);
}

.li-runner-showcase-content h2{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(2rem, 4vw, 3rem);

    line-height:1.1;

    color:
        var(--green-dark);
}

.li-runner-showcase-content p{

    line-height:1.8;

    color:#555;
}

.li-runner-colors{

    display:flex;
    gap:.8rem;

    margin-top:.5rem;
}

.li-runner-colors div{

    width:34px;
    height:34px;

    border-radius:50%;
}

.li-runner-colors div:nth-child(1){
    background:#ff5b5b;
}

.li-runner-colors div:nth-child(2){
    background:#ffd93d;
}

.li-runner-colors div:nth-child(3){
    background:#36c5ff;
}

.li-runner-colors div:nth-child(4){
    background:#7de42a;
}

.li-runner-colors div:nth-child(5){
    background:#b56dff;
}

@media (max-width:850px){

    .li-runner-showcase{

        grid-template-columns:1fr;
    }
}

/* =========================
   GALLERY GRID
========================= */

.li-gallery-section{

    width:min(1300px, 94%);
    margin-top:5rem;
}

.li-gallery-header{

    display:flex;
    flex-direction:column;
    gap:1rem;

    margin-bottom:2rem;
}

.li-gallery-title{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(2.5rem, 5vw, 4rem);

    color:
        var(--accent-color);
}

.li-gallery-subtitle{

    max-width:
        700px;

    line-height:
        1.8;

    color:
        #4a4a4a;
}

/* =========================
   EDITORIAL GRID
========================= */

.li-masonry{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-auto-rows:
        240px;

    gap:
        1.3rem;
}

/* cards */

.li-masonry-item{

    position:relative;

    border-radius:
        28px;

    overflow:hidden;

    background:
        white;

    box-shadow:
        0 14px 35px rgba(var(--green-rgb), .10);

    transition:
        .28s ease;
}

.li-masonry-item:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 22px 45px rgba(var(--green-rgb), .16);
}

/* image */

.li-masonry-image{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:
        var(--green-dark);

    font-weight:
        700;

    background:
        linear-gradient(
            135deg,
            rgba(var(--green-rgb), .14),
            rgba(var(--green-rgb), .04)
        );

    overflow:hidden;
}

.li-masonry-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================
   SIZE VARIANTS
========================= */

/* 1×1 — ocupa 1 columna, 1 fila */
.square{
    grid-column: span 1;
    grid-row:    span 1;
}

/* 2×1 — ocupa 2 columnas, 1 fila */
.wide{
    grid-column: span 2;
    grid-row:    span 1;
}

/* 1×2 — ocupa 1 columna, 2 filas */
.tall{
    grid-column: span 1;
    grid-row:    span 2;
}

/* 2×2 — ocupa 2 columnas, 2 filas */
.square-big{
    grid-column: span 2;
    grid-row:    span 2;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .li-masonry{

        grid-template-columns:
            repeat(2, 1fr);
    }

    /* en 2 columnas, wide-large se limita a las 2 disponibles */
    .wide-large{
        grid-column: span 2;
    }
}

@media(max-width:650px){

    .li-masonry{

        grid-template-columns:
            1fr;

        grid-auto-rows:
            220px;
    }

    /* en mobile todo ocupa 1 columna y 1 fila */
    .wide,
    .wide-large,
    .square,
    .tall,
    .tall-large{

        grid-column: span 1;
        grid-row:    span 1;
    }
}

/* =========================
   FINAL CTA
========================= */

.li-final-cta{

    width:min(1100px, 92%);
    margin:
        5rem 0;

    border-radius:
        38px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            var(--accent-color),
            #97f24d
        );

    color:white;

    padding:
        3rem;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    flex-direction: column;
    text-align: center;

    gap:2rem;
}

.li-final-cta-text{

    display:flex;
    flex-direction:column;
    gap:1rem;

    max-width:
        60rem;
}

.li-final-cta h2{

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(2rem, 5vw, 3.5rem);

    line-height:
        1;
}

.li-final-cta p{

    line-height:
        1.8;

    opacity:.95;
}

.li-final-button{

    border:none;
    outline:none;

    background:white;
    color:var(--green-dark);

    padding:
        1.1rem 2rem;

    border-radius:
        999px;

    font-weight:
        700;

    font-size:
        1rem;

    cursor:pointer;

    transition:
        .25s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);
}

.li-final-button:hover{

    transform:
        translateY(-4px)
        scale(1.03);
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .li-hero{

        grid-template-columns:
            1fr;

        gap:2rem;
    }

    .li-hero-main-image{

        aspect-ratio:
            16 / 10;
    }

    .li-final-cta{

        text-align:center;
        justify-content:center;
    }
}

/* ==================================
   MOBILE — VIEW LIVING
================================== */

@media (max-width: 768px) {

  /* =========================
     HERO
  ========================= */

  .li-hero {

    width: min(94%, 700px);

    margin-top: 6.5rem;

    grid-template-columns: 1fr;

    gap: 2rem;

    align-items: center;
  }

  .li-hero-text {

    gap: 1.2rem;

    text-align: center;
  }

  .li-hero-title {

    font-size:
      clamp(2.8rem, 12vw, 4.3rem);

    line-height: .95;
  }

  .li-hero-subtitle {

    font-size: 1rem;

    line-height: 1.7;

    max-width: 100%;
  }

  /* =========================
     HERO FEATURES
  ========================= */

  .li-hero-features {

    gap: .8rem;
  }

  .li-feature {

    padding: 1rem;

    border-radius: 18px;

    flex: 1 1 100%;
  }

  .li-feature h3 {

    font-size: .95rem;
  }

  .li-feature p {

    font-size: .9rem;
  }

  /* =========================
     HERO IMAGE
  ========================= */

  .li-hero-main-image {

    aspect-ratio: 4 / 5;

    border-radius: 28px;
  }

  /* =========================
     PRICE SECTION
  ========================= */

  .li-price-section {

    width: min(94%, 700px);

    margin-top: 3rem;

    grid-template-columns: 1fr;

    gap: 1.2rem;
  }

  .li-price-card {

    border-radius: 26px;
  }

  .li-price-top {

    padding: 1.5rem;
  }

  .li-price-top h2 {

    font-size: 1.6rem;
  }

  .li-price-top p {

    font-size: .95rem;
  }

  .li-price-content {

    padding: 1.5rem;
  }

  .li-price-line {

    padding: .9rem 0;

    gap: 1rem;
  }

  .li-price-label {

    font-size: .95rem;
  }

  .li-price-value {

    font-size: 1rem;

    text-align: right;
  }

  /* =========================
     RUNNER SHOWCASE
  ========================= */

  .li-runner-showcase {

    width: min(94%, 700px);

    margin-top: 3rem;

    grid-template-columns: 1fr;

    border-radius: 26px;
  }

  .li-runner-showcase-image {

    padding: 1.2rem;
  }

  .li-runner-showcase-image img {

    max-width: 320px;
  }

  .li-runner-showcase-content {

    padding: 1.5rem;

    gap: 1rem;

    text-align: center;
  }

  .li-runner-showcase-content h2 {

    font-size:
      clamp(1.8rem, 8vw, 2.5rem);

    line-height: 1.1;
  }

  .li-runner-showcase-content p {

    font-size: .96rem;

    line-height: 1.7;
  }

  .li-runner-colors {

    justify-content: center;

    flex-wrap: wrap;
  }

  .li-runner-colors div {

    width: 30px;
    height: 30px;
  }

  /* =========================
     GALLERY
  ========================= */

  .li-gallery-section {

    width: min(94%, 700px);

    margin-top: 3rem;
  }

  .li-gallery-header {

    gap: .8rem;

    margin-bottom: 1.5rem;

    text-align: center;
  }

  .li-gallery-title {

    font-size:
      clamp(2rem, 10vw, 3rem);

    line-height: 1;
  }

  .li-gallery-subtitle {

    font-size: .96rem;

    line-height: 1.7;

    max-width: 100%;
  }

  /* =========================
     MASONRY GRID
  ========================= */

  .li-masonry {

    grid-template-columns:
      repeat(2, 1fr);

    grid-auto-rows:
      160px;

    gap: .8rem;
  }

  .li-masonry-item {

    border-radius: 18px;
  }

  /* =========================
     MOBILE SIZE VARIANTS
  ========================= */

  .square {

    grid-column: span 1;
    grid-row: span 1;
  }

  .wide {

    grid-column: span 2;
    grid-row: span 1;
  }

  .tall {

    grid-column: span 1;
    grid-row: span 2;
  }

  .square-big {

    grid-column: span 2;
    grid-row: span 2;
  }

  /* =========================
     FINAL CTA
  ========================= */

  .li-final-cta {

    width: min(94%, 700px);

    margin: 3rem 0;

    padding: 2rem 1.3rem;

    border-radius: 26px;

    gap: 1.5rem;
  }

  .li-final-cta-text {

    gap: .8rem;
  }

  .li-final-cta h2 {

    font-size:
      clamp(1.8rem, 9vw, 2.8rem);

    line-height: 1;
  }

  .li-final-cta p {

    font-size: .96rem;

    line-height: 1.7;
  }

  .li-final-button {

    width: 80%;

    padding: 1rem 1.2rem;

    font-size: .95rem;
  }
}