/* ============================================================
   INITIA  HOJA DE ESTILOS UNICA (v16)
   Un solo archivo para las 4 paginas. Editalo una vez
   y el cambio se aplica en todo el sitio.
   ============================================================ */

/* ------------------------------------------------------------
   1. TIPOGRAFIA  CAMBIA LAS FUENTES AQUI Y EN NADA MAS
   Estas dos lineas controlan TODO el texto del sitio.
   Si cambias de fuente, cambia tambien el <link> del <head>
   en los 4 archivos HTML.
   ------------------------------------------------------------ */
/*    LOS COLORES Y LAS FUENTES **NO** ESTAN AQUI.
    Estan al FINAL de este archivo, en la seccion "AJUSTES RAPIDOS".
    Baja hasta abajo del todo.                                      */
:root{
  --surface:#141b23;
  --surface2:#1a222c;
  --nav-h:72px;
}

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

html{scroll-behavior:smooth;width:100%;-webkit-text-size-adjust:100%}
body{
  background:var(--fondo);color:var(--text);
  font-family:var(--font-texto);
  font-size:16px;line-height:1.65;font-weight:400;
  overflow-x:hidden;width:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
/* Todos los titulos grandes toman su color de --titulo (arriba).
   Las palabras con degradado animado NO se ven afectadas. */
h1,h2,h3,.titulo{
  font-family:var(--font-titulo);font-weight:600;letter-spacing:-.02em;
  color:var(--titulo)
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- utilidades ---------- */
.contenedor{max-width:1200px;margin:0 auto;width:100%}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{50%{opacity:0}}
@keyframes textShine{0%{background-position:0% center}100%{background-position:100% center}}
@keyframes aurora-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.degradado{
  background:linear-gradient(90deg,#d4ff00,#00c8ff);background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textShine 2.5s ease-in-out infinite alternate
}
.degradado-inv{
  background:linear-gradient(90deg,#00c8ff,#d4ff00);background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textShine 2.5s ease-in-out infinite alternate
}

/* ============================================================
   2. NAVEGACION  compartida por las 4 paginas
   ============================================================ */
/* ============================================================
   BARRA SUPERIOR
   LINEA DEL COLOR Y LA OPACIDAD: la que dice "background:" aqui abajo.
   Los primeros tres numeros son el color (R,G,B) y el cuarto
   es la opacidad: 0 = transparente, 1 = solido.
   El blur es el desenfoque de lo que pasa por detras.
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 48px;display:flex;align-items:center;
  background:rgba(15, 20, 26, 0.25);   /* <<< COLOR Y OPACIDAD DE LA BARRA */
  backdrop-filter:blur(14px);          /* <<< DESENFOQUE DEL FONDO */
  border-bottom:1px solid transparent;transition:border-color .3s,padding .3s
}
/* El menu se ancla al centro de la pantalla: no importa que tan
   ancho sea el logo, siempre queda centrado. */
nav .nav-links{
  position:absolute;left:50%;transform:translateX(-50%);
  top:50%;margin-top:-1px;
  translate:0 -50%
}
nav.scrolled{border-bottom-color:var(--border);padding:12px 48px}
/* Respaldo: si initia_logo_green.png no carga, aparece el nombre en texto
   en vez de un icono roto. */
.logo-fallback,.footer-logo-fallback{
  font-family:var(--font-titulo);font-weight:600;font-size:21px;
  letter-spacing:-.5px;color:var(--text);white-space:nowrap
}
.logo-fallback span,.footer-logo-fallback span{color:var(--accent)}
.footer-logo-fallback{font-size:19px}

.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:34px;width:auto;transition:opacity .25s,transform .25s}
.logo:hover img{opacity:.82;transform:translateY(-1px)}
nav.scrolled .logo img{height:30px}

.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:400;
  position:relative;padding:4px 0;transition:color .25s
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--accent);transition:width .3s cubic-bezier(.2,.8,.2,1)
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--text);font-weight:500}
.nav-links a.active::after{width:100%}

.nav-cta{
  font-family:var(--font-titulo)!important;font-weight:600!important;font-size:14px!important;
  padding:11px 24px;border-radius:7px;text-decoration:none;color:#000!important;
  background:linear-gradient(90deg,#d4ff00,#00c8ff,#d4ff00);background-size:200% auto;
  animation:textShine 2.5s ease-in-out infinite alternate;
  transition:transform .2s,box-shadow .2s;white-space:nowrap
}
.nav-cta::after{display:none!important}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(212,255,0,.4)}

/* boton hamburguesa */
.nav-burger{
  display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:9px;
  background:transparent;cursor:pointer;position:relative;flex-shrink:0
}
.nav-burger span{
  position:absolute;left:11px;width:18px;height:1.6px;background:var(--text);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s
}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:20px}
.nav-burger span:nth-child(3){top:26px}
.nav-burger.abierto span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.abierto span:nth-child(2){opacity:0}
.nav-burger.abierto span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   3. PORTADA (solo index)
   ============================================================ */
/* ALTURA DE LA PORTADA
   clamp(minimo, lo ideal, maximo):
   - en pantallas bajas usa 620px para que no se apachurre
   - en pantallas normales llena justo la pantalla
   - en monitores verticales se topa en 1000px para no dejar un hueco enorme
   Si la quieres mas alta o mas baja, cambia esos tres numeros. */
