/* home: estilos migrados preservando el diseño original. */

/* ==========================================================
   ANTHORIA — HOME PAGE

   Estilos exclusivos de index.html.

   Contiene:
   - Fondo principal.
   - Hero.
   - Información meteorológica.
   - Botones principales.
   - Tarjetas de servicios.
   - Tema oscuro específico de Home.

   Los estilos globales de navegación, tipografía y estructura
   permanecerán en styles.css.
   ========================================================== */


/* ==========================================================
   ESTRUCTURA GENERAL DE HOME
   ========================================================== */

body.home-page {
    min-height: 100vh;

    background-image:
        url(../../assets/images/home-background.jpg);

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


body.home-page main {
    position: relative;
}


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

.home-page .home-hero {
    position: relative;

    max-width: 780px;
    margin-top: 30px;
}


/* ==========================================================
   ETIQUETA SUPERIOR DEL HERO

   Texto "Designed for the future" y línea decorativa.
   ========================================================== */

.home-page .hero-kicker {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;
    margin-bottom: 20px;

    transform: translateX(5px);
}


.home-page .hero-kicker p {
    flex-shrink: 0;

    margin: 0;

    color: #b78a3d;

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;

    white-space: nowrap;
}


.home-page .hero-kicker-line {
    display: block;

    width: 100px;
    height: 1.3px;

    background:
        linear-gradient(to right,
            #b78a3d,
            rgba(183, 138, 61, 0.35),
            transparent);
}


/* ==========================================================
   INFORMACIÓN METEOROLÓGICA
   ========================================================== */

.home-page .weather-widget {
    position: absolute;
    top: 505px;
    right: 52px;
    z-index: 6;

    display: flex;
    align-items: center;
    gap: 10px;

    width: 350px;
    justify-content: flex-end;

    color: #8a6428;

    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;

    opacity: 0.6;
}


.home-page .weather-block {
    display: inline-flex;
    align-items: center;

    white-space: nowrap;
}


.home-page .weather-location {
    min-width: 0;
    max-width: min(270px, 45vw);
    overflow: hidden;
}


.home-page #weather-location {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.home-page .weather-main {
    gap: 8px;
}


.home-page .weather-icon {
    display: inline-block;

    font-size: 1.2rem;
    line-height: 1;
}


.home-page .weather-sunny {
    animation: weather-sun-spin 12s linear infinite;
}


.home-page .weather-divider {
    color: #b78a3d;
}


@keyframes weather-sun-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   BOTONES PRINCIPALES DEL HERO
   ========================================================== */

.home-page main>.hero-actions {
    position: absolute;
    top: 440px;
    left: 52px;
    right: auto;
    bottom: auto;
    z-index: 20;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;

    width: auto;
    margin: 0;

    transform: none;
}


.home-page .hero-action-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 265px;
    min-height: 52px;
    padding: 0 18px;

    overflow: hidden;

    border: 1px solid #c8ad7f;
    border-radius: 12px;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.06em;

    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease;
}


/* Reflejo que atraviesa los botones. */
.home-page .hero-action-button::before {
    content: "";

    position: absolute;
    top: -70%;
    left: -95%;

    width: 70%;
    height: 240%;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 244, 220, 0.16) 50%,
            rgba(255, 255, 255, 0.03) 75%,
            transparent 100%);

    filter: blur(7px);

    transform:
        skewX(-24deg) rotate(12deg);

    pointer-events: none;
}


.home-page .hero-action-button:hover::before {
    animation:
        hero-button-shine 1.25s ease-in-out;
}


@keyframes hero-button-shine {
    from {
        left: -95%;
    }

    to {
        left: 145%;
    }
}


/* ==========================================================
   BOTÓN PRINCIPAL — TALK TO ANTHORY
   ========================================================== */

.home-page .hero-action-primary {
    background: #b8863f;
    border-color: #c89d55;

    color: #fff8ea;

    box-shadow:
        0 10px 24px rgba(105, 67, 19, 0.28),
        inset 0 1px 0 rgba(255, 231, 184, 0.35);
}


.home-page .hero-action-primary:hover {
    background: #a47434;
    border-color: #d1a85f;

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px rgba(105, 67, 19, 0.38),
        0 0 18px rgba(209, 168, 95, 0.22),
        inset 0 1px 0 rgba(255, 231, 184, 0.42);
}


/* ==========================================================
   BOTÓN SECUNDARIO — THEME
   ========================================================== */

.home-page .hero-action-secondary {
    background: rgba(255, 255, 255, 0.20);

    border-color:
        rgba(183, 138, 61, 0.75);

    color: #9d702c;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


.home-page .hero-action-secondary:hover {
    background:
        rgba(255, 255, 255, 0.32);

    border-color: #b78a3d;

    transform: translateY(-3px);

    box-shadow:
        0 14px 28px rgba(45, 41, 36, 0.16),
        0 0 16px rgba(183, 138, 61, 0.16);
}


.home-page .hero-action-secondary::before {
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(183, 138, 61, 0.01) 20%,
            rgba(183, 138, 61, 0.04) 35%,
            rgba(183, 138, 61, 0.11) 50%,
            rgba(183, 138, 61, 0.04) 65%,
            rgba(183, 138, 61, 0.01) 80%,
            transparent 100%);

    filter: blur(10px);

    opacity: 0.8;
}


