/* ══════════════════════════════════════════════════════════════════════════════ * CASA RURAL EL ÁLAMO — css/web/temas.css * ══════════════════════════════════════════════════════════════════════════════ * * Overrides de paleta y decoraciones específicas según tema activo. * El lleva clase `.tema-{clave}` que permite selectores. * * El tema base (verde oliva + marrón + dorado + crema) ya está en base.css. * Aquí redefinimos las variables semánticas para que cada tema cambie: * - --color-accent (dorado de títulos → color estacional) * - --color-bg, --color-bg-alt (tintes sutiles de fondo) * - --color-border (bordes que combinan con la temporada) * * Mantenemos --color-primary (verde oliva) y --color-secondary (marrón) sin * tocar: son la identidad de Casa Rural y permanecen en todos los temas. * * hl 06/05/2026: refactor a paletas inmersivas. Antes solo cambiaban * acentos secundarios de uso muy limitado; ahora el dorado de títulos y el * fondo cambian con la temporada, manteniendo la identidad base. * ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ * TEMA: PRIMAVERA (marzo 21 - junio 20) * Acento: rosa malva tierra. Crema con tinte rosáceo. * ══════════════════════════════════════════════════════════════════════════ */ .tema-primavera { --color-accent-suave: #e8b4b8; --color-acento-secundario: #c5a8c9; --color-accent: #c47a8a; --color-bg: #fdf6f7; --color-bg-alt: #f8e8ea; --color-border: #ddc5c8; } .tema-primavera .hero-content__titulo em { color: #c47a8a; } .tema-primavera .paisaje-item--primavera { border: 2px solid var(--color-accent-suave); } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: VERANO (junio 21 - septiembre 22) * Acento: dorado más cálido y vivo. Crema cálido. * ══════════════════════════════════════════════════════════════════════════ */ .tema-verano { --color-accent-suave: #e8b85f; --color-acento-secundario: #6ba8c5; --color-accent: #d49b3a; --color-bg: #fefaf2; --color-bg-alt: #f8eed8; --color-border: #e0d0a8; } .tema-verano .hero-content__titulo em { color: #d49b3a; } .tema-verano .bloque--hero { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-crema) 70%, #e8b85f) 0%, var(--color-crema) 50%, color-mix(in srgb, var(--color-crema) 70%, #6ba8c5) 100% ); } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: OTOÑO (septiembre 23 - diciembre 20) * Acento: ocre dehesa. Crema tostado. * ══════════════════════════════════════════════════════════════════════════ */ .tema-otono { --color-accent-suave: #b87040; --color-acento-secundario: #8b3a2f; --color-accent: #b87040; --color-bg: #faf6ee; --color-bg-alt: #f0e8d8; --color-border: #d8c8a8; } .tema-otono .hero-content__titulo em { color: #b8652d; } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: INVIERNO (diciembre 21 - marzo 20) * Acento: plata-azul ceniza. Crema con tinte frío. * ══════════════════════════════════════════════════════════════════════════ */ .tema-invierno { --color-accent-suave: #7a8a95; --color-acento-secundario: #c0c0c0; --color-accent: #8a9aa8; --color-bg: #f6f7f8; --color-bg-alt: #e8eaee; --color-border: #c8cdd5; } .tema-invierno .hero-content__titulo em { color: #8a9aa8; } .tema-invierno .bloque--hero { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-crema) 82%, #7a8a95) 0%, var(--color-crema) 50%, color-mix(in srgb, var(--color-crema) 82%, #c0c0c0) 100% ); } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: SEMANA SANTA (fechas dinámicas) * Acento: morado cirio + dorado litúrgico + verde brote. * ══════════════════════════════════════════════════════════════════════════ */ .tema-semana_santa { --color-accent: #8b5a9f; --color-accent-suave: #c9a961; --color-acento-secundario: #7a9a5a; --color-bg: #faf6f8; --color-bg-alt: #f0e8ee; --color-border: #d8c8d8; } .tema-semana_santa .bloque--destacado::before { background: #8b5a9f; width: 80px; height: 3px; } .tema-semana_santa .hero-content__titulo em { color: #8b5a9f; } .tema-semana_santa .btn--primario { background: #8b5a9f; border-color: #8b5a9f; color: white; } .tema-semana_santa .btn--primario:hover { background: #6e4680; border-color: #6e4680; } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: NAVIDAD (dic 15 - ene 7, dinámico) * Acento: rojo adviento. Crema cálido invernal. * ══════════════════════════════════════════════════════════════════════════ */ .tema-navidad { --color-accent: #8b2b2b; --color-accent-suave: #c9a961; --color-acento-secundario: #2f5f3f; --color-bg: #fdf6f3; --color-bg-alt: #f8e8e0; --color-border: #e0c8c0; } .tema-navidad .hero-content__titulo em { color: #8b2b2b; } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: SAN VALENTÍN (feb 10 - feb 16) * Paleta romántica: rosa + granate. * ══════════════════════════════════════════════════════════════════════════ */ .tema-san_valentin { --color-accent: #c9406e; --color-accent-suave: #e8a5b8; --color-acento-secundario: #8b2b4a; --color-bg: #fdf5f7; --color-bg-alt: #f8e0e8; --color-border: #e8c8d0; } .tema-san_valentin .hero-content__titulo em { color: #c9406e; } /* ══════════════════════════════════════════════════════════════════════════ * TEMA: BASE (por defecto) * Mantiene la paleta del base.css (verde oliva + marrón + dorado + crema) * pero añade pequeños toques de elegancia: un florón en cabeceras, un * gradient cremoso muy sutil en el hero y el italic dorado garantizado. * Sin sobrecargar — el tema base sigue siendo el más sobrio. * ══════════════════════════════════════════════════════════════════════════ */ .tema-base { /* No se redefinen variables: usa las de base.css */ } /* Italic del hero garantizado en dorado (en otros temas se sustituye por el color del tema). */ .tema-base .hero-content__titulo em { color: var(--color-dorado); } /* Hero con gradient cremoso muy sutil — antes era plano. Da profundidad sin cambiar la sensación general. Solo se aplica si NO hay imagen de fondo definida (la regla de imagen de fondo en base.css tiene más peso por especificidad). */ .tema-base .bloque--hero { background: linear-gradient( 180deg, var(--color-crema) 0%, color-mix(in srgb, var(--color-crema) 92%, var(--color-dorado)) 55%, var(--color-crema) 100% ); } /* ══════════════════════════════════════════════════════════════════════════ * DECORACIONES POR TEMA: iconos sobre cabeceras de bloques. * Tamaño y opacidad ligeramente subidos para que se noten más. * ══════════════════════════════════════════════════════════════════════════ */ /* Base: florón ornamental clásico — sobrio, sin connotación estacional */ .tema-base .bloque-cabecera::before { content: '❧'; display: block; font-size: 1.5rem; color: var(--color-dorado); opacity: 0.55; margin-bottom: var(--sp-2); } .tema-primavera .bloque-cabecera::before { content: '✿'; display: block; font-size: 1.75rem; color: var(--color-accent); opacity: 0.7; margin-bottom: var(--sp-2); } .tema-verano .bloque-cabecera::before { content: '☀'; display: block; font-size: 1.75rem; color: var(--color-accent); opacity: 0.75; margin-bottom: var(--sp-2); } .tema-otono .bloque-cabecera::before { content: '❦'; display: block; font-size: 1.75rem; color: var(--color-accent); opacity: 0.7; margin-bottom: var(--sp-2); } .tema-invierno .bloque-cabecera::before { content: '❆'; display: block; font-size: 1.75rem; color: var(--color-accent); opacity: 0.7; margin-bottom: var(--sp-2); } .tema-navidad .bloque-cabecera::before { content: '★'; display: block; font-size: 1.75rem; color: var(--color-accent); opacity: 0.7; margin-bottom: var(--sp-2); } .tema-semana_santa .bloque-cabecera::before { content: '✛'; display: block; font-size: 1.5rem; color: var(--color-accent); opacity: 0.55; margin-bottom: var(--sp-2); } .tema-san_valentin .bloque-cabecera::before { content: '♥'; display: block; font-size: 1.5rem; color: var(--color-accent); opacity: 0.6; margin-bottom: var(--sp-2); }