@import url('https://fonts.googleapis.com/css2?family=Kristi&display=swap');
    :root { --bg:#ffffff; --text:#0f172a; --muted:#475569; --line:#e2e8f0; --ink:#111827; --brand:#0f172a; --subfooter:#64748b; }
    *{box-sizing:border-box} 
    html { scroll-behavior: smooth; }
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
    .kristi-regular {
      font-family: "Kristi", cursive;
      font-style: normal;
    }
    .container{max-width:80rem;margin:0 auto;padding:0 1rem}
    header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
    header .bar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
    nav a{margin-left:1rem;color:#334155;text-decoration:none}
    nav a:hover{color:#0f172a}
    .btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.6rem 1rem;font-size:.9rem;border:1px solid var(--line);text-decoration:none;color:var(--text)}
    .btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
    .grid{display:grid;gap:2rem}
    @media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}}
    .section{padding:4rem 0}
    .muted{color:var(--muted)}
    .h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.1;margin:.5rem 0 0}
    .h2{font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.2;margin:0}
    .subtitle{font-size:1.3rem;}
    .card{border:1px solid var(--line);border-radius:1rem;padding:1rem;background:#fff}
    .ph{display:flex;align-items:center;justify-content:center;background:#f8fafc;min-height:300px;text-align:center;padding:1rem;border-radius: 2rem;}
    .photo-header, .logo-img{width: 100%; height:auto; border-radius: 1rem;}
    .logo-img{margin-top:5px;}
    .logo{ text-decoration: none; color: var(--brand); font-size: 3rem; }
    .list{padding-left:1.1rem;margin:.5rem 0}
    .list li{margin:.3rem 0; list-style: none;}
    .lang-es{display:block}.lang-en{display:none}
    .bar .langswitch{display:flex;border:1px solid var(--line);border-radius:9999px;overflow:hidden}
    .bar .langswitch button{border:0;background:none;padding:.35rem .6rem;font-size:.75rem;cursor:pointer}
    .bar .langswitch button.active{background:#0f172a;color:#fff}
    footer{border-top:1px solid var(--line)}
    .copyright{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--subfooter)}
    .legal{display:flex; gap:1rem; }
    .legal a{color: var(--subfooter); text-decoration: none;}
    
    /* Menu responsive */
    .mobile-menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      flex-direction: column;
      gap: 6px;
    }
    
    .mobile-menu-toggle span {
      width: 20px;
      height: 2px;
      background: var(--text);
      border-radius: 1px;
      transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .mobile-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      padding: 1rem;
      transform: translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .mobile-nav.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }
    
    .mobile-nav a {
      display: block;
      padding: 0.75rem 0;
      color: #334155;
      text-decoration: none;
      border-bottom: 1px solid var(--line);
    }
    
    .mobile-nav a:last-child {
      border-bottom: none;
    }
    
    .mobile-nav a:hover {
      color: #0f172a;
    }
    
    @media (max-width: 768px) {
      .mobile-menu-toggle {
        display: flex;
      }
      
      nav {
        display: none;
      }
      
        .bar { position: relative; }
        .ph {padding: 0px;}
        .btn { border-radius: 0; text-align: center;}
        header .bar { padding: .9rem 16px; }
        .logo-img {margin-top:5px; margin-right: 10px}
        .mobile-menu-toggle {padding: 1rem;}
        .section{ padding: 2rem 0; }
    }

    /* Animaciones de scroll */
    .scroll-fade {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-fade.animate {
      opacity: 1;
      transform: translateY(0);
    }
    
    .scroll-slide-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-slide-left.animate {
      opacity: 1;
      transform: translateX(0);
    }
    
    .scroll-slide-right {
      opacity: 0;
      transform: translateX(40px);
      transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-slide-right.animate {
      opacity: 1;
      transform: translateX(0);
    }
    
    .scroll-scale {
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-scale.animate {
      opacity: 1;
      transform: scale(1);
    }
    
    .scroll-stagger {
      opacity: 0;
      transform: translateY(25px);
      transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .scroll-stagger.animate {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Stagger delays para elementos consecutivos */
    .scroll-stagger:nth-child(1) { transition-delay: 0ms; }
    .scroll-stagger:nth-child(2) { transition-delay: 100ms; }
    .scroll-stagger:nth-child(3) { transition-delay: 200ms; }
    .scroll-stagger:nth-child(4) { transition-delay: 300ms; }
    .scroll-stagger:nth-child(5) { transition-delay: 400ms; }
    .scroll-stagger:nth-child(6) { transition-delay: 500ms; }
    
    /* Animación para el header en scroll */
    .header-scrolled {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }

    /* Lightbox para imagen */
    .photo-header-lb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1rem;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    
    .photo-header-lb:hover {
      transform: scale(1.02);
    }
    
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(8px);
    }
    
    .lightbox.active {
      display: flex;
    }
    
    .lightbox-content {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
      border-radius: 0.5rem;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      animation: lightboxOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 24px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      transition: background 0.3s ease;
    }
    
    .lightbox-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    
    @keyframes lightboxOpen {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }


    .cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0F172A;
  color: white;
  padding: 1rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: none; /* Se mostrará solo si no hay consentimiento */
}

.cookie-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cookie-content p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.cookie-content a {
  color: #63b3ed;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cookie-buttons .btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-outline {
  background: transparent;
  border: 1px solid white;
  color: white;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
}

.btn-primary {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: var(--brand);
}

.btn-primary:hover {
  background: var(--brand);
  color: #ffffff;
}