:root {
    --brand: #165d4a;
    --brand-dark: #0d4033;
    --brand-soft: #e7f2ed;
    --ink: #17302b;
    --muted: #5f6f69;
    --soft: #f5f7f6;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(22, 93, 74, .06), transparent 28%),
        radial-gradient(circle at top right, rgba(22, 93, 74, .04), transparent 24%),
        #fbfcfb;
}

a {
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
}

.site-navbar {
    padding-top: .72rem;
    padding-bottom: .72rem;
    box-shadow: 0 1px 0 rgba(18, 39, 34, .05);
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .88) !important;
}

/* ── Menú móvil: CTA centrado ── */
@media (max-width: 991.98px) {
    #mainNav .header-actions {
        padding: .75rem 0 .5rem;
        display: flex;
        justify-content: center;
    }

    #mainNav .header-cta {
        width: min(100%, 18rem);
        text-align: center;
    }
}

.header-container {
    max-width: 1260px;
}

.header-brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: var(--ink);
    margin-right: 1.75rem;
}

/* Product controls: inline layout and hover effects */
.product-controls {
    gap: 12px;
}
.product-controls .quantity-input {
    width: 84px;
    padding: .35rem .5rem;
    border-radius: .375rem;
    border: 1px solid rgba(20,90,63,.12);
    transition: box-shadow .12s ease, transform .12s ease;
}
.product-controls .quantity-input:focus {
    outline: none;
    box-shadow: 0 6px 18px rgba(22,93,74,0.08);
    transform: translateY(-2px);
}

.btn-brand {
    background: var(--brand-dark);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(13,64,51,0.06);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn-brand:hover,
.btn-brand:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(22,93,74,0.16);
}

.btn-outline-success {
    color: var(--brand);
    border-color: var(--brand);
    background: transparent;
    transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: rgba(22,93,74,0.06);
    color: var(--brand-dark);
    transform: translateY(-3px);
}

/* secondary custom for 'Solicitar presupuesto' */
.btn-secondary-custom {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border: 1px solid rgba(13,64,51,0.06);
    box-shadow: 0 6px 14px rgba(6,34,25,0.04);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus {
    background: rgba(22,93,74,0.06);
    color: var(--brand-dark);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(6,34,25,0.08);
}

/* Rectangular button variant used on product page */
.btn-rect {
    border-radius: .6rem !important;
    padding: .6rem 1.2rem !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
}
.btn-rect.btn-brand { /* subtle darker hover */
    box-shadow: 0 8px 20px rgba(13,64,51,0.06);
}
.btn-rect:hover { transform: translateY(-3px); }

/* fix for previous circular look: avoid extreme border-radius on btn elements inside product-controls */
.product-controls .btn { border-radius: .6rem !important; }

/* --- Polish: make controls perfectly aligned and rectangular --- */
.product-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.product-controls .quantity-input {
    height: 44px;
    padding: .4rem .6rem;
    font-size: .95rem;
}
.product-controls .btn {
    height: 44px;
    line-height: 1;
    white-space: nowrap;
    padding: 0 .95rem;
    font-size: 1rem;
    min-width: 0; /* allow natural sizing on desktop */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.product-controls .btn-brand { /* keep slightly wider but not forced */ padding-left: 1.05rem; padding-right: 1.05rem; }
.product-controls .btn-outline-success { padding-left: .95rem; padding-right: .95rem; }

/* Remove extra shadows causing odd shapes */
.product-controls .btn { box-shadow: none; }
.product-controls .btn-brand { box-shadow: 0 6px 18px rgba(13,64,51,0.06); }
.product-controls .btn:hover { box-shadow: 0 12px 28px rgba(13,64,51,0.08); }

@media (max-width: 767.98px) {
    .product-controls { flex-direction: column; align-items: stretch; gap: 10px; }
    .product-controls .quantity-input { width: 100%; }
    .product-controls .quantity-input { max-width: 160px; }
    .product-buttons { display: flex; gap: 12px; align-items: center; }
    .product-buttons .btn { flex: 1; min-width: 0; }

    /* Ensure direct children align center and reset unexpected margins */
    .product-controls > div { display: flex; align-items: center; margin: 0; }
    .product-controls label { margin: 0; }
    .product-buttons .btn + .btn { margin-left: 0; }
}

/* Icons inside buttons */
.btn-rect .bi {
    margin-right: .55rem;
    font-size: 1.05rem;
    vertical-align: middle;
    line-height: 1;
}
.btn-outline-success .bi { color: var(--brand); }
.btn-brand .bi { color: #fff; }

/* Ensure compact alignment on small screens */
@media (max-width: 767.98px) {
    .product-controls { flex-direction: column; align-items: stretch; }
    .product-controls .quantity-input { width: 100%; }
    .product-controls .btn { width: 100%; }
}

/* Strong mobile rules to ensure quantity on first line and buttons equal-width on second line */
@media (max-width: 767.98px) {
    .product-controls { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* make the label+input row wrap nicely */
    .product-controls > .me-3,
    .product-controls > div { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; }

    .product-controls label { margin: 0; }

    /* keep the numeric input compact but responsive */
    .product-controls .quantity-input { width: 110px; max-width: 100%; }

    /* buttons row: equal width, sit on new line */
    .product-buttons { display: flex; gap: 8px; width: 100%; justify-content: space-between; }
    /* Each button takes half the available width minus half the gap to ensure equal outer margins */
    .product-buttons .btn { flex: 0 1 calc(50% - 4px); min-width: 0; }

    /* slightly smaller paddings on mobile for better fit */
    .btn-rect { padding: .45rem .75rem; min-height: 44px; }

    /* ensure icons keep spacing */
    .btn-rect .bi { margin-right: .5rem; }
}

/* Desktop: increase separation between buttons for better spacing */
@media (min-width: 768px) {
    .product-buttons { gap: 20px; }
    .product-buttons .btn-rect + .btn-rect { margin-left: 0; }
}

.header-brand-mark {
    width: 2.95rem;
    height: 2.95rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(22, 93, 74, .10);
    color: var(--brand);
    background: #fafcfb;
    font-size: 1.05rem;
}

.header-brand-logo {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
}

.header-brand-text strong,
.header-brand-text small {
    display: block;
    line-height: 1;
}

.header-brand-text strong {
    font-size: .96rem;
    letter-spacing: .16em;
}

.header-brand-text small {
    font-size: .61rem;
    color: var(--muted);
    letter-spacing: .3em;
    margin-top: .15rem;
}

.header-nav {
    gap: 1.15rem;
    align-items: center;
}

.header-nav .nav-link {
    color: #1f2d29;
    font-size: .86rem;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    transition: color .2s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.nav-has-caret {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}

.nav-has-caret i {
    font-size: .68rem;
    color: #566661;
    transform: translateY(0);
}

.header-nav .nav-link:hover,
.header-nav .nav-link.active {
    color: var(--brand);
    background: transparent;
}

.header-actions {
    flex-shrink: 0;
}

.header-search {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    color: #3a4743;
    background: transparent;
    padding: 0;
}

.header-search:hover {
    background: transparent;
    color: var(--brand);
}

.header-cta {
    padding: .74rem 1.2rem;
    font-size: .85rem;
    white-space: nowrap;
    box-shadow: none;
    border-radius: .3rem;
}

.brand-mark strong,
.brand-mark small {
    display: block;
    line-height: 1;
}

.brand-mark strong {
    font-size: 1rem;
    letter-spacing: .08em;
}

.brand-mark small {
    font-size: .68rem;
    color: var(--muted);
    letter-spacing: .22em;
}

.brand-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.btn-brand {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 0.40rem 1.5rem;
    box-shadow: 0 .8rem 1.6rem rgba(22, 93, 74, .18);
}

.btn-brand:hover {
    background: var(--brand-dark);
    color: #fff;
    border-color: var(--brand-dark);
    transform: translateY(-1px);
}

.projects-cta {
    min-width: 0;
    padding: .6rem 1.15rem;
    font-size: .82rem;
    border-radius: .3rem;
    box-shadow: none;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.projects-cta:hover {
    box-shadow: none;
}

.section-pad {
    padding: 6.25rem 0;

/* Status badges */
.status-badge {
    display: inline-block;
    padding: .25rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: .4rem;
    color: #fff;
}

.status-pending,
.status-pending_payment {
    background: #f0ad4e; /* naranja/amarillo */
    color: #2b2b1f;
}

.status-confirmed {
    background: #0d6efd; /* azul */
}

.status-preparing {
    background: #6f42c1; /* morado */
}

.status-sent {
    background: #0dcaf0; /* cyan */
    color: #06232a;
}

.status-delivered {
    background: #198754; /* verde */
}

.status-cancelled,
.status-canceled {
    background: #dc3545; /* rojo */
}

.status-completed {
    background: #20c997; /* verde claro */
}

.status-paid {
    background: #198754; /* verde */
}

.status-failed {
    background: #d63384; /* rosa fuerte */
}

.status-refunded {
    background: #6c757d; /* gris */
}

/* Compact badges in tables (admin lists) */
.table .status-badge {
    padding: .18rem .45rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: .45rem;
    line-height: 1;
    vertical-align: middle;
    margin-right: .35rem;
}

/* Remove any heavy shadowing on badges inside tables */
.table .status-badge { box-shadow: none; }

/* Compact selects for admin orders list */
.status-select,
.payment-select {
    min-width: 7.5rem; /* ~120px */
    max-width: 10.5rem; /* ~168px */
    width: auto;
    display: inline-block;
}

/* Ensure form-select-sm appearance stays compact */
.form-select-sm.status-select,
.form-select-sm.payment-select {
    padding: .25rem .45rem;
    font-size: .85rem;
}
    position: relative;
}

.section-pad::before,
.fito-section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: min(90vw, 72rem);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(22, 93, 74, .18), transparent);
}

.bg-soft {
    background: var(--soft);
}

.section-kicker,
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .95rem;
    color: var(--brand);
    font-weight: 700;
}

.display-title,
.section-title {
    font-family: 'Cormorant Garamond', serif;
    line-height: .95;
}

.display-title,
.section-title,
.applications-title,
.cta-title,
.intro-title,
.fito-title-wrap h2,
.fito-section h2 {
    text-wrap: balance;
    letter-spacing: -.02em;
}

.display-title {
    font-size: clamp(3.5rem, 8vw, 6.4rem);
    font-weight: 600;
    max-width: 8ch;
}

.section-title {
    font-size: clamp(2.2rem, 4vw, 4rem);
    font-weight: 600;
    max-width: 14ch;
}

.section-text,
.hero-copy {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.hero-section {
    position: relative;
    min-height: 780px;
    background: url('/img/fondo.png') center center / cover no-repeat;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 18, 15, .88) 0%, rgba(5, 18, 15, .68) 46%, rgba(5, 18, 15, .16) 100%),
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08), transparent 26%);
}

