/* ===================== VARIABLES ===================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --amarillo: #F7B801;
    --azuloscuro: #0B132B;
    --blanco: #ffffff;
    --textooscuro: #0D1B2A;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', sans-serif;
    color: var(--textooscuro);
}

.txtamarillo  { color: var(--amarillo); }
.txtitalico   { font-style: italic; font-weight: 600; }
.txtnegrito   { font-weight: 900; }


/* ===================== ACCESIBILIDAD: FOCO VISIBLE ===================== */

:focus-visible {
    outline: 3px solid var(--amarillo);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Respeta la preferencia del usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ===================== ANIMACIONES HERO (CSS puro) ===================== */

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes parpadeo {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

@keyframes rebote {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-10px); }
}


/* ===================== NAVBAR ===================== */

#navbar {
    background-color: transparent;
    transition: background-color 0.4s, box-shadow 0.4s;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Links blancos sobre el hero */
#navbar .nav-link {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--blanco);
    position: relative;
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
}

/* Hover: agranda levemente + amarillo */
#navbar .nav-link:hover {
    color: var(--amarillo);
    transform: scale(1.1);
}

/* Línea animada bajo el link al hover */
#navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--amarillo);
    transition: width 0.3s;
}

#navbar .nav-link:hover::after  { width: 100%; }

/* Link activo: siempre amarillo */
#navbar .nav-link.active        { color: var(--amarillo); }
#navbar .nav-link.active::after { width: 100%; }

/* Logo imagen */
.logoimg {
    height: 40px;
    width: auto;
    /* En navbar oscura/transparente se ve el logo original */
    transition: filter 0.4s;
}

/* Botón hamburguesa: icono blanco sobre fondo oscuro */
#navbar .navbar-toggler         { border-color: rgba(255, 255, 255, 0.4); }
#navbar .navbar-toggler-icon    { filter: invert(1); }

/* Navbar blanca al hacer scroll */
#navbar.scrolled {
    background-color: var(--blanco);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

#navbar.scrolled .nav-link        { color: var(--textooscuro); }
#navbar.scrolled .nav-link:hover  { color: var(--amarillo); }
#navbar.scrolled .nav-link.active { color: var(--amarillo); }

/* Logo y toggler cuando el navbar es blanca */
#navbar.scrolled .logoimg          { filter: brightness(0); /* lo vuelve oscuro sobre fondo blanco */ }
#navbar.scrolled .navbar-toggler   { border-color: rgba(0, 0, 0, 0.2); }
#navbar.scrolled .navbar-toggler-icon { filter: none; }


/* ===================== HERO ===================== */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    border-radius: 0 0 20rem 0;
    position: relative;
    overflow: hidden;
}

/* Video de fondo */
.herovideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay degradado oscuro sobre el video */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 43, 0.5) 0%,
        rgba(11, 19, 43, 0.3) 50%,
        rgba(11, 19, 43, 0.6) 100%
    );
    z-index: 1;
}

.herocontenido {
    position: relative;
    z-index: 2;
    padding-top: 5rem;
}

.heroetiquet {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    animation: fadeDown 1.3s ease forwards;
}

.herotitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 5rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 1.6s ease 0.5s forwards;
}

.herosubtitulo {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--blanco);
    letter-spacing: 2px;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeUp 1.3s ease 1.2s forwards;
}

.herobotones {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 1.2s ease 1.9s forwards;
}

.scrollindicador {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    animation: rebote 2s ease-in-out infinite;
    z-index: 12;
    text-decoration: none;
    transition: color 0.3s;
}

.scrollindicador:hover { color: var(--amarillo); }


/* ===================== BOTONES ===================== */

.btnpill {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.8rem 2.2rem;
    border-radius: 50px;
    transition: all 0.3s;
    transform: translateY(0);
}

.btnpill:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }

.btnsolido {
    background-color: var(--amarillo);
    color: var(--textooscuro);
    border: 2px solid var(--amarillo);
}

.btnsolido:hover {
    background-color: transparent;
    color: var(--amarillo);
    border-color: var(--amarillo);
}

.btnborde {
    background-color: transparent;
    color: var(--blanco);
    border: 2px solid var(--blanco);
}

