/* ========================================================================== IDENTIDAD VISUAL — inspirada en Cerezo Barredo Hoja de estilos maestra. Incluir en tras el reset/normalize. ========================================================================== */ :root { /* --- Paleta base --- */ --color-fondo: #F4ECD8; --color-fondo-superficie: #FBF4E4; --color-marca: #C1522B; --color-marca-hover: #A8451F; --color-secundario: #1B4B5C; --color-secundario-hover: #143A47; --color-acento: #E0932C; --color-acento-hover: #C87F1F; --color-exito: #5C7A3D; --color-exito-fondo: #E7EEDB; --color-error: #8C2F2A; --color-error-fondo: #FBE8E2; /* --- Texto --- */ --color-texto: #2B1D14; --color-texto-secundario: #6B4A34; --color-texto-sobre-marca: #FBEEDD; --color-texto-sobre-oscuro: #D9C9AE; /* --- Bordes --- */ --color-borde: #2B1D14; --grosor-borde: 2px; --radio-borde: 10px; --radio-borde-tarjeta: 12px; --radio-borde-pildora: 999px; /* --- Tipografía --- */ --fuente-base: "Georgia", "Iowan Old Style", serif; --fuente-titulos: "Georgia", "Iowan Old Style", serif; --fuente-botones: system-ui, -apple-system, sans-serif; /* Si quieres una fuente con más carácter, sustituye por una serif humanista importada (ej. "Fraunces", "Bitter") y actualiza aquí. */ /* --- Espaciado --- */ --espacio-xs: 6px; --espacio-sm: 12px; --espacio-md: 20px; --espacio-lg: 32px; --espacio-xl: 48px; } /* ========================================================================== Base ========================================================================== */ body { background-color: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-base); line-height: 1.6; margin: 0; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); color: var(--color-texto); font-weight: 600; line-height: 1.25; } p { color: var(--color-texto); } .texto-secundario, small, .meta { color: var(--color-texto-secundario); } a { color: var(--color-secundario); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } a:hover { color: var(--color-secundario-hover); } /* ========================================================================== Cabecera / navegación ========================================================================== */ .cabecera { background-color: var(--color-marca); border-bottom: var(--grosor-borde) solid var(--color-borde); padding: var(--espacio-sm) var(--espacio-md); display: flex; align-items: center; justify-content: space-between; } .cabecera .logotipo { color: var(--color-texto-sobre-marca); font-weight: 600; font-size: 1.1rem; } .cabecera nav a { color: var(--color-texto-sobre-marca); text-decoration: none; font-size: 0.95rem; } .cabecera nav a:hover, .cabecera nav a.activo { text-decoration: underline; text-decoration-color: var(--color-acento); text-decoration-thickness: 2px; } /* ========================================================================== Botones ========================================================================== */ .boton { display: inline-block; border-radius: var(--radio-borde); border: var(--grosor-borde) solid var(--color-borde); padding: 10px 20px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; } .boton-principal { background-color: var(--color-acento); color: var(--color-texto); } .boton-principal:hover { background-color: var(--color-acento-hover); } .boton-secundario { background-color: transparent; border-color: var(--color-secundario); color: var(--color-secundario); } .boton-secundario:hover { background-color: var(--color-secundario); color: var(--color-texto-sobre-marca); } .boton-terciario { background-color: var(--color-fondo); border-color: var(--color-error); color: var(--color-error); } /* ========================================================================== Tarjetas ========================================================================== */ .tarjeta { background-color: var(--color-fondo-superficie); border: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-borde-tarjeta); padding: var(--espacio-md); margin-bottom: var(--espacio-md); } .tarjeta .categoria { color: var(--color-exito); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .tarjeta h3 { margin: var(--espacio-xs) 0; font-size: 1.1rem; } .tarjeta-pueblo-foto { display: block; width: calc(100% + 2 * var(--espacio-md)); aspect-ratio: 4 / 3; object-fit: cover; margin-top: calc(-1 * var(--espacio-md)); margin-left: calc(-1 * var(--espacio-md)); margin-right: calc(-1 * var(--espacio-md)); margin-bottom: var(--espacio-sm); border-bottom: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-borde-tarjeta) var(--radio-borde-tarjeta) 0 0; } .tarjeta-pueblo { display: flex; flex-direction: column; } .tarjeta-pueblo-iconos { display: flex; justify-content: flex-end; gap: var(--espacio-xs); margin-top: auto; padding-top: var(--espacio-sm); } /* ========================================================================== Avisos / estados ========================================================================== */ .aviso { border-radius: var(--radio-borde); border: 1px solid; padding: var(--espacio-sm) var(--espacio-sm); font-size: 0.9rem; margin-bottom: var(--espacio-sm); } .aviso-exito { background-color: var(--color-exito-fondo); border-color: var(--color-exito); color: #39531F; } .aviso-error { background-color: var(--color-error-fondo); border-color: var(--color-error); color: #6B1F1B; } /* ========================================================================== Etiquetas / badges ========================================================================== */ .etiqueta { display: inline-block; border-radius: var(--radio-borde-pildora); padding: 4px 14px; font-size: 0.75rem; font-weight: 600; } .etiqueta-marca { background-color: var(--color-marca); color: var(--color-texto-sobre-marca); } .etiqueta-secundaria { background-color: var(--color-secundario); color: #E6F0F0; } .etiqueta-exito { background-color: var(--color-exito); color: #EAF3DE; } /* ========================================================================== Pie de página ========================================================================== */ .pie-pagina { background-color: var(--color-texto); color: var(--color-texto-sobre-oscuro); padding: var(--espacio-md); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; } .pie-pagina a { color: var(--color-acento); } /* ========================================================================== Citas destacadas (pull-quotes) ========================================================================== */ .cita { position: relative; border-left: 4px solid var(--color-marca); margin: var(--espacio-lg) 0; padding: var(--espacio-sm) var(--espacio-md) var(--espacio-sm) var(--espacio-xl); } .cita::before { content: "\201C"; position: absolute; left: var(--espacio-sm); top: -0.35rem; font-family: var(--fuente-titulos); font-size: 3rem; line-height: 1; color: var(--color-marca); opacity: 0.4; } .cita p { margin: 0; font-family: var(--fuente-titulos); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--color-secundario); } /* ========================================================================== Utilidades ========================================================================== */ .contenedor { max-width: 960px; margin: 0 auto; padding: 0 var(--espacio-md); } .borde-grueso { border: var(--grosor-borde) solid var(--color-borde); border-radius: var(--radio-borde); }