/* ==========================================================
   ROS CORE - ESTILOS GENERALES
========================================================== */

:root{
  --negro:#050505;
  --negro-claro:#0c0c0c;
  --panel:#111111;
  --panel-secundario:#171717;
  --naranja:#ff9400;
  --naranja-claro:#ffb13b;
  --dorado:#d78300;
  --plata:#c9c9c9;
  --gris:#8c8c8c;
  --gris-claro:#bdbdbd;
  --blanco:#f5f5f5;
  --borde:rgba(255,255,255,.12);
  --sombra:0 30px 80px rgba(0,0,0,.55);
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--negro);
  color:var(--blanco);
  font-family:"Montserrat",sans-serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;

  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);

  background-size:45px 45px;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
textarea{
  font:inherit;
}

.contenedor{
  width:min(1180px, calc(100% - 40px));
  margin:auto;
}

.seccion{
  padding:110px 0;
}


/* ==========================================================
   ENCABEZADO
========================================================== */

.encabezado{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  background:rgba(5,5,5,.92);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
}

.barra-navegacion{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.logo img{
  width:225px;
}

.menu{
  display:flex;
  align-items:center;
  gap:28px;
}

.menu a{
  color:#d7d7d7;
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  transition:.25s ease;
}

.menu a:hover{
  color:var(--naranja);
}

.boton-contacto{
  padding:12px 21px;
  border:1px solid var(--naranja);
  border-radius:999px;
  color:var(--naranja);
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:800;
  transition:.25s ease;
}

.boton-contacto:hover{
  background:var(--naranja);
  color:#111;
  box-shadow:0 0 30px rgba(255,148,0,.3);
}

.boton-menu{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--borde);
  border-radius:9px;
  background:#111;
  cursor:pointer;
}

.boton-menu span{
  width:21px;
  height:2px;
  display:block;
  background:#fff;
  margin:5px auto;
  transition:.25s ease;
}


/* ==========================================================
   PORTADA
========================================================== */

.portada{
  min-height:100vh;
  padding-top:86px;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;

  background:
    linear-gradient(90deg, rgba(5,5,5,.98) 0%, rgba(5,5,5,.88) 42%, rgba(5,5,5,.30) 100%),
    radial-gradient(circle at 75% 45%, rgba(255,148,0,.15), transparent 34%),
    var(--negro);
}

.rejilla-fondo{
  position:absolute;
  inset:0;
  opacity:.23;

  background-image:
    linear-gradient(rgba(255,148,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,148,0,.08) 1px, transparent 1px);

  background-size:55px 55px;

  mask-image:linear-gradient(to right, transparent 5%, black 55%, transparent);
}

.resplandor{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
}

.resplandor-uno{
  width:500px;
  height:500px;
  right:0;
  top:10%;
  background:rgba(255,148,0,.18);
}

.resplandor-dos{
  width:300px;
  height:300px;
  left:-120px;
  bottom:-100px;
  background:rgba(255,255,255,.05);
}

.portada-contenido{
  min-height:calc(100vh - 86px);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:55px;
  position:relative;
  z-index:2;
  padding-top:55px;
  padding-bottom:55px;
}

.portada-texto{
  position:relative;
  z-index:3;
}

.etiqueta{
  color:var(--naranja);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:800;
}

.portada h1{
  font-family:"Orbitron",sans-serif;
  font-size:clamp(3rem, 5.4vw, 5.8rem);
  line-height:1.03;
  letter-spacing:-.055em;
  text-transform:uppercase;
  max-width:760px;
  margin-top:24px;
}

.portada h1 span{
  display:block;
  color:var(--naranja);
  text-shadow:0 0 35px rgba(255,148,0,.18);
}

.linea-titulo{
  display:flex;
  align-items:center;
  margin:27px 0 25px;
}

.linea-titulo span{
  width:85px;
  height:3px;
  background:var(--naranja);
}

.linea-titulo i{
  width:8px;
  height:8px;
  margin-left:-1px;
  border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 15px var(--naranja);
}

.portada-texto > p{
  max-width:630px;
  color:#cecece;
  font-size:1rem;
  line-height:1.85;
}

.portada-texto > p strong{
  color:var(--naranja);
}

.acciones-portada{
  margin-top:34px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.boton{
  min-height:48px;
  padding:0 23px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  transition:.25s ease;
}

.boton-primario{
  color:#111;
  background:linear-gradient(135deg, var(--naranja-claro), var(--naranja));
  box-shadow:0 15px 38px rgba(255,148,0,.25);
}

.boton-primario:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(255,148,0,.36);
}

.boton-secundario{
  border:1px solid var(--borde);
  color:#fff;
  background:rgba(255,255,255,.03);
}

.boton-secundario:hover{
  border-color:var(--naranja);
  color:var(--naranja);
}

.indicadores-portada{
  display:flex;
  gap:26px;
  margin-top:48px;
}

.indicadores-portada div{
  min-width:120px;
  padding-right:26px;
  border-right:1px solid var(--borde);
}

.indicadores-portada div:last-child{
  border-right:none;
}

.indicadores-portada strong{
  display:block;
  font-family:"Orbitron",sans-serif;
  font-size:1.18rem;
  color:#fff;
}

.indicadores-portada span{
  display:block;
  margin-top:6px;
  color:var(--gris);
  font-size:.68rem;
}


/* ==========================================================
   GRÁFICO CIRCULAR DE PORTADA
========================================================== */

.portada-grafico{
  min-height:570px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.circulo-tecnologico{
  width:520px;
  height:520px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.circulo-tecnologico::before{
  content:"";
  position:absolute;
  inset:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 0 70px rgba(255,148,0,.13),
    0 0 90px rgba(255,148,0,.13);
}

.orbita{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,148,0,.24);
}

.orbita::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  left:50%;
  top:-4px;
  border-radius:50%;
  background:var(--naranja);
  box-shadow:0 0 17px var(--naranja);
}

.orbita-uno{
  inset:5px;
  animation:girar 22s linear infinite;
}

.orbita-dos{
  inset:62px;
  border-style:dashed;
  animation:girar-inverso 15s linear infinite;
}

.orbita-tres{
  inset:116px;
  animation:girar 9s linear infinite;
}

.nucleo-exterior{
  width:235px;
  height:235px;
  border-radius:50%;
  position:relative;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    conic-gradient(
      #d9d9d9 0deg 55deg,
      #525252 55deg 90deg,
      #f1f1f1 90deg 145deg,
      #c67800 145deg 210deg,
      #eeeeee 210deg 272deg,
      #555555 272deg 315deg,
      #e9e9e9 315deg 360deg
    );

  border:8px solid #242424;

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.8),
    0 0 0 3px #8a8a8a,
    0 0 0 14px #151515,
    0 0 85px rgba(255,148,0,.48);

  animation:flotar 5s ease-in-out infinite;
}

.nucleo-exterior::before{
  content:"";
  position:absolute;
  inset:32px;
  border-radius:50%;
  background:#0b0b0b;
  border:4px solid #2e2e2e;
}

.nucleo-interior{
  width:105px;
  height:105px;
  position:relative;
  z-index:2;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 30%, #ffe086 0%, #ffad18 26%, #ff7700 58%, #6d1e00 100%);

  border:6px solid #111;

  box-shadow:
    0 0 0 5px #dbdbdb,
    0 0 0 11px #222,
    0 0 45px rgba(255,148,0,.95);
}

