/* ===================================================
VARIABLES DE COLOR Y FUENTE
Esto son "variables CSS": defines un valor una vez
aquí arriba (--nombre: valor;) y luego lo usas en
cualquier parte con var(--nombre). Si un día quieres
cambiar el verde de todo el sitio, lo cambias aquí
una sola vez y se actualiza en todas las páginas.
=================================================== */
:root {
--crema: #FAF9F3;
--verde-oscuro: #2E3B24;
--verde-medio: #4C6B3E;
--verde-suave: #5C7A4C;
--menta: #B9CBA3;
--menta-claro: #DCE9C8;
--borde-menta: #cfd8c0;
--texto: #33352c;
--texto-suave: #52584a;
--texto-tenue: #767c6a;
}
/* ===================================================
MODO OSCURO
Cuando el tiene la clase "dark", estas mismas
variables cambian de valor. El resto del CSS no se
toca para nada porque todo ya usa var(--nombre) en
lugar del color directo — esa es la ventaja de haber
usado variables desde el inicio.
=================================================== */
body.dark {
--crema: #1E2419;
--verde-oscuro: #D8ECC4;
--verde-medio: #A9D391;
--verde-suave: #9BC384;
--menta: #4A5B3C;
--menta-claro: #2B3622;
--borde-menta: #3a4a30;
--texto: #ECEFE4;
--texto-suave: #cdd2c2;
--texto-tenue: #9aa08c;
}
/* Algunas cosas tienen colores "fijos" (no variables)
por ejemplo el fondo blanco de las tarjetas — esas
las ajustamos aparte, a mano, para el modo oscuro */
body.dark .card {
background: #242E1C;
border-color: #3a4a30;
}
body.dark .post {
border-bottom-color: #3a4a30;
}
/* La notita (.sticky) tiene su texto en un verde oscuro
fijo que se pierde en modo oscuro contra su propio
fondo — aquí lo aclaramos solo para ese caso */
body.dark .sticky {
color: #D8ECC4;
}
/* Reset básico: quita márgenes raros que traen los
navegadores por defecto, para empezar desde cero */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--crema);
font-family: 'Jost', sans-serif;
color: var(--texto);
transition: background 0.2s ease, color 0.2s ease;
}
/* Contenedor central: limita el ancho para que el
texto no se estire de pared a pared en pantallas grandes */
.page {
max-width: 780px;
margin: 0 auto;
padding: 48px 32px 60px;
}
/* ===================== HEADER Y NAV ===================== */
header {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--borde-menta);
padding-bottom: 18px;
margin-bottom: 40px;
}
.site-title {
font-family: 'Fraunces', serif;
font-size: 26px;
color: var(--verde-oscuro);
margin: 0;
text-decoration: none;
}
nav a {
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--verde-suave);
text-decoration: none;
margin-left: 18px;
}
nav a:hover {
text-decoration: underline;
}
/* Esta clase se pone a mano en cada página, en el link
que corresponde al menú activo (mira los .html) */
nav a.active {
color: var(--verde-oscuro);
border-bottom: 1px solid var(--verde-oscuro);
padding-bottom: 3px;
}
/* Botón de modo oscuro/claro */
.theme-toggle {
font-family: 'Space Mono', monospace;
font-size: 11px;
background: none;
border: 1px solid var(--borde-menta);
border-radius: 20px;
padding: 4px 12px;
color: var(--verde-suave);
cursor: pointer;
margin-left: 18px;
}
.theme-toggle:hover {
border-color: var(--verde-suave);
}
/* ===================== TÍTULOS DE PÁGINA ===================== */
h1.page-title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 26px;
color: var(--verde-oscuro);
margin: 0 0 6px;
}
.page-sub {
font-size: 14px;
color: var(--texto-tenue);
margin: 0 0 28px;
}
/* ===================== HERO (inicio) ===================== */
.hero {
display: flex;
gap: 24px;
align-items: flex-start;
margin-bottom: 44px;
}
.hero-text h1 {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 500;
margin: 0 0 10px;
color: var(--verde-oscuro);
line-height: 1.25;
}
.hero-text p {
font-size: 15px;
line-height: 1.7;
color: var(--texto-suave);
max-width: 420px;
margin: 0;
}
/* ===================== NOTITA COLLAGE ===================== */
/* El toque "collage": una notita ligeramente inclinada,
como un post-it pegado encima del texto */
.sticky {
background: var(--menta-claro);
border: 1px solid var(--menta);
padding: 14px 16px;
width: 180px;
font-family: 'Caveat', cursive;
font-size: 18px;
color: #3a4a30;
line-height: 1.35;
transform: rotate(-2.5deg);
box-shadow: 2px 3px 0 rgba(0,0,0,0.05);
flex-shrink: 0;
}
/* ===================== LISTAS DE BLOG / CREATIVO EN HOME ===================== */
.section-label {
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7c8a6f;
margin-bottom: 14px;
margin-top: 36px;
}
.post {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid #e5e2d5;
}
.post-title {
font-family: 'Fraunces', serif;
font-size: 18px;
color: var(--texto);
}
.post-title a {
color: inherit;
text-decoration: none;
}
.post-title a:hover {
color: var(--verde-medio);
}
.post-date {
font-family: 'Caveat', cursive;
font-size: 17px;
color: var(--verde-medio);
white-space: nowrap;
margin-left: 16px;
}
/* ===================== FOOTER ===================== */
footer {
margin-top: 50px;
padding-top: 18px;
border-top: 1px solid var(--borde-menta);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-note {
font-size: 12px;
color: #8a8d80;
}
/* Toque Y2K: el contador de visitas retro.
Uso colores fijos (no variables) a propósito: esta
insignia debe verse igual sin importar si el sitio
está en modo claro u oscuro. */
.counter {
font-family: 'Space Mono', monospace;
font-size: 11px;
background: #1A2417;
color: #CFF2C0;
padding: 4px 9px;
border-radius: 2px;
}
/* ===================== FILTROS (página creativo) ===================== */
.filters {
display: flex;
gap: 10px;
margin-bottom: 26px;
flex-wrap: wrap;
}
.filter {
font-family: 'Space Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--verde-suave);
border: 1px solid var(--menta);
border-radius: 20px;
padding: 5px 13px;
cursor: pointer;
background: none;
}
.filter.active {
background: var(--verde-oscuro);
color: #EAF0DF;
border-color: var(--verde-oscuro);
}
/* ===================== GRID DE TARJETAS (creativo) ===================== */
/* display: grid crea una cuadrícula. grid-template-columns
dice cuántas columnas y de qué tamaño cada una.
"repeat(3, 1fr)" = 3 columnas del mismo ancho (1fr = 1 fracción) */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* En pantallas angostas (celular), pasa a 2 columnas
para que no se vea apretado. Esto es un "media query" */
@media (max-width: 600px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.card {
background: #fff;
border: 1px solid #e5e2d5;
border-radius: 4px;
overflow: hidden;
}
.card-img {
height: 120px;
background: linear-gradient(135deg, var(--menta-claro), var(--menta));
display: flex;
align-items: center;
justify-content: center;
font-family: 'Space Mono', monospace;
font-size: 10px;
color: var(--verde-medio);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Aquí va tu imagen real cuando la subas: en vez de
.card-img con texto "img", usarás 
*/
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-body {
padding: 12px 14px;
}
.card-title {
font-family: 'Fraunces', serif;
font-size: 15px;
margin: 0 0 4px;
color: var(--texto);
}
.card-tag {
font-family: 'Space Mono', monospace;
font-size: 9px;
text-transform: uppercase;
color: var(--texto-tenue);
}
.card-text {
padding: 16px;
display: flex;
flex-direction: column;
}
.card-text p {
font-size: 12px;
color: var(--texto-tenue);
line-height: 1.5;
margin: 6px 0 0;
}
.badge-corner {
align-self: flex-start;
font-family: 'Caveat', cursive;
font-size: 15px;
transform: rotate(-3deg);
}
.badge-corner.propio {
color: var(--verde-medio);
}
.badge-corner.recomendado {
color: #a6763f;
}
/* ===================== TOGGLES ESTILO NOTION ===================== */
.toggle-list details {
border-bottom: 1px solid var(--borde-menta);
border-left: 3px solid var(--menta);
padding: 14px 0 14px 14px;
}
/* Alternamos el color del borde izquierdo entre tus tonos
verdes, usando :nth-of-type() para no tener que escribir
una clase distinta a mano en cada */
.toggle-list details:nth-of-type(2n) {
border-left-color: var(--verde-medio);
}
.toggle-list details:nth-of-type(3n) {
border-left-color: var(--verde-suave);
}
/* El summary es la parte clickeable. list-style: none
quita la flechita triangular que el navegador pone
por default, para poner la nuestra propia abajo */
.toggle-list summary {
font-family: 'Fraunces', serif;
font-size: 17px;
color: var(--texto);
cursor: pointer;
list-style: none;
}
/* Esto oculta la flechita default en navegadores Chrome/Safari */
.toggle-list summary::-webkit-details-marker {
display: none;
}
/* Nuestra propia flechita, hecha con el símbolo ▸.
::before inserta contenido ANTES del texto del summary */
.toggle-list summary::before {
content: '▸';
display: inline-block;
margin-right: 8px;
color: var(--verde-medio);
transition: transform 0.15s ease;
}
/* Cuando el está abierto (el navegador le pone
el atributo "open" automáticamente), rotamos la flecha */
.toggle-list details[open] summary::before {
transform: rotate(90deg);
}
.toggle-list .toggle-content {
font-family: 'Jost', sans-serif;
font-size: 14px;
color: var(--texto-suave);
line-height: 1.6;
margin: 10px 0 0 20px;
}
/* ===================== NOTITA + TEXTO EN 2 COLUMNAS ===================== */
/* Para usar dentro de entradas de blog: la notita queda a
un lado y el texto a su lado, en vez de uno encima del otro.
Es el mismo truco de display:flex que usa .hero arriba. */
.con-nota {
display: flex;
gap: 24px;
align-items: flex-start;
margin: 24px 0;
}
/* El texto ocupa todo el espacio que sobra (flex: 1),
mientras que .sticky ya tiene su propio ancho fijo */
.con-nota p {
flex: 1;
margin: 0;
}
/* Si en vez de (o además de) la notita metes una imagen
dentro de .con-nota, esta regla le da un tamaño fijo
y un marco acorde al resto del sitio, en vez de dejarla
crecer a su tamaño original */
.con-nota img {
width: 220px;
height: 260px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--borde-menta);
box-shadow: 2px 3px 0 rgba(0,0,0,0.06);
flex-shrink: 0;
margin-top: 0;
}
/* En pantallas angostas (celular) se ve muy apretado en
columnas, así que las apilamos verticalmente de nuevo */
@media (max-width: 600px) {
.con-nota {
flex-direction: column;
}
}
/* ===================== BOTÓN DE REGRESAR ===================== */
.volver {
display: inline-block;
font-family: 'Space Mono', monospace;
font-size: 12px;
color: var(--verde-suave);
border: 1px solid var(--borde-menta);
border-radius: 20px;
padding: 5px 14px;
cursor: pointer;
background: none;
text-decoration: none;
margin-bottom: 20px;
}
.volver:hover {
border-color: var(--verde-suave);
}
/* ===================== PÁGINA SOBRE MÍ ===================== */
.bio {
font-size: 15px;
line-height: 1.8;
color: var(--texto-suave);
max-width: 500px;
}