:root {

    /* ── PALETA LIGHT — MALLA SOMBRA CUERNAVACA ── */

    /* Primarios light */
    --red-light:    #FADADD;
    --yellow-light: #FEF3C7;
    --blue-light:   #DBEAFE;
    --black-light:  #F0EDEA;

    /* Secundarios light */
    --orange-light: #FDE8D8;
    --sky-light:    #E0F2FE;
    --sand-light:   #F5ECD9;

    /* Acentos */
    --red:          #D42B2B;
    --yellow:       #F5C518;
    --amber:        #D97706;
    --blue:         #2B3FBF;
    --black:        #2C2C2E;

    /* Sidebar */
    --sidebar:      #F0EDEA;

    /* Neutros */
    --light:        #F9F5F0;
    --white:        #FFFFFF;

    --text:         #2C2C2E;
    --text-soft:    #8E8478;

    --border:       #EDE7DC;
    --border-mid:   #C9BEB2;

    --shadow-soft:
        0 10px 30px rgba(44, 44, 46, .06);

    --shadow-medium:
        0 15px 40px rgba(44, 44, 46, .10);
}

/* RESET */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Poppins', sans-serif;

    background: var(--white);

    color: var(--text);

    overflow-x: hidden;
}

/* SIDEBAR */

.sidebar {

    position: sticky;

    top: 0;

    height: 100vh;

    background: var(--sidebar);

    border-right: 1px solid var(--border);

    overflow: hidden;
}

.sidebar::before {

    content: '';

    position: absolute;

    width: 380px;
    height: 380px;

    background:
        radial-gradient(circle,
            rgba(245, 197, 24, .16) 0%,
            rgba(245, 197, 24, .04) 50%,
            transparent 75%);

    border-radius: 50%;

    filter: blur(50px);

    top: -120px;
    left: -120px;
}

.sidebar-content {

    position: relative;

    z-index: 2;

    padding: 40px 35px;

    height: 100%;

    display: flex;
    flex-direction: column;
}

.logo {
    max-width: 260px;
}

/* MENU */

.menu {

    margin-top: 45px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.menu a {

    color: var(--text-soft);

    text-decoration: none;

    padding: 15px 18px;

    border-radius: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    transition: .3s ease;
}

.menu a:hover,
.menu a.active {

    background: var(--yellow-light);

    color: var(--amber);

    transform: translateX(6px);
}

/* SOCIAL */

.social-box {

    margin-top: auto;

    display: flex;

    gap: 12px;
}

.social-box a {

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: var(--border);

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

    color: var(--text-soft);

    transition: .3s ease;
}

.social-box a:hover {

    background: var(--yellow-light);

    color: var(--amber);

    transform:
        translateY(-4px) scale(1.04);
}

/* HERO */

.hero-section {

    position: relative;

    min-height: 100vh;

    background-image: url('../img/hero-bg.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

.overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .45);
}

.hero-content {

    position: relative;

    z-index: 2;

    padding: 60px;
}

.hero-inner {

    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subtitle {

    color: var(--yellow);

    letter-spacing: 3px;

    font-size: 1.1rem;

    font-weight: 700;

    text-shadow: 0 1px 6px rgba(0, 0, 0, .40);
}

.hero-section h1 {

    font-size: 6rem;

    font-weight: 800;

    line-height: 1;

    margin-top: 22px;

    color: #ffffff;

    text-shadow: 0 2px 14px rgba(0, 0, 0, .40);
}

.hero-section h1 span {

    color: var(--yellow);

    font-style: italic;
}

.hero-text {

    max-width: 650px;

    line-height: 2;

    font-size: 1.1rem;

    color: var(--black);
    text-shadow: none;

    text-align: justify;
}

/* LINES */

.line-colors {

    display: flex;

    margin: 35px 0;
}

.line-colors span {

    width: 75px;
    height: 5px;

    border-radius: 50px;
}

.red    { background: var(--red);    }
.yellow { background: var(--yellow); }
.blue   { background: var(--blue);   }

/* BUTTON */

.btn-main {

    margin-top: 35px;

    display: inline-flex;
    align-items: center;

    gap: 15px;

    width: max-content;

    padding: 18px 38px;

    border-radius: 60px;

    background: var(--blue);

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition: .3s ease;
}

.btn-main:hover {

    background: var(--amber);

    color: #fff;

    transform:
        translateY(-3px) scale(1.02);
}

/* SECTIONS — fondo blanco en todas excepto hero */

.features-section,
.services-section {

    padding: 100px 60px;

    background: var(--white);
}

/* TITLES */

.section-subtitle {

    color: var(--red);

    letter-spacing: 2px;

    font-weight: 600;
}

.section-title {

    font-size: 3.5rem;

    font-weight: 800;

    margin-top: 10px;

    color: var(--black);
}

.section-title span {
    color: var(--amber);
}

/* CARDS */

.feature-card,
.service-card {

    background: var(--white);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    border-radius: 28px;

    padding: 38px 32px;

    height: 100%;

    transition: .4s ease;
}

.feature-card:hover,
.service-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-medium);

    border-color: var(--border-mid);
}