.nucleo-interior::after{
  content:"";
  position:absolute;
  inset:-25px;
  border:1px solid rgba(255,148,0,.45);
  border-radius:50%;
  animation:pulso 2.5s ease-out infinite;
}

.segmento{
  position:absolute;
  width:58px;
  height:16px;
  border-radius:8px;
  background:linear-gradient(90deg, #e9e9e9, var(--naranja));
  box-shadow:0 0 20px rgba(255,148,0,.35);
}

.segmento-uno{
  top:57px;
  transform:rotate(90deg);
}

.segmento-dos{
  right:63px;
}

.segmento-tres{
  bottom:57px;
  transform:rotate(90deg);
}

.segmento-cuatro{
  left:63px;
}

.tarjeta-flotante{
  position:absolute;
  z-index:8;
  width:190px;
  padding:13px 15px;

  display:flex;
  align-items:center;
  gap:11px;

  border:1px solid var(--borde);
  border-radius:11px;
  background:rgba(12,12,12,.88);
  backdrop-filter:blur(12px);
  box-shadow:var(--sombra);
}

.tarjeta-flotante > span{
  width:35px;
  height:35px;
  border-radius:8px;
  display:grid;
  place-items:center;

  color:var(--naranja);
  background:rgba(255,148,0,.1);
  border:1px solid rgba(255,148,0,.3);

  font-size:.7rem;
  font-weight:800;
}

.tarjeta-flotante strong,
.tarjeta-flotante small{
  display:block;
}

.tarjeta-flotante strong{
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
}

.tarjeta-flotante small{
  color:var(--gris);
  font-size:.61rem;
  margin-top:4px;
}

.tarjeta-uno{
  left:-20px;
  top:85px;
}

.tarjeta-dos{
  right:-25px;
  top:225px;
}

.tarjeta-tres{
  left:25px;
  bottom:64px;
}


/* ==========================================================
   ENCABEZADOS DE SECCIÓN
========================================================== */

.encabezado-seccion > span{
  color:var(--naranja);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:800;
}

.encabezado-seccion h2{
  font-family:"Orbitron",sans-serif;
  font-size:clamp(2rem, 4vw, 3.5rem);
  margin-top:9px;
  text-transform:uppercase;
  letter-spacing:-.035em;
}

.encabezado-seccion h2 b{
  color:var(--naranja);
}

.encabezado-seccion > p{
  max-width:680px;
  margin:17px auto 0;
  color:var(--gris-claro);
  line-height:1.75;
  font-size:.93rem;
}

.centrado{
  text-align:center;
}

.linea-seccion{
  width:48px;
  height:3px;
  background:var(--naranja);
  margin:16px auto 0;
  position:relative;
}

.linea-seccion::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  right:-2px;
  top:-2px;
  border-radius:50%;
  background:var(--naranja);
}

.linea-seccion.izquierda{
  margin-left:0;
}


/* ==========================================================
   SERVICIOS
========================================================== */

.seccion-servicios{
  border-top:1px solid var(--borde);

  background:
    radial-gradient(circle at 50% 0%, rgba(255,148,0,.06), transparent 35%),
    linear-gradient(to bottom, #080808, #050505);
}

.rejilla-servicios{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:54px;
}

.tarjeta-servicio{
  min-height:425px;
  padding:25px;
  position:relative;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01));

  transition:.3s ease;
}

.tarjeta-servicio::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-100px;
  top:-100px;
  border-radius:50%;
  background:var(--naranja);
  filter:blur(85px);
  opacity:0;
  transition:.3s ease;
}

.tarjeta-servicio:hover{
  transform:translateY(-8px);
  border-color:rgba(255,148,0,.48);
}

.tarjeta-servicio:hover::before{
  opacity:.16;
}

.tarjeta-servicio.destacada{
  border-color:rgba(255,148,0,.38);
  background:
    linear-gradient(145deg, rgba(255,148,0,.09), rgba(255,255,255,.015));
}

.numero-servicio{
  text-align:right;
  color:#666;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
}

.icono-servicio{
  width:62px;
  height:62px;
  margin:22px auto;

  display:grid;
  place-items:center;

  color:var(--naranja);
  background:rgba(255,148,0,.08);
  border:1px solid rgba(255,148,0,.32);
  border-radius:13px;

  font-family:"Orbitron",sans-serif;
  font-size:1.65rem;
  font-weight:800;
}

.tarjeta-servicio h3{
  text-align:center;
  font-size:.91rem;
  text-transform:uppercase;
  margin-bottom:15px;
}

.tarjeta-servicio p{
  color:#c2c2c2;
  text-align:center;
  line-height:1.67;
  font-size:.78rem;
}

.tarjeta-servicio ul{
  list-style:none;
  display:grid;
  gap:9px;
  margin:21px 0;
}

.tarjeta-servicio li{
  position:relative;
  padding-left:16px;
  color:#999;
  font-size:.72rem;
}

.tarjeta-servicio li::before{
  content:"";
  width:6px;
  height:6px;
  position:absolute;
  left:0;
  top:5px;
  border-radius:50%;
  background:var(--naranja);
}

.tarjeta-servicio a{
  display:block;
  margin-top:20px;
  color:var(--naranja);
  text-align:center;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
}


/* ==========================================================
   BENEFICIOS
========================================================== */

.beneficios{
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  background:#090909;
}

.rejilla-beneficios{
  min-height:130px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  align-items:center;
}

.rejilla-beneficios article{
  display:flex;
  align-items:center;
  gap:15px;
  padding:26px;
  border-right:1px solid var(--borde);
}

.rejilla-beneficios article:last-child{
  border-right:none;
}

.icono-beneficio{
  flex:0 0 50px;
  width:50px;
  height:50px;
  border-radius:12px;
  display:grid;
  place-items:center;

  color:var(--naranja);
  border:1px solid rgba(255,148,0,.38);
  background:rgba(255,148,0,.08);

  font-size:1.35rem;
  font-weight:800;
}

.rejilla-beneficios h3{
  color:var(--naranja);
  font-size:.74rem;
  text-transform:uppercase;
}

.rejilla-beneficios p{
  color:#a8a8a8;
  font-size:.7rem;
  line-height:1.55;
  margin-top:5px;
}


/* ==========================================================
   NOSOTROS
========================================================== */

.seccion-nosotros{
  background:
    radial-gradient(circle at 17% 50%, rgba(255,148,0,.08), transparent 27%),
    #080808;
}

.rejilla-nosotros{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:95px;
}

.imagen-nosotros{
  display:flex;
  justify-content:center;
}

.marco-circular{
  width:355px;
  height:355px;
  position:relative;
  border-radius:50%;
  padding:13px;

  background:
    conic-gradient(
      var(--naranja) 0deg 92deg,
      transparent 92deg 126deg,
      #929292 126deg 220deg,
      transparent 220deg 255deg,
      var(--naranja) 255deg 360deg
    );

  box-shadow:0 0 45px rgba(255,148,0,.15);
}

.marco-circular::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(255,148,0,.26);
}

