/* ===================================================
   TECTELIN — Efectos adicionales (fondo + botones)
   Cargar DESPUÉS de tectelin-custom.css en el <head>:

   <link rel="stylesheet" href="assets/css/tectelin-custom.css" />
   <link rel="stylesheet" href="assets/css/tectelin-effects.css" />

   Todo aquí usa nombres propios (prefijo tct- en los
   keyframes, clases nuevas) para NO pisar ninguna clase
   de tectelin-custom.css. Es 100% aditivo.
   =================================================== */

/* =========================================================
   1) FONDO ANIMADO DE ESTRELLAS
   Uso: envolvé la sección donde lo quieras (ej. el hero)
   con .starfield y agregá adentro los 3 divs de capas.

   <section class="hero starfield" id="home">
     <div class="stars-layer layer-1"></div>
     <div class="stars-layer layer-2"></div>
     <div class="stars-layer layer-3"></div>
     ...el resto de tu contenido del hero sigue igual...
   </section>

   El fondo va DETRÁS de tu .hero-slides / .hero-scrim
   porque estas capas se insertan como primeros hijos y
   tienen z-index bajo; no interfieren con el contenido.
   ========================================================= */

.starfield{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at bottom, #321b35 0%, #090a0f 100%);
}

.starfield .stars-layer{
  position:absolute;
  top:0; left:0;
  width:1px;
  height:1px;
  background:transparent;
  z-index:0;
  pointer-events:none;
}

.starfield .layer-1{
  width:1px; height:1px;
  box-shadow:
    501px 811px #fff, 1450px 1324px #fff, 1093px 1780px #fff, 1469px 678px #fff,
    904px 741px #fff, 1160px 781px #fff, 1841px 1962px #fff, 1630px 1667px #fff,
    1788px 676px #fff, 367px 1734px #fff, 1343px 156px #fff, 1283px 1142px #fff,
    1062px 378px #fff, 1395px 467px #fff, 1017px 1891px #fff, 137px 1114px #fff,
    1767px 1403px #fff, 1543px 11px #fff, 1078px 181px #fff, 1189px 1574px #fff,
    1697px 1551px #fff, 439px 472px #fff, 1491px 677px #fff, 1364px 599px #fff,
    34px 382px #fff, 1221px 1584px #fff, 1266px 1499px #fff, 169px 1907px #fff,
    1219px 1125px #fff, 659px 18px #fff, 1731px 1959px #fff, 332px 1216px #fff,
    1913px 788px #fff, 80px 712px #fff, 326px 1605px #fff, 574px 1502px #fff,
    473px 1653px #fff, 404px 975px #fff, 322px 1797px #fff, 425px 1321px #fff,
    1121px 1797px #fff, 731px 647px #fff, 891px 1584px #fff, 1523px 109px #fff,
    1379px 244px #fff, 865px 1064px #fff, 493px 956px #fff, 624px 1380px #fff,
    440px 619px #fff, 1630px 767px #fff, 955px 1196px #fff, 62px 729px #fff,
    126px 946px #fff, 1256px 896px #fff, 1444px 256px #fff, 661px 1628px #fff,
    1078px 1716px #fff, 300px 737px #fff, 1734px 413px #fff, 1296px 129px #fff,
    1771px 1678px #fff, 977px 1764px #fff, 1879px 549px #fff, 665px 1531px #fff,
    89px 701px #fff, 1084px 1183px #fff, 1597px 1576px #fff, 1354px 1774px #fff,
    554px 1471px #fff, 1469px 287px #fff, 887px 106px #fff, 1962px 766px #fff,
    638px 805px #fff, 1651px 741px #fff, 1517px 1826px #fff, 24px 1152px #fff,
    507px 558px #fff, 1262px 652px #fff, 246px 1048px #fff, 1077px 421px #fff,
    1866px 1847px #fff, 1986px 1561px #fff, 704px 632px #fff, 1991px 1875px #fff,
    1227px 395px #fff, 45px 1116px #fff, 247px 786px #fff, 890px 607px #fff,
    787px 1235px #fff, 557px 524px #fff, 1582px 1285px #fff, 1725px 1366px #fff,
    952px 747px #fff, 251px 458px #fff, 1500px 1250px #fff, 1999px 1734px #fff,
    1336px 1955px #fff, 1705px 1464px #fff, 728px 697px #fff, 594px 510px #fff;
  animation: tct-star-move 50s linear infinite;
}
.starfield .layer-1::after{
  content:""; position:absolute; top:2000px; width:1px; height:1px;
  background:transparent; box-shadow:inherit;
}

