/*
Theme Name: Chinómetro v15
Theme URI: https://chinometro.es
Author: Nemo Reporter
Author URI: https://chinometro.es
Description: La guía honesta para comprar coche sabiendo de dónde viene cada marca y qué respaldo real trae. Entradas normales con dos taxonomías (casos de uso y marcas), caja de metadatos nativa, patrones de bloques y calculadora de coste por km. Sin ACF, sin CPT, sin catálogo: pensado para funcionar solo aunque se abandone tres meses.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chinometro-v15
Tags: custom-theme, automotive, magazine
*/

/* ============================================
   VARIABLES Y RESET
   ============================================ */
:root {
  --rojo: #E63946;
  --negro: #0D0D0D;
  --crema: #F5EFE6;
  --crema-oscuro: #E8DFD0;
  --amarillo: #FFD23F;
  --verde-ok: #2A9D8F;
  --verde-wsp: #25D366;
  --gris: #6B6B6B;
  --gris-claro: #A8A8A8;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Fraunces', Georgia, serif;
  background: var(--crema);
  color: var(--negro);
  overflow-x: hidden;
  line-height: 1.55;
  font-size: 17px;
}
.mono { font-family: 'JetBrains Mono', monospace; }
img { max-width: 100%; height: auto; }

/* ============================================
   NAVEGACIÓN
   ============================================ */
.cm-nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--negro); color: var(--crema);
  z-index: 100; padding: 14px 32px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid var(--rojo);
}
.cm-nav .logo { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.04em; text-decoration: none; color: var(--crema); }
.cm-nav .logo span { color: var(--rojo); }
.cm-nav .links { display: flex; gap: 26px; list-style: none; align-items: center; }
.cm-nav .links li { list-style: none; }
.cm-nav .links a { color: var(--crema); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; transition: color 0.2s; }
.cm-nav .links a:hover { color: var(--amarillo); }

/* Menú móvil */
.cm-nav-toggle {
  display: none; background: transparent; border: 2px solid var(--crema);
  padding: 8px 10px; cursor: pointer; flex-direction: column; gap: 4px;
}
.cm-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--crema); transition: transform 0.2s, opacity 0.2s; }
.cm-nav-toggle.abierto span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cm-nav-toggle.abierto span:nth-child(2) { opacity: 0; }
.cm-nav-toggle.abierto span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cm-nav-panel {
  display: none; position: fixed; top: 55px; left: 0; right: 0; z-index: 99;
  background: var(--negro); border-bottom: 3px solid var(--rojo); padding: 10px 20px 22px;
}
.cm-nav-panel.abierto { display: block; }
.cm-nav-panel ul { list-style: none; }
.cm-nav-panel a { display: block; color: var(--crema); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; padding: 12px 0; border-bottom: 1px solid rgba(245,239,230,0.12); }
.cm-nav-panel a:hover { color: var(--amarillo); }
@media (max-width: 880px) {
  .cm-nav .links { display: none; }
  .cm-nav { padding: 12px 20px; }
  .cm-nav-toggle { display: flex; }
}

/* ============================================
   HERO (portada)
   ============================================ */
.cm-hero {
  background: var(--negro); color: var(--crema);
  padding: 130px 32px 70px;
  position: relative; overflow: hidden;
}
.cm-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 30%, rgba(230,57,70,0.22) 0%, transparent 50%), radial-gradient(circle at 15% 80%, rgba(255,210,63,0.10) 0%, transparent 50%);
}
.cm-hero-grid,
.cm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(245,239,230,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(245,239,230,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cm-hero::before { z-index: 0; }
.cm-hero-inner { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; }
.cm-hero-tag { display: inline-block; background: var(--rojo); color: var(--crema); padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 22px; transform: rotate(-1deg); }
.cm-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 8.5vw, 110px); line-height: 0.88; letter-spacing: -0.01em; margin-bottom: 22px; }
.cm-hero h1 .rojo, .cm-hero h1 em { color: var(--rojo); font-style: normal; }
.cm-hero h1 .strike, .cm-hero h1 s { text-decoration: line-through; text-decoration-color: var(--rojo); text-decoration-thickness: 6px; color: var(--gris); }
.cm-hero p.bajada { font-size: clamp(16px, 1.7vw, 20px); max-width: 700px; margin-bottom: 28px; color: var(--crema-oscuro); font-style: italic; }
.cm-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================
   BOTONES
   ============================================ */
