/*
Theme Name: Kadence Child Reelato
Template: kadence
Version: 1.2
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap');

:root {
  --ink: #101007;
  --paper: #f0eee8;
  --paper-soft: #e4e1d9;
  --white: #fff;
  --accent: #d8ff3e;
  --line-dark: rgba(16,16,7,0.14);
  --container: 1100px;
}

/* Ocultar header y footer de Kadence en páginas del blog */
body.blog .site-header,
body.single-post .site-header,
body.blog .site-footer,
body.single-post .site-footer,
body.blog #colophon,
body.single-post #colophon,
body.blog .site-top-header-wrap,
body.single-post .site-top-header-wrap,
body.blog #masthead,
body.single-post #masthead {
  display: none !important;
}

body.blog,
body.single-post {
  font-family: "Montserrat", Arial, sans-serif !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

*, *::before, *::after { box-sizing: border-box; }

/* Solo en contexto blog para no afectar a las páginas con snippets propios */
body.blog h1, body.blog h2, body.blog h3,
body.blog h4, body.blog h5, body.blog h6,
body.single-post h1, body.single-post h2, body.single-post h3,
body.single-post h4, body.single-post h5, body.single-post h6 {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: none !important;
}
/* Los colores de heading dentro del contenido del artículo sí van en negro */
body.single-post .entry-wrap h1,
body.single-post .entry-wrap h2,
body.single-post .entry-wrap h3 {
  color: var(--ink) !important;
}
/* El hero del single va en blanco */
body.single-post .single-hero h1 {
  color: #fff !important;
}

/* ===== HEADER PROPIO ===== */
.blog-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 4vw;
  background: var(--ink);
}

.blog-brand img {
  width: clamp(110px, 10vw, 155px);
}

.blog-main-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 42px);
}

.blog-main-nav a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.blog-main-nav a:hover { color: var(--accent) !important; }

.blog-main-nav .nav-cta {
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 100px;
  transition: background 200ms ease, color 200ms ease;
}

.blog-main-nav .nav-cta:hover {
  background: var(--white);
  color: var(--ink) !important;
}

/* ===== CONTENEDOR ===== */
.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

/* ===== WRAP CON PADDING PARA EL HEADER FIJO ===== */
.blog-archive-wrap,
.single-post-wrap {
  padding-top: 80px;
  background: var(--paper);
}

/* ===== ENTRADA DESTACADA ===== */
.post-featured {
  position: relative;
  display: grid;
  min-height: 48svh;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.post-featured .featured-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7); opacity: 0.5;
}

.post-featured .featured-content {
  position: relative; z-index: 1;
  padding: clamp(28px,4.5vw,60px) clamp(24px,6vw,90px);
  max-width: 860px;
}

.featured-kicker {
  display: inline-block; margin-bottom: 12px;
  color: var(--accent); font-size: 0.67rem;
  font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}

.post-featured h2 {
  margin: 0 0 16px; color: #fff !important;
  font-size: clamp(1.7rem, 3.8vw, 3.6rem);
  font-weight: 300; letter-spacing: -0.05em; line-height: 1.02;
}

.featured-excerpt {
  max-width: 580px; margin: 0 0 22px;
  color: rgba(255,255,255,0.8); font-size: clamp(0.88rem,1.1vw,0.98rem);
}

