:root {
    --verde-oscuro: #2f6f5e;
    --verde-medio: #3a7d5f;
    --verde-claro: #a8d5c3;
    --verde-menta: #e6f4ec;
    --texto: #2e2e2e;
    --gris-suave: #f7f7f5;
}

* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Mulish', sans-serif;
    color: var(--texto);
    overflow-x: hidden;
}

.wpp-button {
    position: fixed;
    z-index: 9999;
    bottom: 15px;
    right: 15px;
    height: 50px;
    line-height: 47px;
    width: 50px;
    background: #25d366;
    color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, .24);
    cursor: pointer;
    transition: background-color .2s linear;
    text-align: center;
 opacity: 0;
  transform: scale(0.6);

  /* animación */
  animation-name: whatsappIn;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;


}

@keyframes whatsappIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.wpp-button svg {width: 22px;}

.wpp-button:hover {
    background-color: #128c7e;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Mulish', sans-serif;
}

.verde-medio {
    color: var(--verde-medio);
}

.verde-oscuro {
    color: var(--verde-oscuro);
}

.texto {
    color: var(--texto);
}

/* ── NAVBAR ── */
a.navbar-brand img {
    max-width: 135px;
}

/* Logo dual: blanco por defecto, color al scrollear */
.navbar-brand .logo-white {
    display: block;
}

.navbar-brand .logo-color {
    display: none;
}

.navbar.scrolled .navbar-brand .logo-white {
    display: none;
}

.navbar.scrolled .navbar-brand .logo-color {
    display: block;
}

.sticky-top .navbar-toggler-icon {
    filter: invert(1);
}

.sticky-top.scrolled .navbar-toggler-icon {
    filter: brightness(0.5);
}

.navbar {
    position: fixed;
    width: 100%;
    background: rgba(255, 255, 255, 0) !important;
    box-shadow: none;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    transition: background .4s ease, padding-top .35s ease, padding-bottom .35s ease, box-shadow .4s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 1) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .12) !important;
}

.navbar-nav .nav-link {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9) !important;
    padding: 6px 14px !important;
    transition: color .4s ease;
    position: relative;
}

.navbar.scrolled .navbar-nav .nav-link {
    color: var(--texto) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
    border-radius: 2px;
}

.navbar-nav .nav-link:hover {
    opacity: .75;
}

.navbar.scrolled .navbar-nav .nav-link:hover {
    color: var(--verde-oscuro) !important;
    opacity: 1;
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

/* ── HERO ── */
.hero {
    position: relative;
    min-height: 100vh;
    background: url('../img/bg-home.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 740px;
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
}

.hero-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .88);
    font-weight: 300;
    line-height: 1.7;
}

/* ── PARALLAX ── */
.parallax-bg {
    background-attachment: fixed;
}

@media (max-width: 767px) {

    /* En mobile background-attachment:fixed tiene bugs, lo desactivamos */
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* ── Foto separador → Slider ── */
.foto-sep-slider {
  position: relative;
  height: 480px;        /* la misma altura que tenía .foto-sep */
}

.foto-sep-slider .sep-swiper,
.foto-sep-slider .swiper-slide {
  height: 100%;
    overflow: hidden;   /* ✅ agregar */

}

.foto-sep-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CTA flotante centrado encima */


@media (max-width: 768px) {
  .foto-sep-slider { height: 320px; }
}

/* ── TAGLINE ── */
.tagline-strip {
    background: #fff;
    padding: 150px 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tagline-strip h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.4;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.tagline-strip .highlight {
    background: linear-gradient(to right, var(--verde-claro) 100%, transparent 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    color: var(--texto);
    padding: 0px 14px;
    transition: background-size .75s cubic-bezier(.4, 0, .2, 1);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.tagline-strip .highlight.painted {
    background-size: 100% 100%;
}

/* Círculos decorativos tagline */
.tagline-strip .deco-circle {
    position: absolute;
    border-radius: 50%;
    background: #f6f6f6;
    pointer-events: none;
}

.deco-circle-tl {
    width: 220px;
    height: 220px;
    top: -80px;
    left: -60px;
    animation: floatA 6s ease-in-out infinite;
}

.deco-circle-tr {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -40px;
    animation: floatB 7s ease-in-out infinite;
}

.deco-circle-bl {
    width: 100px;
    height: 100px;
    bottom: -30px;
    left: 8%;
    animation: floatA 8s ease-in-out infinite reverse;
}

.deco-circle-br {
    width: 260px;
    height: 260px;
    bottom: 21%;
    right: 41%;
    animation: floatB 9s ease-in-out infinite;
}

@keyframes floatA {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-18px) scale(1.03);
    }
}

@keyframes floatB {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(14px) scale(.97);
    }
}

/* ── NOSOTROS ── */
.nosotros {
    background: var(--verde-oscuro);
    color: #fff;
    padding: 72px 0 80px;
    position: relative;
    overflow: hidden;
}

.nosotros::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/slide-4.jpg') center/cover no-repeat;
    opacity: .13;
    pointer-events: none;
}