.cm-btn { display: inline-block; padding: 16px 28px; font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: 0.06em; text-decoration: none; border: 3px solid; cursor: pointer; transition: all 0.18s; background: transparent; color: inherit; }
.cm-btn-primary { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.cm-btn-primary:hover { background: var(--crema); color: var(--negro); border-color: var(--crema); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rojo); }
.cm-btn-ghost { color: var(--crema); border-color: var(--crema); }
.cm-btn-ghost:hover { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rojo); }
.cm-btn-negro { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.cm-btn-negro:hover { background: var(--crema); color: var(--negro); border-color: var(--negro); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rojo); }
.cm-btn-wsp { background: var(--verde-wsp); color: #fff; border-color: var(--verde-wsp); }
.cm-btn-wsp:hover { background: var(--crema); color: var(--negro); border-color: var(--crema); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--verde-wsp); }

/* Botones de bloque (editor de WordPress) con el estilo de la casa */
.wp-block-buttons { gap: 14px; }
.wp-block-button .wp-block-button__link {
  border-radius: 0; font-family: 'Bebas Neue', sans-serif; font-size: 21px;
  letter-spacing: 0.06em; padding: 16px 28px; border: 3px solid var(--negro);
  background: var(--negro); color: var(--crema); transition: all 0.18s; text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover { background: var(--crema); color: var(--negro); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rojo); }
.wp-block-button.cm-btn-primary .wp-block-button__link { background: var(--rojo); color: var(--crema); border-color: var(--rojo); }
.wp-block-button.cm-btn-primary .wp-block-button__link:hover { background: var(--crema); color: var(--negro); border-color: var(--crema); box-shadow: 6px 6px 0 var(--rojo); }
.wp-block-button.cm-btn-ghost .wp-block-button__link { background: transparent; color: var(--crema); border-color: var(--crema); }
.wp-block-button.cm-btn-ghost .wp-block-button__link:hover { background: var(--amarillo); color: var(--negro); border-color: var(--amarillo); box-shadow: 6px 6px 0 var(--rojo); }
.wp-block-button.cm-btn-wsp .wp-block-button__link { background: var(--verde-wsp); color: #fff; border-color: var(--verde-wsp); }
.wp-block-button.cm-btn-wsp .wp-block-button__link:hover { background: var(--crema); color: var(--negro); border-color: var(--crema); box-shadow: 6px 6px 0 var(--verde-wsp); }

/* ============================================
   SECCIONES GENÉRICAS
   ============================================ */
.cm-section { padding: 90px 32px; max-width: 1300px; margin: 0 auto; }
.cm-section-full { padding: 90px 32px; }
.cm-section-inner { max-width: 1300px; margin: 0 auto; }
.cm-section-header { margin-bottom: 50px; }
.cm-section-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rojo); margin-bottom: 12px; }
.cm-section-titulo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 70px); line-height: 0.95; margin-bottom: 14px; }
.cm-section-sub { font-size: 17px; max-width: 720px; color: var(--gris); font-style: italic; }
.cm-fondo-oscuro { background: var(--crema-oscuro); }
.cm-fondo-negro { background: var(--negro); color: var(--crema); }
.cm-fondo-negro .cm-section-tag { color: var(--amarillo); }
.cm-fondo-negro .cm-section-titulo { color: var(--crema); }
.cm-fondo-negro .cm-section-sub { color: var(--crema-oscuro); }

/* ============================================
   POR QUÉ CHINÓMETRO (portada)
   ============================================ */
