/* ============================================================
   ESTANDARTE — home.css
   Estilos específicos de la portada (ES-31).
   Se carga solo en la front page.
   ============================================================ */

/* ----------------------------------------------------------
   1. Carrusel de portada
   ---------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--color-navy); }
.hero__track { position: relative; height: 632px; }
.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0; /* título y descripción van pegados (Figma) */
    padding-inline: var(--container-pad); /* 100px desde el borde (Figma) */
}
.hero__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;      /* la caja se ajusta al texto */
    max-width: 511px;        /* límite para envolver a 2 líneas como el Figma */
    margin: 0;
    padding: 20px 30px;
    background: var(--color-blue);
    color: #fff;
    font-family: var(--font-base); /* Avenir */
    font-weight: 600;
    font-size: var(--fs-64); /* 64px */
    line-height: normal;
    text-transform: uppercase;
}
.hero__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;      /* la caja se ajusta al texto */
    max-width: 500px;
    margin: 0;
    padding: 10px 20px;
    background: #0e1946; /* navy del Figma */
    color: #fff;
    font-family: var(--font-base); /* Avenir */
    font-weight: 400; /* Avenir Roman */
    font-size: var(--fs-32); /* 32px */
    line-height: 1.5;
}
.hero__cta { margin-top: 10px; }
.hero__progress {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 4px;
}
.hero__dot {
    width: 39px;
    height: 3px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: #d9d9d9;
    cursor: pointer;
    transition: background var(--transition);
}
.hero__dot.is-active { background: var(--color-blue); }

/* ----------------------------------------------------------
   2. Categorías + CTA
   ---------------------------------------------------------- */
