/* ——————————————————————— BASE Y PALETA —————————————————————— */
:root{
    --primary-color:#0D47A1;
    --secondary-color:#FF6F00;
    --accent-color:#00BFA5;
    --light-color:#F5F5F5;
    --dark-color:#212121;
  }
  
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:'Merriweather',serif;
    background:#ffffff;
    color:var(--dark-color);
    padding-top:100px;          /* compensa el nav fixed */
  }
  
  /* ——————————————————————— HERO ——————————————————————— */
  #hero{position:relative;height:65vh;min-height:420px;display:flex;align-items:center;justify-content:center}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.55))}
  .hero-caption{position:relative;text-align:center;color:#fff;padding:0 15px;z-index:1}
  .hero-title{font-family:'Playfair Display',serif;font-size:48px;font-weight:700}
  .hero-sub{font-size:40px;margin-top:10px}
  @media(max-width:768px){.hero-title{font-size:36px}.hero-sub{font-size:17px}}
  
  /* ——————————————————————— TOP BAR ——————————————————————— */
  .top-bar{
    background:linear-gradient(90deg,var(--primary-color) 0%,var(--accent-color) 50%,#ffffff 100%);
    font-family:'Playfair Display',serif;
    font-size:20px;font-weight:600;color:#fff;transition:color .6s ease;
  }
  .top-bar .container{
    max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;
    justify-content:space-between;align-items:center;padding:10px 20px
  }
  .top-bar .contact-info{display:flex;flex-wrap:wrap;gap:30px}
  .top-bar .contact-info a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color .3s}
  .top-bar .contact-info a:hover{color:var(--secondary-color)}
  .top-bar .social-media a{color:inherit;margin-left:14px;font-size:26px;transition:color .3s,transform .3s}
  .top-bar .social-media a:hover{color:var(--secondary-color);transform:scale(1.2)}
  
  /* ——————————————————————— NAV PRINCIPAL ——————————————————————— */
  .main-nav{
    position:fixed;top:0;left:0;width:100%;z-index:1000;
    background:var(--light-color);box-shadow:0 2px 5px rgba(0,0,0,.1);
    transition:transform .5s ease,opacity .5s ease;
  }
  .main-nav.hidden{transform:translateY(-100%);opacity:0}
  .main-nav .container{
    max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;
    align-items:center;justify-content:space-between;padding:15px 20px
  }
  .logo img{height:60px;border-radius:10px;transition:transform .3s}
  .logo img:hover{transform:scale(1.1)}
  .menu-icon{display:none;font-size:28px;cursor:pointer;color:var(--dark-color)}
  
  #nav-menu ul{list-style:none;display:flex;align-items:center;margin:0;padding:0}
  #nav-menu ul li{margin:0 10px}
  #nav-menu ul li a{
    text-decoration:none;color:var(--dark-color);font-weight:bold;font-size:18px;
    transition:color .3s,transform .3s
  }
  #nav-menu ul li a:hover{color:var(--primary-color);transform:translateY(-3px)}
  .btn-login{
    background:var(--secondary-color);color:#fff;padding:10px 20px;border-radius:5px;
    transition:background .3s
  }
  .btn-login:hover{background:var(--primary-color)}
  
  @media(max-width:992px){
    .main-nav .container{flex-direction:column;align-items:flex-start}
    .menu-icon{display:block}
    #nav-menu{display:none;width:100%}
    #nav-menu ul{flex-direction:column;width:100%}
    #nav-menu ul li{width:100%;margin:5px 0}
    #nav-menu ul li a{display:block;width:100%;padding:5px}
    #menu-toggle:checked + label + #nav-menu{display:block}
  }
  #menu-toggle{display:none}      /* checkbox invisible */
  
/* ———————————————————————————————————————————————————————————
   EFECTO “REVEAL” GLOBAL PARA CARRUSELES
   ----------------------------------------------------------------- */
.fade-slide{                              /*  estado inicial           */
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease-out, transform .9s ease-out;
}
.fade-slide.show{                         /*  estado final             */
  opacity:1;
  transform:none;
}

/*  (si todavía usas el reveal por sección, mantén esto)  */
.carousel-section.hidden{opacity:0;transform:translateY(40px);
                         transition:opacity .7s ease-out,transform .7s ease-out;}
.carousel-section.show{opacity:1;transform:none;}