/*
Theme Name: Habita Servicios Integrales
Version: 2.2
*/

:root {
    --habita-blue:   #003087;
    --habita-orange: #E8610A;
    --habita-dark:   #1a1a2e;
}

/* ============================================================
   NAVBAR — Estado inicial: logo grande centrado, menú debajo
   ============================================================ */
.transition-navbar {
    padding:          1.4rem 0 0;
    transition:       padding 0.4s ease, box-shadow 0.4s ease;
    background-color: #fff !important;
    overflow:         visible !important;
}

#nav-container {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    transition:     flex-direction 0.4s ease;
    padding-left:   0 !important;
    padding-right:  0 !important;
}

.logo-wrapper {
    display:         flex;
    justify-content: center;
    width:           100%;
    margin-bottom:   2rem;
    transition:      width 0.4s ease, margin 0.4s ease;
}

.logo-wrapper img,
.custom-logo-link img,
.navbar-brand img {
    width:      400px  !important;
    max-width:  400px  !important;
    min-width:  400px  !important;
    max-height: 150px  !important;
    height:     auto   !important;
    display:    block  !important;
    transition: max-width 0.4s ease, max-height 0.4s ease;
}

/* ============================================================
   MENÚ — barra azul bajo el logo
   ============================================================ */
.habita-nav-bar {
    width:            100vw;
    margin-left:      calc(-50vw + 50%);
    background-color: var(--habita-blue);
    border-top:       3px solid var(--habita-orange);
    padding:          0.65rem 3rem 0.65rem 1rem;
    transition:       background-color 0.4s ease;
    box-sizing:       border-box;
    position:         relative;
}

#navbarNav {
    width: 100% !important;
    flex-grow: 1 !important;
}

#navbarNav .collapse,
#navbarNav.collapse,
.navbar-collapse {
    width:    100% !important;
    flex-grow: 1  !important;
}

#navbarNav .navbar-nav {
    display:         flex          !important;
    flex-direction:  row           !important;
    justify-content: flex-start    !important;
    align-items:     center        !important;
    flex-wrap:       nowrap        !important;
    list-style:      none          !important;
    padding:         0             !important;
    margin:          0             !important;
    gap:             0;
    flex:            1             !important;
}

#navbarNav .nav-item > a,
#navbarNav .navbar-nav li > a:not(.dropdown-item) {
    display:         block;
    color:           #fff     !important;
    text-decoration: none     !important;
    font-weight:     600;
    font-size:       0.82rem;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    padding:         0.4rem 1.1rem;
    border-radius:   2px;
    transition:      background 0.25s ease;
}

#navbarNav .nav-item a:hover,
#navbarNav .navbar-nav li a:hover {
    background-color: var(--habita-orange);
    color:            #fff !important;
}

/* Separador entre ítems */
#navbarNav .navbar-nav li:not(:last-child) {
    display:     flex;
    align-items: center;
}

#navbarNav .navbar-nav li:not(:last-child)::after {
    content:     '·';
    color:       rgba(255,255,255,0.4);
    font-size:   1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Selector de idioma */
.nav-item-lang {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    color:           rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    font-size:       0.75rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    padding:         0.35rem 0.9rem;
    border:          1px solid rgba(255,255,255,0.35);
    border-radius:   3px;
    transition:      all 0.25s ease;
    white-space:     nowrap;
    position:        absolute;
    right:           1rem;
    top:             50%;
    transform:       translateY(-50%);
}

.nav-item-lang:hover {
    background-color: rgba(255,255,255,0.15);
    color:            #fff !important;
    border-color:     rgba(255,255,255,0.6);
}

/* ============================================================
   NAVBAR SCROLLED — logo pequeño izquierda, menú derecha
   ============================================================ */
.navbar.scrolled {
    padding:    0.4rem 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

.navbar.scrolled #nav-container {
    flex-direction: row    !important;
    align-items:    center !important;
    flex-wrap:      nowrap;
    gap:            1rem;
}