.imagen-simulada{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:50%;

  border:7px solid #151515;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.1), transparent),
    radial-gradient(circle at center, #25313a, #06090c 72%);
}

.imagen-simulada::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(90deg,
      transparent 0 12%,
      rgba(255,255,255,.08) 12% 13%,
      transparent 13% 25%,
      rgba(255,255,255,.08) 25% 26%,
      transparent 26% 100%
    ),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);

  background-size:auto, 100% 55px;
}

.pantalla{
  position:absolute;
  width:80px;
  height:55px;
  border:3px solid #202020;
  background:
    linear-gradient(145deg, #204c67, #07151f);
  box-shadow:0 0 12px rgba(77,190,255,.23);
}

.pantalla-uno{
  left:62px;
  top:145px;
}

.pantalla-dos{
  left:142px;
  top:120px;
}

.pantalla-tres{
  right:48px;
  top:160px;
}

.mesa-control{
  position:absolute;
  width:265px;
  height:45px;
  left:45px;
  bottom:65px;
  border-radius:45% 45% 20px 20px;
  background:linear-gradient(#303030, #0c0c0c);
  box-shadow:0 15px 25px #000;
}

.texto-nosotros > p{
  color:#b9b9b9;
  line-height:1.85;
  margin-top:20px;
  font-size:.92rem;
}

.valores-nosotros{
  display:flex;
  gap:13px;
  margin:30px 0;
}

.valores-nosotros div{
  flex:1;
  padding:15px;
  border:1px solid var(--borde);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.valores-nosotros strong{
  display:block;
  color:var(--naranja);
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
}

.valores-nosotros span{
  display:block;
  margin-top:8px;
  font-size:.74rem;
  font-weight:700;
}

.boton-contorno{
  border:1px solid var(--naranja);
  color:var(--naranja);
}

.boton-contorno:hover{
  color:#111;
  background:var(--naranja);
}


/* ==========================================================
   SOLUCIONES
========================================================== */

.seccion-soluciones{
  border-top:1px solid var(--borde);
  background:
    radial-gradient(circle at 85% 50%, rgba(255,148,0,.07), transparent 30%),
    #050505;
}

.rejilla-soluciones{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:80px;
}

.texto-soluciones > p{
  margin-top:22px;
  color:#b8b8b8;
  line-height:1.8;
  font-size:.9rem;
}

.lista-soluciones{
  display:grid;
  gap:17px;
  margin-top:30px;
}

.lista-soluciones > div{
  display:flex;
  gap:13px;
}

.lista-soluciones > div > span{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,148,0,.1);
  border:1px solid rgba(255,148,0,.35);
  color:var(--naranja);
  font-size:.72rem;
}

.lista-soluciones p{
  color:#999;
  font-size:.8rem;
  line-height:1.55;
}

.lista-soluciones strong{
  display:block;
  color:#fff;
  margin-bottom:4px;
}

.panel-control{
  padding:26px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.012));

  box-shadow:var(--sombra);
}

.cabecera-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:20px;
  border-bottom:1px solid var(--borde);
}

.cabecera-panel span{
  color:var(--naranja);
  letter-spacing:.11em;
  font-size:.57rem;
}

.cabecera-panel h3{
  margin-top:6px;
  font-size:.95rem;
}

.estado-panel{
  display:flex;
  align-items:center;
  gap:8px;
  color:#aaa;
  font-size:.66rem;
}

.estado-panel i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#46d684;
  box-shadow:0 0 13px #46d684;
}

.estadisticas-panel{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin:20px 0;
}

.estadisticas-panel > div{
  padding:14px;
  border:1px solid var(--borde);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.estadisticas-panel span,
.estadisticas-panel strong,
.estadisticas-panel small{
  display:block;
}

.estadisticas-panel span{
  color:#999;
  font-size:.61rem;
}

.estadisticas-panel strong{
  margin:8px 0 5px;
  font-family:"Orbitron",sans-serif;
  font-size:1.1rem;
}

.estadisticas-panel small{
  color:var(--naranja);
  font-size:.58rem;
}

.grafica-panel{
  height:185px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--borde);
  border-radius:10px;

  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

  background-size:100% 36px, 55px 100%;
}

.linea-grafica{
  position:absolute;
  inset:22px 14px;

  background:linear-gradient(165deg,
    transparent 0 18%,
    var(--naranja) 19% 20%,
    transparent 21% 35%,
    var(--naranja) 36% 37%,
    transparent 38% 49%,
    var(--naranja) 50% 51%,
    transparent 52% 68%,
    var(--naranja) 69% 70%,
    transparent 71%
  );

  clip-path:polygon(
    0 80%,
    12% 67%,
    25% 72%,
    38% 42%,
    50% 55%,
    63% 29%,
    77% 40%,
    89% 20%,
    100% 7%,
    100% 100%,
    0 100%
  );

  filter:drop-shadow(0 0 8px rgba(255,148,0,.8));
}

.lista-panel{
  display:grid;
  gap:10px;
  margin-top:17px;
}

.lista-panel > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#aaa;
  font-size:.71rem;
}

.lista-panel strong{
  color:#fff;
}

.punto{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:7px;
}

.punto.naranja{
  background:var(--naranja);
}

.punto.plata{
  background:var(--plata);
}


/* ==========================================================
   CLIENTES
========================================================== */

.clientes{
  padding:75px 0;
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  background:#0a0a0a;
}

.marcas{
  margin-top:42px;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  align-items:center;
  gap:18px;
}

.marcas span{
  min-height:75px;
  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--borde);
  border-radius:8px;

  color:#aaa;
  background:rgba(255,255,255,.02);

  font-family:"Orbitron",sans-serif;
  font-size:.75rem;

  transition:.25s ease;
}

.marcas span:hover{
  color:#fff;
  border-color:rgba(255,148,0,.42);
  background:rgba(255,148,0,.06);
}


/* ==========================================================
   CONTACTO
========================================================== */

.seccion-contacto{
  background:
    radial-gradient(circle at 20% 50%, rgba(255,148,0,.1), transparent 28%),
    #050505;
}

.caja-contacto{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:65px;
  align-items:center;

  padding:55px;
  border:1px solid rgba(255,148,0,.25);
  border-radius:20px;

  background:
    linear-gradient(145deg, rgba(255,148,0,.06), rgba(255,255,255,.018));

  box-shadow:var(--sombra);
}

.texto-contacto > span{
  color:var(--naranja);
  text-transform:uppercase;
  font-size:.77rem;
  font-weight:800;
}

.texto-contacto h2{
  margin-top:13px;
  font-family:"Orbitron",sans-serif;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  line-height:1.18;
}

.texto-contacto p{
  margin-top:18px;
  color:#aaa;
  line-height:1.75;
  font-size:.88rem;
}

.datos-contacto{
  display:grid;
  gap:8px;
  margin-top:25px;
  color:#999;
  font-size:.77rem;
}

.datos-contacto a{
  color:var(--naranja);
}

.formulario-contacto{
  display:grid;
  gap:13px;
}

