/* Reset */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root { --header-h: 110px; }   /* alto de tu header fijo */
html { scroll-behavior: smooth; }

#portafolio::before,
#servicios::before,
#contacto::before{
  content:"";
  display:block;
  height: calc(var(--header-h) + 12px);
  margin-top: calc(-1 * (var(--header-h) + 12px));
  visibility:hidden;
  pointer-events:none;
}


body {
  font-family: 'Poppins', sans-serif;
  background: #0A0908;
  color: #fff;
  line-height: 1.6;
}

@font-face {
  font-family: 'RuneFont';
  src: url('../assets/fonts/RUNE.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#fondoAnimado {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.contenedor-header {
  background: rgba(10, 9, 8, 0.95);
  color: #fff;
  max-height: 250px;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid #34E5FF;
  flex-wrap: wrap;
 
}

.logo {
  width: 400px;
  height: auto;
}

 .logo-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.eslogan {
  font-size: 1rem;
  color: #D1BCE3;
  font-style: italic;
  letter-spacing: .8px;
  margin-top: 0.5rem;
  position: relative;
  bottom: 120px;
}

.eslogan .runa {
  font-family: 'RuneFont', serif; 
  font-size: 1.8rem;
  font-style: normal;
  color: #34E5FF;
  margin: 0 0.3rem;
}

.menu-container {
  display: flex;
  gap: 1.5rem;
}

.menu-container a {
  color: #34E5FF;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.menu-container a:hover {
  color: #D1BCE3;
}

.hero {
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, #0A0908 70%, #573280 100%);
  padding: 2rem;
}

.hero h1 {
  font-size: 3rem;
  color: #34E5FF;
  margin-bottom: 1rem;
}

.hero p {
  color: #D1BCE3;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn-principal {
  padding: 0.8rem 1.8rem;
  background: #007EA7;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-principal:hover {
  background: #34E5FF;
  color: #0A0908;
  transform: scale(1.05);
}


/* Portafolio */
/* .portafolio {
  background: #0A0908;
  padding: 4rem 2rem;
  text-align: center;
}

.portafolio h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #34E5FF;
}

.grid-portafolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.proyecto {
  background: #573280;
  padding: 2rem;
  border-radius: 12px;
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
}

.proyecto:hover {
  transform: translateY(-8px);
  background: #007EA7;
} */

/* Grid: 4 columnas en desktop, 2 en tablet, 1 en móvil */
/* .grid-portafolio{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(4, minmax(220px,1fr));
  margin: 0 30px;
} */
.portafolio{
  background: #0A0908;
  padding: 4rem 2rem;
}

.portafolio h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #34E5FF;
  text-align: center;
}

/* TEMP: gap amplio mientras haya solo 2 proyectos.
   Cuando haya 4 o más, bajar a 2rem. */
.grid-portafolio{
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
}

.proyecto{
  width: 380px;
  background:#573280;
  border-radius:12px;
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:0.8rem;
  min-height: 190px;
  max-height: 210px;
  overflow:hidden;
  transition:transform .3s ease, background .3s ease;

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.proyecto:hover{
  transform:translateY(-6px);
  background:#007EA7;

  box-shadow: 0 20px 40px rgba(52, 229, 255, 0.25);
}

/* .proyecto-media{
  margin: 0;
} */

.proyecto-media{
  margin: 0;
  overflow: hidden; /* 👈 clave para el efecto */
  border-radius: 8px;
}

/* .proyecto-media img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
  border-radius:8px;
} */

.proyecto-media img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
  border-radius:8px;

  transition: transform .4s ease, filter .4s ease;
}

.proyecto:hover .proyecto-media img{
  transform: scale(1.08);
  filter: brightness(1.1) contrast(1.05);
}

.proyecto-body{
  padding:.6rem .6rem .8rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.proyecto h3{
  margin:0;
  font-size:1rem;
  line-height:1.2;
  font-weight:800;
}
/* Botón centrado y pequeño */
/* .btn-ver,.btn-cta{
  align-self:center;
  background:#34E5FF;
  color:#0A0908;
  border:0; border-radius:10px;
  padding:.45rem .8rem;
  font-weight:800;
  font-size:.9rem;
  display:inline-block;
  margin-top:.2rem;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn-ver:hover,.btn-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(52,229,255,.25);
  background:#20d6f1;
}
 */

 .btn-ver{
  margin-top: .4rem;
  align-self: center;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #34E5FF, #007EA7);
  color: #0A0908;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  box-shadow: 0 5px 15px rgba(52, 229, 255, 0.25);
}

.btn-ver:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 25px rgba(52, 229, 255, 0.4);
  background: linear-gradient(135deg, #34E5FF, #573280);
  color: #fff;
}
/* Modal con más padding (por si no lo tenías ya) */
.modal-dialog{ padding:2rem; }
.kpi-list li{ padding:.8rem 1rem; }

/* Oculto por defecto + por encima de todo */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}
.modal[aria-hidden="false"]{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}

