/* ─────────────────────────────────────────────────────────────────────────────
   Home — correcciones propias

   El Home es un tema de WordPress (Elementor + trx_addons) exportado a Razor. Su
   CSS viene tal cual del tema y no conviene tocarlo: cualquier ajuste se perdería
   al reexportarlo. Esta hoja se carga DESPUÉS de todas las del tema —incluidas
   sus tres hojas responsivas— y es el único sitio donde vive lo nuestro:

     1. Correcciones responsivas: lo que el tema no resuelve en el teléfono.
     2. El modal de detalle: las tarjetas de servicios, "nosotros" y blog abren
        su texto completo aquí, sin salir de la página.

   Se escribe con la especificidad justa y sin !important salvo donde hay que
   ganarle a un estilo en línea del tema, que sí los usa.
   ───────────────────────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════════════════════
   1. CORRECCIONES RESPONSIVAS
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Nada se sale de la pantalla ──
   El tema reparte decoraciones con position:absolute y desplazamientos en píxeles
   calculados para 1920 de ancho. Casi todas llevan elementor-hidden-mobile, pero
   no todas, y en el teléfono asomaban por el costado: la página se podía arrastrar
   de lado y el visitante terminaba mirando una franja de fondo vacío.

   Se limita en el <body> y no en los envoltorios del tema a propósito: la
   cabecera es fija y un `overflow` en un contenedor intermedio la recortaría.

   Se declara dos veces por una diferencia que importa: `hidden` obliga al eje
   vertical a pasar de `visible` a `auto`, y eso convierte al <body> en su propio
   contenedor de desplazamiento —dos barras y la cabecera pegajosa del tema en
   riesgo—. `clip` recorta sin crear contenedor, así que se deja como la buena y
   `hidden` queda de reserva para el navegador que no la entienda. */
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Las imágenes traen ancho y alto en el atributo (924×678 y parecidos), medidas
   del diseño original. Sin este tope, en una pantalla de 390 px la tarjeta del
   blog empujaba el ancho de toda la fila. */
.page_wrap img {
    max-width: 100%;
    height: auto;
}

/* Un título largo sin espacios —un nombre de servicio, una URL escrita por el
   administrador— desbordaba su tarjeta en lugar de partirse. */
.page_wrap h1,
.page_wrap h2,
.page_wrap h3,
.page_wrap h4,
.page_wrap h5,
.page_wrap h6,
.trx-addons-posts-item-title,
.elementor-icon-box-title {
    overflow-wrap: break-word;
}

/* El submenú del tema declara `width: 790px !important` en un estilo en línea
   (ver _Head). En una tableta eso es más ancho que la pantalla. */
[class*="trx_addons_inline_"] > ul {
    max-width: calc(100vw - 2rem) !important;
}

/* ── La cabecera se queda a la vista en el teléfono ──
   El tema declara fija solo la fila de escritorio (sc_layouts_row_fixed_always).
   La del teléfono —la que trae la hamburguesa— iba en el flujo, así que se
   marchaba con el desplazamiento y para volver al menú había que subir la
   portada entera. El Home es una sola página de seis secciones: el menú es la
   única forma de moverse por ella.

   No se usa `position: sticky` a pesar de ser lo natural: un elemento pegajoso
   solo se pega mientras su bloque contenedor está a la vista, y aquí ese bloque
   es la propia cabecera.

   Fija y flotando sobre el contenido, sin hueco que la compense: es lo que hace
   el tema en escritorio, y su hoja quita el relleno superior del contenido con
   !important (body.remove_margins). La portada es una foto a sangre y la barra
   se apoya encima, como se veía antes.

   Lo que sí necesita la medida es el salto del menú: _Scripts.cshtml mide esta
   barra y la publica en --home-alto-cabecera para que al pulsar "Servicios" la
   sección no quede empezada por debajo de ella (ver el scroll-margin-top de
   Index.cshtml). */
