/* =========================================================
   GRUPO KHABO
   VERSIÓN FINAL RESPONSIVE
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #202226;

    background: #f5f5f3;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: relative;

    min-height: 190px;

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

    padding:
        24px
        35px
        20px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fdfdfc 65%,
            #f7f7f5 100%
        );
}


/* =========================================================
   ESQUINA KHABO
========================================================= */

.header-decoration {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 2;

    width: 390px;
    height: 215px;

    overflow: hidden;

    pointer-events: none;
    user-select: none;
}

.header-corner-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: top left;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   LOGO HEADER
========================================================= */

.brand {
    position: relative;

    z-index: 5;

    display: flex;
    flex-direction: column;

    align-items: center;
}

.logo-khabo {
    display: block;

    width: 205px;
    max-width: 65vw;

    height: auto;

    object-fit: contain;
}

.brand-slogan {
    margin-top: 8px;

    color: #555b62;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.5;

    letter-spacing: 5px;

    text-align: center;
}


/* =========================================================
   FRASE SUPERIOR
========================================================= */

.header-phrase {
    position: absolute;

    top: 43px;
    right: 8%;

    z-index: 4;

    width: 220px;

    color: #17191c;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-style: italic;

    transform:
        rotate(-4deg);
}

.header-phrase span {
    display: block;

    font-size: 23px;
}

.header-phrase strong {
    display: block;

    margin-left: 25px;

    font-size: 26px;

    line-height: 1.15;
}

.header-phrase i {
    display: block;

    width: 115px;
    height: 4px;

    margin:
        6px
        0
        0
        55px;

    border-radius: 100%;

    background: #ec2730;

    transform:
        rotate(-5deg);
}


/* =========================================================
   MAIN
========================================================= */

main {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fafaf9 0%,
            #f4f4f2 52%,
            #fafafa 100%
        );
}


/* =========================================================
   WATERMARK KB
========================================================= */

.watermark-kb {
    position: absolute;

    top: -52px;
    right: -15px;

    z-index: 0;

    width: 455px;
    height: 435px;

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

    pointer-events: none;
    user-select: none;
}

.watermark-kb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0.34;

    filter:
        grayscale(0.12)
        brightness(1.08)
        contrast(0.90);
}


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

.hero {
    position: relative;

    z-index: 2;

    max-width: 930px;

    margin: 0 auto;

    padding:
        29px
        20px
        31px;

    text-align: center;
}

.section-label {
    display: flex;

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

    gap: 18px;

    margin-bottom: 13px;

    color: #dc2932;

    font-size: 11px;

    letter-spacing: 5px;
}

.section-label strong {
    font-weight: 700;
}

.section-label span {
    width: 58px;
    height: 1px;

    background: #818181;
}

.hero h1 {
    margin-bottom: 13px;

    color: #222529;

    font-size:
        clamp(42px, 4.5vw, 67px);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -2.6px;
}

.hero p {
    max-width: 660px;

    margin: 0 auto;

    color: #606266;

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================================
   COLECCIONES
========================================================= */

.collections {
    position: relative;

    z-index: 2;

    width:
        min(1400px, calc(100% - 70px));

    margin: 0 auto;

    display: grid;

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

    gap: 20px;
}


/* =========================================================
   TARJETAS
========================================================= */

.card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid rgba(0, 0, 0, 0.045);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 13px 35px
        rgba(0, 0, 0, 0.055);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, 0.10);
}


/* =========================================================
   IMÁGENES 16:9
========================================================= */

.card-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #ffffff;

    cursor: pointer;
}

.card-image > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    background: #ffffff;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}


/* =========================================================
   INDICADOR AL PASAR EL MOUSE
========================================================= */