/* Caja del modal */
.modal-dialog{
  position: relative;
  width: min(92vw, 760px);
  max-height: 85vh;
  overflow: auto;
  margin: 6vh auto;
  padding: 2rem;                 /* padding para que no se vea encimado */
  background: #0A0908;
  color: #e9eaf8;
  border: 1px solid #2a2a35;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.65);
}

.modal-close{
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; cursor: pointer;
  color: #34E5FF; font-size: 22px;
}

/* Bloquear scroll del documento cuando el modal está abierto */
body.modal-open{ overflow: hidden; }


/* Servicios */
.servicios {
  background: #111;
  padding: 4rem 2rem;
  text-align: center;
  margin: 0 auto;
}

.servicios h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #6b2faf;
}

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.servicio {
  background: #007EA7;
  padding: 2rem;
  border-radius: 12px;
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
}

.servicio:hover {
  transform: translateY(-8px);
  background: #573280;
}

/* Contacto */
.contacto {
  background: #0A0908;
  padding: 4rem 2rem;
  text-align: center;
}

.contacto h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #34E5FF;
}

.form-contacto {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-contacto input,
.form-contacto textarea {
  padding: 1rem;
  border: none;
  border-radius: 8px;
  outline: none;
  background: #111;
  color: #fff;
}

.form-contacto button {
  align-self: center;
}

.footer {
  background: #0a0908;
  padding: 2rem 1rem;
  text-align: center;

  /* 👇 la línea azul como antes */
  border-top: 2px solid #2bb1ff;

  margin-top: 2rem; /* para que no quede pegado al botón de enviar */
}

.footer-text {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: #e7ecf3;
}

.redes {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.redes a {
  color: var(--nk-blue, #2bb1ff);
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.redes a:hover {
  color: var(--nk-purple, #7b3cff);
  transform: scale(1.3) rotate(-5deg);
  text-shadow: 0 0 10px rgba(43,177,255,0.7),
               0 0 20px rgba(123,60,255,0.6);
}

.copy {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  text-align: center;
}
.copy .brand {
  background: linear-gradient(90deg, #2bb1ff, #7b3cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

/* Botón */
.btn-principal {
  background: #34E5FF;
  color: #0A0908;
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s ease;
}

.btn-principal:hover {
  background: #2CCBDE;
}


/* =====================
   Media Queries Responsive
===================== */

/* Desktop grande (≥1025px) */

@media (min-width: 1025px){
  .contenedor-header { margin: 0 150px; }

  /* Portafolio */
  .grid-portafolio{ grid-template-columns: repeat(4, minmax(240px,1fr)); }
  .proyecto{ min-height: 190px; max-height: 210px; }
  .proyecto-media img{ height: 100px; }
}


/* Desktop/tablet (≤1024px) */

@media (max-width: 1024px) {
  .contenedor-header { margin: 0 50px; }

  .logo{ bottom: 15px; width: 300px; }
  .eslogan{ bottom: 60px; font-size: 0.95rem; text-align: center; }

  /* Portafolio */
  .grid-portafolio{ grid-template-columns: repeat(2, minmax(240px,1fr)); }
  .proyecto{ min-height: 190px; max-height: 210px; }
  .proyecto-media img{ height: 95px; }
}

/* Tablet / mobile (≤768px) */

@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .contenedor-header{
    margin: 0 12px; padding:.5rem .75rem; flex-wrap:wrap; gap:.5rem;
    margin-bottom:14px; max-height:200px;
  }
  .logo-area{ flex:1 1 100%; display:flex; flex-direction:column; align-items:center; }
  .logo{ width: clamp(160px, 45vw, 260px); height:auto; bottom:0; margin:0 auto; display:block; }
  .eslogan{ position: static !important; bottom: 0 !important; text-align:center; font-size:.95rem; }
  .menu-container{ flex:1 1 100%; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:20px; }
  .menu-container a{ white-space:nowrap; font-size:.95rem; }
  .hero { padding: 1.5rem 1rem; }
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); line-height: 1.15; }
  .hero p  { font-size: clamp(.95rem, 3.6vw, 1.1rem); }

  /* Portafolio */
  .grid-portafolio{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
  .proyecto{ min-height: 180px; max-height: 200px; }
  .proyecto-media img{ height: 90px; }
  .proyecto h3{ font-size: 1rem; }
  .proyecto-resumen{ font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .btn-ver{ padding:.45rem .8rem; font-size:.9rem; }
}

/* Smartphones pequeños (≤480px) */

@media (max-width: 480px) {
  .contenedor-header{
    margin: 0 8px; padding: .5rem .6rem; flex-wrap:wrap; gap:.4rem;
    margin-bottom:16px; max-height:170px;
  }
  .logo-area{ flex:1 1 100%; display:flex; flex-direction:column; align-items:center; }
  .logo{ width: clamp(150px, 50vw, 200px); height:auto; bottom:0; margin:0 auto; display:block; }
  .eslogan{ position: static !important; bottom:auto !important; font-size:.9rem; line-height:1.3; margin-top:12px; text-align:center; }
  .eslogan .runa{ font-family:'RuneFont',serif; font-size:1.2rem; display:inline-block; vertical-align:middle; }
  .menu-container{ flex:1 1 100%; justify-content:center; flex-wrap:wrap; gap:.75rem; }
  .menu-container a{ font-size:.9rem; white-space:nowrap; }
  html, body{ max-width:100%; overflow-x:hidden; }

  /* Portafolio */
  .grid-portafolio{ grid-template-columns: 1fr; }
  .proyecto{ min-height: 170px; max-height: 190px; }
  .proyecto-media img{ height: 85px; }
}

/* Mobile portrait (≤430px y vertical) */

@media (max-width: 430px) and (orientation: portrait) {
  .eslogan{ display:inline-block; line-height:1.35; margin-bottom:0; padding-bottom:10px; transform: translateZ(0); }
  .contenedor-header{ padding-bottom:0; }

  /* Portafolio */
  .proyecto{ min-height: 165px; }
  .proyecto-media img{ height: 80px; }
}

/* iOS/Webkit fixes + extra pequeño */

@supports (-webkit-touch-callout: none) {
  .eslogan{ padding-bottom: 12px; }
  .logo-area, .contenedor-header{ display: flow-root; }
}

@media (max-width: 380px) {
  .contenedor-header{ max-height: 160px; }

  /* Portafolio */
  .proyecto{ min-height: 160px; }
  .proyecto-media img{ height: 78px; }
}

/* ——— Fix: entre 690px y 481px ——— */
@media (max-width: 690px) and (min-width: 481px) {
  .proyecto{
    max-height: none;        /* ← ya no recorta */
    min-height: 210px;       /* por si la tarjeta queda muy bajita */
    padding: .9rem;
  }
  .proyecto-media img{
    height: 105px;           /* un poquito más alta para respirar */
  }
  .proyecto-resumen{
    white-space: normal;     /* ← permite que el texto baje a 2 líneas */
  }
}

/* ——— Fix extra para ≤480px ——— */
@media (max-width: 480px){
  .proyecto{
    max-height: none;        /* sin límite en móvil */
    min-height: 200px;
  }
  .proyecto-media img{ height: 95px; }
  .proyecto-resumen{ white-space: normal; }
}

/* Fix global: botón siempre baja al fondo de la tarjeta */
.proyecto-body{ display:flex; flex-direction:column; flex:1; }
.btn-ver{ margin-top:auto; } /* empuja el botón hacia abajo */

/* —— Rango desktop medio: 1343px → 1025px —— */
@media (max-width: 1343px) and (min-width: 1025px){
  .proyecto{
    max-height: none;       /* evita el recorte */
    min-height: 220px;      /* altura cómoda */
    padding: .9rem;
  }
  .proyecto-media img{
    height: 110px;          /* un pelín más alta para balancear */
  }
  .proyecto-resumen{
    white-space: normal;    /* permite 2 líneas si hace falta */
  }
  .btn-ver{
    font-size: .9rem;
    padding: .45rem .8rem;
  }
}