.hero-grid {
    min-height: 760px;
    padding-bottom: 4.5rem;
}

.hero-copy-wrap {
    padding-bottom: 2rem;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 6.8vw, 7.6rem);
    font-weight: 600;
    line-height: 1.05;
    max-width: none;
    color: #fff;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.hero-description {
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.45;
    max-width: 32rem;
    margin-top: 1.8rem;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .14);
}

.hero-actions {
    margin-top: 2rem;
}

.hero-btn-primary {
    border-radius: .35rem;
    padding: .95rem 1.45rem;
    box-shadow: none;
    font-size: .92rem;
}

.hero-btn-secondary {
    border-radius: .35rem;
    padding: .95rem 1.4rem;
    font-size: .92rem;
    border-width: 2px;
}

.hero-highlights-col {
    display: flex;
    justify-content: flex-end;
}

.hero-highlights {
    width: 100%;
    max-width: 340px;
    padding-top: 1.2rem;
}

.hero-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.65rem;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(8px);
}

.hero-highlight-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--brand-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.hero-highlight-icon i {
    font-size: 1.15rem;
}

.hero-highlight-copy h3,
.hero-highlight-copy p {
    margin: 0;
}

.hero-highlight-copy h3 {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .25rem;
}

.hero-highlight-copy p {
    color: rgba(255, 255, 255, .82);
    font-size: .86rem;
    line-height: 1.35;
    max-width: 12rem;
}

.feature-badge {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
}

.image-frame img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.section-intro {
    border-top: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 248, 246, .98));
}

.intro-leaf {
    color: var(--brand);
    font-size: 1rem;
    line-height: 1;
}

.intro-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.6rem, 4.2vw, 4.1rem);
    line-height: .92;
    color: #17362f;
    margin: .25rem 0 0;
}

.intro-text {
    color: #42534d;
    max-width: 34rem;
    line-height: 1.85;
}

.intro-btn {
    border-radius: .5rem;
    padding: .85rem 1.3rem;
    font-size: .95rem;
}

.intro-image-frame img {
    border-radius: .8rem !important;
    aspect-ratio: 16 / 8.7;
}

.how-section {
    background: #fff;
}

.how-section .step-card,
.how-section .step-card-illustrated {
    border-radius: 1.25rem;
    border: 1px solid #e2ece7;
    background: linear-gradient(180deg, #fff, #fbfcfb);
    box-shadow: 0 1rem 2.2rem rgba(24, 47, 42, .06);
}

.how-divider {
    height: 1px;
    background: #edf2f0;
    margin-bottom: 2.2rem;
}

.how-header {
    margin-top: .5rem;
}

.how-title {
    max-width: none;
    color: #17362f;
    margin: 0;
}

.how-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    color: var(--brand);
    font-size: .95rem;
    margin-top: .5rem;
}

.how-accent::before,
.how-accent::after {
    content: "";
    width: 3.1rem;
    height: 1px;
    background: rgba(22, 93, 74, .28);
}

.step-card-illustrated {
    box-shadow: none;
    padding: 1.25rem 1.2rem 1.35rem;
}

.step-illustration {
    border-radius: .85rem;
    overflow: hidden;
    background: #f7fbf9;
}

.step-illustration-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9.2;
    object-fit: cover;
}

.water-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    background: linear-gradient(180deg, rgba(189, 221, 229, .15) 0%, rgba(189, 221, 229, .75) 100%);
}

.plant-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .55rem;
    color: #5f8f45;
    font-size: 2.1rem;
}

.plant-row i:nth-child(2) {
    font-size: 2.4rem;
    color: #4f8339;
}

.roots-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 1.6rem;
    margin-top: .15rem;
}

.roots-row span {
    width: 2px;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(106, 122, 116, .7), rgba(106, 122, 116, .15));
}

.fauna-row {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: .2rem;
    color: #62869a;
    font-size: .95rem;
}

.step-caption {
    color: #24413a;
    font-size: 1.05rem;
    line-height: 1.35;
}

.step-arrow {
    position: absolute;
    right: -1.1rem;
    top: 40%;
    z-index: 3;
    color: #5d7d74;
    font-size: 1.25rem;
}

.step-illustration-1 .water-strip {
    height: 22%;
}

.step-illustration-1 .roots-row,
.step-illustration-1 .fauna-row {
    display: none;
}

.step-illustration-2 .water-strip {
    height: 30%;
}

.step-illustration-3 .water-strip {
    height: 44%;
}

.step-card {
    background: #fff;
    padding: 1.5rem;
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 1rem;
}

