/* ============================================================
   FRACTAL LEARNING · Estilos compartidos de los artículos
   Todos los artículos generados desde contenido/blog/ usan
   este archivo. Un cambio acá cambia el diseño de todo el blog.
============================================================ */
:root {
  --green-dark: #0E4D3F;
  --green-darker: #083229;
  --green-light: #A4D86E;
  --blue: #1E7BC8;
  --cream: #E6E2D6;
  --cream-soft: #f1eee4;
  --muted: #5a5a5a;
  --ease-out: cubic-bezier(0.23,1,0.32,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: 'Outfit', sans-serif; background: var(--cream-soft); color: #0a0a0a; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--green-dark); text-decoration: none; }

/* ===== NAVBAR ===== */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(241,238,228,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(14,77,63,0.1); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 6px 32px; max-width: 1280px; margin: 0 auto; gap: 24px; }
.nav-logo img { height: 90px; width: auto; }
.nav-menu { display: flex; gap: 32px; list-style: none; }
.nav-menu a { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green-dark); transition: color 0.2s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.whatsapp-btn { display: inline-flex; align-items: center; gap: 7px; background: #25D366; color: #fff; padding: 9px 18px; border-radius: 100px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.2s; }
.whatsapp-btn svg { width: 15px; height: 15px; fill: currentColor; }
.whatsapp-btn:hover { background: #1fba58; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 26px; color: var(--green-dark); z-index: 301; position: relative; }

.mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(8,50,41,0.97); backdrop-filter: blur(12px); z-index: 300; flex-direction: column; align-items: center; justify-content: center; animation: mobileMenuIn 0.3s var(--ease-out) forwards; }
.mobile-menu-overlay.open { display: flex; }
@keyframes mobileMenuIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.mobile-menu-overlay .mobile-nav-links { list-style: none; display: flex; flex-direction: column; align-items: center; width: 100%; }
.mobile-menu-overlay .mobile-nav-links a { display: block; font-family: 'Poppins', sans-serif; font-size: clamp(22px, 6vw, 32px); font-weight: 500; color: var(--cream); padding: 14px 32px; width: 100%; text-align: center; border-bottom: 1px solid rgba(164,216,110,0.08); transition: color 0.2s; }
.mobile-menu-overlay .mobile-nav-links li:first-child a { border-top: 1px solid rgba(164,216,110,0.08); }
.mobile-menu-overlay .mobile-nav-links a:hover { color: var(--green-light); }
.mobile-menu-close { position: absolute; top: 20px; right: 22px; background: none; border: none; font-size: 28px; color: rgba(230,226,214,0.7); cursor: pointer; padding: 8px; }
.mobile-menu-wa { margin-top: 32px; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 14px 28px; border-radius: 100px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }

/* ===== CABECERA DEL ARTÍCULO ===== */
.breadcrumb-bar { max-width: 780px; margin: 0 auto; padding: 20px 32px 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--green-dark); }
.breadcrumb span { opacity: 0.4; }

.article-page { max-width: 780px; margin: 0 auto; padding: 36px 32px 100px; }
.article-eyebrow { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700; color: var(--cat, var(--blue)); background: color-mix(in srgb, var(--cat, var(--blue)) 10%, transparent); padding: 6px 13px; border-radius: 100px; margin-bottom: 20px; }
.article-page h1 { font-family: 'Poppins', sans-serif; font-size: clamp(28px, 5vw, 46px); font-weight: 600; color: var(--green-dark); line-height: 1.18; margin-bottom: 18px; text-wrap: balance; }
.article-lead { font-size: 19px; line-height: 1.65; color: #3d3d3d; margin-bottom: 26px; }
.article-meta { display: flex; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--muted); margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid rgba(14,77,63,0.1); flex-wrap: wrap; }
.article-meta .dot { opacity: 0.35; }

.cover-img { width: 100%; border-radius: 16px; aspect-ratio: 16/9; object-fit: cover; object-position: center 35%; margin-bottom: 12px; background: var(--green-dark); }
.cover-credit { font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.6; margin-bottom: 12px; }

/* ===== ÍNDICE ===== */
.toc { margin: 32px 0 8px; padding: 22px 26px; background: #fff; border: 1px solid rgba(14,77,63,0.1); border-radius: 14px; }
.toc-titulo { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--green-dark); margin-bottom: 10px; }
.toc ol { padding-left: 20px; }
.toc li { font-size: 15px; line-height: 1.55; margin-bottom: 6px; color: var(--muted); }
.toc a { color: var(--green-dark); }
.toc a:hover { color: var(--blue); }

/* ===== CUERPO ===== */
.article-body { margin-top: 40px; }
.article-body h2 { font-family: 'Poppins', sans-serif; font-size: clamp(21px, 3vw, 28px); font-weight: 600; color: var(--green-dark); margin: 48px 0 16px; line-height: 1.3; }
.article-body h3 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: var(--green-dark); margin: 32px 0 12px; }
.article-body p { font-size: 17px; color: #3d3d3d; line-height: 1.8; margin-bottom: 20px; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 20px; }
.article-body li { font-size: 17px; color: #3d3d3d; line-height: 1.7; margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid var(--green-light); padding: 16px 24px; margin: 32px 0; background: rgba(164,216,110,0.08); border-radius: 0 12px 12px 0; font-family: 'Poppins', sans-serif; font-size: 18px; font-style: italic; color: var(--green-dark); line-height: 1.6; }
.article-body strong { font-weight: 600; color: var(--green-dark); }
.article-body a { color: var(--blue); font-weight: 600; border-bottom: 1px solid rgba(30,123,200,0.25); transition: border-color 0.2s; }
.article-body a:hover { border-color: var(--blue); }

.callout { background: var(--green-darker); border-radius: 16px; padding: 26px 30px; margin: 34px 0; }
.callout p { color: rgba(230,226,214,0.85) !important; margin-bottom: 10px !important; font-size: 16px !important; }
.callout p:last-child { margin-bottom: 0 !important; }
.callout strong { color: var(--green-light) !important; }
.callout a { color: var(--green-light) !important; border-color: rgba(164,216,110,0.4) !important; }

.data-card { border: 1px solid rgba(14,77,63,0.12); border-radius: 16px; padding: 26px; margin: 26px 0; background: #fff; }
.data-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.data-emoji { font-size: 30px; flex-shrink: 0; line-height: 1; }
.data-title { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--green-dark); }
.data-subtitle { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 2px; }
.data-card p, .data-card li { font-size: 15px !important; }
.data-card p:last-child, .data-card ul:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: 22px 0 28px; border-radius: 12px; border: 1px solid rgba(14,77,63,0.08); }
.sensory-table { width: 100%; border-collapse: collapse; min-width: 520px; background: #fff; }
.sensory-table th { background: var(--green-darker); color: var(--green-light); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; padding: 12px 16px; text-align: left; font-weight: 700; }
.sensory-table td { padding: 11px 16px; font-size: 14.5px; color: var(--muted); border-bottom: 1px solid rgba(14,77,63,0.06); vertical-align: top; line-height: 1.55; }
.sensory-table tr:last-child td { border-bottom: none; }
.sensory-table td strong { color: var(--green-dark); }

.figura { margin: 30px 0; }
.figura img { border-radius: 14px; width: 100%; }
.figura figcaption { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 8px; }

.boton-linea { margin: 26px 0; }
.article-body .btn-linea { display: inline-flex; align-items: center; gap: 8px; background: var(--green-dark); color: var(--cream); border: none; padding: 13px 24px; border-radius: 100px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; transition: background 0.2s; }
.article-body .btn-linea:hover { background: var(--green-darker); }

/* ===== TARJETAS DE TRES COLUMNAS (cosmovisión de Herber) ===== */
.cosmo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 30px; }
.cosmo-card { background: var(--green-darker); border-radius: 14px; padding: 22px 18px; text-align: center; }
.cosmo-icon { font-size: 28px; margin-bottom: 8px; }
.cosmo-name { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--green-light); margin-bottom: 4px; }
.cosmo-quechua { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(230,226,214,0.55); margin-bottom: 8px; }
.cosmo-desc { font-size: 13.5px; color: rgba(230,226,214,0.8); line-height: 1.6; }
@media (max-width: 640px) { .cosmo-grid { grid-template-columns: 1fr; } }

/* ===== VIDEO (se carga solo al tocar) ===== */
.video-embed { margin: 32px auto; max-width: 340px; }
.video-embed--ancho { max-width: 100%; }
.video-facade { position: relative; width: 100%; aspect-ratio: 9/16; border: none; border-radius: 18px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--cream); font-family: 'Outfit', sans-serif;
  background: radial-gradient(circle at 70% 25%, rgba(164,216,110,0.25), transparent 45%), linear-gradient(160deg, #0b0b0b 0%, var(--green-darker) 100%) center/cover; transition: transform 0.25s var(--ease-out); }
.video-embed--ancho .video-facade { aspect-ratio: 16/9; }
.video-facade:hover { transform: scale(1.01); }
.video-play { width: 72px; height: 72px; border-radius: 50%; background: var(--green-light); color: var(--green-darker); font-size: 26px; display: flex; align-items: center; justify-content: center; padding-left: 5px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.video-label { font-size: 16px; }
.video-label strong { color: var(--green-light); }
.video-nota { font-size: 12px; opacity: 0.6; }
.video-embed iframe { width: 100%; aspect-ratio: 9/16; border: 0; border-radius: 18px; display: block; background: #000; }
.video-embed--ancho iframe { aspect-ratio: 16/9; }
.video-embed figcaption { text-align: center; margin-top: 10px; font-size: 13px; }
.article-body .video-embed figcaption a { border: none; }

/* ===== TARJETAS DE CAFÉ ===== */
.cafe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 28px 0 32px; }
.cafe-card { display: flex; gap: 14px; background: #fff; border: 1px solid rgba(14,77,63,0.1); border-radius: 16px; padding: 12px; transition: box-shadow 0.25s, transform 0.25s var(--ease-out); }
.cafe-card:hover { box-shadow: 0 10px 28px rgba(14,77,63,0.1); transform: translateY(-2px); }
.cafe-card-img { flex: 0 0 84px; border: none !important; }
.cafe-card-img img { width: 84px; height: 105px; object-fit: cover; border-radius: 10px; background: var(--cream); }
.cafe-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cafe-card-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #7B5EA7; }
.article-body .cafe-card-name { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; color: var(--green-dark); border: none; line-height: 1.2; }
.cafe-card-origen { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cafe-card-notas { font-size: 12.5px; color: var(--green-dark); line-height: 1.35; }
.cafe-card-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.cafe-card-precio { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.article-body .cafe-card-receta { font-size: 12px; font-weight: 600; color: var(--blue); border: none; }
.cafe-card.is-agotado .cafe-card-img img { filter: grayscale(0.7); opacity: 0.75; }
.cafe-card.is-agotado .cafe-card-precio { color: var(--muted); font-weight: 600; }

/* ===== FUENTES ===== */
.fuentes { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(14,77,63,0.1); }
.article-body .fuentes h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 12px; }
.fuentes li, .fuentes p { font-size: 14px !important; line-height: 1.6 !important; }

/* ===== SERIE ===== */
.serie-box { margin: 44px 0 0; padding: 22px 26px; border-radius: 14px; background: var(--cream); }
.serie-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--green-dark); margin-bottom: 10px; }
.serie-box ul { list-style: none; }
.serie-box li { padding: 6px 0; font-size: 15px; border-top: 1px solid rgba(14,77,63,0.08); }
.serie-box li:first-child { border-top: none; }
.serie-box li a { font-weight: 600; }
.serie-box li span { color: var(--muted); font-size: 13px; margin-left: 6px; }

/* ===== FAQ ===== */
.faq-section { margin: 56px 0 0; }
.faq-section h2 { font-family: 'Poppins', sans-serif; font-size: clamp(20px,3vw,26px); font-weight: 600; color: var(--green-dark); margin-bottom: 20px; }
.faq-item { border: 1px solid rgba(14,77,63,0.1); border-radius: 12px; margin-bottom: 12px; background: #fff; }
.faq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-family: 'Poppins', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--green-dark); }
.faq-q::-webkit-details-marker { display: none; }
.faq-icon { font-size: 22px; flex-shrink: 0; color: var(--green-light); transition: transform 0.3s var(--ease-out); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a-inner { padding: 0 20px 18px; font-size: 15.5px; color: var(--muted); line-height: 1.75; }

/* ===== CTA NEWSLETTER ===== */
.article-cta { background: linear-gradient(135deg, var(--green-darker) 0%, #0a3d2f 100%); border-radius: 20px; padding: 40px 36px; margin: 56px 0 0; text-align: center; }
.article-cta h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: var(--cream); margin-bottom: 10px; text-wrap: balance; }
.article-cta p { font-size: 15px; color: rgba(230,226,214,0.7); margin-bottom: 24px; line-height: 1.7; }
.nl-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; background: var(--cream); padding: 6px; border-radius: 100px; }
.nl-form input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 16px; font-family: 'Outfit', sans-serif; font-size: 15px; color: var(--green-dark); outline: none; }
.nl-form button { background: var(--green-dark); color: var(--cream); border: none; padding: 12px 22px; border-radius: 100px; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; }
.nl-form button:disabled { opacity: 0.6; cursor: wait; }
.nl-ok { color: var(--green-light); font-weight: 600; font-size: 15px; padding: 12px; }
.btn-secundario { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--green-light); }

/* ===== SIGUE LEYENDO ===== */
.rel-section { margin-top: 64px; }
.rel-section h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: var(--green-dark); margin-bottom: 20px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card { display: flex; flex-direction: column; gap: 6px; }
.rel-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; background: var(--cream); margin-bottom: 6px; transition: transform 0.3s var(--ease-out); }
.rel-card:hover img { transform: translateY(-3px); }
.rel-texto { display: flex; flex-direction: column; gap: 6px; }
.rel-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; }
.rel-titulo { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--green-dark); line-height: 1.35; }
.rel-card:hover .rel-titulo { color: var(--blue); }

footer { background: var(--green-darker); color: var(--cream); padding: 40px 24px; text-align: center; }
footer p { font-size: 13px; color: rgba(230,226,214,0.55); line-height: 2; }
footer a { color: rgba(230,226,214,0.6); }
footer a:hover { color: var(--green-light); }

@media (max-width: 900px) { .nav-menu { display: none; } .nav-toggle { display: block; } .nav-logo img { height: 68px; } }
@media (max-width: 640px) {
  .nav-inner { padding: 8px 16px; }
  .whatsapp-btn { padding: 8px 12px; font-size: 11px; }
  .breadcrumb-bar { padding: 16px 16px 0; }
  .article-page { padding: 26px 16px 72px; }
  .article-lead { font-size: 17px; }
  .article-body p, .article-body li { font-size: 16px; }
  .callout { padding: 22px 20px; }
  .article-cta { padding: 32px 18px; }
  .nl-form { flex-direction: column; border-radius: 16px; }
  .nl-form button { padding: 13px; }
  .data-card { padding: 20px; }
  .rel-grid { grid-template-columns: 1fr; }
  .rel-card { flex-direction: row; align-items: center; gap: 14px; }
  .rel-card img { width: 112px; flex: 0 0 112px; margin: 0; }
}