.feature-card i,
.service-card i {

    font-size: 2.6rem;

    margin-bottom: 22px;
}

.feature-card h5,
.service-card h4 {

    font-weight: 700;

    color: var(--black);

    margin-bottom: 15px;
}

.feature-card p,
.service-card p {

    line-height: 1.9;

    color: var(--text-soft);
}

/* SERVICE BORDERS */

.red-border    { border-top: 4px solid var(--red);    }
.yellow-border { border-top: 4px solid var(--yellow); }
.blue-border   { border-top: 4px solid var(--blue);   }
.beige-border  { border-top: 4px solid var(--amber);  }

/* ICON COLORS */

.red-icon    { color: var(--red);   }
.yellow-icon { color: var(--amber); }
.blue-icon   { color: var(--blue);  }
.beige-icon  { color: var(--amber); }
.orange-icon { color: var(--amber); }
.sky-icon    { color: var(--blue);  }

/* =========================
   GALLERY
========================= */

.gallery-grid .gallery-item {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 28px;

    box-shadow: var(--shadow-soft);
}

.gallery-grid img {

    width: 100%;

    height: 340px;

    object-fit: cover;

    transition:
        transform .6s ease,
        filter .4s ease;
}

.gallery-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(219, 234, 254, .15),
            rgba(43, 63, 191, .50)
        );

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

    opacity: 0;

    transition: .4s ease;
}

.gallery-overlay i {

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background: rgba(254, 243, 199, .25);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(245, 197, 24, .45);

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

    color: var(--yellow);

    font-size: 1.5rem;

    transform: scale(.8);

    transition: .4s ease;
}

.gallery-item:hover img {

    transform: scale(1.08);

    filter: brightness(.90);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-overlay i {
    transform: scale(1);
}

/* =========================
   CONTACT SHOWCASE
========================= */

.contact-showcase {

    background: var(--white);

    border-radius: 32px;

    padding: 50px;

    text-align: center;

    box-shadow: var(--shadow-medium);

    border: 1px solid var(--border);

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.qr-box {

    width: 260px;

    margin: auto;

    background: var(--light);

    padding: 20px;

    border-radius: 28px;

    box-shadow: var(--shadow-soft);

    border: 1px solid var(--border);
}

.contact-showcase h4 {

    margin-top: 30px;

    font-weight: 700;

    color: var(--black);
}

.contact-showcase p {

    margin-top: 15px;

    color: var(--text-soft);

    line-height: 2;
}

.green-icon { color: #25D366; }

/* RESPONSIVE */

@media (max-width: 991px) {

    .sidebar {

        position: relative;

        height: auto;

        border-right: none;

        border-bottom: 1px solid var(--border);
    }

    .hero-content,
    .features-section,
    .services-section {

        padding: 80px 25px;
    }

    .hero-section h1 {
        font-size: 3.8rem;
    }
}

@media (max-width: 768px) {

    .hero-section h1 {
        font-size: 2.8rem;
    }

    .section-title {
        font-size: 2.5rem;
    }
}