/*==============================================================
  20. ALIADOS DE CONFIANZA
  Banda oscura (acero + azul corporativo) que corta el ritmo
  claro del sitio sin salirse de la paleta: usa --primary-dark,
  --secondary y la textura de blueprint del hero.
  Pegar al final de css/style.css (o linkear como archivo aparte).
==============================================================*/

.aliados {
    position: relative;
    padding: 110px 6% 120px;
    background:
        radial-gradient(900px 420px at 80% 0%, rgba(215, 25, 32, .12), transparent 60%),
        linear-gradient(165deg, #0B2E73 0%, #081F4D 45%, #060F2B 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Textura de plano técnico, coherente con el hero */
.aliados::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    z-index: -1;
}

/*--------------------------------------------------------------
  Encabezado
--------------------------------------------------------------*/
.aliados-header {
    max-width: 760px;
    margin: 0 0 55px;
}

.aliados-header h2 {
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 14px;
}

.aliados-header p {
    color: rgba(255, 255, 255, .62);
    font-size: 1.05rem;
    font-weight: 300;
    max-width: 62ch;
}

/*--------------------------------------------------------------
  Carrusel de logos (loop continuo)
  Vive como franja independiente justo antes del footer, así
  que necesita su propio fondo oscuro (antes lo heredaba de
  .aliados) para que los logos —pensados en gris claro sobre
  oscuro— se sigan viendo bien, y para fundirse sin costura
  con el footer que viene debajo.
--------------------------------------------------------------*/
.aliados-marquee {
    position: relative;
    padding: 34px 0;
    background: var(--gray-900);
    border-top: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.aliados-track {
    display: flex;
    align-items: center;
    gap: 70px;
    width: max-content;
    animation: aliadosScroll var(--marquee-duration, 30s) linear infinite;
}

.aliados-marquee:hover .aliados-track {
    animation-play-state: paused;
}

.aliado-marca img {
    height: 46px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    opacity: .55;
    filter: grayscale(1) brightness(1.6);
    transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}

.aliado-marca:hover img {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
}

@keyframes aliadosScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/*--------------------------------------------------------------
  Grilla de cards
--------------------------------------------------------------*/
.aliados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 20px;
}

.aliado-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 268px;
    padding: 30px 20px 24px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .4s cubic-bezier(.25, 1, .5, 1), border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

.aliado-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(215, 25, 32, .55);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .45);
}

.aliado-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    width: 100%;
    margin-bottom: 16px;
}

.aliado-logo img {
    max-height: 100%;
    max-width: 82%;
    object-fit: contain;
}

/* Aliado sin logo cargado */
.aliado-nombre-txt {
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
}

.aliado-nombre {
    color: rgba(255, 255, 255, .92);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 16px;
    max-width: 22ch;
    overflow-wrap: break-word;
}

/*--------------------------------------------------------------
  Íconos de contacto (una o dos filas, siempre centradas)
--------------------------------------------------------------*/
.aliado-iconos-wrap {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    width: 100%;
}

.aliado-iconos {
    display: flex;
    justify-content: center;
    gap: 9px;
}

.aliado-icon {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.aliado-icon:hover,
.aliado-icon:focus-visible {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
}

/* Tooltip del ícono */
.aliado-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--primary-dark);
    color: var(--white);
    font-size: .7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
    z-index: 2;
}

.aliado-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/*--------------------------------------------------------------
  Card "¿Querés sumar tu negocio?"
--------------------------------------------------------------*/
.aliado-sumarte {
    justify-content: center;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .22);
    background: transparent;
}

.aliado-sumarte:hover {
    border-style: solid;
    border-color: var(--secondary);
}

.aliado-sumarte p {
    color: rgba(255, 255, 255, .9);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
}

.aliado-sumarte-plus {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 300;
    color: var(--secondary);
    background: rgba(215, 25, 32, .14);
    transition: transform .35s ease;
}

.aliado-sumarte:hover .aliado-sumarte-plus {
    transform: rotate(90deg) scale(1.08);
}

/*--------------------------------------------------------------
  Botón de aliados en la navbar
  Antes tenía fondo permanente y el ícono a 40px (los demás
  están a 36px): por eso se veía "más grande" que sus vecinos.
  El logo ya es un isotipo circular con su propio aro blanco,
  así que no necesita marco extra — se resuelve con el mismo
  hover/active que ya usan el resto de los botones.
--------------------------------------------------------------*/
.nav-links a.nav-aliados img {
    object-position: center;
}

/*--------------------------------------------------------------
  Equidad en la navbar: sin fondo/círculo detrás de ningún
  ícono. Antes el hover y el ítem activo ganaban un cuadro
  redondeado (rgba blanco) — eso hacía que Galería (marcado
  "activo" por el scrollspy) y Aliados se vieran con más peso
  que sus vecinos. Ahora todos usan la misma señal: la línea
  roja de abajo + un leve despegue al pasar el mouse.
--------------------------------------------------------------*/
.nav-links a:hover,
.nav-links a.active {
    background: transparent;
}

/*--------------------------------------------------------------
  Íconos de servicios (grúas, barquillas, fletes, áridos,
  movimiento, peligrosas): son ilustraciones con más "aire"
  interno que el ícono de Inicio/Galería/Contacto, así que a
  igual caja (36px) se ven más chicos y livianos. Esto compensa
  ese padding con un +15% óptico. El arreglo de fondo es exportar
  esos PNG recortados al contenido real, con el mismo margen que
  el resto — cuando los tengas así, se puede sacar este bloque.
--------------------------------------------------------------*/
.nav-links a.nav-icon-truck img {
    width: 42px;
    height: 42px;
}

