/* ============================================================
RESTAURANTES.CSS — cucutanuestra.com
Paleta gastronómica "Calidez Casera" v2.1
Rojo · Terracota · Crema · Marrón · Dorado
------------------------------------------------------------
Uso: cargar SOLO en páginas gastronómicas (restaurantes.htm,
pizzerias.htm, cafeterias.htm, panaderias.htm, etc.)
con:
colocado DESPUÉS de style.css para sobrescribir.
------------------------------------------------------------
Tipografía: Playfair Display (Google Fonts) para titulares.
Cargar en HTML, en el , antes de este CSS:
============================================================ */
/* === Tipografía base más cómoda y cálida === */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #3e2418;
background-color: #fdfbf7;
line-height: 1.55;
}
/* === Imagen de cabecera con sombra cálida === */
.margenheader img {
display: block;
box-shadow: 0 4px 18px rgba(124,45,18,0.12);
border-radius: 0 0 6px 6px;
}
/* ============================================================
SUBTÍTULO "GUÍA DE RESTAURANTES DE CÚCUTA"
Antetítulo elegante centrado encima del H1
============================================================ */
.azul {
background: transparent !important;
box-shadow: none !important;
padding: 18px 18px 0 18px !important;
border-radius: 0 !important;
text-align: center !important;
}
.azul h3 {
margin: 0 !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic;
font-weight: 500;
font-size: 0.95rem !important;
letter-spacing: 4px;
text-transform: uppercase;
color: #c2410c !important;
text-align: center;
position: relative;
display: inline-block;
padding: 0 35px;
}
.azul h3::before,
.azul h3::after {
content: '';
position: absolute;
top: 50%;
width: 25px;
height: 1px;
background: #d4a574;
}
.azul h3::before { left: 0; }
.azul h3::after { right: 0; }
/* ============================================================
H1 PRINCIPAL — tipografía editorial elegante
============================================================ */
.rojo {
background: transparent !important;
box-shadow: none !important;
padding: 8px 20px 25px 20px !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
position: relative;
}
.rojo h1 {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 2.1rem !important;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.15;
margin: 0 !important;
text-align: center;
color: #7c2d12 !important;
padding: 0 20px;
}
/* Separador ornamental debajo del H1 */
.rojo::after {
content: '\2756'; /* ❖ */
display: block;
text-align: center;
margin-top: 18px;
color: #d4a574;
font-size: 1.1rem;
letter-spacing: 12px;
padding-left: 12px;
}
/* ============================================================
CAJAS DE CADA RESTAURANTE — crema con borde dorado
============================================================ */
.grisoscuro {
background: #fdf6ec !important;
border-left: 4px solid #d4a574;
box-shadow: 0 2px 8px rgba(124,45,18,0.07) !important;
padding: 12px 20px !important;
border-radius: 0 4px 4px 0 !important;
color: #7c2d12 !important;
margin-top: 20px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.grisoscuro:hover {
box-shadow: 0 4px 14px rgba(124,45,18,0.12) !important;
transform: translateX(2px);
}
.grisoscuro h3,
.grisoscuro h6 {
margin: 0;
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 600;
font-size: 1.15rem !important;
color: #7c2d12 !important;
letter-spacing: 0.2px;
}
/* Separación entre fichas (cada ) */
article {
padding: 14px 0 22px 0;
border-bottom: 1px solid #f0e6d6;
}
article:last-of-type {
border-bottom: none;
}
/* === Datos de contacto en columna derecha === */
article .col-md-5 {
padding-top: 6px;
padding-bottom: 6px;
font-size: 0.98rem;
line-height: 1.7;
color: #3e2418;
}
/* ============================================================
ICONOS GLYPHICON — forzar color terracota cálido
Sobrescribe la regla externa .azul22 (que los pintaba azul)
============================================================ */
span.azul22,
.azul22,
span.glyphicon.azul22,
.glyphicon-home,
.glyphicon-phone,
.glyphicon-phone-alt,
.glyphicon-envelope,
.glyphicon-globe,
article .glyphicon,
article .azul22 {
color: #c2410c !important;
margin-right: 3px;
}
/* === Enlaces de teléfono (tel:) === */
a[href^="tel:"] {
color: #9a6d3a;
text-decoration: none;
font-weight: 600;
border-bottom: 1px dotted #9a6d3a;
transition: color 0.2s ease;
}
a[href^="tel:"]:hover {
color: #c41e3a;
border-bottom-color: #c41e3a;
}
/* === Enlaces externos (web de los restaurantes) === */
article a[target="new"] {
color: #c2410c;
text-decoration: none;
font-weight: 500;
}
article a[target="new"]:hover {
text-decoration: underline;
color: #9a3308;
}
/* === Párrafos dentro de cada ficha === */
article p {
margin-bottom: 8px;
}
article p strong {
color: #c2410c;
}
/* === "Especialidad / Especialidades" en columna derecha === */
article .col-md-5 strong {
color: #7c2d12;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 1.05rem;
display: inline-block;
margin-bottom: 4px;
padding-bottom: 2px;
border-bottom: 1px solid #d4a574;
}
/* ============================================================
FOOTER cálido y elegante
============================================================ */
.cajafinal {
background: linear-gradient(135deg, #7c2d12 0%, #5a1f0a 100%) !important;
padding: 26px 20px !important;
border-radius: 6px !important;
box-shadow: 0 -2px 10px rgba(124,45,18,0.15) !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.85 !important;
letter-spacing: 0.3px;
margin-top: 35px;
color: #fdf6ec !important;
text-align: center;
}
.cajafinal a {
color: #d4a574 !important;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.cajafinal a:hover {
color: #fff !important;
text-decoration: underline;
}
/* ============================================================
AJUSTES RESPONSIVOS PARA MÓVIL
============================================================ */
@media (max-width: 768px) {
.rojo h1 {
font-size: 1.4rem !important;
line-height: 1.25;
}
.azul h3 {
font-size: 0.78rem !important;
letter-spacing: 2.5px;
padding: 0 25px;
}
.azul h3::before,
.azul h3::after {
width: 18px;
}
.grisoscuro {
padding: 10px 14px !important;
}
.grisoscuro h3,
.grisoscuro h6 {
font-size: 1.02rem !important;
}
article {
padding: 12px 0 18px 0;
}
article .col-md-5 {
font-size: 0.95rem;
}
.rojo::after {
font-size: 0.95rem;
letter-spacing: 8px;
}
}