/* ====== Base ====== */
:root{
  --bg:#0f1115; --card:#161922; --text:#eaeef7; --muted:#b4bfd5;
  --brand:#7aa2ff; --brand-2:#ffd859; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);

  background-image: url("media/background-dolphin-waves.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;        /* <- muestra la imagen completa */
  background-color: #0f1115;       /* rellena el resto */
  background-attachment: scroll;  /* mejor en móvil */
  line-height:1.6;
}
@media (min-width: 1100px){
  body{
    background-size: cover;        /* en PC se ve espectacular */
    background-attachment: fixed;  /* efecto pro en escritorio */
  }
}
/* Bloquear scroll cuando el modal está abierto */
html.modal-open,
html.modal-open body{
  overflow: hidden;
}
html.modal-open body{
  position: fixed;
  width: 100%;
}
.container{width:min(1100px,92%); margin-inline:auto}
.section{padding:72px 0}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%)}
.section-title{font-size:clamp(1.6rem,2.5vw,2.2rem); text-align:center; margin:0 0 12px}
.section-sub{text-align:center; color:var(--muted); margin:0 auto 28px; max-width:720px}

/* ====== Header ====== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,17,21,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0
}

.logo{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-img{
  height:36px;
  width:auto;
  display:block;
}

.logo .logo-text{
  color: var(--text);
  font-weight:700;
  font-size:1.1rem;
}

.logo .logo-text > span{
  color: var(--brand);
}

.menu{
  display:flex;
  gap:18px;
  align-items:center
}

.menu .nav-link{
  color:var(--text);
  text-decoration:none;
  opacity:.9
}

.menu .nav-link:hover{
  color:var(--brand)
}

.hamburger{
  display:none;
  border:none;
  background:transparent;
  cursor:pointer
}

.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  margin:5px 0
}
/* ====== Hero ====== */
.hero{padding:72px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center}
.hero-copy h1{font-size:clamp(2rem,4vw,3rem); line-height:1.2; margin:.2em 0 .3em}
.hero-copy p{color:var(--muted); margin:0 0 1em; max-width:58ch}
.brand{color:var(--brand-2)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{background:var(--brand); color:#0b0e14; font-weight:700; border-radius:10px; padding:10px 16px; text-decoration:none; display:inline-block; box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.05)}
.btn.btn-outline{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.15)}

/* ====== Cards ====== */
.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}

@media (max-width:900px){
  .cards{
    grid-template-columns:1fr;
  }
}
.card{background:var(--card); padding:18px; border-radius:14px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06)}

/* ====== Portfolio ====== */
.grid-portfolio{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.work{position:relative; overflow:hidden; border-radius:14px; box-shadow:var(--shadow); cursor:pointer}
.work img, .work video { object-position: center; }
.work .thumb{position:relative}
.work .badge{position:absolute; right:10px; bottom:10px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.6); color:#fff; font-weight:800; pointer-events:none}
.work .tag{position:absolute; left:10px; bottom:10px; background:rgba(255,216,89,.95); color:#0b0e14; font-weight:700; padding:4px 8px; border-radius:8px; pointer-events:none}
.work::after{content:attr(data-title) " — " attr(data-desc); position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  color:#0b0e14; font-weight:600; background:linear-gradient(180deg, transparent, rgba(255,216,89,.95) 60%);
  transform:translateY(100%); transition:.35s transform ease; border-bottom-left-radius:14px; border-bottom-right-radius:14px}
.work:hover::after{transform:translateY(0)}

/* ====== Manifiesto ====== */
.manifesto{max-width:900px}
.manifesto-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
.manifesto-grid p{background:var(--card); border:1px solid rgba(255,255,255,.06); padding:16px; border-radius:12px; text-align:center}

/* ====== Contacto ====== */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start}
.contact-list{list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px}
.contact-list a{color:var(--text); text-decoration:none}
.form{display:grid; gap:10px; max-width:520px}
.form input,.form textarea{background:#0d1119; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:10px 12px; border-radius:10px}
.form textarea{min-height:120px; resize:vertical}
.map-wrap #map{width:100%; height:300px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}

/* ====== Footer ====== */
.footer{padding:28px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.3)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-nav{display:flex; gap:12px}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:var(--text)}

/* ====== Utilities ====== */
#btnTop{position:fixed; right:18px; bottom:18px; display:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; font-size:20px; background:var(--brand); color:#0b0e14; box-shadow:var(--shadow); z-index:60}
#btnTop:hover{filter:brightness(1.05)}
.section,.card,.work{opacity:0; transform:translateY(10px); transition:.5s ease}
.show{opacity:1; transform:none}

/* ====== Responsive ====== */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .grid-portfolio{grid-template-columns:1fr 1fr}
  .manifesto-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .menu{display:none}
  .hamburger{display:block}
  .header.open .menu{
    display:flex; position:absolute; top:60px; right:4%; left:4%; background:rgba(15,17,21,.95);
    border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px; flex-direction:column; gap:8px;
  }
}
@media (max-width:560px){
  .cards,.grid-portfolio{grid-template-columns:1fr}
}


