*{
    margin: 0;
    padding: 0
}
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    background-image: url("img/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;   /* La imagen se ajusta proporcionalmente */
    background-position: center; /* Centra la imagen en cualquier pantalla */
    width: 100%;   /* Ocupa todo el ancho */
    min-height: 100vh;  /* Al menos toda la altura de la pantalla */
    z-index: 40;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .wrapper {
        background-attachment: hidden; /* Evita problemas en móviles */
    }
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    background: #000;
    overflow: hidden; /* Bloquea el scroll */
}
/* Opcional: Para que el contenido dentro sea flexible */
.wrapper > * {
    max-width: 1200px; /* Para que no se estire demasiado en pantallas grandes */
    margin: 0 auto; 
    padding: 15px;
}
.opacity {
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
z-index: -1;
}
.gravity {
	width: 100%;
	text-align: center;
	padding: 70px 0;
}
.logo {
  width: 30%;
  text-align: center; /* Esto solo centra el texto *dentro* del elemento */
  padding: 70px 0;
  /* crentra logo (Este es un comentario informal) */

}
.gravity P {
  color: #d0d0d0;
  font-family: "Raleway",sans-serif;
  font-size: 23px;
  font-weight: 600;
  text-align: center;
    padding-top: 90px
}
.countdown .back-text h4{
    color: red;
    background: red
}
#countdown {
  margin-top: 75px;
}
.email{
    text-align: center;
    padding-top: 50px;
    z-index: 100;
}
.email h2 {
  color: #fff;
  font-family: "Raleway",sans-serif;
  font-size: 25px;
  font-weight: 30;
  margin: 0px 0 20px;
}
.email h1 {
  color: #ffffff;
  font-family: "Raleway",sans-serif;
  font-size: 15px;
  font-weight: 30;
  margin: 10px 0 50px;
}
.email input[type="email"] {
    background: #403c3b;
    text-transform: uppercase;
    border: none;
    color: #fff;
    width: 390px;
    padding: 20px;
    font-size: 15px;
    border: 2px solid #eadada;
}
.email input[type="submit"] {
  background: #188588;
  border: medium none;
  color: #fff;
  font-size: 15px;
  padding: 10px;
  width: 100px;
  margin-left: -115px;
}
.email input[placeholder] {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
}
.social-icon {
	margin-top: 160px;
	padding: 25px 0;
}
.icon {
    width: 165px;
    margin: 0px auto;
}
.icon i {
  color: #fff;
  font-size: 21px;
  padding: 9px;
  color: #13a3a7;
}
.countDays{
    position: relative;
}
.countDays::after{
    position: absolute;
    content: 'Días';
    color: #fff;
    top: 0px;
    left: 10px;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}
.countHours{
    position: relative;
}
.countHours::after {
  color: #fff;
  content: "Horas";
  font-family: "Raleway",sans-serif;
  font-size: 20px;
  font-weight: 200;
  left: 2px;
  letter-spacing: 1px;
  position: absolute;
  top: 0;
}
.countMinutes{
    position: relative;
}
.countMinutes::after{
    position: absolute;
    content: 'Minutos';
    color: #fff;
    top: 0px;
    left: -10px;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}
.countSeconds{
    position: relative;
}
.countSeconds::after{
    position: absolute;
    content: 'Segundos';
    color: #fff;
    top: 0px;
    left: -10px;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}
.construccion-notice {
    /* Optional: set a common line height for the container */
    line-height: 1.1; 
}
.desarrollando-text {
    color: white;
    display: block; /* Make it take its own line */
    margin: 0;      /* Remove default top/bottom margin */
    padding: 0;
    line-height: 1.0; /* Ensure minimal line height for this specific line */
}
.sitio-text {
    margin-top: 0;  /* Remove default top margin from paragraph */
    padding-top: 0;
}
/* Add these rules to your style.css file */

.construccion-notice p {
    /* Remove default top and bottom margins for the text elements */
    margin: 0;
    padding: 0;
    /* Optional: Fine-tune the spacing between the two lines */
    line-height: 1.1; 
}

.desarrollando-text {
    /* Since we added the color inline, this might not be strictly needed, 
       but it's good practice for centralizing styles: */
    color: white; 
}

/* Optional: If the text is a different size or font, you can set it here: */
.sitio-text {
    /* For example, if you want "SITIO WEB EN CONSTRUCCIÓN" to be bigger/smaller */
    font-size: 1.5em;
}

/* Add these rules to your style.css file */

/* Ensure the container of the text has its margins reset */
.construccion-notice p {
    margin: 0;
    padding: 0;
    line-height: 1.1; 
}

.desarrollando-text {
    color: white; 
    font-size: 1.2em; /* Adjust as needed */
    margin-bottom: 5px; /* Add a small gap between the two lines if you like */
}

/* --- Styles for the Animated Technological Text --- */
.animated-tech-text {
    color: #00FF00; /* Bright green is a common tech color, change as desired */
    font-family: 'Press Start 2P', monospace; /* Or 'Orbitron', 'VT323', etc. */
    font-size: 1.8em; /* Make it a bit larger */
    text-align: center; /* Center the text */
    white-space: nowrap; /* Keep text on one line for typing effect */
    overflow: hidden; /* Hide overflowing text before animation */
    border-right: 0.15em solid orange; /* Blinking cursor effect */
    width: 0; /* Start with zero width to reveal characters */
    animation: 
        typing 4s steps(30, end) forwards, /* Typing animation */
        blink-caret .75s step-end infinite; /* Blinking cursor animation */
    margin: 20px auto 0; /* Top margin, auto horizontal margin for centering */
    max-width: 500px; /* con eso agrandas en tiempo de animacion */
}

/* Keyframes for the typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* Keyframes for the blinking caret/cursor */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; } /* Cursor color */
}

/* Adjustments for specific fonts if you choose them */
/* If using Orbitron (more modern techy) */
/*
.animated-tech-text {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
}
*/
/* If using VT323 (old terminal style) */
/*
.animated-tech-text {
    font-family: 'VT323', monospace;
    letter-spacing: 1px;
}
*/
/* Add this to style.css to guarantee centering within the col-md-12 */
.construccion-notice {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
}

/* If you use the flexbox above, you can remove margin: auto from .animated-tech-text 
   and just use padding/margin for spacing */
.animated-tech-text {
    /* ... other styles ... */
    margin: 20px 0 0; /* Only vertical margin needed now */
    text-align: center; /* Add text-align back in case the font rendering is weird */
}