@media (max-width: 1024px) {
    header .e-con.e-parent.elementor-hidden-desktop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* Por debajo del cajón del menú y de su velo, que el tema pone en 10002. */
        z-index: 9000;
    }
}

/* ── Objetivos táctiles ──
   Los enlaces del menú móvil y el botón de la hamburguesa se dibujaban a la
   altura de su texto: en un teléfono quedaban por debajo de los 44 px que hacen
   falta para acertarles con el pulgar. */
@media (max-width: 1024px) {
    .trx-addons-mobile-menu .trx-addons-menu-link {
        display: flex;
        align-items: center;
        min-height: 48px;
    }

    .trx-addons-hamburger-toggle,
    .trx-addons-mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Los enlaces que abren el detalle son los que más importan de esta lista:
       "Ver detalles" de Nosotros medía 20 px de alto y la categoría de una nota
       del blog, 16. Se agranda el área de acierto con relleno y no con altura,
       porque son enlaces en línea dentro de un texto y una altura fija los
       descolocaría de su renglón. */
    .trx-addons-icon-list-item > a,
    .trx-addons-posts-item-term > a,
    .footer_wrap .elementor-icon-list-item > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Las columnas de enlaces del pie —secciones, tienda, contacto— venían a 24
       px de alto y con los renglones pegados: en el pulgar, "Alimento" y
       "Casitas" eran el mismo objetivo. */
    .footer_wrap .elementor-icon-list-item {
        line-height: 1.3;
    }
}

/* ── Teléfono ── */
@media (max-width: 640px) {
    /* Los contadores de indicadores usan un h1 del tamaño de escritorio; a 390 px
       de ancho, cuatro cifras de cinco dígitos no entraban en su fila. */
    .trx-addons-counter-number-wrap {
        font-size: clamp(1.9rem, 11vw, 3rem);
        line-height: 1.1;
    }

    /* El botón "volver arriba" se apoyaba en la esquina, encima del último
       renglón de la sección de contacto. */
    .trx_addons_scroll_to_top {
        right: 0.75rem;
        bottom: 0.75rem;
    }
}


/* ═════════════════════════════════════════════════════════════════════════════
   2. MODAL DE DETALLE

   Las tarjetas de servicios, "nosotros" y blog llevaban un enlace que no iba a
   ninguna parte: el administrador captura textos, no URLs, así que el enlace
   quedaba en "#" y el visitante se quedaba con el recorte de la tarjeta. Ahora
   la tarjeta abre su texto completo aquí mismo.

   El modal es propio y no del tema: el Home no carga Bootstrap, y el magnific
   popup que trae el tema está pensado para galerías de imágenes.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Los datos de cada detalle viven en el marcado, ocultos, y el modal los clona:
   así el texto ya viene renderizado y escapado por Razor, y abrir una tarjeta no
   cuesta una petición al servidor. */
.home-detalles {
    display: none;
}

/* La tarjeta que abre un detalle. Se marca desde la vista con
   data-home-detalle, y aquí se le da el gesto de "esto se puede pulsar". */
[data-home-detalle] {
    cursor: pointer;
}

    [data-home-detalle]:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
        border-radius: 0.25rem;
    }

.home-modal {
    position: fixed;
    inset: 0;
    /* Por encima de la cabecera fija del tema (z-index 8000 en algunas de sus
       filas) y del botón de volver arriba. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 2.5rem);
    opacity: 0;
    transition: opacity 0.22s ease;
}

    .home-modal.is-abierto {
        opacity: 1;
    }

.home-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(14, 22, 33, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.home-modal-caja {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 46rem;
    /* El alto lo pone el contenido, hasta donde la pantalla lo permita; de ahí en
       adelante desplaza el cuerpo y no el modal completo. */
    max-height: 100%;
    overflow: hidden;
    background: #fff;
    color: #4a5568;
    border-radius: clamp(0.75rem, 2vw, 1.25rem);
    box-shadow: 0 30px 80px rgba(9, 15, 24, 0.45);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.22s ease;
}

    .home-modal.is-abierto .home-modal-caja {
        transform: none;
    }