.fila-formulario{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.formulario-contacto input,
.formulario-contacto textarea{
  width:100%;
  outline:none;
  color:#fff;
  padding:14px 15px;

  border:1px solid var(--borde);
  border-radius:8px;

  background:rgba(255,255,255,.035);

  transition:.25s ease;
}

.formulario-contacto textarea{
  min-height:130px;
  resize:vertical;
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus{
  border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(255,148,0,.09);
}

.formulario-contacto button{
  justify-self:end;
  min-height:47px;
  padding:0 23px;

  border:none;
  border-radius:8px;

  color:#111;
  background:linear-gradient(135deg, var(--naranja-claro), var(--naranja));

  text-transform:uppercase;
  font-size:.74rem;
  font-weight:800;

  cursor:pointer;
  transition:.25s ease;
}

.formulario-contacto button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(255,148,0,.25);
}


/* ==========================================================
   PIE DE PÁGINA
========================================================== */

.pie-pagina{
  padding:55px 0 24px;
  border-top:1px solid var(--borde);
  background:#030303;
}

.pie-superior{
  display:grid;

  grid-template-columns:
    1.5fr
    1fr
    1fr
    1fr
    1fr;

  gap:40px;

  align-items:start;
}

.marca-pie img{
  width:210px;
}

.marca-pie p{
  max-width:300px;
  margin-top:15px;
  color:#888;
  line-height:1.65;
  font-size:.78rem;
}

.columna-pie{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.columna-pie h3{
  margin-bottom:7px;
  color:var(--naranja);
  text-transform:uppercase;
  font-size:.72rem;
}

.columna-pie a,
.columna-pie span{
  color:#888;
  font-size:.75rem;
  transition:.2s ease;
}

.columna-pie a:hover{
  color:#fff;
}

.pie-inferior{
  margin-top:45px;
  padding-top:21px;
  border-top:1px solid var(--borde);

  display:flex;
  justify-content:space-between;
  align-items:center;

  color:#666;
  font-size:.67rem;
}

.redes-sociales{
  display:flex;
  gap:10px;
}

.redes-sociales a{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;

  border:1px solid var(--borde);
  border-radius:7px;

  color:#ddd;
  font-weight:800;

  transition:.25s ease;
}

.redes-sociales a:hover{
  color:#111;
  background:var(--naranja);
  border-color:var(--naranja);
}


/* ==========================================================
   ANIMACIONES
========================================================== */

@keyframes girar{
  to{
    transform:rotate(360deg);
  }
}

@keyframes girar-inverso{
  to{
    transform:rotate(-360deg);
  }
}

@keyframes pulso{
  0%{
    transform:scale(.85);
    opacity:.85;
  }

  100%{
    transform:scale(1.7);
    opacity:0;
  }
}

@keyframes flotar{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }
}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media (max-width:1050px){

  .boton-contacto{
    display:none;
  }

  .portada-contenido,
  .rejilla-nosotros,
  .rejilla-soluciones,
  .caja-contacto{
    grid-template-columns:1fr;
  }

  .portada-texto{
    text-align:center;
  }

  .linea-titulo,
  .acciones-portada,
  .indicadores-portada{
    justify-content:center;
  }

  .portada-texto > p{
    margin:auto;
  }

  .portada-grafico{
    min-height:520px;
  }

  .rejilla-servicios{
    grid-template-columns:repeat(2, 1fr);
  }

  .rejilla-beneficios{
    grid-template-columns:repeat(2, 1fr);
  }

  .rejilla-beneficios article:nth-child(2){
    border-right:none;
  }

  .rejilla-beneficios article:nth-child(-n+2){
    border-bottom:1px solid var(--borde);
  }

  .rejilla-nosotros,
  .rejilla-soluciones{
    gap:50px;
  }

  .texto-nosotros,
  .texto-soluciones{
    text-align:center;
  }

  .linea-seccion.izquierda{
    margin-left:auto;
  }

  .valores-nosotros{
    justify-content:center;
  }

  .lista-soluciones{
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }

  .marcas{
    grid-template-columns:repeat(3, 1fr);
  }

  .pie-superior{
    grid-template-columns:1.4fr repeat(3, 1fr);
  }
}


/* ==========================================================
   RESPONSIVE - MÓVIL
========================================================== */

@media (max-width:790px){

  .barra-navegacion{
    height:74px;
  }

  .logo img{
    width:185px;
  }

  .boton-menu{
    display:block;
  }

  .menu{
    position:absolute;
    top:74px;
    left:20px;
    right:20px;

    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;

    padding:12px;

    border:1px solid var(--borde);
    border-radius:12px;

    background:rgba(8,8,8,.98);
    box-shadow:var(--sombra);
  }

  .menu.menu-activo{
    display:flex;
  }

  .menu a{
    padding:14px 12px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .menu a:last-child{
    border-bottom:none;
  }

  .portada{
    padding-top:74px;
  }

  .portada-contenido{
    min-height:calc(100vh - 74px);
    padding-top:65px;
  }

  .portada h1{
    font-size:clamp(2.7rem, 12vw, 4.5rem);
  }

  .circulo-tecnologico{
    transform:scale(.78);
  }

  .portada-grafico{
    min-height:430px;
  }

  .seccion{
    padding:85px 0;
  }

  .rejilla-beneficios,
  .pie-superior{
    grid-template-columns:1fr 1fr;
  }

  .rejilla-beneficios article{
    border-bottom:1px solid var(--borde);
  }

  .rejilla-beneficios article:nth-child(even){
    border-right:none;
  }

  .caja-contacto{
    padding:35px 25px;
  }

  .pie-inferior{
    flex-direction:column;
    gap:18px;
  }
}


/* ==========================================================
   RESPONSIVE - TELÉFONOS PEQUEÑOS
========================================================== */

@media (max-width:560px){

  .contenedor{
    width:min(100% - 28px, 1180px);
  }

  .rejilla-servicios,
  .rejilla-beneficios,
  .marcas,
  .fila-formulario,
  .pie-superior{
    grid-template-columns:1fr;
  }

  .indicadores-portada{
    gap:10px;
  }

  .indicadores-portada div{
    min-width:0;
    padding-right:10px;
  }

  .indicadores-portada span{
    font-size:.58rem;
  }

  .portada-grafico{
    min-height:340px;
  }

  .circulo-tecnologico{
    transform:scale(.58);
  }

  .tarjeta-servicio{
    min-height:auto;
  }

  .rejilla-beneficios article{
    border-right:none;
  }

  .marco-circular{
    width:285px;
    height:285px;
  }

  .valores-nosotros{
    flex-direction:column;
  }

  .estadisticas-panel{
    grid-template-columns:1fr;
  }

  .caja-contacto{
    padding:30px 20px;
  }

  .formulario-contacto button{
    width:100%;
  }
}
/* ==========================================================
   ROS CORE - PANAL INTERACTIVO
========================================================== */

#hexagonos-cursor{
  position:fixed;
  top:0;
  left:0;

  width:100vw;
  height:100vh;

  pointer-events:none;

  /*
     IMPORTANTE:
     El canvas debe estar ENCIMA de los fondos
     pero debajo del menú.
  */
  z-index:5;

  display:block;
}


/* ==========================================================
   CONTENIDO DE LA PÁGINA
========================================================== */

.encabezado{
  z-index:1000;
}

main,
.pie-pagina{
  position:relative;
  z-index:2;
}


/* ==========================================================
   HALO NARANJA DEL CURSOR
========================================================== */

body::after{

  content:"";

  position:fixed;

  width:360px;
  height:360px;

  left:var(--mouse-x, -500px);
  top:var(--mouse-y, -500px);

  transform:translate(-50%, -50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,148,0,.22) 0%,
      rgba(255,148,0,.12) 18%,
      rgba(255,148,0,.055) 38%,
      rgba(255,148,0,.018) 55%,
      transparent 72%
    );

  pointer-events:none;

  z-index:4;

  transition:
    left .05s linear,
    top .05s linear;

}