.cm-porque-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px !important; margin-top: 40px; }
.cm-porque-card { background: var(--crema); padding: 28px; border-left: 6px solid var(--rojo); }
.cm-porque-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 28px; margin-bottom: 12px; line-height: 1; letter-spacing: 0.02em; }
.cm-porque-card p { font-size: 15px; line-height: 1.6; }

/* ============================================
   LAS CINCO PREGUNTAS (portada)
   Numeración automática con contadores CSS: los párrafos
   se editan libremente en el editor y el número se pone solo.
   ============================================ */
.cm-preguntas { counter-reset: cmpregunta; list-style: none; padding: 0; border-top: 2px solid var(--negro); margin: 40px 0 34px; }
.cm-preguntas .cm-pregunta,
.cm-pregunta {
  counter-increment: cmpregunta; position: relative;
  padding: 20px 4px 20px 64px; border-bottom: 2px solid var(--negro);
  font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--gris);
  margin: 0 !important;
}
.cm-pregunta::before {
  content: "0" counter(cmpregunta);
  position: absolute; left: 4px; top: 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--rojo);
}
.cm-pregunta strong { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 0.02em; line-height: 1; margin-bottom: 6px; color: var(--negro); font-style: normal; }
@media (max-width: 600px) {
  .cm-pregunta { padding-left: 44px; }
  .cm-pregunta strong { font-size: 23px; }
}

/* ============================================
   GUÍA NUMERADA (página de asesoramiento)
   ============================================ */
.cm-guia-item { display: flex !important; gap: 18px; align-items: baseline; background: var(--crema-oscuro); border-left: 5px solid var(--rojo); padding: 18px 22px !important; margin: 0 0 14px !important; }
.cm-guia-item .cm-guia-num { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: var(--rojo); line-height: 1; flex: 0 0 34px; }
.cm-guia-item strong { font-family: 'Bebas Neue', sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 0.02em; }

/* ============================================
   PUERTAS: los casos de uso (portada y listado)
   ============================================ */
.cm-puertas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0; border-top: 2px solid var(--negro); border-left: 2px solid var(--negro); }
@media (max-width: 480px) { .cm-puertas-grid { grid-template-columns: 1fr; } }
.cm-puerta { border-right: 2px solid var(--negro); border-bottom: 2px solid var(--negro); padding: 30px 26px; background: var(--crema); text-decoration: none; color: var(--negro); transition: all 0.2s; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; }
.cm-puerta:hover { background: var(--negro); color: var(--crema); }
.cm-puerta-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--gris); margin-bottom: 14px; }
.cm-puerta-nombre { font-family: 'Bebas Neue', sans-serif; font-size: 36px; line-height: 0.95; margin-bottom: 12px; }
.cm-puerta-desc { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--gris); transition: color 0.2s; flex: 1; }
.cm-puerta:hover .cm-puerta-desc { color: var(--crema-oscuro); }
.cm-puerta-cta { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rojo); margin-top: 16px; transition: color 0.2s; }
.cm-puerta:hover .cm-puerta-cta { color: var(--amarillo); }
/* ============================================
   TARJETAS DE VEREDICTO (listados)
   ============================================ */
.cm-tarjetas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.cm-tarjeta { border: 2px solid var(--negro); background: var(--crema); display: flex; flex-direction: column; text-decoration: none; color: var(--negro); transition: all 0.2s; }
.cm-tarjeta:hover { background: var(--negro); color: var(--crema); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rojo); }
.cm-tarjeta-imagen { width: 100%; height: 200px; background: var(--crema-oscuro); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 2px solid var(--negro); }
.cm-tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; }
.cm-tarjeta-sin-foto { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: var(--gris-claro); letter-spacing: 0.04em; }
.cm-tarjeta-cuerpo { padding: 20px 22px 18px; flex: 1; display: flex; flex-direction: column; }
.cm-tarjeta-marca { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rojo); margin-bottom: 6px; }
.cm-tarjeta:hover .cm-tarjeta-marca { color: var(--amarillo); }
.cm-tarjeta-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 0.95; margin-bottom: 10px; }
.cm-tarjeta-quien { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--gris); flex: 1; transition: color 0.2s; }
.cm-tarjeta:hover .cm-tarjeta-quien { color: var(--crema-oscuro); }
.cm-tarjeta-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--crema-oscuro); }
.cm-tarjeta:hover .cm-tarjeta-pie { border-top-color: #2a2a2a; }
.cm-tarjeta-precio { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.04em; }
.cm-tarjeta:hover .cm-tarjeta-precio { color: var(--amarillo); }
.cm-tarjeta-sello { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--verde-wsp); border: 1px solid var(--verde-wsp); padding: 3px 8px; white-space: nowrap; }

