/*
Theme Name: VeloValue Master
Theme URI: https://velovalue.net
Description: GeneratePress child theme — Pro-Tour cycling aesthetic. Product reviews, SEO structured data, and affiliate content for velovalue.net / .es.
Author: VeloValue
Author URI: https://velovalue.net
Template: generatepress
Version: 4.3.7
Text Domain: velovalue
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   OVERRIDE GENERATEPRESS NATIVE VARIABLES
   GP reads these for ALL its internal color/typography decisions.
   Setting them here makes the theme adopt our palette without fighting
   specificity battles elsewhere.
   ========================================================================== */
:root {
  /* GeneratePress core variables — these are the ones GP actually uses */
  --contrast:    #18181b;   /* main text / headings */
  --contrast-2:  #52525b;   /* secondary text */
  --contrast-3:  #e5e5e7;   /* borders, dividers */
  --base:        #ffffff;   /* body background */
  --base-2:      #f7f7f8;   /* secondary background (cards, sidebar) */
  --base-3:      #e5e5e7;   /* tertiary background */
  --accent:      #00AEEF;   /* links, buttons, highlights */

  /* VeloValue design tokens */
  --vv-black:          #000000;
  --vv-white:          #ffffff;
  --vv-sky:            #00AEEF;
  --vv-sky-dark:       #0090c7;
  --vv-gray-100:       #f7f7f8;
  --vv-gray-200:       #e5e5e7;
  --vv-gray-400:       #9ca3af;
  --vv-gray-600:       #52525b;
  --vv-gray-900:       #18181b;
  --vv-color-good:     #00AEEF;
  --vv-color-mid:      #f59e0b;
  --vv-color-low:      #ef4444;
  --vv-radius:         4px;
  --vv-shadow:         0 1px 4px rgba(0,0,0,.08);
  --vv-shadow-md:      0 4px 12px rgba(0,0,0,.10);
  --vv-font-heading:   'Archivo', sans-serif;
  --vv-font-body:      'Inter', sans-serif;
  --vv-font-mono:      'JetBrains Mono', 'Courier New', monospace;
}

/* ==========================================================================
   BASE TYPOGRAPHY — Inter body, Oswald headings
   ========================================================================== */
body,
.site {
  font-family: var(--vv-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings base — Inter bold para contenido legible */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vv-font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--vv-black);
  margin-top: 0;
}

/*
 * Oswald SOLO en chrome de UI: títulos de tarjeta, sección y navegación.
 * NO en headings de contenido — esos van en Inter para legibilidad.
 */
.entry-title,
.page-title,
.vv-single__title,
.vv-archive-header__title,
.vv-section-title,
.vv-fp-card__title,
.vv-entry__title {
  font-family: var(--vv-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  line-height: 1.15 !important;
  color: var(--vv-black) !important;
}

/* Links — GP normally reads --accent, but belt-and-braces override */
a,
a:visited {
  color: var(--vv-sky);
}
a:hover,
a:focus {
  color: var(--vv-sky-dark);
}


/* ==========================================================================
   HEADER — Solid black bar with Sky accent stripe
   ========================================================================== */
.site-header,
#site-header,
.header-widget {
  background-color: var(--vv-black) !important;
  background: var(--vv-black) !important;
  border-bottom: 3px solid var(--vv-sky) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

/* Site title / logo */
.site-header .site-title a,
.site-header .main-title a,
.site-header .site-branding a,
p.site-title a {
  color: var(--vv-white) !important;
}
.site-header .site-description,
.site-header .site-tagline {
  color: var(--vv-gray-400) !important;
}

/* Top navigation bar background (if separate from .site-header) */
.top-bar,
.secondary-navigation {
  background: var(--vv-gray-900) !important;
  color: var(--vv-gray-400) !important;
}

/* ==========================================================================
   NAVIGATION — White Oswald labels on black
   ========================================================================== */
.main-navigation,
.main-navigation .main-nav {
  background: transparent !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li a:visited,
nav.main-navigation a {
  color: var(--vv-white) !important;
  font-family: var(--vv-font-heading) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: var(--vv-sky) !important;
  background: transparent !important;
}

/* Mobile toggle */
.main-navigation .menu-toggle,
button.menu-toggle {
  color: var(--vv-white) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}

/* Dropdown submenu */
.main-navigation .main-nav ul ul,
.main-navigation ul ul {
  background-color: var(--vv-gray-900) !important;
  border-top: 2px solid var(--vv-sky) !important;
  border-radius: 0 0 var(--vv-radius) var(--vv-radius) !important;
}

.main-navigation .main-nav ul ul li a {
  color: var(--vv-gray-200) !important;
  font-size: .775rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.main-navigation .main-nav ul ul li a:hover {
  color: var(--vv-sky) !important;
  background-color: rgba(255,255,255,.05) !important;
}

/* ==========================================================================
   CARBON FIBER BUTTONS
   ========================================================================== */
.vv-btn-carbon,
.vv-rank__btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.12) 0px,
      rgba(255,255,255,.12) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 4px
    );
  background-color: #222;
  background-size: auto, auto;
  color: var(--vv-white) !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading) !important;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}