.btnborde:hover {
    background-color: var(--blanco);
    color: var(--textooscuro);
}


/* ===================== ESTADÍSTICAS ===================== */

.secestadisticas {
    background-color: var(--blanco);
    padding-top: 0;
    padding-bottom: 7rem;
}

.cardestadisticas {
    background: linear-gradient(135deg, var(--blanco) 0%, #f8f9fc 100%);
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0,0,0,0.04);
    padding: 3rem 2rem;
    margin-top: -4rem;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(0,0,0,0.04);
}

.estatarjeta { padding: 1.5rem 2rem; }

.borderlateral {
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #e0e0e0;
}

/* Los números se animan con JS (counter) */
.estanumero {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--textooscuro);
    margin-bottom: 0.5rem;
}

.lineaamarilla {
    border: none;
    border-top: 2px solid var(--amarillo);
    width: 130px;
    opacity: 1;
    margin: 0.5rem auto 1rem auto;
}

.estatexto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
}


/* ===================== CITA ===================== */

.seccita {
    background-color: var(--blanco);
    padding: 1rem 10rem 10rem;
}

.citaicono {
    font-size: 2.8rem;
    color: var(--amarillo);
    opacity: 0.35;
    margin-bottom: 1.5rem;
    display: block;
}

.textogrande {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--textooscuro);
    line-height: 1.5;
}


/* ===================== CTA ===================== */

.seccta {
    background-color: var(--azuloscuro);
    padding: 7rem 0;
    border-top: 4px solid var(--amarillo);
}

.ctatitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.3;
}


/* ===================== SERVICIOS ===================== */

.secservicios {
    background-color: var(--blanco);
    padding: 10rem 0 15rem 0;
    position: relative;
}

/* Etiqueta pequeña de sección (reutilizable) */
.secetiqueta {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--amarillo);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

/* Descripción bajo el título de sección */
.servdesc {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #555;
    line-height: 1.8;
    margin-top: 1.2rem;
    margin-bottom: 0;
}

/* Título de sección + acento dorado decorativo */
.sectitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--textooscuro);
    position: relative;
    padding-bottom: 1.2rem;
}

.sectitulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--amarillo);
    border-radius: 2px;
}

.text-center .sectitulo::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Cards de servicio: foto de fondo + overlay oscuro + hover */
.servcard {
    height: 400px;
    border-radius: 1.5rem;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.servcard:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

/* Degradado desde abajo: título y texto siempre visibles */
.servcard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(11, 19, 43, 0.92) 0%,
        rgba(11, 19, 43, 0.4) 55%,
        rgba(11, 19, 43, 0.05) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    transition: background 0.4s ease;
}

.servcard:hover .servcard-overlay {
    background: linear-gradient(
        to top,
        rgba(11, 19, 43, 0.97) 0%,
        rgba(11, 19, 43, 0.65) 60%,
        rgba(11, 19, 43, 0.2) 100%
    );
}

.servcard-icon {
    font-size: 2rem;
    color: var(--amarillo);
    margin-bottom: 0.8rem;
}

.servcard-titulo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--blanco);
    margin-bottom: 0.5rem;
}

/* Descripción: aparece al hacer hover */
.servcard-texto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.servcard:hover .servcard-texto {
    opacity: 1;
    transform: translateY(0);
}

/* ===================== FOOTER ===================== */

.footer {
    background: linear-gradient(175deg, #0f1a38 0%, var(--azuloscuro) 45%, #060b18 100%);
    color: var(--blanco);
    position: relative;
    padding-top: 0;
    overflow: hidden;
}

/* Decoración sutil en footer */
.footer::before {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1px solid rgba(247, 184, 1, 0.04);
    pointer-events: none;
}

.footer-acento {
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, var(--amarillo) 50%, transparent 100%);
}

.footer-main {
    padding-top: 5rem;
    padding-bottom: 3rem;
}

.footer-logo {
    height: 48px;
    width: auto;
    margin-bottom: 1.8rem;
    display: block;
}

.footer-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.85;
    margin-bottom: 2rem;
}

