html,body{
  height:100%;
  overflow:hidden;
}

/* ---------- HERO GRID ---------- */
.hero{
  position:fixed;
  inset:0;
  padding:var(--pad);
  display:grid;
  grid-template-columns: 0.85fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "left nosotros aquavita aquavita"
    "left cta      carousel contacto";
  gap: var(--gap);
  height:100%;
  width:100%;
}

.cell{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding: clamp(18px, 2.2vw, 32px);
  border:0;
  text-align:left;
  font-family:inherit;
  text-decoration:none;
  box-shadow: var(--cell-shadow);
}

a.cell, button.cell{
  cursor:pointer;
  transition: transform .35s var(--ease), filter .25s ease;
}
a.cell:hover, button.cell:hover{ filter:brightness(1.04); }
a.cell:active, button.cell:active{ transform:scale(.99); }

.cell:focus-visible{
  outline: 3px solid var(--verde-accion);
  outline-offset: 3px;
}

/* ---------- LEFT: MARCA ---------- */
.panel-left{
  grid-area:left;
  background:var(--niebla);
  justify-content:space-between;
}
.panel-left .logo-wrap img{
  width: clamp(120px, 12vw, 180px);
  height:auto;
  display:block;
}
.panel-left .headline{ color:var(--carbon); }
.panel-left .headline h1{
  font-weight:600;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height:1.12;
  margin:0 0 14px 0;
  letter-spacing:-0.02em;
}
.panel-left .headline p{
  font-size: clamp(12.5px, 1vw, 15px);
  line-height:1.5;
  color:#5B6E69;
  margin:0 0 clamp(16px, 2.4vw, 26px) 0;
  max-width: 34ch;
}

/* ---------- NOSOTROS ---------- */
.card-nosotros{
  grid-area:nosotros;
  background:var(--verde-menta);
  color:var(--carbon);
  justify-content:flex-end;
  view-transition-name: nosotros-hero;
}
.card-nosotros h2{
  font-weight:600;
  font-size: clamp(24px, 2.3vw, 34px);
  line-height:1;
  margin:0;
}
.card-nosotros .founder{
  position:absolute;
  top: clamp(18px, 2.2vw, 32px);
  left: clamp(18px, 2.2vw, 32px);
  right: clamp(18px, 2.2vw, 32px);
  display:flex;
  align-items:center;
  gap: 9px;
}
.card-nosotros .avatar{
  width: clamp(38px, 3.6vw, 50px);
  height: clamp(38px, 3.6vw, 50px);
  border-radius:50%;
  overflow:hidden;
  display:block;
  flex-shrink:0;
  border: 2px solid var(--blanco);
  box-shadow: 0 3px 10px rgba(15,26,24,.15);
}
.card-nosotros .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.card-nosotros .founder-info{
  display:flex;
  flex-direction:column;
  line-height:1.3;
  min-width:0;
}
.card-nosotros .founder-name{
  font-size: clamp(10.5px, .95vw, 12px);
  font-weight:700;
  color:var(--carbon);
}
.card-nosotros .founder-role{
  font-size: clamp(9px, .8vw, 10.5px);
  font-weight:500;
  color:#3F5850;
}

/* ---------- PROYECTOS: AQUAVITA / WESS / CLIMATE WEEK (carrusel) ---------- */
.card-aquavita{
  grid-area:aquavita;
  color:var(--blanco);
  padding:0;
}
.project-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: clamp(18px, 2.2vw, 32px);
  text-decoration:none;
  color:inherit;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s ease, filter .25s ease;
}
.project-slide.is-active{
  opacity:1;
  pointer-events:auto;
}
.project-slide:hover{ filter:brightness(1.04); }
.project-slide:focus-visible{
  outline:3px solid var(--verde-accion);
  outline-offset:-3px;
  opacity:1;
  pointer-events:auto;
  z-index:2;
}
.project-slide.slide-aquavita{
  background:var(--verde-climatika);
  view-transition-name: aquavita-hero;
}
.project-slide.slide-wess{
  background:#1F7A6B;
  view-transition-name: wess-hero;
}
.project-slide.slide-climateweek{
  background:#155C4E;
  view-transition-name: climateweek-hero;
}
.project-content{
  position:relative;
  z-index:1;
}
.card-aquavita .eyebrow{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--menta-claro);
  margin-bottom:10px;
  font-weight:600;
}
.card-aquavita h2{
  font-weight:700;
  font-size: clamp(34px, 4vw, 62px);
  line-height:1;
  margin:0 0 12px 0;
}
.card-aquavita p{
  font-size: clamp(13px, 1.05vw, 16px);
  line-height:1.55;
  color:var(--menta-claro);
  max-width:50ch;
  margin:0;
  padding-right: clamp(60px, 6vw, 90px);
}
.project-dots{
  position:absolute;
  right: clamp(12px, 1.8vw, 26px);
  bottom: clamp(12px, 1.8vw, 26px);
  z-index:3;
  display:flex;
  gap:2px;
}
.project-dots .dot{
  width:22px;
  height:22px;
  padding:0;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:50%;
}
.project-dots .dot::before{
  content:'';
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transition: background .25s ease, transform .25s ease;
}
.project-dots .dot:hover::before{ background:rgba(255,255,255,.7); }
.project-dots .dot[aria-current="true"]::before{
  background:var(--verde-menta);
  transform:scale(1.3);
}
.project-dots .dot:focus-visible{
  outline:2px solid var(--verde-accion);
  outline-offset:1px;
}

