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

a {
    text-decoration: none;
    color: white;
    white-space: nowrap;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    align-content: center;
    color: white;
    background-color: black;
    font-size: larger;
}

header {
    position: relative;
    top: 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 5%;
    width: 100%;
    flex-wrap: wrap;
}

ol {
    padding-left: 20px;
    margin: 0px 10px;
}

ul {
    padding-left: 20px;
    margin: 0px 10px;
}

img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.icono {
    aspect-ratio: 1/1;
    width: 80px;
    height: 80px;
}

nav ul {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 10px;
    border-radius: 10px;
    list-style-type: none;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 0px 20px;
}

nav a {
    font-size: x-large;
    margin: 5px;
}

footer {
    padding: 40px 5% 20px 5%;
    background-color: rgba(255, 255, 255, 0.15);
    width: 100%;
    display: flex; 
    flex-direction: column;
    gap: 20px;
}

footer a {
    text-decoration: none;
    font-size: 14px;
    padding-bottom: 1px;
    border-bottom: 1px solid #ffffffda;
    width: 200px;
    min-width: auto;
    margin: 2px;
}

h1 {
    font-family: Gabriola;
    font-style: italic;
    white-space: nowrap;
    font-size: 40px;
}

spell {
    font-family: Gabriola;
    font-style: italic;
    white-space: nowrap;
    font-size: 40px;
    font-weight: bold;
}

.scroll-container {
    width: 100%;              /* ancho visible */
    overflow-x: auto;          /* activa scroll horizontal */
    overflow-y: hidden;        /* oculta scroll vertical */
}


.flex_nowrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.flex_nowrap img {
    width: 50%;
    height: 200px;
    object-fit: cover;
}

.flex_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.flex_wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.flex_column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.contenido{
    width: 80%;
}

.seccion {
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: stretch;
    width: 100%; 
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
}

.contenido {
    width: 1220px;
    padding: 20px;
    border-radius: 10px;
}

.card {
    /* background-color: rgba(255, 255, 255, 0.15); */
    background-color: #262626;
    padding: 20px;
    border-radius: 30px;
    /* max-width: 600px; */
    min-width: 300px;
    text-align: center;
}

.boton {
  background-color: #5A67D8;       /* Color de fondo */
  color: white;                    /* Color del texto */
  padding: 12px 24px;              /* Espaciado interno */
  border: none;                    /* Sin borde */
  border-radius: 8px;              /* Bordes redondeados */
  font-size: 16px;                 /* Tamaño de fuente */
  font-family: 'Segoe UI', sans-serif; /* Tipografía limpia */
  cursor: pointer;                /* Cambia el cursor al pasar */
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 100%;                    /* Ancho completo */
  text-align: center;
}

.boton:hover {
  background-color: #434190;     /* Color al pasar el mouse */
  transform: scale(1.05);        /* Efecto sutil de agrandamiento */
}

.boton:active {
  transform: scale(0.98);        /* Efecto al presionar */
}

.tabla-servicios {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-spacing: 0px;
    /* min-width: 600px; */
}

.tabla-servicios td {
  border: 2px solid #262626;
  padding: 12px 16px;
  vertical-align: top;
  width: 25%;
}

.tabla-servicios tr:hover td{
  background-color: #262626;
  transform: scale(1.05);
  transition: transform 0.2s ease;
}


@media screen and (max-width: 1274px) {
    h1 {
        white-space: wrap;
        text-align: center;
    }

    .contenido {
        width: 100%;
    }

    /* .tabla-servicios {
        width: 1200px;
    } */
    
}

@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .flex_nowrap {
        flex-wrap: wrap;
    }

    img {
        max-height: 200px;
        width: 100%;
    }

    .flex_wrap img {
        max-height: 200px;
    }

    .seccion {
        padding: 20px 5%;
    }
    
    .icono {
        width: 60px;
        height: 60px;
    }

    nav a {
        font-size: medium;
        margin: 5px;
    }
    
    h1 {
        font-size: 30px;
    }
    
}