/* ------------------ Variables básicas ------------------ */
:root{
    --bg-dark:#0a0b10;          /* color de fondo base si el vídeo no carga          */
    --primary:#00bfff;          /* color del glow / acento                          */
    --btn-green:#46d52a;        /* botón WhatsApp                                   */
    --text:#ffffff;             /* texto principal                                  */
    --shadow:0 0 12px var(--primary);
    --radius:12px;
    --max-width:1100px;
    --transition:all .3s ease;
}

*{box-sizing:border-box;margin:0;padding:0;font-family:Montserrat,Arial,sans-serif;}

body{
    background:var(--bg-dark);
    color:var(--text);
    line-height:1.5;
    scroll-behavior:smooth;
}

/* ---------- vídeo de fondo ---------- */
.background-video{
    position:fixed;inset:0;z-index:-2;overflow:hidden;
}
.background-video video{
    width:100%;height:100%;object-fit:cover;filter:brightness(.4);
}

/* ---------- barra superior ---------- */
header{
    position:sticky;top:0;z-index:1000;
    background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
}
.nav-wrapper{
    max-width:var(--max-width);margin:auto;
    display:flex;align-items:center;gap:32px;padding:10px 20px;
}
.logo img{width:48px;height:auto}
nav ul{display:flex;gap:24px;list-style:none;}
nav a{
    text-decoration:none;color:var(--text);font-weight:600;
    position:relative;transition:color .2s;
}
nav a::after{
    content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--primary);
    transition:width .2s ease-out;
}
nav a:hover{color:var(--primary);}
nav a:hover::after{width:100%;}

/* ---------- secciones generales ---------- */
section{padding:90px 20px;text-align:center;}
section h2{font-size:2rem;margin-bottom:40px;}

.card{
    max-width:var(--max-width);margin:auto;padding:40px 30px;
    border:2px solid var(--primary);border-radius:var(--radius);
    background:rgba(0,0,0,.55);
}

/* efecto glow base + hover */
.glow{transition:var(--transition);}
.glow:hover{box-shadow:var(--shadow);}

/* ---------- HERO ---------- */
#hero{padding-top:130px;padding-bottom:60px;}
#hero .card h1{font-size:2.2rem;margin-bottom:20px;}
#hero .card p{max-width:800px;margin:auto;}
.btn-whatsapp{
    display:inline-block;margin-top:120px;padding:14px 32px;
    background:var(--btn-green);color:#fff;font-weight:700;
    border-radius:50px;text-decoration:none;transition:filter .25s;
}
.btn-whatsapp:hover{filter:brightness(1.15);}

/* ---------- Footer ---------- */
footer{padding:40px 20px;text-align:center;font-size:.9rem;color:#aaa;}
footer a{color:#aaa;text-decoration:none;}
footer a:hover{color:var(--primary);}

/* ───────── HEADER ───────── */
header{
    display:flex;
    align-items:center;               /* centra logo y menú verticalmente   */
    justify-content:flex-start;       /* logo a la izquierda                */
    gap:2rem;                         /* espacio entre logo y menú          */
    width:100%;
    min-height:50px;                  /* ← grosor de la franja              */
    padding:6px 0;                    /* ↑↓ aire interior                   */
    background:rgba(0,0,0,.65);       /* ← negro translúcido                */
    backdrop-filter:blur(4px);        /* (opcional) sutil desenfoque        */
}

/* Logo – controla la ALTURA: así no engorda la barra */
header .logo img{
    height:180px;     /* sube o baja para hacerlo +/− grande          */
    width:auto;
}

/* Menú centrado “a ojo” entre los márgenes laterales */
header nav{
    margin-left:auto;   /* empuja el <nav> hacia la derecha           */
    margin-right:auto;  /* y lo centra respecto al ancho total       */
}

header nav ul{
    display:flex;
    gap:2.5rem;
    list-style:none;
    margin:0;
    padding:0;
}

/* ───────── TESTIMONIOS ───────── */
#testimonial-box{
    position:relative;
    width:100%;
    height:160px;          /* misma altura que tu viñeta */
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;       /* nada sale de la viñeta */
}

.testimonial-slide{
    text-align:center;
    width:100%;
    animation: slide 5s linear forwards;
}

.testimonial-slide .quote{
    font-style:italic;
    margin-bottom:2.5rem;
}

.testimonial-slide .author{
    font-weight:bold;
}
#testimonials .card{
    max-width: 800px;   /* ← ancho máximo que quieres (prueba) */
    margin: 0 auto;     /* ← la mantiene centrada */
}

