/* Viller Academy — sistema de estilos
   Paleta tomada del logotipo: dorado, azul marino casi negro, crema. */

:root {
    --dorado:        #b08542;
    --dorado-claro:  #c9a063;
    --dorado-suave:  #e4d3b6;
    --navy:          #131c33;
    --navy-medio:    #2c3552;
    --crema:         #f6f0e7;
    --hueso:         #fbf8f3;
    --blanco:        #ffffff;
    --texto:         #1d2436;
    --texto-suave:   #5c6478;
    --linea:         #e6ddcf;

    --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

    --ancho: 1180px;
    --radio: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hueso);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--dorado); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1.1em; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding-inline: 24px;
}

/* Ornamentos tipograficos de marca */
.antetitulo {
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--dorado);
    margin: 0 0 .9em;
}
.filete {
    width: 54px;
    height: 1px;
    background: var(--dorado);
    border: 0;
    margin: 1.6em 0;
}
.centrado .filete { margin-inline: auto; }
.centrado { text-align: center; }

/* Botones */
.boton {
    display: inline-block;
    font-family: var(--sans);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 15px 34px;
    border: 1px solid var(--dorado);
    background: var(--dorado);
    color: var(--blanco);
    border-radius: var(--radio);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s;
}
.boton:hover { background: var(--navy); border-color: var(--navy); color: var(--blanco); }
.boton--linea { background: transparent; color: var(--navy); border-color: var(--navy); }
.boton--linea:hover { background: var(--navy); color: var(--blanco); }
.boton--claro { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.6); }
.boton--claro:hover { background: var(--blanco); color: var(--navy); border-color: var(--blanco); }

/* Cabecera */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 248, 243, .96);
    border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(6px);
}
.cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}
.marca { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.marca__nombre {
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: .16em;
    color: var(--navy);
    text-transform: uppercase;
}
.marca__sub {
    font-family: var(--sans);
    font-size: .62rem;
    letter-spacing: .38em;
    color: var(--dorado);
    text-transform: uppercase;
    margin-top: 5px;
}

.menu { display: flex; align-items: center; gap: 26px; }
.menu a {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--dorado); }
.menu .destacado { color: var(--dorado); }

.menu__boton {
    display: none;
    background: none;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 9px 12px;
    cursor: pointer;
    color: var(--navy);
    font-size: 1rem;
}

/* Portada */
.portada {
    position: relative;
    background: var(--navy);
    color: var(--blanco);
    padding-block: clamp(70px, 11vw, 130px);
    overflow: hidden;
}
.portada::after {
    content: "VA";
    position: absolute;
    right: -3vw;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: clamp(16rem, 32vw, 30rem);
    color: rgba(201, 160, 99, .07);
    line-height: .8;
    pointer-events: none;
}
.portada__texto { position: relative; z-index: 1; max-width: 720px; }
.portada h1 { color: var(--blanco); }
.portada p { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 56ch; }
.portada .antetitulo { color: var(--dorado-claro); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* Secciones */
.seccion { padding-block: clamp(56px, 8vw, 96px); }
.seccion--crema { background: var(--crema); }
.seccion__cabeza { max-width: 640px; margin-bottom: 46px; }
.centrado .seccion__cabeza { margin-inline: auto; }

/* Rejillas */
.rejilla { display: grid; gap: 26px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }

/* Tarjeta de modalidad */
.modalidad {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    transition: border-color .25s, transform .25s;
}
.modalidad:hover { border-color: var(--dorado); transform: translateY(-3px); }
.modalidad h3 { margin-bottom: .35em; }
.modalidad p { color: var(--texto-suave); font-size: .95rem; flex: 1; }
.modalidad__enlace {
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-top: 14px;
}

/* Bloque Endolifting */
.insignia {
    background: linear-gradient(135deg, var(--navy) 0%, #1e2a49 100%);
    color: var(--blanco);
    border-radius: var(--radio);
    padding: clamp(38px, 6vw, 68px);
    position: relative;
    overflow: hidden;
}
.insignia h2 { color: var(--blanco); }
.insignia p { color: rgba(255,255,255,.8); max-width: 60ch; }
.insignia .antetitulo { color: var(--dorado-claro); }
.insignia__marco {
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(201, 160, 99, .28);
    border-radius: var(--radio);
    pointer-events: none;
}
.insignia > * { position: relative; z-index: 1; }

/* Avales */
.aval { text-align: center; }
.aval__cifra {
    font-family: var(--serif);
    font-size: 2.7rem;
    color: var(--dorado);
    line-height: 1;
}
.aval__texto {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 10px;
}

/* Pie */
.pie {
    background: var(--navy);
    color: rgba(255,255,255,.72);
    padding-block: 62px 0;
    font-size: .92rem;
}
.pie h4 {
    color: var(--blanco);
    font-family: var(--sans);
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 1.1em;
}
.pie a { color: rgba(255,255,255,.72); }
.pie a:hover { color: var(--dorado-claro); }
.pie__marca .marca__nombre { color: var(--blanco); }
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: .5em; }
.pie__claim {
    font-size: .68rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--dorado-claro);
    margin-top: 14px;
}
.pie__legal {
    margin-top: 46px;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-block: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    justify-content: space-between;
    font-size: .8rem;
}

