/**
 * Homs Rentals — Design System
 *
 * Contiene:
 * 01. Variables y tokens
 * 02. Valores responsive
 * 03. Secciones
 * 04. Relaciones entre elementos
 * 05. Contenedores
 * 06. Grids y layouts
 *
 * Breakpoints:
 * - Desktop: más de 1024 px
 * - Tablet: hasta 1024 px
 * - Móvil: hasta 767 px
 */


/* =========================================================
   01. VARIABLES — DESKTOP
   ========================================================= */

:root {

    /* -----------------------------------------
       Contenedores
       ----------------------------------------- */

    --homs-container-wide: 1520px;
    --homs-container-default: 1280px;
    --homs-container-content: 1120px;
    --homs-container-text: 960px;

    /* Padding lateral de página */
    --homs-page-padding-x: 48px;


    /* -----------------------------------------
       Relaciones entre contenidos
       ----------------------------------------- */

    /* Título seguido de descripción */
    --homs-space-title-description: 24px;

    /* Título seguido directamente de cards,
       productos, iconos o grid */
    --homs-space-title-content: 32px;

    /* Título seguido de carrusel, imagen
       o bloque visual grande */
    --homs-space-title-visual: 40px;

    /* Descripción seguida de contenido */
    --homs-space-description-content: 48px;

    /* Contenido seguido de botón o CTA */
    --homs-space-content-cta: 32px;


    /* -----------------------------------------
       Relaciones entre elementos pequeños
       ----------------------------------------- */

    /* Icono seguido de etiqueta */
    --homs-space-icon-label: 12px;

    /* Etiqueta seguida de flecha o CTA */
    --homs-space-label-cta: 24px;


    /* -----------------------------------------
       Secciones
       ----------------------------------------- */

    --homs-section-compact: 48px;
    --homs-section-default: 64px;
    --homs-section-spacious: 80px;

    /* Separación total entre bloques
       consecutivos con el mismo fondo */
    --homs-section-gap: 64px;


    /* -----------------------------------------
       Grids y layouts
       ----------------------------------------- */

    --homs-grid-gap: 24px;
}


/* =========================================================
   02. VARIABLES — TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    :root {

        /* Contenedores */
        --homs-page-padding-x: 32px;

        /* Relaciones entre contenidos */
        --homs-space-title-description: 20px;
        --homs-space-title-content: 24px;
        --homs-space-title-visual: 32px;
        --homs-space-description-content: 32px;
        --homs-space-content-cta: 24px;

        /* Secciones */
        --homs-section-compact: 40px;
        --homs-section-default: 48px;
        --homs-section-spacious: 64px;
        --homs-section-gap: 48px;

        /* Grids */
        --homs-grid-gap: 20px;
    }
}


/* =========================================================
   03. VARIABLES — MÓVIL
   ========================================================= */

@media screen and (max-width: 767px) {

    :root {

        /* Contenedores */
        --homs-page-padding-x: 16px;

        /* Relaciones entre contenidos */
        --homs-space-title-description: 16px;
        --homs-space-title-content: 24px;
        --homs-space-title-visual: 24px;
        --homs-space-description-content: 24px;
        --homs-space-content-cta: 24px;

        /* Secciones */
        --homs-section-compact: 32px;
        --homs-section-default: 40px;
        --homs-section-spacious: 48px;
        --homs-section-gap: 40px;

        /* Grids */
        --homs-grid-gap: 16px;
    }
}


/* =========================================================
   04. SECCIONES
   ========================================================= */

.homs-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}


/* Sección compacta */

.homs-section--compact {
    padding-top: var(--homs-section-compact) !important;
    padding-bottom: var(--homs-section-compact) !important;
}


/* Sección estándar */

.homs-section--default {
    padding-top: var(--homs-section-default) !important;
    padding-bottom: var(--homs-section-default) !important;
}


/* Sección espaciosa o protagonista */

.homs-section--spacious {
    padding-top: var(--homs-section-spacious) !important;
    padding-bottom: var(--homs-section-spacious) !important;
}


/* Eliminar únicamente el padding superior */

.homs-section--no-top {
    padding-top: 0 !important;
}


/* Eliminar únicamente el padding inferior */

.homs-section--no-bottom {
    padding-bottom: 0 !important;
}


/* Eliminar todo el padding vertical */

.homs-section--no-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =========================================================
   05. RELACIONES ENTRE ELEMENTOS
   ========================================================= */


/* Título seguido de descripción o párrafo */

.homs-space--title-description {
    margin-bottom: var(--homs-space-title-description) !important;
}


/* Título seguido directamente de cards,
   productos, categorías o iconos */

.homs-space--title-content {
    margin-bottom: var(--homs-space-title-content) !important;
}


/* Título seguido de carrusel,
   imagen o bloque visual grande */

.homs-space--title-visual {
    margin-bottom: var(--homs-space-title-visual) !important;
}


/* Descripción seguida de cards,
   iconos, categorías o grid */

.homs-space--description-content {
    margin-bottom: var(--homs-space-description-content) !important;
}


/* Cards, carrusel o contenido seguido de CTA */

.homs-space--content-cta {
    margin-bottom: var(--homs-space-content-cta) !important;
}


/* Icono seguido de etiqueta */

.homs-space--icon-label {
    margin-bottom: var(--homs-space-icon-label) !important;
}


/* Etiqueta seguida de flecha, enlace o CTA */

.homs-space--label-cta {
    margin-bottom: var(--homs-space-label-cta) !important;
}


/* Separación antes de un nuevo bloque con el mismo fondo */

.homs-space--section-before {
    margin-top: var(--homs-section-gap) !important;
}


/* =========================================================
   06. CONTENEDORES
   ========================================================= */

/**
 * Contenedor principal.
 *
 * El ancho máximo total es 1520 px e incluye
 * el padding lateral interno.
 */

.homs-container {
    width: 100%;
    max-width: var(--homs-container-wide);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--homs-page-padding-x);
    padding-left: var(--homs-page-padding-x);
    box-sizing: border-box;
}


/* Contenedor general */

.homs-container--default {
    max-width: var(--homs-container-default);
}


/* Títulos, introducciones y contenido intermedio */

.homs-container--content {
    max-width: var(--homs-container-content);
}


/* Contenido principalmente textual */

.homs-container--text {
    max-width: var(--homs-container-text);
}


/* Contenedor sin padding lateral */

.homs-container--no-padding {
    padding-right: 0;
    padding-left: 0;
}


/* =========================================================
   07. GRIDS Y LAYOUTS
   ========================================================= */

.homs-grid {
    display: grid;
    gap: var(--homs-grid-gap);
}


/* Flex con gap responsive */

.homs-flex {
    display: flex;
    gap: var(--homs-grid-gap);
}


/* Contenido vertical */

.homs-stack {
    display: flex;
    flex-direction: column;
}


/* Centrado horizontal */

.homs-align-center {
    align-items: center;
}


/* Centrado del contenido */

.homs-justify-center {
    justify-content: center;
}


/* Distribución uniforme */

.homs-justify-between {
    justify-content: space-between;
}


/* =========================================================
   08. AJUSTES RESPONSIVE DE LAYOUT
   ========================================================= */

@media screen and (max-width: 767px) {

    /**
     * Añade esta clase cuando un flex horizontal
     * deba convertirse en columna en móvil.
     */

    .homs-flex--mobile-column {
        flex-direction: column;
    }
}