.vv-btn-carbon:hover,
.vv-rank__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
  color: var(--vv-white) !important;
}

/* Sky (blue) variant — verdict CTA */
.vv-verdict__btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.15) 0px,
      rgba(255,255,255,.15) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 1px,
      transparent 1px,
      transparent 4px
    );
  background-color: var(--vv-sky);
  color: var(--vv-white) !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading) !important;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 174, 239, .35), inset 0 1px 0 rgba(255,255,255,.15);
}

.vv-verdict__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0, 174, 239, .45), inset 0 1px 0 rgba(255,255,255,.15);
  color: var(--vv-white) !important;
  background-color: var(--vv-sky-dark);
}

/* ==========================================================================
   FEATURED IMAGES — Subtle shadow
   ========================================================================== */
.post-image img,
.wp-post-image,
.vv-fp-card__img,
.vv-fp-list__thumb,
.vv-rank__thumb {
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}

/* ==========================================================================
   LAYOUT — Content + Sidebar flex wrapper
   ========================================================================== */

/* Safety-net: GP already outputs this but we ensure it on child-theme templates */
.site-content {
  display: flex;
  flex-wrap: wrap;
}

/*
 * Global sidebar layout fix.
 * generate_do_element_classes('content') emite solo "content-area" sin clase
 * de anchura cuando el customizer no tiene configurado explícitamente el width
 * por tipo de página. Forzamos las proporciones 70/30 siempre que GP ponga
 * right-sidebar en el body.
 */
.right-sidebar .grid-container.grid-parent {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
}