.navbar.scrolled .logo-wrapper {
    width:         auto;
    margin-bottom: 0;
    flex-shrink:   0;
}

.navbar.scrolled .logo-wrapper img,
.navbar.scrolled .custom-logo-link img,
.navbar.scrolled .navbar-brand img {
    max-width:  160px !important;
    max-height: 60px  !important;
    width:      auto  !important;
    height:     auto  !important;
    object-fit: contain !important;
}

.navbar.scrolled .habita-nav-bar {
    background-color: transparent;
    border-top:       3px solid var(--habita-orange);
    padding:          0;
    width:            auto;
    margin-left:      0;
    flex-grow:        1;
}

.navbar.scrolled #navbarNav .nav-item a,
.navbar.scrolled #navbarNav .navbar-nav li a {
    color:   var(--habita-blue) !important;
    padding: 0.3rem 0.7rem;
}

.navbar.scrolled #navbarNav .nav-item a:hover,
.navbar.scrolled #navbarNav .navbar-nav li a:hover {
    background-color: var(--habita-blue);
    color:            #fff !important;
}

.navbar.scrolled #navbarNav .navbar-nav li:not(:last-child)::after {
    display: none;
}

.navbar.scrolled .nav-item-lang {
    color:        var(--habita-blue) !important;
    border-color: var(--habita-blue);
}

.navbar.scrolled .habita-nav-bar .navbar-nav {
    background-color: transparent !important;
}

.navbar.scrolled .dropdown-toggle {
    color: var(--habita-blue) !important;
}

.navbar.scrolled .dropdown-menu {
    background-color: #fff !important;
    border:           1px solid rgba(0,48,135,0.15) !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.1) !important;
}

.navbar.scrolled .dropdown-item {
    color: var(--habita-blue) !important;
}

.navbar.scrolled .dropdown-item:hover {
    background-color: var(--habita-orange) !important;
    color:            #fff !important;
}

/* ============================================================
   SECCIONES
   ============================================================ */
#nosotros {
    padding:       4rem 0;
    border-bottom: 3px solid #3d5a73;
    background:    #2c3e50 !important;
    color:         #e8edf2;
}

#nosotros h2 {
    color:                 #fff;
    text-decoration:       underline;
    text-underline-offset: 6px;
}

#servicios {
    padding:       4rem 0;
    border-bottom: 3px solid #3d5a73;
    background:    #2c3e50 !important;
    color:         #e8edf2;
}

#servicios h2 {
    color:                 #fff;
    text-decoration:       underline;
    text-underline-offset: 6px;
}

/* Grilla de videos */
.video-grid .video-card {
    background:      var(--habita-blue);
    border-radius:   6px;
    overflow:        hidden;
    position:        relative;
    aspect-ratio:    16/9;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.video-grid .video-card iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}

.video-grid .video-caption {
    font-size:  0.78rem;
    color:      #666;
    margin-top: 0.4rem;
    text-align: center;
}

/* Quote box */
.quote-box {
    background:    #354f63;
    border-left:   5px solid var(--habita-orange);
    border-radius: 4px;
    padding:       1.2rem 1.5rem;
}

.quote-box p {
    margin:      0;
    color:       #fff;
    font-style:  italic;
    font-weight: 600;
    font-size:   1.05rem;
}

/* ============================================================
   7 PASOS
   ============================================================ */
#pasos {
    background:    #2c3e50 !important;
    padding:       4rem 0;
    border-bottom: 3px solid #3d5a73;
    color:         #e8edf2;
}

#pasos h2 { color: #fff; }

.step-card {
    background:    #354f63;
    border:        1px solid #3d5a73;
    color:         #e8edf2;
    border-radius: 10px;
    padding:       1.4rem 1rem;
    height:        100%;
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
}

.step-card:hover {
    box-shadow: 0 6px 20px rgba(0,48,135,0.12);
    transform:  translateY(-3px);
}

