/* ============================================================
   ESTANDARTE — components.css
   Sistema de diseño: componentes reutilizables (ES-30).
   Botones (estados), encabezados de sección, tarjetas
   (categoría, blog, proyecto) y banners.
   Depende de las variables definidas en main.css.
   ============================================================ */

/* ----------------------------------------------------------
   1. Botones — estados y variantes
   (la base .btn / .btn--primary / .btn--white está en main.css)
   ---------------------------------------------------------- */
.btn:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botón con flecha ("Ampliar detalles") */
.btn--arrow {
    gap: 12px;
    padding: 0;
    background: transparent;
    color: var(--color-white);
    font-weight: var(--fw-black);
}
.btn--arrow:hover,
.btn--arrow:focus { background: transparent; color: var(--color-yellow); }
.btn--arrow .btn__icon {
    width: 27px;
    height: 22px;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.btn--arrow:hover .btn__icon { transform: translateX(4px); }

/* Botón a ancho completo (formularios) */
.btn--block { width: 100%; }

/* ----------------------------------------------------------
   2. Encabezado de sección (tag + título + copy)
   ---------------------------------------------------------- */
.section-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.section-header__tag {
    font-weight: var(--fw-heavy);
    font-size: var(--fs-24);
    color: var(--color-blue);
    margin: 0;
}
.section-header__title {
    display: inline-block;
    align-self: flex-start;
    width: fit-content; /* la caja amarilla se ajusta al texto, no se estira */
    max-width: 100%;
    margin: 0;
    padding: 10px 20px;
    background: var(--color-yellow);
    color: var(--color-navy);
    font-weight: var(--fw-black);
    font-size: var(--fs-48);
    line-height: 1.5;
    text-transform: uppercase;
}
.section-header__copy {
    margin: 0;
    font-size: var(--fs-20);
    color: var(--color-navy);
}

/* Variante sobre fondo oscuro (secciones azul/navy) */
.section-header--dark .section-header__tag { color: var(--color-white); }
.section-header--dark .section-header__copy { color: var(--color-white); }

/* Variante centrada */
.section-header--center { align-items: center; text-align: center; }
.section-header--center .section-header__title { align-self: center; }

/* ----------------------------------------------------------
   3. Tarjeta de categoría (Vial / Comercial / Industrial)
   ---------------------------------------------------------- */
.category-card {
    position: relative;
    display: block;
    width: 100%;
    max-width: 440px;      /* 440 como máximo; se achica para caber */
    aspect-ratio: 440 / 570;
    border-radius: var(--radius);
    overflow: hidden;
    background: transparent; /* solo se ve la imagen del contenedor */
    box-shadow: var(--shadow-card);
    color: inherit;
}
.category-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.5s ease;
}
/* Al hacer hover la imagen hace zoom (la tarjeta ya tiene overflow:hidden) */
.category-card:hover .category-card__media,
.category-card:focus-within .category-card__media {
    transform: scale(1.08);
}
.category-card__bar {
    position: relative;
    z-index: 3; /* sobre el panel para que se vea salir hacia arriba */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 87px;
    padding: 0 20px;
    text-align: center;
    transition: transform 0.4s ease, opacity 0.3s ease;
}
/* Al hacer hover, la barra del título se oculta deslizándose hacia arriba */
.category-card:hover .category-card__bar,
.category-card:focus-within .category-card__bar {
    transform: translateY(-100%);
    opacity: 0;
}
.category-card__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--fs-24);
    text-transform: uppercase;
    line-height: 1.1;
}
/* Variantes de color de la barra */
.category-card--vial .category-card__bar { background: var(--color-yellow); }
.category-card--vial .category-card__title { color: var(--color-navy); }
.category-card--comercial .category-card__bar { background: var(--color-navy); }
.category-card--comercial .category-card__title { color: var(--color-white); }
.category-card--industrial .category-card__bar { background: var(--color-blue); }
.category-card--industrial .category-card__title { color: var(--color-white); }

/* Panel overlay: la barra de color se expande hacia abajo cubriendo la
   tarjeta (Smart Animate del Figma: Default → panel). */
.category-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 88px 66px 44px;
    text-align: center;
    clip-path: inset(0 0 100% 0); /* colapsado arriba (a la altura de la barra) */
    pointer-events: none;
    transition: clip-path 0.4s ease;
}
.category-card:hover .category-card__overlay,
.category-card:focus-within .category-card__overlay {
    clip-path: inset(0 0 0 0); /* se expande hacia abajo hasta cubrir la tarjeta */
    pointer-events: auto;
}
/* El contenido aparece con un leve retardo mientras el panel se expande */
.category-card__overlay > * {
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}
.category-card:hover .category-card__overlay > *,
.category-card:focus-within .category-card__overlay > * {
    opacity: 1;
}
.category-card__overlay-title {
    margin: 0 0 34px;
    margin-inline: -30px; /* un poco más de ancho para que quepa en una línea */
    font-weight: 700;
    font-size: var(--fs-24);
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap; /* título del hover en una sola línea */
}
.category-card__list {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
    width: 100%;
}
.category-card__list li {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-18);
    line-height: 1.2;
}
/* Texto del botón en azul #0072CE en las tres tarjetas */
.category-card__more { width: 100%; margin-top: auto; color: #0072ce; }
.category-card__more:hover,
.category-card__more:focus {
    background: var(--color-white);
    color: #0072ce;
}

/* Colores del panel por variante */
.category-card--industrial .category-card__overlay { background: rgba(0, 114, 206, 0.85); color: var(--color-white); }
.category-card--comercial .category-card__overlay { background: rgba(14, 25, 70, 0.85); color: var(--color-white); }
.category-card--vial .category-card__overlay { background: rgba(255, 209, 0, 0.9); color: var(--color-navy); }

/* En dispositivos táctiles (sin hover) el panel se muestra siempre,
   para que el botón sea accesible sin necesidad de hover. */
@media (hover: none) {
    .category-card__bar { transform: translateY(-100%); opacity: 0; }
    .category-card__overlay { clip-path: inset(0 0 0 0); pointer-events: auto; }
    .category-card__overlay > * { opacity: 1; }
}

/* ----------------------------------------------------------
   4. Tarjeta de blog (post-card) — refuerza la de main.css
   ---------------------------------------------------------- */
.post-card {
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__media { display: block; overflow: hidden; }
.post-card__img { transition: transform 0.4s ease; }
.post-card:hover .post-card__img { transform: scale(1.04); }
.post-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-xs);
    font-weight: var(--fw-heavy);
    color: var(--color-blue);
}