.benefits-section {
    background: linear-gradient(180deg, #f8fbfa 0%, #eff6f3 100%);
}

.benefits-section .benefits-visual,
.benefits-section .benefits-list,
.benefits-section .fito-info-box,
.benefits-section .fito-cta-box {
    border-radius: 1.35rem;
}

.benefits-title {
    max-width: 12ch;
    color: #17362f;
}

.benefits-text {
    max-width: 32rem;
    color: #4b5f58;
}

.benefits-list {
    display: grid;
    gap: .9rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(22, 93, 74, .08);
    border-radius: 1rem;
    box-shadow: 0 .7rem 1.5rem rgba(24, 47, 42, .05);
    color: #224139;
    font-weight: 600;
    line-height: 1.35;
}

.benefit-check {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    margin-top: .05rem;
}

.benefits-visual {
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(22, 93, 74, .08);
}

.video-trigger-card {
    position: relative;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    text-align: left;
    cursor: pointer;
}

.video-trigger-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1rem;
}

.video-trigger-overlay {
    position: absolute;
    inset: 0;
    display: block;
}

.video-trigger-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 27, 22, .12), rgba(8, 27, 22, .34));
    pointer-events: none;
}

.video-trigger-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%);
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 999px;
    background: rgba(15, 102, 84, .92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    box-shadow: 0 1rem 2rem rgba(11, 74, 60, .36);
    transition: transform .2s ease, background .2s ease;
}

.video-trigger-label {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .36);
}

.video-trigger-card:hover .video-trigger-play {
    transform: translate(-50%, -54%) scale(1.06);
    background: rgba(9, 90, 73, .94);
}

.video-trigger-card,
.product-card,
.before-after-card,
.fito-card,
.plant-shop-card,
.fito-info-box,
.fito-cta-box,
.faq-accordion .accordion-item,
.app-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.video-trigger-card:hover,
.product-card:hover,
.before-after-card:hover,
.fito-card:hover,
.plant-shop-card:hover,
.fito-info-box:hover,
.fito-cta-box:hover,
.faq-accordion .accordion-item:hover,
.app-card:hover {
    transform: translateY(-4px);
}

.benefits-video-modal-content {
    border: 0;
    border-radius: 1rem;
}

.benefits-video-modal-wrap {
    overflow: hidden;
    border-radius: .9rem;
    aspect-ratio: 16 / 9;
    background: #000;
}

.benefits-video-modal-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.benefits-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.benefits-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    color: #fff;
    background: rgba(22, 93, 74, .94);
    box-shadow: 0 .9rem 1.8rem rgba(22, 93, 74, .22);
}

.benefits-stat strong {
    font-size: 1.1rem;
    line-height: 1;
}

.benefits-stat span {
    font-size: .88rem;
    line-height: 1.3;
}

.benefits-stat-alt {
    background: rgba(13, 64, 51, .96);
}

.video-card {
    position: relative;
}

.play-badge {
    position: absolute;
    inset: auto auto 50% 50%;
    transform: translate(-50%, 50%);
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999px;
    background: rgba(22, 93, 74, .92);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 1rem 2rem rgba(22, 93, 74, .32);
}

.video-label {
    position: absolute;
    inset: auto 50% 1rem 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    background: rgba(0, 0, 0, .28);
    padding: .4rem .9rem;
    border-radius: 999px;
}

.applications-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .75rem;
}

.applications-header {
    margin-bottom: 1.25rem;
}

.applications-header {
    text-align: left;
}

.applications-kicker {
    display: block;
    margin-bottom: .5rem;
}

.applications-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.05rem, 3.3vw, 3rem);
    line-height: .96;
    color: #17362f;
    margin: 0 0 .35rem;
}

.applications-underline {
    display: block;
    width: 4.2rem;
    height: 2px;
    border-radius: 999px;
    background: rgba(22, 93, 74, .35);
}

.application-item {
    flex: 0 0 calc((100% - 5.95rem) / 8);
    min-width: 0;
}

.app-card {
    position: relative;
    border-radius: 1.2rem;
    overflow: hidden;
    height: 150px;
    box-shadow: 0 .8rem 1.8rem rgba(24, 47, 42, .08);
    border: 1px solid rgba(255, 255, 255, .65);
}

.app-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-card span {
    position: absolute;
    inset: auto 0 0 0;
    padding: .75rem 1rem;
    background: linear-gradient(to top, rgba(10, 24, 20, .82), rgba(10, 24, 20, 0));
    color: #fff;
    font-weight: 600;
    font-size: .78rem;
    text-align: center;
    line-height: 1.2;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.products-carousel {
    padding-bottom: 2rem;
}

.products-carousel .product-card {
    border: 1px solid #e4ece8;
}

.products-carousel .carousel-item .product-card {
    max-width: 24rem;
    margin: 0 auto;
}

.products-carousel-indicators {
    margin-bottom: -.2rem;
}

.products-carousel-indicators [data-bs-target] {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background-color: rgba(22, 93, 74, .32);
    border: 0;
}

.products-carousel-indicators .active {
    background-color: var(--brand);
}

.products-carousel-control {
    width: 2.3rem;
    opacity: 1;
}

.products-carousel-control .carousel-control-prev-icon,
.products-carousel-control .carousel-control-next-icon {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background-color: rgba(10, 35, 29, .55);
    background-size: 52% 52%;
}

.products-carousel-control:hover .carousel-control-prev-icon,
.products-carousel-control:hover .carousel-control-next-icon {
    background-color: rgba(10, 35, 29, .75);
}

.product-item {
    min-width: 0;
}

.product-card {
    background: #fff;
    border-radius: 1.4rem;
    overflow: hidden;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .07);
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.product-custom {
    border: 2px dashed rgba(22, 93, 74, .2);
    background: linear-gradient(180deg, #fff, #f7fbf9);
}

.text-brand {
    color: var(--brand);
}

.before-after-card {
    background: #fff;
    border-radius: 1.4rem;
    padding: 1rem 1rem .85rem;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .07);
    border: 1px solid #e4ece8;
}

.before-after-frame {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 16 / 8;
}

.before-after-panel {
    position: relative;
    height: 100%;
    background: #f7faf8;
}

.before-after-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.before-after-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04);
}

.before-after-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #fff;
    border: 2px solid rgba(28, 53, 47, .25);
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12);
}

.before-after-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: .8rem;
}

.chip {
    position: static;
    justify-self: center;
    padding: .36rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}

.chip-before { background: rgba(28, 53, 47, .9); }
.chip-after { background: rgba(22, 93, 74, .9); }

@media (max-width: 991.98px) {
    .before-after-frame,
    .before-after-panel {
        min-height: 190px;
    }
}

.stats-band {
    background: linear-gradient(135deg, var(--brand-dark), #0c5443);
    padding: 2.2rem 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.stats-row {
    align-items: center;
    justify-content: center;
}

.stat-col {
    padding: 0 3.5rem;
}

.stat-divider {
    width: 1px;
    height: 3rem;
    background: rgba(255, 255, 255, .25);
    flex-shrink: 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item p,
.stat-item .stat-number {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}

.stats-row > [class*='col-'] {
    display: flex;
    justify-content: center;
}

.stat-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: 0 0 2.8rem;
}

.stat-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 2.8vw, 2.8rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: .15rem;
}

.stat-item p {
    font-size: .78rem;
    line-height: 1.25;
    opacity: .82;
}

/* FAQ grid */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 3rem;
    align-items: start;
}

.faq-center-line {
    width: 1px;
    background: #d6e4de;
    align-self: stretch;
}

.faq-col {
    display: flex;
    flex-direction: column;
}

