* {

box-sizing: border-box;

}



body {

font-family: Arial, Helvetica, sans-serif;

background: #f2f2f2;

margin: 0;

padding: 40px;

color: #222;

}




.container {

max-width: 1100px;

margin: auto;

}




/* ==========================
   BOTÓN VOLVER
========================== */


.volver {

display: inline-block;

margin-bottom: 20px;

padding: 10px 18px;

background: #1c1c1c;

color: white;

text-decoration: none;

border-radius: 8px;

font-size: 14px;

}



.volver:hover {

background: #9b7515;

}






/* ==========================
   CABECERA
========================== */


header {

background: #1c1c1c;

color: white;

padding: 30px;

border-radius: 15px;

text-align: center;

margin-bottom: 25px;

}



header h1 {

margin: 0;

color: #d4af37;

font-size: 32px;

}



header p {

color: #ddd;

}





/* ==========================
   ESTRUCTURA DOS COLUMNAS
========================== */


.grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 25px;

}





/* ==========================
   TARJETAS
========================== */


.card {

background: white;

padding: 25px;

border-radius: 15px;

box-shadow: 0 5px 15px rgba(0,0,0,0.10);

margin-bottom: 25px;

}



.card h2 {

margin-top: 0;

color: #9b7515;

border-bottom: 2px solid #d4af37;

padding-bottom: 10px;

}





/* ==========================
   FORMULARIOS
========================== */


label {

display: block;

font-weight: bold;

margin-top: 15px;

margin-bottom: 5px;

}



input,
select {


width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 8px;

font-size: 16px;

background: white;

}




button {


width: 100%;

margin-top: 20px;

padding: 14px;

background: #9b7515;

color: white;

border: none;

border-radius: 8px;

font-size: 16px;

cursor: pointer;

}



button:hover {


background: #76570d;


}





/* ==========================
   TABLA PRECIOS ORO
========================== */


.tabla-precios {


margin-top: 20px;

background: #faf8f1;

padding: 15px;

border-radius: 10px;

}



.tabla-precios p {


display: flex;

justify-content: space-between;

border-bottom: 1px solid #ddd;

padding-bottom: 8px;

}





/* ==========================
   RESULTADOS
========================== */


.resultado {


background: #fffdf7;

}



.resultado p {


display: flex;

justify-content: space-between;

font-size: 17px;

padding: 8px 0;

border-bottom: 1px solid #eee;

}



.resultado strong {

color: #333;

}





/* ==========================
   MENSAJE OPERACIÓN
========================== */


#mensajeOperacion {


text-align: center;

margin-top: 25px;

font-size: 20px;

color: #555;

}





/* ==========================
   AVISO LEGAL
========================== */


.aviso {


margin-top: 25px;

padding: 15px;

background: #fff3cd;

border-left: 5px solid #d4af37;

border-radius: 8px;

font-size: 14px;

line-height: 1.5;

}





/* ==========================
   ADAPTACIÓN MÓVIL
========================== */


@media(max-width:800px){


body {

padding: 20px;

}



.grid {

grid-template-columns: 1fr;

}


header h1 {

font-size: 25px;

}


}