/* ==========================
   CONFIGURACIÓN GENERAL
========================== */

body{
    font-family: Arial, sans-serif;
    background:#f8fafc;
    color:#333;
    line-height:1.7;
}

/* ==========================
   HERO
========================== */

.hero-pagina{
    position:relative;
    padding:120px 20px;
    text-align:center;

    background:linear-gradient(
    135deg,
    #7B1E3A,
    #A52A4E);

    color:white;

    border-radius:0 0 30px 30px;
}

.hero-contenido{
    max-width:900px;
    margin:auto;
}

.hero-contenido h1{
    font-size:56px;
    margin-bottom:20px;
    font-weight:700;
}

.hero-contenido p{
    font-size:20px;
    max-width:700px;
    margin:auto;
}

/* ==========================
   SECCIONES
========================== */

section{
    padding:80px 20px;
}

section h2{
    text-align:center;
    font-size:38px;
    color:#7B1E3A;
    margin-bottom:30px;
}

section p{
    max-width:1000px;
    margin:auto;
}

/* ==========================
   GRID GENERAL
========================== */

.sectores-grid,
.grid-empresas,
.grid-empleos,
.grid-consejos,
.grid-test{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    max-width:1300px;

    margin:auto;
}

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

.sector-card,
.empresa-card,
.empleo-card,
.consejo-card,
.opcion-test{

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.08);

    transition:0.3s;
}

.sector-card:hover,
.empresa-card:hover,
.empleo-card:hover,
.consejo-card:hover,
.opcion-test:hover{

    transform:translateY(-8px);

}

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

.sector-card h3,
.empresa-card h3,
.empleo-card h3,
.consejo-card h3,
.opcion-test h3{

    color:#7B1E3A;

    margin-bottom:15px;
}

/* ==========================
   IMAGENES EMPRESAS
========================== */

.empresa-card img{

    width:100%;
    height:220px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:20px;
}

/* ==========================
   ETIQUETAS EMPRESA
========================== */

.empresa-card span,
.empleo-card span{

    display:inline-block;

    background:#F59E0B;

    color:white;

    padding:6px 12px;

    border-radius:30px;

    margin-bottom:15px;

    font-size:14px;
}

/* ==========================
   LISTAS EMPLEOS
========================== */

.empleo-card ul{

    margin-top:15px;
    margin-bottom:20px;

    padding-left:20px;
}

/* ==========================
   INPUTS
========================== */

input,
textarea{

    width:100%;

    max-width:700px;

    display:block;

    margin:15px auto;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;
}

textarea{
    min-height:150px;
}

/* ==========================
   BOTONES
========================== */

a,
button{

    transition:0.3s;
}

.boton-principal,
.cta-empleo a,
.empresa-card a,
.empleo-card a{

    display:inline-block;

    margin-top:20px;

    padding:12px 25px;

    background:#F59E0B;

    color:white;

    text-decoration:none;

    border-radius:10px;

    font-weight:bold;
}

.boton-principal:hover,
.cta-empleo a:hover,
.empresa-card a:hover,
.empleo-card a:hover{

    background:#d97706;
}

/* ==========================
   CTA FINAL
========================== */

.cta-empleo{

    text-align:center;

    background:#7B1E3A;

    color:white;

    border-radius:25px;

    margin:60px auto;

    max-width:1200px;
}

.cta-empleo h2{
    color:white;
}

/* ==========================
   CONTACTO
========================== */

.contacto-rapido form{

    max-width:800px;

    margin:auto;
}

.contacto-rapido button{

    background:#7B1E3A;

    color:white;

    border:none;

    padding:15px 30px;

    border-radius:10px;

    cursor:pointer;
}

.contacto-rapido button:hover{

    background:#5f162d;
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

.hero-contenido h1{
    font-size:38px;
}

.hero-contenido p{
    font-size:18px;
}

section h2{
    font-size:30px;
}

}