.faq-accordion .accordion-item {
    border: 0;
    overflow: hidden;
    box-shadow: 0 .9rem 1.8rem rgba(24, 47, 42, .05);
    border: 1px solid #e4ece8;
    border-radius: 1rem;
}

.faq-accordion .accordion-button {
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    padding: 1.2rem 1.4rem;
}

.faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(22, 93, 74, .08);
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--brand);
    background: #fff;
    box-shadow: none;
}

.faq-accordion .accordion-body {
    background: #fff;
    color: var(--muted);
    line-height: 1.8;
}

.cta-banner {
    position: relative;
    min-height: 14.5rem;
    display: flex;
    align-items: center;
    padding: 2.6rem 0;
    background: linear-gradient(rgba(10, 24, 20, .5), rgba(10, 24, 20, .5)), url('../img/proyecto_medida.png') center/cover no-repeat;
}

.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 28, 23, .22), rgba(8, 28, 23, .06));
}

.cta-content {
    position: relative;
    z-index: 1;
    padding: 1rem 1.2rem;
    border-radius: 1.2rem;
    background: rgba(10, 24, 20, .16);
    backdrop-filter: blur(8px);
}

.cta-content {
    max-width: 49rem;
    margin-inline: auto;
    text-align: center;
}

.cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.35rem, 4.2vw, 3.8rem);
    font-weight: 600;
    line-height: 1.03;
    max-width: 40ch;
    margin: 0 auto;
    text-wrap: balance;
}

.cta-btn {
    border-radius: .45rem;
    padding: .9rem 2rem;
    box-shadow: 0 .8rem 1.6rem rgba(22, 93, 74, .3);
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
}

.site-footer {
    background: #0c211c;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(22, 93, 74, .18), transparent 28%);
    pointer-events: none;
}

.site-footer .container,
.site-footer .row {
    position: relative;
    z-index: 1;
}

.brand-mark-footer strong,
.brand-mark-footer small {
    color: #fff;
}

.footer-title {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(255,255,255,.75);
}

.footer-list li {
    margin-bottom: .7rem;
}

.footer-list a {
    color: rgba(255,255,255,.75);
}

.footer-list a:hover,
.social-links a:hover {
    color: #fff;
}

.contact-list i {
    margin-right: .6rem;
}

.social-links a {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
}

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
}

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner-inner {
    background: #ffffff;
    border: 1px solid rgba(22, 93, 74, .16);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(16, 36, 31, .18);
    padding: 1rem;
    display: grid;
    gap: .9rem;
}

.cookie-banner-copy h2 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.cookie-banner-copy p {
    margin: 0;
    color: #3e514a;
    font-size: .9rem;
    line-height: 1.45;
}

.cookie-links {
    margin-top: .45rem !important;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.cookie-links a {
    color: var(--brand);
    font-weight: 600;
}

.cookie-banner-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cookie-prefs {
    position: fixed;
    inset: 0;
    z-index: 1210;
    background: rgba(8, 20, 17, .42);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cookie-prefs-card {
    width: min(100%, 42rem);
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 1rem 2.4rem rgba(11, 26, 22, .3);
}

.cookie-prefs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
}

.cookie-prefs-header h3 {
    margin: 0;
    font-size: 1.03rem;
}

.cookie-prefs-text {
    font-size: .9rem;
    color: #4f625c;
    line-height: 1.45;
    margin-bottom: .9rem;
}

.cookie-toggle {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    border: 1px solid #e3ece8;
    border-radius: .8rem;
    padding: .75rem .8rem;
    margin-bottom: .6rem;
}

.cookie-toggle strong {
    display: block;
    font-size: .92rem;
    color: #213a33;
}

.cookie-toggle small {
    display: block;
    font-size: .82rem;
    color: #5d716a;
    margin-top: .1rem;
    line-height: 1.35;
}

.cookie-toggle input {
    margin-top: .2rem;
    accent-color: var(--brand);
}

.cookie-toggle.is-locked {
    background: #f7fbf9;
}

.cookie-prefs-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .3rem;
}

.whatsapp-float {
    position: fixed;
    right: 1.25rem;
    bottom: 4.75rem; /* encima del botón de volver arriba */
    z-index: 1190;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.85rem;
    text-decoration: none;
    box-shadow: 0 .6rem 1.4rem rgba(16, 36, 31, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 .8rem 1.8rem rgba(16, 36, 31, .3);
}

.scroll-top-btn {
    position: fixed;
    right: 1.5rem; /* centrado bajo el botón de WhatsApp */
    bottom: 1.25rem;
    z-index: 1190;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 .6rem 1.4rem rgba(16, 36, 31, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.scroll-top-btn:hover,
.scroll-top-btn:focus-visible {
    filter: brightness(1.12);
}

.cookie-manage-btn {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1195;
    border: 1px solid rgba(22, 93, 74, .3);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    box-shadow: 0 .55rem 1.2rem rgba(16, 36, 31, .15);
}

@media (max-width: 991.98px) {
    .display-title {
        max-width: none;
    }

    .hero-section {
        min-height: auto;
    }

    .hero-grid {
        min-height: auto;
        padding-top: 4.5rem;
        padding-bottom: 4rem;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(5,18,15,.82) 0%, rgba(5,18,15,.74) 100%);
    }

    .hero-highlights-col {
        justify-content: flex-start;
        margin-top: 2rem;
    }

    .hero-highlights {
        max-width: 100%;
        padding-top: 0;
    }

    .section-pad {
        padding: 4rem 0;
    }

    .hero-title {
        max-width: none;
    }

    .hero-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: .7rem;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        min-width: 12.5rem;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
    }

    .intro-title {
        max-width: none;
    }

    .step-card-illustrated {
        padding: 1rem;
    }

    .step-illustration-image {
        aspect-ratio: 16 / 10;
    }

    .benefits-stats-grid {
        grid-template-columns: 1fr;
    }

    .benefits-visual {
        padding: .85rem;
    }

    .video-trigger-play {
        width: 4.2rem;
        height: 4.2rem;
        font-size: 1.9rem;
    }

    .applications-row {
        overflow-x: auto;
        padding-bottom: .35rem;
        scroll-snap-type: x mandatory;
    }

    .application-item {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }

    .before-after-frame {
        aspect-ratio: 16 / 10;
    }

    .stats-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch !important;
        gap: .9rem .8rem !important;
    }

    .stat-col {
        width: calc(50% - .4rem);
        max-width: 16.5rem;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .stat-divider {
        display: none;
    }

    .stats-row > [class*='col-'] {
        justify-content: center;
    }

    .stat-item {
        width: 100%;
        justify-content: flex-start;
        gap: .8rem;
    }

    .stat-item p {
        max-width: none;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .products-carousel .carousel-item .product-card {
        max-width: 30rem;
    }

    .cta-banner {
        min-height: 12rem;
        padding: 2.3rem 0;
        background-position: center;
    }

    .cta-title {
        font-size: clamp(1.85rem, 5.8vw, 2.7rem);
        max-width: 24ch;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem 0;
    }

    .faq-center-line {
        display: none;
    }

    .cookie-banner {
        left: .65rem;
        right: .65rem;
        bottom: max(.65rem, env(safe-area-inset-bottom));
        z-index: 1300;
    }

    .cookie-banner-inner {
        max-height: 78vh;
        overflow: auto;
    }

    .cookie-banner-actions {
        justify-content: stretch;
    }

    .cookie-banner-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .hero-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 50%;
        flex: 1 1 0;
        max-width: 12rem;
        min-width: 0;
        min-height: 3rem;
        padding: .8rem .9rem;
        font-size: .84rem;
        white-space: nowrap;
    }

    .products-carousel {
        padding-bottom: 1.7rem;
    }

    .products-carousel .carousel-item .product-card {
        max-width: 100%;
    }

    .cookie-prefs {
        padding: .7rem;
    }

    .cookie-prefs-card {
        padding: .9rem;
    }

    .cookie-prefs-actions {
        flex-direction: column;
    }

    .cookie-prefs-actions .btn {
        width: 100%;
    }
}

/* ===== Home v2 · Fitofloats ===== */
.fito-logo {
    width: 2.8rem;
    height: 2.8rem;
    object-fit: contain;
}

.fito-brand strong,
.fito-brand small {
    display: block;
    line-height: 1;
}

.fito-brand strong {
    font-size: .95rem;
    letter-spacing: .14em;
}

.fito-brand small {
    font-size: .58rem;
    color: #6a7a74;
    letter-spacing: .25em;
    margin-top: .18rem;
}

.fito-navbar {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #dfe8e3;
    box-shadow: 0 1px 0 rgba(17, 44, 37, .03);
    padding: .85rem 0;
}

.fito-main-nav {
    gap: .3rem;
    align-items: center;
}

.fito-main-nav .nav-link {
    color: #13201d;
    font-size: 1.03rem;
    font-weight: 500;
    padding: .45rem .9rem;
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease;
}

.fito-main-nav .nav-link:hover,
.fito-main-nav .nav-link:focus {
    color: var(--brand);
    background: rgba(22, 108, 87, .08);
}

/* Sección o página en la que se encuentra el usuario. */
.fito-main-nav .nav-link.active {
    color: #fff;
    background: var(--brand);
}

/* Desplegable de Tienda */
.fito-nav-dropdown {
    border: 1px solid #deebe5;
    border-radius: .9rem;
    padding: .4rem;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .12);
    min-width: 13rem;
}