/* ==========================================================
   ROS CORE - PÁGINA POLÍTICA DE PRIVACIDAD
========================================================== */

.pagina-legal{
  min-height:100vh;
  padding:150px 0 110px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255,148,0,.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 5% 65%,
      rgba(255,148,0,.055),
      transparent 25%
    ),
    var(--negro);
}


/* CONTENEDOR */

.legal-contenido{
  max-width:950px;
  margin:auto;
}


/* BOTÓN VOLVER */

.volver-inicio{
  display:inline-flex;
  align-items:center;
  gap:8px;

  margin-bottom:45px;

  color:#999;

  font-size:.72rem;
  font-weight:700;

  text-transform:uppercase;

  transition:.25s ease;
}

.volver-inicio:hover{
  color:var(--naranja);
}


/* ETIQUETA */

.legal-etiqueta{
  display:block;

  color:var(--naranja);

  font-size:.72rem;
  font-weight:800;

  letter-spacing:.20em;

  text-transform:uppercase;
}


/* TÍTULO */

.legal-contenido h1{
  margin-top:15px;

  max-width:800px;

  font-family:"Orbitron",sans-serif;

  font-size:clamp(
    2.6rem,
    6vw,
    5rem
  );

  line-height:1.05;

  letter-spacing:-.04em;

  text-transform:uppercase;
}

.legal-contenido h1 span{
  display:block;

  color:var(--naranja);

  text-shadow:
    0 0 35px
    rgba(255,148,0,.20);
}


/* LÍNEA NARANJA */

.legal-linea{
  width:80px;
  height:3px;

  margin:
    25px
    0
    35px;

  background:
    var(--naranja);

  box-shadow:
    0 0 18px
    rgba(255,148,0,.45);
}


/* PÁRRAFOS */

.legal-contenido p{
  margin-bottom:17px;

  color:#bdbdbd;

  font-size:.9rem;

  line-height:1.9;
}


/* SUBTÍTULOS */

.legal-contenido h2{
  position:relative;

  margin-top:50px;
  margin-bottom:18px;

  padding-bottom:13px;

  color:var(--naranja);

  font-family:"Orbitron",sans-serif;

  font-size:1rem;

  line-height:1.5;

  text-transform:uppercase;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);
}


/* LISTAS */

.legal-contenido ul{
  margin:
    20px
    0
    25px;

  padding-left:0;

  list-style:none;
}

.legal-contenido li{
  position:relative;

  margin-bottom:11px;

  padding-left:23px;

  color:#aaa;

  font-size:.87rem;

  line-height:1.7;
}


/* PUNTOS NARANJA */

.legal-contenido li::before{
  content:"";

  position:absolute;

  left:2px;
  top:9px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--naranja);

  box-shadow:
    0 0 9px
    rgba(255,148,0,.7);
}


/* LINKS */

.legal-contenido a{
  color:var(--naranja);

  transition:.25s ease;
}

.legal-contenido a:hover{
  color:var(--naranja-claro);
}


/* TEXTO IMPORTANTE */

.legal-contenido strong{
  color:#fff;
}


/* ==========================================================
   FOOTER LEGAL
========================================================== */

.legal-pie{
  display:flex;

  align-items:center;

  gap:22px;

  flex-wrap:wrap;
}

.legal-pie a{
  color:var(--naranja);

  font-size:.67rem;

  transition:.25s ease;
}

.legal-pie a:hover{
  color:#fff;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:790px){

  .pagina-legal{
    padding:
      120px
      0
      80px;
  }

  .legal-contenido h1{
    font-size:
      clamp(
        2.3rem,
        11vw,
        3.6rem
      );
  }

  .legal-contenido h2{
    margin-top:40px;

    font-size:.9rem;
  }

  .legal-contenido p,
  .legal-contenido li{
    font-size:.82rem;
  }

  .legal-pie{
    justify-content:center;
  }
/* ==========================================================
   CENTRO LEGAL - FOOTER
========================================================== */

.columna-legal{
  padding-left:20px;
  border-left:1px solid rgba(255,148,0,.25);
}

.columna-legal h3{
  color:var(--naranja);
}

.columna-legal a{
  position:relative;
  padding-left:13px;
}

.columna-legal a::before{
  content:"";

  position:absolute;
  left:0;
  top:50%;

  width:5px;
  height:5px;

  transform:translateY(-50%);

  border-radius:50%;

  background:var(--naranja);

  opacity:.55;

  transition:.25s ease;
}

.columna-legal a:hover{
  color:var(--naranja);
  transform:translateX(3px);
}

.columna-legal a:hover::before{
  opacity:1;

  box-shadow:
    0 0 8px
    rgba(255,148,0,.8);
}
}
/* ==========================================================
   CENTRO LEGAL - ROS CORE
========================================================== */

.centro-legal{
  min-height:100vh;
  padding-top:86px;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(255,148,0,.10),
      transparent 28%
    ),
    #050505;
}


/* ==========================================================
   PORTADA CENTRO LEGAL
========================================================== */

.centro-legal-portada{
  position:relative;
  padding:75px 0 65px;

  border-bottom:
    1px solid rgba(255,148,0,.18);

  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.98),
      rgba(5,5,5,.88)
    );
}


.centro-legal-portada::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:45px 45px;
}


.centro-legal-portada .contenedor{
  position:relative;
  z-index:2;
}


.centro-legal-volver{
  display:inline-flex;
  align-items:center;

  margin-bottom:35px;

  color:#9c9c9c;

  font-size:.70rem;
  font-weight:700;

  letter-spacing:.08em;

  transition:.25s ease;
}


.centro-legal-volver:hover{
  color:var(--naranja);
}


.centro-legal-etiqueta{
  display:block;

  margin-bottom:12px;

  color:var(--naranja);

  font-size:.72rem;
  font-weight:800;

  letter-spacing:.18em;

  text-transform:uppercase;
}


.centro-legal-portada h1{
  font-family:"Orbitron",sans-serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.7rem
    );

  line-height:.95;

  letter-spacing:-.055em;

  text-transform:uppercase;
}


.centro-legal-portada h1 span{
  display:block;

  color:var(--naranja);

  text-shadow:
    0 0 35px
    rgba(255,148,0,.18);
}


.centro-legal-linea{
  width:85px;
  height:3px;

  margin:
    28px
    0
    24px;

  background:var(--naranja);

  position:relative;
}


.centro-legal-linea::after{
  content:"";

  position:absolute;

  width:8px;
  height:8px;

  right:-2px;
  top:-2px;

  border-radius:50%;

  background:var(--naranja);

  box-shadow:
    0 0 15px
    var(--naranja);
}


.centro-legal-portada p{
  max-width:650px;

  color:#bdbdbd;

  font-size:.92rem;

  line-height:1.8;
}


/* ==========================================================
   DOCUMENTOS LEGALES
========================================================== */

.centro-legal-documentos{
  padding:80px 0 110px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,148,0,.055),
      transparent 35%
    );
}