.footer-social {
    display: flex;
    gap: 0.8rem;
}

.footer-social a {
    width: 42px;
    height: 42px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    border-color: var(--amarillo);
    color: var(--amarillo);
    background: rgba(247, 184, 1, 0.1);
    transform: translateY(-3px);
}

.footer-tripadvisor-icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.footer-social a:hover .footer-tripadvisor-icon {
    opacity: 1;
    filter: brightness(0) invert(1) sepia(1) saturate(50) hue-rotate(10deg);
}

.footer-subtitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--amarillo);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 1.5rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.85rem;
    transition: color 0.2s;
}

.footer-links li:hover { color: var(--amarillo); }

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--amarillo); }

.footer-cta-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.footer-btn {
    font-size: 0.82rem;
    padding: 0.65rem 1.8rem;
}

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.footercopy {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}


/* ===================== HERO SUBPÁGINAS ===================== */

.herosub {
    min-height: 48vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: flex-end;
    border-radius: 0 0 20rem 0;
    position: relative;
    overflow: hidden;
}

.herosub::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,19,43,0.35) 0%, rgba(11,19,43,0.75) 100%);
    z-index: 1;
}

.herosubcontenido {
    position: relative;
    z-index: 2;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

.heropaginatitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--blanco);
    margin: 0;
    opacity: 0;
    animation: fadeUp 1.2s ease 0.4s forwards;
}

/* Etiqueta del hero sub también animada */
.herosub .heroetiquet {
    animation: fadeDown 1s ease 0.1s forwards;
    opacity: 0;
}


/* ===================== SECCIONES INTERNAS ===================== */

.secintro { background-color: var(--blanco); padding: 8rem 0; }

/* Sección parallax con fotografía real de fondo (subpáginas) */
.secparallax {
    min-height: 55vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5rem 2rem;
}

.secparallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 43, 0.4) 0%,
        rgba(11, 19, 43, 0.65) 100%
    );
    pointer-events: none;
}

.secparallax .container {
    position: relative;
    z-index: 1;
}

.secparallax .textogrande {
    color: var(--blanco);
    text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}

.secparallax .citaicono {
    color: var(--amarillo);
    opacity: 0.7;
    filter: drop-shadow(0 2px 10px rgba(247, 184, 1, 0.3));
}

.secparallax .servdesc {
    color: rgba(255,255,255,0.8);
}


/* ===================== CARDS DETALLES ÚNICOS ===================== */

.secunicas { background-color: var(--blanco); padding: 8rem 0; }

.unicacard {
    background-color: var(--blanco);
    border: 2px solid var(--azuloscuro);
    border-radius: 1.5rem;
    padding: 2.5rem 1.8rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unicacard:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.unicaicon {
    width: 64px;
    height: 64px;
    background-color: var(--amarillo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 1.4rem;
    color: var(--azuloscuro);
}

.unicatitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--textooscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.unicatexto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: #555;
    margin: 0;
    line-height: 1.7;
}


/* ===================== SERVICIOS: CATEGORÍAS ===================== */

/* Etiqueta de categoría con acento amarillo */
.categorialabel {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--textooscuro);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left: 4px solid var(--amarillo);
    padding-left: 1rem;
    margin-bottom: 3rem;
    display: inline-block;
}


/* ===================== CONTACTO: CARDS ===================== */

.seccontacto { background-color: var(--blanco); padding: 8rem 0; }

.contcard {
    background-color: var(--blanco);
    border-radius: 1.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 3rem 2rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.13);
}

/* Círculo amarillo igual al de unicacard */
.conticono {
    width: 64px;
    height: 64px;
    background-color: var(--amarillo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 1.4rem;
    color: var(--azuloscuro);
}

.conttitulo {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--textooscuro);
    margin-bottom: 0.6rem;
}

.contdato {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: #555;
    margin: 0;
}

/* Mapa */
.secmapa { padding: 0 0 7rem 0; }

.mapacontainer {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}


/* ===================== EXPEDICIONES: RECONOCIMIENTOS ===================== */

.secreconocimientos {
    background: linear-gradient(180deg, var(--blanco) 0%, #f4f5f8 40%, #f0f1f5 100%);
    padding: 7rem 0;
}

.recoitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--blanco);
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
}

