/* ============================================================================
   AI Academia Redesign — Opción B "Fintech Moderno"  ·  v0.4.0 (Fase 1 + fixes)
   Vista de ARTÍCULO. Todo bajo `.ai-rd` (inerte hasta activar el preview).
   ============================================================================ */

.ai-rd {
	--c-primary:#0c3d6b; --c-accent:#2f7fd6; --c-amber:#f6a821; --c-amber-tx:#b9740a;
	--c-sec-bg:#f2f7fd; --c-chip-bg:#e7f0fb; --c-chip-neu:#f1f3f2;
	--c-ink:#0f1c17; --c-body:#3a463f; --c-muted:#6b7280;
	--c-border:#e6e9e7; --c-border-2:#eef1ef; --c-border-bl:#d3e3f5;
	--f-title:"Space Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
	--f-body:"Public Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
	--radius:14px; --maxw:900px;
}

/* ---- Ancho de lectura: columna única (mata el flex + sidebar) ---- */
.ai-rd .site-main #content-wrapper { display:block !important; max-width:var(--maxw); margin-inline:auto; }
.ai-rd .site-main #content-wrapper > aside,
.ai-rd .site-main > aside,
.ai-rd .site-main .sidebar { display:none !important; }
.ai-rd .site-main .entry-content { width:100% !important; max-width:100% !important; flex:none !important; float:none !important; }
.ai-rd header.default-header .container { max-width:var(--maxw); margin-inline:auto; }
/* El tema fija .container a width:48rem (768px). En el artículo NO le entra el override
   responsive del tema, así que en móvil el container queda clavado en 768 y desborda el
   viewport (efecto "zoom"). Lo hacemos fluido: 100% hasta --maxw (900px, ancho de lectura
   del rediseño). En móvil 100% => cabe; en escritorio llega a 900 (no 768). */
.ai-rd .site-main .container { width:100% !important; max-width:var(--maxw) !important; }
.ai-rd .entry-content { font-family:var(--f-body); font-size:17px; line-height:1.72; color:var(--c-body); }

