/* ============================================================================
   MOISÉS MOTA · MY DIGITAL WORLD — PÁGINA /alquileres
   ----------------------------------------------------------------------------
   Hoja propia de una sola página. La carga website/solutions/alquileres.blade.php
   mediante @push('styles'), igual que mm-agentes.css y mm-contacto.css.

   TODO va bajo .mm-alq, que es una clase exclusiva de esta vista.
   No alcanza con .mm-sol--rent: esa clase la comparten /alquileres,
   /buscar-alquiler, /garantia-alquiler y /gestion-de-alquileres, así que
   cualquier regla colgada de ahí tocaría las otras tres.

   Reutiliza lo que ya existe y no redefine nada compartido:
     mm-solutions.css → .mm-phero, .mm-offers, .mm-pains, .mm-flow y el
                        acento ámbar --mm-c / --mm-c-soft / --mm-c-glow
     mm-story.css     → --motion-fast/base/slow y las curvas --ease-*
     mm-2026.css      → el par .mm-reveal / .is-visible (observador en mm-2026.js)
   ========================================================================== */

.mm-alq {
    --mm-alq-gap: 48px;
    --mm-alq-radio: 20px;
}

/* ============================================
   LOOP 1 — HERO EN DOS ZONAS
   El contenido de la izquierda no cambia: sólo deja de ocupar los 780px
   sueltos que dejaban 420px muertos a la derecha.
   ============================================ */

.mm-alq .mm-phero {
    /* Eran 150px arriba. Con una composición a la derecha el hero ya tiene
       cuerpo propio y no necesita tanto aire muerto bajo la barra fija. */
    padding: 128px 0 76px;
}

.mm-alq-hero__grid {
    display: grid;
    grid-template-columns: 54fr 46fr;
    gap: var(--mm-alq-gap);
    align-items: center;
}

/* Dentro de la grilla el texto manda sobre su columna, no sobre 780px fijos */
.mm-alq .mm-phero__inner { max-width: none; }

/* ============================================
   LOOP 3 — LA FOTO DENTRO DE LA COMPOSICIÓN
   No es un rectángulo con una foto: es un panel recortado en vertical,
   con la cara arriba, que se desvanece hacia abajo y hacia la izquierda
   para fundirse con el fondo en vez de terminar en un borde duro.
   ============================================ */

.mm-alq-visual {
    position: relative;
    isolation: isolate;
}

.mm-alq-foto {
    position: relative;
    display: block;
    margin: 0;
    /* Más alto que ancho: recorte editorial, no el cuadrado original */
    aspect-ratio: 4 / 5.4;
    border-radius: var(--mm-alq-radio);
    overflow: hidden;
    /* El degradado hacia abajo y hacia la izquierda evita el borde duro */
    -webkit-mask-image:
        linear-gradient(180deg, #000 56%, rgba(0, 0, 0, .35) 88%, transparent 100%),
        linear-gradient(270deg, #000 76%, rgba(0, 0, 0, .55) 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 56%, rgba(0, 0, 0, .35) 88%, transparent 100%),
        linear-gradient(270deg, #000 76%, rgba(0, 0, 0, .55) 94%, transparent 100%);
    mask-composite: intersect;
}

/* <x-foto> envuelve la imagen en un <picture>, que es inline por defecto y
   no propagaría la altura del recorte. */
.mm-alq-foto picture {
    display: block;
    width: 100%;
    height: 100%;
}

.mm-alq-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El original es cuadrado y el recorte es más alto que ancho, así que
       cover escala por alto: se ve el alto entero y se recorta a los lados.
       El 54% corre esa ventana para dejar la cara centrada; el eje vertical
       no tiene efecto acá, por eso va en center. */
    object-position: 54% center;
}

/* Capa de color muy leve para que la foto no compita con el ámbar */
.mm-alq-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(190deg, transparent 40%, rgba(3, 7, 18, .62) 100%),
        linear-gradient(90deg, rgba(3, 7, 18, .34) 0%, transparent 42%);
    pointer-events: none;
}

/* Luz ambiental detrás, muy discreta y estática. Sin sangrado lateral:
   un pseudo-elemento que se sale del contenedor suma ancho al documento. */
.mm-alq-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12% 0 0 0;
    background: radial-gradient(58% 54% at 62% 34%, var(--mm-c-soft), transparent 72%);
    filter: blur(8px);
    pointer-events: none;
}

