@charset "utf-8";
/* CSS Document */


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

    :root{
      --space-1:.75rem;
      --space-2:1.25rem;
      --space-3:2rem;
      --space-4:3rem;
      --space-5:4.5rem;
      --accent:#b33;
      --text:#222;
      --bg:#fafafa;
      --card-bg:#fff;
    }

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

    body{
      font-family: Inter, system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      letter-spacing: .02em;
      margin: 0;
    }

    body.nav-open{ overflow:hidden; }

    h1, h2, h3, .logo{
      font-family: 'Playfair Display', serif;
      letter-spacing: .04em;
    }

    main{
      max-width:1100px;
      margin:auto;
      padding:3rem 1.5rem;
    }

.hide {
    display: none;
}

 .bullit {
    margin: 0 0 0 35px;
}
 /* =============================
      HEADER
    ============================= */
    header{
      position: sticky;
      top: 0;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 20px rgba(0,0,0,.05);
      z-index: 100;
      transition: box-shadow .3s ease;
    }

    header.scrolled{
      box-shadow: 0 6px 25px rgba(0,0,0,.08);
    }

    /* ✅ Full-width header content so nav can truly sit on the right edge */
    .nav-container{
      width: 100%;
      margin: 0;                 /* no centering */
      display: flex;
      align-items: center;
      padding: 1rem 1.5rem;
      position: relative;
      overflow: visible;
      gap: 1rem;
    }

    /* ✅ Reserve real space for the logo so nav can never sit behind it */
    .logo{
      position: relative;
      display: block;
      width: 150px;
      height: 34px;
      overflow: visible;
      flex: 0 0 150px;           /* important: fixed flex-basis */
      transition: transform .2s ease;
    }

    .logo img{
      position: absolute;
      left: 0;
      top: -8px;
      width: 150px;
      height: 118px;
      object-fit: contain;
      transition: all .3s ease;
      z-index: 50;
    }

    header.scrolled .logo{
      width: 50px;
      height: 50px;
      flex-basis: 50px;          /* shrink reserved space too */
    }

    header.scrolled .logo img{
      top: 0;
      width: 50px;
      height: 40px;
    }

    .logo:hover{ transform: scale(1.05); }

    /* ✅ Nav fills the rest and can push items to the far right of the viewport */
    nav{
      flex: 1;
      min-width: 0;
      margin-left: auto;
    }

    nav ul{
      display:flex;
      list-style:none;
      align-items:center;
      justify-content:flex-end;     /* far right */
      flex-wrap: nowrap;            /* never wrap */
      gap: clamp(.55rem, 1.1vw, 1.25rem);
      width: 100%;
      min-width: 0;
    }

    nav a{
      text-decoration:none;
      color: var(--text);
      font-weight: 400;
      font-size: clamp(.82rem, .95vw, .95rem);
      position: relative;
      white-space: nowrap;
    }

    nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-4px;
      width:0%;
      height:2px;
      background: var(--accent);
      transition: width .3s ease;
    }

    nav a:hover::after{ width:100%; }

    nav li{ position:relative; }

    /* Desktop dropdowns (hover) */
    nav ul ul{
  position:absolute;
  top:100%;
  left:0;
  background:white;
  padding:.6rem 0;
  display:none;
  flex-direction:column;

  min-width: 180px;
  max-width: min(320px, calc(100vw - 2rem)); /* never exceed viewport */

  box-shadow:0 10px 30px rgba(0,0,0,.08);
  opacity:0;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index: 200;
}

    nav li:hover > ul{
      display:flex;
      opacity:1;
      transform: translateY(0);
    }

    nav ul ul li{ padding:.4rem 1rem;
        text-align: center;          /* <-- centers wrapped lines */
       white-space: normal;         /* allow wrapping */
        
      }
      
    nav ul ul a{
  display:block;
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* break long chunks if needed */
  line-height:1.35;
  text-align: inherit;         /* ensures link follows li alignment */
}
      
      /* Open dropdown leftwards for the last nav item (Spanish) */
