/* Curacavíve — estilos compartidos por todo el sitio público.
   Un solo archivo para header, footer, botones, buscador y menú móvil,
   para que cambiar algo acá se refleje en todas las páginas a la vez. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* --paper = el "papel" de fondo de la página; --card = superficies que
     flotan encima (tarjetas, header, modales) — antes eran el mismo blanco,
     ahora --paper es un blanco cálido casi imperceptible para que --card
     se distinga sin depender solo del borde. Modernización visual sutil,
     2026-09-09 — ver CEREBRO/04_BITACORA.md. */
  --paper:#FBFAF7; --paper-2:#F4F2EA; --card:#FFFFFF;
  --ink:#171A2B; --ink-soft:#4B5164; --ink-faint:#84869A;
  --cobalt:#1E4F63; --cobalt-ink:#0F323F; --coral:#C4472E; --magenta:#B23A72; --moss:#3F7A4E; --gold:#B9821F;
  --accent-warm:#CC9B83; /* borde de hover de tarjetas — tono cálido a juego con el logo, en vez del azul de marca */
  --line:rgba(23,26,43,0.13); --line-soft:rgba(23,26,43,0.07);
  --font-display:"Plus Jakarta Sans",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --font-body:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Plus Jakarta Sans",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* sombras: opacidad baja, difusión grande, sin bordes duros */
  --shadow-xs: 0 1px 3px rgba(23,26,43,.06);
  --shadow-sm: 0 3px 12px rgba(23,26,43,.09);
  --shadow-md: 0 14px 32px rgba(23,26,43,.16);
  --shadow-lg: 0 24px 56px rgba(23,26,43,.20);

  /* radios consolidados — antes convivían 7/8/9/10/12/14/20px sueltos */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --ease: 150ms ease;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;}

/* ---- header ---- */
.site-header{display:flex;align-items:center;gap:18px;padding:16px 28px;background:transparent;}
.brandmark{display:flex;align-items:center;gap:10px;}
.brandmark img{height:48px;width:48px;object-fit:contain;flex:none;}
.brandmark .brand-lockup{height:68px;width:auto;object-fit:contain;}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--cobalt-ink);letter-spacing:-.01em;}
.wordmark small{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-top:2px;}
.site-nav{display:flex;gap:22px;justify-content:center;font-size:14.5px;color:var(--ink-soft);flex:1;}
.site-nav a{padding:4px 0;border-bottom:2px solid transparent;}
.site-nav a.active{color:var(--ink);border-color:var(--coral);}

/* ---- buscador (caja compacta del header y su versión en el menú móvil) ---- */
.searchbox{position:relative;display:flex;align-items:center;}
.searchbox svg{position:absolute;left:12px;width:14px;height:14px;color:var(--ink-faint);pointer-events:none;}
.searchbox input{font-family:var(--font-body);font-size:12.5px;padding:7px 14px 7px 34px;border-radius:20px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);width:150px;outline:none;transition:width .2s,box-shadow .2s;}
.searchbox input:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(30,79,99,.14);background:var(--paper);width:190px;}

/* ---- botones ---- */
.btn{font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:20px;border:1px solid var(--cobalt);background:var(--cobalt);color:var(--paper);white-space:nowrap;cursor:pointer;}
.btn.ghost{background:transparent;color:var(--cobalt);border-color:var(--cobalt);}

/* Acceso a "mi cuenta" — sirve tanto para lectores suscritos como para el
   equipo editorial, por eso es un ícono genérico de persona, no un botón
   que diga "Panel de redacción". */