.read-more-btn {
  display: inline-block; padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 100px;
  color: #fff; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}
.read-more-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ===== REJILLA ===== */
.posts-grid-section { padding: clamp(50px,6.5vw,90px) 0; background: var(--paper); }
.grid-label { margin: 0 0 clamp(26px,3.2vw,44px); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #888; }
.posts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.6vw,36px); }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.post-card-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-soft); margin-bottom: 16px; min-height: 0; }
.post-card-thumb div { width: 100%; height: 100%; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); transition: filter 350ms ease, transform 350ms ease; }
.post-card:hover .post-card-thumb img { filter: saturate(1); transform: scale(1.03); }
.post-card-meta { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.post-card h3 { margin: 0 0 9px; color: var(--ink) !important; font-size: clamp(0.98rem,1.5vw,1.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-decoration: none !important; }
.post-card h3 a { color: var(--ink) !important; }
.post-card p { margin: 0; font-size: 0.88rem; color: #555; line-height: 1.6; }

/* ===== SINGLE HERO ===== */
.single-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: 44svh; overflow: hidden; background: var(--ink);
  padding: 0 0 clamp(38px,5.5vw,70px);
}
.single-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65); opacity: 0.44; }
.single-hero .hero-content { position: relative; z-index: 1; width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.post-kicker { display: inline-block; margin-bottom: 13px; color: var(--accent); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.single-hero h1 { max-width: 840px; margin: 0 0 14px; color: #fff !important; font-size: clamp(1.9rem,5vw,4.8rem); font-weight: 300; letter-spacing: -0.06em; line-height: 0.97; }
.post-meta-single { color: rgba(255,255,255,0.58); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ===== SINGLE BODY ===== */
.single-body { padding: clamp(52px,6.5vw,95px) 0 clamp(65px,8.5vw,125px); background: var(--paper); }
.entry-wrap { max-width: 720px; margin: 0 auto; }
.entry-wrap p { font-size: clamp(0.98rem,1.2vw,1.1rem); line-height: 1.8; color: #333; margin: 0 0 1.5em; }
.entry-wrap h2 { font-size: clamp(1.45rem,2.2vw,1.95rem); font-weight: 700; margin: 2em 0 0.6em; color: var(--ink) !important; }
.entry-wrap h3 { font-size: clamp(1.1rem,1.6vw,1.45rem); font-weight: 600; margin: 1.7em 0 0.5em; color: var(--ink) !important; }
.entry-wrap blockquote { margin: 2em 0; padding: 0 0 0 24px; border-left: 3px solid var(--accent) !important; border-right: none !important; border-top: none !important; border-bottom: none !important; font-size: 1.12rem; font-weight: 300; font-style: italic; color: #444; }
.entry-wrap img { width: 100%; height: auto; margin: 2em 0; }
.entry-wrap ul, .entry-wrap ol { padding-left: 1.4em; color: #333; }
.entry-wrap li { margin-bottom: 0.5em; line-height: 1.7; }

/* ===== POST NAV ===== */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-dark); margin-top: clamp(42px,5.5vw,75px); }
.post-nav a { display: block; padding: 22px 0; color: var(--ink) !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; transition: color 180ms ease; }
.post-nav a:hover { color: #789500 !important; }
.post-nav .next-post { text-align: right; }

/* ===== PREFOOTER KIT DIGITAL ===== */
.blog-prefooter { padding: 44px 0; background: #000 !important; text-align: center; }
.blog-prefooter p { margin: 0 0 18px; color: rgba(255,255,255,0.7); font-size: 0.78rem; letter-spacing: 0.04em; }
.blog-prefooter img { display: block; margin-left: auto; margin-right: auto; max-width: min(76%, 540px); height: auto; opacity: 0.9; }

/* ===== FOOTER LEGAL ===== */
.blog-legal-footer { padding: 36px 0; background: var(--ink); border-top: 1px solid rgba(255,255,255,0.1); }
.blog-legal-footer .footer-inner { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.blog-legal-footer p { margin: 0; color: rgba(255,255,255,0.48); font-size: 0.74rem; }
.blog-legal-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.blog-legal-footer nav a { color: rgba(255,255,255,0.6) !important; font-size: 0.7rem; font-weight: 600; text-decoration: none; letter-spacing: 0.04em; transition: color 180ms ease; }
.blog-legal-footer nav a:hover { color: var(--accent) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .posts-grid { grid-template-columns: 1fr 1fr; }
  .blog-main-nav { gap: 16px; }
}
@media (max-width: 600px) {
  .posts-grid { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next-post { text-align: left; }
  .blog-legal-footer .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* HAMBURGUESA */
.blog-toggle {
  display: none;
  position: relative;
  z-index: 100;
  width: 42px; height: 42px;
  padding: 11px 7px;
  border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 7px;
}
.blog-toggle span:not(.sr-only) {
  display: block; height: 1px; background: #fff;
  transition: transform 220ms ease;
}
.menu-open .blog-toggle span:first-child, .blog-menu-open .blog-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .blog-toggle span:nth-child(2), .blog-menu-open .blog-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 900px) {
  .blog-toggle {
    display: flex !important;
    z-index: 100 !important;
    position: relative !important;
  }
  .blog-main-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 55 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 26px !important;
    padding: 90px 10vw !important;
    background: rgba(16, 16, 15, 0.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease !important;
  }
  .menu-open .blog-main-nav, .blog-menu-open .blog-main-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .blog-main-nav a {
    font-size: clamp(1.7rem, 6vw, 3rem) !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: #fff !important;
  }
  .blog-main-nav .nav-cta {
    margin-top: 10px !important;
    padding: 11px 20px !important;
    font-size: 1rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
}