/* =======================================================
 * ORALIA NETWORKS — FACELIFT.CSS
 * Lavado de cara visual sobre la plantilla "Dewi".
 * Cargar SIEMPRE después de main.css.
 * No cambia la estructura ni la lógica JS: solo el aspecto.
 * ======================================================= */

:root{
  --fl-navy-900:#0A2A3D;
  --fl-navy:#104F76;
  --fl-orange:#FF6B00;
  --fl-orange-300:#FF8C2E;
  --fl-ink:#1B2A38;
  --fl-body:#586a78;
  --fl-line:#E4EAF1;
  --fl-shadow:0 14px 40px rgba(16,79,118,.14);
}

/* Eyebrow reutilizable */
.fl-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Inter",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fl-orange-300);
  margin-bottom:6px;
}
.fl-eyebrow::before{content:"";width:26px;height:2px;background:var(--fl-orange-300);border-radius:2px}

/* -------------------------------------------------------
 * HERO
 * ----------------------------------------------------- */
.fl-hero{position:relative;overflow:hidden}
/* Degradado sólido sobre la imagen para legibilidad */
.fl-hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(115deg,
    rgba(10,42,61,.95) 0%, rgba(16,79,118,.82) 55%, rgba(16,79,118,.5) 100%);
}
.fl-hero > img{filter:saturate(1.05)}
.fl-hero .container{position:relative;z-index:3}
.fl-hero h2{
  font-weight:900;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
/* Firma: palabra "iluminada" como tus channel letters */
.fl-glow{
  color:var(--fl-orange-300);
  text-shadow:0 0 18px rgba(255,140,46,.55), 0 0 4px rgba(255,140,46,.85);
}
.fl-hero p{color:#d6e2ec}

/* Segundo botón fantasma en el hero */
.fl-btn-ghost{
  background:transparent !important;color:#fff !important;
  border:1.5px solid rgba(255,255,255,.45) !important;
}
.fl-btn-ghost:hover{
  background:rgba(255,255,255,.1) !important;border-color:#fff !important;
}

/* Fila de confianza */
.fl-trust{
  display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:34px;
}
.fl-trust span{
  display:inline-flex;align-items:center;font-family:"Inter",sans-serif;
  font-size:14px;font-weight:500;color:#bcd0de;
}
.fl-trust .bi-dot{font-size:26px;color:var(--fl-orange);margin-right:-2px}

/* -------------------------------------------------------
 * SERVICIOS — tarjetas uniformes con elevación + glow
 * ----------------------------------------------------- */
.fl-services h3.border-bottom{
  font-family:"Inter",sans-serif !important;font-weight:700 !important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fl-navy) !important;
  border-bottom:1px solid var(--fl-line) !important;padding-bottom:12px;
}
.fl-services .member{
  background:#fff;border:1px solid var(--fl-line);border-radius:16px;
  overflow:hidden;padding:0 0 22px;width:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fl-services .member:hover{
  transform:translateY(-6px);box-shadow:var(--fl-shadow);
  border-color:transparent;
}
.fl-services .member .carousel,
.fl-services .member > img{margin-bottom:4px}
.fl-services .member h4{
  padding:0 22px;font-family:"Raleway",sans-serif;font-weight:700;
  color:var(--fl-ink);margin-top:18px;
}
.fl-services .member > span{padding:0 22px;display:block;color:var(--fl-body)}
.fl-services .member hr{margin:16px 22px;opacity:.5}
.fl-services .member .btn-primary2{
  margin:0 22px;border-radius:999px;font-weight:600;
  background:transparent;color:var(--fl-navy);border:1.5px solid var(--fl-line);
  transition:all .2s;
}
.fl-services .member .btn-primary2:hover{
  background:var(--fl-navy);border-color:var(--fl-navy);color:#fff;
}
.fl-services .member .collapse p,
.fl-services .member .collapsing p{padding:0 22px;margin:6px 0;color:var(--fl-body)}

/* -------------------------------------------------------
 * STATS — más limpio y con jerarquía
 * ----------------------------------------------------- */
.stats .stats-item{padding:8px 0}
.stats .stats-item i{font-size:34px;margin-bottom:6px}
.stats .counter-wrapper,
.stats .purecounter{
  font-family:"Raleway",sans-serif;font-weight:900;font-size:44px;
  color:var(--fl-navy);letter-spacing:-.02em;line-height:1;
}
.stats .stats-item p{font-weight:600;color:var(--fl-ink);margin-top:6px}

/* -------------------------------------------------------
 * PORTAFOLIO — cuadrícula pareja + overlay al hover
 * ----------------------------------------------------- */
/* Filtros tipo píldora */
.fl-portfolio #portfolio-flters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:0;margin-bottom:36px;list-style:none;
}
.fl-portfolio #portfolio-flters li{
  border:1.5px solid var(--fl-line);background:#fff;color:var(--fl-body);
  font-family:"Inter",sans-serif;font-weight:600;font-size:14px;
  padding:9px 20px;border-radius:999px;cursor:pointer;transition:all .2s;
  margin:0;
}
.fl-portfolio #portfolio-flters li:hover{border-color:var(--fl-navy);color:var(--fl-navy)}
.fl-portfolio #portfolio-flters li.filter-active{
  background:var(--fl-navy);border-color:var(--fl-navy);color:#fff;
}
/* Tiles */
.fl-portfolio .portfolio-item{margin-bottom:18px}
.fl-portfolio .portfolio-wrap{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 4px 16px rgba(16,79,118,.08);
}
.fl-portfolio .portfolio-wrap img{
  width:100%;height:100%;object-fit:cover;transition:transform .55s ease;
}
.fl-portfolio .portfolio-wrap:hover img{transform:scale(1.08)}
/* Overlay con degradado y texto al pasar el mouse */
.fl-portfolio .portfolio-info{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:20px;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(to top, rgba(10,42,61,.92) 0%, rgba(10,42,61,.2) 55%, transparent 100%);
}
.fl-portfolio .portfolio-wrap:hover .portfolio-info{opacity:1}
.fl-portfolio .portfolio-info h4{
  color:#fff;font-family:"Raleway",sans-serif;font-weight:700;font-size:18px;margin:0;
}
.fl-portfolio .portfolio-info p{
  color:var(--fl-orange-300);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;order:-1;
}
.fl-portfolio .portfolio-links{margin-top:10px}
.fl-portfolio .portfolio-links a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);display:inline-grid;place-items:center;
  color:#fff;backdrop-filter:blur(4px);transition:all .2s;
}
.fl-portfolio .portfolio-links a:hover{background:var(--fl-orange);border-color:var(--fl-orange)}

