/* Estilo de marca compartido para las páginas generadas en el servidor
   (blog, guías, mayoreo, categorías, catálogo, ficha SEO, 404) y las
   estáticas (blog.html, guias.html, politicas.html). Se carga DESPUÉS del
   <style> propio de cada página, así que a igual especificidad gana. Mismo
   lenguaje que la tienda (Manual de Marca jul 2026): fondo crema, titulares
   Poppins 800 apretados en azul oscuro, subrayado rosado hecho a mano,
   tarjetas blancas con sombra rosada desplazada y WhatsApp verde sólido. */
:root {
  --cream: #fffcf5;
  --paper: #fffcf5;
  --navy: #1a2e74;
  --pink: #ef96d1;
  --pink-soft: #fde8f7;
  --yellow: #fff3b0;
  --yellow-soft: #fff7d1;
  --turq-ink: #1f6f8f;
  --texto: #3a4166;
}

body { background: var(--paper); color: var(--texto); }

/* Barra superior */
.topbar { background: var(--navy); padding: 14px 20px; }
.topbar a { color: #fff; font-weight: 800; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.topbar a::after {
  content: '';
  width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='none' stroke='%23fff3b0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 4C21 14 26 19 36 20 26 21 21 26 20 36 19 26 14 21 4 20 14 19 19 14 20 4Z'/%3E%3C/svg%3E");
}

/* Migas */
.crumbs { color: #5a6180; }
.crumbs a { color: var(--turq-ink); font-weight: 600; }

/* Titulares */
h1 {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
h1::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: min(160px, 45%);
  height: 12px;
  background: no-repeat left center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23ef96d1' stroke-width='5' stroke-linecap='round' d='M4 14C50 7 120 5 216 8'/%3E%3Cpath fill='none' stroke='%23ef96d1' stroke-width='3' stroke-linecap='round' opacity='.7' d='M28 19C80 13 140 12 198 14'/%3E%3C/svg%3E");
}
h2 { color: var(--navy); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
h3 { color: var(--navy); font-weight: 800; letter-spacing: -0.015em; }

.lede { color: var(--texto); }
p { color: var(--texto); }

/* Enlaces dentro del texto: el rosado sobre crema no llega a contraste AA */
.wrap p a:not(.wa):not(.cta-cat),
.wrap li a:not(.wa):not(.cta-cat) { color: var(--turq-ink); text-decoration-color: var(--pink); text-underline-offset: 3px; }

/* Tarjetas: blancas, borde azul suave, sombra rosada desplazada al pasar */
.post-card, .guide-card, .rel-card, .ex-card, .faq-item,
ul.tipos li, .materials, .toc, .sede, .compare-table {
  background: #fff;
  border: 1.5px solid rgba(26, 46, 116, 0.1);
  border-radius: 18px;
}
.post-card, .guide-card, .rel-card, .ex-card {
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease;
}
.post-card:hover, .guide-card:hover, .rel-card:hover, .ex-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pink);
  border-color: rgba(26, 46, 116, 0.18);
}
.post-thumb, .guide-thumb, .rel-card img, .ex-card img { border-radius: 14px; }
.post-arrow, .guide-arrow { color: var(--pink); }

/* Consejos y cajas destacadas: amarillo pastel */
.tip { background: var(--yellow-soft); border: 1.5px solid rgba(26, 46, 116, 0.08); border-radius: 16px; color: var(--texto); }
.tip b, .tip strong { color: var(--navy); }
.usos div { background: var(--pink-soft); border: 1.5px solid rgba(239, 150, 209, 0.35); border-radius: 14px; }
.usos b { color: var(--navy); }

/* Precios */
.ex-price, .pprice, .rel-price { color: var(--navy); font-weight: 800; }

/* Tablas */
th { color: var(--navy); }
tbody tr:hover { background: var(--yellow-soft); }

/* Preguntas frecuentes */
.faq-item summary, .faq-item h3 { color: var(--navy); font-weight: 800; }

/* Botón de WhatsApp: verde sólido legible (antes #25D366 con texto blanco,
   ~2:1 de contraste) y píldora con sombra desplazada, como en la tienda */
.wa {
  background: #1d7d45;
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--pink);
  font-weight: 800;
  min-height: 48px;
}
.wa:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--pink); }
.wa:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pink); }

/* "Ver todas las … →" */
.cta-cat { color: var(--navy); font-weight: 800; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-cat:hover { color: var(--turq-ink); }

/* Chips y etiquetas */
.back { color: var(--navy); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .post-card, .guide-card, .rel-card, .ex-card, .wa { transition: none; }
}

/* Texto rosado de las reglas propias de cada página (ej. .crumbs a,
   .rel-price, etiquetas): pasa a azul/turquesa para llegar a contraste AA */
.crumbs a, .rel-price, .ex-price, .pprice { color: var(--navy); }

/* ============ Barra superior con logo y secciones (2026-09-24) ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; }
.topbar .tb-marca { font-size: 16px; }
.topbar .tb-marca img { width: 40px; height: 40px; display: block; }
.topbar .tb-nav { display: flex; align-items: center; gap: 4px; }
.topbar .tb-nav a { font-weight: 700; font-size: 14px; padding: 0 12px; }
.topbar .tb-nav a::after { content: none; }
.topbar .tb-nav a:hover { color: #fff3b0; }
.topbar .tb-nav .tb-tienda {
  background: #fff3b0; color: #1a2e74; border-radius: 999px; padding: 0 18px; margin-left: 8px;
  box-shadow: 3px 3px 0 #ef96d1; min-height: 40px;
}
.topbar .tb-nav .tb-tienda:hover { color: #1a2e74; }
@media (max-width: 760px) {
  .topbar .tb-nav a:not(.tb-tienda) { display: none; }
  .topbar .tb-nav .tb-tienda { font-size: 0; padding: 0 14px; margin-left: 0; }
  .topbar .tb-nav .tb-tienda::before { content: 'Tienda'; font-size: 13px; }
  .topbar .tb-marca::after { display: none; }
}

/* Las fotos traen width/height="300" en el HTML: sin height:auto, el alto
   fijo anulaba el aspect-ratio 1 y cada tarjeta medía el doble de alto */
.grid img { height: auto; }

/* Fichas no encontradas con fondo azul (producto): el h1 y el texto
   heredaban el azul oscuro de esta hoja y no se leían */
body[style*="#1a2e74"] h1, body[style*="#1a2e74"] p { color: #fff; }
body[style*="#1a2e74"] h1::after { display: none; }