.account-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--cobalt);color:var(--cobalt);flex:none;}
.account-btn svg{width:18px;height:18px;}
.account-btn:hover{background:var(--cobalt);color:#fff;}

/* ---- menú móvil (hamburguesa + panel desplegable) ---- */
.hamburger{display:none;width:38px;height:38px;border-radius:10px;border:none;background:var(--coral);align-items:center;justify-content:center;cursor:pointer;flex:none;color:#fff;margin-left:auto;}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:16px 24px 22px;border-bottom:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);}
.mobile-menu.open{display:flex;}
.mobile-menu .searchbox{margin-bottom:12px;}
.mobile-menu .searchbox input{width:100%;padding-top:10px;padding-bottom:10px;}
.mobile-menu a{padding:12px 2px;border-bottom:1px solid var(--line-soft);font-size:15px;color:var(--ink-soft);}
.mobile-menu a.active{color:var(--coral);font-weight:600;}
.mobile-menu .btn{text-align:center;margin-top:10px;}
@media (max-width:760px){
  .site-header .site-nav{display:none;}
  .site-header > .searchbox{display:none;}
  .site-header > .btn{display:none;}
  .site-header > .account-btn{display:none;} /* ya está "Mi cuenta" adentro del menú hamburguesa */
  .hamburger{display:flex;}
  .brandmark .brand-lockup{height:38px;}
}

/* ---- pills de sección y etiqueta de acceso ---- */
.pill{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:20px;color:#fff;display:inline-block;}
.pill.comunidad{background:var(--cobalt);} .pill.cultura{background:var(--magenta);}
.pill.entrevista{background:var(--moss);} .pill.patrimonio{background:var(--gold);color:#241a03;}
.pill.aviso{background:var(--ink-faint);}
.access{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);border:1px solid var(--line);padding:2px 8px;border-radius:20px;}
.access.premium{color:var(--coral);border-color:var(--coral);}

/* ---- camino de miga ---- */
.breadcrumb{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin:0 0 28px;}
.breadcrumb .current{color:var(--coral);font-weight:600;display:inline-block;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;}

/* ---- layout de 4 columnas: contenido + columna de anunciantes ---- */
.mainlayout{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr 260px;gap:0;}
.maincol{min-width:0;}
.adrail{padding:26px 20px;position:sticky;top:0;border-left:1px solid var(--line);}
.adrail .lbl{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.adrail .ad-slots{display:flex;flex-direction:column;gap:16px;}
.adrail .ad{display:block;width:100%;aspect-ratio:3/4;border-radius:10px;border:1px solid var(--line);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--card);transition:opacity .25s ease,box-shadow var(--ease);padding:0;cursor:pointer;font:inherit;box-shadow:var(--shadow-xs);}
@media (max-width:900px){ .mainlayout{grid-template-columns:1fr;} .adrail{border-left:none;border-top:1px solid var(--line);position:static;} .adrail .ad{aspect-ratio:16/9;} }

/* ---- lightbox de avisos: clic en un aviso lo muestra grande, con link al
   sitio del cliente si tiene uno cargado ---- */
.ad-lightbox{position:fixed;inset:0;background:rgba(15,17,26,.86);display:none;align-items:center;justify-content:center;z-index:200;padding:28px;}
.ad-lightbox.open{display:flex;}
.ad-lightbox .box{background:var(--card);border-radius:var(--radius-lg);max-width:480px;width:100%;max-height:88vh;overflow:auto;position:relative;box-shadow:var(--shadow-lg);}
.ad-lightbox img{width:100%;display:block;border-radius:14px 14px 0 0;}
.ad-lightbox .info{padding:16px 20px;display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;}
.ad-lightbox .info b{font-family:var(--font-display);font-size:1.02rem;line-height:1.25;}
.ad-lightbox .close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(23,26,43,.6);color:#fff;border:none;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ---- footer ---- */
.sitefooter{padding:30px 28px;text-align:center;border-top:1px solid var(--line);}
.sitefooter .brandmark{justify-content:center;}
.sitefooter .wordmark{font-size:1.2rem;}
.sitefooter small{color:var(--ink-faint);display:block;margin-bottom:16px;}
.sitefooter .devby{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12.5px;color:var(--ink-faint);}
.sitefooter .devby img{height:26px;width:26px;border-radius:7px;object-fit:cover;}
.sitefooter .devby:hover{color:var(--ink);}

/* ---- estado vacío genérico ---- */
.empty{max-width:600px;margin:60px auto;text-align:center;color:var(--ink-faint);padding:0 24px;}

/* ---- respeta "reducir movimiento" del sistema — a partir de acá se
   pueden usar transiciones con transform (hover de tarjetas, etc.) sin
   preocuparse caso por caso: esta regla las neutraliza globalmente. ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}