/* ==========================================================================
   BRAND.CSS — Tokens de marca + base, sobre GeneratePress
   Sistema "línea y aire": rosa solo como acento, negro estructura, neutros
   fondo. Tokens copiados VERBATIM del style.css del child Wonderwall (fuente
   de verdad de los --lb-*). En GP el padre ya no aporta estos tokens, así que
   viven aquí y los consume redesign.css.
   ========================================================================== */
:root {
    /* Palette — 5 rosas */
    --lb-magenta:     #e00086; /* acento primario */
    --lb-rosa-morado: #9a0058; /* hover / active / profundidad */
    --lb-burdeos:     #5f0025; /* marca, uso mínimo */
    --lb-salmon:      #ec8e97; /* decorativo suave; solo texto negro encima */
    --lb-rosa-claro:  #fdf2f4; /* tinte muy sutil */

    /* Neutrals & Semantic */
    --lb-negro:  #000000;      /* estructura */
    --lb-fg-1:   #1a1a1a;      /* titulares */
    --lb-fg-2:   #333333;      /* texto de lectura */
    --lb-fg-3:   #737373;      /* meta, breadcrumb, pies de foto */
    --lb-magenta-texto: #d90082; /* magenta para texto pequeño sobre --lb-bg-2 (AA) */
    --lb-bg-1:   #ffffff;      /* lienzo */
    --lb-bg-2:   #fafafa;      /* superficies suaves */
    --lb-line-1: #eaeaea;      /* filetes 1px */

    /* Alias heredados (compatibilidad con CSS/inline existente) */
    --lb-magenta-old: #e00086;
    --lb-rosa:        var(--lb-rosa-morado);
    --lb-rosa-suave:  var(--lb-rosa-claro);
    --lb-text:        var(--lb-fg-2);

    /* GeneratePress usa --accent (azul por defecto) para enlaces, hover del menú,
       enlaces de comentarios, etc. Lo pasamos al magenta de marca. */
    --accent: #e00086;
}

/* Base sobre GeneratePress */
body {
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--lb-fg-2);
    /* Fondo blanco en toda la web (GeneratePress lo pone gris claro por defecto).
       Look limpio de la maqueta de Claude Design. */
    background-color: #fff;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', system-ui, sans-serif;
}

/* Borde de marca bajo la cabecera (equivale al de Wonderwall) */
.site-header {
    border-bottom: 4px solid var(--lb-magenta);
}

/* Con el logo puesto, el título y la descripción en texto sobran. */
.site-header .main-title,
.site-header .site-description { display: none; }

/* Logo a un tamaño de cabecera razonable (GP lo renderiza a su tamaño natural). */
.site-header .header-image,
.site-header .site-logo img {
    width: 210px;
    height: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .site-header .header-image,
    .site-header .site-logo img { width: 160px; }
}

/* Menú principal (barra bajo el logo): un poco más compacto para que quepan
   los 6 apartados en una fila. */
.main-navigation .main-nav ul li a {
    font-weight: 600;
    text-transform: none;
}

/* ==========================================================================
   BARRA SUPERIOR (top bar): menú secundario + buscador, sobre la cabecera.
   ========================================================================== */
.lc-top-bar {
    background: var(--lb-bg-2);
    border-bottom: 1px solid var(--lb-line-1);
    font-family: 'Poppins', system-ui, sans-serif;
}
.lc-top-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.lc-top-bar__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
}
.lc-top-bar__menu li { margin: 0; }
.lc-top-bar__menu a {
    color: var(--lb-fg-3);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.lc-top-bar__menu a:hover { color: var(--lb-magenta); }
.lc-top-bar__right { display: flex; align-items: center; gap: 18px; }
.lc-top-bar__social { display: flex; align-items: center; gap: 12px; }
.lc-top-bar__social a { color: var(--lb-fg-3); display: flex; transition: color .15s ease; }
.lc-top-bar__social a:hover { color: var(--lb-magenta); }
.lc-top-bar__social svg { width: 16px; height: 16px; display: block; }
.lc-top-bar__search { display: flex; align-items: center; }
.lc-top-bar__search input {
    border: 1px solid var(--lb-line-1);
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 5px 14px;
    font-size: 13px;
    background: #fff;
    width: 160px;
    height: 30px;
    box-sizing: border-box;
}
.lc-top-bar__search input:focus { outline: none; border-color: var(--lb-magenta); }
.lc-top-bar__search button {
    border: 1px solid var(--lb-magenta);
    background: var(--lb-magenta);
    color: #fff;
    border-radius: 0 20px 20px 0;
    height: 30px;
    padding: 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.lc-top-bar__search button:hover { background: var(--lb-rosa-morado); border-color: var(--lb-rosa-morado); }

@media (max-width: 768px) {
    .lc-top-bar__inner { padding: 0 18px; gap: 12px; }
    .lc-top-bar__menu { gap: 14px; }
    .lc-top-bar__menu a { font-size: 12px; }
    .lc-top-bar__right { gap: 12px; }
    .lc-top-bar__search input { width: 108px; }
}
@media (max-width: 560px) {
    .lc-top-bar__social { display: none; } /* menú + búsqueda; redes en el footer/artículos */
}