/* ==== VARIABLES ==== */
:root{
  --white:#ffffff;
  --text:#333333;
  --aqua-dark:#4b7f92;      /* color de ícono y títulos */
  --tan:#bb9873;
  --bg:#f8f4ee;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --shadow-soft:0 20px 60px rgba(0,0,0,.06);
}

/* ==== RESET ==== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* ==== UTIL ==== */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{position:relative;padding:80px 0}
h1,h2,h3,h4{color:#2a5562}

/* ==== NAVBAR ==== */
.navbar{
  position:fixed; inset:0 0 auto 0;
  background:var(--white);
  border-bottom:1px solid #eee;
  z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.navbar-content{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{height:42px}
.brand-name{font-weight:800;color:var(--aqua-dark)}
.main-nav ul{display:flex;gap:28px;list-style:none}
.main-nav a{color:#5c6b71;text-decoration:none;font-weight:600}
.main-nav a:hover,.main-nav a.active{color:var(--aqua-dark)}
.language-icon{color:var(--aqua-dark);font-size:18px}
main{padding-top:78px}

/* ==== BG PARALLAX GLOBAL ==== */
.parallax-bg{
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(180deg,#f3fbff 0%, #f9f3ea 100%);
}
.parallax-bg .bg-diag{
  position:absolute; left:-15%; bottom:-10%;
  width:110%; height:55%;
  background:linear-gradient(10deg, rgba(161,196,206,.25), rgba(161,196,206,0)) ;
  clip-path:polygon(0 35%, 65% 0, 100% 10%, 100% 100%, 0 100%);
}
.parallax-bg .bg-palm{
  position:absolute; pointer-events:none;
  background: url("/img/palms.svg") no-repeat center / contain;
  opacity:.9; filter: blur(.1px); z-index:-1;
}
.parallax-bg .bg-palm-right{ right:-6%; top:-2%; width:820px; height:820px; transform: rotate(-8deg); mix-blend-mode: multiply; }
.parallax-bg .bg-palm-left{ left:-10%; bottom:-12%; width:640px; height:640px; transform: scaleX(-1) rotate(6deg); mix-blend-mode: multiply; }
@media (max-width:1200px){
  .parallax-bg .bg-palm-right{ width:640px; height:640px; right:-10%; top:-4%}
  .parallax-bg .bg-palm-left{ width:520px; height:520px; left:-14%; bottom:-14%}
}
@media (max-width:768px){
  .parallax-bg .bg-palm-right{ width:460px; height:460px; right:-16%; top:-6%}
  .parallax-bg .bg-palm-left{ display:none }
}

/* ==== HERO ==== */
.hero{padding-top:88px;padding-bottom:40px}
.hero h1{ font-size:44px; text-align:center; font-weight:800; color:#2f6a78 }
.hero p{ text-align:center; margin-top:10px; color:#56737b; font-weight:500 }

/* ==== GRID UTIL ==== */
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}

/* ==== TARJETAS GENÉRICAS ==== */
.card{
  background:#fff; border-radius:18px; padding:24px 26px;
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.card-elev{box-shadow:var(--shadow-soft)}
.card .card-cap{
  position:absolute; top:14px; left:24px; right:24px; height:10px;
  border-radius:8px; background:var(--tan); opacity:.9;
}
.card.media{padding:18px}
.card.media img{ width:100%; height:100%; object-fit:cover; border-radius:14px; display:block }

/* ==== HISTORIA ==== */
.history-grid{align-items:flex-start; grid-template-columns:.95fr 1.05fr}
.history-copy h2{font-size:32px;margin:0 0 14px}
.history-copy p{color:#44555b}
.history-grid .card.media{ order:1 }
.history-grid .history-copy{ order:2 }

/* ==== BOTONES ==== */
.btn{ display:inline-block; border-radius:10px; padding:12px 18px; text-decoration:none; font-weight:700; transition:.25s ease }
.btn.white{ background:transparent; border:2px solid rgba(255,255,255,.8); color:#fff }
.btn.white:hover{ background:rgba(255,255,255,.12) }

/* ==== MISIÓN & VISIÓN ==== */
.mv-slab{ position:relative; padding:72px 0; background:transparent; isolation:isolate; margin:24px 0 }
.mv-slab::before{
  content:""; position:absolute; top:18px; bottom:18px; left:0; right:0;
  background:linear-gradient(180deg,#eaf2f5 0%, #f4e9de 100%);
  border-radius:28px; z-index:-1; opacity:.92;
}
@supports (mask-image:linear-gradient(#000,#000)){
  .mv-slab::before{
    mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  }
}
.mv-slab .slab{ display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:48px }
.mv-slab.invert .slab{ grid-template-columns:.92fr 1.08fr }
.slab-copy h2.slab-kicker{ font-size:34px; line-height:1.15; margin:0 0 14px; color:#2a5562; letter-spacing:-.02em }
.slab-copy p{ font-size:18px; color:#4b5960; max-width:58ch }
.slab-media{ position:relative; margin:0; filter:drop-shadow(0 24px 60px rgba(0,0,0,.12)) }
.slab-media img{
  width:100%; display:block;
  border-radius:36% 64% 58% 42% / 40% 36% 64% 60%;
  outline:6px solid rgba(255,255,255,.8); background:#fff;
}
.slab-media::before{
  content:""; position:absolute; inset:-18px;
  border-radius:38% 62% 60% 40% / 38% 40% 60% 62%;
  background:radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0));
  z-index:-1;
}
.slab-copy::before{
  content:""; display:block; width:min(380px,60%); height:10px; border-radius:10px;
  background:var(--tan,#bb9873); opacity:.95; margin:0 0 18px;
}
.mv-slab.invert .slab-copy::before{ margin-left:0 }

/* Responsivo M/V */
@media (max-width:1024px){
  .mv-slab .slab, .mv-slab.invert .slab{ grid-template-columns:1fr; gap:28px }
  .mv-slab.invert .slab .slab-media{ order:0 }
  .mv-slab.invert .slab .slab-copy{ order:1 }
  .slab-copy h2.slab-kicker{ font-size:28px }
  .slab-copy p{ font-size:17px }
}
@media (max-width:640px){
  .mv-slab{ padding:56px 0 }
  .slab-copy h2.slab-kicker{ font-size:24px }
  .slab-copy::before{ width:70% }
}

/* ==== VALORES ==== */
.section-head{margin-bottom:18px}
.section-head h2{font-size:36px;margin-bottom:6px;color:var(--aqua-dark)}
.section-head p{color:#6b7a7f}

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

.value-card{
  background:#fff;
  border-radius:18px;
  padding:30px 24px 28px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transition:transform .28s ease, box-shadow .28s ease;
  min-height: 268px;               /* altura para que respiren */
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
}
/* ICONO: tamaño, color y separación */
.value-icon{
  width:64px; height:64px;
  margin:0 auto 14px;
  color:var(--aqua-dark);
  display:block;
}
.value-icon svg{ width:100%; height:100% }
.value-icon svg *{ stroke:currentColor }

/* Títulos + textos */
.value-card h4{
  font-size:20px;
  margin:6px 0 10px;
  color:var(--aqua-dark);
  font-weight:700;
}
.value-card p{
  color:#55656b;
  font-size:15px;
  line-height:1.5;
}

/* Responsive valores */
@media (max-width:1024px){
  .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .values-grid{grid-template-columns:1fr}
}

/* ==== CTA ==== */
.cta{padding:80px 0;background:linear-gradient(180deg,#f7efe6 0,#fff 100%)}
.cta .cta-box{
  background:linear-gradient(180deg, #3f6f7e 0%, #3a6976 100%);
  color:#fff; padding:38px 28px; border-radius:18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px; box-shadow:0 25px 60px rgba(63,111,126,.25);
}
.cta h3{font-size:30px}

/* ==== FOOTER ==== */
.footer-small{
  background:#fff;border-top:1px solid #eee;text-align:center;
  padding:18px 0 12px; color:#879196;
}
.footer-container{ display:flex;justify-content:flex-start;align-items:center;padding-left:2rem }
.footer-social{ display:flex;gap:16px;align-items:center }
.footer-social img{ height:28px;opacity:.9;transition:.2s }
.footer-social img:hover{ opacity:1; transform:scale(1.08) }
.footer-copy{font-size:.8rem;margin-top:6px}

/* ==== RESPONSIVE GLOBAL ==== */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:38px}
}
@media (max-width:640px){
  .hero{padding-top:72px}
  .hero h1{font-size:30px}
}

/* ====== Reveal / Pop Animations ====== */
.reveal{ opacity:0; transform:translateY(14px); will-change:opacity,transform,filter;
  transition:opacity .6s ease, transform .6s ease, filter .6s ease }
.reveal[data-reveal="fade-up"]{ transform:translateY(18px) }
.reveal[data-reveal="fade-right"]{ transform:translateX(-18px) }
.reveal[data-reveal="fade-left"]{ transform:translateX(18px) }
.reveal[data-reveal="zoom"]{ transform:scale(.96); filter:blur(2px) }
.reveal[data-reveal="pop"]{ transform:scale(.92) }
.reveal.is-visible{ opacity:1; transform:none; filter:none }
.reveal[data-delay]{ transition-delay:calc(attr(data-delay number, 0) * 1ms) }

/* Pop on load */
.pop-on-load{ opacity:0; transform:translateY(-6px) scale(.98); animation:popIn .7s cubic-bezier(.2,.7,.2,1) forwards }
.pop-on-load[data-stagger="100"]{ animation-delay:.1s }
@keyframes popIn{
  0%{ opacity:0; transform:translateY(8px) scale(.98); filter:blur(1px) }
  60%{ opacity:1; transform:translateY(0) scale(1.012) }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:none }
}

/* Hover “lift” sobre las cards visibles */
.values .card.card-elev.is-visible:hover{ transform:translateY(-4px); transition:transform .2s ease }

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .reveal,.pop-on-load,.reveal.is-visible{
    transition:none!important; animation:none!important;
    opacity:1!important; transform:none!important; filter:none!important;
  }
}

/* ==== NAVBAR RESPONSIVE ==== */

/* Contenedor para el ícono de idioma y el botón de menú */
.nav-right-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Estilos del botón de hamburguesa */
.nav-toggle {
  display: none; /* Oculto en desktop por defecto */
  background: none;
  border: none;
  color: var(--aqua-dark);
  font-size: 22px;
  cursor: pointer;
  padding: 5px;
  z-index: 1100; /* Asegura que esté sobre el contenido */
  line-height: 1; /* Para alinear bien los íconos */
}

/* Ocultar el ícono 'X' por defecto */
.nav-toggle .fa-times {
  display: none;
}

/* --- Media Query para Teléfonos y Pantallas Pequeñas --- */
@media (max-width: 768px) {

  /* Mostrar botón hamburguesa en móvil */
  .nav-toggle { display: block; position: relative; z-index: 3000; }

  /* Overlay de navegación móvil: pantalla completa + scroll */
  .main-nav {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100dvh;                       /* alto real del viewport móvil */
    background: rgba(255,255,255,.95);
    display: flex;
    flex-direction: column;
    justify-content: center;              /* centra el bloque */
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 24px 24px;
    overflow-y: auto;                     /* ¡clave!: permite hacer scroll */
    -webkit-overflow-scrolling: touch;    /* suavidad en iOS */
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4%);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
    z-index: 2200;                        /* por encima del header */
  }

  /* Si hay soporte, aplica blur suave */
  @supports (backdrop-filter: blur(10px)) {
    .main-nav { background: rgba(255,255,255,.85); backdrop-filter: blur(10px); }
  }

  /* Lista vertical, con espacio suficiente para el dedo */
  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: min(72vh, 560px);         /* evita que queden pegados arriba/abajo */
  }

  .main-nav a {
    font-size: 22px;
    font-weight: 800;
    color: var(--aqua-dark);
    text-decoration: none;
  }

  /* Oculta el ícono de idioma en móvil (lo puedes dejar si quieres) */
  .nav-right-cluster .language-icon { display: none; }

  /* Estado ABIERTO (lo pone JS): hace visible el overlay */
  .navbar.nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Alterna iconos barras/X */
  .navbar.nav-open .nav-toggle .fa-bars { display: none; }
  .navbar.nav-open .nav-toggle .fa-times { display: inline-block; }

  /* Bloquea scroll del body cuando el menú está abierto */
  body.nav-open { overflow: hidden; }
}

/* === FIX NAV BAR COMPACTO === */
html, body { overflow-x: hidden; }
@media (max-width: 480px){
  .container.navbar-content{padding:10px 12px;gap:10px}
  .brand{gap:.45rem}
  .logo{height:34px;max-width:130px}
  .brand-name{font-size:clamp(1rem,4vw,1.1rem);line-height:1;white-space:nowrap}
  .nav-right-cluster{gap:8px;margin-left:auto;align-items:center}
  .language-icon{font-size:1.05rem;padding:6px}
  .nav-toggle{font-size:20px;padding:6px}
}
@media (max-width: 360px){
  .logo{height:30px}
  .brand-name{display:none}
  .container.navbar-content{padding:8px 10px}
}
.navbar-content{flex-wrap:nowrap}
.main-nav{flex:0 0 auto}
.nav-right-cluster{flex:0 0 auto}