/* ---- Encabezado ---- */
.ai-rd header.default-header { padding-block:8px 4px; }
.ai-rd header.default-header .category { margin-bottom:14px; }
.ai-rd header.default-header .category a {
	display:inline-block; background:var(--c-chip-bg); color:var(--c-primary);
	font:600 12px/1 var(--f-title); letter-spacing:.04em; text-transform:uppercase;
	padding:7px 13px; border-radius:20px; text-decoration:none;
}
.ai-rd header.default-header .category a:hover { background:#d9e8fa; }
.ai-rd h1.title {
	font-family:var(--f-title); font-weight:700; font-size:clamp(28px,4.4vw,38px);
	line-height:1.14; letter-spacing:-.02em; color:var(--c-ink); margin:0 0 18px;
}
.ai-rd .meta { border-bottom:1px solid var(--c-border-2); padding-bottom:18px; margin-bottom:8px; }
.ai-rd .meta .byline { display:inline-flex; align-items:center; gap:12px; font:500 14px/1.3 var(--f-body); color:var(--c-muted); }
.ai-rd .meta .byline::before {
	content:"PP"; display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:14px; background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
	color:#fff; font:700 15px/1 var(--f-title); letter-spacing:.02em; flex:0 0 auto;
}
.ai-rd .meta .byline .author { color:var(--c-ink); font-weight:700; }
.ai-rd .meta .byline::after { content:"Asesor certificado AMIB"; color:var(--c-accent); font-weight:600; }

/* ---- Imagen hero + figuras + SVG ---- */
.ai-rd .entry-content .post-thumbnail { margin:22px 0 8px; }
.ai-rd .entry-content .post-thumbnail img,
.ai-rd .entry-content figure.wp-block-image img { width:100%; height:auto; border-radius:var(--radius); display:block; }
.ai-rd .entry-content figure.wp-block-image { margin:1.4em 0; }
.ai-rd .entry-content figcaption, .ai-rd .entry-content .wp-element-caption { font:400 12.5px/1.5 var(--f-body); color:var(--c-muted); text-align:left; margin-top:8px; }
/* SVG (gráficas): que ocupen el ancho del body */
.ai-rd .entry-content svg { max-width:100%; height:auto; }
.ai-rd .entry-content figure svg, .ai-rd .entry-content p > svg { width:100%; height:auto; display:block; margin-inline:auto; }

/* ---- Tipografía ---- */
.ai-rd .entry-content p { margin:0 0 1.15em; }
.ai-rd .entry-content h2, .ai-rd .entry-content h2.wp-block-heading {
	font-family:var(--f-title); font-weight:700; font-size:26px; line-height:1.2; letter-spacing:-.01em;
	color:var(--c-ink); margin:1.9em 0 .55em; scroll-margin-top:24px;
}
.ai-rd .entry-content h3, .ai-rd .entry-content h3.wp-block-heading {
	font-family:var(--f-title); font-weight:700; font-size:21px; line-height:1.25; color:var(--c-ink); margin:1.5em 0 .5em;
}
.ai-rd .entry-content a { color:var(--c-accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.ai-rd .entry-content a:hover { color:var(--c-primary); }
.ai-rd .entry-content strong { color:var(--c-ink); font-weight:700; }
.ai-rd .entry-content ul, .ai-rd .entry-content ol { margin:0 0 1.2em; padding-left:1.3em; }
.ai-rd .entry-content li { margin:0 0 .5em; }
.ai-rd .entry-content ul li::marker { color:var(--c-accent); }

/* ---- Caja "Lo esencial" (viene como wp:quote / blockquote) ---- */
.ai-rd .entry-content .wp-block-quote, .ai-rd .entry-content blockquote {
	background:var(--c-sec-bg); border:1px solid var(--c-border-bl); border-radius:var(--radius);
	padding:22px 26px; margin:1.6em 0; color:var(--c-ink); font-style:normal;
}
.ai-rd .entry-content .wp-block-quote .banner { display:none !important; } /* placeholders vacíos */
.ai-rd .entry-content .wp-block-quote > p:first-child strong,
.ai-rd .entry-content blockquote > p:first-child strong {
	font-family:var(--f-title); color:var(--c-primary); font-size:17px; display:inline-block; margin-bottom:6px;
}
.ai-rd .entry-content .wp-block-quote ul, .ai-rd .entry-content blockquote ul { list-style:none; padding-left:0; margin:10px 0 0; }
.ai-rd .entry-content .wp-block-quote ul li, .ai-rd .entry-content blockquote ul li { position:relative; padding-left:26px; }
.ai-rd .entry-content .wp-block-quote ul li::before, .ai-rd .entry-content blockquote ul li::before {
	content:"\2192"; position:absolute; left:0; top:0; color:var(--c-accent); font-weight:700;
}
.ai-rd .entry-content .wp-block-quote ul li::marker, .ai-rd .entry-content blockquote ul li::marker { content:none; }

/* ---- Tablas comparativas (match mockup) ---- */
.ai-rd .entry-content .wp-block-table, .ai-rd .entry-content figure.wp-block-table { margin:1.5em 0; overflow-x:auto; }
.ai-rd .entry-content table {
	width:100%; border-collapse:separate; border-spacing:0; font-family:var(--f-body); font-size:15.5px;
	border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden;
}
.ai-rd .entry-content thead th {
	background:var(--c-sec-bg); color:var(--c-primary); font-family:var(--f-title); font-weight:700;
	text-align:left; padding:14px 16px; font-size:14px; border-bottom:1px solid var(--c-border-bl);
}
.ai-rd .entry-content tbody td { padding:13px 16px; border-top:1px solid var(--c-border-2); vertical-align:top; }
.ai-rd .entry-content tbody tr:first-child td { border-top:none; }
.ai-rd .entry-content tbody td:first-child { font-weight:600; color:var(--c-ink); }

/* ---- Botones pill ---- */
.ai-rd .entry-content .wp-block-button__link, .ai-rd .entry-content .wp-block-button a {
	background:var(--c-accent); color:#fff; font-family:var(--f-title); font-weight:700;
	border-radius:24px; padding:13px 26px; text-decoration:none; display:inline-block; transition:background .15s,transform .15s;
}
.ai-rd .entry-content .wp-block-button__link:hover { background:var(--c-primary); transform:translateY(-1px); }

/* ---- hr / código ---- */
.ai-rd .entry-content hr, .ai-rd .entry-content .wp-block-separator { border:0; border-top:1px solid var(--c-border-2); margin:2em 0; }
.ai-rd .entry-content code { background:var(--c-chip-neu); padding:2px 6px; border-radius:6px; font-size:.9em; }

/* ---- Ocultar en artículos lo que NO va en el mockup (relacionados / widgets) ----
   (se ocultan solo en la vista con rediseño; siguen en el DOM/DB) */
.ai-rd .site-main .related-posts,
.ai-rd .site-main .related,
.ai-rd .site-main .post-related,
.ai-rd body.single .site-main > .container > .entry-item,
.ai-rd .site-main aside { display:none !important; }

/* ---- Responsive ---- */
@media (max-width:940px){
	.ai-rd header.default-header .container, .ai-rd .site-main #content-wrapper { padding-inline:18px; }
	.ai-rd h1.title { font-size:29px; }
	.ai-rd .entry-content { font-size:16.5px; }
}

/* ============================ v0.5.0 fixes (feedback Pablo) ============================ */

/* "Lo esencial" (formato wp:quote): agregar ícono cuadro azul + check por CSS */
.ai-rd .entry-content .wp-block-quote > p:first-child { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.ai-rd .entry-content .wp-block-quote > p:first-child::before {
	content:"\2713"; flex:0 0 auto; width:26px; height:26px; border-radius:8px;
	background:var(--c-accent); color:#fff; font:700 15px/26px var(--f-title); text-align:center;
}

/* Tablas: forzar estilo suave (matar bordes pesados de tablas custom/wp:html) */
.ai-rd .entry-content table { border:1px solid var(--c-border) !important; }
.ai-rd .entry-content table td, .ai-rd .entry-content table th { border-left:0 !important; border-right:0 !important; border-bottom:0 !important; border-top:1px solid var(--c-border-2) !important; }
.ai-rd .entry-content thead th { border-top:0 !important; border-bottom:1px solid var(--c-border-bl) !important; }

/* SVG / gráficas: llenar el ancho del body (override del max-width inline del <figure>) */
.ai-rd .entry-content figure[style*="max-width"] { max-width:100% !important; width:100%; }
.ai-rd .entry-content figure svg { width:100% !important; height:auto !important; }
.ai-rd .entry-content svg { max-width:100%; }

/* Ocultar "Entradas relacionadas" del tema (no va en el mockup del artículo) */
.ai-rd .site-main .entry-related, .ai-rd .entry-footer .entry-related { display:none !important; }

/* ============================ Fase 2: TOC + FAQ acordeón ============================ */

/* Tabla de contenidos */
.ai-rd html, .ai-rd body { scroll-behavior:smooth; }
.ai-rd .entry-content .ai-toc { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:18px 20px; margin:1.8em 0; }
.ai-rd .ai-toc-title { font:700 12px/1 var(--f-title); text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); margin-bottom:12px; }
.ai-rd .ai-toc-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ai-rd .ai-toc-chip { background:var(--c-chip-neu); color:var(--c-ink); font:600 13.5px/1 var(--f-body); padding:9px 15px; border-radius:20px; text-decoration:none; transition:background .15s,color .15s; }
.ai-rd .ai-toc-chip:hover { background:var(--c-chip-bg); color:var(--c-primary); }

/* FAQ acordeón */
.ai-rd .entry-content .ai-faq-item { border:1px solid var(--c-border); border-radius:12px; margin:0 0 10px; overflow:hidden; background:#fff; }
.ai-rd .entry-content .ai-faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:14px; font:600 16px/1.4 var(--f-title); color:var(--c-ink); }
.ai-rd .entry-content .ai-faq-q:hover { color:var(--c-primary); }
.ai-rd .ai-faq-ic { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--c-chip-bg); color:var(--c-primary); font:700 18px/26px var(--f-title); text-align:center; }
.ai-rd .ai-faq-ic::before { content:"+"; }
.ai-rd .ai-faq-item.open .ai-faq-ic::before { content:"\2212"; }
.ai-rd .entry-content .ai-faq-a { display:none; padding:0 18px 16px; font:400 15.5px/1.7 var(--f-body); color:var(--c-body); }
.ai-rd .entry-content .ai-faq-item.open .ai-faq-a { display:block; }
.ai-rd .entry-content .ai-faq-a p:last-child { margin-bottom:0; }

/* ---- TOC lista vertical numerada (mejor para etiquetas largas) ---- */
.ai-rd .entry-content .ai-toc-chips { display:none; } /* variante chips desactivada */
.ai-rd .entry-content .ai-toc-list { margin:0; padding:0; list-style:none; counter-reset:aitoc; }
.ai-rd .entry-content .ai-toc-list li { counter-increment:aitoc; margin:0; border-top:1px solid var(--c-border-2); }
.ai-rd .entry-content .ai-toc-list li:first-child { border-top:0; }
.ai-rd .entry-content .ai-toc-link { display:flex; gap:12px; align-items:baseline; padding:11px 2px; color:var(--c-ink); text-decoration:none; font:500 15px/1.45 var(--f-body); }
.ai-rd .entry-content .ai-toc-link::before { content:counter(aitoc); flex:0 0 auto; min-width:22px; height:22px; line-height:22px; text-align:center; background:var(--c-chip-bg); color:var(--c-accent); border-radius:7px; font:700 12px/22px var(--f-title); }
.ai-rd .entry-content .ai-toc-link:hover { color:var(--c-accent); }
.ai-rd .entry-content .ai-toc-link:hover::before { background:var(--c-accent); color:#fff; }

/* ============================ v0.8.0: Lo esencial unificado + relacionadas ============================ */

/* neutralizar el ícono ::before viejo (ahora lo pone el JS uniforme) */
.ai-rd .entry-content .wp-block-quote > p:first-child::before { content:none !important; }

/* caja "Lo esencial" unificada (cualquier formato: wp:quote o div inline) */
.ai-rd .entry-content .ai-esencial {
	background:var(--c-sec-bg) !important; border:1px solid var(--c-border-bl) !important;
	border-radius:14px !important; padding:22px 26px !important; margin:1.6em 0 !important; color:var(--c-ink) !important;
}
.ai-rd .entry-content .ai-esencial-t {
	display:flex !important; align-items:center; gap:10px; font-family:var(--f-title);
	color:var(--c-primary) !important; font-size:17px !important; font-weight:700; margin:0 0 12px !important;
}
.ai-rd .entry-content .ai-esencial-ic {
	flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--c-accent);
	color:#fff; font:700 15px/26px var(--f-title); text-align:center;
}
.ai-rd .entry-content .ai-esencial ul { list-style:none !important; padding-left:0 !important; margin:10px 0 0 !important; }
.ai-rd .entry-content .ai-esencial ul li { position:relative; padding-left:26px; margin-bottom:.55em; }
.ai-rd .entry-content .ai-esencial ul li::before { content:"\2192"; position:absolute; left:0; top:0; color:var(--c-accent); font-weight:700; }
.ai-rd .entry-content .ai-esencial ul li::marker { content:none; }

/* Re-mostrar y restilar "Entradas relacionadas" (Opción B) */
.ai-rd .site-main .entry-related { display:block !important; border-top:1px solid var(--c-border-2); padding-top:1.6em; margin-top:2.2em; }
.ai-rd .site-main .entry-related > h2, .ai-rd .site-main .entry-related .related-title, .ai-rd .site-main .entry-related h3.section-title {
	font-family:var(--f-title); font-weight:700; font-size:22px; color:var(--c-ink); margin:0 0 1em;
}
.ai-rd .site-main .entry-related .entry-item img, .ai-rd .site-main .entry-related .wp-post-image { border-radius:12px; }
.ai-rd .site-main .entry-related .entry-title { font-family:var(--f-title); font-size:15.5px; line-height:1.35; color:var(--c-ink); }
.ai-rd .site-main .entry-related a { text-decoration:none; }
.ai-rd .site-main .entry-related a:hover .entry-title { color:var(--c-accent); }

/* ============================ v0.9.0: tarjetas .entry-item (relacionadas + categorías) ============================ */
/* bordes redondeados en TODAS las tarjetas de tarjeta (relacionadas + cluster de categorías) */
.ai-rd .site-main .entry-item img,
.ai-rd .site-main .entry-item .wp-post-image { border-radius:12px !important; display:block; width:100%; height:auto; }
.ai-rd .site-main .entry-item .entry-title { font-family:var(--f-title); font-weight:700; font-size:15.5px; line-height:1.35; color:var(--c-ink); margin:.6em 0 0; }
.ai-rd .site-main .entry-item a { text-decoration:none; }
.ai-rd .site-main .entry-item a:hover .entry-title { color:var(--c-accent); }
/* ocultar la línea de autor redundante en las tarjetas */
.ai-rd .site-main .entry-item .entry-meta { display:none; }
/* 3 columnas responsive para TODOS los grids .columns-3 del artículo:
   el grid de categorías (dentro de .entry-content) Y el de "entradas relacionadas"
   (que va FUERA de .entry-content, como hermano en .container) -> por eso el scope
   es .site-main, no .entry-content. min-width:0 deja que las cards encojan por debajo
   del ancho natural de su imagen; sin él, en móvil cada card conserva ~764px y estira
   el <body> más allá del viewport (efecto "zoom" que había que hacer zoom-out). */
.ai-rd .site-main .flex.flex-fluid.columns-3 { display:flex; flex-wrap:wrap; gap:18px; }
.ai-rd .site-main .flex.flex-fluid { min-width:0; max-width:100%; }
.ai-rd .site-main .flex.flex-fluid.columns-3 > .entry-item,
.ai-rd .site-main .entry-item.column-third {
	flex:0 0 calc(33.333% - 12px); max-width:calc(33.333% - 12px); min-width:0; margin:0;
}
@media (max-width:700px){
	.ai-rd .site-main .flex.flex-fluid.columns-3 > .entry-item,
	.ai-rd .site-main .entry-item.column-third { flex-basis:calc(50% - 9px); max-width:calc(50% - 9px); }
}
@media (max-width:460px){
	.ai-rd .site-main .flex.flex-fluid.columns-3 > .entry-item,
	.ai-rd .site-main .entry-item.column-third { flex-basis:100%; max-width:100%; }
}