.nosotros .container {
    position: relative;
    z-index: 1;
}

.nosotros .label {
    font-family: 'Mulish', sans-serif;
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 28px;
    font-weight: 600;
}

.nosotros-titulo {
    font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    font-weight: 500;
    line-height: 1.65;
    color: #a8d5c3;
}

.nosotros-bold {
    font-weight: 800;
}

.nosotros-parrafo {
    font-size: .97rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

.nos-mark {
    background: #a8d5c3;
    color: #2f6f5e;
    font-weight: 800;
    border-radius: 3px;
    padding: 1px 5px;
    font-style: normal;
}

.bg-gris {
    background-color: var(--gris-suave);
}

.valores-card {
    border-radius: 18px;
    overflow: hidden;
    margin-top: 20px;
    background: #fff;
}

.valor-col {
    padding: 0;
}

.valor-col-mid {
    border-left: 4px solid #b1d4c4;
    border-right: 4px solid #b1d4c4;
}

.valor-inner {
    padding: 0 36px;
    text-align: center;
    color: var(--texto);
}

.valor-icon {
    font-size: 2.5rem;
    color: var(--verde-claro);
    margin-bottom: 8px;
    display: block;
}

.valor-inner h6 {
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--texto);
}

.valor-inner p {
    font-size: .87rem;
    color: #2e2e2e;
    margin: 0;
    line-height: 1.55;
}

/* ── CORPORATIVOS ── */
.corp {
    background: #FFFFFF;
    padding: 80px 0;
}

.corp .label {
    font-family: 'Mulish', sans-serif;
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #2e2e2e;
    font-weight: 700;
    margin-bottom: 20px;
}

.corp-titulo {
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: 900;
    line-height: 1.3;
    color: var(--texto);
}

.corp-underline {
    background: linear-gradient(to right, var(--verde-claro) 100%, transparent 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    color: var(--texto);
    padding: 0px 3px;
}

.corp-subtexto {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--verde-oscuro);
}

.btn-corp {
    background: #8e403c;
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 6px;
    border: none;
    transition: background .2s, transform .15s;
}

.btn-corp:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px);
}