.right-sidebar .grid-container.grid-parent > .content-area {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

.right-sidebar .grid-container.grid-parent > .widget-area {
  flex: 0 0 30% !important;
  max-width: 30% !important;
  min-width: 220px;
  box-sizing: border-box;
  align-self: flex-start;
}

/*
 * Sticky sidebar: offset by the sticky header height so the top of the
 * sidebar never slides under the black bar.
 * --vv-header-h can be set via JS if needed; 72px is a safe fallback.
 */
.widget-area.sticky-sidebar,
.generate-sticky-sidebar .widget-area {
  position: sticky;
  top: calc(var(--vv-header-h, 72px) + 1rem);
  z-index: 10;        /* always below the header's z-index: 1000 */
}

/* ==========================================================================
   SIDEBAR WIDGETS — VeloValue card design language
   Replica exacta de .vv-fp-col / .vv-fp-col__header para coherencia visual.
   ========================================================================== */

/* GP en modo separate-containers añade fondo y padding al wrapper;
   lo reseteamos para que cada widget sea su propia tarjeta independiente */
.widget-area .inside-right-sidebar,
.widget-area .inside-left-sidebar {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── Tarjeta base ───────────────────────────────────────────────────────── */

.widget-area .widget {
  background: var(--vv-white);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.widget-area .widget:last-child {
  margin-bottom: 0;
}

/* ── Título (cabecera negra) ────────────────────────────────────────────── */

.widget-area .widget-title {
  display: block;
  padding: .875rem 1.125rem !important;
  background: var(--vv-black);
  border-bottom: 2px solid var(--vv-sky) !important;
  margin: 0 !important;
  font-family: var(--vv-font-heading) !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--vv-white) !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* ── Lista genérica (Recent Posts, Categories, Archives, Meta…) ─────────── */

.widget-area .widget ul {
  list-style: none !important;
  margin: 0 !important;
  padding: .375rem 0 !important;
}
.widget-area .widget ul li {
  border-bottom: 1px solid var(--vv-gray-200);
  margin: 0;
  padding: 0;
}
.widget-area .widget ul li:last-child {
  border-bottom: none;
}
.widget-area .widget ul li a {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .6rem 1.125rem;
  color: var(--vv-gray-900) !important;
  text-decoration: none !important;
  font-size: .875rem;
  line-height: 1.4;
  transition: background .12s, color .12s;
}
.widget-area .widget ul li a::before {
  content: '›';
  color: var(--vv-sky);
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.widget-area .widget ul li a:hover {
  background: var(--vv-gray-100);
  color: var(--vv-sky) !important;
}

/* contador de posts en categorías/archivos */
.widget-area .widget ul li .post-count,
.widget-area .widget ul li .count {
  margin-left: auto;
  font-size: .7rem;
  color: var(--vv-gray-400);
  background: var(--vv-gray-100);
  border-radius: 10px;
  padding: .1em .5em;
  flex-shrink: 0;
}

/* ── Recent Posts ───────────────────────────────────────────────────────── */

.widget-area .widget_recent_entries .post-date {
  display: block;
  font-size: .7rem;
  color: var(--vv-gray-400);
  padding: 0 1.125rem .5rem 2.1rem;
  margin-top: -.3rem;
}

/* ── Recent Comments ────────────────────────────────────────────────────── */

/* el texto "on Post Title" vive fuera del <a>, así que padding va en el <li> */
.widget-area .widget_recent_comments ul li.recentcomments {
  padding: .6rem 1.125rem;
  font-size: .8125rem;
  color: var(--vv-gray-600);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem;
  transition: background .12s;
}
.widget-area .widget_recent_comments ul li.recentcomments:hover {
  background: var(--vv-gray-100);
}
.widget-area .widget_recent_comments ul li.recentcomments a {
  display: inline !important;
  padding: 0 !important;
  font-size: .8125rem !important;
}
.widget-area .widget_recent_comments ul li.recentcomments a::before {
  display: none !important;
}

/* ── Texto / HTML personalizado ─────────────────────────────────────────── */

.widget-area .widget .textwidget {
  padding: 1rem 1.125rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--vv-gray-600);
  text-align: center;
}
.widget-area .widget .textwidget p {
  margin: 0 0 .75rem;
}
.widget-area .widget .textwidget p:last-child {
  margin-bottom: 0;
}

/* botones genéricos dentro de widgets de texto o HTML */
.widget-area .widget .textwidget a.button,
.widget-area .widget .textwidget .wp-block-button__link,
.widget-area .widget .textwidget button,
.widget-area .widget .textwidget input[type="submit"] {
  display: inline-block;
  padding: .55rem 1.25rem;
  background: var(--vv-black);
  color: var(--vv-white) !important;
  border: none;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .12s;
}
.widget-area .widget .textwidget a.button:hover,
.widget-area .widget .textwidget .wp-block-button__link:hover,
.widget-area .widget .textwidget button:hover,
.widget-area .widget .textwidget input[type="submit"]:hover {
  background: var(--vv-sky);
  color: var(--vv-white) !important;
}

/* ── Buscador ───────────────────────────────────────────────────────────── */

.widget-area .widget_search form {
  padding: .875rem 1.125rem;
  display: flex;
  gap: .5rem;
}
.widget-area .widget_search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--vv-gray-200);
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-body);
  font-size: .875rem;
  color: var(--vv-gray-900);
  outline: none;
  transition: border-color .15s;
}
.widget-area .widget_search input[type="search"]:focus {
  border-color: var(--vv-sky);
}
.widget-area .widget_search input[type="submit"],
.widget-area .widget_search button[type="submit"] {
  padding: .5rem 1rem;
  background: var(--vv-black);
  color: var(--vv-white);
  border: none;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.widget-area .widget_search input[type="submit"]:hover,
.widget-area .widget_search button[type="submit"]:hover {
  background: var(--vv-sky);
}

/* ── Menú de navegación ─────────────────────────────────────────────────── */

.widget-area .widget_nav_menu ul {
  padding: .375rem 0 !important;
}
.widget-area .widget_nav_menu .sub-menu {
  padding: 0 !important;
  border-top: none !important;
}
.widget-area .widget_nav_menu .sub-menu li a {
  padding-left: 2rem !important;
  font-size: .8125rem !important;
  color: var(--vv-gray-600) !important;
}
.widget-area .widget_nav_menu .sub-menu li a::before {
  content: '–' !important;
  color: var(--vv-gray-400) !important;
}

/* ── Calendario ─────────────────────────────────────────────────────────── */

.widget-area .widget_calendar .calendar_wrap {
  padding: .875rem 1.125rem 1rem;
}
#wp-calendar {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  font-family: var(--vv-font-body);
}
#wp-calendar caption {
  font-family: var(--vv-font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vv-gray-600);
  text-align: center;
  padding-bottom: .5rem;
}
#wp-calendar th {
  background: var(--vv-gray-100);
  color: var(--vv-gray-600);
  font-family: var(--vv-font-heading);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: .35rem .2rem;
  border-bottom: 2px solid var(--vv-sky);
}
#wp-calendar td {
  text-align: center;
  padding: .3rem .2rem;
  color: var(--vv-gray-400);
  font-size: .8rem;
  border-bottom: 1px solid var(--vv-gray-200);
}
#wp-calendar td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--vv-sky);
  color: var(--vv-white) !important;
  border-radius: 50%;
  text-decoration: none !important;
  font-weight: 700;
  font-size: .8rem;
  transition: background .12s;
}
#wp-calendar td a::before {
  display: none !important;
}
#wp-calendar td a:hover {
  background: var(--vv-sky-dark);
}
#wp-calendar td#today {
  color: var(--vv-black);
  font-weight: 700;
}
#wp-calendar tfoot td {
  padding-top: .5rem;
  border-bottom: none;
}
#wp-calendar tfoot #prev a,
#wp-calendar tfoot #next a {
  display: inline-block;
  padding: .25rem .6rem;
  background: var(--vv-black);
  color: var(--vv-white) !important;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .12s;
  width: auto;
  height: auto;
}
#wp-calendar tfoot #prev a::before,
#wp-calendar tfoot #next a::before {
  display: none !important;
}
#wp-calendar tfoot #prev a:hover,
#wp-calendar tfoot #next a:hover {
  background: var(--vv-sky);
}
#wp-calendar tfoot #next {
  text-align: right;
}