.image-hover {
    position: absolute;

    left: 50%;
    bottom: 14px;

    z-index: 3;

    padding:
        8px
        15px;

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.55);

    border-radius: 30px;

    background:
        rgba(24, 27, 30, 0.82);

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, 0.16);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.5px;

    white-space: nowrap;

    opacity: 0;

    transform:
        translate(-50%, 10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.card-image:hover > img {
    transform:
        scale(1.025);

    filter:
        brightness(0.96);
}

.card-image:hover .image-hover {
    opacity: 1;

    transform:
        translate(-50%, 0);
}


/* ACCESIBILIDAD CON TECLADO */

.card-image:focus-visible,
.whatsapp-button:focus-visible,
.social-icon:focus-visible,
.footer-whatsapp:focus-visible,
.official-number:focus-visible {
    outline:
        3px solid #ec2730;

    outline-offset: 3px;
}


/* =========================================================
   CONTENIDO TARJETAS
========================================================= */

.card-content {
    padding:
        0
        17px
        17px;
}

.red-line {
    width: 37px;
    height: 3px;

    margin-bottom: 8px;

    background: #ec2730;
}

.card-number {
    display: block;

    margin-bottom: 4px;

    color: #e02932;

    font-size: 11px;
    font-weight: 700;
}

.card h2 {
    min-height: 25px;

    margin-bottom: 6px;

    color: #272a2f;

    font-size:
        clamp(18px, 1.35vw, 21px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.5px;
}

.card-content > p {
    min-height: 39px;

    margin-bottom: 14px;

    color: #6b6d70;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-button {
    width: 100%;
    min-height: 51px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px
        12px;

    color: #ffffff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #24282d,
            #373d44
        );

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.whatsapp-button:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #171a1e,
            #292e34
        );

    box-shadow:
        0 8px 18px
        rgba(0, 0, 0, 0.18);
}

.whatsapp-icon {
    width: 28px;
    height: 28px;

    flex:
        0
        0
        28px;

    display: flex;

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

    border:
        1.6px solid #ffffff;

    border-radius: 50%;
}

.whatsapp-icon svg {
    width: 18px;
    height: 18px;

    fill: #ffffff;
}

.button-text {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.arrow {
    margin-left: auto;

    font-size: 20px;
    font-weight: 400;

    transition:
        transform 0.2s ease;
}

.whatsapp-button:hover .arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   BENEFICIOS
========================================================= */

.benefits {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin:
        42px
        auto
        0;

    padding:
        0
        20px
        43px;

    display: grid;

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

.benefit {
    min-height: 90px;

    display: flex;

    flex-direction: column;

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

    padding:
        8px
        18px;

    text-align: center;

    border-right:
        1px solid #d1d1d1;
}

.benefit:last-child {
    border-right: none;
}

.benefit-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 7px;

    display: flex;

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

.benefit-icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: #2d3034;

    stroke-width: 1.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.benefit p {
    color: #414348;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.3;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    position: relative;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #121416,
            #202326 55%,
            #17191b
        );
}

.footer-red-detail {
    position: absolute;

    top: 0;
    right: -20px;

    width: 230px;
    height: 6px;

    background: #ec2730;

    transform:
        skewX(-45deg);
}

.footer-container {
    width:
        min(1380px, calc(100% - 70px));

    margin: 0 auto;

    padding:
        31px
        0;

    display: grid;

    grid-template-columns:
        1.15fr
        0.75fr
        1fr
        0.95fr;

    align-items: center;
}


/* =========================================================
   MARCA FOOTER
========================================================= */

.footer-brand {
    display: flex;

    align-items: center;

    gap: 17px;

    padding-right: 25px;
}

.footer-logo {
    display: block;

    width: 95px;

    height: auto;

    filter:
        grayscale(1)
        brightness(0)
        invert(1);
}

.footer-brand-text {
    padding-left: 18px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.22);
}

.footer-brand-text strong {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;

    letter-spacing: 2.3px;
}

.footer-brand-text span {
    display: block;

    color: #cccccc;

    font-size: 8px;

    line-height: 1.5;

    letter-spacing: 1.7px;
}


/* =========================================================
   REDES
========================================================= */

.footer-social {
    padding:
        0
        24px;

    text-align: center;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.10);
}

.footer-social p {
    margin-bottom: 10px;

    color: #c9c9c9;

    font-size: 10px;
}

.social-icons {
    display: flex;

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

    gap: 10px;
}