.step-circle {
    width:           50px;
    height:          50px;
    background:      var(--habita-blue);
    color:           #fff;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 1rem;
    font-weight:     700;
    font-size:       1.15rem;
}

/* ============================================================
   FOOTER — 3 franjas
   ============================================================ */
#contacto { }

.footer-main {
    background: var(--habita-dark);
}

.footer-payments {
    background:  #111827;
    border-top:  3px solid var(--habita-orange);
}

.webpay-logo {
    max-height:  100px;
    width:       auto;
    height:      auto;
    object-fit:  contain;
    margin-left: 80px;
}

.footer-bottom {
    background:  #111827;
    border-top:  3px solid var(--habita-orange);
}

.footer-bottom .text-secondary {
    color: rgba(255,255,255,0.45) !important;
}

.footer-bottom .btn-link {
    color: rgba(255,255,255,0.45) !important;
}

.footer-logo-wrapper {
    display:    inline-block;
    max-width:  300px;
}

.footer-logo-wrapper img {
    max-width:  300px !important;
    width:      auto  !important;
    height:     auto  !important;
    object-fit: contain;
}

/* ============================================================
   MODALES
   ============================================================ */
.modal-header-habita {
    background: var(--habita-blue);
    color:      #fff;
}

.modal-header-habita .btn-close,
.modal-header-orange .btn-close {
    filter: brightness(0) invert(1);
}

.modal-header-orange {
    background: var(--habita-orange);
    color:      #fff;
}

.wpcf7-form input[type="submit"] {
    background:    var(--habita-blue);
    color:         #fff;
    border:        none;
    padding:       0.5rem 2rem;
    border-radius: 4px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--habita-orange);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    #navbarNav .navbar-nav {
        flex-direction: column !important;
        align-items:    center;
    }
    #navbarNav .navbar-nav li:not(:last-child)::after { display: none; }
    .logo-wrapper img,
    .custom-logo-link img {
        max-width:  200px !important;
        max-height:  75px !important;
    }
}

@media (max-width: 576px) {
    .step-card { padding: 1rem 0.6rem; }
}

/* Redes sociales en footer */
.social-link {
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.85;
}

.social-link:hover {
    transform: translateY(-3px);
    opacity: 1;
}

/* ============================================================
   LOGOS DE PAGO EN FOOTER
   ============================================================ */
.webpay-wrapper {
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding:       1rem 1.5rem;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.webpay-logo {
    max-width:  220px;
    max-height: 70px;
    width:      auto;
    height:     auto;
    object-fit: contain;
}

/* Logo HABITA en footer — fondo suave para que no choque */


.social-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.social-icon {
    font-size:  1.6rem !important;
    width:      1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================
   PAGE TEMPLATE — Páginas de contenido
   ============================================================ */
.page-hero {
    background:    var(--habita-blue);
    padding:       3rem 0 2rem;
    color:         #fff;
}

.page-title {
    font-weight: 700;
    font-size:   2rem;
    margin-bottom: 0.5rem;
}

.page-hero .breadcrumb-item a {
    color:           rgba(255,255,255,0.7);
    text-decoration: none;
}

.page-hero .breadcrumb-item a:hover {
    color: #fff;
}

.page-hero .breadcrumb-item.active,
.page-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.5);
}

.page-body {
    background: #fff;
    min-height: 60vh;
}

/* Estilos para el contenido de Gutenberg */
.page-body .entry-content h2,
.page-body h2 {
    color:          var(--habita-blue);
    font-weight:    700;
    margin-top:     2rem;
    margin-bottom:  1rem;
}

.page-body h3 {
    color:        var(--habita-blue);
    font-weight:  600;
    margin-top:   1.5rem;
    margin-bottom: 0.75rem;
}

.page-body p {
    line-height: 1.8;
    color:       #333;
}

.page-body ul, .page-body ol {
    line-height: 1.8;
    color:       #333;
    padding-left: 1.5rem;
}

.page-body img {
    max-width:    100%;
    height:       auto;
    border-radius: 6px;
}

