/* ---------- Base ---------- */
:root{
  --bg: #0d1117;
  --panel: #0f1724;
  --text: #e6edf3;
  --muted: #9fb3c8;
  --accent: #8ab4f8;
  --green: #32d74b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;

  --header-h: 84px; /* altura total del header */
}

/*html {
  scroll-padding-top: var(--header-h);
}*/


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(101,143,255,.25), transparent 60%),
              radial-gradient(1000px 700px at -20% 10%, rgba(50,215,75,.15), transparent 60%),
              var(--bg);
  line-height:1.6;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, 90vw); margin-inline:auto}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background: rgba(13,17,23,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}

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


.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; letter-spacing:.5px}
.brand:hover{text-decoration:none}
.brand-mark{height:80px; width:auto;}
.brand-text {
  display: none;  /* ocultamos el texto */
}

.menu{display:flex; gap:22px; align-items:center}
.menu a{color:var(--text); opacity:.9}
.menu .btn.small{padding:.5rem .9rem; font-size:.9rem}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:5px 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:linear-gradient(180deg, #7aa2ff, #5d84ff);
  color:#fff; padding:.9rem 1.15rem; border-radius:999px; font-weight:600;
  box-shadow: var(--shadow);
  transition: background-color .2s ease, background-image .2s ease, transform .2s ease;
}

.btn:hover {
  background: linear-gradient(180deg, #698eff, #4b74ff); /* un poquito más oscuro */
  transform: translateY(-1px);
}

.btn.ghost{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--text);
  box-shadow:none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn.ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);  /* usá background-color explícito */
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

button.btn[type="submit"] {
  padding: 0.7rem 1rem;   /* un poco más chico que .btn */
  font-size: 1.05rem;      /* letra más grande */
  width: auto;            /* evita que se estire a todo el ancho */
}

.btn.whatsapp {
  background: #25D366;          /* verde oficial de WhatsApp */
  color: #fff;
  box-shadow: var(--shadow);
  padding: .6rem .9rem;         /* más angosto que el .btn normal */
  font-size: .9rem;             /* texto un poquito más chico */
  transition: background-color .2s ease, transform .2s ease;
}
.btn.whatsapp:hover {
  background: #1ebe5b;          /* un poco más oscuro al pasar el mouse */
  transform: translateY(-1px);
}


/* ---------- Hero (con imagen de fondo) ---------- */
.hero {
  position: relative;
  padding-top: 80px;   /* arriba */
  padding-bottom: 80px; /* abajo */
  background: url("assets/FISH_hero_q80.webp") no-repeat center center;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* velo oscuro para contraste */
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  justify-items: start;
  text-align: left;
}


/* ---------- Hero: tamaños de texto (aplican a hero-box) ---------- */
.hero-box {
  max-width: 720px;
  padding-left: 5%; 
}

.hero-box p{
  font-size: 1.35rem;  /* ~22px */
  line-height: 1.6;
  margin-bottom: 24px;
}

/* --- Hero: tamaños de fuente (más grande) --- */
.hero-box h1{
  font-size: clamp(2.2rem, 5vw, 3.2rem); /* título más grande */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  white-space: nowrap; 
}

.hero-box p{
  font-size: 1.3rem;   /* antes ~1rem */
  line-height: 1.6;
  margin-bottom: 24px;
}

.hero-cta a{
  font-size: 1.1rem;     /* botones un poco más grandes */
}

.badges li{
  font-size: 1.2rem;     /* badges más legibles */
  padding: 8px 14px;   /* más aire interno */
}


/* ---------- Responsive ajustes ---------- */

/* Laptops / tablets grandes */
@media (max-width: 1024px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 190px;
  }
  .hero-inner {
    grid-template-columns: 1fr;   /* pasa a una columna */
    text-align: center;
    row-gap: 20px;
  }
}

/* Tablets y pantallas medianas */
@media (max-width: 768px) {
  .hero {
    padding-top: 110px;
    padding-bottom: 150px;
  }
  .hero-box h1 { white-space: nowrap; }
  .hero-box p  { font-size: 1.05rem;   }
  .hero-cta { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .badges   { justify-content: center; }
}

/* Celulares pequeños */
@media (max-width: 480px) {

  body{
    background:
      radial-gradient(1200px 800px at 80% -10%, rgba(101,143,255,.25), transparent 60%),
      var(--bg);
  }

  .site-header{ background: rgba(13,17,23,.92); }

  .hero {
    padding-top: 64px;
    padding-bottom: 80px;
  }

  .hero-inner { 
    justify-items: center; 
    text-align: center; 
  }

  .hero-box {
    max-width: min(720px, 92vw) !important;  /* ⬅ asegura ancho correcto en móvil */
    padding-inline: 12px;
  }

  .hero-box h1 { 
    font-size: 1.6rem;
    line-height: 1.25; 
    white-space: normal;
  }

  .hero-box p  { font-size: 0.95rem; }
  .hero-cta a  { display: inline-block; padding: 0.7rem 1rem; }

  .cards {
    grid-template-columns: 1fr !important;  /* ⬅ una columna */
    gap: 12px;
    margin-inline: 0;
  }

  .card {
    padding: 12px;
    font-size: 0.95rem;
  }

  html, body { overflow-x: hidden; }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }

  .footer-nav a {
    display: block;
    padding: 6px 0;
  }
}