.social-icon {
    position: relative;

    width: 36px;
    height: 36px;

    display: flex;

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

    overflow: hidden;

    border-radius: 7px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.social-icon:hover {
    transform:
        translateY(-3px)
        scale(1.06);
}


/* INSTAGRAM */

.instagram {
    background:
        radial-gradient(
            circle at 32% 105%,
            #ffd86f 0%,
            #ffbd55 12%,
            #ff543e 34%,
            #c837ab 64%,
            #6756c9 82%,
            #405de6 100%
        );

    box-shadow:
        0 4px 12px
        rgba(213, 50, 145, 0.42);
}

.instagram svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.instagram .instagram-dot {
    fill: #ffffff;
    stroke: none;
}


/* FACEBOOK */

.facebook {
    background: #1877f2;

    box-shadow:
        0 4px 11px
        rgba(24, 119, 242, 0.30);
}

.facebook svg {
    width: 23px;
    height: 23px;

    fill: #ffffff;
}


/* TIKTOK */

.tiktok {
    background: #080a0c;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    box-shadow:
        0 4px 11px
        rgba(0, 0, 0, 0.38);
}

.tiktok-svg {
    width: 24px;
    height: 24px;

    overflow: visible;
}

.tiktok-cyan {
    fill: #25f4ee;

    transform:
        translate(-0.7px, 0.45px);
}

.tiktok-red {
    fill: #fe2c55;

    transform:
        translate(0.65px, -0.3px);
}

.tiktok-white {
    fill: #ffffff;
}


/* =========================================================
   CONTACTO FOOTER
========================================================= */

.footer-contact {
    min-height: 68px;

    display: flex;

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

    gap: 13px;

    padding:
        0
        22px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.10);
}

.footer-whatsapp {
    width: 43px;
    height: 43px;

    flex:
        0
        0
        43px;

    display: flex;

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

    border:
        1.5px solid #ffffff;

    border-radius: 50%;

    transition:
        transform 0.2s ease;
}

.footer-whatsapp:hover {
    transform:
        scale(1.06);
}

.footer-whatsapp svg {
    width: 27px;
    height: 27px;

    fill: #ffffff;
}

.footer-contact small {
    display: block;

    margin-bottom: 3px;

    color: #bfc0c1;

    font-size: 9px;
}

.official-number {
    display: block;

    white-space: nowrap;

    font-size: 20px;
    font-weight: 700;
}


/* =========================================================
   FRASE FOOTER
========================================================= */

.footer-phrase {
    padding-left: 28px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.10);

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-style: italic;

    transform:
        rotate(-3deg);
}

.footer-phrase span,
.footer-phrase strong {
    display: block;
}

.footer-phrase span {
    font-size: 19px;
}

.footer-phrase strong {
    margin-left: 18px;

    font-size: 23px;
}

.footer-phrase i {
    display: block;

    width: 110px;
    height: 3px;

    margin:
        4px
        0
        0
        43px;

    background: #ec2730;

    border-radius: 100%;

    transform:
        rotate(-4deg);
}


/* =========================================================
   FOOTER INFERIOR
========================================================= */

.footer-bottom {
    min-height: 42px;

    padding:
        11px
        20px;

    display: flex;

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

    gap: 18px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    color: #8f9193;

    font-size: 8px;

    letter-spacing: 0.4px;

    text-align: center;
}

.footer-bottom span {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ec2730;
}


/* =========================================================
   TABLET / LAPTOP PEQUEÑA
========================================================= */

@media (max-width: 1050px) {

    .header-decoration {
        width: 300px;
        height: 165px;
    }

    .header-phrase {
        right: 2%;

        transform:
            scale(0.78)
            rotate(-4deg);
    }

    .watermark-kb {
        top: 0;
        right: -28px;

        width: 345px;
        height: 330px;
    }

    .watermark-kb img {
        opacity: 0.27;
    }


    /* 2 TARJETAS POR FILA */

    .collections {
        width:
            min(780px, calc(100% - 40px));

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

        gap: 22px;
    }


    /* FOOTER */

    .footer-container {
        width:
            min(760px, calc(100% - 45px));

        grid-template-columns:
            1fr
            1fr;

        row-gap: 25px;
    }

    .footer-contact {
        padding-top: 22px;

        border-left: none;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }

    .footer-phrase {
        padding-top: 22px;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }
}


/* =========================================================
   AJUSTE INTERMEDIO
========================================================= */