.recoitem:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Ícono grande de plataforma */
.recoicon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.recotexto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #777;
    margin: 0;
}

/* Logo imagen en reconocimientos */
.recologo {
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

/* Badge SERNATUR (texto estilizado) */
.recobadge {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--azuloscuro);
    background-color: var(--amarillo);
    padding: 0.4rem 1rem;
    border-radius: 0.5rem;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* Imagen principal intro (quienes-somos) */
.imgservicios {
    border-radius: 1.5rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

/* Marco decorativo dorado detrás de fotos en intro */
.secintro .expofoto {
    position: relative;
}

.secintro .expofoto::after {
    content: '';
    position: absolute;
    top: -12px;
    right: -12px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--amarillo);
    border-radius: 1.5rem;
    z-index: -1;
    opacity: 0.2;
    transition: opacity 0.4s ease;
}

.secintro .expofoto:hover::after {
    opacity: 0.4;
}

/* Expediciones: sección split con fotos */
.secexpedicion {
    background-color: var(--blanco);
    padding: 8rem 0;
}

.expofoto {
    border-radius: 1.5rem;
    overflow: hidden;
    height: 100%;
}

.expofoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px;
    display: block;
    transition: transform 0.5s ease;
}

.expofoto:hover img { transform: scale(1.04); }

/* Expediciones: galería de fotos en bento grid */
.expogaleria {
    background-color: var(--blanco);
    padding: 0 0 8rem 0;
}

.expogaleria .galeriaitem img { height: 220px; }


/* ===================== GALERÍA FLOTA ===================== */

.secgaleria { background: linear-gradient(180deg, #f6f7fa 0%, var(--blanco) 60%); padding: 7rem 0; }

.galeriaitem {
    border-radius: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.galeriaitem:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.2);
}

.galeriaitem img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.galeriaitem:hover img { transform: scale(1.06); }


/* ===================== SERVICIOS BENTO (index) ===================== */

.serviciocard {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    display: block;
    text-decoration: none;
}

.serviciocard:hover {
    transform: scale(1.02);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.serviciocard-grande { min-height: 480px; height: 100%; }
.serviciocard-chico  { min-height: 0; height: 100%; }

.serviciocard-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(11, 19, 43, 0.95) 0%,
        rgba(11, 19, 43, 0.35) 55%,
        transparent 100%
    );
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: background 0.4s;
}

.serviciocard:hover .serviciocard-overlay {
    background: linear-gradient(
        to top,
        rgba(11, 19, 43, 1) 0%,
        rgba(11, 19, 43, 0.55) 60%,
        rgba(11, 19, 43, 0.1) 100%
    );
}

.serviciocard-num {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--amarillo);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.serviciocard-icon {
    font-size: 1.6rem;
    color: var(--amarillo);
    margin-bottom: 0.6rem;
    transition: transform 0.35s;
}

.serviciocard:hover .serviciocard-icon { transform: translateY(-4px); }

.serviciocard-titulo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--blanco);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.serviciocard-chico .serviciocard-titulo { font-size: 1.35rem; }

.serviciocard-texto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.35s ease;
}

.serviciocard:hover .serviciocard-texto {
    max-height: 100px;
    opacity: 1;
}

.serviciocard-chico .serviciocard-overlay { padding: 1.6rem; }
.serviciocard-chico .serviciocard-icon   { font-size: 1.2rem; margin-bottom: 0.4rem; }
.serviciocard-chico .serviciocard-num    { margin-bottom: 0.2rem; }

.serviciocard-link {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--amarillo);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.serviciocard:hover .serviciocard-link {
    opacity: 1;
    transform: translateY(0);
}

.serviciocard-link i { transition: transform 0.25s; }
.serviciocard:hover .serviciocard-link i { transform: translateX(4px); }


/* ===================== TEXTO DE SERVICIO ===================== */

.servtexto {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #444;
    line-height: 1.9;
    margin-bottom: 1.2rem;
}


/* ===================== NUESTRA VERDADERA OFICINA ===================== */