.corp-grid-card {
    font-weight: 600;
    border-radius: 14px;
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.corp-grid-card p {
    font-size: .8rem;
    line-height: 1.6;
    font-weight: 600;
}

.corp-grid-card h5 {
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #b1d4c4 !important
}

.corp-grid-card h6 {
    font-size: .85rem;
    line-height: 1.3rem;
    font-weight: 800;
}

.bg-verde-claro {
    background: #a8d5c3;
    color: var(--texto);
}

.bg-verde-dark {
    background: var(--verde-oscuro);
    color: #fff;
}

.bg-verde-dark h5 {
    color: #fff;
}

.bg-verde-dark p {
    color: rgba(255, 255, 255, .88);
}

.bg-white-card {
    background: #fff;
    color: var(--texto);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
}

.bg-dark-card {
    background: #1a1a1a;
    color: rgba(255, 255, 255, .85);
}

/* ── FOTO SEP + ALQUILER ── */
.foto-alquiler-wrap {
    position: relative;
}

.foto-sep-slider {
    position: relative;
}

.foto-sep-slider .cta-over {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 10;
}

.alquiler {
    background: var(--verde-oscuro);
    padding: 80px 0 72px;
    color: #fff;
}

.alquiler .label {
    font-family: 'Mulish', sans-serif;
    font-size: .7rem;
    letter-spacing: .15em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 20px;
}

.alquiler h2 {
    font-size: clamp(1.6rem, 3vw, 1.8rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
}

.alquiler-divider-hr {
    border-right: 4px solid var(--verde-claro)
}

.alquiler-divider p {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--verde-claro);
    margin: 0;
}

/* ── SWIPER GALERÍA ── */
.galeria-swiper {
    width: 100%;
    padding-top: 65px !important;
}

.galeria-swiper .swiper-slide {
    overflow: hidden;
    height: 400px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.galeria-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.galeria-swiper .swiper-slide-active img {
    transform: scale(1.03);
}

.galeria-swiper .swiper-pagination-bullet {
    background: #FFFFFF;
    opacity: .7;
    width: 8px;
    height: 8px;
}

.galeria-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

/* ── CTA STRIP ── */
.cta-strip {
    background: #ffffff;
    padding: 135px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-strip h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    position: relative;
    z-index: 1;
}

.cta-strip .highlight {
    background: linear-gradient(to right, #e07b6a 100%, transparent 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    color: var(--texto);
    padding: 2px 10px;
    border-radius: 4px;
    transition: background-size .75s cubic-bezier(.4, 0, .2, 1);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.cta-strip .highlight.painted {
    background-size: 100% 100%;
    transition: background-size .75s cubic-bezier(.4, 0, .2, 1), color .15s ease .6s;
}

.cta-strip .container {
    position: relative;
    z-index: 1;
}

.cta-strip .arrow-down {
    font-size: 1.6rem;
    color: var(--texto);
    display: block;
    margin-top: 16px;
}

.cta-strip .deco-circle {
    position: absolute;
    border-radius: 50%;
    background: #d4d4d0;
    opacity: .45;
    pointer-events: none;
}

.cta-strip .deco-c1 {
    width: 200px;
    height: 200px;
    top: -60px;
    left: -50px;
    animation: floatA 7s ease-in-out infinite;
}

.cta-strip .deco-c2 {
    width: 320px;
    height: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #dde8e0;
    opacity: .5;
    animation: floatB 9s ease-in-out infinite;
}

.cta-strip .deco-c3 {
    width: 180px;
    height: 180px;
    bottom: -50px;
    right: -30px;
    animation: floatA 8s ease-in-out infinite reverse;
}

/* ── CATÁLOGO ── */
.catalogo {
    background: var(--verde-claro);
    color: var(--texto);
}

.cat-pin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-top: -30px;
    border-radius: 50%;
    background: #a8d5c3;
    font-size: 2rem;
    color: var(--texto);
    position: relative;
}

.cat-intro {
    font-weight: 600;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--texto);
}

/* ── BOTONES JUEGOS ── */
.juegos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.modal-dialog {
    max-width: 570px;
}

.juego-btn {
    background: #fff;
    border: 2px solid var(--verde-oscuro);
    color: var(--verde-oscuro);
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    font-size: .80rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 10px 18px;
    width: 49%;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s, box-shadow .2s;
}

.juego-btn:hover {
    background: var(--verde-oscuro);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(47, 111, 94, .25);
}

/* ── MODAL JUEGO ── */
.modal-juego-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.modal-juego-img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}

.modal-juego-nombre {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--texto);
    margin-bottom: 12px;
}

.modal-juego-desc {
    font-size: .95rem;
    line-height: 1.7;
    color: #555;
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    background: rgba(0, 0, 0, .45);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s;
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, .7);
}

/* Tabla catálogo (fallback) */
.catalogo-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.catalogo-table td {
    padding: 13px 24px;
    font-family: 'Mulish', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    width: 50%;
    border: none;
}

.cat-row-dark td {
    background: var(--verde-oscuro);
    color: #fff;
}

.cat-row-light td {
    background: #fff;
    color: var(--texto);
    border-bottom: 1px solid #e0e0e0;
}

.cat-row-dark td:first-child {
    border-right: 2px solid rgba(255, 255, 255, .2);
}

.cat-row-light td:first-child {
    border-right: 1px solid #e0e0e0;
}

.btn-cat-cta {
    background: #8e403c;
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 40px;
    border-radius: 6px;
    border: none;
    transition: background .2s, transform .15s;
}

.btn-cat-cta:hover {
    background: #a04444;
    color: #fff;
    transform: translateY(-2px);
}

.btn.btn-cat-cta:focus-visible,
.btn.btn-cat-cta:active {
    background: #8e403c;
    color: #fff;
}

.btn.btn-corp:focus-visible,
.btn.btn-corp:active {
    background: #333333;
    color: #fff;
}

/* Cards beneficios */
.benefit-card {
    border-radius: 14px;
    padding: 35px 50px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.benefit-white {
    background: #fff;
    color: var(--texto);
}

.benefit-dark {
    background: var(--verde-oscuro);
    color: #fff;
}

.benefit-icon {
    font-size: 3rem;
    color: var(--verde-oscuro);
}

.benefit-dark .benefit-icon {
    color: var(--verde-claro)
}

.benefit-card p {
    font-size: .85rem;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}

/* ── FOOTER CONTACTO ── */
.footer-contacto {
    background: #2b2b2b;
    color: #fff;
    padding: 64px 0 72px;
    margin-top: -30px;
}

.footer-info-item a {
    color: inherit;
    text-decoration: none;
}

.footer-label {
    font-family: 'Mulish', sans-serif;
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 36px;
}

.footer-info-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .95rem;
    color: var(--verde-claro);
    padding: 6px 0;
}

