/* Landing corporativa de Amoblando Pullman.
   Un solo archivo, sin framework ni JavaScript.

   La pagina es un selector de destino y nada mas: cuatro secciones a pantalla
   completa, una por marca, y el pie legal. No hay cabecera ni portada, porque
   cualquier titular por encima de las marcas repite lo que las marcas ya dicen.

   La compañia no tiene logo, asi que su nombre no se compone en ningun lado
   como si lo tuviera: solo aparece en el h1 oculto y en el pie.

   Los colores de cada marca salen de sus propios logos y hojas de estilo:
   Pullman #FF0000, Amoblando #00457C, el dorado #A68D49 de Pullman Home
   (su logo es negro, por eso el acento va aparte) y el cian #33CCFF de Housy,
   que lo distingue del azul de Amoblando. */

/* ==========================================================================
   Tipografia
   --------------------------------------------------------------------------
   Manrope alojada aqui en vez de Google Fonts: la hoja de fonts.googleapis.com
   bloqueaba el render. Es la fuente variable (400-800), asi que un solo archivo
   por subconjunto cubre los cuatro pesos que usa la pagina.

   Los unicode-range son los mismos que sirve Google: el navegador solo descarga
   latin-ext si la pagina llega a necesitar algun caracter de ese rango.
   ========================================================================== */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Variables y base
   ========================================================================== */

:root {
    --tinta: #12100e;
    --marca-pullman: #ff0000;
    --marca-amoblando: #1a72c4;
    --marca-pullmanhome: #c9a961;
    --marca-housy: #33ccff;

    --ancho: 78rem;
    --transicion: 260ms cubic-bezier(.2, .7, .3, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--tinta);
    color: #fff;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Seccion de marca
   --------------------------------------------------------------------------
   Cada marca ocupa casi toda la pantalla. La foto va a sangre y el contenido
   se ancla abajo a la izquierda, sobre un velo que se oscurece hacia esa
   esquina: asi el texto se lee sin importar que traiga la fotografia.
   ========================================================================== */

.brand {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* casi la pantalla completa, con tope en monitores muy altos */
    min-height: clamp(34rem, 92svh, 58rem);
    padding-block: clamp(3rem, 8vh, 5.5rem);
    overflow: hidden;
    isolation: isolate;
}

.brand-media,
.brand-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.brand-media img {
    object-fit: cover;
    object-position: center;
    transition: transform 900ms cubic-bezier(.2, .7, .3, 1);
}

/* Al pasar por la seccion la foto respira un poco. */
.brand:hover .brand-media img {
    transform: scale(1.03);
}

.brand-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .55) 38%, rgba(8, 7, 6, .10) 78%),
        linear-gradient(to right, rgba(8, 7, 6, .60) 0%, rgba(8, 7, 6, 0) 58%);
}

/* Franja del color de la marca en el borde superior de cada seccion. */
.brand::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 5px;
    background-color: var(--marca);
}

.brand-inner {
    position: relative;
    z-index: 1;
}

/* --- Pais y categoria -------------------------------------------------- */

.brand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* El pais va en pastilla: agrupa visualmente las tres tiendas de Colombia
   y separa la de Mexico sin necesidad de encabezados aparte. */