/* Tarjeta de curso */
.curso {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .25s;
}
.curso:hover { border-color: var(--dorado); }
.curso__imagen { aspect-ratio: 16 / 10; background: var(--crema); object-fit: cover; width: 100%; max-width: 100%; }
.curso__imagen--vacia {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 3.2rem; color: var(--dorado-suave);
}
.curso__cuerpo { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.curso__modalidad {
    font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado);
}
.curso h3 { margin: .45em 0 .4em; }
.curso h3 a { color: var(--navy); }
.curso__datos { font-size: .88rem; color: var(--texto-suave); margin-bottom: 18px; flex: 1; }
.curso__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.curso__precio { font-family: var(--serif); font-size: 1.6rem; color: var(--navy); }
.etiqueta {
    display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 10px; border: 1px solid var(--dorado); color: var(--dorado); border-radius: 20px;
}
.etiqueta--agotado { border-color: #9a3b3b; color: #9a3b3b; }

/* Filtro del catalogo */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filtros a {
    font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 18px; border: 1px solid var(--linea); color: var(--navy); border-radius: 30px;
    background: var(--blanco);
}
.filtros a.activo, .filtros a:hover { border-color: var(--dorado); color: var(--dorado); }

/* Cabecera interior */
.interior {
    background: var(--crema);
    padding-block: clamp(46px, 7vw, 80px);
    border-bottom: 1px solid var(--linea);
}
.interior p { max-width: 64ch; color: var(--texto-suave); }
.migas { font-size: .78rem; color: var(--texto-suave); margin-bottom: 18px; }
.migas a { color: var(--texto-suave); }

/* Ficha de curso */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.ficha__caja {
    position: sticky; top: 100px;
    background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 30px;
}
.ficha__caja .curso__precio { font-size: 2.2rem; }
.ficha__lista { list-style: none; margin: 20px 0 26px; padding: 0; font-size: .92rem; }
.ficha__lista li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ficha__lista li span:first-child { color: var(--texto-suave); }
.ficha__lista li span:last-child { text-align: right; }
.ficha .boton { width: 100%; text-align: center; }
.prosa h2 { font-size: 1.8rem; margin-top: 1.4em; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: .45em; }

/* Formularios */
.formulario { display: grid; gap: 18px; }
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--texto);
    padding: 13px 14px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--dorado-suave); border-color: var(--dorado); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--texto-suave); }
.casilla input { margin-top: 5px; accent-color: var(--dorado); }
.pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pago {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco);
}
.pago:has(input:checked) { border-color: var(--dorado); box-shadow: 0 0 0 1px var(--dorado); }
.pago input { accent-color: var(--dorado); }
.aviso { padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--blanco); margin-bottom: 22px; }
.aviso--error { border-color: #d7a3a3; background: #fbf1f1; color: #7d2b2b; }
.aviso--ok { border-color: var(--dorado-suave); background: #fbf6ec; }
.oculto-bot { position: absolute; left: -9999px; }

/* Preguntas frecuentes */
.faq details { border-bottom: 1px solid var(--linea); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.3rem; color: var(--navy); list-style: none; }
.faq summary::after { content: "+"; float: right; color: var(--dorado); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--texto-suave); }

/* Area del alumno */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--linea); margin-bottom: 28px; }
.pestanas a { padding: 12px 18px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 2px solid transparent; }
.pestanas a.activo { color: var(--navy); border-color: var(--dorado); }
.recurso { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.recurso__tipo { flex: 0 0 96px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dorado); padding-top: 4px; }
.recurso h3 { font-size: 1.15rem; margin-bottom: .2em; }
.recurso p { margin: 0; font-size: .9rem; color: var(--texto-suave); }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin-top: 12px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Aviso de cookies */
.cookies {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    max-width: 560px; margin-inline: auto;
    display: flex; align-items: center; gap: 18px;
    background: var(--navy); color: rgba(255,255,255,.85); padding: 18px 22px; border-radius: var(--radio);
    font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.cookies p { margin: 0; }
.cookies a { color: var(--dorado-claro); }
.cookies .boton { padding: 11px 20px; flex: 0 0 auto; }

/* Movil */
@media (max-width: 960px) {
    .ficha { grid-template-columns: 1fr; }
    .ficha__caja { position: static; }
}
@media (max-width: 620px) {
    .formulario .fila, .pagos { grid-template-columns: 1fr; }
    .cookies { flex-direction: column; align-items: stretch; }
}
@media (max-width: 900px) {
    .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
    .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
    .menu__boton { display: block; }
    .menu {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--hueso);
        border-bottom: 1px solid var(--linea);
        padding: 10px 24px 22px;
    }
    .menu.abierto { display: flex; }
    .menu a { padding-block: 12px; width: 100%; }
    .cabecera__fila { position: relative; }
}
@media (max-width: 620px) {
    .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
    body { font-size: 16px; }
}