/* ==========================================================
   SERVICIOS DE HOME

   Contenedor de las cinco tarjetas principales.
   ========================================================== */

.home-page #services {
    display: grid;

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

    gap: 16px;

    align-items: stretch;

    width: 100%;
    max-width: none;

    margin-top: 175px;
}


/* ==========================================================
   TARJETAS DE SERVICIOS
   ========================================================== */

.home-page #services .service-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 210px;
    height: auto;

    padding: 24px 26px 18px;

    overflow: hidden;

    background-color: rgba(255, 252, 247, 0.46);
    background-image:
        linear-gradient(rgba(255, 252, 247, 0.52),
            rgba(244, 237, 226, 0.66)),
        url(../../assets/images/home-background.jpg);

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

    border: 1px solid #c8ad7f;
    border-radius: 18px;

    color: #2d2924;

    text-align: left;
    text-decoration: none;

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


.home-page #services .service-card:hover {
    background-color: rgba(255, 255, 255, 0.62);
    background-image:
        linear-gradient(rgba(255, 252, 247, 0.40),
            rgba(244, 237, 226, 0.56)),
        url(../../assets/images/home-background.jpg);

    transform: translateY(-6px);

    box-shadow:
        0 16px 34px rgba(45, 41, 36, 0.12);
}


/* ==========================================================
   TÍTULO DE LAS TARJETAS
   ========================================================== */

.home-page #services .service-card h2 {
    flex-shrink: 0;

    min-height: 3.2em;

    margin: 0 0 14px;
    padding: 0;

    font-size:
        clamp(1.3rem, 1.65vw, 1.8rem);

    line-height: 1.05;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}


.home-page #services .service-card h2::after {
    content: "";

    display: block;

    width: 36px;
    height: 2px;

    margin-top: 8px;

    background-color: #b78a3d;

    border-radius: 999px;
}


/* ==========================================================
   DESCRIPCIÓN DE LAS TARJETAS
   ========================================================== */

.home-page #services .service-card p {
    margin: 0;
    padding: 0;

    font-size:
        clamp(0.72rem, 0.78vw, 0.88rem);

    line-height: 1.45;

    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}


/* ==========================================================
   ENLACE "EXPLORE"
   ========================================================== */

.home-page #services .service-card>span {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    width: auto;

    margin-top: auto;
    padding-top: 14px;

    color: #b78a3d;

    font-size: 0.84rem;
    font-weight: 600;
}


.home-page #services .service-card>span::after {
    content: "⟶";

    margin-left: 8px;

    color: #b78a3d;

    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;

    transition:
        transform 0.3s ease;
}


.home-page #services .service-card:hover>span::after {
    transform: translateX(4px);
}


/* ==========================================================
   DARK THEME — HOME
   ========================================================== */

body.home-page.dark-theme {
    background-image:
        linear-gradient(rgba(10, 9, 8, 0.12),
            rgba(10, 9, 8, 0.12)),
        url(../../assets/images/home-background-dark.jpg);

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


body.home-page.dark-theme .home-hero h1 {
    color: #f3eadc;
}


body.home-page.dark-theme .weather-widget {
    color: #d1a85f;

    text-shadow:
        0 1px 10px rgba(0, 0, 0, 0.75);
}


body.home-page.dark-theme #services .service-card {
    background-color: rgba(25, 22, 19, 0.58);
    background-image:
        linear-gradient(rgba(8, 8, 7, 0.58),
            rgba(10, 9, 8, 0.76)),
        url(../../assets/images/home-background-dark.jpg);

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

    border-color:
        rgba(200, 173, 127, 0.65);

    color: #f3eadc;
}


body.home-page.dark-theme #services .service-card:hover {
    background-color: rgba(25, 22, 19, 0.66);
    background-image:
        linear-gradient(rgba(8, 8, 7, 0.48),
            rgba(10, 9, 8, 0.68)),
        url(../../assets/images/home-background-dark.jpg);

    border-color: rgba(209, 168, 95, 0.82);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(209, 168, 95, 0.08);
}


body.home-page.dark-theme .hero-action-secondary {
    background-color:
        rgba(25, 22, 19, 0.45);

    color: #d1a85f;
}


/* ==========================================================
   ACCESIBILIDAD — REDUCED MOTION

   Reduce animaciones cuando el sistema operativo del usuario
   solicita menos movimiento.
   ========================================================== */

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

    .home-page .weather-sunny {
        animation: none;
    }


    .home-page .hero-action-button,
    .home-page #services .service-card,
    .home-page #services .service-card>span::after {
        transition: none;
    }


    .home-page .hero-action-button:hover::before {
        animation: none;
    }

}