/*
* ════════════════════════════════════════════════════════════════
* PEQUEÑOS DIOSES DEL PENSAMIENTO CRÍTICO
* global.css · v1.0
* ────────────────────────────────────────────────────────────────
* CSS compartido por todas las páginas del proyecto.
* Cada cuento puede añadir un fichero propio (ej. momo.css)
* para sobreescribir o ampliar variables y componentes.
*
* ESTRUCTURA DEL FICHERO
* ─────────────────────
* 1. Fuentes (Google Fonts — import externo en el HTML)
* 2. Reset & base
* 3. Pantone tierra — variables CSS globales
* 4. Layout — topbar, hero, tabs, main, footer
* 5. Tipografía de cuento — story-lead, story-body
* 6. Componentes cuento — scene-header, dialogue, insight-box,
* ending-box, divider, grupos/paradas/
* cambios, leccion, aprendizajes
* 7. Componentes teatro — teatro-intro, acto-card, stage-dir,
* narrador/momo/voz-X, notas, materiales
* 8. Componentes adultos — adultos-warning, concepto-card,
* alerta-box, preguntas-list, datos
* 9. Componentes cuaderno — cuaderno-header, actividad-card,
* ejercicio-area, campo-escritura,
* r-chip, experimentos, momentos,
* momo-cita, cuaderno-cierre
* 10. Utilidades — section-title, section-subtitle, print-btn,
* reflection-chips
* 11. Responsive — tablet (≥600px), PC (≥900px)
* 12. Print
* ════════════════════════════════════════════════════════════════
*/
/* ══════════════════════════════════════════════════════════════
1. FUENTES
Añadir en el de cada página ANTES de este CSS:
══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
2. RESET & BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Nunito', sans-serif;
background: var(--arena-blanca);
color: var(--texto-principal);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
/* ══════════════════════════════════════════════════════════════
3. PANTONE TIERRA — VARIABLES GLOBALES
──────────────────────────────────────────────────────────────
Para cambiar el acento de un cuento concreto, sobreescribe
--acento-cuento y --acento-cuento-light en su CSS específico.
══════════════════════════════════════════════════════════════ */
:root {
/* Paleta tierra base */
--tierra-oscura: #3D2B1F;
--tierra-media: #8B5E3C;
--tierra-calida: #C86A2A;
--tierra-dorada: #C9963E;
--arena-clara: #F0E0C8;
--arena-blanca: #FAF5EE;
/* Verde complementario */
--verde-salvia: #7A9469;
--verde-oscuro: #4A5E3A;
/* Texto */
--texto-principal: #2C221A;
--texto-suave: #7A6358;
/* Sombras */
--sombra-sm: 0 2px 8px rgba(61,43,31,.12);
--sombra-md: 0 6px 24px rgba(61,43,31,.16);
--sombra-lg: 0 16px 48px rgba(61,43,31,.20);
/* Radios */
--radio: 14px;
--radio-lg: 22px;
/* Acento de cuento (se sobreescribe en cada cuento.css) */
--acento-cuento: #5A7FAA;
--acento-cuento-light: #E8F0F8;
}
/* ══════════════════════════════════════════════════════════════
4. LAYOUT
══════════════════════════════════════════════════════════════ */
/* ── Navbar ─────────────────────────────────────────────────── */
:root { --nav-h: 62px; }
.navbar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h);
background: var(--tierra-oscura);
display: flex; align-items: center;
padding: 0 24px;
z-index: 200;
box-shadow: 0 2px 20px rgba(0,0,0,.35);
}
body { padding-top: var(--nav-h); }
.nav-brand {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex-shrink: 0;
}
.nav-brand-icon {
width: 34px; height: 34px;
background: linear-gradient(135deg, var(--tierra-calida), var(--tierra-dorada));
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.nav-brand-text {
font-family: 'Playfair Display', serif;
font-size: .95rem; font-weight: 700; color: white; line-height: 1.2;
}
.nav-brand-text small {
display: block;
font-family: 'Nunito', sans-serif;
font-size: .6rem; font-weight: 400;
color: rgba(255,255,255,.5);
letter-spacing: .08em; text-transform: uppercase;
}
.nav-links {
display: flex; align-items: center; gap: 2px;
margin-left: auto; list-style: none;
}
.nav-links a {
display: block; padding: 8px 14px;
color: rgba(255,255,255,.65);
text-decoration: none;
font-size: .78rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
border-radius: 8px; transition: all .2s; white-space: nowrap;
}
.nav-links a:hover { color: white; background: rgba(255,255,255,.08); }
.nav-links a.active { color: var(--tierra-dorada); background: rgba(255,255,255,.05); }
/* Botón hamburguesa (solo móvil) */
.nav-toggle {
display: none; background: none; border: none;
color: white; font-size: 1.4rem;
cursor: pointer; margin-left: auto; padding: 4px;
}
@media (max-width: 860px) {
.nav-links { display: none; }
.nav-toggle { display: block; }
}
/* Menú móvil desplegable */
.mobile-menu {
display: none; flex-direction: column;
background: var(--tierra-oscura);
position: fixed; top: var(--nav-h); left: 0; right: 0;
padding: 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
z-index: 199; gap: 4px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
color: rgba(255,255,255,.7); text-decoration: none;
padding: 10px 14px; border-radius: 8px;
font-size: .85rem; font-weight: 600; transition: all .15s;
}
.mobile-menu a:hover { color: white; background: rgba(255,255,255,.08); }
.mob-section {
font-size: .65rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--tierra-dorada);
padding: 12px 14px 4px;
}
/* ── Mega-menu ──────────────────────────────────────────────── */
/*
Fix hover: se añade ::before invisible que cubre el hueco de 8px
entre el enlace y el panel, evitando que el hover se rompa al
mover el ratón hacia abajo.
*/
.nav-dropdown { position: relative; }
.mega-menu {
display: none;
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--tierra-oscura);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radio);
padding: 20px;
min-width: 820px;
box-shadow: var(--sombra-lg);
animation: fadeUp .2s ease;
}
/* Puente invisible: cubre el hueco entre el y el panel */
.mega-menu::before {
content: '';
position: absolute;
top: -12px; left: 0; right: 0;
height: 12px;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 20px;
}
.mega-col-title {
font-size: .65rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--tierra-dorada);
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
margin-bottom: 8px;
}
.mega-link {
display: block; padding: 6px 8px;
color: rgba(255,255,255,.6); text-decoration: none;
font-size: .78rem; border-radius: 6px;
transition: all .15s; line-height: 1.3;
}
.mega-link:hover { color: white; background: rgba(255,255,255,.06); }
.mega-link strong { color: rgba(255,255,255,.85); display: block; }
.mega-link small { color: rgba(255,255,255,.35); font-size: .7rem; }
.mega-dim { color: rgba(255,255,255,.3) !important; font-size: .72rem; }
/* ── Barra de migas ─────────────────────────────────────────── */
.topbar {
background: var(--tierra-oscura);
padding: 10px 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: .78rem;
color: rgba(255,255,255,.6);
position: sticky;
top: 0;
z-index: 100;
}
.topbar a {
color: var(--arena-clara);
text-decoration: none;
font-weight: 600;
transition: color .2s;
}
.topbar a:hover { color: white; }
.topbar .sep { opacity: .35; }
.topbar .current { color: rgba(255,255,255,.85); }
/* ── Hero ───────────────────────────────────────────────────── */
.hero {
background: linear-gradient(160deg,
var(--tierra-oscura) 0%,
var(--tierra-media) 60%,
var(--tierra-calida) 100%);
padding: 40px 24px 32px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
pointer-events: none;
}
/* Nombre del dios — grande y dorado */
.hero-god {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 10vw, 5rem);
font-weight: 700;
color: var(--tierra-dorada);
line-height: 1;
margin-bottom: 4px;
letter-spacing: -.02em;
text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
border-radius: 20px;
padding: 4px 12px;
font-size: .75rem;
color: var(--arena-clara);
margin-bottom: 16px;
backdrop-filter: blur(4px);
}
.hero-badge span { font-size: .9em; }
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.7rem, 5vw, 2.6rem);
color: white;
line-height: 1.2;
margin-bottom: 10px;
}
.hero-subtitle {
font-family: 'Lora', serif;
font-style: italic;
color: var(--arena-clara);
font-size: .95rem;
opacity: .85;
margin-bottom: 20px;
line-height: 1.5;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.meta-chip {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: 20px;
padding: 3px 10px;
font-size: .73rem;
color: rgba(255,255,255,.8);
}
/* ── Tabs ───────────────────────────────────────────────────── */
/*
--tabs-top se calcula en JS (initTabsTop) y se actualiza en cada
scroll. Valor por defecto = var(--nav-h) para cuando no hay topbar.
*/
.tabs-wrapper {
position: sticky;
top: var(--tabs-top, var(--nav-h, 62px));
z-index: 90;
background: var(--tierra-oscura);
padding: 0 4px 4px;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
transition: top .1s linear;
}
.tabs {
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 10px 16px 9px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
color: rgba(255,255,255,.5);
font-family: 'Nunito', sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
transition: all .25s;
white-space: nowrap;
min-width: 72px;
}
.tab-btn .tab-icon { font-size: 1.2rem; }
.tab-btn:hover {
color: rgba(255,255,255,.8);
background: rgba(255,255,255,.05);
}
.tab-btn.active {
color: var(--tierra-dorada);
border-bottom-color: var(--tierra-dorada);
background: rgba(201,150,62,.08);
}
/* ── Área de contenido principal ───────────────────────────── */
.main-content {
max-width: 720px;
margin: 0 auto;
padding: 28px 20px 60px;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Footer ─────────────────────────────────────────────────── */
.story-footer {
background: var(--tierra-oscura);
color: rgba(255,255,255,.6);
text-align: center;
padding: 24px 20px;
font-size: .78rem;
line-height: 1.8;
}
.story-footer a { color: var(--arena-clara); text-decoration: none; }
.story-footer strong { color: white; }
/* ══════════════════════════════════════════════════════════════
5. TIPOGRAFÍA DE CUENTO
══════════════════════════════════════════════════════════════ */
.story-lead {
font-family: 'Lora', serif;
font-size: 1.08rem;
line-height: 1.8;
color: var(--texto-principal);
margin-bottom: 1.4rem;
}
.story-body {
font-family: 'Lora', serif;
font-size: .98rem;
line-height: 1.9;
color: var(--texto-principal);
margin-bottom: 1.2rem;
}
/* ══════════════════════════════════════════════════════════════
6. COMPONENTES CUENTO
══════════════════════════════════════════════════════════════ */
/* Cabecera de escena */
.scene-header {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(122,148,105,.12), rgba(201,150,62,.08));
border-left: 3px solid var(--verde-salvia);
padding: 8px 14px;
border-radius: 0 8px 8px 0;
margin-bottom: 18px;
font-size: .82rem;
font-weight: 700;
color: var(--verde-oscuro);
text-transform: uppercase;
letter-spacing: .05em;
}
/* Diálogos
.dialogue = diálogo genérico (color acento cuento)
.dialogue.momo-voz = voz de Momo (o del personaje especial)
Para otros cuentos sobreescribe --acento-cuento en su CSS */
.dialogue {
background: var(--acento-cuento-light);
border-left: 4px solid var(--acento-cuento);
border-radius: 0 var(--radio) var(--radio) 0;
padding: 14px 18px;
margin: 16px 0;
font-family: 'Lora', serif;
font-style: italic;
font-size: .96rem;
line-height: 1.7;
}
.dialogue strong {
color: var(--acento-cuento);
font-style: normal;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .05em;
display: block;
margin-bottom: 4px;
}
.dialogue.dios-voz {
background: linear-gradient(135deg,
rgba(var(--acento-cuento-rgb, 90,127,170),.1),
rgba(var(--acento-cuento-rgb, 90,127,170),.05));
border-left-color: var(--acento-cuento);
}
/* Caja de concepto / reflexión */
.insight-box {
background: linear-gradient(135deg, var(--arena-clara), #EDD8B8);
border: 1px solid rgba(200,106,42,.2);
border-radius: var(--radio);
padding: 18px 20px;
margin: 24px 0;
position: relative;
}
.insight-box::before {
content: '💡';
position: absolute;
top: -10px;
left: 16px;
font-size: 1.3rem;
background: var(--arena-blanca);
padding: 0 4px;
}
.insight-box .label {
font-size: .72rem;
font-weight: 700;
color: var(--tierra-calida);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 8px;
}
.insight-box p { font-size: .9rem; line-height: 1.7; color: var(--texto-principal); }
.insight-box strong { color: var(--tierra-media); }
/* Caja final del cuento */
.ending-box {
background: linear-gradient(135deg, var(--tierra-oscura), var(--tierra-media));
border-radius: var(--radio-lg);
padding: 28px 24px;
margin-top: 32px;
text-align: center;
color: white;
}
.ending-box p {
font-family: 'Lora', serif;
font-size: 1rem;
line-height: 1.8;
opacity: .9;
margin-bottom: 12px;
}
.ending-box .final-wisdom {
font-style: italic;
font-size: 1.05rem;
color: var(--arena-clara);
}
/* Separador */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(139,94,60,.2), transparent);
margin: 28px 0;
}
/* Grupos / tribu (lista de reglas de cada grupo) */
.grupos-box {
background: var(--acento-cuento-light);
border: 1px solid rgba(90,127,170,.2);
border-radius: var(--radio);
padding: 16px 18px;
margin: 20px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.grupo-item {
background: rgba(90,127,170,.1);
border-left: 4px solid var(--acento-cuento);
padding: 9px 13px;
border-radius: 0 8px 8px 0;
font-size: .88rem;
line-height: 1.6;
}
/* Paradas del personaje especial */
.parada-box {
background: linear-gradient(135deg, rgba(56,178,172,.08), rgba(56,178,172,.04));
border: 1px solid rgba(56,178,172,.25);
border-radius: var(--radio);
padding: 16px 18px;
margin: 18px 0;
}
.parada-title {
font-size: .75rem;
font-weight: 700;
color: #2C9A95;
text-transform: uppercase;
letter-spacing: .07em;
margin-bottom: 4px;
}
/* Lista de cambios / efectos */
.cambios-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 18px 0;
}
.cambio-item {
background: rgba(201,150,62,.08);
border-radius: 8px;
padding: 10px 14px;
font-size: .9rem;
line-height: 1.5;
}
/* Lección / moraleja */
.leccion-box {
background: linear-gradient(135deg, rgba(74,94,58,.08), rgba(122,148,105,.06));
border: 1.5px solid rgba(122,148,105,.3);
border-radius: var(--radio);
padding: 20px 22px;
margin: 28px 0;
}
.leccion-title {
font-weight: 700;
color: var(--verde-oscuro);
margin-bottom: 10px;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.leccion-box p { font-size: .9rem; line-height: 1.75; color: var(--texto-principal); }
/* Columnas de aprendizajes (2 col en tablet+) */
.aprendizajes {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 20px 0 28px;
}
.aprendizaje-col {
background: white;
border: 1px solid rgba(139,94,60,.1);
border-radius: var(--radio);
padding: 16px 18px;
box-shadow: var(--sombra-sm);
}
.ap-title {
font-weight: 700;
color: var(--tierra-media);
margin-bottom: 10px;
font-size: .83rem;
}
.aprendizaje-col ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.aprendizaje-col li {
font-size: .85rem;
line-height: 1.5;
padding-left: 16px;
position: relative;
color: var(--texto-suave);
}
.aprendizaje-col li::before {
content: '·';
position: absolute;
left: 4px;
color: var(--tierra-calida);
font-weight: 900;
}
/* ══════════════════════════════════════════════════════════════
7. COMPONENTES TEATRO
══════════════════════════════════════════════════════════════ */
/* Bloque introductorio / claves */
.teatro-intro {
background: linear-gradient(135deg, #FFF8EE, var(--arena-clara));
border: 2px solid var(--tierra-dorada);
border-radius: var(--radio-lg);
padding: 22px 20px;
margin-bottom: 28px;
}
.teatro-intro h3 {
font-family: 'Playfair Display', serif;
color: var(--tierra-media);
font-size: 1.15rem;
margin-bottom: 8px;
}
.teatro-intro p { font-size: .9rem; line-height: 1.7; color: var(--texto-suave); }
/* Tarjeta de acto */
.acto-card {
background: white;
border-radius: var(--radio);
box-shadow: var(--sombra-sm);
margin-bottom: 20px;
overflow: hidden;
border: 1px solid rgba(139,94,60,.1);
}
.acto-header {
background: linear-gradient(135deg, var(--tierra-media), var(--tierra-calida));
color: white;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 10px;
}
.acto-num {
background: rgba(255,255,255,.2);
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .85rem;
flex-shrink: 0;
}
.acto-header h4 { font-size: .9rem; font-weight: 700; }
.acto-header .timing {
margin-left: auto;
background: rgba(255,255,255,.15);
border-radius: 10px;
padding: 2px 8px;
font-size: .72rem;
opacity: .9;
}
.acto-body { padding: 18px; }
/* Indicación de escena */
.stage-dir {
background: rgba(201,150,62,.08);
border-radius: 8px;
padding: 8px 14px;
font-size: .83rem;
font-style: italic;
color: var(--tierra-media);
margin: 10px 0;
}
.stage-dir::before { content: '📍 '; }
/* Línea de narrador */
.narrador-line {
background: rgba(61,43,31,.05);
border-left: 3px solid var(--tierra-oscura);
padding: 10px 14px;
margin: 8px 0;
font-size: .88rem;
line-height: 1.6;
border-radius: 0 8px 8px 0;
}
.narrador-line strong {
color: var(--tierra-oscura);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
}
/* Voz del dios / personaje especial
.voz-dios: azul acento cuento
Añade .voz-[nombre] en el CSS del cuento si necesitas más voces */
.voz-dios {
background: linear-gradient(135deg,
rgba(90,127,170,.08),
rgba(90,127,170,.04));
border-left: 3px solid var(--acento-cuento);
padding: 10px 14px;
margin: 8px 0;
font-size: .88rem;
font-style: italic;
line-height: 1.6;
border-radius: 0 8px 8px 0;
}
.voz-dios strong {
color: var(--acento-cuento);
font-style: normal;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
display: block;
margin-bottom: 3px;
}
/* Voz de personaje secundario (tierra media) */
.voz-personaje {
background: rgba(61,43,31,.05);
border-left: 3px solid var(--tierra-media);
padding: 10px 14px;
margin: 8px 0;
font-size: .88rem;
font-style: italic;
line-height: 1.6;
border-radius: 0 8px 8px 0;
}
.voz-personaje strong {
color: var(--tierra-media);
font-style: normal;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
display: block;
margin-bottom: 3px;
}
/* Nota pedagógica (verde) */
.pedagogical-note {
background: rgba(122,148,105,.1);
border: 1px dashed var(--verde-salvia);
border-radius: 8px;
padding: 10px 14px;
font-size: .82rem;
color: var(--verde-oscuro);
margin-top: 12px;
}
.pedagogical-note::before { content: '🧠 '; }
/* Interacción con público */
.interaction-prompt {
background: rgba(200,106,42,.08);
border: 1px solid rgba(200,106,42,.2);
border-radius: 8px;
padding: 10px 14px;
font-size: .83rem;
color: var(--tierra-calida);
margin: 10px 0;
font-weight: 600;
}
.interaction-prompt::before { content: '🗣️ '; }
/* Nota de energía / advertencia de director */
.energy-note {
background: rgba(201,150,62,.1);
border: 1.5px solid rgba(201,150,62,.3);
border-radius: 8px;
padding: 10px 14px;
font-size: .83rem;
color: var(--tierra-oscura);
margin: 10px 0;
}
/* Grid de materiales */
.materiales-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 14px 0;
}
.material-chip {
background: var(--arena-clara);
border: 1px solid rgba(200,106,42,.2);
border-radius: 10px;
padding: 10px 12px;
font-size: .8rem;
line-height: 1.5;
}
.material-chip small {
color: var(--texto-suave);
display: block;
margin-top: 3px;
font-size: .74rem;
}
/* Lista de specs de espacio */
.teatro-specs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.spec-item { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.6; }
.spec-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
/* Grid de transformaciones de personaje */
.transformaciones-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 12px 0;
}
.transf-item {
background: rgba(122,148,105,.08);
border-radius: 8px;
padding: 10px 12px;
font-size: .84rem;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════
8. COMPONENTES ADULTOS
══════════════════════════════════════════════════════════════ */
/* Banner intro */
.adultos-warning {
background: linear-gradient(135deg, var(--tierra-oscura), #4A3022);
border-radius: var(--radio-lg);
padding: 22px 20px;
color: white;
margin-bottom: 28px;
text-align: center;
}
.adultos-warning .icon { font-size: 2rem; margin-bottom: 8px; }
.adultos-warning h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 6px; }
.adultos-warning p { font-size: .85rem; opacity: .8; line-height: 1.6; }
/* Grid 2 columnas adultos */
.adultos-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 20px;
}
/* Tarjeta de concepto */
.concepto-card {
background: white;
border-radius: var(--radio);
box-shadow: var(--sombra-sm);
margin-bottom: 20px;
overflow: hidden;
border: 1px solid rgba(139,94,60,.1);
}
.concepto-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--arena-clara);
border-radius: 20px;
padding: 4px 12px;
font-size: .73rem;
font-weight: 700;
color: var(--tierra-media);
text-transform: uppercase;
letter-spacing: .05em;
margin-bottom: 10px;
}
.concepto-card > .concepto-body { padding: 20px; }
.concepto-body h4 {
font-family: 'Playfair Display', serif;
color: var(--tierra-oscura);
font-size: 1.05rem;
margin-bottom: 10px;
}
.concepto-body p { font-size: .9rem; line-height: 1.75; color: var(--texto-suave); margin-bottom: 12px; }
.concepto-body strong { color: var(--tierra-media); }
/* Lista de preguntas */
.preguntas-list { list-style: none; margin-top: 14px; }
.preguntas-list li {
padding: 10px 14px 10px 36px;
position: relative;
font-size: .88rem;
line-height: 1.6;
border-bottom: 1px solid rgba(139,94,60,.08);
color: var(--texto-principal);
}
.preguntas-list li::before {
content: '→';
position: absolute;
left: 14px;
color: var(--tierra-calida);
font-weight: 700;
}
.preguntas-list li:last-child { border-bottom: none; }
/* Caja de alerta / dato importante */
.alerta-box {
background: rgba(200,106,42,.06);
border: 1.5px solid rgba(200,106,42,.25);
border-radius: var(--radio);
padding: 16px 18px;
margin: 20px 0;
font-size: .88rem;
line-height: 1.7;
color: var(--texto-principal);
}
.alerta-box .alerta-title {
font-weight: 700;
color: var(--tierra-calida);
margin-bottom: 6px;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .06em;
}
/* Grid de datos estadísticos */
.datos-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.dato-item {
background: white;
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dato-num {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--tierra-calida);
line-height: 1;
}
.dato-item span:last-child { font-size: .78rem; color: var(--texto-suave); line-height: 1.4; }
/* ══════════════════════════════════════════════════════════════
9. COMPONENTES CUADERNO
══════════════════════════════════════════════════════════════ */
/* Cabecera del cuaderno */
.cuaderno-header {
background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-salvia));
border-radius: var(--radio-lg);
padding: 22px 20px;
color: white;
margin-bottom: 28px;
}
.cuaderno-header h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin-bottom: 6px; }
.cuaderno-header p { font-size: .85rem; opacity: .85; line-height: 1.6; }
.cuaderno-intro-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.cuaderno-intro-list span {
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
border-radius: 20px;
padding: 4px 12px;
font-size: .78rem;
}
/* Tarjeta de actividad */
.actividad-card {
background: white;
border-radius: var(--radio);
box-shadow: var(--sombra-sm);
margin-bottom: 22px;
overflow: hidden;
border: 1px solid rgba(122,148,105,.2);
}
.actividad-header {
background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-salvia));
color: white;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 10px;
}
.actividad-num {
background: rgba(255,255,255,.2);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .85rem;
flex-shrink: 0;
}
.actividad-header h4 { font-size: .9rem; font-weight: 700; }
.actividad-header .edad {
margin-left: auto;
background: rgba(255,255,255,.15);
border-radius: 10px;
padding: 2px 9px;
font-size: .7rem;
}
.actividad-body { padding: 18px; }
.actividad-body p { font-size: .88rem; line-height: 1.7; color: var(--texto-suave); margin-bottom: 14px; }
.actividad-body p strong { color: var(--verde-oscuro); }
/* Área de ejercicio */
.ejercicio-area {
background: linear-gradient(135deg, rgba(122,148,105,.07), rgba(74,94,58,.05));
border: 1.5px dashed rgba(122,148,105,.4);
border-radius: var(--radio);
padding: 16px;
margin: 14px 0;
}
.ejercicio-area .ej-label {
font-size: .72rem;
font-weight: 700;
color: var(--verde-oscuro);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 8px;
}
/* Campo de escritura */
.campo-escritura {
background: white;
border: 1px solid rgba(122,148,105,.3);
border-radius: 8px;
padding: 12px;
min-height: 70px;
font-size: .88rem;
color: var(--texto-suave);
line-height: 1.6;
}
.campo-escritura.lineas {
background: repeating-linear-gradient(
transparent,
transparent 27px,
rgba(122,148,105,.15) 27px,
rgba(122,148,105,.15) 28px
);
line-height: 28px;
}
/* Chips de reflexión (toggle) */
.reflection-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.r-chip {
background: var(--arena-clara);
border: 1.5px solid rgba(200,106,42,.2);
border-radius: 20px;
padding: 5px 13px;
font-size: .82rem;
color: var(--tierra-media);
cursor: pointer;
transition: all .2s;
user-select: none;
}
.r-chip:hover,
.r-chip.selected {
background: var(--tierra-calida);
color: white;
border-color: var(--tierra-calida);
}
/* Grid de pistas (visible / invisible) */
.pistas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.pista-card { border-radius: 10px; padding: 14px; }
.visible-pista { background: rgba(90,127,170,.08); border: 1px solid rgba(90,127,170,.2); }
.invisible-pista { background: rgba(139,92,246,.06); border: 1px solid rgba(139,92,246,.2); }
.pista-title { font-weight: 700; font-size: .8rem; margin-bottom: 8px; color: var(--tierra-media); }
.pista-card ul { list-style: none; padding: 0; }
.pista-card li { font-size: .82rem; line-height: 1.6; padding-left: 12px; position: relative; color: var(--texto-suave); }
.pista-card li::before { content: '·'; position: absolute; left: 2px; color: var(--tierra-calida); font-weight: 900; }
/* Grid de experimentos (2 col → 3 col) */
.experimentos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.exp-card {
background: var(--arena-blanca);
border: 1px solid rgba(122,148,105,.2);
border-radius: var(--radio);
padding: 14px;
}
.exp-icon { font-size: 1.6rem; margin-bottom: 6px; }
.exp-title { font-weight: 700; font-size: .85rem; color: var(--verde-oscuro); margin-bottom: 8px; }
.exp-card p { font-size: .8rem; line-height: 1.5; color: var(--texto-suave); margin-bottom: 4px; }
/* Grid de momentos (2 col → 3 col) */
.momentos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.momento-card {
background: white;
border: 1px solid rgba(139,94,60,.1);
border-radius: var(--radio);
padding: 14px;
box-shadow: var(--sombra-sm);
text-align: center;
}
.momento-icon { font-size: 1.8rem; margin-bottom: 6px; }
.momento-card strong { font-size: .85rem; color: var(--tierra-media); display: block; margin-bottom: 6px; }
.momento-card p { font-size: .78rem; line-height: 1.5; color: var(--texto-suave); margin: 0; }
/* Cita de personaje (cuaderno) */
.cita-personaje {
background: linear-gradient(135deg, var(--arena-clara), #EDD8B8);
border-left: 4px solid var(--tierra-calida);
border-radius: 0 var(--radio) var(--radio) 0;
padding: 18px 20px;
margin: 24px 0;
font-family: 'Lora', serif;
font-style: italic;
}
.cita-personaje p { font-size: .98rem; line-height: 1.7; margin-bottom: 6px; color: var(--tierra-oscura); }
.cita-personaje span { font-size: .78rem; font-weight: 700; color: var(--tierra-media); font-style: normal; }
/* Ejemplo de diario */
.diario-ejemplo {
background: rgba(90,127,170,.08);
border-radius: 8px;
padding: 12px 14px;
font-size: .84rem;
line-height: 1.6;
color: var(--texto-suave);
}
/* Bloque de cierre del cuaderno */
.cuaderno-cierre {
background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-salvia));
border-radius: var(--radio-lg);
padding: 26px 22px;
color: white;
margin: 28px 0;
}
.cuaderno-cierre h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; margin-bottom: 12px; }
.cuaderno-cierre p { font-size: .9rem; line-height: 1.75; opacity: .9; margin-bottom: 10px; }
.cuaderno-cierre em { color: rgba(255,255,255,.8); }
/* ══════════════════════════════════════════════════════════════
10. UTILIDADES GENERALES
══════════════════════════════════════════════════════════════ */
/* Títulos de sección */
.section-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
color: var(--tierra-oscura);
margin-bottom: 6px;
}
.section-subtitle {
font-size: .85rem;
color: var(--texto-suave);
margin-bottom: 24px;
line-height: 1.5;
}
/* Botón imprimir */
.print-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--tierra-oscura);
color: white;
border: none;
border-radius: var(--radio);
padding: 12px 20px;
font-family: 'Nunito', sans-serif;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
margin: 28px auto 0;
transition: transform .15s, box-shadow .15s;
}
.print-btn:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-md);
}
/* ══════════════════════════════════════════════════════════════
11. RESPONSIVE
══════════════════════════════════════════════════════════════ */
/* Tablet ≥ 600px */
@media (min-width: 600px) {
.materiales-grid { grid-template-columns: repeat(3, 1fr); }
.adultos-grid { grid-template-columns: 1fr 1fr; }
.aprendizajes { grid-template-columns: 1fr 1fr; }
.experimentos-grid { grid-template-columns: repeat(3, 1fr); }
.momentos-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Móvil pequeño ≤ 500px */
@media (max-width: 500px) {
.transformaciones-grid { grid-template-columns: 1fr; }
.pistas-grid { grid-template-columns: 1fr; }
}
/* PC ≥ 900px */
@media (min-width: 900px) {
.main-content { padding: 36px 40px 80px; }
.tabs { justify-content: center; }
.tab-btn { padding: 12px 28px 11px; font-size: .78rem; min-width: 100px; }
.tab-btn .tab-icon { font-size: 1.3rem; }
.story-lead { font-size: 1.15rem; }
.hero { padding: 56px 40px 44px; }
}
/* ══════════════════════════════════════════════════════════════
12. PRINT
══════════════════════════════════════════════════════════════ */
@media print {
.topbar, .tabs-wrapper, .print-btn { display: none !important; }
.tab-panel { display: block !important; }
.hero {
background: none !important;
color: var(--tierra-oscura) !important;
padding: 20px 0 !important;
}
.hero-god, .hero-title { color: var(--tierra-oscura) !important; }
.hero-subtitle { color: var(--texto-suave) !important; }
.hero-badge, .hero-meta { display: none; }
body { background: white; }
.acto-card,
.concepto-card,
.actividad-card { box-shadow: none; border: 1px solid #ccc; }
.ending-box { background: var(--arena-clara) !important; color: var(--tierra-oscura) !important; }
.adultos-warning,
.cuaderno-header,
.cuaderno-cierre { background: var(--arena-clara) !important; color: var(--tierra-oscura) !important; }
}
/* ══════════════════════════════════════════════════════════════
13. SCRIPTS GLOBALES
──────────────────────────────────────────────────────────────
No se pueden incluir scripts en CSS, pero aquí se documenta
qué scripts deben estar al final del en cada página.
toggleMobile() — menú hamburguesa
initTabsTop() — ajusta --tabs-top para que las pestañas se
peguen al navbar cuando el topbar desaparece
Snippet canónico (copiar al final de ):
──────────────────────────────────────────────
══════════════════════════════════════════════════════════════ */