@keyframes slide{
    0%   { transform:translateX(100%); opacity:0; }
    15%  { transform:translateX(0);    opacity:1; }
    85%  { transform:translateX(0);    opacity:1; }
    100% { transform:translateX(-100%);opacity:0; }
}

/* =========================
   CONTACTO (CORREGIDO)
   - Unificado (ID y CLASS)
   - select + checkbox ya estilos
   ========================= */

#contact{
  text-align:center;
  margin:4rem auto;
}

#contact .card{
  max-width:1000px;          /* mantengo tu último valor */
  margin:0 auto;
  padding:2rem 2.5rem;
  display:flex;
  justify-content:center;
}

/* Formulario: sirve si usas id="contact-form" o solo class="contact-form" */
#contact-form,
#contact .contact-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1rem;                 /* separación vertical entre campos */
}

#contact-form .form-row,
#contact .contact-form .form-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

/* Inputs + selects con misma caja */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact .contact-form input[type="text"],
#contact .contact-form input[type="email"],
#contact .contact-form input[type="tel"],
#contact .contact-form select{
  flex:1 1 240px;
  min-width:0;
  padding:0.75rem 1rem;
  border:none;
  border-radius:4px;
  height:46px;
  box-sizing:border-box;
  font-size:1rem;
}

/* (Opcional) textarea sigue por si algún día lo vuelves a usar */
#contact-form textarea,
#contact .contact-form textarea{
  resize:vertical;
  padding:0.75rem 1rem;
  border:none;
  border-radius:4px;
}

/* Checkbox privacidad: izquierda, más grande, alineado */
#contact-form label,
#contact .contact-form label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

#contact-form input[type="checkbox"],
#contact .contact-form input[type="checkbox"]{
  width:20px;
  height:20px;
  transform:scale(1.15);
  margin:0;
  accent-color: var(--primary);
}

/* Botón */
#contact-form button,
#contact .contact-form button{
  align-self:flex-end;      /* respetando tu estilo original */
  padding:0.75rem 1.5rem;
  border:none;
  border-radius:4px;
  background:#2196f3;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
}
#contact-form button:hover,
#contact .contact-form button:hover{
  background:#1e88e5;
}

/* ———— GLOW VERDE NEÓN ————— */
:root{
  --glow-green:#30ff79;
}

/* línea fina (viñeta “quieta”) */
.card.glow{
  box-shadow:0 0 6px 2px var(--glow-green) inset;
}

/* resplandor cuando pasas el ratón */
.card.glow:hover{
  box-shadow:
    0 0 10px   3px var(--glow-green) inset,
    0 0 22px   6px var(--glow-green);
  transition:box-shadow .25s ease-out;
}

/* ---------- SERVICIOS (versión única) ---------- */
.service-list{
    list-style:none;
    padding:0;
    margin:0 auto;
}

.service-item{
    display:block;
    margin:24px 0;
    padding:1rem 2rem;
    font-size:1.25rem;
    font-weight:600;
    border:2px solid var(--glow-green);
    border-radius:var(--radius);
    transition:box-shadow .25s ease-out;
}

.service-item:hover{
    box-shadow:0 0 12px 3px var(--glow-green) inset,
               0 0 22px 6px var(--glow-green);
}

/* ——— Ajuste SERVICIOS para <ul class="services-list"> ——— */
#services .services-list{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:800px;
}

/* cada <li class="card glow"> */
#services .services-list .card{
    display:block;
    margin:24px 0;
    padding:1rem 1.6rem;
    font-size:1.25rem;
}

/* ———— AJUSTE DE ANCHO • SOBRE NOSOTROS ———— */
#about .card{
    max-width:800px;
    margin:0 auto;
}