.fito-nav-dropdown .dropdown-item {
    border-radius: .6rem;
    padding: .55rem .8rem;
    font-weight: 500;
    color: #13201d;
}

.fito-nav-dropdown .dropdown-item:hover,
.fito-nav-dropdown .dropdown-item:focus {
    background: rgba(22, 108, 87, .08);
    color: var(--brand);
}

.fito-nav-dropdown .dropdown-item.active,
.fito-nav-dropdown .dropdown-item:active {
    background: var(--brand);
    color: #fff;
}

/* Que el menú fijo no tape el título al saltar a una sección. */
#productos,
#plantas,
#funciona,
#asesoria {
    scroll-margin-top: 90px;
}

.fito-header-actions {
    flex-shrink: 0;
}

.fito-quote-btn {
    background: #166c57;
    color: #fff;
    border: 1px solid #166c57;
    border-radius: 999px;
    padding: .75rem 1.45rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.fito-quote-btn:hover,
.fito-quote-btn:focus {
    background: #115846;
    color: #fff;
    border-color: #115846;
}

@media (max-width: 991.98px) {
    .fito-main-nav {
        gap: .15rem;
        margin: .7rem 0;
    }

    .fito-main-nav .nav-link {
        padding: .55rem .9rem;
        font-size: .98rem;
    }

    .fito-header-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: .6rem;
    }

    .fito-quote-btn {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: .35rem;
    }
}

.fito-hero {
    background: linear-gradient(120deg, rgba(11, 62, 49, .15), rgba(17, 95, 76, .05)), url('/img/fondo.png') center/cover no-repeat;
    min-height: clamp(260px, 45vw, 590px);
    display: flex;
    align-items: flex-end;
    padding: 2rem 0;
}

.fito-hero-inner {
    display: flex;
    justify-content: flex-start;
}

/* Tarjeta de beneficios baja y alargada, abajo a la izquierda, para no tapar la imagen. */
.fito-hero-card--compact {
    max-width: 620px;
    padding: .85rem 1.1rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.fito-hero-card--compact h2 {
    font-size: .95rem;
    margin-bottom: .6rem;
}

.fito-hero-card--compact ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem 1.1rem;
}

.fito-hero-card--compact li {
    font-size: .8rem;
    line-height: 1.35;
}

.fito-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .17em;
    font-size: .76rem;
    font-weight: 700;
    opacity: .92;
    margin-bottom: .8rem;
}

.fito-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.1rem, 5vw, 4.5rem);
    line-height: 1.04;
    margin-bottom: 1rem;
}

.fito-hero p {
    max-width: 44rem;
    color: rgba(255, 255, 255, .9);
    line-height: 1.7;
}

.fito-hero-card {
    background: rgba(255, 255, 255, .96);
    border-radius: 1rem;
    padding: 1.35rem 1.2rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}

.fito-hero-card h2 {
    font-size: 1.12rem;
    margin-bottom: .95rem;
}

.fito-hero-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

.fito-hero-card li {
    display: flex;
    gap: .6rem;
    font-size: .92rem;
    color: #2a3a35;
}

.fito-hero-card i {
    color: var(--brand);
}

.fito-section {
    padding: 5rem 0;
    position: relative;
}

.fito-soft {
    background: #f4f8f6;
}

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

.fito-title-wrap h2,
.fito-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.9rem, 3.8vw, 3.15rem);
}

.fito-section-lead {
    max-width: 42rem;
    margin-bottom: 0;
    color: #596a64;
    line-height: 1.75;
}

.fito-card {
    border: 1px solid #e4ece8;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 26px rgba(14, 60, 49, .06);
}

.fito-card-media img {
    display: block;
    width: 100%;
    height: 220px;
    /* Producto completo, sin recortar */
    object-fit: contain;
    padding: .75rem;
    background: #fff;
}

/* Plantas: foto a sangre, llenando la tarjeta */
.fito-card-media--cover img {
    object-fit: cover;
    padding: 0;
}

.fito-card-body {
    padding: 1.1rem 1.15rem 1.2rem;
}

.fito-card-body h3 {
    font-size: 1.18rem;
    margin-bottom: .45rem;
}

.fito-card-body p {
    color: #5c6c66;
    font-size: .94rem;
    line-height: 1.6;
}

.fito-card-body a {
    color: var(--brand);
    font-weight: 600;
}

.fito-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.fito-tags span {
    background: #fff;
    border: 1px solid #d7e4de;
    border-radius: 999px;
    padding: .42rem .8rem;
    font-size: .88rem;
}

.fito-tags small {
    color: #667871;
}

.plant-shop-card {
    border: 1px solid #dfeae4;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f9fcfa 100%);
    box-shadow: 0 12px 30px rgba(10, 54, 44, .07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.plant-shop-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1rem 0;
}

.plant-shop-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    background: rgba(22, 93, 74, .08);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 700;
    padding: .35rem .65rem;
    letter-spacing: .04em;
}

.plant-shop-avatar {
    display: none;
}

.plant-shop-avatar-wrap {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1rem;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid #d8e6df;
    background: #eef7f2;
}

.plant-shop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.plant-shop-body {
    padding: 1rem 1rem 1.1rem;
    flex: 1 1 auto;
}

.plant-shop-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    margin-bottom: .2rem;
}

.plant-shop-latin {
    color: var(--brand);
    font-weight: 600;
    margin-bottom: .7rem;
}

.plant-shop-note {
    color: #5c6c66;
    line-height: 1.65;
    margin-bottom: 0;
}

.plant-shop-footer {
    padding: 0 1rem 1rem;
}