/* ====== Slogan ====== */
.slogan{padding: 10px 0 0;}
.slogan-title{
  margin: 12px auto 0;
  text-align:center;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: .2px;
}
.hl-s{ color: var(--brand-2); font-weight: 700; }
.hl-c{ color: var(--brand);   font-weight: 700; }


/* ====== Modal (proyectos) ====== */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.88); z-index:1000}
.modal.show{display:grid}
.modal .close{position:absolute; top:16px; right:16px; font-size:28px; background:#fff; border:0; border-radius:8px; padding:6px 10px; cursor:pointer}
.modal-inner{max-width:min(98vw, 1600px); max-height:88vh; display:grid; place-items:center; padding:0 10px}
.modal-inner video,.modal-inner img,.modal-inner iframe,.modal-inner audio{width:100%; height:auto; max-height:88vh; border-radius:12px; display:block; background:#000; object-fit:contain}
.modal-cap{color:#fff; text-align:center; margin-top:10px; max-width:900px}

/* Modal action buttons */
.modal .fs, .modal .mute, .modal .dl, .modal .ext{
  position:absolute; top:16px; background:#fff; color:#111;
  border:0; border-radius:8px; padding:6px 10px; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size:18px;
}
.modal .fs{ right:62px; }
.modal .mute{ right:108px; }
.modal .dl{ right:154px; }
.modal .ext{ right:200px; }
.modal .fs:hover, .modal .mute:hover, .modal .dl:hover, .modal .ext:hover{ filter:brightness(1.05); }

@media (max-width:560px){
  .modal .fs{ right:16px; top:60px; }
  .modal .mute{ right:16px; top:100px; }
  .modal .dl{ right:16px; top:140px; }
  .modal .ext{ right:16px; top:180px; }
}

/* XL modal para Portafolios / Museo */
.modal.xl .modal-inner{
  max-width:100vw; max-height:96vh; width:100vw; height:96vh; padding:0;
}
.modal.xl .modal-inner iframe,
.modal.xl .modal-inner video,
.modal.xl .modal-inner img{
  width:100%; height:100%; max-height:96vh; border-radius:0;
}

/* ====== Hero video ====== */
.hero-media video {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: block;
}
/* ===== Feedback elegante del formulario ===== */

#formMsg{
  opacity: 0;
  transform: translateY(-6px);
  transition: all .35s ease;
  padding: 0;
  border-radius: 6px;
  font-size: 0.95rem;
}

#formMsg.show{
  opacity: 1;
  transform: translateY(0);
  padding: 8px 12px;
}

/* éxito */
#formMsg.ok{
  color: #166534;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
}

/* error */
#formMsg.err{
  color: #991b1b;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
}