nav > ul > li:last-child > ul{
  left: auto;
  right: 0;
}

    /* ✅ Safety: if the viewport is narrow, allow horizontal scroll (still right aligned) */
    @media (max-width: 1100px){
      nav ul{
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width:none;
      }
      nav ul::-webkit-scrollbar{ display:none; }
    }

    /* Hamburger button (hidden on desktop) */
    .nav-toggle{
      display:none;
      width:44px;
      height:44px;
      border:0;
      background:transparent;
      cursor:pointer;
      padding:10px;
      border-radius:12px;
      flex: 0 0 auto;
      margin-left: auto; /* sits at far right on mobile */
    }

    .nav-toggle:focus-visible{
      outline: 2px solid rgba(179,51,51,.55);
      outline-offset: 3px;
    }

    .nav-toggle span{
      display:block;
      height:2px;
      margin:6px 0;
      background: var(--text);
      transition: transform .25s ease, opacity .2s ease;
    }

/* ==============================
Media cards
=================================*/

.media-card{
      background: var(--card-bg);
      padding:1.8rem;
      border-radius:16px;
      box-shadow:0 15px 40px rgba(0,0,0,.05);
      transition: transform .4s ease, box-shadow .4s ease;
      opacity:0;
      transform: translateY(30px);
    }

    .media-card:hover{
      transform: translateY(-10px);
      box-shadow:0 25px 60px rgba(0,0,0,.12);
    }

    .media-card .card-media{
      width:100%;
      border-radius:12px;
      margin-bottom:1.2rem;
      display:block;
      transition: transform .6s ease;
      transform: translateZ(0);
    }

    .media-card:hover .card-media{ transform: scale(1.05); }

    .media-card p{
      font-size:.95rem;
      color:#555;
      margin-bottom:.8rem;
    }

    .media-card a{
      font-family:'Playfair Display', serif; 
      text-decoration:none;
      color: var(--accent);
      transition: letter-spacing .3s ease;
    }

    .media-card a:hover{ letter-spacing: .08em; }

    .reveal.visible{ opacity:1; transform: translateY(0); }

/* =============================
      MOBILE NAV
    ============================= */
    @media (max-width: 820px){
     

      .nav-toggle{ display:block; }

      /* hide desktop nav list when in mobile; menu becomes panel */
      nav ul{ overflow: visible; }

      nav#primary-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 14px 40px rgba(0,0,0,.10);
        border-top: 1px solid rgba(0,0,0,.06);
        padding: .75rem 1rem 1rem;
        z-index:150;

        display:block;

        max-height:0;
        overflow:hidden;
        opacity:0;
        transform: translateY(-8px);
        pointer-events:none;

        transition: max-height .28s ease, opacity .22s ease, transform .28s ease;
        -webkit-overflow-scrolling: touch;
      }

      nav#primary-nav.open{
        max-height: calc(100vh - 84px);
        overflow-y:auto;
        opacity:1;
        transform: translateY(0);
        pointer-events:auto;
      }

      nav#primary-nav > ul{
        display:flex;
        flex-direction:column;
        gap:.4rem;
        align-items:stretch;
        justify-content:flex-start;
        width: 100%;
      }

      nav#primary-nav a{
        display:block;
        padding:.55rem .5rem;
        white-space: normal;
        font-size: .98rem;
      }

      /* Collapsible submenus */
      nav#primary-nav ul ul{
        position:static;
        display:block;
        opacity:1;
        transform:none;
        box-shadow:none;
        background:transparent;
        padding:0;
        margin-left:.5rem;

        max-height:0;
        overflow:hidden;
        transition: max-height .25s ease;
      }

      nav#primary-nav li.sub-open > ul{ max-height: 600px; }

      nav#primary-nav > ul > li > a{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap:.75rem;
        padding:.6rem .5rem;
      }

      nav#primary-nav a.has-submenu::after{
        content:"▾";
        font-size:.9rem;
        opacity:.75;
        transform: rotate(0deg);
        transition: transform .2s ease;
      }

      nav#primary-nav li.sub-open > a.has-submenu::after{
        transform: rotate(-180deg);
      }

      nav#primary-nav ul ul a{ padding:.45rem .5rem; }

      /* On mobile we don’t want horizontal scroll on the UL */
      nav#primary-nav > ul{
        overflow: visible;
      }
        
        .hide {
            display: block;
        }
    }

    /* Burger -> X animation */
    @media (max-width: 820px){
      .nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
      .nav-toggle.is-open span:nth-child(2){ opacity: 0; }
      .nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
    }

    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
    }
     footer{
      text-align:center;
      padding:2.5rem;
      font-size:.9rem;
      color:#777;
    }