@media (max-width: 780px) {

    .header {
        min-height: 165px;
    }

    .header-decoration {
        width: 235px;
        height: 135px;
    }

    .logo-khabo {
        width: 175px;
    }

    .brand-slogan {
        font-size: 8px;

        letter-spacing: 3.5px;
    }

    .header-phrase {
        display: none;
    }
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 650px) {

    /* HEADER */

    .header {
        min-height: auto;

        padding:
            19px
            15px
            19px;
    }

    .header-decoration {
        width: 118px;
        height: 88px;
    }

    .logo-khabo {
        width: 140px;

        max-width: 48vw;
    }

    .brand-slogan {
        max-width: 320px;

        margin-top: 6px;

        font-size: 7px;

        line-height: 1.5;

        letter-spacing: 2.7px;
    }


    /* WATERMARK */

    .watermark-kb {
        display: none;
    }


    /* HERO */

    .hero {
        padding:
            31px
            18px
            27px;
    }

    .section-label {
        gap: 11px;

        margin-bottom: 13px;

        font-size: 8.5px;

        letter-spacing: 2.8px;
    }

    .section-label span {
        width: 36px;
    }

    .hero h1 {
        max-width: 335px;

        margin:
            0
            auto
            14px;

        font-size:
            clamp(34px, 10vw, 40px);

        line-height: 0.96;

        letter-spacing: -1.8px;
    }

    .hero p {
        max-width: 325px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* UNA TARJETA POR FILA */

    .collections {
        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .card {
        border-radius: 11px;
    }

    .card:hover {
        transform: none;
    }


    /* 16:9 AUTOMÁTICO */

    .card-image {
        width: 100%;

        aspect-ratio: 16 / 9;
    }

    .card-image > img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /*
       EN PANTALLAS TÁCTILES NO MOSTRAMOS
       EL TEXTO DE HOVER.
    */

    .image-hover {
        display: none;
    }

    .card-image:hover > img {
        transform: none;

        filter: none;
    }


    /* CONTENIDO */

    .card-content {
        padding:
            0
            15px
            15px;
    }

    .red-line {
        width: 34px;
    }

    .card h2 {
        min-height: auto;

        font-size: 20px;
    }

    .card-content > p {
        min-height: auto;

        margin-bottom: 14px;

        font-size: 12px;
    }


    /* BOTÓN */

    .whatsapp-button {
        min-height: 52px;

        padding:
            8px
            12px;

        font-size: 12px;
    }


    /* BENEFICIOS */

    .benefits {
        width:
            calc(100% - 34px);

        margin-top: 34px;

        padding:
            0
            0
            34px;

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

        row-gap: 0;
    }

    .benefit {
        min-height: 92px;

        padding: 10px;
    }

    .benefit:nth-child(2) {
        border-right: none;
    }

    .benefit:nth-child(3),
    .benefit:nth-child(4) {
        border-top:
            1px solid #d1d1d1;
    }

    .benefit-icon {
        margin-bottom: 5px;
    }

    .benefit-icon svg {
        width: 25px;
        height: 25px;
    }

    .benefit p {
        font-size: 10.5px;
    }


    /* FOOTER */

    .footer-red-detail {
        width: 190px;
    }

    .footer-container {
        width:
            calc(100% - 36px);

        padding:
            27px
            0
            23px;

        grid-template-columns:
            1fr;

        row-gap: 0;

        text-align: center;
    }


    /* MARCA FOOTER */

    .footer-brand {
        justify-content: center;

        padding:
            0
            0
            20px;
    }

    .footer-logo {
        width: 78px;
    }

    .footer-brand-text {
        text-align: left;
    }

    .footer-brand-text strong {
        font-size: 10px;
    }

    .footer-brand-text span {
        font-size: 7px;

        letter-spacing: 1.4px;
    }


    /* REDES */

    .footer-social {
        padding:
            19px
            0;

        border-left: none;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }

    .social-icon {
        width: 38px;
        height: 38px;
    }


    /* CONTACTO */

    .footer-contact {
        padding:
            19px
            0;

        border-left: none;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }

    .footer-contact > div {
        text-align: left;
    }

    .official-number {
        font-size: 20px;
    }


    /* FRASE */

    .footer-phrase {
        width: 220px;

        margin: 0 auto;

        padding:
            19px
            0
            0;

        text-align: left;

        border-left: none;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.10);
    }

    .footer-phrase span {
        font-size: 18px;
    }

    .footer-phrase strong {
        font-size: 22px;
    }


    /* FOOTER INFERIOR */

    .footer-bottom {
        flex-direction: column;

        gap: 4px;

        padding:
            11px
            15px;

        font-size: 7.5px;
    }

    .footer-bottom span {
        display: none;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    .header-decoration {
        width: 105px;
        height: 80px;
    }

    .logo-khabo {
        width: 130px;
    }

    .brand-slogan {
        font-size: 6.5px;

        letter-spacing: 2.2px;
    }

    .hero {
        padding-top: 28px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .collections {
        width:
            calc(100% - 20px);
    }

    .button-text {
        font-size: 11.5px;
    }
}


/* =========================================================
   RESPETO A USUARIOS QUE PREFIEREN MENOS ANIMACIONES
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .card,
    .card-image > img,
    .image-hover,
    .whatsapp-button,
    .arrow,
    .social-icon,
    .footer-whatsapp {
        transition: none;
    }
}