:root {
   --bgcolor:           #181a1b; /* Light black    */
   --button-color:      #038857; /* Green          */
   --link-color:        #3391ff; /* Light Blue     */
   --text-color1:       #ffffff; /* White          */
   --text-color2:       #c0c0c0; /* Winter white   */
   --text-color3:       #ff0000; /* Red            */
   --text-color4:       #7ad06d; /* WhatsApp Green */
   --border-radius:     12px;
   --font-size0:        22px;
   --font-size1:        27px;
   --font-size2:        60px;
   --font-size3:        40px;
   --font-size4:        30px;
   --font-size5:        20px;
   --max-width:         1140px;
}

html {
   scroll-behavior:     smooth;
}

/* Body Properties */
body {
   background-color:    var(--bgcolor);
   font-size:           var(--font-size1);
   color:               var(--text-color2);
   max-width:           var(--max-width);
   margin:              0 auto;         /* Center the container horizontally on the screen */
   width:               100%;           /* Ensure that on mobile screens the content does not touch the edges */
   padding:             0 0px;          /* 20px; */
   background-color:    var(--bgcolor); /* Optional: Helps visualize the container area while designing */
   box-sizing:          border-box;     /* Fuerza a que el padding se quede ADENTRO del ancho útil */
   padding-left:        15px;
   padding-right:       15px;
}

/* Heading1 Properties */
h1 {
   font-family:         Georgia, serif;
   font-size:           var(--font-size2);
   color:               var(--text-color1);
}

/* A class that visually hides the element but keeps it accessible */
/* Necessary for pages other than "index.html" that do not contain the <h1> tag */
.visual-hidden {
   position:            absolute;
   width:               1px;
   height:              1px;
   padding:             0;
   margin:              -1px;
   overflow:            hidden;
   clip:                rect(0, 0, 0, 0);
   border:              0;
}

/* Paragraphs Properties */
.p1 {
   font-family:         Georgia, serif;;
}

.p2 {
   font-family:         Caveat, serif;;
   font-size:           var(--font-size3);
   color:               var(--text-color3);
}

.p3 {
   font-family:         Verdana, sans-serif;
   font-size:           var(--font-size5);
   color:               var(--text-color2);
}

.p4 {
   font-family:         Georgia, serif;;
   font-size:           var(--font-size3);
   display:             block; /* Display the arrow only if the screen is larger than 768px |'block' or 'inline', according to design */
}

.p5 {
   margin-bottom:       0;
   margin-top:          0;     /* Opcional: elimina también el espacio de arriba si lo necesitas */
}

.no-wrap {
   white-space:         nowrap;
}

/* Button Properties */
.button-link:link, .button-link:visited, .button-link:hover, .button-link:active  {
   font-family:         sans-serif;
   background-color:    var(--button-color);
   border:              none;
   color:               var(--text-color1);
   padding:             12px;
   text-align:          center;
   text-decoration:     none;
   display:             inline-block;
   font-size:           var(--font-size1);
   margin:              4px 2px;
   cursor:              pointer;
}

.button4 {
   border-radius:       var(--border-radius);
}

/* Horizonral Rule Properties */
hr.new {
   border-top:          1px;
   opacity:             40%;
}

/* Links Properties */
a:link {
   color:               var(--link-color);
   text-decoration:     none;
}

a:hover {
   color:               var(--link-color);
   text-decoration:     underline;
}

a:active {
   color:               var(--link-color);
   text-decoration:     underline;
}

a:visited {
   color:               var(--link-color);
   text-decoration:     none;
}

.link-hidden:link, .link-hidden:visited, .link-hidden:hover, .link-hidden:active {
   color:               var(--text-color2);
   text-decoration:     none;
}

a[href^="https"]:not([href*="alphastation.cl"])::after {
  content:              "";
  display:              inline-block;
  width:                1em;
  height:               1em;
  margin-left:          1px;
  vertical-align:       middle;
  background-color:     currentColor;  
  -webkit-mask-image:   url('../img/external-link.svg'); /* Usa el SVG como una máscara recortada */
  mask-image:           url('../img/external-link.svg');
  -webkit-mask-size:    contain;
  mask-size:            contain;
  -webkit-mask-mode:    alpha;
  mask-mode:            alpha;
}

.enlace-limpio::before, .enlace-limpio::after {
  content:              ""   !important;
  display:              none !important;
}