.brand-country {
    padding: .1875rem .6875rem;
    border-radius: 999px;
    background-color: var(--marca);
    color: var(--marca-texto, #fff);
}

.brand-cat {
    color: rgba(255, 255, 255, .82);
}

/* --- Logo -------------------------------------------------------------- */

.brand-name {
    margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1;
}

/* Los cuatro logos son de un solo color, asi que el filtro los deja en
   blanco puro sin perder detalle: sobre la foto es la unica version legible.
   (Housy es el unico con version blanca propia; esto iguala a los otros
   tres, que no la tienen.) */
.brand-logo {
    height: clamp(2.25rem, 5.5vw, 4rem);
    width: auto;
    filter: brightness(0) invert(1);
}

/* --- Texto ------------------------------------------------------------- */

.brand-copy {
    margin: 0 0 1.5rem;
    max-width: 34rem;
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

.brand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.brand-tags li {
    padding: .3125rem .875rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
}

/* --- Llamada a la accion ----------------------------------------------- */

.brand-cta {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 2rem;
    border-radius: 999px;
    background-color: #fff;
    color: var(--tinta);
    font-size: 1.0625rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color var(--transicion),
        color var(--transicion),
        transform var(--transicion);
}

/* El enlace se estira sobre toda la seccion: se puede hacer clic en
   cualquier parte, pero en el arbol de accesibilidad sigue habiendo uno solo. */
.brand-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.brand:hover .brand-cta {
    background-color: var(--marca);
    color: var(--marca-texto, #fff);
    transform: translateY(-2px);
}

.brand-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.brand-arrow {
    transition: transform var(--transicion);
}

.brand:hover .brand-arrow {
    transform: translateX(5px);
}

.brand-domain {
    margin: 1rem 0 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .6);
}

/* --- Color de cada marca ------------------------------------------------
   El rojo de Pullman y el cian de Housy no dan contraste suficiente con
   texto blanco encima, asi que esas dos pastillas llevan texto oscuro.
   Amoblando y Pullman Home usan tonos aclarados de su color de marca: los
   originales (#00457C y #A68D49) se apagan demasiado sobre fotografia. */

.brand--pullman {
    --marca: var(--marca-pullman);
}

.brand--amoblando {
    --marca: var(--marca-amoblando);
}

.brand--pullmanhome {
    --marca: var(--marca-pullmanhome);
    --marca-texto: var(--tinta);
}

.brand--housy {
    --marca: var(--marca-housy);
    --marca-texto: var(--tinta);
}

/* --- Cuadricula 2x2 en escritorio ---------------------------------------
   Hasta 62rem cada marca ocupa su propia pantalla, que es lo que funciona en
   movil. Desde ahi van dos por dos: las cuatro entran de un vistazo y se
   pueden comparar sin desplazarse.

   Sin separacion entre celdas a proposito: las fotos se tocan y la franja de
   color de cada marca hace de division. */

@media (min-width: 62rem) {
    main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dos filas de media pantalla: el conjunto cabe en una. */
    .brand {
        min-height: clamp(24rem, 50svh, 32rem);
        padding-block: clamp(2rem, 4vh, 3rem);
    }

    /* En media pantalla el contenido se alinea al borde de su celda; con el
       centrado del .container quedaba flotando en medio del cuadrante. */
    .brand-inner {
        max-width: none;
        margin-inline: 0;
        padding-inline: clamp(1.75rem, 3.2vw, 3rem);
    }

    /* Estos tres escalaban con el ancho de la ventana. En una celda que mide
       la mitad se veian desproporcionados, asi que aqui escalan más despacio. */
    .brand-logo {
        height: clamp(2.25rem, 3vw, 3.25rem);
    }

    .brand-copy {
        margin-bottom: 1.25rem;
        max-width: 30rem;
        font-size: clamp(1rem, 1.15vw, 1.125rem);
    }

    .brand-cta {
        padding: .875rem 1.75rem;
        font-size: 1rem;
    }

    .brand-tags {
        margin-bottom: 1.5rem;
    }

    /* El velo lateral se disipaba al 58% del ancho, pensado para una seccion
       a pantalla completa. En una celda estrecha eso deja el texto sobre la
       parte clara de la foto. */
    .brand-media::after {
        background:
            linear-gradient(to top, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .58) 45%, rgba(8, 7, 6, .12) 85%),
            linear-gradient(to right, rgba(8, 7, 6, .55) 0%, rgba(8, 7, 6, 0) 85%);
    }
}

/* En portátiles bajos (720 y 768 de alto son de lo más común) las dos filas
   sumaban unos 810px y la de abajo quedaba bajo el pliegue, que es justo lo
   que la cuadrícula venía a evitar. Aquí se aprieta el ritmo vertical lo
   justo para que las cuatro entren en una pantalla. */

@media (min-width: 62rem) and (max-height: 52rem) {
    /* Sin suelo de 24rem: aquí ese mínimo era lo que empujaba la segunda fila
       fuera de la pantalla. El contenido ya marca su propia altura mínima. */
    .brand {
        min-height: 50svh;
        padding-block: 1.5rem;
    }

    .brand-meta,
    .brand-name {
        margin-bottom: 1rem;
    }

    .brand-copy,
    .brand-tags {
        margin-bottom: 1rem;
    }

    .brand-domain {
        margin-top: .625rem;
    }
}

/* ==========================================================================
   Pie
   ========================================================================== */

.site-footer {
    padding-block: clamp(2.5rem, 6vw, 3.5rem) 3rem;
    background-color: var(--tinta);
    color: rgba(255, 255, 255, .62);
}

/* Acceso al formulario de proveedores. Antes era un enlace de texto suelto
   encima del aviso legal y se leía como parte de la letra pequeña. Como
   bloque con su propio encaje y un botón, se entiende que es una acción. */
.footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
}

.footer-cta-titulo {
    margin: 0 0 .25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.footer-cta-texto {
    margin: 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .62);
}

/* Mismo lenguaje que el botón de las marcas, pero en secundario: contorno en
   vez de relleno, para que no compita con «Ir a la tienda». */
.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .8125rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.footer-cta-btn:hover,
.footer-cta-btn:focus-visible {
    background-color: #fff;
    border-color: #fff;
    color: var(--tinta);
}

.footer-cta-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .5);
    outline-offset: 3px;
}

.footer-legal {
    margin: 0 0 1rem;
    max-width: 56rem;
    font-size: .8125rem;
    line-height: 1.7;
}

.footer-legal strong {
    font-weight: 700;
    color: rgba(255, 255, 255, .92);
}

/* Cada aviso legal aplica a un pais distinto; la etiqueta lo deja claro. */
.footer-country {
    display: inline-block;
    margin-right: .5rem;
    padding: .0625rem .5625rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.footer-copy {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .brand:hover .brand-media img,
    .brand:hover .brand-cta,
    .brand:hover .brand-arrow {
        transform: none;
    }
}