/* Evita líneas demasiado largas en móviles */
.hero-box { max-width: 720px; }
@media (max-width: 768px){
  .hero-box { margin-inline: auto; padding-inline: 10px; }
}

@media (max-width: 768px) and (min-width: 481px){
  .hero-box h1 { 
    font-size: 1.9rem; 
    white-space: normal;   /* permite salto de línea */
  }
}


/* ---------- Sections ---------- */
.section{padding:60px 0}
.section.alt{
padding: 60px 0; 
background:rgba(255,255,255,.03); 
border-top:1px solid rgba(255,255,255,.06); 
border-bottom:1px solid rgba(255,255,255,.06);
min-height: calc(100vh - var(--header-h)); /* ocupa toda la altura disponible */
display: flex;
align-items: center; /* centra verticalmente su contenido */
}
.section h2{font-size: clamp(1.6rem, 3vw, 2rem); margin:0 0 14px}

/* Acerca “¿Por qué GENO-TAG?” a la sección anterior SIN tocar el fondo de #calidad */
#calidad + .section {
  padding-top: 28px;           /* antes eran 60px por .section */
}

/* En móviles, un poco más de respiro para que no quede apretado */
@media (max-width: 768px){
  .hero {
    background: url("assets/FISH_hero_q60.webp") no-repeat center center;
    background-size: cover;
  }

  #calidad + .section { 
    padding-top: 32px;
  }
}

.lead{color:var(--muted)}

.grid{display:grid; gap:18px}
.grid.two{grid-template-columns: repeat(2,1fr)}
.cards{grid-template-columns: repeat(4,1fr)}
.card{
  background:#0b1424; border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding:18px; min-height:120px
}

/* ---------- Steps ---------- */
.steps{counter-reset: s; padding-left:0; margin:0; list-style:none; display:grid; gap:12px}
.steps li{
  background:#0b1424; border:1px solid rgba(255,255,255,.08);
  padding:14px 14px 14px 48px; border-radius:12px; position:relative
}
.steps li::before{
  counter-increment:s; content: counter(s);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; background:#1c2a45; color:#a6c3ff; font-weight:700
}

/* ---------- Contact ---------- */
.contact{display:grid; gap:12px}
.contact label{display:grid; gap:6px; font-weight:600; color:#cfe0ff}
input, textarea{
  background:#0b1424; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.8rem .9rem; outline: none;
}
input:focus, textarea:focus{border-color:#7aa2ff; box-shadow:0 0 0 3px rgba(122,162,255,.18)}
.form-msg{margin:8px 0 0; color:#9fe29f}

/* ---------- Footer ---------- */
.site-footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:18px}
.footer-nav{display:flex; gap:16px}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .menu {
    display: none;
    position: absolute;
    right: 20px;
    top: 64px; /* baja un poquito para no tapar el header */
    flex-direction: column;
    background: #0b1424;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    z-index: 100; /* asegura que quede por encima */
  }

  .nav-toggle {
    display: block;
  }
}

/* Estado abierto del menú en móvil */
.menu.open {
  display: flex;                 /* se muestra al abrir */
  flex-direction: column;
  gap: 12px;                     /* espacio entre links */
  width: 200px;                  /* ancho fijo del panel */
  top: 64px;                     /* debajo del header */
  right: 20px;
  background: #0f1724;           /* fondo panel */
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 16px;
  animation: fadeIn .25s ease;   /* animación suave */
}

/* Pequeña animación */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Fix de columnas y desbordes en Calidad / ¿Por qué? / Contacto --- */

/* Evita que los hijos del grid fuercen ancho y se “salgan” */
.grid.two > * { min-width: 0; }

/* Tablets y móviles: 1 sola columna */
@media (max-width: 900px){
  .grid.two { grid-template-columns: 1fr; }
}

/* Móviles chicos: reforzamos ancho cómodo del contenedor */
@media (max-width: 480px){
  .container { width: min(1100px, 94vw); } /* un pelín más angosto para evitar scroll */
}

/* Evita líneas “larguísimas” que rompan el contenedor */
#calidad li, 
#calidad p,
.section .bullets li,
.section .checklist li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ajustá el valor al alto de tu header fijo */
#contacto {
  scroll-margin-top: 80px;
}

/* colchón global para todos los anchors */
[id] { scroll-margin-top: var(--header-h); }