* {
    box-sizing: border-box;
  }


  body {
    font-family: 'DM Sans';
    -webkit-font-smoothing: antialiased; /* Truco de experto para que se vea más nítida */
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    background: transparent;
    background-color: transparent;
    padding: 20px;
  }
    /* Aplicando el peso 400 que necesitas para el texto general */
  p, span, li {
      font-weight: 400;
      color: #333; /* Un gris oscuro para mejor legibilidad */
  }

  /* Usando un peso mayor para los títulos */
  h1, h2, h3 {
      font-weight: 700;
  }

  .custom-form {
    max-width: 600px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;

     grid-gap: 15px;
    display: grid;
    grid-template-areas:
        'vidrio vidrio vidrio vidrio'
        'vehi vehi vehi vehi'
        'region region comuna comuna'
        'fono fono fono fono'
        'boton1 boton1 boton1 boton1';
  }

  .row-vidrio { 
    grid-area: vidrio; 
  }

  .row-vehi { 
    grid-area: vehi; 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-gap: 10px; 
  }

  .row-region { 
    grid-area: region; 
  }
  .row-comuna { 
    grid-area: comuna; 
  }

  .row-fono { 
    grid-area: fono; 
  }

  .row-btn { 
    grid-area: boton1; 
     background-color: #F8D404;
    border: none;
    
    padding: 5px 15px;
    width: 30%;
    font-size: 20px;
    
    width: fit-content;
    /* ESTO LO CENTRA HORIZONTALMENTE EN SU CELDA */
    justify-self: center; 
    /* OPCIONAL: Centrarlo verticalmente en la fila */
    align-self: center;
  }

  .custom-input {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  border: 1px solid #5c5a5a; /* Borde gris suave */
  border-radius: 20px;    /* El radio alto crea el efecto de cápsula */
  background-color: #f8f9fa; /* Fondo ligeramente gris para resaltar el blanco */
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease;
  color: #444;
  appearance: none; /* Quita el estilo por defecto del sistema en select */
}

/* Efecto al hacer clic o foco */
.custom-input:focus {
  border-color: #dab615; /* Usando tu color amarillo de los botones */
  background-color: #ffffff;
  box-shadow: 0 0 8px rgba(218, 182, 21, 0.2);
}

/* Para el select: agregamos una flecha personalizada */
select.custom-input {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px;
  padding-right: 40px;
}


  .telefono-container {
    display: flex;
    align-items: center;
  }
  
  #pais {
    margin-right: 10px;
  }
  
  
  #pais option:selected {
    display: none;
  }
  .pais-container {
    display: flex;
    width: 300px;
    align-items: center;
  }
  
  .indicativo {
    width: 30%;
    text-align: right;
  }
  
  .pais {
    width: 70%;
  }

 

  /* Responsivo: una sola columna en móviles pequeños */
  @media (max-width: 480px) {
    
    .row-btn { 
    
    font-size: 3.2vw;
    
  }

  .custom-input {

  font-size: 3vw;
  
}
 

  .custom-form {
    
    grid-template-areas:
        'vidrio'
        'vehi'
        'region'
        'comuna'
        'fono'
        'boton1';
  }

  .row-vehi { 
    
    grid-template-columns: none; 
    grid-template-rows: 1fr 1fr 1fr; 
    
  }

   }