.page-body .wp-block-image {
    margin: 1.5rem 0;
}

.page-body blockquote,
.page-body .wp-block-quote {
    border-left:  4px solid var(--habita-orange);
    padding-left: 1.5rem;
    margin:       1.5rem 0;
    color:        #555;
    font-style:   italic;
}

/* Footer mini en páginas internas */
.footer-mini {
    background: var(--habita-dark);
}

/* ============================================================
   BLOG — Archive y Single
   ============================================================ */

/* Tarjetas del listado */
.blog-card {
    background:    #fff;
    border:        1px solid #e2e8f0;
    border-radius: 10px;
    overflow:      hidden;
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
    display:       flex;
    flex-direction: column;
}

.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0,48,135,0.12);
    transform:  translateY(-4px);
}

.blog-card-img-link { display: block; overflow: hidden; }

.blog-card-img {
    width:      100%;
    height:     200px;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.04);
}

.blog-card-body {
    padding:        1.25rem 1.5rem;
    display:        flex;
    flex-direction: column;
    flex-grow:      1;
}

.blog-card-meta {
    font-size:    0.78rem;
    color:        #888;
    margin-bottom: 0.6rem;
}

.blog-card-meta a {
    color:           #888;
    text-decoration: none;
}

.blog-card-title {
    font-size:     1.05rem;
    font-weight:   700;
    margin-bottom: 0.6rem;
    line-height:   1.4;
}

.blog-card-title a {
    color:           var(--habita-blue);
    text-decoration: none;
    transition:      color 0.2s;
}

.blog-card-title a:hover { color: var(--habita-orange); }

.blog-card-excerpt {
    font-size:    0.88rem;
    color:        #555;
    flex-grow:    1;
    margin-bottom: 1rem;
}

.blog-card-link {
    font-size:       0.82rem;
    font-weight:     600;
    color:           var(--habita-orange);
    text-decoration: none;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    margin-top:      auto;
}

.blog-card-link:hover { color: var(--habita-blue); }

/* Paginación */
.page-numbers {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    4px;
    background:       #f0f4ff;
    color:            var(--habita-blue);
    text-decoration:  none;
    font-weight:      600;
    font-size:        0.85rem;
    transition:       all 0.2s;
    margin:           0 2px;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--habita-blue);
    color:      #fff;
}

/* Single post */
.single-featured-img img {
    width:         100%;
    max-height:    420px;
    object-fit:    cover;
    border-radius: 8px;
}

.single-meta {
    font-size: 0.85rem;
    color:     #888;
}

.single-meta a {
    color:           #888;
    text-decoration: none;
}

.single-content {
    font-size:   1rem;
    line-height: 1.85;
    color:       #333;
}

.single-content h2 {
    color:       var(--habita-blue);
    font-weight: 700;
    margin-top:  2rem;
}

.single-content h3 {
    color:       var(--habita-blue);
    font-weight: 600;
    margin-top:  1.5rem;
}

.single-content img {
    max-width:     100%;
    border-radius: 6px;
    margin:        1rem 0;
}

.single-content blockquote {
    border-left:  4px solid var(--habita-orange);
    padding-left: 1.25rem;
    color:        #555;
    font-style:   italic;
    margin:       1.5rem 0;
}

.single-nav-link {
    display:         flex;
    flex-direction:  column;
    gap:             0.2rem;
    text-decoration: none;
    color:           inherit;
}

.single-nav-label {
    font-size:     0.75rem;
    color:         var(--habita-orange);
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.single-nav-title {
    font-size:   0.9rem;
    color:       var(--habita-blue);
    font-weight: 600;
    line-height: 1.3;
}

.single-nav-link:hover .single-nav-title {
    color: var(--habita-orange);
}

/* ============================================================
   DROPDOWN MENU — fondo azul
   ============================================================ */


/* ============================================================
   SECCIÓN CLIENTES
   ============================================================ */
#clientes {
    background:    #1e2d3d !important;
    border-bottom: 3px solid #3d5a73;
    color:         #e8edf2;
}