/* ----------  RESPONSIVE NAV  (móvil ≤ 768 px) ---------- */
@media (max-width:768px){

    header{
        flex-direction:column;
        padding:0.5rem 0;
    }

    header .logo{
        margin:0 auto 0.75rem;
    }

    header nav ul{
        flex-wrap:wrap;
        justify-content:center;
        gap:1rem;
    }

    header nav ul li{
        flex:0 1 calc(33.33% - 1rem);
        text-align:center;
    }

    header nav ul li:nth-child(n+4){
        flex-basis:calc(50% - 1rem);
    }

    header nav ul a{
        font-size:0.95rem;
    }
}

/* ----------  TABLET  (769 – 1024 px) ---------- */
@media (min-width:769px) and (max-width:1024px){
    header{
        padding:0.75rem 0;
    }
    header nav ul{
        gap:2rem;
    }
    header nav ul a{
        font-size:1.05rem;
    }
}

.btn-telegram {
  background-color: #00aaff;
  color: #fff;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0,136,204,0.5);
  margin-top: 140px;
}

.btn-telegram:hover {
  background-color: #0099dd;
  box-shadow:
    0 0 10px 3px var(--glow-green) inset,
    0 0 22px 6px var(--glow-green);
}

.glow-frame {
  display: inline-block;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 12px 3px #00ccff, 0 0 28px 8px #00ccff;
  margin: 24px auto 14px;
  transition: box-shadow 0.3s ease;
}

.glow-frame:hover {
  box-shadow: 0 0 12px 3px #00ff66, 0 0 28px 8px #00ff66;
}

.glow-frame .service-figure {
  display: block;
  max-width: 360px;
  width: 100%;
  border-radius: 12px;
}

.service-panel ul,
.service-points {
  list-style: none;
  padding-left: 0;
  margin: 10px auto;
  text-align: center;
}

/* ===== CONTACTO (FINAL ÚNICO) ===== */

/* Card centra el formulario */
#contact .card.glow{
  display:flex;
  justify-content:center;
}

/* Formulario en columna y ancho controlado */
#contact .contact-form{
  width:100%;
  max-width:650px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Los 3 primeros campos también en columna */
#contact .contact-form .form-row{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Inputs y selects: mismos tamaños (más FINOS) */
#contact .contact-form input[type="text"],
#contact .contact-form input[type="email"],
#contact .contact-form input[type="tel"],
#contact .contact-form select{
  width:100%;
  box-sizing:border-box;
  height:36px;            /* <- finito */
  padding:0.4rem 0.75rem; /* <- compacto */
  font-size:0.95rem;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.95);
  color:#111;
}

/* Flecha del select: igual que input */
#contact .contact-form select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, #333 50%),
                    linear-gradient(135deg, #333 50%, transparent 50%);
  background-position: calc(100% - 18px) 15px, calc(100% - 12px) 15px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Privacidad centrada (checkbox + texto) */
#contact .contact-form label.privacy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  color:#fff;
  text-align:center;
}

#contact .contact-form label.privacy input[type="checkbox"]{
  width:20px;
  height:20px;
  transform:scale(1.15);
  margin:0;
  accent-color: var(--primary);
}

/* Botón centrado */
#contact .contact-form button{
  align-self:center;
}

/* ===== REDUCCIÓN REAL DE ALTURA DE CAMPOS (OVERRIDE FINAL) ===== */

#contact .contact-form input[type="text"],
#contact .contact-form input[type="email"],
#contact .contact-form input[type="tel"],
#contact .contact-form select {
  height: 34px !important;          /* más fino */
  padding: 0 10px !important;       /* mata el padding grande */
  line-height: 34px !important;     /* centra texto vertical */
  font-size: 0.9rem !important;
}

/* Para evitar que los selects se vean gigantes en algunos navegadores */
#contact .contact-form select {
  line-height: normal !important;
}

/* ===== OVERRIDE DEFINITIVO TAMAÑO CAMPOS (NO depende de #contact) ===== */

form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form select{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  padding: 0 10px !important;     /* mata padding inflador */
  line-height: 34px !important;   /* centra texto vertical */
  font-size: 0.95rem !important;

  box-sizing: border-box !important;
}

