/* ============================================================================
   BLOG — VendoFull
   ============================================================================

   Hoja propia y autosuficiente, a propósito.

   El blog son archivos .html sueltos en public/, servidos tal cual por el
   hosting: no pasan por webpack ni por React. Por eso no puede importar
   src/index.css ni landing.css —esos salen del build con el nombre hasheado— y
   los tokens se redeclaran acá. La duplicación es el precio de que estas
   páginas no dependan de un build: un post es HTML y CSS, y se sirve solo.

   Las tipografías sí se comparten: /styles.css ya declara los @font-face de
   marca y también se sirve como archivo suelto, así que cada post lo enlaza
   antes que a esta hoja.

   Valores tomados de src/index.css (--brand-*) y del bloque
   :root[data-theme] .landing-page. Si cambia la paleta de marca, cambia en los
   dos lados. Ver docs/GUIA_COLOR_Y_TIPOGRAFIA.md.
   ========================================================================== */

:root {
  --verde: #06613d;
  --verde-oscuro: #283d34;
  --naranja: #ec7204;
  /* Sobre crema el naranja de marca da 2,83:1 y no llega al umbral ni para
     texto grande. Este es el que se usa cuando el naranja lleva texto. */
  --naranja-profundo: #a94f02;
  --celeste: #eaf6fb;
  --crema: #f8f9e8;

  --texto: #22332c;
  --texto-cuerpo: #33473e;
  --texto-suave: #5f736b;
  --borde: rgba(40, 61, 52, 0.14);
  --borde-tenue: rgba(40, 61, 52, 0.08);

  --ancho: 1120px;
  /* 68 caracteres por línea aproximadamente. Un artículo de 1.800 palabras a
     todo el ancho no se lee: se abandona. */
  --ancho-lectura: 720px;
  --radio: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto-cuerpo);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.lectura { max-width: var(--ancho-lectura); margin: 0 auto; }

/* --- Barra superior ------------------------------------------------------ */

.barra {
  border-bottom: 1px solid var(--borde-tenue);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra .contenedor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 68px;
}
.barra img { height: 30px; width: auto; display: block; }
.barra nav { display: flex; align-items: center; gap: 22px; }
.barra nav a { color: var(--texto); text-decoration: none; font-size: 15px; font-weight: 500; }
.barra nav a:hover { color: var(--verde); }

.boton {
  display: inline-block;
  background: var(--verde); color: #fff;
  padding: 11px 20px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background 0.15s ease;
}
.boton:hover { background: #054e31; }
.boton--grande { padding: 15px 28px; font-size: 17px; }

/* --- Cabecera del artículo ----------------------------------------------- */

.cabecera { padding: 56px 0 40px; }
.miga { font-size: 14px; color: var(--texto-suave); margin-bottom: 20px; }
.miga a { color: var(--texto-suave); text-decoration: none; }
.miga a:hover { color: var(--verde); text-decoration: underline; }

/* Inter y no la decorativa de marca: el brandbook reserva Momo Trust Display
   para titulares cortos (pág. 8), y el título de un artículo de SEO lleva la
   consulta entera, que son quince palabras. */
h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--verde-oscuro);
  margin: 0 0 20px;
  font-weight: 700;
}
.bajada { font-size: 21px; line-height: 1.55; color: var(--texto-suave); margin: 0 0 28px; }
.firma { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-suave); }
.firma time { white-space: nowrap; }

/* --- Cuerpo --------------------------------------------------------------- */

article { padding-bottom: 64px; }
article h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.25; color: var(--verde-oscuro);
  margin: 56px 0 16px; font-weight: 700; letter-spacing: -0.01em;
}
article h3 {
  font-size: 1.25rem; line-height: 1.35; color: var(--verde-oscuro);
  margin: 36px 0 12px; font-weight: 650;
}
article p { margin: 0 0 20px; }
article a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
article ul, article ol { margin: 0 0 20px; padding-left: 24px; }
article li { margin-bottom: 10px; }
article strong { color: var(--texto); font-weight: 650; }