/* ── RSS ────────────────────────────────────────────────────────────────── */

.widget-area .widget_rss ul {
  padding: .375rem 0 !important;
}
.widget-area .widget_rss ul li {
  padding: .6rem 1.125rem;
}
.widget-area .widget_rss ul li a.rsswidget {
  display: block;
  padding: 0 !important;
  font-size: .875rem !important;
  font-weight: 600;
  color: var(--vv-gray-900) !important;
  line-height: 1.4;
}
.widget-area .widget_rss ul li a.rsswidget::before {
  display: none !important;
}
.widget-area .widget_rss ul li a.rsswidget:hover {
  background: transparent !important;
  color: var(--vv-sky) !important;
}
.widget-area .widget_rss .rss-date,
.widget-area .widget_rss cite {
  display: block;
  font-size: .7rem;
  color: var(--vv-gray-400);
  margin-top: .2rem;
}
.widget-area .widget_rss .rssSummary {
  font-size: .8125rem;
  color: var(--vv-gray-600);
  line-height: 1.5;
  margin-top: .3rem;
}

/* ── Nube de etiquetas ──────────────────────────────────────────────────── */

.widget-area .widget_tag_cloud .tagcloud {
  padding: .875rem 1.125rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}
.widget-area .widget_tag_cloud .tagcloud a {
  font-family: var(--vv-font-heading);
  font-size: .65rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vv-sky) !important;
  text-decoration: none;
  border: 1px solid var(--vv-sky);
  border-radius: var(--vv-radius);
  padding: .2em .6em;
  transition: background .12s, color .12s;
}
.widget-area .widget_tag_cloud .tagcloud a:hover {
  background: var(--vv-sky);
  color: var(--vv-white) !important;
}

/* ==========================================================================
   SINGLE POST — VeloValue card design language
   ========================================================================== */

/* Tarjeta contenedora — overflow:hidden para que la cabecera toque los bordes */
.vv-single {
  background: var(--vv-white);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
  overflow: hidden;
}