.centro-legal-titulo{
  text-align:center;

  max-width:700px;

  margin:
    0
    auto
    50px;
}


.centro-legal-titulo > span{
  color:var(--naranja);

  font-size:.70rem;

  font-weight:800;

  letter-spacing:.15em;

  text-transform:uppercase;
}


.centro-legal-titulo h2{
  margin-top:10px;

  font-family:"Orbitron",sans-serif;

  font-size:
    clamp(
      2rem,
      4vw,
      3.3rem
    );

  text-transform:uppercase;

  letter-spacing:-.035em;
}


.centro-legal-titulo h2 b{
  color:var(--naranja);
}


.centro-legal-titulo p{
  margin-top:15px;

  color:#969696;

  font-size:.88rem;
}


/* ==========================================================
   TARJETAS
========================================================== */

.centro-legal-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:20px;

  max-width:950px;

  margin:auto;
}


.centro-legal-card{
  min-height:320px;

  padding:30px;

  position:relative;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.01)
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.centro-legal-card::before{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-130px;
  top:-130px;

  border-radius:50%;

  background:var(--naranja);

  filter:blur(100px);

  opacity:0;

  transition:.3s ease;
}


.centro-legal-card:hover{
  transform:translateY(-7px);

  border-color:
    rgba(255,148,0,.50);

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.45);
}


.centro-legal-card:hover::before{
  opacity:.17;
}


.centro-legal-card-destacada{
  border-color:
    rgba(255,148,0,.32);

  background:
    linear-gradient(
      145deg,
      rgba(255,148,0,.075),
      rgba(255,255,255,.015)
    );
}


.centro-legal-numero{
  position:absolute;

  right:25px;
  top:23px;

  color:#666;

  font-family:"Orbitron",sans-serif;

  font-size:.70rem;

  font-weight:700;
}


.centro-legal-icono{
  width:60px;
  height:60px;

  margin-bottom:25px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,148,0,.30);

  border-radius:12px;

  background:
    rgba(255,148,0,.08);

  color:var(--naranja);

  font-family:"Orbitron",sans-serif;

  font-size:1.5rem;

  font-weight:800;
}


.centro-legal-tipo{
  display:block;

  margin-bottom:8px;

  color:var(--naranja);

  font-size:.62rem;

  font-weight:800;

  letter-spacing:.13em;

  text-transform:uppercase;
}


.centro-legal-card h3{
  margin-bottom:15px;

  color:#fff;

  font-size:1.05rem;

  text-transform:uppercase;
}


.centro-legal-card p{
  flex:1;

  color:#aaa;

  font-size:.78rem;

  line-height:1.7;
}


.centro-legal-card strong{
  display:block;

  margin-top:25px;

  color:var(--naranja);

  font-size:.68rem;

  letter-spacing:.05em;

  transition:.25s ease;
}


.centro-legal-card:hover strong{
  transform:translateX(5px);
}


/* ==========================================================
   CENTRO LEGAL - RESPONSIVE
========================================================== */

@media(max-width:790px){

  .centro-legal{
    padding-top:72px;
  }


  .centro-legal-portada{
    padding:
      50px
      0
      45px;
  }


  .centro-legal-volver{
    margin-bottom:28px;
  }


  .centro-legal-portada h1{
    font-size:
      clamp(
        2.7rem,
        14vw,
        4.2rem
      );
  }


  .centro-legal-documentos{
    padding:
      60px
      0
      80px;
  }


  .centro-legal-grid{
    grid-template-columns:1fr;

    gap:15px;
  }


  .centro-legal-card{
    min-height:290px;

    padding:25px;
  }

}

/* ==========================================================
   TERMINOS Y CONDICIONES - ROS CORE
========================================================== */

.terminos-pagina{
  min-height:100vh;
  padding-top:86px;
  background:#050505;
}


/* ==========================================================
   PORTADA
========================================================== */

.terminos-portada{
  position:relative;
  padding:65px 0 55px;
  overflow:hidden;

  border-bottom:
    1px solid rgba(255,148,0,.16);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(255,148,0,.11),
      transparent 30%
    ),
    #050505;
}


.terminos-portada::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:45px 45px;
}


.terminos-portada .contenedor{
  position:relative;
  z-index:2;
}


.terminos-volver{
  display:inline-flex;
  margin-bottom:30px;

  color:#8f8f8f;

  font-size:.68rem;
  font-weight:700;

  letter-spacing:.1em;

  transition:.25s ease;
}


.terminos-volver:hover{
  color:var(--naranja);
}


.terminos-etiqueta{
  display:block;

  margin-bottom:10px;

  color:var(--naranja);

  font-size:.67rem;
  font-weight:800;

  letter-spacing:.17em;

  text-transform:uppercase;
}


.terminos-portada h1{
  max-width:900px;

  font-family:"Orbitron",sans-serif;

  font-size:
    clamp(
      2.8rem,
      5.5vw,
      5.4rem
    );

  line-height:.95;

  letter-spacing:-.055em;

  text-transform:uppercase;
}


.terminos-portada h1 span{
  display:block;

  color:var(--naranja);

  text-shadow:
    0 0 35px
    rgba(255,148,0,.18);
}


.terminos-linea{
  width:90px;
  height:3px;

  margin:27px 0;

  position:relative;

  background:var(--naranja);
}


.terminos-linea::after{
  content:"";

  position:absolute;

  right:-2px;
  top:-2px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--naranja);

  box-shadow:
    0 0 15px
    rgba(255,148,0,.8);
}


/* ==========================================================
   INFORMACION DEL DOCUMENTO
========================================================== */

.terminos-meta{
  display:flex;
  align-items:center;

  gap:50px;

  margin-top:10px;
}


.terminos-meta > div{
  display:flex;
  flex-direction:column;

  gap:5px;
}


.terminos-meta span{
  color:#707070;

  font-size:.58rem;
  font-weight:800;

  letter-spacing:.13em;
}


.terminos-meta strong{
  color:#c9c9c9;

  font-size:.72rem;
  font-weight:600;
}


/* ==========================================================
   BUSCADOR Y HERRAMIENTAS
========================================================== */

.terminos-herramientas{
  position:relative;
  z-index:5;

  padding:28px 0 25px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  background:#090909;
}


.terminos-buscador{
  width:100%;

  height:58px;

  position:relative;

  display:flex;
  align-items:center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:10px;

  background:#0e0e0e;

  transition:.25s ease;
}


.terminos-buscador:focus-within{
  border-color:
    rgba(255,148,0,.65);

  box-shadow:
    0 0 0 3px
    rgba(255,148,0,.07);
}


.terminos-buscador-icono{
  width:55px;

  display:grid;
  place-items:center;

  color:var(--naranja);

  font-size:1.5rem;
}


.terminos-buscador input{
  width:100%;
  height:100%;

  padding-right:20px;

  border:0;
  outline:0;

  background:transparent;

  color:#f5f5f5;

  font-family:"Montserrat",sans-serif;

  font-size:.80rem;
}


.terminos-buscador input::placeholder{
  color:#666;
}


/* ==========================================================
   FILTROS
========================================================== */

.terminos-filtros{
  display:flex;

  gap:8px;

  margin-top:15px;

  overflow-x:auto;

  scrollbar-width:none;
}


.terminos-filtros::-webkit-scrollbar{
  display:none;
}