.destacado { color: var(--naranja-profundo); font-weight: 650; }

.nota {
  background: var(--celeste);
  border-radius: var(--radio);
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 17px;
}
.nota p:last-child { margin-bottom: 0; }

/* Las tablas comparativas son la mitad del valor de un post de este tipo, y en
   teléfono son lo primero que se rompe: por eso scrollean dentro de su caja en
   vez de estirar la página. */
.tabla-caja { overflow-x: auto; margin: 32px 0; border-radius: var(--radio); border: 1px solid var(--borde); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--borde-tenue); vertical-align: top; }
th { background: var(--celeste); color: var(--verde-oscuro); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* --- Preguntas frecuentes ------------------------------------------------- */

.faq { margin: 40px 0; }
.faq details {
  background: #fff; border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px 22px; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; font-weight: 650; color: var(--verde-oscuro);
  font-size: 17px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--naranja-profundo); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 14px 0 0; }

/* --- Llamado a la acción -------------------------------------------------- */

.cta {
  background: var(--verde); color: #fff;
  border-radius: var(--radio); padding: 44px 36px;
  margin: 56px 0; text-align: center;
}
.cta h2 { color: #fff; margin: 0 0 12px; font-size: 1.6rem; }
.cta p { color: rgba(255, 255, 255, 0.85); margin: 0 0 24px; }
.cta .boton { background: var(--naranja); }
.cta .boton:hover { background: #d36503; }
.cta small { display: block; margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* --- Índice del blog ------------------------------------------------------ */

.masthead { padding: 64px 0 8px; }
.masthead h1 { margin-bottom: 12px; }
.masthead p { font-size: 20px; color: var(--texto-suave); max-width: 640px; }

.lista { display: grid; gap: 20px; padding: 32px 0 72px; }
.tarjeta {
  display: block; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 28px 30px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tarjeta:hover { border-color: var(--verde); transform: translateY(-2px); }
.tarjeta h2 { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.3; color: var(--verde-oscuro); }
.tarjeta p { margin: 0 0 14px; color: var(--texto-suave); }
.tarjeta .meta { font-size: 14px; color: var(--texto-suave); }

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--verde-oscuro); color: rgba(255, 255, 255, 0.75); padding: 48px 0; font-size: 15px; }
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie nav { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .barra nav a:not(.boton) { display: none; }
  .cabecera { padding: 36px 0 28px; }
  .cta { padding: 32px 22px; }
}

/* --- Autoría ---------------------------------------------------------------
   Google pondera la autoría verificable en temas donde hay plata de por medio,
   y este blog habla de reputación y de ventas. Por eso el autor aparece dos
   veces: la firma corta arriba, para que se vea antes de leer, y la ficha
   completa al final, que es donde el lector que llegó hasta ahí quiere saber
   quién le habló. Las dos apuntan al mismo Person del JSON-LD.

   La foto va con width y height en el HTML además de en el CSS: sin esas
   medidas el navegador no reserva el espacio y la línea salta cuando la imagen
   entra, que es exactamente el desplazamiento que penaliza Core Web Vitals. */

.firma-foto {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borde);
  flex-shrink: 0;
}

.autor {
  display: flex; gap: 20px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px 28px;
  margin: 56px 0 0;
}
.autor img {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--borde);
  flex-shrink: 0;
}
.autor-datos { min-width: 0; }
.autor-nombre { font-size: 1.15rem; font-weight: 650; color: var(--verde-oscuro); margin: 0 0 2px; }
.autor-cargo { font-size: 15px; color: var(--texto-suave); margin: 0 0 12px; }
.autor p { font-size: 16px; margin: 0 0 12px; }
.autor a { color: var(--verde); font-weight: 600; font-size: 15px; text-decoration: none; }
.autor a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .autor { flex-direction: column; gap: 16px; padding: 22px; }
  .autor img { width: 64px; height: 64px; }
}