/* ---------- CTA: VIDEO DEMO ---------- */
.card-cta{
  grid-area:cta;
  background:var(--verde-accion);
  color:var(--blanco);
  padding:0;
}
.cta-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cta-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,26,24,.35) 0%, rgba(15,26,24,.2) 42%, rgba(15,26,24,.72) 100%);
}
.cta-overlay{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  padding: clamp(18px, 2.2vw, 32px);
  pointer-events:none;
}
.card-cta .eyebrow{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--menta-claro);
}
.card-cta h2{
  font-weight:700;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height:1.05;
  margin:0 0 10px 0;
  color:var(--blanco);
}
.card-cta .arrow{ background:var(--verde-accion); color:var(--carbon); }

/* ---------- CARRUSEL CLIENTES ---------- */
.card-carousel{
  grid-area:carousel;
  background:var(--verde-bosque);
  color:var(--blanco);
  align-items:center;
  justify-content:center;
  text-align:center;
}
.card-carousel .eyebrow{
  position:absolute;
  top: clamp(18px, 2.2vw, 32px);
  left: clamp(18px, 2.2vw, 32px);
  margin:0;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--verde-menta);
  font-weight:600;
}
.logo-carousel{
  position:relative;
  width:100%;
  height: clamp(42px, 6vw, 60px);
}
.logo-carousel .logo-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size: clamp(12px, 1.05vw, 16px);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.3;
  white-space:normal;
  padding: 0 clamp(4px, 1vw, 14px);
  color:var(--blanco);
  opacity:0;
  animation: logoFade 15s infinite;
}
.logo-slide:nth-child(1){ animation-delay:0s; }
.logo-slide:nth-child(2){ animation-delay:3s; }
.logo-slide:nth-child(3){ animation-delay:6s; }
.logo-slide:nth-child(4){ animation-delay:9s; }
.logo-slide:nth-child(5){ animation-delay:12s; }
@keyframes logoFade{
  0%{ opacity:0; transform:translateY(8px); }
  4%{ opacity:1; transform:translateY(0); }
  16%{ opacity:1; transform:translateY(0); }
  20%{ opacity:0; transform:translateY(-8px); }
  100%{ opacity:0; }
}
.card-carousel .dots{
  display:flex;
  gap:6px;
  margin-top:18px;
}
.card-carousel .dots span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4C5F5A;
  animation: dotPulse 15s infinite;
}
.dots span:nth-child(1){ animation-delay:0s; }
.dots span:nth-child(2){ animation-delay:3s; }
.dots span:nth-child(3){ animation-delay:6s; }
.dots span:nth-child(4){ animation-delay:9s; }
.dots span:nth-child(5){ animation-delay:12s; }
@keyframes dotPulse{
  0%{ background:#4C5F5A; }
  4%{ background:var(--verde-menta); }
  16%{ background:var(--verde-menta); }
  20%{ background:#4C5F5A; }
  100%{ background:#4C5F5A; }
}

/* ---------- CONTACTO ---------- */
.card-contacto{
  grid-area:contacto;
  background:var(--verde-medio);
  color:var(--blanco);
  justify-content:space-between;
}
.card-contacto .eyebrow{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--menta-claro);
}
.card-contacto h2{
  font-weight:700;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height:1.05;
  margin:0 0 10px 0;
}

/* ---------- ARROW (compartido cta / contacto) ---------- */
.arrow{
  width: clamp(44px,3.4vw,48px);
  height: clamp(44px,3.4vw,48px);
  border-radius:50%;
  background:var(--carbon);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.card-contacto .arrow{ color:var(--blanco); }

/* ---------- VIDEO STAGE (pantalla completa, transición FLIP desde el cuadrante) ---------- */
.video-stage{
  position:fixed;
  inset:0;
  z-index:60;
  background:#000;
  overflow:hidden;
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.65,0,.35,1), border-radius .6s cubic-bezier(.65,0,.35,1);
}
.video-stage video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-stage .stage-close{
  position:absolute;
  top: clamp(20px,2.4vw,36px);
  right: clamp(20px,2.4vw,36px);
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.94);
  color:var(--carbon);
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0;
  transition: opacity .25s ease .25s;
}
.video-stage.open .stage-close{ opacity:1; }
.video-stage .stage-close:focus-visible{
  outline:3px solid var(--verde-accion);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .logo-slide, .dots span{ animation:none !important; opacity:1 !important; }
  .logo-slide:not(:nth-child(1)){ display:none; }
  .project-slide{ transition:none !important; }
  a.cell, button.cell, .video-stage{
    transition:none !important;
  }
}

@media (max-width: 860px){
  html, body{ height:auto; overflow-y:visible; }
  .hero{
    position:static;
    overflow-y:visible;
    height:auto;
    min-height:100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "left      left"
      "nosotros  aquavita"
      "cta       aquavita"
      "carousel  carousel"
      "contacto  contacto";
  }
  .card-aquavita h2{ font-size: clamp(24px, 7.5vw, 34px); overflow-wrap: break-word; }
  .cell{ min-height:220px; }

  .credit-badge{
    display:flex;
    position:static;
    transform:none;
    width:fit-content;
    margin: 20px auto clamp(20px, 6vw, 32px);
    box-shadow:none;
  }
  .credit-panel{ display:none; }
}