/*
 * Branding LaPieza para GeneratePress. Misma paleta y tipografía que lapieza.io
 * (lapieza-front-next/src/styles/palette.js): rojo #D40000, navy #2C3E50,
 * negro #232323; Syne en títulos y Urbanist en texto. Fuentes servidas desde el
 * propio sitio (sin Google Fonts: CSP 'self' y sin IP de lectores a terceros).
 */
@font-face { font-family: "Syne"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Syne-Medium.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("fonts/Syne-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Urbanist-Regular.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 500 700; font-style: normal; font-display: swap; src: url("fonts/Urbanist-Medium.woff2") format("woff2"); }

:root {
  --lp-red: #D40000;
  --lp-red-dark: #B80000;
  --lp-navy: #2C3E50;
  --lp-black: #232323;
  --lp-gray: #DDDDDD;
  --lp-cream: #F7F5F1;
  --lp-red-soft: rgba(212, 0, 0, 0.08);

  /* Paleta global de GeneratePress */
  --contrast: var(--lp-black);
  --contrast-2: #4A4A4A;
  --contrast-3: #8C8C8C;
  --base: var(--lp-gray);
  --base-2: var(--lp-cream);
  --base-3: #FFFFFF;
  --accent: var(--lp-red);
}

body {
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--lp-black);
  background-color: var(--lp-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .page-title, .main-title {
  font-family: "Syne", "Urbanist", sans-serif;
  font-weight: 600;
  color: var(--lp-black);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1, .entry-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: 1.35rem; }

a { color: var(--lp-red); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--lp-red-dark); }
::selection { background: var(--lp-red); color: #fff; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.site-header { background: #fff; border-bottom: 1px solid var(--lp-gray); }
.inside-header { padding-top: 18px; padding-bottom: 18px; }
.site-logo img, .site-logo .header-image { height: 40px; width: auto; }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--lp-black);
  padding-left: 14px;
  padding-right: 14px;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a { color: var(--lp-red); }
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--lp-red); }
/* "Ir a LaPieza" como botón */
.main-navigation .main-nav ul li.menu-lapieza > a {
  background: var(--lp-red);
  color: #fff;
  border-radius: 999px;
  line-height: 40px;
  margin: 10px 0 10px 8px;
  padding: 0 20px;
}
.main-navigation .main-nav ul li.menu-lapieza > a:hover { background: var(--lp-red-dark); color: #fff; }
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: var(--lp-black); background: transparent; }

/* ── Contenido ────────────────────────────────────────────────────────── */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.04), 0 4px 16px rgba(35, 35, 35, 0.04);
}
.entry-title a { color: var(--lp-black); text-decoration: none; }
.entry-title a:hover { color: var(--lp-red); }
.entry-meta, .entry-meta a { color: #6B6B6B; font-size: 15px; }
.entry-meta a:hover { color: var(--lp-red); }
.post-image img, .featured-image img { border-radius: 12px; }
.entry-content img { border-radius: 8px; height: auto; }
.entry-content blockquote {
  border-left: 4px solid var(--lp-red);
  background: var(--lp-red-soft);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-style: normal;
}
.cat-links a, .tags-links a {
  display: inline-block;
  background: var(--lp-red-soft);
  color: var(--lp-red);
  padding: 2px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  margin: 2px 2px 2px 0;
}
.cat-links a:hover, .tags-links a:hover { background: var(--lp-red); color: #fff; }
.cat-links .gp-icon, .tags-links .gp-icon { display: none; }

/* "Leer más" */
.read-more, a.read-more {
  color: var(--lp-red);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.read-more:hover { color: var(--lp-red-dark); text-decoration: underline; }

/* Botones */
button, html input[type="button"], input[type="reset"], input[type="submit"],
a.button, a.wp-block-button__link:not(.has-background), .wp-block-button .wp-block-button__link {
  background: var(--lp-red);
  color: #fff;
  border-radius: 999px;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  padding: 10px 22px;
  border: 0;
}
button:hover, input[type="submit"]:hover, a.button:hover, .wp-block-button .wp-block-button__link:hover {
  background: var(--lp-red-dark);
  color: #fff;
}

/* Paginación */
.paging-navigation .nav-links > * { border-radius: 999px; padding: 4px 12px; }
.paging-navigation .nav-links .current { background: var(--lp-red); color: #fff; }

/* ── Barra lateral ────────────────────────────────────────────────────── */
.sidebar .widget {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.04), 0 4px 16px rgba(35, 35, 35, 0.04);
}
.sidebar .widget h2, .sidebar .widget .widget-title, .sidebar .wp-block-heading {
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.sidebar .widget ul { margin-left: 0; list-style: none; }
.sidebar .widget li { padding: 6px 0; border-bottom: 1px solid #F0EEEA; font-size: 16px; line-height: 1.4; }
.sidebar .widget li:last-child { border-bottom: 0; }
.sidebar .widget a { color: var(--lp-black); text-decoration: none; }
.sidebar .widget a:hover { color: var(--lp-red); }
/* La tarjeta de CTA ocupa todo el widget (sin marco blanco alrededor) */
.sidebar .widget:has(.lp-cta) { background: var(--lp-navy); }
.sidebar .lp-cta { background: transparent; color: #fff; }
.sidebar .lp-cta h2, .sidebar .lp-cta p { color: #fff; }
.sidebar .lp-cta .wp-block-button__link { background: var(--lp-red); color: #fff; }
.sidebar .lp-cta .wp-block-button__link:hover { background: var(--lp-red-dark); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.site-info {
  background: var(--lp-navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.site-info a { color: #fff; }
.site-info a:hover { color: var(--lp-gray); }

@media (max-width: 768px) {
  body { font-size: 17px; }
  .site-logo img, .site-logo .header-image { height: 32px; }
  .main-navigation .main-nav ul li.menu-lapieza > a { margin: 8px 16px; display: inline-block; }
}

/* Listados (portada, categorías): títulos más compactos que dentro del post */
.blog .entry-title, .archive .entry-title, .search .entry-title {
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
}