/* ============================================
   CABECERA DE ARCHIVO (caso de uso / marca)
   ============================================ */
.cm-archivo { padding: 140px 32px 90px; max-width: 1300px; margin: 0 auto; }
.cm-archivo-header { margin-bottom: 50px; border-bottom: 4px solid var(--negro); padding-bottom: 30px; }
.cm-archivo-tipo { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rojo); margin-bottom: 12px; }
.cm-archivo-titulo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 84px); line-height: 0.9; margin-bottom: 14px; }
.cm-archivo-desc { font-size: 17px; max-width: 720px; color: var(--gris); font-style: italic; }
.cm-archivo-vacio { border: 2px dashed var(--gris-claro); padding: 60px 20px; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--gris); }
.cm-archivo-vacio p.peq { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; margin-top: 10px; }

/* ============================================
   LA FICHA-VEREDICTO (single)
   ============================================ */
.cm-ficha { padding: 130px 20px 60px; max-width: 880px; margin: 0 auto; }
.cm-ficha-header { margin-bottom: 28px; }
.cm-ficha-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rojo); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cm-ficha-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rojo); }
.cm-ficha-meta a:hover { color: var(--negro); }
.cm-ficha-titulo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(46px, 7vw, 80px); line-height: 0.9; margin-bottom: 16px; }
.cm-ficha-precio { background: var(--amarillo); display: inline-block; padding: 8px 16px; font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.04em; }
.cm-ficha-imagen { width: 100%; max-height: 480px; background: var(--crema-oscuro); border: 2px solid var(--negro); margin-bottom: 32px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cm-ficha-imagen img { width: 100%; height: auto; object-fit: cover; }

/* Cuerpo del veredicto (contenido de bloques) */
.cm-ficha-cuerpo { font-size: 17px; line-height: 1.65; }
.cm-ficha-cuerpo > * + * { margin-top: 18px; }
.cm-ficha-cuerpo h2 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 0.02em; line-height: 1; border-bottom: 2px solid var(--negro); padding-bottom: 8px; margin-top: 40px; }
.cm-ficha-cuerpo h3 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.02em; line-height: 1; margin-top: 30px; }
.cm-ficha-cuerpo ul, .cm-ficha-cuerpo ol { padding-left: 24px; }
.cm-ficha-cuerpo li { margin-bottom: 8px; }
.cm-ficha-cuerpo blockquote { background: var(--crema-oscuro); padding: 20px 24px; border-left: 4px solid var(--gris); font-style: italic; }
.cm-ficha-cuerpo a { color: var(--rojo); }
.cm-ficha-cuerpo strong { font-weight: 700; }
.cm-ficha-cuerpo figure { margin: 26px 0; }
.cm-ficha-cuerpo iframe { max-width: 100%; }
.cm-ficha-cuerpo .wp-block-embed__wrapper { position: relative; }

/* --- Bloque: el veredicto (arriba del todo) --- */
.cm-bloque-veredicto { background: var(--negro); color: var(--crema); padding: 26px 30px; border-left: 6px solid var(--amarillo); margin-bottom: 32px; }
.cm-bloque-etiqueta { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.18em; color: var(--amarillo); margin: 0 0 12px !important; }
.cm-bloque-veredicto .cm-veredicto-frase { font-family: 'Fraunces', serif; font-style: italic; font-size: 20px; line-height: 1.45; margin: 0 0 14px; }
.cm-bloque-veredicto .cm-veredicto-quien { font-size: 15px; line-height: 1.55; color: var(--crema-oscuro); margin: 0 0 8px; }
.cm-bloque-veredicto .cm-veredicto-quien strong { color: var(--crema); }

