.obligatorio{
color: rgb(202, 44, 8);
font-size:20px;
}
input:focus,
textarea:focus {
  /* Destacado adicional para elementos que tienen el cursor */
  border-color: #000;
  outline: red 2px solid;
}
button{
    border:none;
    margin: 10px 0;
    padding:10px;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}
button[type="submit"]{
    background-color: rgb(172, 78, 94);
}
button[type="reset"]{
    background-color: rgb(100, 152, 95);
}
form li{
    list-style-type: none;
}
.preferencias{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
    align-items: start;
    font-family: arial;
}
input{
        background-color: lightgrey;
}
input, textarea{
    background-color: lightgrey;
}
.formulario{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    font-family: arial;
}
.columna-izquierda, 
.columna-derecha, .lista{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
select{
    width: 400px;
}
textarea{
    width: 100%;
    height: auto;
}
main{
    width: 768px;
    margin: auto;
}
img{
    height: auto;
    width: 100%;
}
.encabezado{
    background-color: rgb(222, 220, 220);
    display: grid;
    grid-template-columns: 140px auto;
}
#subtitulo{
    display: grid;
    grid-template-areas: 
    "subtitulo subtitulo subtitulo"
    "datos preferencias suscripcion";
}
.columna {
    justify-self: center;
}
h1{
    color: rgb(225, 17, 17);
    font-size: 50px;
}
h2{
    grid-area: subtitulo;
    color: rgb(55, 184, 231);
}
h2, h3{
    text-align: center;
}
h3{
    display: flex;
    flex-direction: column;
    align-items: center;
}
h3:nth-child(2)::before, #datos legend::before {
    content: '1';
    /* display: flex;
    background-color: rgb(232, 49, 49);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-family: arial;
    font-size: 35px;
    justify-content: center;
    align-items: center; */
}
legend{
    display:flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    font-weight: 600;
    font-size: 22px;
    margin:right;
}
fieldset{
    margin-bottom: 20px;
    border-radius: 10px;
}
h3::before, legend::before{
    display: inline-flex;
    background-color: rgb(232, 49, 49);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-family: arial;
    font-size: 35px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
h3:nth-child(2)::before, #datos legend::before{
    content: '1';
}
h3:nth-child(3)::before, #preferencias legend::before{
    content: '2';
    /* display: flex;
    background-color: rgb(232, 49, 49);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-family: arial;
    font-size: 35px;
    justify-content: center;
    align-items: center; */
}
h3:nth-child(3)::before, li:nth-child(2) legend::before{
    grid-area: preferencias;
}
h3:nth-child(4)::before, #suscripcion legend::before {
    content: '3';
    /* display: flex;
    background-color: rgb(232, 49, 49);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-family: arial;
    font-size: 35px;
    justify-content: center;
    align-items: center; */
}
h3:nth-child(4):before, li:nth-child(3) legend::before{
    grid-area: suscripcion;
}
.texto-rojo{
    color: red;
}