/* En algunos navegadores, el select ignora line-height */
form.contact-form select{
  line-height: normal !important;
  padding-right: 32px !important;
}

/* ===== CONTACTO: igualar tamaño en MÓVIL (solo <=768px) ===== */
@media (max-width: 768px){
  form.contact-form input[type="text"],
  form.contact-form input[type="email"],
  form.contact-form input[type="tel"],
  form.contact-form select{
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
  }

  /* el select a veces necesita un pelín más de padding a la derecha */
  form.contact-form select{
    padding-right: 32px !important;
  }
}

/* ===== CONTACTO: compactar campos SOLO en móvil ===== */
@media (max-width: 768px){

  /* todos los selects y el input "empresa" (que es type=text) */
  form.contact-form select,
  form.contact-form input[name="empresa"]{
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    line-height: 34px !important;

    font-size: 16px !important; /* iPhone: evita zoom y tamaños raros */
    box-sizing: border-box !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* opcional: flecha del select y espacio a la derecha */
  form.contact-form select{
    padding-right: 34px !important;
    background-position: calc(100% - 18px) 15px, calc(100% - 12px) 15px !important;
  }
}

/* ===== SOLUCIÓN FINAL: Igualar TODOS los campos del formulario ===== */

@media (max-width: 1024px){
  
  /* Todos los inputs por NAME específico */
  #contact input[name="name"],
  #contact input[name="email"],
  #contact input[name="phone"],
  #contact input[name="empresa"],
  
  /* Todos los selects por NAME específico */
  #contact select[name="para_quien"],
  #contact select[name="empleados"],
  #contact select[name="puesto"],
  #contact select[name="situacion"],
  
  /* Y también por clase general (por si acaso) */
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select {
    
    /* Tamaño fijo */
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    
    /* Espaciado interno */
    padding: 0 12px !important;
    
    /* Texto */
    font-size: 16px !important;
    line-height: 44px !important;
    
    /* Ancho completo */
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Quitar estilos del navegador */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Estilo visual */
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.95) !important;
    color: #111 !important;
    margin: 0 !important;
  }
  
  /* Los SELECT necesitan ajuste extra */
  #contact select[name="para_quien"],
  #contact select[name="empleados"],
  #contact select[name="puesto"],
  #contact select[name="situacion"],
  .contact-form select {
    padding-right: 36px !important;
    line-height: normal !important;
    
    /* Flechita personalizada */
    background-color: rgba(255,255,255,.95) !important;
    background-image: linear-gradient(45deg, transparent 50%, #333 50%),
                      linear-gradient(135deg, #333 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) center, 
                         calc(100% - 12px) center !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
  }
  
  /* Asegurar que el checkbox NO se afecte */
  #contact input[type="checkbox"],
  .contact-form input[type="checkbox"] {
    height: auto !important;
    width: 20px !important;
    min-height: auto !important;
  }
}

/* ===== Permitir 2 líneas en selects largos (móvil/tablet) ===== */

@media (max-width: 1024px){
  
  #contact select[name="para_quien"],
  #contact select[name="situacion"],
  .contact-form select[name="para_quien"],
  .contact-form select[name="situacion"] {
    height: auto !important;           /* deja que crezca */
    min-height: 60px !important;       /* MÁS ALTO: de 44px a 60px */
    padding: 10px 36px 10px 10px !important; /* más espacio arriba/abajo */
    font-size: 14px !important;
    line-height: 1.4 !important;       /* más separación entre líneas */
    white-space: normal !important;    /* permite partir en 2 líneas */
    display: flex !important;          /* ayuda a centrar el texto */
    align-items: center !important;    /* centra verticalmente */
  }
  
  /* Si en móviles MUY pequeños aún se corta */
  @media (max-width: 380px){
    #contact select[name="para_quien"],
    #contact select[name="situacion"],
    .contact-form select[name="para_quien"],
    .contact-form select[name="situacion"] {
      min-height: 66px !important;     /* aún más alto en móviles chicos */
      font-size: 13px !important;      /* letra un poquito más pequeña */
    }
  }
}