:root {
        --malibu-green: #0f3d2e;
        --malibu-gold: #c9a24d;
        --malibu-gray: #6b7280;
    }

    /* BASE */
    body {
        font-family: 'Inter', sans-serif;
        color: #0b0b0b;
    }

    /* NAVBAR */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 999;
        background: #fff;
    }

    /* NAV LINKS */
    .navbar .nav-link {
        font-weight: 500;
        color: #0b0b0b;
        position: relative;
        transition: color 0.25s ease;
    }

    /* Hover verde */
    .navbar .nav-link:hover {
        color: var(--malibu-green);
    }

    /* Línea sutil debajo (opcional, muy pro) */
    .navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: var(--malibu-green);
        transition: width 0.25s ease;
    }

    .navbar .nav-link:hover::after {
        width: 100%;
    }



    .navbar-brand img { height: 32px; }

    .btn-quote {
        background: var(--malibu-green);
        color: #fff;
        border-radius: 999px;
        padding: 10px 18px;
        font-weight: 600;
    }
    /* BUTTON HOVER */
    .btn-main:hover,
    .btn-quote:hover {
        background: var(--malibu-gold);
        color: #0b0b0b;
    }

    .btn-main,
    .btn-quote {
        transition: all 0.25s ease;
    }


    /* PROMO BAR */
    .promo-bar {
        background: var(--malibu-green);
        color: #fff;
        text-align: center;
        padding: 10px 14px;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    /* HERO */
    .hero-wrapper {
        background: #fff;
    }

    .hero {
        padding-top: 32px;
        padding-bottom: 40px;
    }

    .hero-badge {
        display: inline-block;
        background: #eef2ff;
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.4rem);
        font-weight: 800;
        line-height: 1.1;
    }

    .hero h1 span {
        color: var(--malibu-gold);
    }

    .hero p {
        color: var(--malibu-gray);
        max-width: 520px;
        margin-top: 16px;
    }

    .btn-main {
        background: var(--malibu-green);
        color: #fff;
        border-radius: 999px;
        padding: 14px 28px;
        font-weight: 600;
        margin-top: 24px;
    }

    /* IMAGE */
    .hero-image img {
        max-height: 520px;
        width: auto;
    }

    /* MOBILE */
    @media (max-width: 991px) {
        .hero { text-align: center; }

        .hero p,
        .hero h1 {
            margin-left: auto;
            margin-right: auto;
        }

        .btn-main {
            margin-left: auto;
            margin-right: auto;
        }

        .hero-image {
            margin-top: 32px;
        }

        .hero-image img {
            max-height: 300px;
        }

        .navbar-collapse {
            background: #fff;
            padding: 16px;
            border-radius: 12px;
            margin-top: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }
    }
    /* ================= GALLERY MARQUEE ================= */

    .gallery-marquee {
        overflow: hidden;
        width: 100%;
        background: #fff;
        padding: 40px 0 60px;
    }

    /* Track that moves */
    .gallery-track {
        display: flex;
        width: max-content;
        animation: scroll-gallery 60s linear infinite;
    }

    /* Group (original + clone) */
    .gallery-group {
        display: flex;
        gap: 24px;
        padding-right: 24px;
    }

    /* ================= CARDS ================= */

    .gallery-card {
        flex: 0 0 auto;
        width: 280px;
        height: 360px;
        border-radius: 28px;
        overflow: hidden;
        background: #f8f8f8;
        box-shadow: 0 20px 50px rgba(0,0,0,0.08);
        transition: transform 0.4s ease;
    }

    /* Zig-zag effect */
    .gallery-card.up {
        transform: translateY(-24px);
    }

    .gallery-card.down {
        transform: translateY(24px);
    }

    /* Image */
    .gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Hover (desktop only) */
    @media (hover: hover) {
        .gallery-card:hover img {
            transform: scale(1.05);
            transition: transform 0.6s ease;
        }
    }

    /* ================= ANIMATION ================= */

    @keyframes scroll-gallery {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }

    /* ================= MOBILE ================= */

    @media (max-width: 768px) {
        .gallery-marquee {
            padding: 30px 0 40px;
        }

        .gallery-card {
            width: 220px;
            height: 280px;
        }

        .gallery-card.up {
            transform: translateY(-12px);
        }

        .gallery-card.down {
            transform: translateY(12px);
        }
    }


    /* ================= WHY MALIBU ================= */

    .why-malibu {
        padding: 90px 0 100px;
        background: linear-gradient(
            180deg,
            rgba(15, 61, 46, 0.06) 0%,
            rgba(255, 255, 255, 1) 70%
        );
    }

    .why-title {
        font-size: clamp(2rem, 3.5vw, 2.6rem);
        font-weight: 800;
        letter-spacing: -0.6px;
    }

    .why-title .text-black {
        color: #0b0b0b;
    }

    .why-title .text-gold {
        color: var(--malibu-gold);
    }

    .why-subtitle {
        font-size: 1.05rem;
        color: var(--malibu-gray);
        max-width: 680px;
        margin: 14px auto 0;
    }

    /* Cards */
    .why-card {
        height: 100%;
        background: #fff;
        border-radius: 20px;
        padding: 34px 26px;
        text-align: center;
        box-shadow: 0 25px 55px rgba(0,0,0,0.08);
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .why-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 70px rgba(0,0,0,0.14);
    }

    .why-icon {
        font-size: 2.6rem;
        color: var(--malibu-green);
        margin-bottom: 20px;
        transition: color 0.3s ease;
    }

    .why-card:hover .why-icon {
        color: var(--malibu-gold);
    }

    .why-card h4 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .why-card p {
        font-size: 0.95rem;
        color: var(--malibu-gray);
        line-height: 1.55;
    }

    /* Mobile */
    @media (max-width: 768px) {
        .why-malibu {
            padding: 70px 0 80px;
        }
    }


    /* ================= PRODUCTS & SERVICES ================= */

    .products-services {
        padding: 80px 0 90px;
        background: #fff;
    }

    /* Title */
    .ps-title {
        font-size: clamp(2rem, 3.5vw, 2.6rem);
        font-weight: 800;
        letter-spacing: -0.6px;
    }

    .ps-title .text-black { color: #0b0b0b; }
    .ps-title .text-gold  { color: var(--malibu-gold); }

    .ps-subtitle {
        font-size: 1.05rem;
        color: var(--malibu-gray);
        max-width: 680px;
        margin: 12px auto 0;
    }

    /* Tabs */
    .ps-tabs {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-bottom: 36px;
        flex-wrap: wrap;
    }

    .ps-tab {
        padding: 10px 22px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: transparent;
        font-weight: 600;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .ps-tab:hover {
        border-color: var(--malibu-green);
        color: var(--malibu-green);
    }

    .ps-tab.active {
        background: var(--malibu-green);
        color: #fff;
        border-color: var(--malibu-green);
    }

    /* Panels + animation */
    .ps-panel {
        display: none;
        opacity: 0;
        transform: translateX(40px);
    }

    .ps-panel.active {
        display: block;
        animation: slideIn 0.45s ease forwards;
    }

    .ps-panel.exit-left {
        animation: slideOutLeft 0.35s ease forwards;
    }

    .ps-panel.exit-right {
        animation: slideOutRight 0.35s ease forwards;
    }

    /* Keyframes */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideOutLeft {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(-40px);
        }
    }

    @keyframes slideOutRight {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(40px);
        }
    }

    /* GRID – Desktop intacto */
    .ps-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 28px;
        justify-items: center;
    }

    /* Item */
    .ps-item {
        max-width: 260px;
        text-align: center;
    }

    /* Image */
    .ps-item img {
        width: 100%;
        height: auto;
        border-radius: 20px;
        object-fit: cover;
        margin-bottom: 12px;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    /* Hover desktop */
    @media (hover: hover) {
        .ps-item:hover img {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(0,0,0,0.12);
        }
    }

    .ps-item h4 {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .ps-item p {
        font-size: 0.9rem;
        color: var(--malibu-gray);
    }

    /* ================= MOBILE SLIDER ================= */

    @media (max-width: 768px) {

        .ps-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 18px;
            padding-bottom: 10px;
        }

        .ps-item {
            min-width: 72%;
            max-width: 280px;
            scroll-snap-align: center;
        }

        .ps-item img {
            max-height: 3400px;
            object-fit: cover;
        }

        .ps-grid::-webkit-scrollbar {
            display: none;
        }

        /* Arrows */
        .ps-arrows {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 12px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .ps-arrow {
            pointer-events: auto;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid #e5e7eb;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .ps-arrow:hover {
            background: var(--malibu-green);
            color: #fff;
            border-color: var(--malibu-green);
        }
    }


/* ================= REQUEST A QUOTE (FINAL UNIFICADO) ================= */

.request-quote{
  padding: 80px 0;
  background: linear-gradient(
    180deg,
    rgba(15, 61, 46, 0.06) 0%,
    #ffffff 60%
  );
}

/* Card general */
.quote-card{
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* ===== Desktop / Tablet: imagen full-height pegada a la izquierda ===== */
@media (min-width: 992px){

  .quote-card{
    display: flex;
    background: #ffffff;
    overflow: hidden;
  }

  /* Columna imagen */
  .quote-card .quote-image{
    flex: 0 0 38%;
    max-width: 38%;
    padding: 0;                 /* ✅ sin aire */
    margin: 0;
    display: flex;
  }

  /* Imagen */
  .quote-image img{
    width: 100%;
    height: 100%;               /* ✅ ocupa TODO el alto */
    object-fit: cover;
    object-position: center 18%;
    border-radius: 0;           /* ✅ se integra al card */
    display: block;
  }

  /* Columna formulario */
  .quote-card .col-lg-7{
    flex: 0 0 62%;
    max-width: 62%;
    background: #ffffff;
  }

  .quote-content{
    padding: 56px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


/* ================= CONTENIDO DERECHO ================= */

.quote-content{
  padding: 56px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-title{
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.6px;
}

.quote-title span{
  color: var(--malibu-gold);
}

.quote-text{
  color: var(--malibu-gray);
  margin-top: 12px;
  margin-bottom: 28px;
  max-width: 520px;
}

/* ================= FORM ================= */

.quote-form .form-control,
.quote-form .form-select{
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

.quote-form .form-control:focus,
.quote-form .form-select:focus{
  border-color: var(--malibu-green);
  box-shadow: 0 0 0 2px rgba(15,61,46,0.15);
}

/* Botón */
.quote-submit{
  background: var(--malibu-green);
  color: #ffffff;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  border: none;
  transition: all 0.25s ease;
}

.quote-submit:hover{
  background: var(--malibu-gold);
  color: #0b0b0b;
}

.quote-note{
  font-size: 0.8rem;
  color: var(--malibu-gray);
  margin-top: 14px;
}

/* ================= MOBILE – REQUEST A QUOTE (70% limpio) ================= */
@media (max-width: 991px){

  .quote-image{
    height: auto;              /* 🔑 deja que la imagen mande */
    padding: 20px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .quote-image img{
    width: 70%;                /* ✅ lo que pediste */
    height: auto;              /* 🔑 evita deformación */
    max-height: 360px;         /* controla que no se dispare */
    object-fit: contain;       /* nunca se corta */
    object-position: center;
    display: block;
    border-radius: 18px;
  }

  .quote-content{
    padding: 32px 22px;
    text-align: center;
  }

  .quote-text{
    margin-left: auto;
    margin-right: auto;
  }
}

/* Extra pequeño (phones muy chicos) */
@media (max-width: 420px){
  .quote-image img{
    width: 72%;
    max-height: 320px;
  }

  .quote-content{
    padding: 28px 18px;
  }
}




    /* ================= FAQs ================= */

    .faqs {
        padding: 90px 0 100px;
        background: #ffffff;
    }

    .faq-title {
        font-size: clamp(1.9rem, 3vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -0.6px;
    }

    .faq-title span {
        color: var(--malibu-gold);
    }

    .faq-subtitle {
        color: var(--malibu-gray);
        max-width: 680px;
        margin: 14px auto 40px;
    }

    /* Accordion */
    .faq-accordion .accordion-item {
        border: none;
        border-radius: 18px;
        margin-bottom: 14px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.06);
        overflow: hidden;
    }

    .faq-accordion .accordion-button {
        font-weight: 600;
        padding: 20px 22px;
        background: #ffffff;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
        background: rgba(15,61,46,0.05);
        color: var(--malibu-green);
        box-shadow: none;
    }

    .faq-accordion .accordion-button:focus {
        box-shadow: none;
    }

    .faq-accordion .accordion-body {
        color: var(--malibu-gray);
        padding: 18px 22px 22px;
        line-height: 1.6;
    }

   /* ================= FOOTER (2x2 en mobile) ================= */

.site-footer {
  background: #0f3d2e;
  color: #ffffff;
  padding: 70px 0 30px;
}

.footer-title {
  font-weight: 700;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.footer-text {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  margin-top: 12px;
  max-width: 300px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.footer-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-links a:hover {
  color: var(--malibu-gold);
}

/* CTA */
.footer-cta {
  display: inline-block;
  margin-top: 10px;
  background: var(--malibu-gold);
  color: #0b0b0b;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-cta:hover {
  background: #ffffff;
  color: #0b0b0b;
}

/* Bottom */
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}

/* ✅ MOBILE/TABLET: 2 columnas por fila (2x2) */
@media (max-width: 991px){

  .site-footer .row{
    display: flex;
    flex-wrap: wrap;
    row-gap: 26px;
  }

  /* 4 bloques => 2 por fila */
  .site-footer .row > [class*="col-"]{
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* el bloque del logo/texto suele ser largo: deja respirar */
  .site-footer .footer-text{
    max-width: 220px;
  }

  .site-footer{
    padding: 55px 0 26px;
  }
}

/* ✅ Extra pequeño: si es muy estrecho, vuelve a 1 columna */
@media (max-width: 420px){
  .site-footer .row > [class*="col-"]{
    flex: 0 0 100%;
    max-width: 100%;
  }

  .site-footer .footer-text{
    max-width: 320px;
  }
}


   /* ================= FLOATING WHATSAPP CONTACT (Premium) ================= */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
}

/* Floating button */
.wa-btn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #0b3d2e;
  color: #fff;
  border: 1px solid rgba(255,255,255,.65);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.wa-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0,0,0,.22);
}

.wa-btn i{ font-size: 1.55rem; }

/* Card */
.wa-card{
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.wa-card.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header (más elegante) */
.wa-card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #0b3d2e; /* sólido, premium */
  color: #fff;
}

.wa-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.wa-avatar i{ font-size: 1.05rem; }

.wa-meta{ min-width: 0; line-height: 1.2; }

.wa-name{
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-role{
  font-size: .78rem;
  opacity: .88;

  /* ✅ cargo largo: máximo 2 líneas, corte pro */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wa-close{
  margin-left: auto;
  border: none;
  background: transparent;
  color: #fff;
  opacity: .85;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .15s ease, opacity .15s ease;
}

.wa-close:hover{
  background: rgba(255,255,255,.12);
  opacity: 1;
}

/* Body */
.wa-card-body{
  padding: 14px;
  background: #fff;
}

/* Lines (más limpias, menos “IA”) */
.wa-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(11,61,46,.04); /* verde MUY suave */
  border: 1px solid rgba(0,0,0,.06);
  color: #222;
  font-size: .9rem;
  margin-bottom: 10px;
}

.wa-line i{
  color: #c9a24d;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Texto/links no se cortan */
.wa-line span,
.wa-link{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

.wa-link{
  color: #222;
  text-decoration: none;
}

.wa-link:hover{
  text-decoration: underline;
}

/* CTA WhatsApp (más sobrio) */
.wa-action{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
  box-shadow: 0 12px 26px rgba(37,211,102,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wa-action:hover{
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 16px 34px rgba(37,211,102,.28);
}

.wa-note{
  margin-top: 10px;
  font-size: .78rem;
  color: #666;
  text-align: center;
}

/* Mobile */
@media (max-width: 420px){
  .wa-card{ width: 290px; }
}



/* ================= TRUSTED PARTNERS ================= */

.trusted-partners {
  padding: 80px 0 60px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

.partners-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

.partners-subtitle {
  font-size: 1.05rem;
  color: #666;
  max-width: 620px;
  margin: 0 auto;
}

/* Grid */
.partners-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 36px;
  align-items: center;
}

.partner-item {
  text-align: center;
  transition: transform .25s ease;
  padding-top: 4px;
}

.partner-item:hover {
  transform: translateY(-4px);
}

/* Logo container */
.partner-logo {
  width: 150px;   /* antes 130 */
  height: 150px;  /* antes 130 */
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}



.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.partner-item:hover img {
  transform: scale(1.04);
}


/* Name */
.partner-name {
  display: block;
  font-size: .92rem;
  font-weight: 500;
  color: #333;
  margin-top: 2px; /* controla la cercanía */
  letter-spacing: .2px;
}


/* Mobile */
@media (max-width: 768px) {
  .trusted-partners {
    padding: 60px 0 40px;
  }

  .partner-logo {
    width: 120px;
    height: 120px;
  }
}

/* ================= WhatsApp Nudge ================= */
.wa-nudge{
  position: absolute;
  right: 0;
  bottom: 70px;               /* arriba del botón */
  display: flex;
  align-items: flex-start;    /* 👈 para que el texto respire mejor */
  gap: 10px;
  background: #ffffff;
  color: #1f1f1f;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);

  width: 260px;               /* 👈 CLAVE: ancho cómodo */
  max-width: 260px;

  font-family: 'Inter', sans-serif;
}

.wa-nudge-text{
  font-size: .9rem;           /* un poquito más grande */
  font-weight: 600;
  line-height: 1.35;          /* 👈 separa líneas */
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* flechita apuntando al botón */
.wa-nudge::after{
  content: "";
  position: absolute;
  right: 18px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.wa-nudge-close{
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  margin-left: 4px;           /* 👈 no aprieta el texto */
}

.wa-nudge-close:hover{
  opacity: 1;
}

/* Mobile */
@media (max-width: 420px){
  .wa-nudge{
    width: 220px;
    max-width: 220px;
  }
  .wa-nudge-text{
    font-size: .85rem;
  }
}

/* ===== Language Dropdown (premium chip) ===== */
.lang-dd-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: .9rem;
  color: #0b3d2e;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.lang-dd-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.lang-dd-btn:active{ transform: translateY(0); }

.lang-dd-btn.dropdown-toggle::after{
  margin-left: 6px;
  opacity: .55;
}

.lang-dd-btn i{
  color: #c9a24d;
  font-size: 1rem;
}

/* Menu */
.lang-dd-menu{
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}

.lang-dd-item{
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-dd-item:hover{
  background: rgba(11,61,46,.06);
}

.lang-dd-item.is-active{
  background: rgba(201,162,77,.18);
  color: #0b3d2e;
}


/* ===== WHY MALIBÚ — background illustration ===== */
.why-hero{
  position: relative;
  padding: 60px 20px 80px;
  overflow: hidden;
}

/* Imagen de fondo */
.why-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/sr.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 1200px auto;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* Elevar el contenido sobre la imagen */
.why-hero > *{
  position: relative;
  z-index: 1;
}

/* ===== Responsive ===== */
@media (max-width: 992px){
  .why-hero{
    padding: 50px 16px 70px;
  }

  .why-hero::before{
    background-size: 900px auto;
    background-position: center 85%;
  }
}

@media (max-width: 576px){
  .why-hero{
    padding: 40px 12px 60px;
  }

  .why-hero::before{
    background-size: 700px auto;
    background-position: center 90%;
    opacity: 0.15;
  }
}


/* ================= HERO CTA: botón más ancho (solo PC/Tablet) ================= */

/* Tablet + Desktop */
@media (min-width: 768px){
  .hero .btn-main{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;     /* más ancho */
    min-width: 280px;       /* ancho mínimo */
    font-size: 1rem;
  }
}

/* Desktop grande (opcional: aún más ancho) */
@media (min-width: 1200px){
  .hero .btn-main{
    min-width: 320px;
    padding: 16px 54px;
  }
}