/*
 * como-funciona — estilos de la plantilla page-como-funciona.php.
 *
 * Mismo diseño editorial que Cómo comprar (como-comprar.css): título de cada
 * apartado a la izquierda y contenido a la derecha, texto en Roboto Condensed
 * a 14px, títulos en Oswald y pasos con números grandes en azul claro.
 * Solo afectan a #vcs-funciona-2026: no tocan cabecera, menú, footer ni cookies.
 */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto+Condensed:wght@400;500;600;700&display=swap');

#vcs-funciona-2026 {
  --vcs-tinta: #1b2936;
  --vcs-suave: #617184;
  --vcs-linea: #e1e7ec;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  color: var(--vcs-tinta);
  font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  overflow-wrap: break-word;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
#vcs-funciona-2026,
#vcs-funciona-2026 * { box-sizing: border-box; }
#vcs-funciona-2026 .vcs-contenido {
  width: 100%;
  max-width: 1260px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px clamp(18px, 4vw, 56px) 60px;
}
#vcs-funciona-2026 h1,
#vcs-funciona-2026 h2 {
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: .006em !important;
  color: #071d49 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#vcs-funciona-2026 h1 {
  margin: 20px 0 8px !important;
  padding: 0 !important;
  font-size: 27px !important;
  line-height: 1.24 !important;
  color: #0861e8 !important;
}
#vcs-funciona-2026 h2 {
  margin: 0 0 9px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.34 !important;
}
/* Subtítulos («Ten preparado», «En subasta»…): etiqueta pequeña en azul. */
#vcs-funciona-2026 h3 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  line-height: 1.3 !important;
  color: #0861e8 !important;
  background: none !important;
  border: none !important;
  text-transform: uppercase !important;
}
#vcs-funciona-2026 p {
  margin: 0 0 9px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: inherit;
  color: inherit;
}
#vcs-funciona-2026 p:last-child { margin-bottom: 0 !important; }
#vcs-funciona-2026 strong { font-weight: 700; color: #142b3d; }
#vcs-funciona-2026 .vcs-cabecera { margin-bottom: 14px; }
#vcs-funciona-2026 .vcs-intro {
  max-width: 1000px;
}
/* Formato editorial: título a la izquierda, contenido a la derecha,
   y una raya fina entre apartados. */
#vcs-funciona-2026 .vcs-bloque {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  padding: 26px 0;
  border-top: 1px solid var(--vcs-linea);
}
#vcs-funciona-2026 .vcs-bloque-titulo h2 { margin: 0 !important; }
/* Pasos: número grande en azul claro encima de cada paso. */
#vcs-funciona-2026 ol.vcs-pasos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0 !important;
  list-style: none !important;
}
#vcs-funciona-2026 ol.vcs-pasos > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#vcs-funciona-2026 .vcs-pasos strong { display: block; margin: 4px 0 2px; color: #071d49; }
#vcs-funciona-2026 .vcs-pasos span:last-child { display: block; color: #4a5a6d; font-size: 13.5px; line-height: 1.5; }
#vcs-funciona-2026 .vcs-paso-num {
  display: block;
  color: #c9dcf7;
  font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
/* Botón de borde azul («Ver coches Compra Directa», «Quiero vender un coche»). */
#vcs-funciona-2026 a.vcs-boton {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  border: 1px solid #0861e8;
  color: #0861e8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
#vcs-funciona-2026 a.vcs-boton:hover { background: #0861e8; color: #fff; }
#vcs-funciona-2026 p.vcs-asterisco {
  margin: 14px 0 0 !important;
  font-size: 12px !important;
  color: var(--vcs-suave);
}
#vcs-funciona-2026 ol {
  margin: 8px 0 11px 21px !important;
  padding: 0 !important;
}
#vcs-funciona-2026 ol > li {
  margin: 0 0 7px !important;
  padding: 0 0 0 2px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: inherit;
}
/* Columnas dentro de un apartado (subasta / Compra Directa; pago, documentación y retirada). */
#vcs-funciona-2026 .vcs-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
}
#vcs-funciona-2026 .vcs-columnas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
#vcs-funciona-2026 .vcs-columnas ol { margin-top: 0 !important; margin-bottom: 0 !important; }
#vcs-funciona-2026 a.vcs-boton--lleno { background: #0861e8; color: #fff; }
#vcs-funciona-2026 a.vcs-boton--lleno:hover { background: #0754bd; border-color: #0754bd; }
/* Recuadro final: pregunta a la izquierda y los dos botones a la derecha. */
#vcs-funciona-2026 .vcs-llamada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 10px;
  padding: 22px 26px;
  background: #f4f8ff;
}
#vcs-funciona-2026 .vcs-llamada h2 { margin: 0 0 4px !important; }
#vcs-funciona-2026 .vcs-llamada-botones { display: flex; flex-wrap: wrap; gap: 10px; }
#vcs-funciona-2026 .vcs-llamada-botones a.vcs-boton { margin-top: 0; }
#vcs-funciona-2026 a {
  color: #155b91;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
#vcs-funciona-2026 a:hover { color: #0a3557; }
/* Sin sitio para la columna de títulos: el título pasa encima del contenido. */
@media (max-width: 1000px) {
  #vcs-funciona-2026 .vcs-bloque {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
@media (max-width: 760px) {
  /* Franja «Recibe las primeras subastas antes que nadie» (plugin vendecar-leads): en móvil no se muestra en Cómo funciona. */
  body .vcl-strip { display: none !important; }
  #vcs-funciona-2026 { font-size: 15px; line-height: 1.59; }
  #vcs-funciona-2026 .vcs-contenido { padding: 17px 18px 43px; }
  #vcs-funciona-2026 h1 { margin-top: 10px !important; font-size: 23px !important; }
  #vcs-funciona-2026 h2 { font-size: 17px !important; }
  #vcs-funciona-2026 .vcs-bloque { padding: 20px 0; }
  #vcs-funciona-2026 .vcs-columnas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  #vcs-funciona-2026 .vcs-llamada { padding: 18px; }
  #vcs-funciona-2026 ol.vcs-pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  /* Cada paso: el número y el título en la misma línea, el texto debajo a todo el ancho. */
  #vcs-funciona-2026 ol.vcs-pasos > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
  }
  #vcs-funciona-2026 .vcs-paso-num { font-size: 18px; }
  #vcs-funciona-2026 .vcs-pasos strong { margin: 0; }
  #vcs-funciona-2026 .vcs-pasos span:last-child {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #vcs-funciona-2026 *,
  #vcs-funciona-2026 *::before,
  #vcs-funciona-2026 *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}