/* Cabecera negra — mismo patrón que .vv-entry__header / .widget-title */
.vv-single__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: var(--vv-black);
  border-bottom: 2px solid var(--vv-sky);
}

.vv-single__cat {
  font-family: var(--vv-font-heading);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--vv-sky) !important;
  text-decoration: none;
}
.vv-single__cat:hover {
  color: var(--vv-white) !important;
}

.vv-single__date {
  font-size: .7rem;
  color: var(--vv-gray-400);
  white-space: nowrap;
}

/* Cuerpo — extiende .inside-article */
.vv-single__body {
  padding: 2rem 2.25rem 2.5rem;
}

/* Título principal */
.vv-single__title {
  margin: 0 0 1.5rem !important;
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  line-height: 1.1 !important;
}

/* Imagen destacada a ancho completo dentro de la tarjeta */
.vv-single__thumb {
  margin: 0 -2.25rem 2rem;  /* rompe el padding lateral para ir a bordes */
  overflow: hidden;
}
.vv-single__thumb img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none !important;
}

/* ==========================================================================
   CONTENT AREA
   ========================================================================== */
.inside-article {
  padding: 2.5rem 2rem;
}

.entry-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--vv-gray-900);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--vv-font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--vv-black);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}
.entry-content h2 { font-size: 1.375rem; line-height: 1.25; }
.entry-content h3 { font-size: 1.125rem; line-height: 1.3; }
.entry-content h4 { font-size: 1rem;     line-height: 1.4; }

/* Links */
.entry-content a {
  color: var(--vv-sky);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .12s;
}
.entry-content a:hover {
  color: var(--vv-sky-dark);
}

/* Bold & italic */
.entry-content strong,
.entry-content b {
  font-weight: 700;
  color: var(--vv-gray-900);
}
.entry-content em,
.entry-content i {
  font-style: italic;
  color: var(--vv-gray-600);
}

/* Blockquote */
.entry-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-left: 3px solid var(--vv-sky);
  background: var(--vv-gray-100);
  border-radius: 0 var(--vv-radius) var(--vv-radius) 0;
  font-style: italic;
  color: var(--vv-gray-600);
  font-size: 1rem;
  line-height: 1.7;
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote cite {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  font-style: normal;
  font-weight: 700;
  color: var(--vv-gray-400);
  letter-spacing: .04em;
}

/* Inline code */
.entry-content code {
  font-family: var(--vv-font-mono);
  font-size: .875em;
  background: var(--vv-gray-100);
  border: 1px solid var(--vv-gray-200);
  border-radius: 3px;
  padding: .1em .4em;
  color: var(--vv-sky-dark);
  white-space: nowrap;
}

/* Code block */
.entry-content pre {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--vv-gray-900);
  border-radius: var(--vv-radius);
  overflow-x: auto;
  line-height: 1.6;
}
.entry-content pre code {
  font-size: .875rem;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--vv-gray-200);
  white-space: pre;
}

/* Horizontal rule */
.entry-content hr {
  border: none;
  border-top: 2px solid var(--vv-sky);
  margin: 2.5rem 0;
  opacity: .35;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  margin: 1.75rem 0;
}
.entry-content th {
  background: var(--vv-black);
  color: var(--vv-white);
  font-family: var(--vv-font-heading);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .65rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--vv-sky);
}
.entry-content td {
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--vv-gray-200);
  color: var(--vv-gray-900);
  vertical-align: top;
}
.entry-content tr:last-child td { border-bottom: none; }
.entry-content tr:nth-child(even) td { background: var(--vv-gray-100); }

/* Lists */
.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.entry-content li { margin-bottom: .35rem; }
.entry-content ul li::marker { color: var(--vv-sky); }
.entry-content ol li::marker {
  color: var(--vv-sky);
  font-weight: 700;
  font-family: var(--vv-font-heading);
}

