/* =======================================================
 * 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}
}