.hero{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(620px, 100svh, 1000px);
  padding:calc(var(--nav-h) + 28px) 48px 50px
}
.hero-inner{display:inline-flex;align-items:center;gap:72px}
.hero-content{max-width:520px;text-align:right;flex-shrink:0}
h1{
  font-size:clamp(36px,5.2vw,62px);line-height:1.04;letter-spacing:-.03em;
  margin-bottom:20px;opacity:0;animation:fadeUp .7s ease forwards .2s
}
/* margin-left:auto pega el parrafo al mismo borde derecho que el titular */
.hero-sub{
  font-size:17.5px;color:var(--muted);max-width:470px;margin:0 0 28px auto;
  line-height:1.7;font-weight:400;opacity:0;animation:fadeUp .7s ease forwards .4s
}
.hero-acciones{display:flex;gap:14px;justify-content:flex-end;opacity:0;animation:fadeUp .7s ease forwards .6s}

/* botones generales */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:8px;
  text-decoration:none;font-family:var(--font-titulo);font-weight:600;font-size:15.5px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .3s,background .3s
}
.btn-lleno{background:var(--accent);color:#000}
.btn-lleno:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,255,0,.3)}
/* Boton con el degradado que se mueve */
.btn-brillo{
  color:#090d12;
  background:linear-gradient(90deg,#d4ff00,#00c8ff,#d4ff00);
  background-size:200% auto;
  animation:textShine 2.5s ease-in-out infinite alternate
}
.btn-brillo:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,255,0,.34)}
.btn-linea{border:1.5px solid var(--border);color:var(--text)}
.btn-linea:hover{border-color:rgba(212,255,0,.6);color:var(--accent);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ---------- simulador de WhatsApp ---------- */
.hero-mockup{flex-shrink:0;opacity:0;animation:fadeUp .9s ease forwards .8s}
.iphone-chasis{
  width:285px;height:590px;background:#232a33;border-radius:48px;padding:9px;position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.04)
}
.dynamic-island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:26px;background:#0a0d11;border-radius:20px;z-index:10}
/* ============================================================
   TIPOGRAFIA DEL CHAT
   Usa la fuente del sistema: en iPhone y Mac sale San Francisco,
   que es la real de Apple. En Windows y Android cae a la mas
   parecida que tenga el equipo.
   ============================================================ */
.wa-screen, .wa-screen *{
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
              'Segoe UI', 'Helvetica Neue', Roboto, sans-serif;
  letter-spacing:-.01em
}
.wa-screen{
  /* Fondo original de WhatsApp. Descarga la imagen y subela a tu servidor
     como wa-fondo.png, luego cambia la URL por ./wa-fondo.png */
  width:100%;height:100%;
  background:#efe7de url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
  border-radius:40px;overflow:hidden;display:flex;flex-direction:column
}
.wa-header{background:#f6f6f6;padding:44px 12px 10px;display:flex;align-items:center;gap:8px;border-bottom:.5px solid #ddd;flex-shrink:0}
.wa-back{color:#007aff;font-size:20px;font-weight:300;line-height:1}
/* Avatar del chat: el logo queda centrado dentro del circulo.
   El padding es el aire alrededor del logo; subelo o bajalo a gusto. */
.wa-avatar{
  width:32px;height:32px;border-radius:50%;background:#0f141a;
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;padding:0
}
.wa-avatar img{
  width:100%;height:100%;object-fit:contain;
  padding:5px;box-sizing:border-box;display:block
}
.wa-contact-info{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.25}
.wa-contact-info b{display:block;font-size:13px;color:#000;letter-spacing:-.3px;font-weight:600}
.wa-contact-info span{font-size:9.5px;color:#4caf50;font-weight:500}
.chat-body{flex:1;padding:10px 10px 6px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:none;min-height:0}
.chat-body::-webkit-scrollbar{display:none}
.bubble{max-width:82%;padding:7px 11px;font-size:11.5px;border-radius:14px;line-height:1.4;color:#111;text-align:left;flex-shrink:0}
.bubble.in{background:#fff;align-self:flex-start;border-top-left-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bubble.out{background:#e2ffc7;align-self:flex-end;border-top-right-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chat-menu{align-self:flex-start;background:#fff;border-radius:14px;border-top-left-radius:3px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08);max-width:90%;flex-shrink:0}
.chat-menu-title{font-size:11px;font-weight:600;color:#333;padding:8px 11px 4px}
.chat-menu-opt{display:flex;align-items:center;gap:7px;padding:7px 11px;font-size:10.5px;color:#222;cursor:pointer;transition:background .15s;border-top:.5px solid #f0f0f0;text-decoration:none}
.chat-menu-opt:hover{background:#f5fff0}
.opt-emoji{font-size:14px;flex-shrink:0;line-height:1}
.chat-menu-opt.probar{background:#f0fff5;font-weight:600}
.wa-footer-static{background:#f6f6f6;padding:7px 10px 22px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.plus-icon{color:#007aff;font-size:22px;font-weight:300;flex-shrink:0}
.fake-input{flex:1;background:#fff;height:30px;border-radius:20px;border:.5px solid #ddd;display:flex;align-items:center;padding-left:10px}
.cursor-blink{width:1.5px;height:15px;background:#007aff;animation:blink 1s infinite}
.mic-icon{color:#555;display:flex;align-items:center;flex-shrink:0}
.typing-bubble{align-self:flex-start;background:#fff;border-radius:14px;border-top-left-radius:3px;padding:9px 12px;display:flex;gap:4px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.typing-bubble i{width:5.5px;height:5.5px;border-radius:50%;background:#9aa5ad;animation:typeDot 1.3s infinite}
.typing-bubble i:nth-child(2){animation-delay:.18s}
.typing-bubble i:nth-child(3){animation-delay:.36s}
@keyframes typeDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.msg-time{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:7.5px;color:#667781;margin-top:2px;line-height:1}
.msg-time svg{width:11px;height:11px;fill:#53bdeb;flex-shrink:0}
.back-btn{display:flex;align-items:center;gap:6px;margin-top:4px;padding:6px 11px;background:#fff;border-radius:14px;border-top-left-radius:3px;font-size:10px;color:#007aff;cursor:pointer;align-self:flex-start;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08);flex-shrink:0}
.back-btn:hover{background:#f0f8ff}

/* ============================================================
   3b. FONDO ANIMADO DE LA PORTADA
   Solo cubre esta seccion: termina justo donde empieza
   "Esto nos lo dicen todos los dias".
   Para quitarlo: borra el <canvas id="fondo"> del index.html
   ============================================================ */
.hero{position:relative}
/* HASTA DONDE BAJA LA ANIMACION
   Los 20px son lo que se extiende por debajo de la portada.
   Termina justo arriba de "Esto nos lo dicen todos los dias".
   Subelo (60, 100...) para que baje mas; ponlo en 0 para que
   corte exacto donde acaba la portada. */
#fondo{
  position:absolute;top:0;left:0;width:100%;
  /* --fondo-extra lo calcula solo el JavaScript segun la pantalla.
     Los 20px son el respaldo por si el JS no corre. */
  height:calc(100% + var(--fondo-extra, 20px));
  z-index:0;pointer-events:none;display:block
}
/* Se desvanece abajo para unirse con la siguiente seccion.
   Si cambias los 20px de arriba, cambia tambien el -20px de aqui. */
.hero::before{
  content:'';position:absolute;left:0;right:0;bottom:calc(-1 * var(--fondo-extra, 20px));height:190px;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--fondo) 78%)
}
/* Velo: oscurece detras del texto para que siempre se lea */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 50%,
             rgba(15,20,26,.82) 0%, rgba(15,20,26,.50) 48%, transparent 80%)
}
.hero-inner{position:relative;z-index:2}
/* la franja queda por encima del desvanecido del fondo */
.franja{position:relative;z-index:2}

/* ============================================================
   4. ENCABEZADO DE PAGINA (servicios / negocios / contacto)
   ============================================================ */
.page-head{padding:calc(var(--nav-h) + 80px) 48px 60px;text-align:center}
.page-head .eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;
  border:1px solid var(--border);background:rgba(212,255,0,.04);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:24px;font-weight:500
}
.page-head .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulso 2s infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(212,255,0,.5)}50%{box-shadow:0 0 0 7px rgba(212,255,0,0)}}
.page-head h1{
  font-size:clamp(34px,5vw,58px);line-height:1.06;letter-spacing:-.03em;
  margin:0 auto 22px;max-width:850px;opacity:1;animation:none
}
.page-head p{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto;line-height:1.7}

/* ============================================================
   5. FRANJA DE FRASES
   ============================================================ */
.franja{padding:10px 0 80px;overflow:hidden}
.franja-head{text-align:center;max-width:720px;margin:0 auto 38px;padding:0 24px}
.franja-head h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.franja-head p{color:var(--muted);font-size:16px;line-height:1.7}
.franja-mask{
  /* Mismo ancho y mismo desvanecido que el carrusel de "Lo que cambia en tu dia",
     para que las frases se borren en los bordes y no crucen la pantalla completa. */
  width:100%;max-width:1100px;margin:0 auto;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%)
}
.franja-track{display:flex;width:max-content;animation:franjaSlide 55s linear infinite}
@keyframes franjaSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.franja-item{
  display:flex;align-items:center;gap:12px;padding:0 26px;flex-shrink:0;
  font-size:16px;color:#7d8793;white-space:nowrap;font-style:italic;transition:color .3s
}
.franja-item:hover{color:#cdd4da}
.franja-item::before{content:'';width:5px;height:5px;border-radius:50%;background:rgba(212,255,0,.45);flex-shrink:0;font-style:normal}

/* ============================================================
   6. BLOQUE DE TEXTO CENTRADO
   ============================================================ */
.mid-section{padding:20px 48px 80px;text-align:center}
.mid-inner{max-width:800px;margin:0 auto}
.mid-h2{font-size:clamp(32px,4.5vw,54px);line-height:1.1;letter-spacing:-.03em;margin-bottom:26px}
.mid-p{font-size:17.5px;color:var(--muted);line-height:1.8}

/* ============================================================
   7. METRICAS
   ============================================================ */
.metrics-section{padding:0 48px 90px}
.metrics-grid{
  max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden
}
.metric{background:var(--fondo-carta);padding:38px 20px;text-align:center;position:relative;overflow:hidden}
.metric::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .6s
}
.metric.counted::before{opacity:.6}
.metric-num{
  font-family:var(--font-titulo);font-weight:600;font-size:clamp(34px,4vw,46px);
  line-height:1;letter-spacing:-.04em;margin-bottom:10px
}
.metric-label{font-size:13px;color:#777;line-height:1.5}

/* ============================================================
   8. TARJETAS DE SERVICIO
   ============================================================ */
.services-section{padding:0 48px 90px}
.services-inner{max-width:1200px;margin:0 auto}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:16px;overflow:hidden
}
.service-card{
  background:var(--fondo-carta);padding:44px 32px;position:relative;overflow:hidden;text-align:center;
  opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease,background .3s
}
.service-card.visible{opacity:1;transform:translateY(0)}
.service-card:hover{background:var(--surface)}
.service-card::after{
  content:'';position:absolute;bottom:0;left:-100%;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent)
}
.service-card.bar-anim::after{animation:barRun 1.6s ease forwards}
@keyframes barRun{0%{left:-100%}100%{left:100%}}
.service-icon{
  width:58px;height:58px;background:rgba(212,255,0,.08);border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px
}
.service-title{font-family:var(--font-titulo);font-weight:600;font-size:18px;margin-bottom:10px;color:var(--text);letter-spacing:-.01em}
.service-desc{font-size:14px;color:#6e6e6e;line-height:1.65}

/* ============================================================
   9. ORBITA DE NEGOCIOS
   ============================================================ */
.section-title{font-size:clamp(28px,3.5vw,42px);letter-spacing:-.03em;line-height:1.12;margin-bottom:16px}
.section-sub{color:var(--muted);font-size:16px;max-width:520px;line-height:1.7}
.orbit-section{padding:40px 48px 120px;text-align:center}
.orbit-header{max-width:620px;margin:0 auto 80px;text-align:center}
.orbit-header .section-sub{margin:0 auto}
.orbit-wrapper{display:flex;justify-content:center;align-items:flex-start;width:100%}
.orbit-container{position:relative;width:800px;height:800px;flex-shrink:0;overflow:visible}
.orbit-ring{position:absolute;inset:0}
@keyframes orbitItem{
  from{transform:rotate(var(--a)) translateY(-320px) rotate(calc(-1*var(--a)))}
  to  {transform:rotate(calc(var(--a) + 360deg)) translateY(-320px) rotate(calc(-1*(var(--a) + 360deg)))}
}
.orbit-item{
  position:absolute;left:50%;top:50%;margin-left:-68px;margin-top:-68px;
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;z-index:3;
  animation:orbitItem 18s linear infinite;transform-origin:68px 68px
}
.orbit-item-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.oi-0{--a:0deg}  .oi-1{--a:45deg} .oi-2{--a:90deg}  .oi-3{--a:135deg}
.oi-4{--a:180deg}.oi-5{--a:225deg}.oi-6{--a:270deg} .oi-7{--a:315deg}
.orbit-label{font-family:var(--font-titulo);font-weight:600;font-size:16px;color:var(--text);white-space:nowrap}
.orbit-sub{font-size:13px;color:var(--muted);white-space:nowrap}
.orbit-icon-wrap{
  width:136px;height:136px;background:var(--surface2);border:1px solid var(--border);border-radius:32px;
  display:flex;align-items:center;justify-content:center;font-size:56px;
  position:relative;overflow:hidden;transition:transform .25s,border-color .3s
}
.orbit-icon-wrap::before{
  content:'';position:absolute;inset:0;border-radius:30px;
  background:linear-gradient(135deg,#d4ff00 0%,#00c8ff 50%,#d4ff00 100%);background-size:200% auto;
  opacity:0;transition:opacity .4s ease;animation:textShine 2.5s ease-in-out infinite alternate;z-index:0
}
.orbit-item:hover .orbit-icon-wrap::before,
.orbit-item.active-touch .orbit-icon-wrap::before{opacity:.85}
.orbit-item:hover .orbit-icon-wrap,
.orbit-item.active-touch .orbit-icon-wrap{transform:scale(1.15);border-color:rgba(212,255,0,.6)}
.orbit-icon-wrap > *{position:relative;z-index:2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}

/* ============================================================
   10. TARJETAS AURORA
   ============================================================ */
.aurora-section{padding:40px 48px 90px;text-align:center}
.aurora-section-title{font-size:clamp(28px,3.5vw,46px);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;color:var(--titulo)}
.aurora-section-sub{font-size:16.5px;color:var(--muted);margin-bottom:60px}
.aurora-card{
  position:relative;padding:2px;border-radius:20px;background:var(--fondo-alto);overflow:hidden;display:flex;
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s
}
.aurora-card::before{
  content:'';position:absolute;width:200%;height:200%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 140deg,
    rgba(0,200,255,.15) 175deg,rgba(0,200,255,.6) 215deg,rgba(212,255,0,1) 250deg,
    rgba(0,200,255,.6) 285deg,rgba(0,200,255,.15) 320deg,transparent 355deg,transparent 360deg);
  top:-50%;left:-50%;animation:aurora-rotate 5s linear infinite;filter:blur(12px)
}
.aurora-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(212,255,0,.12)}
.aurora-card:hover::before{animation-duration:2.5s}
.aurora-inner{
  position:relative;width:100%;background:var(--fondo-carta);padding:38px 30px;border-radius:18px;z-index:5;
  display:flex;flex-direction:column;text-align:left
}
.aurora-label{font-family:var(--font-titulo);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#ccff00;margin-bottom:12px}
.aurora-tagline{font-family:var(--font-titulo);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.25;color:#fff;margin-bottom:16px}
.aurora-desc{font-size:14.5px;line-height:1.75;color:#8a8a8a;margin:0}
.aurora-carousel-fade{
  width:100%;max-width:1100px;margin:0 auto;overflow:hidden;padding:20px 0;
  -webkit-mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%)
}
.aurora-carousel-wrap{width:100%;overflow:visible}
.aurora-carousel-track{display:flex;gap:28px;will-change:transform}
.aurora-carousel-track .aurora-card{width:320px;flex-shrink:0}

/* ============================================================
   11. PASOS
   ============================================================ */
.steps-section{padding:40px 48px 100px;text-align:center}
.steps-section-title{font-size:clamp(28px,3.5vw,46px);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;color:var(--titulo)}
.steps-section-sub{font-size:16.5px;color:var(--muted);margin-bottom:72px}
.steps-grid{display:flex;flex-direction:column;gap:32px;max-width:540px;margin:0 auto;align-items:stretch}
.step-card{
  position:relative;padding:2px;border-radius:20px;background:rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  opacity:0;transform:translateX(-60px);transition:opacity 1s ease,transform 1s ease
}
.step-card.from-right{transform:translateX(60px)}
.step-card.visible{opacity:1;transform:translateX(0)}
.step-card-inner{width:100%;background:var(--fondo-carta);border-radius:18px;padding:42px 30px 38px;display:flex;flex-direction:column;align-items:center;text-align:center}
.step-num{
  font-family:var(--font-titulo);font-weight:600;font-size:12px;letter-spacing:.2em;
  color:#555;margin-bottom:18px;text-transform:uppercase
}
.step-title{font-family:var(--font-titulo);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.25;margin-bottom:14px;color:#fff}
.step-desc{font-size:14.5px;line-height:1.75;color:#8a8a8a;margin:0}
.step-icon{
  position:relative;width:110px;height:110px;flex-shrink:0;padding:2.5px;border-radius:50%;
  background:var(--fondo-alto);overflow:hidden;display:flex;justify-content:center;align-items:center;margin-bottom:26px
}
.step-icon::before{
  content:'';position:absolute;width:180%;height:180%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 150deg,
    rgba(0,200,255,.2) 190deg,#00c8ff 240deg,#d4ff00 270deg,#00c8ff 300deg,
    rgba(0,200,255,.2) 340deg,transparent 360deg);
  animation:aurora-rotate 3s linear infinite;filter:blur(5px)
}
.step-icon-inner{
  position:relative;width:100%;height:100%;background:var(--fondo-carta);border-radius:50%;z-index:2;
  display:flex;justify-content:center;align-items:center;box-shadow:inset 0 0 16px rgba(212,255,0,.1)
}
.step-icon-inner svg{width:45%;height:45%;animation:svgColorShift 3s ease-in-out infinite alternate}
@keyframes svgColorShift{
  0%{filter:drop-shadow(0 0 8px #d4ff00);color:#d4ff00}
  100%{filter:drop-shadow(0 0 8px #00c8ff);color:#00c8ff}
}

/* ============================================================
   12. LLAMADA FINAL
   ============================================================ */
.cta-section{padding:120px 48px;text-align:center}
.cta-section h2{font-size:clamp(34px,4.5vw,54px);letter-spacing:-.03em;line-height:1.08;margin-bottom:20px}
.cta-section p{color:var(--muted);font-size:17px;margin-bottom:46px}
/* Mismo degradado animado que el boton "Probarlo ahora" de la portada */
.btn-cta{
  display:inline-flex;align-items:center;gap:12px;padding:18px 40px;border-radius:9px;
  text-decoration:none;border:none;
  background:linear-gradient(90deg,#d4ff00,#00c8ff,#d4ff00);
  background-size:200% auto;
  animation:textShine 2.5s ease-in-out infinite alternate;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,255,0,.34)}
.btn-cta svg{fill:#090d12;width:24px;height:24px;flex-shrink:0}

/* Variante negra  la usa el boton del final de la pagina.
   Para que un boton sea negro, agregale la clase btn-cta--negro. */
.btn-cta--negro{
  background:#000;
  border:1.5px solid rgba(212,255,0,.3);
  animation:none
}
.btn-cta--negro:hover{
  border-color:rgba(212,255,0,.7);
  box-shadow:0 12px 34px rgba(212,255,0,.14)
}
.btn-cta--negro .btn-cta-text{
  background:linear-gradient(90deg,#d4ff00,#00c8ff);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textShine 2.5s ease-in-out infinite alternate
}
.btn-cta-text{
  font-family:var(--font-titulo);font-weight:600;font-size:20px;letter-spacing:-.02em;
  color:#090d12
}

/* tarjetas de contacto */
.contacto-grid{
  max-width:900px;margin:0 auto 70px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.contacto-card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:34px 26px;
  text-align:center;transition:border-color .3s,transform .3s,background .3s;text-decoration:none;display:block
}
.contacto-card:hover{border-color:rgba(212,255,0,.35);transform:translateY(-4px);background:var(--fondo-alto)}
.contacto-ico{
  width:52px;height:52px;margin:0 auto 18px;border-radius:14px;background:rgba(212,255,0,.08);
  display:flex;align-items:center;justify-content:center;font-size:24px
}
.contacto-card h3{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--text)}
.contacto-card p{font-size:14px;color:#6e6e6e;line-height:1.6;margin:0}
.contacto-card strong{color:var(--accent);font-weight:500}

/* ============================================================
   12b. PAGINAS LEGALES (aviso de privacidad y terminos)
   ============================================================ */
.legal{max-width:820px;margin:0 auto;padding:0 48px 100px}
.legal h2{
  font-size:clamp(21px,2.4vw,27px);letter-spacing:-.02em;line-height:1.25;
  margin:52px 0 16px;padding-top:28px;border-top:1px solid var(--border);color:var(--text)
}
.legal h2:first-child{margin-top:0;border-top:none;padding-top:0}
.legal h3{font-size:18px;margin:32px 0 12px;color:#cfd6dd;letter-spacing:-.01em}
.legal p{font-size:15.5px;line-height:1.85;color:#9aa4ae;margin-bottom:16px}
.legal ul{margin:0 0 18px 0;padding-left:0;list-style:none}
.legal li{
  font-size:15.5px;line-height:1.8;color:#9aa4ae;margin-bottom:11px;
  padding-left:26px;position:relative
}
.legal li::before{
  content:'';position:absolute;left:6px;top:12px;width:6px;height:6px;
  border-radius:50%;background:rgba(212,255,0,.5)
}
.legal strong{color:#dfe5ea;font-weight:500}
.legal .llenar{
  background:rgba(212,255,0,.14);color:var(--accent);
  padding:1px 6px;border-radius:4px;font-weight:500;
  border:1px dashed rgba(212,255,0,.35)
}
.tabla-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--border);border-radius:12px}
.tabla-legal{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tabla-legal th{
  background:var(--fondo-alto);color:var(--text);text-align:left;
  padding:14px 16px;font-weight:600;font-family:var(--font-titulo);font-size:13.5px;
  border-bottom:1px solid var(--border)
}
.tabla-legal td{
  padding:13px 16px;color:#9aa4ae;line-height:1.65;
  border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top
}
.tabla-legal tr:last-child td{border-bottom:none}
.aviso-banner{
  max-width:820px;margin:0 auto 46px;padding:18px 22px;
  background:rgba(212,255,0,.07);border:1px solid rgba(212,255,0,.25);
  border-radius:12px;font-size:14.5px;line-height:1.7;color:#c3cbd2
}
.aviso-banner b{color:var(--accent);font-weight:600}
@media(max-width:768px){
  .legal{padding:0 18px 70px}
  .legal h2{font-size:20px;margin:40px 0 14px}
  .legal p,.legal li{font-size:15px}
}

/* ============================================================
   13. PIE DE PAGINA
   ============================================================ */
footer{padding:50px 48px;border-top:1px solid var(--border)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer-logo{display:flex;align-items:center;text-decoration:none}
.footer-logo img{height:34px;width:auto;opacity:.9}
.footer-nav{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
.footer-nav a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .25s}
.footer-nav a:hover{color:var(--accent)}
.footer-tel{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14.5px;color:var(--muted);transition:color .25s
}
.footer-tel:hover{color:var(--accent)}
.footer-tel svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.footer-copy{font-size:12.5px;color:#555;width:100%;text-align:center;margin-top:28px}

/* boton flotante de WhatsApp */
.wa-float{
  position:fixed;bottom:32px;right:32px;width:56px;height:56px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .2s,box-shadow .2s;z-index:200;text-decoration:none
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,.5)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ============================================================
   14. PANTALLAS CHICAS
   ============================================================ */
@media(max-width:1200px){
  .hero-inner{flex-direction:column;gap:44px;align-items:center}
  .hero-content{text-align:center;max-width:620px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-acciones{justify-content:center;flex-wrap:wrap}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .contacto-grid{grid-template-columns:1fr;max-width:460px}
}
@media(max-width:900px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  nav::after{display:none}
  nav .logo{flex:0 0 auto}
  .nav-burger{display:block}
  nav{padding:14px 18px}
  nav.scrolled{padding:12px 18px}
  /* ====== PANEL DEL MENU EN CELULAR ======
     Entra deslizandose desde la DERECHA.
     Semitransparente para que se alcance a ver el fondo detras. */
  nav .nav-links{
    position:fixed;top:0;right:0;bottom:auto;left:auto;
    width:min(76vw,310px);
    /* altura completa: el panel no puede usar bottom:0 porque la barra
       de arriba tiene desenfoque y eso lo ancla a ella en vez de a la pantalla */
    height:100vh;height:100dvh;
    margin-top:0;translate:none;
    backdrop-filter:blur(22px) saturate(140%);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:calc(var(--nav-h) + 30px) 24px 28px;

    background:rgba(0, 0, 0, 0.75);  /* <<< COLOR Y OPACIDAD DEL PANEL */
    border-left:1px solid rgba(212,255,0,.14);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    z-index:99
  }
  /* linea de acento en el borde del panel */
  nav .nav-links::before{
    content:'';position:absolute;top:0;left:0;width:1px;height:100%;
    background:linear-gradient(to bottom, transparent, rgba(212,255,0,.45), transparent)
  }
  nav .nav-links.abierto{transform:translateX(0)}

  .nav-links li{width:100%;opacity:0;transform:translateX(18px)}
  .nav-links.abierto li{
    opacity:1;transform:translateX(0);
    transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1)
  }
  /* los enlaces entran uno tras otro */
  .nav-links.abierto li:nth-child(1){transition-delay:.10s}
  .nav-links.abierto li:nth-child(2){transition-delay:.17s}
  .nav-links.abierto li:nth-child(3){transition-delay:.24s}
  .nav-links.abierto li:nth-child(4){transition-delay:.31s}

  .nav-links a{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:17px 2px;font-size:17px;font-weight:500;
    color:#c3ccd4;
    border-bottom:1px solid rgba(255,255,255,.07);
    transition:color .25s, padding-left .25s
  }
  .nav-links a:hover,.nav-links a:active{color:var(--accent);padding-left:8px}
  /* flechita al final de cada opcion */
  .nav-links a::after{
    content:'';display:block;width:7px;height:7px;flex-shrink:0;
    position:static;background:none;
    border-right:1.5px solid rgba(212,255,0,.55);
    border-bottom:1.5px solid rgba(212,255,0,.55);
    transform:rotate(-45deg);opacity:.6;transition:opacity .25s,transform .25s
  }
  /* anula el subrayado del menu de escritorio, que aqui no aplica */
  .nav-links a.active::after,
  .nav-links a:hover::after{width:7px;height:7px}
  .nav-links a:hover::after{opacity:1;transform:rotate(-45deg) translate(2px,-2px)}
  /* la pagina en la que estas, marcada */
  .nav-links a.active{color:var(--accent);font-weight:600}

  .nav-cta{margin-top:22px;text-align:center;padding:15px 24px;font-size:15px!important;border-bottom:none!important}

  /* ====== CAPA OSCURA DETRAS DEL PANEL ====== */
  .nav-backdrop{
    position:fixed;inset:0;
    background:rgba(5, 8, 11, 0.62);     /* <<< COLOR Y OPACIDAD DE LA CAPA */
    opacity:0;pointer-events:none;transition:opacity .4s;z-index:98
  }
  .nav-backdrop.abierto{opacity:1;pointer-events:auto}

  /* el boton de hamburguesa se queda encima del panel */
  .nav-burger{position:relative;z-index:101}
  .nav-burger.abierto{border-color:rgba(212,255,0,.45)}
  .nav-burger.abierto span{background:var(--accent)}
}
@media(max-width:768px){
  html,body{max-width:100vw;overflow-x:hidden}
  .hero{padding:calc(var(--nav-h) + 10px) 16px 30px;min-height:auto;align-items:flex-start}
  .hero-inner{gap:0}
  h1{font-size:clamp(28px,8vw,38px);letter-spacing:-.02em}
  .hero-sub{font-size:15px;margin:0 0 26px;max-width:100%}
  .hero-acciones{margin-bottom:34px}
  .btn{padding:14px 24px;font-size:14.5px}
  .hero-mockup{display:flex!important;justify-content:center;width:100%;opacity:1;animation:none}
  .iphone-chasis{width:195px;height:404px;border-radius:34px;padding:7px}
  .dynamic-island{width:66px;height:18px;top:12px}
  .wa-screen{border-radius:27px}
  .wa-header{padding:22px 8px 6px;gap:6px}
  /* en celular el mockup se encoge, por eso las letras van mas chicas */
  .wa-avatar{width:28px;height:28px}
  .wa-avatar img{padding:2px}
  .wa-contact-info b{font-size:10.5px}
  .wa-contact-info span{font-size:7px}
  .bubble{font-size:8px;padding:3.5px 7px;border-radius:10px}
  .chat-menu-title{font-size:7.5px;padding:5px 8px 2px}
  .chat-menu-opt{font-size:7px;padding:3.5px 7px;gap:3px}
  .opt-emoji{font-size:9.5px}
  .wa-footer-static{padding:3px 6px 14px}
  .fake-input{height:20px}
  .cursor-blink{height:9px}
  .back-btn{font-size:8px;padding:4px 8px}
  .msg-time{font-size:6px}
  .msg-time svg{width:9px;height:9px}
  .page-head{padding:calc(var(--nav-h) + 44px) 16px 40px}
  .page-head h1{font-size:clamp(28px,7.5vw,38px)}
  .page-head p{font-size:15.5px}
  .franja{padding:0 0 50px}
  .franja-item{font-size:14px;padding:0 18px}
  .mid-section{padding:20px 18px 60px}
  .mid-h2{font-size:clamp(26px,7vw,36px)}
  .mid-p{font-size:15.5px}
  .metrics-section{padding:0 16px 60px}
  .metric{padding:28px 14px}
  .metric-label{font-size:11.5px}
  .services-section{padding:0 16px 60px}
  .services-grid{grid-template-columns:1fr}
  .service-card{padding:30px 24px}
  .orbit-section{padding:20px 16px 72px}
  .orbit-header{margin-bottom:48px}
  .orbit-wrapper{overflow:visible}
  .orbit-container{transform:scale(.44);transform-origin:top center;margin-bottom:-440px}
  .aurora-section{padding:20px 16px 60px}
  .aurora-section-title{font-size:clamp(22px,6vw,32px)}
  .aurora-carousel-track .aurora-card{width:280px}
  .steps-section{padding:20px 16px 60px}
  .steps-section-title{font-size:clamp(22px,6vw,32px)}
  .steps-grid{max-width:100%}
  .cta-section{padding:72px 16px}
  .cta-section h2{font-size:clamp(26px,7.5vw,36px)}
  .cta-section p br{display:none}
  .btn-cta{padding:15px 26px}
  .btn-cta-text{font-size:17px}
  footer{padding:36px 18px}
  .footer-inner{flex-direction:column;text-align:center}
  .footer-nav{justify-content:center;gap:18px}
  .wa-float{width:48px;height:48px;bottom:18px;right:18px}
  .wa-float svg{width:24px;height:24px}
}
@media(max-width:360px){h1{font-size:26px}.hero-sub{font-size:14px}}

/* accesibilidad */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.service-card,.step-card{opacity:1!important;transform:none!important}
}


/* 
                                                         
               A J U S T E S   R A P I D O S             
                                                         
   

   TODO lo que necesitas cambiar esta aqui abajo, al final
   del archivo. Esta hasta el final a proposito: en CSS manda
   lo ultimo, asi que lo que escribas aqui siempre gana.

   No busques nada mas arriba. Solo edita esta seccion.
    */

:root{

  /* ---------- COLORES DE TEXTO ---------- */
  --titulo: #ffffff;    /* Titulos grandes de todo el sitio */
  --text:   #ffffff;    /* Parrafos y texto normal */
  --muted:  #ffffff;    /* Texto gris, mas discreto */

  /* ---------- COLORES DE MARCA ---------- */
  --accent:  #d4ff00;   /* Verde limon */
  --accent2: #00c8ff;   /* Cyan */

  /* ---------- FONDOS ----------
     Dejalos separados unos tonos entre si, si no las
     tarjetas desaparecen contra el fondo. */
  --fondo:       #000000;   /* Toda la pagina */
  --fondo-carta: #0a0a0a;   /* Tarjetas y bloques */
  --fondo-alto:  #141414;   /* Lo que debe resaltar */
  --border: rgba(255,255,255,0.08);   /* Lineas divisorias */

  /* estos dos siguen a los de arriba, no hace falta tocarlos */
  --surface:  var(--fondo-carta);
  --surface2: var(--fondo-alto);

  /* ---------- TIPOGRAFIA ----------
     Si cambias de fuente, cambia tambien los <link> del
     <head> en los 4 archivos HTML. */
  --font-titulo: 'Clash Display', 'Syne', sans-serif;
  --font-texto:  'Bitter', serif;
}


/* ---------- BARRA DE ARRIBA ----------
   Los 3 primeros numeros son el color (R, G, B).
   El cuarto es la opacidad: 0 = invisible, 1 = solido. */
nav{
  background: rgba(15, 20, 26, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ---------- PALABRAS CON DEGRADADO ----------
   Son "solo", "duermes" y "en visto".
   OJO: va background-image, NO background a secas. */
.degradado{
  background-image: linear-gradient(90deg, #d4ff00, #00c8ff);
}
.degradado-inv{
  background-image: linear-gradient(90deg, #00c8ff, #d4ff00);
}


/* ---------- ALTURA DE LA PORTADA ----------
   clamp(minimo, lo ideal, maximo) */
.hero{
  min-height: clamp(620px, 100svh, 1000px);
}


/* ---------- VELO DETRAS DEL TITULO ----------
   Evita que el fondo animado se coma el texto.
   Baja los .82 y .50 para que el fondo se vea mas. */
.hero::after{
  background: radial-gradient(ellipse 62% 54% at 50% 50%,
              rgba(15,20,26,.82) 0%,
              rgba(15,20,26,.50) 48%,
              transparent 80%);
}


/* ---------- MENU DE CELULAR ---------- */
@media(max-width:860px){
  /* el panel que entra desde la derecha */
  nav .nav-links{
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
  }
  /* la capa oscura sobre el resto de la pantalla */
  .nav-backdrop{
    background: rgba(5, 8, 11, 0.62);
  }
}
/* =========================================================
   TAMANOS DE LETRA DENTRO DEL IPHONE
   Hay DOS juegos: uno para escritorio y otro para celular.
   El mockup se encoge en celular, por eso van mas chicos ahi.
   ========================================================= */

/* ---- EN ESCRITORIO ---- */
.bubble            { font-size: 12.5px }   /* los mensajes */
.wa-contact-info b { font-size: 14px }     /* el nombre Initia */
.chat-menu-title   { font-size: 12px }     /* titulo del menu */
.chat-menu-opt     { font-size: 11.5px }   /* opciones del menu */
.opt-emoji         { font-size: 15px }     /* los emojis */
.msg-time          { font-size: 8.5px }    /* la hora */
.back-btn          { font-size: 11px }     /* boton de volver */
.wa-avatar         { width: 38px; height: 38px }  /* foto de perfil */
.wa-avatar img     { padding: 3px }        /* menos padding = logo mas grande */

/* ---- EN CELULAR ---- */
@media(max-width:768px){
  .bubble            { font-size: 8.5px }
  .wa-contact-info b { font-size: 11px }
  .chat-menu-title   { font-size: 8px }
  .chat-menu-opt     { font-size: 7.5px }
  .opt-emoji         { font-size: 10px }
  .msg-time          { font-size: 6px }
  .back-btn          { font-size: 8px }
  .wa-avatar         { width: 29px; height: 29px }
  .wa-avatar img     { padding: 2px }
}


/* =========================================================
   HASTA DONDE BAJA LA ANIMACION DE FONDO
   Sube el numero para que la animacion baje mas.
   ========================================================= */
/* El alto exacto lo calcula solo el JavaScript (se frena justo
   antes del siguiente titulo). Esta linea NO se toca: */
#fondo{ height: calc(100% + var(--fondo-extra, 20px)) }

/* Para que la animacion BAJE MAS en celular, lo que se cambia es
   el aire debajo del iPhone. Mas numero = la animacion baja mas. */
@media(max-width:768px){
  .hero{ padding-bottom: 190px }
}


/* =========================================================
   EL BOTON DE WHATSAPP EN CELULAR
   En celular se baja debajo del iPhone y se vuelve redondo,
   sin el texto "Probarlo ahora". En escritorio no cambia nada.
   ========================================================= */
@media(max-width:768px){

  /* esto deja que el boton salga de la columna del texto
     y se pueda reordenar debajo del iPhone */
  .hero-content{ display: contents }

  .hero-acciones{
    order: 3;              /* 3 = despues del iPhone */
    justify-content: center;
    margin: 0;
    padding-top: 40px      /* mas numero = mas separado del iPhone */
  }

  /* se esconde el texto */
  .btn-cta-text{ display: none }

  /* y el boton se vuelve un circulo */
  .btn-cta{
    width: 66px;           /* tamano del circulo */
    height: 66px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.45)
  }
  .btn-cta svg{
    width: 31px;           /* tamano del logo de WhatsApp */
    height: 31px
  }
}

/* =========================================================
   EL BOTON VERDE FIJO DE WHATSAPP (el de la esquina)
   Oculto en celular porque ya esta el boton debajo del iPhone.
   Para volver a mostrarlo, cambia none por flex.
   Para quitarlo TAMBIEN en escritorio, saca la regla del
   @media y dejala suelta.
   ========================================================= */
@media(max-width:768px){
  .wa-float{ display: none }
}

/*  FIN DE LOS AJUSTES  */