.plant-shop-footer .btn {
    border-radius: .8rem;
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.plant-store-carousel {
    position: relative;
    padding-top: .5rem;
}

.plant-store-indicators {
    position: static;
    margin: 0 0 1.4rem;
    justify-content: center;
    gap: .45rem;
}

.plant-store-indicators [data-bs-target] {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background-color: #b8cbc2;
    opacity: 1;
}

.plant-store-indicators .active {
    width: 1.8rem;
    background-color: var(--brand);
}

.plant-store-row {
    padding: 0 .15rem 1rem;
}

.plant-store-control {
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
}

.plant-store-control .carousel-control-prev-icon,
.plant-store-control .carousel-control-next-icon {
    background-size: 1.1rem 1.1rem;
    background-color: var(--brand);
    border-radius: 999px;
    width: 3rem;
    height: 3rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
}

.plant-store-control.carousel-control-prev {
    left: -1rem;
}

.plant-store-control.carousel-control-next {
    right: -1rem;
}

.fito-steps {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.fito-steps li {
    margin-bottom: .7rem;
    color: #30413c;
    line-height: 1.6;
}

.how-flow-section {
    background: #fff;
}

.how-flow-grid {
    position: relative;
}

.how-flow-card {
    position: relative;
    text-align: center;
    padding-top: 1.4rem;
}

.how-flow-step {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.how-flow-media {
    width: 100%;
    border: 1px solid #e2ece7;
    background: #f6fbf9;
    box-shadow: 0 .9rem 1.8rem rgba(24, 47, 42, .08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-flow-card img {
    width: 100%;
    height: 100%;
}

.how-flow-card h3 {
    margin: 1rem auto 0;
    max-width: 19rem;
    font-size: clamp(1.18rem, 1.5vw, 1.9rem);
    line-height: 1.35;
    font-family: 'Cormorant Garamond', serif;
    color: #183e33;
}

.how-flow-arrow {
    position: absolute;
    right: -1rem;
    top: 48%;
    transform: translateY(-50%);
    color: #2d6a5c;
    font-size: 1.25rem;
    z-index: 2;
}

.how-flow-seo {
    border: 1px solid #deebe5;
    border-radius: 1rem;
    background: #fbfdfc;
    padding: 1rem 1.1rem;
}

.how-flow-seo h3 {
    font-size: 1.2rem;
    margin-bottom: .6rem;
    color: #184338;
}

.how-flow-seo p,
.how-flow-seo li {
    color: #37514a;
    line-height: 1.65;
}

.how-flow-seo ol {
    margin-bottom: .75rem;
}

.fito-info-box,
.fito-cta-box {
    background: #fff;
    border: 1px solid #e2ece7;
    border-radius: 1rem;
    padding: 1.25rem;
}

.fito-cta-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(247, 251, 249, .98));
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .06);
}

.fito-info-box ul {
    margin: 0;
    padding-left: 1.1rem;
}

.fito-info-box li {
    margin-bottom: .55rem;
    color: #354843;
}

.fito-use-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid #deebe5;
    border-radius: .8rem;
    padding: .8rem .88rem;
    font-weight: 500;
}

.fito-use-item:hover {
    border-color: rgba(22, 93, 74, .18);
    box-shadow: 0 .8rem 1.5rem rgba(24, 47, 42, .06);
}

.fito-use-item i {
    color: var(--brand);
}

.fito-services-intro {
    max-width: 42rem;
    margin: .5rem auto 0;
    color: var(--muted, #5b6b66);
}

.fito-service-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.fito-service-media img {
    width: 100%;
    height: 100%;
    transition: transform .4s ease;
}

.fito-service-card:hover .fito-service-media img {
    transform: scale(1.05);
}

.fito-apps-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .12);
}

.eco-info-section {
    padding: 0;
    margin: 1rem 0 0;
}

.eco-visual-identity {
    width: 100%;
    min-height: clamp(320px, 48vw, 620px);
    position: relative;
    background:
        linear-gradient(180deg, rgba(8, 44, 37, .15), rgba(8, 44, 37, .35)),
        url('/img/bloque1_img.png') center/cover no-repeat;
}

.eco-visual-identity::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 33, 27, .58), rgba(7, 33, 27, .62));
}

.eco-visual-overlay {
    position: relative;
    z-index: 1;
    min-height: clamp(320px, 48vw, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.eco-overlay-content {
    width: min(980px, 100%);
    text-align: center;
}

.eco-visual-overlay h2,
.eco-visual-overlay h3,
.eco-visual-overlay .fito-section-lead,
.eco-visual-overlay p,
.eco-visual-overlay li,
.eco-visual-overlay span {
    color: #fff;
}

.eco-visual-overlay .eco-check-item {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(2px);
}

.eco-visual-overlay .row.g-3 > [class*='col-'] {
    display: flex;
}

.eco-visual-overlay .eco-result-item {
    width: 100%;
    min-height: 78px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
}

.eco-visual-overlay .eco-result-item span {
    display: block;
    width: 100%;
    line-height: 1.35;
}

.eco-visual-overlay .eco-check-item i {
    color: #b9f7df;
}

.eco-visual-overlay .fito-info-box {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(2px);
}

.eco-overlay-note {
    margin-top: 1rem;
    color: rgba(255, 255, 255, .95);
}

.benefits-video-section {
    background: #eff6f3;
}

.benefits-stack {
    display: grid;
    gap: 1rem;
}

.benefit-pill {
    background: #fff;
    border: 1px solid #deebe5;
    border-radius: 1rem;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.12rem;
    font-weight: 600;
    color: #173f34;
}

.benefit-check {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.benefits-video-card {
    min-height: clamp(260px, 34vw, 420px);
    border-radius: 1.2rem;
    border: 1px solid #d8e8e1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background:
        linear-gradient(180deg, rgba(10, 43, 36, .16), rgba(10, 43, 36, .34)),
        url('/img/bloque1_img.png') center/cover no-repeat;
    box-shadow: 0 1rem 2.2rem rgba(21, 46, 39, .12);
}

.benefits-video-play {
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    background: rgba(22, 93, 74, .85);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.benefits-video-label {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.9rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}

.eco-check-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px solid #dfebe6;
    border-radius: .85rem;
    background: #fff;
}

.eco-check-item i {
    color: var(--brand);
    margin-top: .06rem;
}

.eco-feature-card {
    border: 1px solid #deebe5;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem 1.05rem;
    box-shadow: 0 .85rem 1.8rem rgba(24, 47, 42, .06);
}

.eco-feature-card h3 {
    font-size: 1.05rem;
    margin-bottom: .45rem;
    color: #183b31;
}

.eco-feature-card p {
    margin: 0;
    color: #55665f;
    line-height: 1.65;
}

/* Pasos de instalación de la home: imagen a lo ancho y toda la tarjeta enlaza a /instalacion. */
.eco-step-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.eco-step-card:hover,
.eco-step-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 1.1rem 2.2rem rgba(24, 47, 42, .12);
}

.eco-step-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Las fotos de instalación son infografías: se muestran completas, sin recortar */
    object-fit: contain;
    background: #fff;
    display: block;
}

.eco-step-body {
    padding: 1rem 1.05rem 1.15rem;
}

.eco-step-body .how-flow-step {
    margin-top: -2.3rem;
    position: relative;
    box-shadow: 0 0 0 4px #fff;
}

.eco-use-list {
    margin: 0;
    padding-left: 1.1rem;
}

.eco-use-list li {
    margin-bottom: .45rem;
    color: #3f524b;
    line-height: 1.55;
}

.fito-footer {
    background: linear-gradient(135deg, #0f2b24, #0b221c);
    color: rgba(255, 255, 255, .88);
    padding: 2rem 0;
}

.fito-footer a {
    color: #b9e8d8;
}

.fito-footer strong {
    display: block;
    font-size: 1.02rem;
    margin-bottom: .35rem;
}

.fito-footer p {
    color: rgba(255, 255, 255, .72);
    line-height: 1.55;
}

.fito-footer .text-md-end a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.15rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(185, 232, 216, .22);
    transition: transform .2s ease, background .2s ease;
}

.fito-footer .text-md-end a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 991.98px) {
    .fito-hero {
        padding: 1.25rem 0;
    }

    .plant-shop-card-top {
        align-items: center;
    }

    .plant-shop-avatar-wrap {
        width: 5.8rem;
        height: 5.8rem;
    }

    .plant-store-row {
        display: block;
        padding: 0 0 .9rem;
    }

    .plant-store-row > [class*='col-'] {
        display: none;
    }

    .plant-store-row > [class*='col-']:first-child {
        display: block;
        width: 100%;
        max-width: 32rem;
        margin: 0 auto;
    }

    .plant-store-control.carousel-control-prev {
        left: -.5rem;
    }

    .plant-store-control.carousel-control-next {
        right: -.5rem;
    }

    .section-pad {
        padding: 4.8rem 0;
    }

    .hero-section {
        min-height: auto;
    }

    .hero-grid {
        min-height: auto;
        padding: 5rem 0 4rem;
    }

    .applications-row {
        overflow-x: auto;
        padding-bottom: .6rem;
    }

    .how-flow-card h3 {
        font-size: 1.7rem;
    }

    .how-flow-media {
        aspect-ratio: 4 / 3;
    }

    .benefits-video-label {
        font-size: 1.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Ecommerce pages ===== */
.fito-footer-grid h3 {
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .75rem;
}

.fito-footer-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .45rem;
}

.fito-footer-grid a {
    color: rgba(255, 255, 255, .76);
}

.fito-footer-grid a:hover {
    color: #fff;
}

/* Página o sección actual en el pie. */
.fito-footer-grid a.active {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: .15rem .65rem;
    margin-left: -.65rem;
}

.fito-footer-sep {
    border-color: rgba(255, 255, 255, .14);
    margin: 1.4rem 0 1rem;
}

.fito-footer-copy {
    color: rgba(255, 255, 255, .62);
    font-size: .86rem;
}

.shop-hero,
.legal-hero {
    padding: 4.6rem 0 2rem;
    background: linear-gradient(120deg, rgba(11, 62, 49, .88), rgba(17, 95, 76, .75)), url('/img/fondo.png') center/cover no-repeat;
    color: #fff;
}

.shop-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .74rem;
    font-weight: 700;
    margin-bottom: .7rem;
}