.secoficina {
    min-height: 72vh;
    background-image: url('img/hero/hero-patagonia-3.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    position: relative;
}

.secoficina::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 19, 43, 0.55) 0%,
        rgba(11, 19, 43, 0.72) 100%
    );
}

.secoficina .container {
    position: relative;
    z-index: 1;
}

.secoficinatitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--blanco);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.secoficinasubtitulo {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
}


/* ===================== FEATURES NUMERADAS (quienes-somos) ===================== */

.secfeatures {
    background: linear-gradient(180deg, #f6f7fa 0%, var(--blanco) 100%);
    padding: 8rem 0;
}

.featrow {
    display: flex;
    align-items: flex-start;
    gap: 2.2rem;
    padding: 2.8rem 1.5rem;
    border-bottom: 1px solid #efefef;
    border-left: 3px solid transparent;
    border-radius: 0.5rem;
    transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
    cursor: default;
}

.featrow:last-child { border-bottom: none; }

.featrow:hover {
    transform: translateX(10px);
    border-left-color: var(--amarillo);
    background-color: rgba(247, 184, 1, 0.03);
}

.featnumero {
    font-family: 'Oswald', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--amarillo);
    line-height: 1;
    min-width: 90px;
    opacity: 0.75;
    flex-shrink: 0;
}

.featicono {
    width: 56px;
    height: 56px;
    background-color: var(--azuloscuro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--amarillo);
    flex-shrink: 0;
    margin-top: 0.5rem;
    transition: background-color 0.3s, transform 0.3s;
}

.featrow:hover .featicono {
    background-color: var(--amarillo);
    color: var(--azuloscuro);
    transform: rotate(10deg);
}

.feattitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--textooscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}

.feattexto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 300;
    color: #555;
    margin: 0;
    line-height: 1.8;
}

/* Efecto escalera: indentación progresiva en la numeración */
.featrow:nth-child(2) { margin-left: 1.5rem; }
.featrow:nth-child(3) { margin-left: 3rem; }
.featrow:nth-child(4) { margin-left: 4.5rem; }


/* ===================== HORIZONTAL FEATURE CARDS (servicios industrial) ===================== */

.sechfcards {
    background-color: #f8f9fb;
    padding: 7rem 0;
}

.hfcard {
    display: flex;
    align-items: flex-start;
    gap: 1.8rem;
    padding: 2.5rem;
    background: var(--blanco);
    border-radius: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03), 0 8px 32px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    height: 100%;
    border-left: 4px solid transparent;
    border: 1px solid rgba(0,0,0,0.04);
    border-left: 4px solid transparent;
}

.hfcard:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-left-color: var(--amarillo);
    border-color: rgba(0,0,0,0.04);
    border-left-color: var(--amarillo);
}

.hficono {
    width: 62px;
    height: 62px;
    background: var(--azuloscuro);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--amarillo);
    flex-shrink: 0;
    transition: background 0.3s, transform 0.3s;
}

.hfcard:hover .hficono {
    background: var(--amarillo);
    color: var(--azuloscuro);
    transform: scale(1.1);
}