.starfield .layer-2{
  width:2px; height:2px;
  box-shadow:
    1925px 1320px #fff, 693px 1778px #fff, 1016px 711px #fff, 1171px 563px #fff,
    661px 1919px #fff, 1610px 44px #fff, 1275px 140px #fff, 1208px 1802px #fff,
    1473px 1587px #fff, 11px 1117px #fff, 853px 1757px #fff, 1149px 937px #fff,
    1353px 428px #fff, 270px 279px #fff, 258px 1404px #fff, 417px 1188px #fff,
    286px 561px #fff, 393px 1765px #fff, 147px 881px #fff, 666px 1097px #fff,
    1425px 1278px #fff, 806px 156px #fff, 1252px 561px #fff, 218px 52px #fff,
    1371px 1980px #fff, 171px 745px #fff, 1424px 89px #fff, 137px 244px #fff,
    939px 1922px #fff, 137px 1080px #fff, 1757px 50px #fff, 904px 536px #fff,
    1938px 1001px #fff, 1172px 440px #fff, 72px 1475px #fff, 102px 121px #fff,
    804px 1671px #fff, 1314px 270px #fff, 440px 1341px #fff, 1216px 511px #fff,
    1061px 1523px #fff, 97px 274px #fff, 704px 1318px #fff, 52px 1872px #fff,
    1962px 296px #fff, 111px 289px #fff, 1157px 1236px #fff, 1347px 1451px #fff,
    820px 286px #fff, 1389px 1169px #fff, 644px 841px #fff, 1286px 522px #fff;
  animation: tct-star-move 100s linear infinite;
}
.starfield .layer-2::after{
  content:""; position:absolute; top:2000px; width:2px; height:2px;
  background:transparent; box-shadow:inherit;
}

.starfield .layer-3{
  width:3px; height:3px;
  box-shadow:
    200px 981px #fff, 1731px 521px #fff, 132px 1039px #fff, 1888px 1547px #fff,
    899px 1226px #fff, 1887px 580px #fff, 1548px 1092px #fff, 1626px 689px #fff,
    254px 1072px #fff, 1684px 1211px #fff, 672px 1267px #fff, 939px 668px #fff,
    1969px 645px #fff, 1126px 983px #fff, 457px 568px #fff, 476px 876px #fff,
    829px 1896px #fff, 1364px 1846px #fff, 1507px 1120px #fff, 936px 1948px #fff,
    1833px 832px #fff, 1424px 285px #fff, 1377px 1596px #fff, 432px 153px #fff,
    1348px 1410px #fff, 1529px 954px #fff, 1102px 387px #fff, 264px 297px #fff,
    811px 977px #fff, 1931px 673px #fff, 1734px 978px #fff, 1772px 1567px #fff,
    1197px 1400px #fff, 764px 282px #fff, 1103px 822px #fff, 872px 1803px #fff;
  animation: tct-star-move 150s linear infinite;
}
.starfield .layer-3::after{
  content:""; position:absolute; top:2000px; width:3px; height:3px;
  background:transparent; box-shadow:inherit;
}

@keyframes tct-star-move{
  from{ transform:translateY(0); }
  to{ transform:translateY(-2000px); }
}

/* Sobre fondo oscuro con estrellas, el scrim de tu hero sigue funcionando
   igual: .stars-layer queda por debajo de .hero-slides / .hero-scrim / .hero-content
   porque no le tocamos z-index a nada existente. */
@media (prefers-reduced-motion: reduce){
  .starfield .stars-layer{ animation:none; }
}

/* Si metés contenido normal (.wrap) dentro de .starfield,
   esto lo sube por encima de las capas de estrellas */
.starfield > .wrap{ position:relative; z-index:2; }

/* =========================================================
   2) BOTÓN — modelo "contorno dorado" (relleno al hover)
   Uso: agregalo COMO CLASE EXTRA junto a btn, sin
   reemplazar btn-primary/btn-ghost:

   <a class="btn-outline-gold" href="#planes">Ver planes</a>

   Por defecto usa el dorado original rgb(193,163,98).
   Si preferís que hable el rojo de marca, cambiá esa
   línea por var(--primary) — te lo dejo comentado abajo.
   ========================================================= */

.btn-outline-gold{
  display:inline-block;
  cursor:pointer;
  position:relative;
  padding:10px 24px;
  font-size:18px;
  color:rgb(193,163,98);
  border:2px solid rgb(193,163,98);
  border-radius:34px;
  background-color:transparent;
  font-weight:600;
  font-family:inherit;
  text-decoration:none;
  transition:all .3s cubic-bezier(.23,1,.32,1);
  overflow:hidden;
}
/* Versión en rojo de marca: descomentar y comentar la de arriba
.btn-outline-gold{
  color:var(--primary);
  border-color:var(--primary);
}
*/
.btn-outline-gold::before{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:50px;
  height:50px;
  border-radius:inherit;
  scale:0;
  z-index:-1;
  background-color:rgb(193,163,98);
  transition:all .6s cubic-bezier(.23,1,.32,1);
}
.btn-outline-gold:hover::before{ scale:3; }
.btn-outline-gold:hover{
  color:#212121;
  scale:1.1;
  box-shadow:0 0 20px rgba(193,163,98,.4);
}
.btn-outline-gold:active{ scale:1; }

/* =========================================================
   3) BOTÓN — modelo "texto con brillo" (shine)
   Uso: funciona mejor sobre fondo oscuro (ej. dentro del
   .hero, del .cta-final, o del propio .starfield).

   <a class="btn-shine-text" href="#contacto">Contáctanos</a>
   ========================================================= */

.btn-shine-text{
  display:inline-block;
  padding:12px 48px;
  color:#fff;
  background-image:linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position:0;
  background-repeat:no-repeat;
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:tct-shine 3s infinite linear;
  animation-fill-mode:forwards;
  -webkit-text-size-adjust:none;
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  white-space:nowrap;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.25);
}
@keyframes tct-shine{
  0%{ background-position:0; }
  60%{ background-position:180px; }
  100%{ background-position:180px; }
}