.shop-hero h1,
.legal-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.3rem);
    margin-bottom: .7rem;
}

.shop-hero p,
.legal-hero p {
    color: rgba(255, 255, 255, .9);
    max-width: 42rem;
}

.shop-section,
.legal-section {
    padding: 2.3rem 0 5rem;
}

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.shop-toolbar a {
    border: 1px solid #d8e7e1;
    background: #fff;
    color: #2a4039;
    border-radius: 999px;
    padding: .48rem .9rem;
    font-size: .86rem;
    font-weight: 600;
}

.shop-toolbar a.is-active,
.shop-toolbar a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.shop-toolbar .shop-cart-link {
    margin-left: auto;
}

.shop-card {
    background: #fff;
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 .8rem 1.8rem rgba(24, 47, 42, .06);
}

.shop-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Fitofloats: producto completo, sin recortar (las plantas siguen a sangre) */
.shop-card-image--contain {
    object-fit: contain;
    padding: .75rem;
    background: #fff;
}

.shop-card-body {
    padding: 1rem;
}

.shop-card-body h2,
.shop-card-body h3 {
    font-size: 1.1rem;
    margin: .35rem 0 .4rem;
}

.shop-card-body p {
    color: #5e6f69;
    font-size: .92rem;
    min-height: 2.8rem;
}

.shop-card-type {
    display: inline-block;
    background: rgba(22, 93, 74, .1);
    color: var(--brand);
    border-radius: 999px;
    padding: .28rem .6rem;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.shop-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-card-bottom strong {
    color: #183a31;
}

.shop-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    font-size: .88rem;
    color: #5e6f69;
}

.shop-breadcrumb a {
    color: var(--brand);
}

.shop-product-media {
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .08);
}

.shop-product-media img {
    width: 100%;
    max-height: 580px;
    object-fit: cover;
}

.shop-product-panel {
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    padding: 1.15rem;
    background: #fff;
    box-shadow: 0 .9rem 1.8rem rgba(24, 47, 42, .06);
}

.shop-product-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-top: .55rem;
}

.shop-product-sku {
    color: #687a73;
    font-size: .9rem;
}

.shop-product-description {
    color: #395048;
    line-height: 1.7;
}

.shop-product-meta {
    display: grid;
    gap: .45rem;
    margin: .5rem 0 .35rem;
}

.shop-product-meta span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #2d5347;
    font-size: .93rem;
}

.shop-product-meta i {
    color: var(--brand);
}

.shop-product-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: #163c32;
    margin: .9rem 0;
}

.shop-product-buy {
    display: grid;
    gap: .75rem;
    max-width: 22rem;
}

.shop-related-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.shop-empty {
    padding: 1.3rem;
    border-radius: 1rem;
    border: 1px solid #e2ece8;
    background: #fff;
}

.shop-cart-table-wrap {
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}

.shop-cart-table th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #586a63;
    background: #f6faf8;
}

.shop-cart-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: .7rem;
    object-fit: cover;
}

.shop-cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    background: #fff;
}

.shop-cart-summary span {
    display: block;
    color: #61716b;
    font-size: .85rem;
}

.shop-cart-summary strong {
    font-size: 1.35rem;
    color: #163b31;
}

.cart-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.cart-count-badge--light {
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(255, 255, 255, .35);
}

.shop-cart-summary-card,
.shop-checkout-card {
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    background: #fff;
    padding: 1.2rem;
}

.shop-cart-summary-card h2,
.shop-checkout-card h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.shop-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    margin-bottom: .8rem;
}

.shop-summary-line span {
    color: #5d6f68;
}

.shop-summary-line strong {
    color: #193e33;
}

.shop-summary-line-total strong {
    font-size: 1.3rem;
}

.shop-checkout-form .form-control {
    border-color: #dce9e3;
}

.shop-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.shop-payment-option {
    border: 1px solid #dbe9e2;
    border-radius: .8rem;
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
}

.shop-payment-option:has(input:checked) {
    border-color: var(--brand);
    background: rgba(22, 93, 74, .06);
}

.shop-checkout-terms {
    border: 1px solid #dce9e3;
    border-radius: .8rem;
    padding: .75rem .9rem;
    background: #fbfdfc;
}

.shop-checkout-terms a {
    color: var(--brand);
}

.shop-checkout-success {
    max-width: 42rem;
    border: 1px solid #deebe5;
    border-radius: 1rem;
    background: #fff;
    padding: 2rem 1.2rem;
    box-shadow: 0 .9rem 1.8rem rgba(24, 47, 42, .06);
}

.shop-checkout-success h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: .35rem 0 .75rem;
}

.shop-checkout-success p {
    color: #4b6159;
}

.shop-checkout-success-kicker {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--brand);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .shop-payment-grid {
        grid-template-columns: 1fr;
    }

    .shop-cart-table-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .shop-cart-table {
        margin-bottom: 0;
    }

    .shop-cart-table thead {
        display: none;
    }

    .shop-cart-table tbody,
    .shop-cart-table tr,
    .shop-cart-table td {
        display: block;
        width: 100%;
    }

    .shop-cart-table tr {
        border: 1px solid #e2ece8;
        border-radius: 1rem;
        background: #fff;
        padding: .95rem;
        margin-bottom: .9rem;
        box-shadow: 0 .45rem .95rem rgba(24, 47, 42, .04);
    }

    .shop-cart-table tr:last-child {
        margin-bottom: 0;
    }

    .shop-cart-table td {
        border: 0;
        padding: .4rem 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .8rem;
    }

    .shop-cart-table td::before {
        content: attr(data-label);
        color: #5c6e67;
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 700;
        flex: 0 0 5.25rem;
    }

    .shop-cart-product-cell {
        width: 100%;
        justify-content: flex-end;
    }

    .shop-cart-qty-form {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .shop-cart-qty-form .form-control {
        width: 5.5rem;
        flex: 0 0 auto;
    }

    .shop-cart-table td:last-child form {
        margin-left: auto;
    }
}
}

