:root {
  --content-max: 1160px;
  --font-display: 'Bitter', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-body: 16px;
  --fs-small: 13px;
  --ink: #3A2418;
  --wine: #6B2737;
  --wine-dark: #4A1B26;
  --ochre: #C97C2C;
  --ochre-dark: #8F5518;
  --sage: #5F7052;
  --paper: #FBF3E3;
  --paper-warm: #F3E3C4;
  --muted: #6b5c4d;
  --muted-light: #9a8a76;
  --accent: #8B3A62;
  --accent-dark: #5C2340;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 22px;
  --space-lg: 40px;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.6;
  background-color: var(--paper);
  background-image: url(/Bedoya/Fondos/bntbk385.jpg);
}

.page-content { max-width: var(--content-max); margin: 0 auto; background-color: rgba(251,243,227,.9); }

a { color: var(--wine); }
a:hover, a:focus { color: var(--ochre-dark); }

h1, h2, h3 { font-family: 'Bevan', var(--font-display); font-weight: 400; }

/* --- Rincón memorial --- */
.memorial-bar {
  position: fixed; top:0; right:0; z-index:9999;
  background: var(--ink); border:0; border-radius:0 0 0 10px; box-shadow:0 1px 4px rgba(0,0,0,.3);
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; margin:0; cursor:pointer;
  font: inherit;
}
.memorial-bar .name { font-family: var(--font-display); font-style:italic; font-size:13px; color:rgba(255,255,255,.7); }
.memorial-bar .years { font-family: var(--font-body); font-size:11px; color:rgba(255,255,255,.45); }
.memorial-bar .short { display:none; font-family: var(--font-display); font-style:italic; font-size:12px; color:rgba(255,255,255,.7); }
@media (max-width: 480px) {
  .memorial-bar .name, .memorial-bar .years { display:none; }
  .memorial-bar .short { display:inline; }
}

/* --- Overlay / modal memorial --- */
#overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.96); z-index:10000;
  align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