/* --- Bloque: los cuatro ejes --- */
.cm-bloque-ejes { background: var(--crema-oscuro); border-left: 5px solid var(--negro); padding: 24px 28px; margin: 32px 0; }
.cm-bloque-ejes .cm-bloque-etiqueta { color: var(--rojo); }
.cm-bloque-ejes .cm-eje { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--gris); padding: 10px 0; margin: 0 !important; }
.cm-bloque-ejes .cm-eje:last-of-type { border-bottom: none; }
.cm-bloque-ejes .cm-eje-nombre { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; }
.cm-bloque-ejes .cm-eje-nota { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--rojo); }
.cm-bloque-ejes .cm-eje-explica { font-family: 'Fraunces', serif; font-style: italic; font-size: 14px; color: var(--gris); margin: 14px 0 0 !important; }

/* --- Bloque: sello Cochepro --- */
.cm-bloque-cochepro { background: var(--negro); color: var(--crema); padding: 26px 30px; border-left: 5px solid var(--verde-wsp); margin: 32px 0; }
.cm-bloque-cochepro .cm-bloque-etiqueta { color: var(--verde-wsp); }
.cm-bloque-cochepro ul { list-style: none; padding: 0 !important; margin: 0 0 14px; }
.cm-bloque-cochepro li { padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid #2a2a2a; font-size: 15px; line-height: 1.55; color: var(--crema-oscuro); margin: 0 !important; }
.cm-bloque-cochepro li:last-child { border-bottom: none; }
.cm-bloque-cochepro li::before { content: "▸"; position: absolute; left: 0; color: var(--verde-wsp); }
.cm-bloque-cochepro .cm-cochepro-paco { font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--crema); margin: 14px 0 0 !important; border-top: 2px solid var(--verde-wsp); padding-top: 14px; }
.cm-bloque-cochepro figure { margin: 18px 0 0 !important; }

/* --- Bloque: caso real --- */
.cm-bloque-caso { background: #1a1a1a; color: var(--crema); padding: 24px 28px; border-left: 5px solid var(--amarillo); margin: 32px 0; }
.cm-bloque-caso .cm-bloque-etiqueta { color: var(--amarillo); }
.cm-bloque-caso p { font-size: 15px; line-height: 1.6; color: var(--crema-oscuro); margin: 0 0 10px !important; }
.cm-bloque-caso p strong { color: var(--crema); }
.cm-bloque-caso .cm-caso-resultado { font-family: 'Fraunces', serif; font-style: italic; color: var(--amarillo); border-top: 1px solid #2a2a2a; padding-top: 12px; margin-top: 6px !important; }

/* --- Fechado --- */
.cm-fechado { margin-top: 44px; padding-top: 18px; border-top: 1px dashed var(--gris); font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: var(--gris); }

/* --- Cierre comercial (uno solo, al final) --- */
.cm-cierre { margin-top: 44px; background: var(--crema-oscuro); border: 3px solid var(--negro); padding: 30px 32px; }
.cm-cierre-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; margin-bottom: 12px; }
.cm-cierre-texto { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; line-height: 1.6; color: var(--negro); margin-bottom: 18px; max-width: 640px; }
.cm-cierre .cm-btn { font-size: 18px; padding: 13px 22px; }

/* --- Relacionados por caso de uso --- */
.cm-relacionados { max-width: 1300px; margin: 0 auto; padding: 60px 20px 90px; }
.cm-relacionados-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 32px; margin-bottom: 24px; line-height: 1; }
.cm-relacionados-titulo span { color: var(--rojo); }

/* ============================================
   PORTADA: destacados y cierre
   ============================================ */