.auth-menu-btn {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #d4e2dc;
}

.auth-menu-btn::after {
    display: none;
}

.auth-menu-btn i {
    font-size: 1.2rem;
    color: #21453b;
}

.auth-dropdown-menu {
    border: 1px solid #dbe9e2;
    border-radius: .85rem;
    box-shadow: 0 .9rem 1.8rem rgba(24, 47, 42, .12);
    padding: .45rem;
    min-width: 13rem;
}

.auth-dropdown-menu .dropdown-item {
    border-radius: .6rem;
    padding: .5rem .7rem;
}

.cart-icon-btn {
    position: relative;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cart-icon-btn i {
    font-size: 1.08rem;
}

.cart-icon-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: #ff6a3d;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .25rem;
    border: 2px solid #fff;
}

.legal-card {
    border: 1px solid #e2ece8;
    border-radius: 1rem;
    background: #fff;
    padding: 1.2rem;
    display: grid;
    gap: 1rem;
}

.legal-item {
    padding: 1rem;
    border-radius: .9rem;
    border: 1px solid #eaf1ed;
    background: #fbfdfc;
}

.legal-item h2 {
    font-size: 1.15rem;
    margin-bottom: .45rem;
}

.legal-item p {
    margin: 0;
    color: #4c5f58;
    line-height: 1.7;
}
/* Bloque "Qué son" (islas flotantes) */
.fito-what-section {
    background: linear-gradient(180deg, rgba(240, 247, 245, .9), #fff);
}

.fito-what-head h2 {
    max-width: 760px;
    margin: 0 auto;
}

.fito-what-visual {
    min-height: 340px;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(9, 43, 35, .88), rgba(19, 88, 68, .8)),
        url('/img/bloque1_img.png') center/cover no-repeat;
    border: 1px solid rgba(16, 44, 38, .1);
    border-radius: 1.4rem;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 1.2rem 2.2rem rgba(21, 46, 39, .12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.fito-what-visual h3 {
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.3;
    margin: .8rem 0 .7rem;
}

.fito-what-visual p {
    color: rgba(255, 255, 255, .86);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.fito-what-badge {
    align-self: flex-start;
    display: inline-block;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fito-what-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.fito-what-chip-row span {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(185, 232, 216, .3);
    color: #fff;
    font-size: .85rem;
}

.fito-what-card {
    background: #fff;
    border: 1px solid #dfeae4;
    border-radius: 1.1rem;
    padding: 1rem .9rem;
    box-shadow: 0 .85rem 1.8rem rgba(23, 47, 41, .05);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 170px;
}

.fito-what-card h3 {
    font-size: 1.02rem;
    margin-bottom: .4rem;
}

.fito-what-card p {
    color: #4e625c;
    font-size: .93rem;
    line-height: 1.55;
    margin-bottom: 0;
}

.fito-what-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    margin-bottom: .6rem;
    border-radius: .75rem;
    background: #e8f5ef;
    color: var(--brand);
    font-size: 1.15rem;
}

.fito-what-solves {
    min-height: 150px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #dfeae4;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 .8rem 1.5rem rgba(24, 47, 42, .04);
}

.fito-what-solves h4 {
    font-size: 1.05rem;
    margin-bottom: .6rem;
}

.fito-what-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.fito-what-list li {
    position: relative;
    padding-left: 1.2rem;
    color: #405952;
    line-height: 1.55;
}

.fito-what-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--brand);
}

@media (min-width: 768px) {
    .fito-what-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .fito-what-section .row > [class*='col-'] {
        display: flex;
    }

    .fito-what-section .row > [class*='col-'] > * {
        width: 100%;
    }
}

/* En móvil la imagen ocupa la parte superior y la tarjeta queda debajo, sin taparla. */
@media (max-width: 767.98px) {
    .fito-hero {
        background-size: 100% auto, 100% auto;
        background-position: top center, top center;
        background-color: #eef4f1;
        min-height: 0;
        /* Alto exacto de la imagen (1600×639), sin franja debajo */
        padding: 39.94vw 0 0;
    }

    .fito-hero + .fito-section {
        padding-top: 2.5rem;
    }

    .fito-hero-card--compact {
        max-width: none;
        width: 100%;
    }

    .fito-hero-card--compact ul {
        grid-template-columns: 1fr;
    }
}

/* Ficha de producto: descripción larga plegable */
.product-desc-text {
    white-space: pre-line;
    max-height: 7.5em;
    overflow: hidden;
    position: relative;
    transition: max-height .35s ease;
}

.product-desc:not(.is-open):not(.is-short) .product-desc-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.product-desc.is-open .product-desc-text {
    max-height: 200em;
}

.product-desc-toggle {
    border: 0;
    background: none;
    padding: .35rem 0 0;
    color: var(--brand);
    font-weight: 600;
    font-size: .95rem;
}

.product-desc-toggle i {
    display: inline-block;
    transition: transform .2s ease;
}

.product-desc.is-open .product-desc-toggle i {
    transform: rotate(180deg);
}

/* Ficha de producto: selector de variaciones */
.product-variants {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.product-variant {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 8.5rem;
    padding: .55rem .85rem;
    border: 1.5px solid #d5e4dd;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.product-variant input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-variant:hover {
    border-color: var(--brand);
}

.product-variant:has(input:checked) {
    border-color: var(--brand);
    background: rgba(22, 108, 87, .07);
    box-shadow: 0 0 0 1px var(--brand);
}

.product-variant:has(input:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.product-variant-name {
    font-weight: 600;
    font-size: .92rem;
    color: #183b31;
}

.product-variant-price {
    font-size: .85rem;
    color: #55665f;
}

.product-variant.is-out {
    opacity: .6;
}

.product-variant-text {
    display: flex;
    flex-direction: column;
}

.product-variant-image {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .5rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* Miniatura de la galería que se está viendo */
.product-thumb.is-active {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 2px var(--brand);
}

/* Tarjetas de servicio enlazadas a su página */
.fito-service-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.fito-service-link[href]:hover,
.fito-service-link[href]:focus-visible {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 1.1rem 2.2rem rgba(24, 47, 42, .12);
}

/* Página de servicio: contenido editable desde el panel */
.service-page-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2a3a35;
}

.service-page-body h2,
.service-page-body h3 {
    font-family: 'Cormorant Garamond', serif;
    color: #183b31;
    margin: 2rem 0 .75rem;
}

.service-page-body h2 {
    font-size: 2rem;
}

.service-page-body ul,
.service-page-body ol {
    padding-left: 1.3rem;
}

.service-page-body li {
    margin-bottom: .4rem;
}

.service-page-body a {
    color: var(--brand);
}

/* Página de servicio: cabecera de color común a todos los servicios */
.service-hero {
    padding: 64px 0;
    background: linear-gradient(120deg, var(--brand-dark), var(--brand) 55%, #2f8a6f);
    color: #fff;
}

/* Página de servicio: imagen principal completa, sin recortar */
.service-page-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .12);
}

/* Página de instalación: pasos con texto e infografía completa */
.install-step-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2a3a35;
}

.install-step-text h2 {
    margin-bottom: 1rem;
}

.install-step-text ul {
    padding-left: 1.3rem;
}

.install-step-text li {
    margin-bottom: .4rem;
}

.install-step-img {
    display: block;
    max-width: 64rem;
    margin: 2rem auto 0;
}

.install-step-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(24, 47, 42, .12);
}