.terminos-filtro{
  flex:0 0 auto;

  padding:9px 16px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:100px;

  background:#101010;

  color:#8f8f8f;

  cursor:pointer;

  font-family:"Montserrat",sans-serif;

  font-size:.64rem;
  font-weight:700;

  transition:.25s ease;
}


.terminos-filtro:hover{
  color:#fff;

  border-color:
    rgba(255,148,0,.35);
}


.terminos-filtro.activo{
  border-color:var(--naranja);

  background:var(--naranja);

  color:#050505;
}


/* ==========================================================
   CONTENIDO
========================================================== */

.terminos-contenido{
  padding:50px 0 110px;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(255,148,0,.04),
      transparent 25%
    ),
    #050505;
}


.terminos-layout{
  display:grid;

  grid-template-columns:
    260px minmax(0,1fr);

  gap:30px;

  align-items:start;
}


/* ==========================================================
   INDICE IZQUIERDO
========================================================== */

.terminos-indice{
  position:sticky;

  top:115px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:12px;

  overflow:hidden;

  background:#0c0c0c;
}


.terminos-indice-cabecera{
  padding:22px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}


.terminos-indice-cabecera span{
  color:var(--naranja);

  font-size:.58rem;
  font-weight:800;

  letter-spacing:.15em;
}


.terminos-indice-cabecera h2{
  margin-top:5px;

  color:#fff;

  font-family:"Orbitron",sans-serif;

  font-size:.95rem;

  text-transform:uppercase;
}


.terminos-indice-lista{
  display:flex;
  flex-direction:column;

  padding:8px;
}


.terminos-indice-lista button{
  width:100%;

  padding:13px 12px;

  border:0;

  border-left:
    2px solid
    transparent;

  background:transparent;

  color:#818181;

  cursor:pointer;

  text-align:left;

  font-family:"Montserrat",sans-serif;

  font-size:.68rem;

  transition:.2s ease;
}


.terminos-indice-lista button:hover{
  color:#fff;

  background:
    rgba(255,255,255,.025);
}


.terminos-indice-lista button.activo{
  border-left-color:
    var(--naranja);

  background:
    rgba(255,148,0,.07);

  color:var(--naranja);
}


/* ==========================================================
   NOTA LATERAL
========================================================== */

.terminos-nota{
  margin:8px;

  padding:17px;

  border:
    1px solid
    rgba(255,148,0,.15);

  border-radius:8px;

  background:
    rgba(255,148,0,.035);
}


.terminos-nota span{
  color:var(--naranja);

  font-size:.54rem;
  font-weight:800;

  letter-spacing:.12em;
}


.terminos-nota p{
  margin-top:8px;

  color:#777;

  font-size:.62rem;

  line-height:1.6;
}


/* ==========================================================
   LISTADO
========================================================== */

.terminos-listado{
  min-width:0;
}


.terminos-listado-cabecera{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  margin-bottom:20px;
}


.terminos-listado-cabecera span{
  color:var(--naranja);

  font-size:.58rem;
  font-weight:800;

  letter-spacing:.14em;
}


.terminos-listado-cabecera h2{
  margin-top:5px;

  font-family:"Orbitron",sans-serif;

  font-size:
    clamp(
      1.3rem,
      2vw,
      1.8rem
    );

  text-transform:uppercase;
}


/* ==========================================================
   ACORDEONES
========================================================== */

.terminos-acordeones{
  display:flex;

  flex-direction:column;

  gap:8px;
}


.termino-item{
  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:9px;

  background:#0d0d0d;

  transition:
    border-color .25s ease,
    background .25s ease;
}


.termino-item:hover{
  border-color:
    rgba(255,148,0,.28);
}


.termino-item.abierto{
  border-color:
    rgba(255,148,0,.45);

  background:#10100f;
}


/* CABECERA */

.termino-cabecera{
  width:100%;

  min-height:70px;

  padding:0 20px;

  display:grid;

  grid-template-columns:
    50px 1fr 35px;

  align-items:center;

  gap:10px;

  border:0;

  background:transparent;

  color:#fff;

  cursor:pointer;

  text-align:left;

  font-family:"Montserrat",sans-serif;
}


.termino-numero{
  color:var(--naranja);

  font-family:"Orbitron",sans-serif;

  font-size:.67rem;

  font-weight:700;
}


.termino-titulo{
  color:#d8d8d8;

  font-size:.72rem;

  font-weight:700;

  letter-spacing:.025em;
}


.termino-flecha{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  justify-self:end;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:50%;

  color:#888;

  font-size:1rem;

  transition:
    transform .3s ease,
    color .3s ease,
    border-color .3s ease;
}


.termino-item.abierto
.termino-flecha{
  transform:rotate(45deg);

  color:var(--naranja);

  border-color:
    rgba(255,148,0,.40);
}


/* ==========================================================
   CONTENIDO DEL ACORDEON
========================================================== */

.termino-respuesta{
  display:grid;

  grid-template-rows:0fr;

  transition:
    grid-template-rows .35s ease;
}


.termino-item.abierto
.termino-respuesta{
  grid-template-rows:1fr;
}


.termino-respuesta-interior{
  overflow:hidden;
}


.termino-respuesta-interior > *{
  margin-left:70px;
  margin-right:55px;
}


.termino-respuesta-interior p{
  padding:
    0
    0
    25px;

  color:#a5a5a5;

  font-size:.72rem;

  line-height:1.8;
}


.termino-item.abierto
.termino-cabecera{
  border-bottom:
    1px solid
    rgba(255,255,255,.06);
}


/* ==========================================================
   SIN RESULTADOS
========================================================== */

.terminos-sin-resultados{
  display:none;

  padding:45px 20px;

  margin-top:10px;

  border:
    1px dashed
    rgba(255,255,255,.13);

  border-radius:10px;

  color:#777;

  text-align:center;

  font-size:.75rem;
}


/* ==========================================================
   RESPONSIVE - TABLET
========================================================== */

@media(max-width:950px){

  .terminos-layout{
    grid-template-columns:
      220px minmax(0,1fr);

    gap:20px;
  }

}


/* ==========================================================
   RESPONSIVE - CELULAR
========================================================== */

@media(max-width:790px){

  .terminos-pagina{
    padding-top:72px;
  }


  .terminos-portada{
    padding:
      45px
      0
      40px;
  }


  .terminos-volver{
    margin-bottom:25px;
  }


  .terminos-portada h1{
    font-size:
      clamp(
        2.1rem,
        13vw,
        4rem
      );
  }


  .terminos-meta{
    gap:25px;

    align-items:flex-start;

    flex-direction:column;
  }


  .terminos-herramientas{
    padding:
      20px
      0;
  }


  .terminos-buscador{
    height:54px;
  }
  
.terminos-buscador-icono{
  width:46px;
  font-size:1.3rem;
}

  .terminos-filtros{
    margin-top:12px;
  }


  .terminos-contenido{
    padding:
      35px
      0
      80px;
  }


  .terminos-layout{
    display:block;
  }


  /* OCULTAMOS ÍNDICE LATERAL */

  .terminos-indice{
    display:none;
  }


  .terminos-listado-cabecera{
    margin-bottom:15px;
  }


  .termino-cabecera{
    min-height:65px;

    padding:
      0
      15px;

    grid-template-columns:
      38px
      1fr
      30px;

    gap:7px;
  }


  .termino-numero{
    font-size:.60rem;
  }


  .termino-titulo{
    font-size:.66rem;

    line-height:1.4;
  }


  .termino-flecha{
    width:25px;
    height:25px;
  }


  .termino-respuesta-interior > *{
    margin-left:18px;

    margin-right:18px;
  }


  .termino-respuesta-interior p{
    padding-bottom:22px;

    font-size:.78rem;
  }

.terminos-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  overflow-x:visible;
}
}
/* ==========================================================
   INTRODUCCION - MARCO LEGAL ROS CORE
========================================================== */

