/* MOVIL OCULTAR */
@media (max-width: 480px) {
  .ocultar-movil {
    display: none;
  }
}

/* Mostrar solo en móvil */
.mostrar-movil {
  display: none; /* oculto por defecto */
}

@media (max-width: 480px) {
  .mostrar-movil {
    display: inline-block; /* o block según el caso */
  }
}


html{
    scroll-behavior: smooth;
} 

/* FUENTES */
@font-face {
  font-family: 'tipografia-regular';
  src: url('CenturyRegular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'tipografia-bold';
  src: url('CenturyBold.woff2') format('woff2');
  font-display: swap;
}
.tipo {
  font-family: 'tipografia-regular',
    system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.tipo-bold {
  font-family: 'tipografia-bold',
    system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}



/* RESET BÁSICO */
* {
  margin: 0;
  padding: 0;
}

/* BASE TIPOGRÁFICA */
body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: black;
  background: #fff;
}



/* TÍTULOS */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { font-size: 1.0rem; }



/* CONTENEDOR */
.container {
  max-width: 1400px;
  margin: auto;
  padding:0px 10px;
}

/* BOTON VERDE */
    .link-animado-verde {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 20px;
        text-decoration: none;
        color:black;
        background-color:white;
        border: 1px solid grey;
        border-radius: 15px;
        transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.2s ease;
        }
    .link-animado-verde:hover {
        background-color: yellowgreen;
        color:white;
        border: 1px solid white ;
        filter: drop-shadow(0 2px 10px rgba(60, 179, 113, 0.5));
        }
        
/* BOTON NARANJA */
    .link-animado-naranja {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 20px;
        text-decoration: none;
        color:black;
        background-color:white;
        border: 1px solid grey;
        border-radius: 15px;
        transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.2s ease;
        }
    .link-animado-naranja:hover {
        background-color: orange;
        color:white;
        border: 1px solid white ;
        filter: drop-shadow(0 2px 10px rgba(255, 140, 0, 0.5));
        }   
        
/* BOTON ROJO */
.link-animado-rojo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 20px;
    text-decoration: none;
    color: black;
    background-color: white;
    border: 1px solid red;
    border-radius: 15px;

    animation: pulso-borde 2.2s infinite ease-in-out;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.2s ease;
}

.link-animado-rojo:hover {
    background-color: red;
    color: white;
    border-color: white;
    animation: none; /* se detiene el pulso */
    transform: scale(1.04);
}
 
        

@keyframes pulso-borde {
    0% {
        border-color: red;
        box-shadow: 0 0 0 rgba(178, 34, 34, 0);
    }
    50% {
        border-color: white;
        box-shadow: 0 0 12px rgba(178, 34, 34, 0.6);
    }
    100% {
        border-color: red;
        box-shadow: 0 0 0 rgba(178, 34, 34, 0);
    }
}



/* COLORES  */

.color-verde {
  background: linear-gradient(
    35deg,
    Goldenrod,
    LimeGreen,
    LightSkyBlue
  );
  background-size: 300% 300%;
  animation: moverDegradado1 6s ease infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes moverDegradado1 {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.color-naranja {
  background: linear-gradient(
    135deg,
     MediumSlateBlue,
    Tomato,
    orange,
   gold
  );
  background-size: 400% 400%;
  animation: moverDegradado2 8s linear infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes moverDegradado2 {
  0%   { background-position: 100% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 100% 0%; }
}


.color-rojo {
  background: linear-gradient(
    135deg,
    red,
    Tomato,
    Red,
    AliceBlue
  );
  background-size: 400% 400%;
  animation: moverDegradado3 8s linear infinite;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes moverDegradado3 {
  0%   { background-position: 100% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 100% 0%; }
}


/* CARDS  */
.grid-services {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.sombra {
  box-shadow: 0 1px 10px rgba(112, 128, 144, 0.3);
}

.card {
  background-color:white; 
  border-radius:20px; padding:20px;
  flex: 1 1 ;
  min-width: 400px;
  transition: transform .3s ease;
}

.card-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(70, 130, 180, 0.7);
}
.card-texto {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}
@media (max-width: 768px) {
  .card-texto {
  box-sizing: border-box; 
  width: 100%;
  overflow-wrap: break-word;
  padding: 10px;
  }
}

@media (max-width: 900px) {
  .grid-services {
    flex-direction: column;
    align-items: stretch;
    width:100%;
  }
}


/* FONDOS  */

.fondo-verde {
    color:white;
    background: linear-gradient(
    -35deg,
    DarkCyan,
    black,
    #333333
  );
  background-size: 400% 400%;
  animation: gradientMove 18s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.fondo-rojo {
    color:white;
    background: linear-gradient(
    -35deg,
    RebeccaPurple,
    DarkRed,
    black,
    #333333
  );
  background-size: 400% 400%;
  animation: gradientMove1 20s ease infinite;
}

@keyframes gradientMove1 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.fondo-naranja {
    color:white;
    background: linear-gradient(
    -35deg,
    Maroon,
    Darkorange,
    black,
    #333333
  );
  background-size: 400% 400%;
  animation: gradientMove3 20s ease infinite;
}

@keyframes gradientMove3 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}