.home-modal-cerrar {
    position: absolute;
    top: clamp(0.5rem, 1.4vw, 0.9rem);
    right: clamp(0.5rem, 1.4vw, 0.9rem);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #1a202c;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(26, 32, 44, 0.12);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(9, 15, 24, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .home-modal-cerrar:hover,
    .home-modal-cerrar:focus-visible {
        background: #fff;
        transform: scale(1.06);
    }

.home-modal-cuerpo {
    overflow-y: auto;
    /* Desplazamiento suave en iOS sin arrastrar la página de fondo. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── Contenido del detalle ── */
.home-detalle-foto {
    /* Proporción fija: las imágenes que sube el administrador no vienen
       recortadas y una foto vertical ocupaba el modal entero sin dejar ver el
       texto.

       El tope en vh es para la pantalla baja —un portátil de 768— donde 16:9
       sobre 736 px de ancho da una foto de 414 px y dejaba el texto y el botón
       por debajo del borde. El recorte lo absorbe el object-fit de la imagen. */
    aspect-ratio: 16 / 9;
    max-height: 38vh;
    overflow: hidden;
    background: #edf2f7;
}

    .home-detalle-foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.home-detalle-texto {
    padding: clamp(1.1rem, 3.5vw, 2.25rem);
}

.home-detalle-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #718096;
}

.home-detalle-categoria {
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    background: rgba(37, 176, 155, 0.14);
    color: #16776a;
}

.home-detalle-titulo {
    margin: 0 0 0.5rem;
    font-size: clamp(1.3rem, 1.1vw + 1rem, 1.9rem);
    line-height: 1.2;
    color: #1a202c;
    overflow-wrap: break-word;
}

.home-detalle-subtitulo {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #25b09b;
}

/* La bajada es el texto que ya se leía en la tarjeta: se destaca para que se
   reconozca de dónde viene el visitante, y el cuerpo sigue debajo. */
.home-detalle-entrada {
    margin: 0 0 1.1rem;
    font-size: clamp(0.95rem, 0.25vw + 0.9rem, 1.08rem);
    line-height: 1.6;
    color: #2d3748;
}

.home-detalle-texto p {
    margin: 0 0 0.9rem;
    line-height: 1.7;
}

    .home-detalle-texto p:last-child {
        margin-bottom: 0;
    }

.home-detalle-enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    margin-top: 1rem;
    padding: 0 1.4rem;
    border-radius: 2rem;
    background: #25b09b;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

    .home-detalle-enlace:hover,
    .home-detalle-enlace:focus-visible {
        background: #1c8b7b;
        color: #fff;
    }

/* Mientras el modal está abierto la página de fondo no se desplaza: en el
   teléfono, sin esto, el dedo movía el Home por detrás del detalle. */
body.home-modal-abierto {
    overflow: hidden;
}

/* ── El modal en el teléfono ──
   Deja de ser una tarjeta flotante y pasa a ser una hoja que sube desde abajo y
   ocupa la pantalla: en 390 px, un recuadro con márgenes desperdicia el poco
   ancho que hay y deja el texto en una columna de dos palabras. */
@media (max-width: 575.98px) {
    .home-modal {
        padding: 0;
        align-items: flex-end;
    }

    /* Hoja apoyada en el borde inferior: crece con su texto y solo llega al alto
       completo cuando lo necesita. Fijarla al 100% dejaba media pantalla en
       blanco bajo los detalles cortos. */
    .home-modal-caja {
        max-width: none;
        height: auto;
        max-height: 94%;
        border-radius: 1rem 1rem 0 0;
        transform: translateY(24px);
    }

    .home-detalle-foto {
        aspect-ratio: 4 / 3;
    }
}

/* Quien pidió menos movimiento ve el modal aparecer sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {

    .home-modal,
    .home-modal-caja {
        transition: none;
    }

    .home-modal-caja {
        transform: none;
    }
}