.terminos-introduccion{
  margin-bottom:30px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,148,0,.22);

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      rgba(255,148,0,.055),
      rgba(255,255,255,.015)
    ),
    #0b0b0b;
}


/* CABECERA */

.terminos-introduccion-cabecera{
  padding:28px 30px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(255,148,0,.12),
      transparent 35%
    );
}


.terminos-introduccion-etiqueta{
  display:block;

  margin-bottom:8px;

  color:var(--naranja);

  font-size:.58rem;
  font-weight:800;

  letter-spacing:.16em;
}


.terminos-introduccion-cabecera h3{
  max-width:700px;

  color:#f5f5f5;

  font-family:"Orbitron",sans-serif;

  font-size:
    clamp(
      1rem,
      2vw,
      1.4rem
    );

  line-height:1.35;
}


.terminos-introduccion-titular{
  margin-top:12px;

  color:#8e8e8e;

  font-size:.68rem;

  line-height:1.6;
}


/* CONTENIDO */

.terminos-introduccion-contenido{
  padding:28px 30px;
}


.terminos-introduccion-contenido > p{
  margin-bottom:17px;

  color:#a7a7a7;

  font-size:.72rem;

  line-height:1.85;
}


.terminos-introduccion-contenido > p:last-of-type{
  margin-bottom:0;
}


/* DESTACADO 48 APARTADOS */

.terminos-introduccion-destacado{
  display:grid;

  grid-template-columns:
    65px 1fr;

  align-items:center;

  gap:20px;

  margin-top:27px;

  padding:20px;

  border:
    1px solid
    rgba(255,148,0,.25);

  border-radius:9px;

  background:
    rgba(255,148,0,.045);
}


.terminos-introduccion-destacado > span{
  color:var(--naranja);

  font-family:"Orbitron",sans-serif;

  font-size:1.7rem;

  font-weight:800;

  text-align:center;
}


.terminos-introduccion-destacado p{
  margin:0;

  color:#aaa;

  font-size:.68rem;

  line-height:1.7;
}


/* ==========================================================
   SUBAPARTADOS DE LOS TERMINOS
========================================================== */

.termino-texto h4{
  margin:
    22px
    55px
    8px
    70px;

  padding-left:12px;

  border-left:
    2px solid
    var(--naranja);

  color:#dedede;

  font-family:"Montserrat",sans-serif;

  font-size:.70rem;

  font-weight:700;

  line-height:1.5;
}


.termino-texto strong{
  color:#d7d7d7;

  font-weight:700;
}


/* ==========================================================
   RESPONSIVE INTRODUCCION
========================================================== */

@media(max-width:790px){

  .terminos-introduccion-cabecera{
    padding:
      22px
      20px;
  }


  .terminos-introduccion-contenido{
    padding:
      22px
      20px;
  }


  .terminos-introduccion-contenido > p{
    font-size:.68rem;
  }


  .terminos-introduccion-destacado{
    grid-template-columns:
      50px 1fr;

    gap:12px;

    padding:15px;
  }


  .terminos-introduccion-destacado > span{
    font-size:1.35rem;
  }


  .terminos-introduccion-destacado p{
    font-size:.63rem;
  }


  .termino-texto h4{
    margin:
      20px
      20px
      8px
      53px;

    font-size:.66rem;
  }

}
/* =====================================================
   CONTADOR DE RESULTADOS - CENTRO LEGAL
===================================================== */

.terminos-contador-busqueda{
  margin-top: 10px;
  min-height: 20px;

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;

  color: var(--naranja);

  letter-spacing: .3px;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.terminos-contador-busqueda:empty{
  opacity: 0;
  transform: translateY(-4px);
}


.terminos-contador-busqueda:not(:empty){
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   PALABRAS RESALTADAS EN EL BUSCADOR
===================================================== */

.terminos-resaltado{
  background: rgba(255, 148, 0, .18);
  color: var(--naranja-claro);

  padding: 1px 4px;
  margin: 0 1px;

  border-radius: 4px;

  box-shadow:
    inset 0 -1px 0 rgba(255, 148, 0, .55);

  font-weight: 700;
}

/* ==========================================================
   CORRECCIÓN RESPONSIVE PORTADA - CELULAR
========================================================== */

@media (max-width: 600px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .contenedor{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
    margin:0 auto;
  }

  /* HEADER */

  .barra-navegacion{
    width:100%;
    height:82px;
    padding-left:18px;
    padding-right:18px;
  }

  .logo{
    max-width:210px;
  }

  .logo img{
    width:100%;
    height:auto;
  }

  /* PORTADA */

  .portada{
    width:100%;
    min-height:auto;
    padding-top:82px;
    overflow:hidden;
  }

  .portada-contenido{
    width:100%;
    min-height:auto;
    display:block;
    padding-top:70px;
    padding-bottom:55px;
  }

  .portada-texto{
    width:100%;
    max-width:100%;
    min-width:0;
    text-align:center;
  }

  /* TEXTO SUPERIOR */

  .etiqueta{
    display:block;
    width:100%;
    font-size:.62rem;
    line-height:1.5;
    letter-spacing:.13em;
    white-space:normal;
  }

  /* TÍTULO */

  .portada h1{
    width:100%;
    max-width:100%;
    margin:20px auto 0;

    font-size:clamp(2rem, 9vw, 2.8rem);
    line-height:1.08;
    letter-spacing:-.04em;

    overflow-wrap:break-word;
    word-break:normal;
  }

  .portada h1 span{
    display:block;
    width:100%;
  }

  /* LÍNEA NARANJA */

  .linea-titulo{
    justify-content:center;
    margin:24px 0 22px;
  }

  /* PÁRRAFO */

  .portada-texto > p{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;

    font-size:.92rem;
    line-height:1.7;

    overflow-wrap:break-word;
  }

  /* BOTONES */

  .acciones-portada{
    width:100%;
    margin-top:28px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .acciones-portada .boton{
    width:100%;
    max-width:100%;
  }

  /* INDICADORES */

  .indicadores-portada{
    width:100%;
    margin-top:38px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
  }

  .indicadores-portada div{
    min-width:0;
    width:100%;
    padding:0 8px;
  }

  .indicadores-portada strong{
    font-size:1rem;
  }

  .indicadores-portada span{
    font-size:.58rem;
    line-height:1.4;
  }

  /* OCULTAMOS EL GRÁFICO GRANDE DE ESCRITORIO */

  .portada-grafico{
    display:none;
  }

  /* EVITAR QUE ELEMENTOS DECORATIVOS GENEREN ANCHO EXTRA */

  .resplandor{
    max-width:100vw;
  }

  @media (max-width: 600px){

  #hexagonos-cursor{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }

}
}