208 lines
3.7 KiB
CSS
208 lines
3.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Nunito:wght@400;600;700&display=swap');
|
|
|
|
:root {
|
|
--color-primario: #F5F5F5;
|
|
--color-hover: #1E3A5F;
|
|
--color-secundario: #A1A1A1;
|
|
--color-fondo: #0D0D0D;
|
|
--color-texto: #E5E5E5;
|
|
--blanco-puro: #FFFFFF;
|
|
--sombra: rgba(47, 58, 86, 0.15);
|
|
--color-tarjeta: #1A1A1A;
|
|
--color-acento: #5FAEDB;
|
|
--color-borde: rgba(95, 174, 219, 0.3);
|
|
}
|
|
|
|
/* ======================
|
|
BASE
|
|
====================== */
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Nunito', sans-serif;
|
|
background: linear-gradient(180deg, #0D0D0D 0%, #111827 100%);
|
|
color: var(--color-texto);
|
|
line-height: 1.75;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--color-texto);
|
|
transition: color 0.25s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-acento);
|
|
}
|
|
|
|
/* ======================
|
|
HEADER
|
|
====================== */
|
|
|
|
header {
|
|
padding: 2rem 0 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
header h1 {
|
|
font-family: 'EB Garamond', serif;
|
|
font-size: 2.4rem;
|
|
letter-spacing: 1px;
|
|
color: var(--color-acento);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ======================
|
|
TITULOS
|
|
====================== */
|
|
|
|
h2 {
|
|
font-family: 'EB Garamond', serif;
|
|
font-size: 1.6rem;
|
|
margin-top: 3rem;
|
|
margin-bottom: 1rem;
|
|
color: var(--blanco-puro);
|
|
border-left: 4px solid var(--color-acento);
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
h2 a {
|
|
color: inherit;
|
|
}
|
|
|
|
h2 a:hover {
|
|
color: var(--color-acento);
|
|
}
|
|
|
|
/* ======================
|
|
LISTAS
|
|
====================== */
|
|
|
|
ol {
|
|
margin-left: 1.5rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
ol li {
|
|
margin-bottom: 0.75rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
ol li a {
|
|
display: inline-block;
|
|
padding: 0.15rem 0;
|
|
}
|
|
|
|
/* ======================
|
|
SEPARADORES
|
|
====================== */
|
|
|
|
hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
var(--color-borde),
|
|
transparent
|
|
);
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
/* ======================
|
|
CONTENEDOR
|
|
====================== */
|
|
|
|
.container {
|
|
width: 92%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
padding: 2rem 0 3rem;
|
|
}
|
|
|
|
/* ======================
|
|
TARJETAS (si las usas)
|
|
====================== */
|
|
|
|
.tarjeta {
|
|
background: rgba(20, 20, 20, 0.75);
|
|
backdrop-filter: blur(4px);
|
|
border-radius: 14px;
|
|
border: 1px solid var(--color-borde);
|
|
box-shadow: 0 10px 20px rgba(0,0,0,.35);
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tarjeta:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 30px rgba(0,0,0,.5);
|
|
}
|
|
|
|
/* ======================
|
|
TEXTO
|
|
====================== */
|
|
|
|
p {
|
|
margin: 0.5rem 0 1rem;
|
|
font-size: 1rem;
|
|
color: var(--color-texto);
|
|
}
|
|
|
|
/* ======================
|
|
TABLAS
|
|
====================== */
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
border: 1px solid var(--color-borde);
|
|
border-radius: 8px;
|
|
background: var(--color-tarjeta);
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--color-borde);
|
|
}
|
|
|
|
th {
|
|
background: rgba(95, 174, 219, 0.15);
|
|
font-weight: 600;
|
|
text-align: left;
|
|
}
|
|
|
|
tr:hover td {
|
|
background: rgba(95, 174, 219, 0.07);
|
|
}
|
|
|
|
.nota {
|
|
background: rgba(95, 174, 219, 0.1);
|
|
border-left: 4px solid var(--color-acento);
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
color: var(--color-texto);
|
|
}
|
|
|
|
/* ======================
|
|
ACCESIBILIDAD
|
|
====================== */
|
|
|
|
a:focus-visible {
|
|
outline: 2px solid var(--color-acento);
|
|
outline-offset: 3px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
body {
|
|
padding: 0.5rem;
|
|
font-size: 2rem;
|
|
}
|
|
}
|