.home-categorias {
    position: relative;
    overflow: hidden; /* la marca de agua no se pasa a la siguiente sección */
    padding-top: var(--space-3xl);
    padding-bottom: 80px;
    background: var(--color-bg-alt2);
}
.home-categorias__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    justify-items: center;
}
.home-categorias__cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: var(--space-2xl);
    text-align: center;
}
.home-categorias__copy { max-width: 720px; margin: 0; font-size: var(--fs-24); color: #0e1946; }
/* Marca de agua (vector real del Figma) detrás del copy/botón */
.home-categorias__watermark {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
    width: 668px;
    max-width: 92%;
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}
.home-categorias__copy,
.home-categorias__cta .btn { position: relative; z-index: 1; }

/* ----------------------------------------------------------
   3. Proyectos
   ---------------------------------------------------------- */
.home-proyectos { padding-block: var(--space-3xl); }
.home-proyectos__inner { display: flex; gap: 40px; align-items: center; }
.home-proyectos__head {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.home-proyectos__head .section-header__copy,
.home-proyectos__head .section-header__title { color: #0e1946; }
.home-proyectos__head .section-header__title { line-height: 1.5; }
.home-proyectos__head .btn { align-self: flex-start; } /* el botón no se estira */
.home-proyectos .project-accordion { flex: 1 1 auto; min-width: 0; }

/* ----------------------------------------------------------
   4. Marcas
   ---------------------------------------------------------- */
.home-marcas { padding-block: var(--space-2xl); text-align: center; }
.home-marcas__title {
    margin: 0 0 var(--space-2xl);
    color: var(--color-blue);
    font-size: var(--fs-36);
    text-transform: uppercase;
}
/* Carrusel continuo (marquee): los logos se desplazan en bucle sin fin */
.home-marcas__carousel {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.home-marcas__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: home-marcas-scroll 35s linear infinite;
}
.home-marcas__carousel:hover .home-marcas__track { animation-play-state: paused; }
.home-marcas__logo { flex: 0 0 auto; margin-right: 60px; }
.home-marcas__logo img { max-height: 46px; width: auto; object-fit: contain; }

@keyframes home-marcas-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .home-marcas__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* ----------------------------------------------------------
   5. Secciones split (Conócenos / Productos / Publicaciones / Ayuda)
   ---------------------------------------------------------- */
.home-split { display: flex; align-items: stretch; }
.home-split__media { position: relative; flex: 1 1 50%; min-height: 500px; }
.home-split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-split .home-split__body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-width: 720px;
    padding-block: var(--space-3xl);
}
.home-split__copy { margin: 0; font-size: var(--fs-20); }
.home-split__copy p { margin: 0; }
.home-split__copy p + p { margin-top: 1em; } /* separación entre párrafos (Figma) */
.home-split__body .btn { align-self: flex-start; } /* botón a su ancho natural */

/* Conócenos: imagen 900/1600 (56%), columna de texto ~440px, gap 30px (Figma) */
.home-nosotros.home-split { align-items: stretch; }
.home-nosotros.home-split .home-split__media { flex: 1 1 56%; min-height: 768px; }
.home-nosotros.home-split .home-split__body {
    flex: 1 1 44%;
    max-width: 580px;         /* 41 + 439 (texto) + 100 = 580 */
    min-height: 768px;        /* alto del contenido = alto de la imagen (Figma) */
    gap: 30px;
    padding-left: 41px;       /* separación exacta imagen ↔ contenido (Figma) */
    padding-right: 100px;
}
.home-split--dark { background: var(--color-blue); }
.home-split--dark .home-split__body,
.home-split--dark .home-split__copy { color: var(--color-white); }
.home-split--light { background: var(--color-bg-alt); }

/* ----------------------------------------------------------
   5c. Publicaciones (contenido + 2 fotos escalonadas)
   ---------------------------------------------------------- */
.home-publicaciones { background: var(--color-blue); overflow: hidden; }
.home-publicaciones__inner { display: flex; gap: 40px; align-items: center; }
.home-publicaciones__body {
    flex: 0 0 440px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.home-publicaciones__body .section-header__tag,
.home-publicaciones__copy { color: var(--color-white); }
/* La caja amarilla abraza el texto (no se estira a los 440px de la columna) */
.home-publicaciones__body .section-header__title { width: min-content; }
.home-publicaciones__copy { margin: 0; font-size: var(--fs-20); }
.home-publicaciones__body .btn { align-self: flex-start; }

/* Dos fotos 440×600, la segunda desplazada 100px hacia abajo (Figma) */
.home-publicaciones__media { flex: 1 1 auto; min-width: 0; display: flex; gap: 40px; align-items: flex-start; }
.home-publicaciones__item {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 440 / 600;
    overflow: hidden;
    display: block;
}
.home-publicaciones__item:nth-child(2) { margin-top: 100px; }
.home-publicaciones__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----------------------------------------------------------
   5b. Productos y servicios (mosaico + contenido)
   ---------------------------------------------------------- */
.home-productos { padding-block: var(--space-3xl); background: var(--color-bg-alt); }
.home-productos__inner { display: flex; gap: 40px; align-items: center; }

/* Mosaico masonry: 3 columnas, alturas por flex-grow (proporción Figma) */
.prod-gallery {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 920px;
    display: flex;
    gap: 8px;
    aspect-ratio: 920 / 825;
}
.prod-gallery__col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.prod-gallery__item {
    flex-basis: 0;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ececec;
}
.prod-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contenido a la derecha (356px) */
.home-productos__body {
    flex: 0 0 356px;
    max-width: 356px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.home-productos__body .section-header__title { width: 100%; } /* caja amarilla a todo el ancho (Figma) */
.home-productos__copy { margin: 0; font-size: var(--fs-20); color: #0e1946; }
.home-productos__copy p { margin: 0; }
.home-productos__copy p + p { margin-top: 1em; }
.home-productos__body .btn { align-self: flex-start; }

/* Orientación y ayuda: título más chico (45px) y copy 19px para acercarlo al diseño */
.home-ayuda .section-header__title { font-size: 45px; line-height: 1.5; }
.home-ayuda .home-split__copy { font-size: 19px; }

/* ----------------------------------------------------------
   6. Contacto (formulario)
   ---------------------------------------------------------- */
.home-contacto { padding-block: var(--space-3xl); background: var(--color-bg-alt); }
/* Alineado a la izquierda (con el logo del header), no centrado */
.home-contacto__inner { display: flex; gap: 40px; align-items: flex-start; justify-content: flex-start; }
.home-contacto__info { flex: 1 1 560px; max-width: 560px; display: flex; flex-direction: column; gap: 40px; }
.home-contacto__info .section-header__title { color: #0e1946; }
/* Título: 48px, ancho fijo 460px */
.home-contacto__info .section-header__title {
    box-sizing: border-box;
    width: 460px;
    max-width: 100%;
    font-size: 48px;
    line-height: 1.5;
}
/* Copy: un poco más pequeño para que quede en 2 líneas */
.home-contacto__copy { margin: 0; max-width: 480px; font-size: 18px; color: #0e1946; }
.home-contacto__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; font-size: var(--fs-20); color: #0e1946; }
.home-contacto__links li { display: flex; align-items: center; gap: 10px; }
.home-contacto__links a { color: #0e1946; }
.home-contacto__links a:hover { color: var(--color-blue); }
.home-contacto__links svg { flex-shrink: 0; color: var(--color-blue); }

.contact-form { flex: 1 1 800px; max-width: 800px; display: flex; flex-direction: column; gap: 64px; padding-top: 20px; }
.contact-form__row { display: flex; gap: 24px; }
.contact-form__field { display: flex; flex-direction: column; gap: 8px; margin: 0; flex: 1; }
.contact-form__field label { font-weight: var(--fw-heavy); font-size: var(--fs-16); color: #0e1946; }
/* Inputs del Figma: fondo #f6f6f6, borde #d4d4d4 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    background: #f6f6f6;
    border: 1px solid #d4d4d4;
    color: #0e1946;
}
.contact-form input[type="text"],
.contact-form input[type="email"] { height: 50px; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form ::placeholder { color: rgba(0, 3, 47, 0.5); opacity: 1; }
.contact-form__submit { margin: 0; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__flash { margin: 0; padding: 12px 16px; border-radius: var(--radius); font-size: var(--fs-16); }
.contact-form__flash--ok { background: #e6f7ec; color: #127a3a; }
.contact-form__flash--error { background: #fdecec; color: #a32d2d; }

/* ----------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .hero__track { height: 480px; }
    .hero__title { font-size: var(--fs-48); }
    .hero__subtitle { font-size: var(--fs-24); }

    .home-categorias__grid { grid-template-columns: 1fr; }

    .home-proyectos__inner { flex-direction: column; align-items: stretch; }
    .home-proyectos__head { flex-basis: auto; }

    .home-split { flex-direction: column; }
    .home-split__media { flex-basis: auto; min-height: 320px; }
    .home-split .home-split__body { max-width: none; }

    /* Conócenos: en móvil se apila sin el alto fijo ni el padding lateral de 41px */
    .home-nosotros.home-split .home-split__media,
    .home-nosotros.home-split .home-split__body { min-height: auto; }
    .home-nosotros.home-split .home-split__media { min-height: 320px; }
    .home-nosotros.home-split .home-split__body {
        max-width: none;
        padding-left: var(--container-pad);
        padding-right: var(--container-pad);
    }
    /* Publicaciones: contenido arriba, fotos abajo (sin escalonado) */
    .home-publicaciones__inner { flex-direction: column; align-items: stretch; padding-block: var(--space-2xl); }
    .home-publicaciones__body { flex-basis: auto; max-width: none; }
    .home-publicaciones__item:nth-child(2) { margin-top: 0; }

    /* Productos: mosaico arriba, contenido abajo */
    .home-productos__inner { flex-direction: column; align-items: stretch; }
    .prod-gallery { max-width: none; }
    .home-productos__body { flex-basis: auto; max-width: none; }

    /* align-items: flex-start pasa a ser el eje horizontal al apilar en columna
       y encogía el formulario al ancho de su contenido: se resetea a stretch. */
    .home-contacto__inner { flex-direction: column; align-items: stretch; }
    .home-contacto__info,
    .contact-form { flex: none; max-width: none; }
    .contact-form { gap: 40px; }

    /* Orientación y ayuda: contenido a ancho completo, sin alto fijo */
    .home-ayuda__inner { justify-content: flex-start; min-height: 0; padding-block: var(--space-2xl); }
    .home-ayuda__content { width: 100%; }
}

@media (max-width: 768px) {
    .hero__track { height: 420px; }
    .contact-form__row { flex-direction: column; gap: 20px; }
    /* Publicaciones: menos aire vertical en móvil */
    .home-publicaciones__inner { padding-block: var(--space-xl); gap: 28px; }
    /* Publicaciones en 1 línea, caja pegada al texto */
    .home-publicaciones__body .section-header__title { width: fit-content; font-size: 26px; }
    .home-publicaciones__body .section-header__title br { display: none; }
    /* Fotos: se mantienen lado a lado y con proporción más suave, para que
       ocupen un alto prudente en móvil (antes eran 440×600 muy verticales) */
    .home-publicaciones__media { gap: 16px; }
    .home-publicaciones__item { aspect-ratio: 3 / 4; }

    /* Marcas: sección más compacta y logos algo más chicos para que se vean
       más marcas a la vez en el carrusel */
    .home-marcas { padding-block: var(--space-xl); }
    .home-marcas__title { margin-bottom: var(--space-lg); font-size: var(--fs-24); }
    .home-marcas__logo { margin-right: 40px; }
    .home-marcas__logo img { max-height: 36px; }

    /* Cajas amarillas en móvil: selladas al texto con el corte deseado.
       Proyectos y Contáctanos en 2 líneas (respetan su <br>); Productos y
       Publicaciones en 1 línea (se oculta el <br>). Tamaño reducido para que
       la línea más larga quepa y la caja no llegue de extremo a extremo. */
    .home-ayuda .section-header__title { font-size: 32px; }
    .home-proyectos__head .section-header__title { width: fit-content; font-size: 26px; }
    .home-contacto__info .section-header__title { width: fit-content; max-width: 100%; font-size: 26px; }
    .home-productos__body .section-header__title { width: fit-content; font-size: 26px; }
    .home-productos__body .section-header__title br { display: none; }

    /* Contacto: bloques más juntos y datos de contacto algo más chicos */
    .home-contacto { padding-block: var(--space-2xl); }
    .home-contacto__info { gap: 24px; }
    .home-contacto__links { gap: 14px; font-size: var(--fs-18); }
    .home-contacto__links svg { width: 24px; height: 24px; }

    /* Formulario: menos separación entre bloques en móvil */
    .contact-form { gap: 28px; padding-top: 0; }

    /* Marca de agua del CTA: más grande y algo más abajo en móvil.
       El clip va en la sección (solo en el eje X) para no cortarla en vertical
       y a la vez evitar scroll horizontal por el 146%. */
    /* El pin de referencia pasa a ser la sección (no el bloque del CTA),
       así el icono queda pegado al borde inferior del contenedor principal. */
    .home-categorias { position: relative; overflow-x: clip; }
    .home-categorias__cta { position: static; }
    .home-categorias__watermark { max-width: 146%; top: auto; bottom: 0; }

    /* Mosaico de productos: gaps más finos y más alto para que las fotos
       no queden diminutas al reducirse a 3 columnas estrechas */
    .prod-gallery { gap: 6px; aspect-ratio: 4 / 5; }
    .prod-gallery__col { gap: 6px; }

    /* Acordeón de proyectos: más alto y con la caja azul holgada,
       para que título + texto + botón quepan sin apretarse */
    .project-accordion__card,
    .project-accordion__card:first-child { height: 380px; }
    .project-accordion__info { padding: 20px; }
    .project-accordion__info .project-banner__box {
        max-width: 100%;
        width: 100%;
        padding: 16px;
        gap: 8px;
    }
    .project-accordion__info .project-banner__title { font-size: var(--fs-20); }
    .project-accordion__info .project-banner__copy { font-size: var(--fs-16); }
}

@media (max-width: 480px) {
    /* Publicaciones: las 2 fotos siguen lado a lado (apilarlas hacía la
       sección larguísima); solo se afina el gap */
    .home-publicaciones__media { flex-direction: row; gap: 12px; }
}