/* Sliders Properties */
.slider-container {
   position:            relative;
   width:               100%;
   max-width:           800px;
   margin:              auto;
   overflow:            hidden;
   border-radius:       var(--border-radius);
   box-shadow:          0 4px 10px rgba(0, 0, 0, 0.2);
}

.slider-slides {
   display:             flex;
   transition:          transform 0.6s ease-in-out;
   width:               100%;
}

.slide {
   min-width:           100%;
   box-sizing:          border-box;
}

.slide img {
   width:               100%;
   display:             block;
   height:              auto;
   object-fit:          cover;
}

.slider-arrow {
   position:            absolute;
   top:                 50%;
   transform:           translateY(-50%);
   background-color:    rgba(0, 0, 0, 0.5);
   color:               var(--text-color1);
   border:              none;
   font-size:           20px;
   padding:             15px;
   cursor:              pointer;
   border-radius:       50%;
   transition:          background-color 0.3s;
}

.slider-arrow:hover {
   background-color:    rgba(0, 0, 0, 0.8);
}

.arrow-left {
   left:                20px;
}

.arrow-right {
   right:               20px;
}

.slider-dots {
   position:            absolute;
   bottom:              15px;
   left:                50%;
   transform:           translateX(-50%);
   display:             flex;
   gap:                 10px;
}

.dot {
   width:               12px;
   height:              12px;
   background-color:    rgba(255, 255, 255, 0.5);
   border-radius:       50%;
   cursor:              pointer;
   transition:          background-color 0.3s;
}

.active.dot, .hover.dot {
   background-color:    var(--text-color1);
}

.container-image1 {
   position:            relative;
   display:             inline-block;
   width:               100%;
   max-width:           1140px;
}

.container-image1 img {
   width:               100%;
   height:              auto;
   display:             block;
   filter:              brightness(80%);
   border-radius:       var(--border-radius);
}

.text-layer {
   position:            absolute;
   top:                 0;
   left:                0;
   width:               100%;
   height:              100%;
   display:             flex;
   flex-direction:      column;
   justify-content:     center;                /* Vertical alignment (center) */
   align-items:         center;                /* Horizontal alignment (center) */
   text-align:          center;                /* Center multiline text */
   background:          rgba(0, 0, 0, 0.5);    /* Optional background to improve contrast */
   padding-left:        0px;                   /* Fixed space to the left of the image */
   padding-right:       0px;                   /* Fixed space to the right of the image */
   position:            absolute;
   bottom:              20px;                  /* It is separated by 20 pixels from the bottom edge of the parent. */
}

/* Reduce the space below the title */
.text-layer h1 {
   margin-top:          0;
/* margin-bottom:       40px; */               /* Minimum space downwards */
   margin-bottom:       10px;                  /* Minimum space downwards */
   color:               var(--text-color1);
}

/* Reduce the space above the paragraph */
.text-layer p {
   margin-top:          0;                     /* Remove the default space above */
   margin-bottom:       0;
   color:               var(--text-color2);
}

/* Images Properties */
.container-image2 {
   position:            relative;
   display:             inline-block;
   width:               100%;
   max-width:           1140px;
}
      
.container-image2 img {
   width:               100%;
   height:              auto;
   display:             block;
   filter:              brightness(100%);
   border-radius:       var(--border-radius);
}

table, th, td {
   border:              1px solid var(--text-color2);
   border-collapse:     collapse;
}

   th, td {
   padding:             10px;
}

video {
   width:               60%;
   height:              auto;
}

/* Mobil Properties */
@media (max-width: 768px) {
   /* Body Properties */
   body {
      --font-size0:     20px;
      --font-size1:     18px;
      --font-size2:     40px;
      background-color: var(--bgcolor);
      font-family:      Georgia, serif;
      font-size:        var(--font-size1);
      color:            var(--text-color2);
   }

   /* Paragraphs Properties */
   .p2 {
      font-family:      Caveat, serif;;
      font-size:        var(--font-size4);
      color:            var(--text-color3);
   }

   .p4 {
      font-family:      Georgia, serif;;
      display:          none; /* Hide the default arrow on small screens */
   }

   /* Reduce the space below the title */
   .text-layer h1 {
      margin-top:       0;
/*    margin-bottom:    14px; */           /* Minimum space downwards */
      margin-bottom:    00px;              /* Minimum space downwards */
      color:            var(--text-color1);
   }

   .slider-container {
      width:            100%;
   }

   video {
      width:            100%;
      height:           auto;
   }
}