.cm-destacados { background: var(--crema-oscuro); }
.cm-cierre-portada { background: var(--negro); color: var(--crema); padding: 90px 32px; }
.cm-cierre-portada-inner { max-width: 800px; margin: 0 auto; }
.cm-cierre-portada .cm-section-tag { color: var(--amarillo); }
.cm-cierre-portada .cm-section-titulo { color: var(--crema); }
.cm-cierre-portada p.cm-cierre-portada-texto { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; line-height: 1.6; color: var(--crema-oscuro); margin: 0 0 28px; }

/* ============================================
   CALCULADORA [calc_combustible]
   ============================================ */
.cm-calc { border: 3px solid var(--negro); background: var(--crema); padding: 28px; margin: 30px 0; }
.cm-calc-cabecera { margin-bottom: 24px; }
.cm-calc-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--rojo); margin-bottom: 8px; }
.cm-calc-titulo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 4vw, 40px); line-height: 0.95; }
.cm-calc-sub { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--gris); margin-top: 10px; max-width: 60ch; }
.cm-calc-seccion { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); border-bottom: 2px solid var(--negro); padding-bottom: 6px; margin: 28px 0 16px; }
.cm-calc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.cm-calc-campo span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.cm-calc-campo input { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; padding: 10px 12px; border: 2px solid var(--negro); background: #fff; color: var(--negro); border-radius: 0; }
.cm-calc-campo input:focus { outline: 3px solid var(--rojo); outline-offset: -1px; }
.cm-calc-barras { display: flex; flex-direction: column; gap: 10px; }
.cm-calc-barra { display: flex; align-items: center; gap: 12px; }
.cm-calc-barra .bn { flex: 0 0 92px; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.cm-calc-barra .track { flex: 1; background: var(--crema-oscuro); height: 30px; overflow: hidden; border: 1px solid var(--negro); }
.cm-calc-barra .fill { height: 100%; width: 0; transition: width 0.18s ease; }
.cm-calc-barra .fill.ev { background: var(--verde-ok); }
.cm-calc-barra .fill.gas { background: var(--rojo); }
.cm-calc-barra .fill.die { background: var(--negro); }
.cm-calc-barra .bc { flex: 0 0 150px; text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; }
.cm-calc-barra .bc small { display: block; font-weight: 400; font-size: 10px; color: var(--gris); }
.cm-calc-umbral { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-calc-umbral-caja { background: #fff; border: 2px solid var(--negro); border-top: 5px solid var(--rojo); padding: 16px 18px 14px; }
.cm-calc-umbral-caja.die { border-top-color: var(--negro); }
.cm-calc-umbral-caja .ct { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.cm-calc-umbral-caja .cv { font-family: 'Bebas Neue', sans-serif; font-size: 44px; line-height: 1; margin: 6px 0 4px; }
.cm-calc-umbral-caja .cu { font-size: 12px; color: var(--gris); font-family: 'Fraunces', serif; font-style: italic; }
.cm-calc-dictamen { margin-top: 24px; background: var(--negro); color: var(--crema); border-left: 6px solid var(--amarillo); padding: 20px 24px; }
.cm-calc-dictamen .cd-orden { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--amarillo); margin-bottom: 10px; text-transform: uppercase; }
.cm-calc-dictamen .cd-frase { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; line-height: 1.55; color: var(--crema-oscuro); }
.cm-calc-nota { margin-top: 18px; font-size: 13px; color: var(--gris); font-family: 'Fraunces', serif; font-style: italic; }
@media (max-width: 640px) {
  .cm-calc { padding: 20px 16px; }
  .cm-calc-umbral { grid-template-columns: 1fr; }
  .cm-calc-barra .bn { flex: 0 0 70px; font-size: 10px; }
  .cm-calc-barra .bc { flex: 0 0 110px; font-size: 12px; }
}

/* ============================================
   PÁGINAS GENÉRICAS
   ============================================ */
.cm-pagina { padding: 140px 20px 80px; max-width: 800px; margin: 0 auto; }
.cm-pagina-titulo { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 72px); line-height: 0.9; margin-bottom: 30px; border-bottom: 4px solid var(--negro); padding-bottom: 20px; }
.cm-pagina .cm-ficha-cuerpo h2 { margin-top: 36px; }

/* ============================================
   BÚSQUEDA Y 404
   ============================================ */
.cm-buscador { display: flex; gap: 0; max-width: 560px; margin: 26px 0; }
.cm-buscador input[type="search"] { flex: 1; padding: 14px 16px; border: 3px solid var(--negro); border-right: none; font-family: 'Fraunces', serif; font-size: 16px; background: #fff; border-radius: 0; -webkit-appearance: none; }
.cm-buscador input[type="search"]:focus { outline: none; border-color: var(--rojo); }
.cm-buscador button { padding: 14px 22px; background: var(--negro); color: var(--crema); border: 3px solid var(--negro); font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.15s; }
.cm-buscador button:hover { background: var(--rojo); border-color: var(--rojo); }
.cm-404 { padding: 160px 20px 100px; max-width: 800px; margin: 0 auto; text-align: left; }
.cm-404 .num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(100px, 18vw, 200px); line-height: 0.85; color: var(--rojo); }
.cm-404 h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 5vw, 54px); line-height: 0.95; margin: 10px 0 14px; }
.cm-404 p { font-style: italic; color: var(--gris); max-width: 54ch; }

/* ============================================
   PAGINACIÓN
   ============================================ */
.cm-paginacion { margin-top: 50px; display: flex; gap: 8px; flex-wrap: wrap; }
.cm-paginacion .page-numbers { font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 10px 16px; border: 2px solid var(--negro); color: var(--negro); text-decoration: none; transition: all 0.15s; }
.cm-paginacion .page-numbers.current, .cm-paginacion .page-numbers:hover { background: var(--negro); color: var(--amarillo); }

/* ============================================
   FOOTER
   ============================================ */
.cm-footer { background: var(--negro); color: var(--crema-oscuro); padding: 70px 32px 30px; text-align: center; border-top: 3px solid var(--rojo); }
.cm-footer-inner { max-width: 600px; margin: 0 auto; }
.cm-footer-titulo { font-family: 'Bebas Neue', sans-serif; font-size: 42px; color: var(--rojo); margin-bottom: 18px; line-height: 1; }
.cm-footer p { font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.cm-footer p strong { color: var(--amarillo); font-weight: 700; }
.cm-footer .small { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--gris); margin-top: 30px; letter-spacing: 0.1em; text-transform: uppercase; }
.cm-footer nav { margin-top: 22px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cm-footer nav a { color: var(--gris-claro); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }
.cm-footer nav a:hover { color: var(--amarillo); }

/* ============================================
   BOLA FLOTANTE DE WHATSAPP
   ============================================ */
.cm-wsp-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px;
  background: var(--verde-wsp); border: 3px solid var(--negro);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 4px 0 var(--negro);
  transition: transform 0.15s, box-shadow 0.15s;
}
.cm-wsp-flotante svg { width: 30px !important; height: 30px !important; fill: #fff; margin: 0 !important; vertical-align: middle !important; }
.cm-wsp-flotante:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--negro); }
@media (max-width: 720px) { .cm-wsp-flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ============================================
   ADMIN
   ============================================ */
.cm-admin-notice { padding: 12px; background: #fff8e5; border-left: 4px solid #ffb900; margin: 10px 0; }

/* ============================================
   RESPONSIVE GENERAL
   ============================================ */
@media (max-width: 720px) {
  .cm-section, .cm-section-full { padding: 60px 20px; }
  .cm-hero { padding: 110px 20px 50px; }
  .cm-archivo { padding: 120px 20px 60px; }
  .cm-ficha { padding: 110px 16px 50px; }
  .cm-cierre-portada { padding: 60px 20px; }
  .cm-bloque-veredicto, .cm-bloque-cochepro, .cm-bloque-ejes, .cm-bloque-caso { padding: 20px 18px; }
  .cm-cierre { padding: 22px 18px; }
}