#overlay-content {
  background:#221122; color:#B6DFF4; width:95%; max-width:650px; max-height:90vh;
  overflow-y:auto; border:1px solid #333; padding:25px; text-align:center;
  position:relative; box-shadow:0 10px 40px #000;
}
.memorial-header { margin-bottom:25px; }
.memorial-image-container {
  margin:0 auto 20px auto; width:150px; height:150px; border-radius:50%; overflow:hidden;
  border:3px solid #445555; box-shadow:0 5px 15px rgba(0,0,0,0.6);
}
.memorial-image-container img { width:100%; height:100%; object-fit:cover; }
.memorial-name {
  font-family: var(--font-display); font-size:30px; font-weight:600;
  letter-spacing:1px; margin-bottom:8px; color:#fff; text-transform:uppercase;
}
.subtitle { font-family: var(--font-body); font-size:16px; color:#CCCCCC; font-style:italic; margin:0 0 10px 0; }
.memorial-info { font-size:15px; color:#CCCCCC; margin:2px 0 5px 0; font-family: var(--font-body); letter-spacing:0.5px; }
.memorial-info--accent { color:#779988; }
.memorial-dep { font-size:18px; color:#fff; font-weight:bold; margin-top:10px; margin-bottom:15px; font-family: var(--font-display); }
.separator { border:0; height:1px; margin:25px 0; background-image:linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,0.2), rgba(0,0,0,0)); }
.intro-text {
  text-align:justify; font-size:15px; line-height:1.6; color:#ccc; max-width:90%;
  margin:0 auto; font-family: var(--font-body); padding:10px; border-radius:5px;
}
.letter-body {
  text-align:justify; font-style:italic; line-height:1.8; font-size:17px; color:#B6DFF4;
  font-family: var(--font-display); background:rgba(255,255,255,0.03); padding:20px;
  border:1px solid #CCE9D2; border-radius:4px; box-shadow:inset 0 0 20px rgba(0,0,0,0.05);
  margin-top:20px;
}
.letter-body p { margin-bottom:15px; }
.signature { text-align:right; font-weight:bold; color:#fff; margin-top:25px; font-style:normal; }
.overlay-actions { margin-top:25px; }
.overlay-hint { margin-top:10px; font-size:11px; color:#445555; cursor:pointer; }

.btn-close {
  background:transparent; color:#fff; border:1px solid #886666;
  padding:10px 25px; cursor:pointer; text-transform:uppercase;
  letter-spacing:2px; font-size:12px; margin-top:20px;
  transition:all 0.3s;
}
.btn-close:hover { background:#fff; color:#000; }

/* --- Cabecera: la webcam ES la cabecera --- */
.hero {
  position:relative; max-width:var(--content-max); margin:0 auto; overflow:hidden;
  box-shadow:0 10px 30px rgba(58,36,24,.22);
}
.hero img {
  display:block; width:100%; aspect-ratio:2184/974; min-height:160px;
  object-fit:cover; object-position:left center; cursor:pointer;
  filter: brightness(105%) contrast(95%) saturate(115%);
}
/* En pantalla completa: mostrar el fotograma entero (contain), no recortarlo (cover) */
.hero:fullscreen, .hero:-webkit-full-screen {
  max-width:none; width:100vw; height:100vh; margin:0; box-shadow:none;
  display:flex; align-items:center; justify-content:center; background:#000;
}
.hero:fullscreen img, .hero:-webkit-full-screen img {
  width:100%; height:100%; max-height:none; min-height:0; object-fit:contain;
}
.hero-live {
  position:absolute; top:var(--space-md); right:var(--space-md); pointer-events:none;
  display:flex; align-items:center; gap:6px;
  background:rgba(20,10,6,.55); color:#fff; padding:5px 12px; border-radius:999px;
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
}
.live-dot { width:7px; height:7px; border-radius:50%; background:#ff6b5b; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.hero:fullscreen .hero-live, .hero:-webkit-full-screen .hero-live { display:none; }

.hero-content {
  position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  padding: var(--space-lg) calc(var(--space-md) * 3) calc(var(--space-md) * 2);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-md); flex-wrap:wrap;
}
.hero-title {
  color:#fff; font-family:'Bevan', var(--font-display); font-weight:400;
  font-size:clamp(35.72px, 6.11vw, 63.92px); line-height:1.05; margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.hero-title span { display:block; }

.hero-fullscreen-btn, .hero-exit-btn {
  pointer-events:auto; display:flex; align-items:center; gap:6px; cursor:pointer;
  background:rgba(20,10,6,.55); color:#fff; border:1px solid rgba(255,255,255,.3);
  padding:7px 14px; border-radius:999px; font-size:13px; font-family:var(--font-body);
}
.hero-fullscreen-btn:hover, .hero-exit-btn:hover { background:rgba(20,10,6,.8); }
.hero-fullscreen-btn svg, .hero-exit-btn svg { width:14px; height:14px; }

.hero-exit-btn {
  display:none; position:absolute; top:var(--space-md); right:var(--space-md); z-index:2;
}
.hero:fullscreen .hero-exit-btn, .hero:-webkit-full-screen .hero-exit-btn { display:flex; }
.hero:fullscreen .hero-fullscreen-btn, .hero:-webkit-full-screen .hero-fullscreen-btn { display:none; }

.hero-caption-row {
  max-width:var(--content-max); margin:10px auto 0; padding:0 calc(var(--space-md) * 2);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); flex-wrap:wrap;
}
.hero-caption { font-style:italic; font-size:14px; color:var(--muted); margin:0; }

.buscador {
  flex:0 0 240px; max-width:100%; display:flex; align-items:stretch;
  background:#fff; border:1px solid #ddd; border-radius:3px; overflow:hidden;
  box-shadow:0 2px 8px rgba(58,36,24,.08);
  transition:box-shadow .2s, border-color .2s;
}
.buscador:focus-within { border-color:var(--accent); box-shadow:0 2px 10px rgba(139,58,98,.25); }
.buscador input {
  flex-grow:1; min-width:60px; font:inherit; font-size:14px;
  border:0; background:transparent; padding:9px 16px; outline:none;
}
.buscador button {
  display:flex; align-items:center; justify-content:center;
  width:38px; flex:0 0 38px; border:0; cursor:pointer;
  color:#fff; background:var(--accent); transition:background .2s;
}
.buscador button:hover { background:var(--accent-dark); }
.buscador svg { width:16px; height:16px; }

@media (max-width:700px) {
  .hero-caption-row { justify-content:center; text-align:center; }
}

/* --- Divisor decorativo (puntada) --- */
.section-divider {
  height:6px; margin: var(--space-lg) auto; max-width:var(--content-max);
  background-image: radial-gradient(circle, var(--ochre) 1.6px, transparent 1.8px);
  background-size: 14px 6px; background-position:center; opacity:.55;
}

/* --- Masthead: intro + nav agrupada + búsqueda, en una sola franja --- */
.masthead {
  max-width:var(--content-max); margin:var(--space-md) auto 0; padding:var(--space-md) calc(var(--space-md) * 2);
  display:grid; grid-template-columns:3fr 1px 2fr; gap:var(--space-lg);
  align-items:start;
  border-top:3px solid var(--wine); border-bottom:3px solid var(--wine);
}
.masthead-intro .lead {
  font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.55; color:var(--ink); margin:0;
}
.masthead-intro .lead-sub {
  font-family:var(--font-display); font-size:16px; line-height:1.6; color:var(--ink); margin-top:10px;
}
.intro-attribution {
  display:block; font-family:var(--font-display); font-style:italic; font-size:16px;
  color:var(--wine); margin-top:14px; text-align:left;
  background:none; border:0; padding:0; cursor:pointer;
}
.intro-attribution:hover { color:var(--wine-dark); text-decoration:underline; }

.intro-quote {
  margin:0; padding:0 0 0 var(--space-md); border-left:3px solid var(--wine);
}
.intro-quote p {
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:19px; line-height:1.5; color:var(--ink); margin:0;
}
.intro-toggle {
  display:inline; margin-left:6px; background:none; border:0; padding:0;
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--wine);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.intro-toggle:hover { color:var(--wine-dark); }
.intro-full { margin:0; }
.intro-full .intro-toggle { display:inline-block; margin-top:10px; margin-left:0; }

/* La quote corta solo tiene sentido cuando la intro y el nav no caben en dos columnas
   (por debajo de esto, .masthead ya pasa a una sola columna); a partir de aquí, mostrar
   siempre el texto completo. */
@media (min-width: 901px) {
  .intro-quote { display:none; }
  .intro-full { display:block; }
  .intro-quote .intro-toggle, .intro-full .intro-toggle { display:none; }
}

.masthead-divider { background:rgba(58,36,24,.18); align-self:stretch; }

.masthead-nav {
  display:grid; grid-template-columns:repeat(3, minmax(100px, 1fr)); gap:var(--space-sm) var(--space-md);
}
.nav-col-stack { display:flex; flex-direction:column; gap:var(--space-md); }
.nav-group h2 {
  font-size:11.28px; color:var(--wine); margin:0 0 6px; text-transform:uppercase;
  letter-spacing:.08em; font-weight:400;
}
.nav-group ul { list-style:none; margin:0; padding:0 0 0 var(--space-sm); }
.nav-group li { margin-bottom:2px; }
.nav-group a {
  display:inline-block; font-size:15px; text-decoration:none;
  padding:4px 8px; margin:0 -8px; border-radius:5px;
  transition:background-color .15s, color .15s;
}
.nav-group a:hover, .nav-group a:focus {
  background:rgba(107,39,55,.12); color:var(--wine-dark);
  text-decoration:underline; text-decoration-thickness:2px;
}

/* --- Secciones generales --- */
.section { max-width:var(--content-max); margin:0 auto; padding:0 calc(var(--space-md) * 2); }
.section--after-masthead { margin-top:var(--space-lg); }
.section h2 { font-size:26.32px; color:var(--wine); margin:0 0 var(--space-md); }

/* --- Novedades: feed de tarjetas, estilo "álbum de fotos" --- */
.novedades-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-md); }
.post-card { background:#fff; border-radius:3px; box-shadow:0 10px 22px rgba(58,36,24,.16), 0 2px 6px rgba(58,36,24,.1); padding:var(--space-sm); }
.post-card:nth-child(4n+1) { transform:rotate(-1deg); }
.post-card:nth-child(4n+2) { transform:rotate(.8deg); }
.post-card:nth-child(4n+3) { transform:rotate(-.6deg); }
.post-card:nth-child(4n) { transform:rotate(.9deg); }
.post-card .tag {
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--wine); margin-bottom:4px;
}
.post-card h3 { font-size:15.04px; margin:0 0 4px; line-height:1.3; }
.post-card a { text-decoration:none; color:inherit; }
.post-card a:hover h3 { color:var(--wine); }

.novedades-ver-todas { margin:var(--space-md) 0 0; text-align:right; font-size:14px; }
.novedades-ver-todas a { font-weight:600; text-decoration:none; }
.novedades-ver-todas a:hover { text-decoration:underline; }

.novedades-more { margin-top:var(--space-lg); border-top:1px solid rgba(58,36,24,.15); padding-top:var(--space-sm); }
.novedades-more h3 { font-size:13.16px; color:var(--ink); text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px; }
.novedades-more ul { list-style:none; margin:0; padding:0; columns:3; column-gap:var(--space-lg); }
.novedades-more li { font-size:15px; margin-bottom:8px; break-inside:avoid; }

/* --- Emprendimientos del valle (antes "Negocios locales") --- */
.negocios-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--space-sm); }
.negocio-card { background:#fff; border-radius:3px; box-shadow:0 10px 22px rgba(58,36,24,.16), 0 2px 6px rgba(58,36,24,.1); padding:10px; }
.negocio-card:nth-child(5n+1) { transform:rotate(-1deg); }
.negocio-card:nth-child(5n+2) { transform:rotate(.8deg); }
.negocio-card:nth-child(5n+3) { transform:rotate(-.6deg); }
.negocio-card:nth-child(5n+4) { transform:rotate(.5deg); }
.negocio-card:nth-child(5n) { transform:rotate(-.4deg); }
.negocio-card .tag {
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ochre-dark); margin-bottom:3px;
}
.negocio-card h3 {
  font-size:13.63px; color:var(--ochre-dark); margin:0 0 3px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.negocio-card p {
  font-size:12px; margin:0; color:var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.negocio-card > a { text-decoration:none; color:inherit; display:block; }
.negocio-card > a:hover h3 { color:var(--wine); }

/* --- Marco "foto de álbum" compartido por novedades y negocios --- */
.post-card .photo, .negocio-card .photo { margin-bottom:10px; }
.post-card .photo img, .negocio-card .photo img { display:block; width:100%; object-fit:cover; border:1px solid rgba(0,0,0,.15); }
.post-card .photo img { aspect-ratio:4/3; }
.negocio-card .photo img { aspect-ratio:1; }

/* --- Archivo y curiosidades: tira compacta --- */
.curiosidades-strip { display:flex; gap:var(--space-sm); overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; }
.curio-item { flex:0 0 110px; text-align:center; }
.curio-item img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; filter:saturate(.8); opacity:.9; }
.curio-item a { font-size:11.5px; text-decoration:none; display:block; margin-top:4px; color:var(--muted); }
.curio-item a:hover { color:var(--wine); }

/* --- Buzón de mensajes: integrado en el papel, sin tarjeta flotante --- */
.buzon-content { max-width:640px; }
.buzon-intro {
  margin:0 0 8px; font-family:var(--font-display); font-weight:500;
  font-size:17px; line-height:1.55; color:var(--ink);
}
.buzon-nota { margin:0 0 var(--space-lg); font-size:14px; font-style:italic; color:var(--muted); }
.buzon-form { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-md); }
.campo { margin-bottom:var(--space-md); display:flex; flex-direction:column; gap:4px; }
.campo--mensaje, .buzon-submit-row { grid-column:1 / -1; }
.campo label {
  font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--wine);
  text-transform:uppercase; letter-spacing:.06em;
}
.campo label span { font-family:var(--font-body); font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted-light); }
.campo input[type="text"], .campo input[type="email"], .campo textarea {
  font:inherit; font-size:14px; padding:9px 16px; border:1px solid #ddd; border-radius:3px;
  background:#fff; color:var(--ink); outline:none;
  box-shadow:0 2px 8px rgba(58,36,24,.08);
  transition:box-shadow .2s, border-color .2s;
}
.campo textarea { padding:10px 16px; line-height:1.5; resize:vertical; min-height:130px; }
.campo input[type="text"]:focus, .campo input[type="email"]:focus, .campo textarea:focus {
  border-color:var(--accent); box-shadow:0 2px 10px rgba(139,58,98,.25);
}
.campo-oculto { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.buzon-submit {
  display:inline-flex; align-items:center; gap:8px; margin-top:2px;
  background:var(--accent); color:#fff; border:0;
  padding:10px 26px; border-radius:3px; font-family:var(--font-body);
  font-size:14px; font-weight:600;
  cursor:pointer; transition:background .2s;
}
.buzon-submit:hover { background:var(--accent-dark); }
@media (max-width: 560px) {
  .buzon-form { grid-template-columns:1fr; }
}

/* --- Pie --- */
.site-footer {
  max-width:var(--content-max); margin:var(--space-lg) auto 0;
  text-align:center; border-top:1px solid rgba(58,36,24,.2);
  padding:var(--space-md) calc(var(--space-md) * 2); color:var(--muted-light);
}
.site-footer p { margin:3px 0; font-size:12px; }

/* --- Responsive --- */
@media (max-width: 900px) {
  .novedades-grid { grid-template-columns:repeat(2, 1fr); }
  .masthead { grid-template-columns:1fr; }
  .masthead-divider { display:none; }
}
@media (max-width: 560px) {
  .novedades-grid { grid-template-columns:1fr; }
  .negocios-grid { grid-template-columns:repeat(2, 1fr); }
  .novedades-more ul { columns:1; }
  .masthead-nav { grid-template-columns:repeat(2, 1fr); }
  .nav-col-stack { display:contents; }
}
/* Por debajo de content-max, el hero toca los bordes de la página y choca con el
   rincón "In Memoriam" (fixed, arriba-derecha) — bajar el aviso "en directo". */
@media (max-width: 1160px) {
  .hero-live { top:40px; }
}
/* Por debajo de content-max ya no queda margen lateral para ver el fondo del valle;
   mostrarlo de borde a borde detrás de estas secciones (de raya a raya), polaroids
   y títulos incluidos. El fondo del body queda tapado del todo por el panel crema,
   así que se quita para no duplicar la capa. */
@media (max-width: 1160px) {
  body { background-image: none; }
  .section--after-masthead, .section--negocios {
    background-image: url(/Bedoya/Fondos/bntbk385.jpg);
  }
  .novedades-grid, .negocios-grid { padding-bottom: var(--space-lg); }
  .novedades-more {
    background-color: var(--paper);
    margin-left: calc(var(--space-md) * -2);
    margin-right: calc(var(--space-md) * -2);
    padding-left: calc(var(--space-md) * 2);
    padding-right: calc(var(--space-md) * 2);
  }
}
/* Hero: al hacerse más bajo (ancho estrecho), el texto superpuesto necesita menos espacio */
@media (max-width: 600px) {
  .hero-content { padding:var(--space-sm) var(--space-sm) var(--space-xs); }
  .hero-title { font-size:clamp(16.92px, 6.58vw, 26.32px); }
  .hero-live { right:var(--space-xs); padding:4px 10px; font-size:11px; }
  .hero-fullscreen-btn, .hero-exit-btn { padding:8px; }
  .hero-fullscreen-btn .btn-label, .hero-exit-btn .btn-label { display:none; }
  .hero-exit-btn { top:var(--space-xs); right:var(--space-xs); }
}