/* ===================== 1) Variables y resets ===================== */
:root{
  --bg:#0b1220; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --c1:#00e5ff; --c2:#8b5cf6; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
  background:radial-gradient(1200px 800px at 10% 10%, #0f1b2f 0%, #0b1220 55%, #09101d 100%);
  color:var(--text);
  font:15px/1.6 system-ui,Inter,Roboto,Segoe UI,Arial,sans-serif;
}

/* ===================== 2) Tipografías ===================== */
@font-face{
  font-family:"OriginTech";
  /* Usa la que exista en tu deploy; deja ambas rutas por compat */
  src: url("/fonts/OriginTech%20personal%20use.ttf") format("truetype"),
       url("./fonts/OriginTech%20personal%20use.ttf") format("truetype");
  font-style:normal; font-weight:400; font-display:swap;
}
h1,h2,.Data,.Uno{font-family:"OriginTech",system-ui,sans-serif}

/* ===================== 3) Navbar + progreso ===================== */
.nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:16px;padding:10px 16px;
  backdrop-filter:blur(10px);
  background:#0b1220cc;border-bottom:1px solid #ffffff14;
}
.nav .brand{font-weight:800;letter-spacing:.5px;text-decoration:none;color:var(--text)}
.nav nav{margin-left:auto;display:flex;gap:12px}
.nav nav a{
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;
  transition:.2s background,.2s color;
}
.nav nav a:hover{background:#ffffff10;color:var(--text)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#ffffff10}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c1),var(--c2))}

/* ===================== 4) Hero con video ===================== */
.hero{position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(1.2)}
.hero__overlay{position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, #00e5ff22 0, transparent 40%),
    radial-gradient(circle at 70% 80%, #8b5cf622 0, transparent 45%);
}
.hero__content{position:relative;max-width:1000px;padding:clamp(16px,4vw,40px);text-align:center;z-index:1}
.hero h1{font-size:clamp(28px,6vw,56px);line-height:1.05;margin:0 0 12px;letter-spacing:.5px}
.hero h1 em{font-style:normal;color:var(--c1)}
.hero p{max-width:720px;margin:0 auto 20px;color:var(--muted)}
.hero__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:.2s transform,.2s filter}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(90deg,var(--c1),var(--c2));color:#0b1220}
.btn--ghost{background:#ffffff12;border-color:#ffffff22;color:var(--text)}

/* blob decor */
.blob{position:absolute;left:-14px;top:-8px;width:40px;height:40px;background:radial-gradient(circle at 30% 30%, var(--c1), var(--c2));filter:blur(6px);border-radius:50%;animation:blob 8s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes blob{to{transform:translate(14px,8px) scale(1.3)}}

/* ===================== 5) Secciones base / layout ===================== */
.wrap{max-width:1100px;margin:64px auto;padding:0 16px}
h2{font-size:clamp(22px,4vw,36px);margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}

/* Tarjetas modernas */
.card{
  background:linear-gradient(180deg,#0f1b2f 0,#0e1526 100%);
  border:1px solid #ffffff14;border-radius:16px;padding:16px;min-height:140px;
  box-shadow:0 8px 30px #0006;transition:.25s transform,.25s box-shadow;
}
.card:hover{transform:translateY(-4px) rotate3d(1,1,0,.6deg);box-shadow:0 16px 44px #0008}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}

/* ===================== 6) Bloques informativos (tus .caja24/.info) ===================== */
.caja24{
  max-width: 1000px; margin: 18px auto; padding: 20px; text-align:center;
  color:#fff; font-size:18px; border-radius:16px; border:1px solid #ffffff22;
  background:linear-gradient(180deg,#1a2a4a 0,#16243d 100%);
  box-shadow:0 8px 26px #0005;
}
.info{background:linear-gradient(90deg, #2b3e8f, #2563eb); color:#fff}
.contenedor-banner{padding:40px 16px;width:90%;max-width:1200px;margin:0 auto;text-align:center}
.titulo-banner{font-weight:700;font-size:clamp(20px,3.4vw,30px);margin-bottom:8px}

/* ===================== 7) Secciones legacy (compat con tu HTML) ===================== */
.wave-contenedor, .contenedor{
  width:90%;max-width:1000px;margin:45px auto;overflow:hidden;text-align:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transform: translateX(400%); transition: transform 1s ease;
}
.wave-contenedor:nth-last-of-type(even){transform: translateX(-400%)}
.wave-contenedor.show{transform: translateX(0)}
.wave-contenedor-1{
  width:min(800px,90%);margin:10px auto;padding:10px;border-radius:15px;border:1px solid #ffffff1f;text-align:center;background:#0f1b2f;
}
.contenedor-textos-main-1{width:85%;margin:0 auto;text-align:center}
.website{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.website img{width:min(480px,100%);border-radius:12px;border:1px solid #ffffff22}
.website .contenedor-textos-main{flex:1;min-width:260px}

/* Reutiliza estilos del primero para los nuevos */
.wave-contenedor-2, .wave-contenedor-3 { 
  width: 40%;
  max-width: 1200px;
  margin: 10px auto;
  padding: 0 0 10px 0;
  border-radius: 15px;
  border: 2px solid black;
  text-align: center;
  background:#0f1b2f; /* mismo fondo que -1 si lo usas */
}

.contenedor-textos-main-2,
.contenedor-textos-main-3 {
  width: 85%;
  margin: 0 auto;
  text-align: center;
}

/* ===================== 8) Cards antiguas (servicios) mejoradas ===================== */
.content-cards{display:flex;width:100%;justify-content:space-evenly;flex-wrap:wrap;gap:16px}
.cards .card{
  width:min(330px,100%);height:auto;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px
}
.cards .card i{margin:10px 0 12px;font-size:46px;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cards .card p{font-size:16px}

/* ===================== 9) Footer ===================== */
footer{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background-image:
    linear-gradient(8deg, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 213, 255, 0.35) 150%),
    url("../imagenes/placa2.jpg");
  background-repeat:no-repeat;background-size:cover;background-attachment:fixed;
  width:100%; min-height:260px; overflow:hidden; padding:20px 12px; gap:12px;
}
.contenedor-iconos-redes{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:8px 0}
.icono-social{
  height:50px;width:50px;border-radius:50%;border:1px solid #9fb3c7;
  background-position:center;background-size:40%;background-repeat:no-repeat;filter:drop-shadow(0 2px 6px #000a);
}
.icono-social:hover{background-color:#000;filter:invert(1)}
.icono-social:nth-of-type(1){background-image:url(../imagenes/FacebookBlanco.png)}
.icono-social:nth-of-type(2){background-image:url(../imagenes/InstagramBlanco.png)}
.icono-social:nth-of-type(3){background-image:url(../imagenes/w_blanco.png)}
.contenedor-menu-footer{display:flex;list-style:none;gap:16px;color:white;font-size:16px;flex-wrap:wrap;justify-content:center}
.menu-item{opacity:.7;cursor:pointer}
.menu-item:hover{opacity:1}
.copyright{color:#e5e7eb;opacity:.5;text-align:center;font-size:13px}

/* ===================== 10) Mapa + formulario ===================== */
.map-form{display:flex;gap:16px;margin:0 auto;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.mapa{
  margin:0; width:min(600px,90vw); height:420px; border:1px solid #ffffff22; border-radius:12px;
  box-shadow:0 8px 20px #0006;
}
.formulario-static{text-align:center}
.formulario-static .titulo-sup{font-size:clamp(20px,3.4vw,28px);margin:10px 0 12px}
#wrapper{
  margin: 0; padding: 18px;
  background: linear-gradient(180deg,#0f1b2f 0,#0e1526 100%);
  font-size: 14px; width:min(500px,90vw);
  border:1px solid #ffffff22;border-radius:12px; box-shadow:0 8px 20px #0006;
}
label{display:block;font-size:14px;padding:10px 0 6px;color:#d1d5db;text-transform:uppercase;letter-spacing:.4px}
input, textarea{
  width:100%; padding:14px 12px; border-radius:10px; border:1px solid #ffffff1f;
  background:#0b1426; color:#e5e7eb; outline:none;
  box-shadow: inset 0 0 0 rgba(0,0,0,0);
  transition:.2s border,.2s box-shadow;
}
input:focus, textarea:focus{border-color:#4f46e5; box-shadow:0 0 0 3px #4f46e522}
textarea{min-height:120px;resize:vertical}
input#submit{
  margin-top:12px; height:46px; cursor:pointer; font-weight:700; text-transform:uppercase;
  background:linear-gradient(90deg,var(--c1),var(--c2)); color:#0b1220; border:0;
  box-shadow:0 8px 20px #0006; transition:.2s transform,.2s opacity;
}
input#submit:hover{transform:translateY(-1px)}
input#submit:active{transform:translateY(0);opacity:.9}

/* ===================== 11) FAB WhatsApp + Confetti ===================== */
.wa-fab{
  position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,#25D366,#00e5ff);
  color:#0b1220;font-size:22px;text-decoration:none;border:1px solid #ffffff44;box-shadow:0 10px 30px #0008;z-index:50;transition:.2s transform;
}
.wa-fab:hover{transform:translateY(-2px) scale(1.03)}

.conf{
  position:fixed;top:20vh;left:50%;width:8px;height:12px;
  background:linear-gradient(180deg,var(--c1),var(--c2));border-radius:3px;animation:pop .9s ease forwards
}



/* ==== HERO NUEVO ==== */
.hero {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.35) saturate(1.2);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, #00e5ff22 0, transparent 40%),
              radial-gradient(circle at 70% 80%, #8b5cf622 0, transparent 45%);
}
.hero__logo {
  position: absolute;
  inset: auto 0 55%;
  margin-inline: auto;
  width: min(50vw, 360px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
  z-index: 2;
}
.hero__content {
  position: relative;
  max-width: 900px;
  padding: clamp(16px,4vw,40px);
  text-align: center;
  z-index: 1;
}
.hero__content h1 {
  font-family: "OriginTech", system-ui, sans-serif;
  font-size: clamp(28px,6vw,56px);
  line-height: 1.1;
  margin: 0 0 12px;
}
.hero__content h1 em { color: var(--c1); font-style: normal; }
.hero__content p {
  max-width: 680px;
  margin: 0 auto 20px;
  color: var(--muted);
}
.hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==== IMÁGENES DE SERVICIOS ==== */
.card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 10px;
  object-fit: cover;
  max-height: 180px;
}

/* ==== BANNER CON FONDO FOTO ==== */
.banner-bg {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 0;
}
.banner-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../imagenes/placa.jpeg") center/cover no-repeat fixed;
  filter: brightness(.45) saturate(1.1);
}
.banner-bg .contenedor-banner {
  position: relative;
}

/* ==== FOOTER LOGO ==== */
footer .logo {
  height: 90px;
  margin-bottom: 1rem;
}

@keyframes pop{to{transform:translate(var(--tx),var(--ty)) rotate(720deg);opacity:0}}

/* ===================== 12) Responsivo ===================== */
@media (max-width: 800px){
  .mapa{height:360px}
  .wrap{margin:44px auto}
  .cards .card p{font-size:15px}
}
@media (max-width: 400px){
  .hero__content{padding:20px 14px}
  .mapa{height:320px}
}


/* ===== Hero: banner de bienvenida que se colapsa ===== */
.hero { position:relative; min-height:78vh; display:grid; place-items:center; overflow:hidden }
.hero--banner .hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero--banner .hero__overlay { position:absolute; inset:0; background:radial-gradient(850px 850px at 50% 40%, #00e5ff22 0, transparent 40%), radial-gradient(950px 950px at 70% 70%, #8b5cf622 0, transparent 45%); }
.hero__logo { position:absolute; inset:auto 0 55%; margin-inline:auto; width:min(50vw,360px); height:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.6)); z-index:2 }
.hero--compact { min-height:42vh }
.hero--compact .hero__bg { opacity:0; transition:opacity .6s ease }
.hero--compact .hero__logo { inset:auto 0 68% }
.hero--compact .hero__overlay { background:linear-gradient(180deg, #0f1b2f 0%, #0b1220 100%) }

/* suaviza el texto mientras corre el video */
.hero--banner .hero__content { text-shadow: 0 2px 22px #000b }

/* ===== Reviews ordenadas ===== */
.reviews h2 { margin-bottom: 10px }
.reviews__grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:14px; align-items:stretch;
}
.review {
  background:linear-gradient(180deg,#0f1b2f 0,#0e1526 100%);
  border:1px solid #ffffff1a; border-radius:14px; padding:16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 8px 22px #0006;
}
.review__stars { font-size:18px; letter-spacing:2px; color:#ffd24d }
.review__text { color:#d1d5db; line-height:1.5; flex:1 }
.review__meta { color:#9ca3af; font-size:13px }
.reviews__more { margin-top:14px; background:#ffffff0a; border:1px solid #ffffff14; border-radius:12px; padding:10px }
.reviews__more > summary { cursor:pointer; font-weight:700 }
.reviews__more[open] { background:#ffffff14 }

/* opcional: resalta link activo de navbar */
.nav a.is-active { color:var(--text); background:#ffffff10 }

.hero__bg{ object-position:center; }
@media (max-width: 900px){
  .hero__bg{ object-position:50% 40%; }
}

/* ===== Fixes de scroll/ancho ===== */
html, body { overflow-x: hidden; }

/* Quita el reveal lateral heredado que empujaba fuera de pantalla */
.wave-contenedor,
.wave-contenedor.show,
.wave-contenedor:nth-last-of-type(even) {
  transform: none !important;
}

/* Hero sin <br>: da aire con padding */
.hero__content { padding-block: clamp(20px, 6vh, 64px); }

/* Unifica estilo de los títulos Intro 1/2/3 */
.wave-contenedor-1,
.wave-contenedor-2,
.wave-contenedor-3 {
  width: min(900px, 92%);
  max-width: 900px;
  margin: 28px auto 8px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid #ffffff14;       /* más sutil */
  background: #0f1b2f;               /* o 'transparent' si prefieres */
  text-align: center;
}

/* Contenedores de texto de los títulos 1/2/3 */
.contenedor-textos-main-1,
.contenedor-textos-main-2,
.contenedor-textos-main-3 {
  width: 100%;
  margin: 0 auto;
  padding: 12px 14px;
}

/* Cajas de texto (caja24) debajo de cada título */
.caja24.wave-contenedor.info {
  width: min(900px, 92%);
  max-width: 900px;
  margin: 10px auto 26px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid #5878ca44;       /* suavizado */
  background: linear-gradient(180deg,#3557c8,#3f64e0);
  color: #fff;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Evita que 'website' obligue layout en fila en estas secciones de título */
.wave-contenedor-1.website,
.wave-contenedor-2.website,
.wave-contenedor-3.website { display: block; }

/* Imagen de soporte y otras secciones siguen funcionando */
.hero__bg{ object-position:center; }
@media (max-width: 900px){
  .hero__bg{ object-position:50% 40%; }
}

.wave-contenedor { transform: translateX(400%); }
.wave-contenedor:nth-last-of-type(even){ transform: translateX(-400%); }