.hftitulo {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--textooscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.hftexto {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: #555;
    margin: 0;
    line-height: 1.75;
}


/* ===================== FORMULARIO DE CONTACTO ===================== */

.secformulario {
    background: linear-gradient(180deg, #f0f2f7 0%, #f8f9fb 40%, var(--blanco) 100%);
    padding: 8rem 0;
}

.formcard {
    background: var(--blanco);
    border-radius: 1.5rem;
    padding: 3.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 15px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0,0,0,0.04);
}

.formlabel {
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--textooscuro);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.forminput,
.formtextarea {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    border: 2px solid #e6e6e6;
    border-radius: 0.75rem;
    padding: 0.85rem 1.2rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    width: 100%;
    background: #fafafa;
    color: var(--textooscuro);
    display: block;
}

.forminput:focus,
.formtextarea:focus {
    outline: none;
    border-color: var(--amarillo);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(247, 184, 1, 0.15);
}

.formtextarea { resize: vertical; min-height: 140px; }

.formgrupo { margin-bottom: 1.5rem; }

.forminfo {
    background: linear-gradient(135deg, #0a1128 0%, var(--azuloscuro) 60%, #111e3e 100%);
    border-radius: 1.5rem;
    padding: 3.5rem 2.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.forminfoitem {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.forminfoitem:last-child { margin-bottom: 0; }

.forminfocono {
    width: 46px;
    height: 46px;
    background: rgba(247, 184, 1, 0.15);
    border: 2px solid var(--amarillo);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amarillo);
    font-size: 1rem;
    flex-shrink: 0;
}

.forminfolabel {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
}

.forminfovalue {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--blanco);
    margin: 0;
}

.forminfovalue a {
    color: var(--blanco);
    text-decoration: none;
    transition: color 0.2s;
}

.forminfovalue a:hover { color: var(--amarillo); }

.linkcontacto {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.linkcontacto:hover { color: var(--amarillo); }


/* ===================== REDES SOCIALES BAND (contacto) ===================== */

.secredes {
    background: linear-gradient(135deg, #070d1f 0%, var(--azuloscuro) 40%, #111e3e 100%);
    padding: 7rem 0;
    position: relative;
    overflow: hidden;
}

.secredes::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1.5px solid rgba(247, 184, 1, 0.06);
    pointer-events: none;
}

.redesband {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.redbanda {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 2.5rem 3rem;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    text-decoration: none;
    color: var(--blanco);
    transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
    min-width: 180px;
}

.redbanda:hover {
    border-color: var(--amarillo);
    background-color: rgba(247, 184, 1, 0.08);
    transform: translateY(-6px);
    color: var(--blanco);
}

.redbanda i {
    font-size: 2.5rem;
    transition: transform 0.3s, color 0.3s;
}

.redbanda:hover i { transform: scale(1.2); color: var(--amarillo); }

.redbandalabel {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.redbandanombre {
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--blanco);
}


/* ===================== RESPONSIVE ===================== */

/* Prevent horizontal overflow on all screens */
html, body { overflow-x: hidden; }

@media (max-width: 991px) {
    /* Navbar mobile menu */
    #navMenu {
        background-color: var(--azuloscuro);
        padding: 1.5rem;
        border-radius: 0 0 1.5rem 1.5rem;
        margin-top: 0.5rem;
    }
    #navbar.scrolled #navMenu {
        background-color: var(--blanco);
    }
    .navbar-nav { gap: 0.5rem !important; }
}

@media (max-width: 768px) {

    /* ---- Hero principal (index) ---- */
    .hero { min-height: 100vh; border-radius: 0 0 6rem 0; }
    .herotitulo { font-size: 2.8rem; }
    .herosubtitulo { font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 2rem; }
    .herocontenido { padding-top: 3rem; }
    .herobotones { gap: 0.8rem; }
    .btnpill { font-size: 0.82rem; padding: 0.7rem 1.6rem; }
    .scrollindicador { bottom: 3rem; }

    /* ---- Hero subpáginas ---- */
    .herosub {
        background-attachment: scroll;
        min-height: 35vh;
        border-radius: 0 0 5rem 0;
    }
    .heropaginatitulo { font-size: 2.4rem; }
    .herosubcontenido { padding-top: 5rem; padding-bottom: 3rem; }

    /* ---- Parallax — desactivar fixed en mobile ---- */
    .secparallax {
        background-attachment: scroll;
        min-height: auto;
        padding: 4rem 1.5rem;
    }
    .secoficina { background-attachment: scroll; min-height: 50vh; }

    /* ---- Tipografía general ---- */
    .sectitulo { font-size: 2rem; }
    .sectitulo::after { left: 50%; transform: translateX(-50%); }
    .secetiqueta { font-size: 0.72rem; letter-spacing: 3px; }
    .servdesc { font-size: 0.9rem; }
    .servtexto { font-size: 0.92rem; }
    .textogrande { font-size: 1.6rem; }
    .citaicono { font-size: 2rem; margin-bottom: 1rem; }

    /* ---- Estadísticas ---- */
    .secestadisticas { padding-bottom: 4rem; }
    .cardestadisticas { margin-top: -2rem; padding: 2rem 1rem; }
    .estatarjeta { padding: 1.5rem 1rem; }
    .estanumero { font-size: 1.8rem; }
    .borderlateral {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin: 0.5rem 0;
        padding: 1.5rem 0;
    }

    /* ---- Cita ---- */
    .seccita { padding: 3rem 1.5rem 5rem; }

    /* ---- CTA ---- */
    .seccta { padding: 4rem 0; }
    .ctatitulo { font-size: 1.8rem; text-align: center; }

    /* ---- Nuestra oficina ---- */
    .secoficinatitulo { font-size: 2.6rem; }
    .secoficinasubtitulo { font-size: 0.92rem; letter-spacing: 1px; }

    /* ---- Servicios index: padding ---- */
    .secservicios { padding: 5rem 0 6rem; }

    /* ---- Bento servicios (index) ---- */
    .serviciocard-grande { min-height: 300px; }
    .serviciocard-chico { min-height: 220px; }
    .serviciocard-titulo { font-size: 1.3rem; }
    .serviciocard-chico .serviciocard-titulo { font-size: 1.15rem; }
    .serviciocard-texto { max-height: 80px; opacity: 1; }
    .serviciocard-link { opacity: 1; transform: translateY(0); }

    /* ---- Secciones internas ---- */
    .secintro { padding: 4rem 0; }
    .secintro .expofoto::after { display: none; }
    .secunicas { padding: 4rem 0; }

    /* ---- Expediciones intro: fotos ---- */
    .expofoto img { min-height: 200px; }
    .secexpedicion { padding: 4rem 0; }

    /* ---- Galerías (flota y expediciones) ---- */
    .secgaleria { padding: 4rem 0; }
    .galeriaitem img { height: 200px !important; }
    .expogaleria .galeriaitem img { height: 200px !important; }

    /* ---- Reconocimientos ---- */
    .secreconocimientos { padding: 4rem 0; }
    .recoitem { padding: 2rem 1.5rem; }
    .recologo { height: 50px; }

    /* ---- Features (quienes-somos) ---- */
    .secfeatures { padding: 4rem 0; }
    .featrow {
        gap: 1rem;
        padding: 1.8rem 0;
        margin-left: 0 !important;
        flex-wrap: wrap;
    }
    .featrow:nth-child(2),
    .featrow:nth-child(3),
    .featrow:nth-child(4) { margin-left: 0 !important; }
    .featrow:hover { transform: none; }
    .featnumero { font-size: 2.8rem; min-width: 55px; }
    .featicono { width: 46px; height: 46px; font-size: 1rem; }
    .feattitulo { font-size: 1.15rem; }
    .feattexto { font-size: 0.85rem; }

    /* ---- HF Cards (servicios) ---- */
    .sechfcards { padding: 4rem 0; }
    .hfcard {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem 1.5rem;
        text-align: center;
        align-items: center;
    }
    .hficono { margin: 0 auto; }
    .hftitulo { font-size: 1.05rem; }
    .hftexto { font-size: 0.85rem; }

    /* ---- Formulario contacto ---- */
    .secformulario { padding: 4rem 0; }
    .formcard { padding: 2rem 1.5rem; }
    .forminfo { padding: 2.5rem 1.8rem; margin-top: 1.5rem; }
    .forminfoitem { gap: 1rem; }
    .forminfocono { width: 40px; height: 40px; font-size: 0.9rem; }

    /* ---- Mapa ---- */
    .secmapa { padding: 0 0 4rem 0 !important; }
    .mapacontainer iframe { height: 280px; }

    /* ---- Redes sociales ---- */
    .secredes { padding: 4rem 0; }
    .redesband { gap: 0.8rem; }
    .redbanda {
        padding: 1.5rem 1.8rem;
        min-width: 130px;
        flex: 1 1 calc(50% - 0.8rem);
    }
    .redbanda i { font-size: 2rem; }
    .redbandanombre { font-size: 0.82rem; }
    .redbandalabel { font-size: 0.65rem; }

    /* ---- Footer ---- */
    .footer-main { padding-top: 3rem; padding-bottom: 2rem; }
    .footer-logo { height: 36px; margin-bottom: 1rem; }
    .footer-desc { font-size: 0.82rem; }
    .footer-social { margin-bottom: 1.5rem; justify-content: flex-start; }
    .footer-subtitulo { margin-bottom: 0.8rem; font-size: 0.82rem; }
    .footer-links li { font-size: 0.82rem; margin-bottom: 0.6rem; }
    .footer-cta-desc { font-size: 0.82rem; }
    .footer-btn { font-size: 0.78rem; padding: 0.55rem 1.4rem; }
    .footercopy { text-align: center; font-size: 0.72rem; }
}


@media (max-width: 480px) {

    /* ---- Hero ---- */
    .hero { border-radius: 0 0 3rem 0; }
    .herotitulo { font-size: 2.2rem; }
    .herosubtitulo { font-size: 0.72rem; letter-spacing: 0.5px; }
    .heroetiquet { font-size: 0.68rem; letter-spacing: 2px; }
    .herocontenido { padding-top: 2rem; }
    .herobotones { flex-direction: column; align-items: center; gap: 0.6rem; }
    .btnpill { width: 80%; text-align: center; }

    /* ---- Hero subpáginas ---- */
    .herosub { min-height: 30vh; border-radius: 0 0 2.5rem 0; }
    .heropaginatitulo { font-size: 1.9rem; }
    .herosubcontenido { padding-top: 4rem; padding-bottom: 2rem; }

    /* ---- Tipografía ---- */
    .sectitulo { font-size: 1.65rem; }
    .textogrande { font-size: 1.25rem; }
    .secetiqueta { font-size: 0.65rem; letter-spacing: 2px; }
    .servdesc { font-size: 0.85rem; }

    /* ---- Estadísticas ---- */
    .estanumero { font-size: 1.6rem; }
    .estatexto { font-size: 0.8rem; }
    .lineaamarilla { width: 80px; }

    /* ---- Cita ---- */
    .seccita { padding: 2rem 1rem 3rem; }

    /* ---- Servicios index ---- */
    .secservicios { padding: 3.5rem 0 4rem; }
    .serviciocard-grande { min-height: 260px; }
    .serviciocard-chico { min-height: 200px; }
    .serviciocard-overlay { padding: 1.5rem; }
    .serviciocard-titulo { font-size: 1.15rem; }
    .serviciocard-chico .serviciocard-titulo { font-size: 1.05rem; }
    .serviciocard-texto { font-size: 0.8rem; }

    /* ---- Nuestra oficina ---- */
    .secoficina { min-height: 40vh; }
    .secoficinatitulo { font-size: 2rem; }
    .secoficinasubtitulo { font-size: 0.85rem; }

    /* ---- Galerías ---- */
    .galeriaitem img { height: 180px !important; }
    .expogaleria .galeriaitem img { height: 180px !important; }

    /* ---- Features ---- */
    .featrow { flex-direction: column; align-items: flex-start; gap: 0.8rem; padding: 1.5rem 0; }
    .featnumero { font-size: 2.2rem; min-width: auto; }
    .featicono { width: 42px; height: 42px; }
    .feattitulo { font-size: 1.05rem; }

    /* ---- HF Cards ---- */
    .hfcard { padding: 1.5rem 1.2rem; }
    .hficono { width: 52px; height: 52px; }

    /* ---- Formulario ---- */
    .formcard { padding: 1.5rem 1rem; }
    .forminfo { padding: 2rem 1.5rem; }
    .formlabel { font-size: 0.72rem; }
    .forminput, .formtextarea { font-size: 0.88rem; padding: 0.75rem 1rem; }

    /* ---- Redes ---- */
    .redbanda {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        padding: 1.2rem 1.5rem;
    }
    .redbanda i { font-size: 1.6rem; }

    /* ---- Reconocimientos ---- */
    .recoitem { padding: 1.5rem 1rem; }
    .recologo { height: 42px; }
    .conttitulo { font-size: 0.92rem; }
    .recotexto { font-size: 0.78rem; }

    /* ---- Footer ---- */
    .footer-main { padding-top: 2.5rem; padding-bottom: 1.5rem; }
    .footer-social { justify-content: center; }
}