/* ================================================================
tamariz.es — Hoja de estilos común
Extraída y refactorizada a partir de sanjuan.htm
Usada por: sanjuan.htm, casetas-era.htm, blasones.htm
Última actualización: julio de 2026
================================================================ */
/* Variables CSS */
:root {
--color-primary: #8B4513;
--color-secondary: #D2691E;
--color-accent: #CD853F;
--color-text: #333;
--color-background: #FFF8DC;
--color-white: #ffffff;
--color-light-gray: #f5f5f5;
--color-border: #ddd;
--color-lista-roja: #c41e3a;
--shadow: 0 2px 8px rgba(0,0,0,0.1);
--shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
--transition: all 0.3s ease;
}
/* Reset y base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.8;
color: var(--color-text);
background-color: var(--color-background);
}
/* Accesibilidad
Enlace "Saltar al contenido principal": oculto hasta recibir el foco.
Debe ser el primer elemento del de cada página. */
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
z-index: 200;
background: var(--color-primary);
color: var(--color-white);
padding: 0.75rem 1rem;
border-radius: 8px;
}
/* Foco visible para navegación con teclado */
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--color-secondary);
outline-offset: 3px;
}
/* Header */
.header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-white);
padding: 2rem 1rem;
text-align: center;
box-shadow: var(--shadow);
}
.header h1 {
font-size: 2.2rem;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.header .subtitle {
font-size: 1.1rem;
opacity: 0.9;
}
/* Breadcrumb */
.breadcrumb {
padding: 1rem;
background-color: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb nav {
max-width: 1200px;
margin: 0 auto;
}
.breadcrumb a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
}
.breadcrumb a:hover,
.breadcrumb a:focus {
color: var(--color-secondary);
text-decoration: underline;
}
/* Índice de navegación */
.nav-index {
background-color: var(--color-white);
border-bottom: 2px solid var(--color-accent);
padding: 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow);
}
.nav-index-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.nav-index ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
}
.nav-index li {
position: relative;
}
.nav-index a {
display: block;
padding: 1rem 1.25rem;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: var(--transition);
border-bottom: 3px solid transparent;
}
.nav-index a:hover,
.nav-index a:focus {
background-color: var(--color-background);
color: var(--color-secondary);
border-bottom-color: var(--color-accent);
}
/* Contenedor principal */
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* Sección de introducción (con imagen y texto en dos columnas) */
.intro-section {
background-color: var(--color-white);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
scroll-margin-top: 80px;
}
.intro-text h2 {
color: var(--color-primary);
font-size: 1.6rem;
margin-bottom: 1rem;
}
.intro-text p {
margin-bottom: 1rem;
}
.intro-image {
text-align: center;
}
.intro-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: var(--shadow);
}
.intro-image figcaption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: #666;
font-style: italic;
}
/* Badge Lista Roja */
.lista-roja-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: var(--color-lista-roja);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
margin: 1rem 0;
}
.lista-roja-badge a {
color: white;
text-decoration: underline;
}
.lista-roja-badge a:hover {
opacity: 0.9;
}
/* Alerta de estado */
.alerta-estado {
background-color: #fff3cd;
border: 2px solid #ffc107;
border-radius: 8px;
padding: 1rem 1.5rem;
margin: 1.5rem 0;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.alerta-estado-icono {
font-size: 1.5rem;
flex-shrink: 0;
}
.alerta-estado p {
margin: 0;
}
/* Secciones de contenido */
.content-section {
background-color: var(--color-white);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow);
scroll-margin-top: 80px;
}
.content-section h2 {
color: var(--color-primary);
font-size: 1.6rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid var(--color-accent);
}
.content-section h3 {
color: var(--color-secondary);
font-size: 1.3rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.content-section h4 {
color: var(--color-primary);
font-size: 1.1rem;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.content-section p {
margin-bottom: 1rem;
}
.content-section a {
color: var(--color-primary);
transition: var(--transition);
}
.content-section a:hover,
.content-section a:focus {
color: var(--color-secondary);
}
/* Listas dentro de content-section */
.content-section ul,
.content-section ol {
margin: 1rem 0 1rem 2rem;
}
.content-section ul li,
.content-section ol li {
margin-bottom: 0.5rem;
}
/* Citas en bloque */
.quote {
background-color: var(--color-light-gray);
border-left: 4px solid var(--color-accent);
padding: 1.5rem;
margin: 1.5rem 0;
font-style: italic;
border-radius: 4px;
}
/* Cajas de información */
.info-box {
background-color: #FFF9E6;
border: 2px solid var(--color-accent);
border-radius: 8px;
padding: 1.5rem;
margin: 1.5rem 0;
}
.info-box h4 {
color: var(--color-primary);
margin-bottom: 0.5rem;
margin-top: 0;
}
/* Galería de imágenes (grid responsive) */
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.image-gallery figure {
margin: 0;
/* En galerías largas evita renderizar de golpe todas las fotos */
content-visibility: auto;
contain-intrinsic-size: 300px 320px;
}
.image-gallery a {
display: block;
overflow: hidden;
border-radius: 8px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.image-gallery a:hover,
.image-gallery a:focus {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.image-gallery img {
width: 100%;
height: auto;
display: block;
}
.image-gallery figcaption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: #666;
font-style: italic;
line-height: 1.5;
}
/* Bloque de época en galería temporal (para galerías como §6 de casetas-era) */
.gallery-epoch {
margin: 2rem 0;
}
.gallery-epoch h3 {
margin-bottom: 1rem;
}
/* Imagen individual */
.single-image {
text-align: center;
margin: 2rem 0;
}
.single-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: var(--shadow);
}
.single-image figcaption,
.image-caption {
margin-top: 0.75rem;
font-size: 0.9rem;
color: #666;
font-style: italic;
}
/* Referencia destacada de fuente */
.source-reference {
margin-top: 1.5rem;
padding: 1rem;
background-color: #fff;
border-left: 3px solid var(--color-accent);
font-size: 0.9rem;
color: #666;
font-style: italic;
}
/* Sección desplegable (no usada en casetas-era, pero mantenida para sanjuan.htm) */
.expandable-section {
margin: 2rem 0;
border: 2px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
}
.expand-btn {
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
color: var(--color-white);
border: none;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
font-family: inherit;
}
.expand-btn:hover,
.expand-btn:focus {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}
.expand-btn::after {
content: '▼';
margin-left: auto;
transition: transform 0.3s ease;
font-size: 0.85em;
}
.expand-btn[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.expand-content {
display: none;
padding: 0;
background-color: #fafafa;
}
.expand-content.show {
display: block;
padding: 2rem;
}
.expand-content h4 {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 1.5rem;
text-align: center;
}
/* Bloque destacado para invitación / llamada a participar */
.invitacion-box {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
border-left: 5px solid var(--color-primary);
}
.invitacion-box h3 {
color: var(--color-primary);
margin-bottom: 1rem;
margin-top: 0;
}
.invitacion-box p {
margin: 0;
}
.invitacion-box a {
font-weight: 600;
}
/* ================================================================
Cronología — raíl vertical de fechas
Para páginas que narran un proceso a lo largo del tiempo.
Estructura:
2023–2026
…
================================================================ */
/* Rótulo de periodo sobre el título de sección */
.seccion-periodo {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.25rem;
}
.cronologia {
margin: 1.5rem 0 0;
padding-left: 1.75rem;
border-left: 3px solid var(--color-accent);
}
.content-section .cronologia ol {
list-style: none;
margin: 0;
padding: 0;
}
.content-section .cronologia li {
position: relative;
margin-bottom: 1.75rem;
}
.content-section .cronologia li:last-child {
margin-bottom: 0;
}
.cronologia li::before {
content: '';
position: absolute;
left: calc(-1.75rem - 7px);
top: 0.55rem;
width: 11px;
height: 11px;
border-radius: 50%;
background-color: var(--color-accent);
border: 2px solid var(--color-white);
}
.cronologia li p {
margin-bottom: 0.5rem;
}
.cronologia li p:last-child {
margin-bottom: 0;
}
/* Encabezado de año */
.content-section h3.cronologia-anio {
font-size: 1.15rem;
color: var(--color-primary);
margin-top: 2rem;
margin-bottom: 1rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--color-border);
}
.content-section h3.cronologia-anio:first-child {
margin-top: 0;
}
/* Marcador de fecha */
.cronologia .fecha {
display: inline-block;
background-color: var(--color-light-gray);
color: var(--color-primary);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.4;
padding: 0.2rem 0.7rem;
border-radius: 20px;
margin-bottom: 0.5rem;
}
/* Hitos: momentos que cambian el curso de la historia */
.cronologia li.hito::before {
width: 17px;
height: 17px;
left: calc(-1.75rem - 10px);
top: 0.4rem;
background-color: var(--color-primary);
}
.cronologia li.hito .fecha {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Bloque de bibliografía / referencias */
.bibliografia {
list-style: none;
padding: 0;
}
/* Anula la sangría genérica de listas: la bibliografía no lleva viñeta */
.content-section ol.bibliografia,
.content-section ul.bibliografia {
margin-left: 0;
}
.bibliografia li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-border);
margin-bottom: 0;
}
.bibliografia li:last-child {
border-bottom: none;
}
/* Navegación footer */
.footer-nav {
background-color: var(--color-white);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--shadow);
}
.footer-nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}
.footer-nav a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.footer-nav a:hover,
.footer-nav a:focus {
color: var(--color-secondary);
text-decoration: underline;
}
/* Enlace a la asociación */
.asociacion-link {
background-color: #e8f5e9;
border: 2px solid #4caf50;
border-radius: 8px;
padding: 1.5rem;
margin: 2rem 0;
text-align: center;
}
.asociacion-link p {
margin: 0;
}
.asociacion-link a {
font-weight: 600;
}
/* Footer */
.footer {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-white);
text-align: center;
padding: 2rem 1rem;
margin-top: 2rem;
}
.footer a {
color: var(--color-white);
text-decoration: underline;
}
/* Botón volver arriba */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
box-shadow: var(--shadow-hover);
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 99;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover,
.back-to-top:focus {
background: var(--color-secondary);
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 900px) {
.intro-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.header h1 {
font-size: 1.8rem;
}
.nav-index {
position: relative;
top: auto;
}
.nav-index ul {
flex-direction: column;
align-items: stretch;
}
.nav-index a {
padding: 0.875rem 1rem;
text-align: center;
border-bottom: 1px solid var(--color-border);
}
.content-section {
padding: 1.5rem;
scroll-margin-top: 20px;
}
.intro-section {
scroll-margin-top: 20px;
}
.content-section h2 {
font-size: 1.4rem;
}
.cronologia {
padding-left: 1.25rem;
}
.cronologia li::before {
left: calc(-1.25rem - 7px);
}
.cronologia li.hito::before {
left: calc(-1.25rem - 10px);
}
.image-gallery {
grid-template-columns: 1fr;
}
.footer-nav ul {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.expand-btn {
font-size: 1rem;
padding: 1rem;
}
.expand-content.show {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.header {
padding: 1.5rem 1rem;
}
.header h1 {
font-size: 1.5rem;
}
.container {
padding: 0 0.75rem;
margin: 1rem auto;
}
.content-section {
padding: 1.25rem;
border-radius: 8px;
}
.intro-section {
padding: 1.25rem;
}
.expand-btn {
font-size: 0.95rem;
}
}
/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}