#clientes h2 {
    color: #fff;
    text-decoration:       underline;
    text-underline-offset: 6px;
}

.clientes-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   1.5rem;
}

@media (max-width: 768px) {
    .clientes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .clientes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cliente-card {
    background:    rgba(255,255,255,0.08);
    background:      rgba(255,255,255,0.06);
    border:          1px solid rgba(255,255,255,0.1);
    border-radius:   8px;
    padding:         1.25rem 1rem;
    text-align:      center;
    transition:      transform 0.2s ease, background 0.2s ease;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.75rem;
}

.cliente-card:hover {
    background:  rgba(255,255,255,0.12);
    transform:   translateY(-3px);
}

.cliente-logo {
    width:       100%;
    height:      70px;
    display:     flex;
    align-items: center;
    justify-content: center;
}

.cliente-logo img {
    max-width:  100% !important;
    max-height: 65px !important;
    width:      auto !important;
    height:     auto !important;
    object-fit: contain;
    opacity:    0.9;
    transition: opacity 0.2s, transform 0.2s;
}

.cliente-card:hover .cliente-logo img {
    opacity:   1;
    transform: scale(1.05);
}

.cliente-nombre {
    font-size:   0.82rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.7);
    margin:      0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Forzar menú en una sola línea en desktop */
@media (min-width: 992px) {
    .habita-nav-bar .navbar-collapse {
        display:     flex    !important;
        align-items: center  !important;
        width:       100%    !important;
    }

    .habita-nav-bar .navbar-nav {
        flex-direction: row     !important;
        flex-wrap:      nowrap  !important;
        align-items:    center  !important;
        width:          100%    !important;
    }

    .habita-nav-bar .navbar-nav .nav-item {
        flex-shrink: 1          !important;
        white-space: nowrap     !important;
    }

    .habita-nav-bar .navbar-nav .nav-link,
    .habita-nav-bar .navbar-nav .nav-item a {
        white-space: nowrap     !important;
        font-size:   0.72rem    !important;
        padding:     0.4rem 0.5rem !important;
    }
}

/* ============================================================
   LOGO RESPONSIVE — móvil
   ============================================================ */
@media (max-width: 768px) {
    .logo-wrapper img,
    .custom-logo-link img,
    .navbar-brand img {
        width:      220px !important;
        max-width:  220px !important;
        min-width:  0     !important;
        max-height: 90px  !important;
    }
}

@media (max-width: 480px) {
    .logo-wrapper img,
    .custom-logo-link img,
    .navbar-brand img {
        width:      180px !important;
        max-width:  180px !important;
        min-width:  0     !important;
        max-height: 70px  !important;
    }
}

/* ============================================================
   DROPDOWN — siempre blanco con letras azules y hover naranja
   ============================================================ */
.habita-nav-bar .dropdown-menu,
.navbar.scrolled .dropdown-menu {
    background-color: #fff !important;
    border:           1px solid rgba(0,48,135,0.15) !important;
    border-radius:    4px !important;
    padding:          0.4rem 0 !important;
    min-width:        180px;
    z-index:          9999 !important;
    box-shadow:       0 4px 12px rgba(0,0,0,0.12) !important;
}

.habita-nav-bar .dropdown-menu .dropdown-item,
.navbar.scrolled .dropdown-menu .dropdown-item,
ul.dropdown-menu li a.dropdown-item,
.dropdown-menu > li > a {
    color:          var(--habita-blue) !important;
    font-size:      0.85rem;
    font-weight:    600;
    padding:        0.5rem 1.2rem !important;
    transition:     background 0.2s, color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.habita-nav-bar .dropdown-item:hover,
.habita-nav-bar .dropdown-item:focus,
.navbar.scrolled .dropdown-item:hover,
.navbar.scrolled .dropdown-item:focus {
    background-color: var(--habita-orange) !important;
    color:            #fff !important;
}