:root {
    --light-sea-green: #2ec4b6;
    --graphite: #333333;
    --gunmetal: #444444;
    --text-white: #fdfffc;

    --size-p-generic: 1.8rem;
    --size-h2-generic: 2.5rem;
    --size-h3-generic: 2rem;
}


main {
  padding-inline: clamp(1rem, 4vw, 5rem);
  margin-inline: auto;
  max-width: 1600px;
}

section#initial{
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    width: 100%;
    border-radius: 30px;
}


div#content-initial{   
    text-align: center;
}
div#content-initial h1#titulo-content span{
    font-size: 7rem;
}
div#content-initial h1#titulo-content{
    font-size: 5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

div.info-initial p{
    font-size: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: 'Cinzel-regular';
}

div#content-initial h1#titulo-content-movil{
    display: none;
}




/* Seccion de los servicios */

section#servicios {
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    width: 100%;
    background-color: var(--graphite);
    border-radius: 30px;
}

/*Titulo Mis Servicios Web*/
section h2#titulo-servicios {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    font-size: var(--size-h2-generic);
}

/*Grid de mis servicios*/
div#grid-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

div.card{
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--gunmetal);
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: -5px 5px 0px var(--light-sea-green);
    transition: 0.3s;
}

div.card:hover{
    border: 2px solid var(--light-sea-green);
    transition: 0.3s;
}


div.card h3{
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-size: var(--size-h3-generic);
    font-family: 'Cinzel-bold';
}
div.card p{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-inline: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: 'Montserrat-regular';

}

div.card p.incluye{
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: 'Montserrat-italic';
}

ul.lista-categoria{
    padding-bottom: 2rem;
    font-size: 1.1rem;
    list-style-type: disc;
    padding-inline: 6rem;
}

/* Bloq1, bloq2, bloq3 etc...*/
div.bloq1, div.bloq2{
    padding-bottom: 2rem;
}

/*Extra y contenido*/
section#extras-contenido {
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    width: 90%;
    max-width: 1200px;
    background-color: var(--graphite);
    border-radius: 30px;
    corner-shape: squircle;
    border: 1px solid var(--light-sea-green);
}

div.bloq2{
    display: flex;
    justify-content: space-evenly;
    gap: 3rem;
}

/*Seccion de contenido*/
div.contenido{
    display: block;
    margin: 0 auto;
    width: 50%;
}

div.lista-contenido p{
    text-align: center;
}



/*seccion de extras*/

div.extras{
    display: block;
    margin: 0 auto;
    width: 50%;
}

div.costo-extra{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}



h3#titulo-contenido, h3#titulo-extras{
    text-align: center;
    font-size: 1.8rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

div.lista-contenido, div.lista-extras{
    padding-inline: 3rem;
}