/* La foto corre hacia la derecha para dejarle sitio al riel del proceso,
   que se apoya sobre su borde izquierdo difuminado. */
.mm-alq-foto { margin-left: 24%; }

/* ============================================
   LOOP 2 — EL PROCESO
   Cuatro nodos: el paso y aquello de lo que se ocupa. Son los mismos pasos
   de la sección "Cómo es el proceso". Explica, no decora.
   ============================================ */

.mm-alq-ruta {
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 56%;
    margin: 0;
    padding: 13px 14px 13px 13px;
    list-style: none;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(10, 16, 30, .90) 0%, rgba(3, 7, 18, .94) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .95);
}

.mm-alq-ruta li {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: baseline;
    column-gap: 11px;
    padding: 5px 0;
}

/* La línea que une los nodos. Va de un punto al siguiente, por eso no
   aparece en el último. */
.mm-alq-ruta li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: -7px;
    width: 2px;
    background: linear-gradient(180deg, var(--mm-c), rgba(246, 160, 0, .22));
    border-radius: 2px;
    transform-origin: top center;
}

.mm-alq-ruta__punto {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--mm-c);
    background: rgba(246, 160, 0, .14);
    box-sizing: border-box;
}

.mm-alq-ruta__paso {
    grid-column: 2;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

.mm-alq-ruta__obj {
    grid-column: 2;
    margin-top: 2px;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mm-c);
}

/* ============================================
   LOOP 4 — MOTION DEL HERO
   Una sola vez, y después todo queda quieto.

   Se engancha a .mm-reveal / .is-visible de mm-2026.js, que ya resuelve
   movimiento reducido, falta de IntersectionObserver y un repaso de
   seguridad a los 1500 ms. Todo cuelga de .mm-js, la clase que el layout
   pone con un script en línea: sin JS no aplica nada y se ve todo.

   Línea de tiempo desde que la composición entra en pantalla:
       60 ms   la foto abre con clip-path          (900 ms)
      300 ms   el panel del proceso aparece        (420 ms)
      420 ms   nodo "Buscás"                       (380 ms)
      540 ms   línea 1 ─ se dibuja hacia abajo     (260 ms)
      550 ms   nodo "Evaluamos"
      670 ms   línea 2
      680 ms   nodo "Resolvemos"
      800 ms   línea 3
      810 ms   nodo "Firmás"            termina a 1190 ms
   ============================================ */

@keyframes mm-alq-foto-entra {
    from { clip-path: inset(7% 9% 11% 9% round var(--mm-alq-radio)); opacity: .35; }
    to   { clip-path: inset(0 0 0 0 round var(--mm-alq-radio)); opacity: 1; }
}