/* -------------------------------------------------------
 * EQUIPO — tratamiento consistente foto + ilustración
 * ----------------------------------------------------- */
.fl-team .team-member{
  background:#fff;border:1px solid var(--fl-line);border-radius:16px;
  overflow:hidden;text-align:center;width:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fl-team .team-member:hover{transform:translateY(-6px);box-shadow:var(--fl-shadow)}
.fl-team .member-img{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--fl-navy);
}
.fl-team .member-img img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  /* Unifica foto real e ilustraciones bajo un mismo tinte en reposo */
  mix-blend-mode:luminosity;opacity:.92;transition:.3s ease;
}
.fl-team .member-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(16,79,118,.22), rgba(255,107,0,.16));
}
.fl-team .team-member:hover .member-img img{mix-blend-mode:normal;opacity:1}
.fl-team .member-info{padding:22px}
.fl-team .member-info h4{font-family:"Raleway",sans-serif;font-weight:700;color:var(--fl-ink)}
.fl-team .member-info span{color:var(--fl-orange);font-weight:600;font-size:13px}
.fl-team .member-info p{color:var(--fl-body);font-size:14px;margin-top:8px}
/* Iconos sociales sobre la foto */
.fl-team .member-img .social a{transition:all .2s}
.fl-team .member-img .social a:hover{background:var(--fl-orange);color:#fff}

/* -------------------------------------------------------
 * Accesibilidad y motion
 * ----------------------------------------------------- */
:focus-visible{outline:3px solid var(--fl-orange-300);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .fl-services .member,.fl-team .team-member,
  .fl-portfolio .portfolio-wrap img{transition:none !important}
}

/* -------------------------------------------------------
 * GOOGLE TRANSLATE — ocultar barra superior y artefactos
 * (el cambio de idioma se controla con los botones ES/EN)
 * ----------------------------------------------------- */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
.skiptranslate iframe{display:none !important;visibility:hidden !important}
body{top:0 !important;position:static !important}
.goog-tooltip,.goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
font font{background-color:transparent !important;box-shadow:none !important}

/* =======================================================
 * CORRECCIONES MÓVIL
 * - El header fixed-top tapaba el hero porque el logo
 *   "Oralia Networks LLC" se partía en 3 líneas y el botón
 *   "Cotización Gratis" del header sumaba más altura.
 * - Los iconos de "Estadísticas" quedaban muy pegados
 *   al borde de la tarjeta / pantalla.
 * ======================================================= */
@media (max-width: 991px){
  /* El CTA flotante del header es redundante en móvil:
     el hero ya tiene "¡Llama ahora!" y "Cotización gratis",
     y el menú hamburguesa tiene su propio botón.
     Quitarlo permite que el logo quepa en una sola línea. */
  .header .cta-btn{
    display:none !important;
  }

  /* Logo más compacto para que entre en una sola línea */
  .header .logo .sitename{
    font-size:20px;
    line-height:1.25;
  }
}

@media (max-width: 768px){
  /* Margen extra de seguridad: aunque el header ya es más
     bajo, dejamos aire suficiente para que nunca tape
     el inicio del hero, incluso si el logo llega a partirse
     en 2 líneas en pantallas muy angostas. */
  .fl-hero{
    padding-top:110px;
  }

  /* Más espacio entre el icono y el borde de la tarjeta */
  .stats .stats-item{
    padding:26px 24px;
  }
  .stats .stats-item i{
    margin-right:18px;
  }
}

/* =======================================================
 * PRELOADER CON LOGO + EFECTO DE CARGA
 * Sustituye la línea animada de la plantilla por el logo
 * con un latido/glow naranja y una barra de progreso.
 * ======================================================= */
#preloader{
  background:radial-gradient(circle at 50% 42%, #ffffff 0%, #eef3f8 100%) !important;
  align-items:center;
  justify-content:center;
}
/* Desactivamos las dos mitades azules originales de la plantilla */
#preloader:before,
#preloader:after{display:none !important;content:none !important}

.fl-preloader-inner{
  display:flex;flex-direction:column;align-items:center;gap:26px;
}
.fl-preloader-logo{
  width:min(210px,55vw);height:auto;
  animation:fl-logo-pulse 1.6s ease-in-out infinite;
  will-change:transform,filter;
}
@keyframes fl-logo-pulse{
  0%,100%{transform:scale(1);   filter:drop-shadow(0 6px 14px rgba(255,107,0,.12))}
  50%    {transform:scale(1.05);filter:drop-shadow(0 10px 24px rgba(255,107,0,.38))}
}

/* Barra de progreso indeterminada */
.fl-preloader-bar{
  position:relative;width:170px;height:4px;border-radius:999px;
  background:rgba(16,79,118,.14);overflow:hidden;
}
.fl-preloader-bar::after{
  content:"";position:absolute;top:0;left:-45%;height:100%;width:45%;
  border-radius:999px;background:linear-gradient(90deg,#FF6B00,#FF8C2E);
  animation:fl-bar-slide 1.1s ease-in-out infinite;
}
@keyframes fl-bar-slide{
  0%{left:-45%}
  100%{left:100%}
}

@media (prefers-reduced-motion:reduce){
  .fl-preloader-logo{animation:none}
  .fl-preloader-bar::after{animation:none;left:0;width:100%}
}

/* =======================================================
 * BOTÓN FLOTANTE DE WHATSAPP
 * Abajo a la izquierda (el chat y el scroll-top van a la derecha).
 * z-index por debajo de los modales (1050) para que no los tape.
 * ======================================================= */
.fl-whatsapp{
  position:fixed;left:22px;bottom:22px;z-index:1040;
  display:inline-flex;align-items:center;gap:0;
  height:58px;width:58px;border-radius:999px;overflow:hidden;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 8px 22px rgba(37,211,102,.45);
  transition:width .35s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.fl-whatsapp i{
  font-size:30px;min-width:58px;height:58px;
  display:grid;place-items:center;flex-shrink:0;
}
.fl-whatsapp-label{
  font-family:"Inter",sans-serif;font-weight:600;font-size:15px;
  opacity:0;padding-right:0;transition:opacity .2s ease .05s;
}
/* Pulso sutil para llamar la atención */
.fl-whatsapp::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:fl-wa-pulse 2.2s infinite;
}
@keyframes fl-wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
@media (hover:hover){
  .fl-whatsapp:hover{width:190px;box-shadow:0 10px 28px rgba(37,211,102,.55)}
  .fl-whatsapp:hover .fl-whatsapp-label{opacity:1;padding-right:20px}
}
.fl-whatsapp:hover{color:#fff}

/* =======================================================
 * MODAL DE PROMOCIÓN
 * ======================================================= */
.fl-promo{position:relative}
.fl-promo-close{position:absolute;top:14px;right:14px;z-index:5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.fl-promo-head{
  position:relative;text-align:center;color:#fff;padding:38px 28px 30px;
  background:linear-gradient(135deg,var(--fl-navy-900) 0%,var(--fl-navy) 100%);
  overflow:hidden;
}
.fl-promo-head::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(255,107,0,.45),transparent 70%);
}
.fl-promo-tag{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fl-orange-300);margin-bottom:8px;
}
.fl-promo-percent{
  position:relative;font-family:"Raleway",sans-serif;font-weight:900;
  font-size:88px;line-height:.9;letter-spacing:-.03em;
  color:var(--fl-orange-300);text-shadow:0 0 26px rgba(255,140,46,.5);
}
.fl-promo-percent span{font-size:52px;vertical-align:top}
.fl-promo-title{
  position:relative;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:28px;color:#fff;margin:0;text-transform:uppercase;letter-spacing:.02em;
}
.fl-promo-sub{position:relative;color:#cdd9e4;font-size:15px;margin:6px 0 0}
.fl-promo-sub strong{color:#fff}

.fl-promo-body{padding:26px 30px 30px;text-align:center;background:#fff}
.fl-promo-instructions{font-size:14px;color:var(--fl-body);margin:0 0 14px}
.fl-promo-code-box{
  display:flex;align-items:stretch;gap:0;justify-content:center;
  border:2px dashed var(--fl-navy);border-radius:12px;overflow:hidden;
  max-width:340px;margin:0 auto 20px;
}
.fl-promo-code{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:"Raleway",sans-serif;font-weight:800;font-size:24px;letter-spacing:.04em;
  color:var(--fl-navy);padding:12px 14px;background:#f4f9fd;
}
.fl-promo-copy{
  border:none;background:var(--fl-navy);color:#fff;font-family:"Inter",sans-serif;
  font-weight:600;font-size:14px;padding:0 18px;cursor:pointer;transition:background .2s;
}
.fl-promo-copy:hover{background:var(--fl-navy-900)}
.fl-promo-claim{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;max-width:340px;border:none;cursor:pointer;
  background:var(--fl-orange);color:#fff;font-family:"Inter",sans-serif;font-weight:700;
  font-size:16px;padding:14px;border-radius:999px;
  box-shadow:0 8px 22px rgba(255,107,0,.35);transition:transform .2s,box-shadow .2s;
}
.fl-promo-claim:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,107,0,.5)}
.fl-promo-wa{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  color:#1da851;font-weight:600;font-size:14px;text-decoration:none;
}
.fl-promo-wa:hover{text-decoration:underline;color:#1da851}
.fl-promo-terms{font-size:11px;color:#9aa7b2;margin:16px 0 0}

/* =======================================================
 * FACELIFT — SECCIÓN CONTACTO (#get-started)
 * ======================================================= */
#get-started .content-header h2{font-weight:800;letter-spacing:-.02em}
#get-started .icon-box{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,107,0,.15);color:var(--fl-orange);font-size:22px;
  transition:transform .25s ease;
}
#get-started .contact-box:hover .icon-box{transform:translateY(-3px) scale(1.05)}
#get-started .form-wrapper{border:1px solid rgba(255,255,255,.06)}
#get-started .form-wrapper h3{letter-spacing:-.01em}
#get-started .form-control:focus{
  box-shadow:0 0 0 4px rgba(255,107,0,.15);border-color:var(--fl-orange) !important;
}

/* =======================================================
 * FACELIFT — ¿POR QUÉ ELEGIRNOS? (.why-box)
 * ======================================================= */
.why .why-box{
  background:#fff;border:1px solid var(--fl-line);border-radius:16px;
  padding:34px 28px;width:100%;text-align:center;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why .why-box:hover{transform:translateY(-6px);box-shadow:var(--fl-shadow);border-color:transparent}
.why .why-box .icon-wrapper{
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 20px;font-size:30px;
  background:rgba(255,107,0,.12);color:var(--fl-orange);
  transition:transform .3s ease;
}
.why .why-box:hover .icon-wrapper{transform:rotate(-6deg) scale(1.06)}
.why .why-box h3{font-family:"Raleway",sans-serif;font-weight:700;font-size:20px;color:var(--fl-ink);margin-bottom:10px}
.why .why-box p{font-size:15px;color:var(--fl-body);margin:0}

/* =======================================================
 * FACELIFT — FAQ (acordeón)
 * ======================================================= */
.faq .accordion-item{
  border:1px solid var(--fl-line) !important;border-radius:14px !important;
  margin-bottom:14px;overflow:hidden;background:#fff;
  transition:box-shadow .25s ease;
}
.faq .accordion-item:has(.accordion-button:not(.collapsed)){box-shadow:var(--fl-shadow)}
.faq .accordion-button{
  font-family:"Raleway",sans-serif;font-weight:700;font-size:17px;color:var(--fl-ink) !important;
  padding:20px 22px;background:#fff !important;box-shadow:none !important;
}
.faq .accordion-button:not(.collapsed){color:var(--fl-navy) !important;background:#f4f9fd !important}
.faq .accordion-button::after{
  background-color:rgba(255,107,0,.12);border-radius:50%;background-position:center;
  width:30px;height:30px;background-size:16px;
}
.faq .accordion-body{padding:4px 22px 22px;color:var(--fl-body);font-size:15px}

/* =======================================================
 * FACELIFT — FOOTER
 * ======================================================= */
.footer .footer-links h4,
.footer .footer-newsletter h4,
.footer .footer-about + *{position:relative}
.footer .footer-links h4,
.footer .footer-newsletter h4{
  font-family:"Raleway",sans-serif;font-weight:700;padding-bottom:12px;margin-bottom:18px;position:relative;
}
.footer .footer-links h4::after,
.footer .footer-newsletter h4::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--fl-orange);
}
.footer .social-links a{
  width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:#fff;margin-right:8px;font-size:16px;
  transition:all .25s ease;
}
.footer .social-links a:hover{background:var(--fl-orange);border-color:var(--fl-orange);transform:translateY(-3px)}
.footer .footer-links ul a{transition:color .2s,padding-left .2s}
.footer .footer-links ul a:hover{color:var(--fl-orange-300);padding-left:4px}
.footer .newsletter-form{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.footer .newsletter-form input[type="submit"]{
  background:var(--fl-orange);font-weight:700;transition:background .2s;
}
.footer .newsletter-form input[type="submit"]:hover{background:#e55a00}