.footer-icon {
    font-size: 1.3rem;
    color: var(--verde-claro);
    min-width: 22px;
}

svg.footer-icon {
    color: var(--verde-claro);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.footer-logo-name {
    font-family: 'Mulish', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.1;
}

.footer-logo-sub {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    font-size: .85rem;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .1em;
}

.footer-input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    padding: 13px 16px;
    font-family: 'Mulish', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: 0;
    outline: none;
    transition: border-color .2s;
}

.footer-input::placeholder {
    color: rgba(255, 255, 255, .45);
}

.footer-input:focus {
    border-color: rgba(255, 255, 255, .7);
}

.footer-textarea {
    resize: vertical;
    min-height: 130px;
}

.btn-footer-enviar {
    background: #8e403c;
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .2s, transform .15s;
    cursor: pointer;
}

.btn-footer-enviar:hover {
    background: #a04444;
    transform: translateY(-2px);
}

.footer-reply {
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
    font-style: italic;
}

/* ── BOTONES GENERALES ── */
.btn-verde {
    background: var(--verde-oscuro);
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 30px;
    border-radius: 6px;
    border: none;
    transition: background .2s, transform .15s;
}

.btn-verde:hover {
    background: var(--verde-medio);
    color: #fff;
    transform: translateY(-2px);
}

.btn-outline-verde {
    border: 2px solid #fff;
    color: #fff;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 6px;
    background: transparent;
    transition: background .2s, color .2s;
}

.btn-outline-verde:hover {
    background: #fff;
    color: var(--verde-oscuro);
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

::selection {
    background-color: var(--verde-oscuro);
    color: #FFFFFF;
}


/* ── RESPONSIVE ── */
@media (max-width:1200px) {
    .nosotros-titulo {
        font-size: clamp(1.15rem, 2.5vw, 1.35rem);
        line-height: 1.45;
    }

    .hero-content h1 {
        font-size: clamp(2.3rem, 5vw, 3rem);
    }
}

@media (max-width:992px) {
    .benefit-card {
        padding: 25px 20px;
    }

    .alquiler-divider-hr {
        border-right: none;
    }
}

/* ── Navbar mobile: menú abierto ── */
@media (max-width: 991.98px) {

    .navbar.menu-open {
        background-color: #fff !important;
        height: 100dvh;
        /* ocupa toda la pantalla */
        align-items: flex-start !important;
        transition: background-color 0.3s ease, height 0.3s ease;
    }

    .navbar.menu-open>.container {
        flex-wrap: wrap;
        /* permite que el collapse caiga abajo */
        align-items: center;
    }

    .navbar-nav {
        margin-top: 40px;
    }

    .navbar-nav .nav-link {
            font-size: 18px;
        margin-top: 10px;
    }

    /* Muestra logo de color en lugar del blanco cuando el menú está abierto */
    .navbar.menu-open .logo-white {
        display: none !important;
    }

    .navbar.menu-open .logo-color {
        display: block !important;
    }

    /* Íconos y links del toggler en color oscuro */
    .navbar.menu-open .navbar-toggler-icon {
        filter: invert(1) brightness(0);
        /* lo pone negro */
    }

    .navbar.menu-open .nav-link {
        color: #222 !important;
    
    }
}


@media (max-width:767px) {
    .deco-circle-tl {
        display: none;
    }
    .deco-circle-bl { display: none;}
    .cta-strip .deco-c3 { display: none;}
    .foto-sep {
        height: 300px;
    }

    .galeria-swiper .swiper-slide {
        height: 260px;
    }

    .tagline-strip {
        padding: 80px 24px;
    }

    .cta-strip {
        padding: 80px 0;
    }

    .juego-btn {
        font-size: .68rem;
        padding: 8px 14px;
    }

    .modal-juego-img {
        min-height: 220px;
    }

    .tagline-strip h2 {
        font-size: clamp(1.7rem, 3vw, 2rem);

    }

    .valor-col-mid {
        padding: 40px 0px;
        border-left: 0;
        border-right: 0;
    }
}

@media (max-width:576px) {
    .hero-content {

        max-width: 310px;
        margin: 0 auto;
    }

    .juego-btn {
        width: 48%;
    }
}