/* Category description card — Explora block */
.vv-fp-col.vv-fp-col--desc .vv-fp-col__desc {
  padding: .5rem 0;
  flex: 1;
}
.vv-fp-col.vv-fp-col--desc .vv-fp-col__desc-text {
  display: block !important;
  padding: .75rem 1.125rem !important;
  font-size: .875rem !important;
  font-family: var(--vv-font-body) !important;
  font-weight: 400 !important;
  color: var(--vv-gray-600) !important;
  line-height: 1.55 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Hide featured image on single posts — CSS fallback for any GP version */
.single .post-image,
.single .featured-image,
.single .generate-featured-image {
  display: none !important;
}

/* ==========================================================================
   COMMENTS — Card + cabecera negra, mismo patrón que el resto del sitio
   ========================================================================== */

/* Wrapper principal */
#comments {
  margin-top: 1.5rem;
  background: var(--vv-white);
  border-radius: var(--vv-radius);
  box-shadow: var(--vv-shadow);
  overflow: hidden;
}

/* Cabecera de la sección */
.comments-title,
#reply-title {
  display: block;
  padding: .875rem 1.25rem !important;
  background: var(--vv-black);
  border-bottom: 2px solid var(--vv-sky);
  margin: 0 !important;
  font-family: var(--vv-font-heading) !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--vv-white) !important;
  line-height: 1.25 !important;
}
#reply-title small { display: none; }

/* Lista de comentarios */
.comment-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Comentario individual */
.comment-body {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--vv-gray-200);
}
.comment-list > li:last-child > .comment-body { border-bottom: none; }

/* Autor + avatar */
.comment-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .65rem;
}
.comment-author img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 2px solid var(--vv-sky);
}
.comment-author .fn {
  font-family: var(--vv-font-heading);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vv-gray-900) !important;
}
.comment-author .fn a { color: inherit !important; text-decoration: none; }
.comment-metadata {
  font-size: .7rem;
  color: var(--vv-gray-400);
  margin-bottom: .65rem;
}
.comment-metadata a { color: var(--vv-gray-400) !important; }

/* Texto del comentario */
.comment-content p {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--vv-gray-600);
  margin: 0 0 .5rem;
}
.comment-content p:last-child { margin-bottom: 0; }

/* Botón de respuesta */
.reply a,
.comment-reply-link {
  font-family: var(--vv-font-heading);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vv-sky) !important;
  text-decoration: none;
  border: 1px solid var(--vv-sky);
  border-radius: var(--vv-radius);
  padding: .2em .65em;
  display: inline-block;
  transition: background .12s, color .12s;
}
.reply a:hover,
.comment-reply-link:hover {
  background: var(--vv-sky);
  color: var(--vv-white) !important;
}

/* Respuestas anidadas */
.children {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 1.5rem !important;
  border-left: 2px solid var(--vv-gray-200);
}
.children .comment-body {
  padding: 1rem 1.25rem;
}

/* Formulario de comentarios */
#respond {
  padding: 1.5rem;
  border-top: 1px solid var(--vv-gray-200);
}
.comment-form label {
  display: block;
  font-family: var(--vv-font-heading);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--vv-gray-600);
  margin-bottom: .35rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .6rem .875rem;
  border: 1px solid var(--vv-gray-200);
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-body);
  font-size: .9375rem;
  color: var(--vv-gray-900);
  background: var(--vv-white);
  transition: border-color .15s;
  box-sizing: border-box;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--vv-sky);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form input[type="submit"] {
  padding: .65rem 1.75rem;
  background: var(--vv-black);
  color: var(--vv-white);
  border: none;
  border-radius: var(--vv-radius);
  font-family: var(--vv-font-heading);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .12s;
}
.comment-form input[type="submit"]:hover { background: var(--vv-sky); }

/* Nota de privacidad */
.comment-notes,
.logged-in-as {
  font-size: .8125rem;
  color: var(--vv-gray-400);
  margin-bottom: 1rem;
}

/* ==========================================================================
   FOOTER — Dark, matching header
   ========================================================================== */
.site-footer,
#site-footer {
  background-color: var(--vv-black) !important;
  background: var(--vv-black) !important;
  color: var(--vv-gray-400) !important;
  border-top: 3px solid var(--vv-sky) !important;
}

.site-footer a,
.site-footer a:visited,
#site-footer a {
  color: var(--vv-white) !important;
}
.site-footer a:hover,
#site-footer a:hover {
  color: var(--vv-sky) !important;
}

/* ==========================================================================
   SVG ICON UTILITIES
   ========================================================================== */
.vv-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.vv-icon--star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.vv-icon--check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
}

.vv-icon--arrow-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
}

.vv-icon--trophy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
}