.brand-logo {
    height: clamp(60px, 5.5vw, 36px);
    width: auto;
    max-width: clamp(140px, 30vw, 260px);
    display: block;
    object-fit: contain;
    clip-path: inset(0 2px 0 0); /* top right bottom left */
    border: 0;
    outline: 0;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .brand-logo {
        height: 34px; /* <- ajustá a tu gusto: 30–36px */
        max-width: 65vw; /* evita que se pase de ancho */
    }
    .navbar .navbar-brand {
        padding-top: 0.125rem; /* baja un poco la altura total de la barra */
        padding-bottom: 0.125rem;
    }
}

/* Si la imagen es muy ancha, limitá el ancho y permití que reduzca */
@media (min-width: 992px) {
    .brand-logo {
        max-width: 240px;
    } /* ajustá según veas */
}
@media (max-width: 991.98px) {
    .brand-logo {
        max-width: 60vw;
    } /* que no desborde en móviles */
}
/* Hero slider overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.hero-caption {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
}

.hero-caption .inner {
    max-width: 900px;
}

.hero-badges .badge-card {
    border-left: 4px solid rgba(25, 135, 84, 0.75);
}

.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.promo-card {
    transition: 0.25s ease;
}

.brand-strip img {
    filter: grayscale(15%);
    opacity: 0.9;
}

.brand-strip img:hover {
    filter: none;
    opacity: 1;
}

/* Top navbar */
.nav-surface {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 255, 255, 0.92)
    );
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.brand-name {
    font-size: 1.25rem;
    letter-spacing: 0.2px;
    color: #2a7a3b;
}

.brand-name strong {
    color: #198754;
}

.brand-badge {
    width: 40px;
    height: 40px;
}

.navbar .nav-link {
    color: #36443a;
    font-weight: 500;
}

.navbar .nav-link:hover {
    color: #198754;
}

.page-offset {
    padding-top: 74px;
}

/* Top navbar */
.nav-surface {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 255, 255, 0.92)
    );
    backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.brand-name {
    font-size: 1.25rem;
    letter-spacing: 0.2px;
    color: #2a7a3b;
}

.brand-name strong {
    color: #198754;
}

.brand-badge {
    width: 40px;
    height: 40px;
}

.navbar .nav-link {
    color: #36443a;
    font-weight: 500;
}

.navbar .nav-link:hover {
    color: #198754;
}

.page-offset {
    padding-top: 74px;
}

/* HERO responsive sizing */
:root {
    --hero-h-xs: 46vh;
    --hero-h-md: 56vh;
    --hero-h-xl: 560px;
}

#heroCarousel .carousel-item {
    position: relative;
    height: var(--hero-h-xs);
}

@media (min-width: 768px) {
    #heroCarousel .carousel-item {
        height: var(--hero-h-md);
    }
}

@media (min-width: 1200px) {
    #heroCarousel .carousel-item {
        height: var(--hero-h-xl);
    }
}

#heroCarousel .carousel-item .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

@media (max-width: 576px) {
    .carousel-control-prev,
    .carousel-control-next {
        opacity: 0.7;
    }
}

/* Hero overlay/caption */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.hero-caption {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
}

.hero-caption .inner {
    max-width: 900px;
}

.hero-caption h1 {
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero-caption p {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hero-badges .badge-card {
    border-left: 4px solid rgba(25, 135, 84, 0.75);
}

.promo-card {
    transition: 0.25s ease;
}

.promo-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/11;
    object-fit: cover;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

@media (min-width: 992px) {
    .promo-img {
        aspect-ratio: 16/9;
    }
}

.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.brand-strip img {
    filter: grayscale(15%);
    opacity: 0.9;
}

.brand-strip img:hover {
    filter: none;
    opacity: 1;
}

/* iOS fixes: dynamic viewport + safe area */
:root {
    --nav-h: 74px;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Fallback heights */
#heroCarousel .carousel-item {
    position: relative;
    height: 46vh;
    overflow: hidden;
}

@media (min-width: 768px) {
    #heroCarousel .carousel-item {
        height: 56vh;
    }
}

@media (min-width: 1200px) {
    #heroCarousel .carousel-item {
        height: 560px;
    }
}

/* Prefer dynamic viewport on Safari iOS (15+) */
@supports (height: 1dvh) {
    #heroCarousel .carousel-item {
        height: 46dvh;
    }

    @media (min-width: 768px) {
        #heroCarousel .carousel-item {
            height: 56dvh;
        }
    }
}

/* Safer caption sizes on very small phones */
.hero-caption h1 {
    font-size: clamp(1.25rem, 5.2vw, 2.75rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero-caption p {
    font-size: clamp(0.95rem, 3.2vw, 1.25rem);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Better crop for tall images */
#heroCarousel .carousel-item .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* Safe-area padding for notch */
@supports (padding: env(safe-area-inset-top)) {
    .nav-surface {
        padding-top: env(safe-area-inset-top);
    }

    .page-offset {
        padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
    }
}

/* --- Promo overlay band (desktop) --- */
.promo-media {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.promo-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 0.75rem 1rem 0.9rem;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

.promo-band .title {
    font-weight: 800;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.promo-band .sub {
    opacity: 0.95;
    font-size: 0.95rem;
}

/* Mostrar overlay sólo en desktop y ocultar títulos del body para no duplicar */
@media (max-width: 991.98px) {
    .promo-band {
        display: none;
    }
}

/* (removed) always show body titles on all viewports */
/* --- Promo overlay band (desktop) --- */
.promo-media {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.promo-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 0.75rem 1rem 0.9rem;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

.promo-band .title {
    font-weight: 800;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.promo-band .sub {
    opacity: 0.95;
    font-size: 0.95rem;
}

/* Mostrar overlay sólo en desktop y ocultar títulos del body para no duplicar */
@media (max-width: 991.98px) {
    .promo-band {
        display: none;
    }
}

/* (removed) always show body titles on all viewports */

/* ==== OVERRIDE: usar cuerpo negro con texto blanco en todas las vistas ==== */
.promo-band {
    display: none !important;
}

/* ocultamos franja sobre imagen */
.promo-body-title {
    display: block !important;
}

/* mostrar títulos del cuerpo */
.promo-card .card-body {
    background: #0f0f0f;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.promo-card .card-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.25;
}

.promo-card .card-text {
    color: rgba(255, 255, 255, 0.84);
}

.promo-card .btn-outline-primary {
    border-color: #7da8ff;
    color: #7da8ff;
    transition: background-color 0.15s ease, color 0.15s ease,
        transform 0.05s ease;
    -webkit-tap-highlight-color: rgba(125, 168, 255, 0.25);
}

.promo-card .btn-outline-primary:hover,
.promo-card .btn-outline-primary:focus,
.promo-card .btn-outline-primary:active {
    background: #7da8ff;
    color: #0f0f0f;
}

.promo-card .btn-outline-primary:active {
    transform: scale(0.99);
}

.promo-card .btn-outline-primary:hover {
    background: #7da8ff;
    color: #0f0f0f;
}

.promo-desc {
    color: rgba(255, 255, 255, 0.88) !important;
    word-break: break-word;
}