/* ----------------------------------------------------------
   5. Tarjeta de proyecto
   ---------------------------------------------------------- */
.project-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    color: var(--color-white);
    box-shadow: var(--shadow-card);
}
.project-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.project-card:hover .project-card__media { transform: scale(1.05); }
.project-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 3, 47, 0.85) 0%, rgba(0, 3, 47, 0) 60%);
}
.project-card__tag {
    align-self: flex-start;
    padding: 2px 20px;
    background: var(--color-yellow);
    color: var(--color-navy);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-18);
}
.project-card__title {
    margin: 0;
    font-weight: var(--fw-black);
    font-size: var(--fs-24);
    text-transform: uppercase;
    color: var(--color-white);
}
.project-card__copy { margin: 0; font-size: var(--fs-18); }

/* ----------------------------------------------------------
   6. Banner de proyectos (imagen grande + overlay + laterales)
   ---------------------------------------------------------- */
.project-banner {
    display: flex;
    gap: 40px;
    align-items: stretch;
}
.project-banner__main {
    position: relative;
    flex: 1 1 680px;
    min-height: 560px;
    border-radius: var(--radius);
    overflow: hidden;
}
.project-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    padding: 40px 40px 44px 40px;
}
.project-banner__tag {
    padding: 0 20px;
    background: var(--color-yellow);
    color: #0e1946;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-18);
    line-height: 22px;
}
.project-banner__box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 114, 206, 0.8);
    max-width: 392px;
}
.project-banner__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--fs-24);
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.1;
}
.project-banner__copy { margin: 0; font-size: var(--fs-18); font-weight: 300; color: var(--color-white); }
/* El botón "Ampliar detalles" va a la izquierda (no estirado ni centrado) */
.project-banner__box .btn--arrow { align-self: flex-start; padding: 0; }
.project-banner__sides {
    display: flex;
    gap: 40px;
    flex: 0 0 auto;
}
.project-banner__side {
    position: relative;
    width: 140px;
    border-radius: var(--radius);
    overflow: hidden;
}
.project-banner__side img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------
   6b. Acordeón de proyectos (hover: expande y muestra su info)
   ---------------------------------------------------------- */
.project-accordion {
    display: flex;
    gap: 40px;
    height: 560px;
}
.project-accordion__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow 0.5s ease;
}
/* Estado por defecto: la primera tarjeta expandida, las demás contraídas */
.project-accordion__card:first-child { flex-grow: 4; }
/* Al pasar el cursor por el grupo, todas se contraen... */
.project-accordion:hover .project-accordion__card { flex-grow: 1; }
/* ...menos la que tiene el cursor, que se expande */
.project-accordion:hover .project-accordion__card:hover { flex-grow: 4; }

.project-accordion__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-accordion__info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
    padding: 40px 40px 44px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* La info se muestra en la tarjeta expandida (por defecto la primera; en hover, la activa) */
.project-accordion__card:first-child .project-accordion__info { opacity: 1; visibility: visible; }
.project-accordion:hover .project-accordion__card .project-accordion__info { opacity: 0; visibility: hidden; }
.project-accordion:hover .project-accordion__card:hover .project-accordion__info { opacity: 1; visibility: visible; }
.project-accordion__info .project-banner__box { max-width: 392px; }

/* ----------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .section-header__title { font-size: var(--fs-36); }
    .project-banner { flex-direction: column; }
    .project-banner__main { flex-basis: auto; min-height: 420px; }
    .project-banner__sides { flex-wrap: wrap; }
    .project-banner__side { flex: 1 1 45%; width: auto; min-height: 200px; }

    /* Acordeón: en móvil se apila y cada tarjeta muestra su info */
    .project-accordion { flex-direction: column; height: auto; }
    .project-accordion__card,
    .project-accordion__card:first-child { flex: none; height: 360px; }
    .project-accordion:hover .project-accordion__card,
    .project-accordion:hover .project-accordion__card:hover { flex: none; }
    .project-accordion__info,
    .project-accordion:hover .project-accordion__card .project-accordion__info {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 768px) {
    /* Tarjetas de categoría más compactas en móvil */
    .category-card { width: 100%; max-width: 340px; height: auto; aspect-ratio: 340 / 430; }
    .category-card__overlay { padding: 40px 24px 24px; }
    .category-card__overlay-title { margin: 0 0 18px; margin-inline: 0; font-size: var(--fs-20); white-space: normal; }
    .category-card__list { gap: 14px; margin-bottom: 18px; }
    .category-card__list li { font-size: var(--fs-16); }
    .category-card__title { font-size: var(--fs-20); }
    .project-banner__overlay { padding: 20px; }
    .project-banner__box { max-width: 100%; }
    .project-card__overlay { padding: 20px; }
}