/*--------------------------------------------------------------
  Responsive y accesibilidad
--------------------------------------------------------------*/
@media (max-width: 980px) {
    .aliados { padding: 80px 6% 90px; }
    .aliado-marca img { height: 38px; }
}

@media (max-width: 560px) {
    .aliados-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .aliado-card { padding: 22px 12px 18px; }
    .aliado-nombre { font-size: .85rem; margin-bottom: 12px; }
    .aliado-logo { height: 64px; }
    .aliado-icon { width: 34px; height: 34px; font-size: .85rem; }
    .aliado-icon::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .aliados-track { animation: none; }
    .aliados-marquee { overflow-x: auto; }
}

/*==============================================================
  21. AJUSTES DE LIMPIEZA
  Clases que reemplazan los estilos inline del footer y dan
  soporte al <button> del hamburger y al header de aliados.
==============================================================*/

/* Logo que encabeza la sección de aliados */
.aliados-marca-red {
    height: 54px;
    width: auto;
    margin-bottom: 22px;
    opacity: .9;
}

/* Hamburger como <button> accesible */
.hamburger {
    background: none;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Footer: contacto sin estilos inline */
.footer-contacto .footer-tag {
    display: block;
    margin-bottom: 2px;
    color: var(--gray-400);
    font-size: .85em;
}

.footer-contacto a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.footer-contacto a:last-child { margin-bottom: 0; }

.is-wa { color: #25D366; }
.is-ig { color: #E1306C; }

/* Etiquetas sólo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Foco visible en todo el sitio (accesibilidad + prolijidad) */
:where(a, button, input, select):focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

/*--------------------------------------------------------------
  Botón flotante "subir arriba"
  Estaba a 95px del borde porque antes convivía con el botón
  de WhatsApp debajo (ya eliminado). Al quedar solo, baja a la
  posición que le correspondía a ese segundo botón.
--------------------------------------------------------------*/
.floating.top {
    bottom: 25px;
}

/*==============================================================
  22. HERO — respiro inferior
  El hero sólo tenía padding-top (para despejar la navbar fija).
  Sin padding-bottom, cuando el contenido supera el 100vh los
  botones quedan pegados contra el borde inferior, justo donde
  empieza la siguiente sección.
==============================================================*/
.hero {
    padding-bottom: 100px;
}

/*==============================================================
  23. TRABAJOS EN CAMPO — franja continua
  Sin título: es un respiro visual entre Servicios y Nosotros,
  no una sección con nombre propio. Franja auto-scroll (misma
  técnica que el marquee de aliados), alimentada por DESTACADOS
  en js/data.js. Altura fija y ancho automático por foto: una
  vertical se ve angosta y alta, una horizontal se ve ancha —
  ninguna se recorta a la fuerza.
==============================================================*/
.trabajos-carousel {
    padding: 46px 0;
    overflow: hidden;
}

.trabajos-track-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trabajos-track {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    padding: 0 6%;
    animation: trabajosScroll var(--trabajos-duration, 70s) linear infinite;
}

.trabajos-track-wrap:hover .trabajos-track {
    animation-play-state: paused;
}

.trabajo-slide {
    position: relative;
    flex: 0 0 auto;
    height: 340px;
    width: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 22px 45px rgba(8, 31, 77, .16);
}

.trabajo-slide img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
}

.trabajo-slide figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 20px;
    background: linear-gradient(0deg, rgba(6, 15, 43, .88), transparent 70%);
    color: var(--white);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
}

@keyframes trabajosScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
    .trabajos-carousel { padding: 30px 0; }
    .trabajo-slide { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    .trabajos-track { animation: none; }
    .trabajos-track-wrap { overflow-x: auto; }
}

/*==============================================================
  24. PORTFOLIO CON PESTAÑAS
  Reemplaza al bento mezclado: mismo criterio que usamos en
  lcarteenhierro.netlify.app y mendiolazacoem.netlify.app —
  categorías como filtro en vez de una sola grilla con todo
  junto.
==============================================================*/
.gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 45px;
}

.gallery-tabs button {
    padding: 11px 22px;
    border-radius: 40px;
    border: 1px solid rgba(11, 46, 115, .16);
    background: var(--white);
    color: var(--primary-dark);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.gallery-tabs button:hover {
    transform: translateY(-2px);
    border-color: var(--secondary);
}

.gallery-tabs button.is-active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.gallery-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(11, 46, 115, .08);
    box-shadow: 0 14px 32px rgba(8, 31, 77, .07);
    transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s ease;
}

.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px rgba(8, 31, 77, .14);
}

.gallery-card__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: zoom-in;
}

.gallery-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.gallery-card:hover .gallery-card__img img {
    transform: scale(1.06);
}

.gallery-card__body {
    padding: 16px 20px 20px;
}

.gallery-card__body h4 {
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    hyphens: auto;
}

.gallery-card__body p {
    color: var(--gray-500, #6B7280);
    font-size: .86rem;
    font-weight: 300;
    overflow-wrap: break-word;
}

.gallery-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--gray-500, #6B7280);
    font-size: .95rem;
}

.gallery-empty code {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(11, 46, 115, .08);
}

@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .gallery-card__body { padding: 12px 14px 16px; }
}