/* check animado */
#formMsg.ok::before{
  content: "✓";
  font-weight: bold;
  margin-right: 8px;
  display: inline-block;
  transform: scale(0);
  animation: checkPop .35s ease forwards;
}

@keyframes checkPop{
  0%{
    transform: scale(0);
    opacity: 0;
  }
  60%{
    transform: scale(1.2);
    opacity: 1;
  }
  100%{
    transform: scale(1);
  }
}
/* Spinner para "Enviando..." */
#formMsg.loading::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

#btnSound{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 2000;
  pointer-events: auto;
  opacity: 1 !important;
  backdrop-filter: blur(10px);
  background: rgba(20,25,40,.8);
  border: 1px solid rgba(255,255,255,.12);
}

/* ===== FIX botón YouTube ===== */
.card a.btn{
  position: relative;
  z-index: 10;
}

.card{
  position: relative;
  z-index: 1;
}

/* ===== FIX DEFINITIVO LOGO (override final) ===== */
.logo .logo-text{
  color: var(--text) !important;
}
.logo .logo-text > span{
  color: var(--brand) !important;
}

/* ===== FIX TAMAÑO PORTFOLIO: todas las cards iguales ===== */
.work{
  aspect-ratio: 16 / 9;   /* puedes cambiar a 16/9 si te gusta más */
}

.work .thumb{
  width: 100%;
  height: 100%;
}

.work img,
.work video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px){
  body{
    background-attachment: scroll;
  }
}
/* FIX vídeos en móvil */
@media (max-width: 900px){

  .work{
    aspect-ratio: auto;
    height: auto;
  }

  .work img,
  .work video{
    height: auto;
    object-fit: contain;
  }

  .thumb{
    height: auto;
  }

}
/* ===== FIX: evitar scroll lateral en móvil ===== */
html, body{
  width: 100%;
  overflow-x: hidden;
}

/* Asegura que nada media se salga del contenedor */
img, video, iframe{
  max-width: 100%;
}

/* Por si algún bloque usa 100vw y crea desbordamiento */
.section, .container, .grid-portfolio, .hero-grid, .nav{
  max-width: 100%;
}

/* Evita que los videos dentro de cards se “escapen” */
.work, .work .thumb{
  width: 100%;
}

/* El hero video / media siempre dentro */
.hero-media, .hero-media video{
  width: 100%;
  max-width: 100%;
}
/* ===== FIX: evitar scroll lateral en móvil ===== */
html, body{
  width: 100%;
  overflow-x: hidden;
}

/* Asegura que nada media se salga del contenedor */
img, video, iframe{
  max-width: 100%;
}

/* Por si algún bloque usa 100vw y crea desbordamiento */
.section, .container, .grid-portfolio, .hero-grid, .nav{
  max-width: 100%;
}

/* Evita que los videos dentro de cards se “escapen” */
.work, .work .thumb{
  width: 100%;
}

/* El hero video / media siempre dentro */
.hero-media, .hero-media video{
  width: 100%;
  max-width: 100%;
}
/* ===== FIX móvil: no recortar imágenes ni vídeos ===== */
@media (max-width: 900px){

  .work{
    aspect-ratio: auto;   /* elimina el marco fijo */
  }

  .work img,
  .work video{
    width: 100%;
    height: auto;
    object-fit: contain;  /* muestra completo */
    object-position: center;
  }

  .work .thumb{
    height: auto;
  }

}
/* =========================
   FIX REAL portfolio móvil
========================= */
@media (max-width: 900px){

  .grid-portfolio{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .work{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  /* IMPORTANTE: quitar absolute */
  .work .thumb{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .work img,
  .work video{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* también cubre imágenes sin thumb */
  .work > img,
  .work > video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}
/* ===== Fondo móvil en toda la página ===== */
@media (max-width: 900px){
  html, body{
    min-height: 100%;
    background-image: url("media/background-dolphin-waves.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}