@keyframes mm-alq-panel-entra {
    from { opacity: 0; translate: -10px 8px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mm-alq-nodo-entra {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes mm-alq-linea-entra {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

.mm-js .mm-alq-ruta,
.mm-js .mm-alq-ruta li { opacity: 0; }
.mm-js .mm-alq-ruta li:not(:last-child)::before { transform: scaleY(0); }

.mm-js .mm-alq-visual.is-visible .mm-alq-foto {
    animation: mm-alq-foto-entra var(--motion-slow, 900ms) var(--ease-out-premium) 60ms both;
}

.mm-js .mm-alq-visual.is-visible .mm-alq-ruta {
    animation: mm-alq-panel-entra 420ms var(--ease-standard) 300ms both;
}

.mm-js .mm-alq-visual.is-visible .mm-alq-ruta li {
    animation: mm-alq-nodo-entra var(--motion-fast, 380ms) var(--ease-standard) both;
    animation-delay: calc(420ms + var(--i) * 130ms);
}

.mm-js .mm-alq-visual.is-visible .mm-alq-ruta li:not(:last-child)::before {
    animation: mm-alq-linea-entra 260ms var(--ease-travel) both;
    animation-delay: calc(540ms + var(--i) * 130ms);
}

/* ============================================
   RESPONSIVE DEL HERO
   ============================================ */

/* Tablet grande: la composición se angosta antes de romperse */
@media (max-width: 1199px) {
    .mm-alq { --mm-alq-gap: 36px; }
    .mm-alq-hero__grid { grid-template-columns: 55fr 45fr; }
}

/* Debajo de 1024 el hero pasa a una sola columna.
   Orden: breadcrumb/píldora, titular, texto, CTAs, chips, composición. */
@media (max-width: 1023px) {
    .mm-alq .mm-phero { padding: 112px 0 60px; }
    .mm-alq-hero__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .mm-alq-visual {
        max-width: 460px;
        margin-inline: auto;
    }
    .mm-alq-foto {
        aspect-ratio: 4 / 4.2;
        margin-left: 0;
    }
    /* En una sola columna el riel deja de montarse sobre la foto: pasa a
       apoyarse debajo, solapando apenas el borde difuminado. */
    .mm-alq-ruta {
        position: static;
        width: auto;
        margin-top: -34px;
    }
}

@media (max-width: 767px) {
    .mm-alq .mm-phero { padding: 104px 0 52px; }
    .mm-alq-hero__grid { gap: 32px; }
    .mm-alq-visual { max-width: 340px; }
}

@media (max-width: 389px) {
    .mm-alq-visual { max-width: 300px; }
}

/* ============================================
   LOOP 5 — GRILLAS DE TARJETAS
   mm-solutions.css usa repeat(auto-fit, minmax(X, 1fr)) en las tres grillas.
   Eso reparte por espacio disponible y no por cantidad, y deja 4+2 en
   Dolores, 3+1 en el Proceso a 1024 y 2+1 en Qué hago a 768.
   Acá se fija la cantidad de columnas en cada tramo. Todo bajo .mm-alq,
   así que /buscar-alquiler, /garantia-alquiler y /gestion-de-alquileres
   siguen exactamente igual.
   ============================================ */

/* Dolores: 6 tarjetas → 3 + 3 */
.mm-alq .mm-pains { grid-template-columns: repeat(3, 1fr); }

/* Qué hago: 3 tarjetas → 3 en una fila */
.mm-alq .mm-offers { grid-template-columns: repeat(3, 1fr); }

/* Proceso: secuencia de 4 → una sola fila mientras entren cómodos */
.mm-alq .mm-flow { grid-template-columns: repeat(4, 1fr); }

/* Con menos de ~1100 los 4 pasos quedan por debajo de 240px y aprietan.
   2 + 2 mantiene la lectura 1→2 / 3→4. Nunca 3 + 1. */
@media (max-width: 1099px) {
    .mm-alq .mm-flow { grid-template-columns: repeat(2, 1fr); }
}

/* Dolores pasa a 2 + 2 + 2 */
@media (max-width: 1023px) {
    .mm-alq .mm-pains { grid-template-columns: repeat(2, 1fr); }
}

/* Qué hago: por debajo de 900 las tres tarjetas bajan de 280px.
   Una por fila antes que un 2 + 1 con una huérfana. */
@media (max-width: 899px) {
    .mm-alq .mm-offers { grid-template-columns: 1fr; }
}

/* Teléfono: una columna en todo */
@media (max-width: 639px) {
    .mm-alq .mm-pains { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
    .mm-alq .mm-flow { grid-template-columns: 1fr; }
}

/* ============================================
   MOVIMIENTO REDUCIDO
   mm-2026.css ya neutraliza .mm-reveal. Acá se apaga lo propio de la página
   y la composición queda directamente en su estado final.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .mm-js .mm-alq-visual.is-visible .mm-alq-foto,
    .mm-js .mm-alq-visual.is-visible .mm-alq-ruta,
    .mm-js .mm-alq-visual.is-visible .mm-alq-ruta li,
    .mm-js .mm-alq-visual.is-visible .mm-alq-ruta li:not(:last-child)::before {
        animation: none !important;
    }
    .mm-js .mm-alq-ruta,
    .mm-js .mm-alq-ruta li {
        opacity: 1 !important;
        translate: none !important;
    }
    .mm-js .mm-alq-ruta li:not(:last-child)::before {
        transform: none !important;
    }
    .mm-alq-foto {
        clip-path: none !important;
        opacity: 1 !important;
    }
}