:root{
  --navy:#001231;
  --light:#ffffff;
  --ink:#333333;
  --bg-alt:#f7f9fc;
  --nav-h:60px;

  /* Study Trip */
  --st-navy: var(--navy);
  --st-light: var(--light);
  --st-ink: var(--ink);
  --st-muted: #6b7280;
  --st-bg: #f7f9fc;
  --st-ring: #99b3ff;
  --st-radius: 18px;
  --st-shadow: 0 10px 30px rgba(0,0,0,.06);
}

*{ box-sizing:border-box }
html, body{ height:100%; overflow-x:hidden }
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--light); color:var(--ink); line-height:1.5;
}
img{ max-width:100%; height:auto; display:block }
[id]{ scroll-margin-top: calc(var(--nav-h) + 18px); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid #99b3ff; outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}
.container{ width:min(1280px,96%); margin:0 auto }

/* ================= Navbar ================= */
.navbar{
  position:sticky; top:0; z-index:1000;
  height:var(--nav-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw;
}
.navbar .logo img{ height:42px; width:auto }
.navbar ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0 }
.navbar a{ color:var(--navy); text-decoration:none; font-weight:600; font-size:.95rem; line-height:var(--nav-h); transition:.2s; }
.navbar a:hover{ opacity:.7 }

/* ================= Hero ================= */
.hero--solid{
  position:relative; min-height: clamp(56vh, 68vh, 76vh);
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:5.5rem 5vw 3.8rem; overflow:hidden;
}
.hero--solid::before{
  content:""; position:absolute; inset:-40% -10% auto -10%;
  height:120%; background: radial-gradient(800px 420px at 50% 0%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; width:100%; max-width:1100px }
.hero-logo{ width: clamp(140px, 18vw, 220px); filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); margin-inline:auto; }
.hero--solid h1{ margin:16px 0 6px; font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight:800; letter-spacing:.1px; }

/* Botones */
.btn{ display:inline-block; border-radius:28px; padding:12px 24px; font-weight:700; text-decoration:none; border:2px solid transparent; transition:.25s; }
.btn--primary{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn--primary:hover{ background:beige; color:var(--navy) }
.btn--secondary{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--secondary:hover{ background:beige; color:#fff; border-color:#fff }

.hero-tags,.hero-tags ul{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
.hero-tags .chip,.hero-tags .badge{ background:transparent; border:0; padding:0; border-radius:0; box-shadow:none; color:#fff; font-weight:500; line-height:1.4; }

/* Separador */
.divider-bottom{ position:relative; width:100%; height:64px }
.divider-bottom svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ================= Secciones ================= */
.section{ padding:80px 5vw; text-align:center }
.section h2{ color:var(--navy); margin:0 0 18px }
.section p{ max-width:900px; margin:0 auto }
.section.dark{ background:var(--navy); color:#fff }
.section.dark h2{ color:#fff }

/* Misión */
#mission .mission-quote{
  background:transparent; border:0; box-shadow:none; color:rgba(255,255,255,.92);
  max-width:900px; margin:0 auto; padding:0; line-height:1.7; font-size:1.1rem; text-align:center; text-wrap:pretty;
}
.mission-badge{
  width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 10px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.25) inset, 0 6px 20px rgba(0,0,0,.15);
}

/* ================= Cursos ================= */
.courses-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  width: min(1100px, 96%);
  margin: 14px auto 0;
  justify-content: center;
}

.course-card {
  background: #fff;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

/* Imagen uniforme */
.course-card__img {
  width: 100%;
  height: 180px; 
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.course-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;       
  object-position: center; 
  display: block;
  transition: transform 0.3s ease;
}

.course-card__img:hover img {
  transform: scale(1.05); 
}

.course-card h3 {
  margin: 0.6rem 0 0.2rem;
  color: var(--navy);
}

.course-card p {
  margin: 0 0 0.8rem;
  color: #4b5563;
}

.course-card__cta {
  display: flex;
  gap: 10px;
}

/* Modal de cursos  */
.modal{ position:fixed; inset:0; z-index:5000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); }
.modal:not(.hidden){ display:flex; }
.modal-card{ width:min(620px, 92vw); background:#fff; color:#111; border:1px solid #e8eef7; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.35); padding:22px; }
.hidden{ display:none !important; }

#course-modal .modal-card{
  width: clamp(320px, 90vw, 760px);
  max-height: 90vh;
  overflow: auto;
  position: relative;
}
#course-modal #course-image{
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  display: block;
  margin: 0 0 12px;
}
#course-close{
  position: sticky !important;
  top: 0;
  z-index: 2;
}
#course-modal .modal-card img{ max-width: 100%; height: auto; }

/* ================= Testimonios ================= */
.reviews-wrap{ max-width:900px; margin:0 auto }
.reviews-summary{ display:flex; gap:10px; justify-content:center; align-items:baseline; margin-bottom:14px; }
#avg-rating{ font-size:1.4rem; font-weight:700 }
#rating-count{ opacity:.9 }
.testimonial-slider{ position:relative; overflow:hidden; min-height:120px; max-width:780px; margin:24px auto 0; }
.review-card{ background:#fff; color:#222; padding:18px; border-radius:14px; border:1px solid #e8eef7; box-shadow:0 8px 24px rgba(0,0,0,.12); }

/* ================= Contacto ================= */
.contact-wrap{ max-width:900px; margin:0 auto }
.contact-card{ background:#fff; color:#111; border:1px solid #e8eef7; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.18); padding:22px; margin:0 auto; }
.contact-card form{ display:grid; gap:14px; text-align:left }
.form-row{ display:grid; gap:6px }
.contact-card input[type="text"], .contact-card input[type="email"], .contact-card input[type="tel"], .contact-card select, .contact-card textarea{
  width:100%; padding:12px; font-size:1rem; border:1px solid #d8d8d8; border-radius:10px; background:#fff; color:#111;
}
.contact-card textarea{ resize:vertical; min-height:140px }
.check{ display:flex; gap:8px; align-items:center; font-size:.95rem; color:#333 }

/* ================= Footer ================= */
.footer{ text-align:center; padding:22px; background:var(--navy); color:#fff }
.footer-logo{ height:58px; width:auto; margin-bottom:10px }

.whatsapp-float {
  position: fixed;
  width: 64px;      
  height: 64px;
  bottom: 22px;
  right: 22px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.whatsapp-float img {
  width: 36px;   
  height: 36px;
  display: block;
}


/* ================= Carrusel portada ================= */
.carousel{ position:relative; width:100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  height: clamp(60vh, 90vh, 100vh); overflow:hidden; background:#000; margin-top:16px; }
.carousel-track{ display:flex; height:100%; transition: transform .5s ease; }
.carousel-slide{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); border:0; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.85); color:var(--navy); font-size:28px; line-height:1; display:grid; place-items:center; cursor:pointer; transition: background .2s, transform .15s; }
.carousel-btn:hover{ background:#fff; transform: translateY(-50%) scale(1.04); }
.carousel-btn.prev{ left:16px } .carousel-btn.next{ right:16px }
.carousel-dots{ position:absolute; left:0; right:0; bottom:18px; display:flex; gap:10px; justify-content:center; }
.carousel-dots button{ width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.6); cursor:pointer; }
.carousel-dots button[aria-selected="true"]{ background:#fff }

/* ================= Study Trip ================= */
.st-section{ color:var(--st-ink); }

.st-hero{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin: 0 auto clamp(28px, 4vw, 48px);
  width:min(1280px,96%);
}
.st-title{ margin:0 0 .25rem 0; font-size: clamp(28px, 4vw, 40px); color: var(--st-navy); font-weight: 800; }
.st-subtitle{ margin:.25rem 0 1rem; color: var(--st-muted); font-size: clamp(16px, 2.2vw, 18px); }
.st-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0 1.25rem; }
.st-badge{
  background:var(--st-bg);
  border:1px solid #e6eaf2;
  padding:.45rem .7rem;
  border-radius:999px;
  font-size:.9rem;
  display:inline-flex; align-items:center; gap:.45rem;
}
.st-cta{
  display:inline-block; background: var(--st-navy); color: var(--st-light);
  padding:.9rem 1.1rem; border-radius: 999px; text-decoration:none; font-weight:700; box-shadow: var(--st-shadow);
}
.st-cta:hover{ opacity:.95; transform: translateY(-1px); }
.st-cta:focus-visible{ outline:3px solid var(--st-ring); outline-offset:3px; }

.st-hero-media{ position:relative; height: 320px; border-radius: var(--st-radius); overflow:hidden; box-shadow: var(--st-shadow); }
.st-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); }

/* Grid: highlights + facts */
.st-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(16px, 2.6vw, 28px); margin: 0 auto clamp(28px, 4vw, 48px); width:min(1280px,96%); }

/* Highlights cards */
.st-highlights{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap:14px; }
.st-card{ background: var(--st-light); border:1px solid #e8ebf2; border-radius: var(--st-radius); padding:16px 16px 14px; box-shadow: var(--st-shadow); text-align:left; }
.st-card h3{ font-size:1.05rem; margin:.1rem 0 .25rem; color:var(--st-navy); }
.st-card p{ margin:0; color:var(--st-muted); font-size:.95rem; }

/* Facts */
.st-facts{ background: var(--st-light); border:1px solid #e8ebf2; border-radius: var(--st-radius); padding:18px; box-shadow: var(--st-shadow); align-self: start; text-align:left; }
.st-facts h3{ margin:.1rem 0 .6rem; color:var(--st-navy); }
.st-facts dl{ margin:0; display:grid; gap:.35rem; }
.st-row{ display:grid; grid-template-columns: 1fr 1.2fr; gap:.5rem; padding:.5rem .4rem; border-radius:10px; }
.st-row:nth-child(odd){ background:#fafbfd; }
.st-row dt{ color:#6b7280; }
.st-row dd{ margin:0; font-weight:600; color:#0f172a; }
.st-cta--full{ display:block; text-align:center; margin-top:12px; }

/* Descripción */
.st-desc{ max-width: 880px; margin: 0 auto 10px; text-align:center; }
.st-desc h3{ margin:.2rem 0 .5rem; color:var(--st-navy); }
.st-desc p{ margin:0; color:var(--st-muted); }

/* Galería / carrusel horizontal */
.st-gallery{ position:relative; margin:18px auto 0; width:min(1280px,96%); }
.st-track{ display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding:6px; border-radius: var(--st-radius); }
.st-track img{ width: 280px; height: 180px; object-fit:cover; flex:0 0 auto; border-radius: 14px; scroll-snap-align:start; box-shadow: var(--st-shadow); cursor: zoom-in; }
.st-nav{ position:absolute; top:50%; transform:translateY(-50%); border:none; width:40px; height:40px; border-radius:50%; background: var(--st-light); box-shadow: var(--st-shadow); cursor:pointer; }
.st-prev{ left:-6px; } .st-next{ right:-6px; }
.st-nav:focus-visible{ outline:3px solid var(--st-ring); }

/* Responsive Study Trip */
@media (max-width: 960px){
  .st-hero{ grid-template-columns: 1fr; }
  .st-grid{ grid-template-columns: 1fr; }
  .st-hero-media{ height: 240px; }
}

/* ============== Lottie icon base ============== */
.st-ico{ width:64px; height:64px; display:inline-block; line-height:64px; font-size:40px; position:relative; }
.st-ico > svg, .st-ico > div{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.st-ico--mission{ width:42px; height:42px; line-height:42px; font-size:28px; }
.st-ico--badge{ width:20px; height:20px; line-height:20px; font-size:14px; }

/* ============== Lightbox ============== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8);
  display: none; 
  align-items: center; justify-content: center;
  padding: 24px; z-index: 7000;
}
.lightbox.is-open{ display: flex; }
.lightbox__img{
  max-width: 90vw; max-height: 90vh;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  object-fit: contain;
}
.lightbox__close{
  position: absolute; top: 16px; right: 16px;
  font-size: 32px; line-height: 1; border: 0; background: transparent;
  color: #fff; cursor: pointer; z-index: 7001;
}
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 7000;
}
.lightbox.is-open{ display: flex; }
.lightbox__img{
  max-width: 90vw; max-height: 90vh;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  object-fit: contain;
}
.lightbox__close{
  position: absolute; top: 16px; right: 16px;
  font-size: 32px; line-height: 1; border: 0; background: transparent;
  color: #fff; cursor: pointer; z-index: 7002;
}

/* Flechas de navegación */
.lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: #0a2342; font-size: 28px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  z-index: 7002;
}
.lightbox__prev{ left: 16px; }
.lightbox__next{ right: 16px; }
.lightbox__nav:focus-visible{ outline: 3px solid #99b3ff; outline-offset: 2px; }

.lightbox.--single .lightbox__nav{ display:none; }

/* ====== GALERÍA (overlay + lightbox) ====== */
:root{
  --ge-navy:#001231;
  --ge-bg:#ffffff;
  --ge-ink:#0f172a;
  --ge-muted:#6b7280;
  --ge-line:#e5e7eb;
  --ge-shadow:0 18px 50px rgba(0,0,0,.2);
  --ge-radius:18px;
}

.ge-gallery__open-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--ge-navy); color:#fff; border:0; border-radius:999px;
  padding:.8rem 1.2rem; font-weight:700; cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.ge-gallery__open-btn:hover{ filter:brightness(1.05) }

.ge-gallery{ position:fixed; inset:0; z-index:9999; display:none }
.ge-gallery[aria-hidden="false"]{ display:block }

.ge-gallery__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(3px);
}

.ge-gallery__panel{
  position:relative;
  margin:clamp(12px,3vh,24px) auto 0;
  width:min(1200px,94%);
  background:var(--ge-bg);
  border-radius:var(--ge-radius);
  box-shadow:var(--ge-shadow);
  display:flex;
  flex-direction:column;
  max-height:90vh;              
  overflow-y:auto;              
  scrollbar-width:thin;         
}
.ge-gallery__panel::-webkit-scrollbar{
  width:8px;
}
.ge-gallery__panel::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2); border-radius:8px;
}


.ge-gallery__header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--ge-line);
  background:var(--ge-bg);
}
.ge-gallery__header h2{ margin:0; color:var(--ge-navy) }

.ge-gallery__close{
  position:absolute; top:10px; right:12px;
  background:rgba(255,255,255,.9);
  border:0; font-size:26px; line-height:1;
  color:var(--ge-navy); border-radius:50%; cursor:pointer;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.ge-gallery__grid{
  display:grid;
  gap:14px;
  padding:18px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: 120px; 
  grid-auto-flow: dense; 
}

.ge-gallery__thumb{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#f3f5fa;
  cursor:pointer;
  border:1px solid var(--ge-line);
  transition:transform .25s ease;
}

.ge-gallery__thumb:nth-child(3n){ grid-row: span 2; }     
.ge-gallery__thumb:nth-child(5n){ grid-column: span 2; }  
.ge-gallery__thumb:nth-child(7n){ grid-row: span 2; grid-column: span 2; } 
.ge-gallery__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.ge-gallery__thumb:hover img{
  transform:scale(1.06);
}
.ge-gallery__thumb{
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.ge-lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85);
}
.ge-lightbox[aria-hidden="false"]{ display:flex }

.ge-lightbox__img{
  max-width:min(92vw,1200px); max-height:86vh; border-radius:16px;
  box-shadow:var(--ge-shadow); background:#000;
}

.ge-lightbox__close{
  position:absolute; top:18px; right:22px; z-index:2;
  background:rgba(255,255,255,.1); color:#fff; border:0; font-size:32px; line-height:1;
  padding:.2rem .5rem; border-radius:12px; cursor:pointer;
}
.ge-lightbox__close:hover{ background:rgba(255,255,255,.2) }

.ge-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); color:#fff; border:0; font-size:44px; line-height:1;
  width:56px; height:56px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; user-select:none;
}
.ge-lightbox__nav:hover{ background:rgba(255,255,255,.2) }
.ge-lightbox__prev{ left:20px }
.ge-lightbox__next{ right:20px }

.ge-lightbox__counter{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.35); padding:.3rem .6rem; border-radius:10px;
  font-weight:600; font-size:.95rem;
}

.ge-gallery__close:focus-visible,
.ge-lightbox__close:focus-visible,
.ge-lightbox__nav:focus-visible,
.ge-gallery__open-btn:focus-visible{
  outline:3px solid #99b3ff; outline-offset:2px;
}
/* ================= Footer ================= */
.footer-icons {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
}

.footer-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-icon {
  width: 28px;  
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1); 
  transition: transform 0.25s ease, filter 0.25s ease;
}

.footer-icons a:hover .footer-icon {
  transform: scale(1.15);
  filter: brightness(0) invert(59%) sepia(97%) saturate(342%) hue-rotate(87deg) brightness(95%) contrast(95%);
}