/*
 * Yo Respondo — componentes compartidos (prefijo yr-)
 *
 * Solo se carga en las plantillas nuevas (sector genérica, servicio, herramienta,
 * FAQ, recursos) y en las entradas. Las páginas existentes no la cargan.
 * Origen: plan-ejecucion/05-guia-visual/componentes.md §3 y guia-visual.md §5.
 *
 * --cta-bg conserva el naranja actual (#EB6A0B). El cambio de contraste
 * (decisión 1 de guia-visual.md) lo decide Fernando: cuando se decida, se cambia aquí.
 */

:root {
	--blue-dark: #025E8A;
	--bg-hero: #F8FAFC;
	--border: #E0EAF3;
	--border-strong: #D1D5DB;
	--text-soft: #595959;
	--cta-bg: #EB6A0B;
	--cta-bg-hover: #D15D07;
	--cta-text: #FFFFFF;
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
	--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
	--section-y: 80px;
	--r-1: 8px; --r-2: 12px; --r-3: 16px;
	--sh-card: 0 2px 10px rgba(0, 0, 0, .04);
	--sh-raise: 0 8px 25px rgba(235, 106, 11, .15);
	--sh-box: 0 4px 20px rgba(2, 117, 168, .05);
	--fs-body: 1.125rem;
	--fs-ui: 1rem;
	--fs-small: 0.875rem;
	--measure: 65ch;
}

/* ── Botones en componentes nuevos: usan --cta-bg (mismo aspecto que .btn-primary hoy) ── */
.yr-page .btn-primary,
.yr-cta .btn-primary,
.yr-calc .btn-primary,
.yr-nuevo .single-contenido .btn-primary {
	background: var(--cta-bg);
	border-color: var(--cta-bg);
	color: var(--cta-text);
}
.yr-page .btn-primary:hover,
.yr-cta .btn-primary:hover,
.yr-calc .btn-primary:hover,
.yr-nuevo .single-contenido .btn-primary:hover {
	background: var(--cta-bg-hover);
	border-color: var(--cta-bg-hover);
}
.yr-cta .btn-primary { border-color: #fff; }
.yr-page .btn { min-height: 50px; font-size: var(--fs-ui); }

/* ── 3.1 Base y secciones ── */
.yr-prosa { max-width: var(--measure); }
.yr-prosa p, .yr-prosa li { font-size: var(--fs-body); line-height: 1.65; color: var(--text-medium); }
.yr-prosa p { margin: 0 0 var(--sp-4); }
.yr-prosa ul, .yr-prosa ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.yr-prosa li { margin-bottom: var(--sp-2); }
.yr-prosa a { color: var(--primary-blue); text-decoration: underline; }
.yr-prosa a:hover { color: var(--blue-dark); }
.yr-prosa strong { color: var(--text-dark); }
.yr-prosa h3 { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--text-dark); margin: var(--sp-6) 0 var(--sp-3); }
.yr-prosa blockquote { border-left: 4px solid var(--primary-blue); background: var(--bg-light); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-1) var(--r-1) 0; margin: var(--sp-5) 0; }
.yr-prosa blockquote p { margin: 0; color: var(--text-dark); font-weight: 700; }
.yr-section { padding: var(--section-y) 0; background: #fff; }
.yr-section--alt { background: var(--bg-light); }
.yr-section h2 { font-size: 36px; line-height: 1.2; font-weight: 800; color: var(--text-dark); margin: 0 0 var(--sp-5); scroll-margin-top: 96px; }
.yr-section h2 .blue { color: var(--primary-blue); }
.yr-section__lead { font-size: var(--fs-body); line-height: 1.6; color: var(--text-medium); max-width: var(--measure); margin: 0 0 var(--sp-6); }
.yr-section__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (max-width: 900px) {
	.yr-section { padding: var(--sp-7) 0; }
	.yr-section h2 { font-size: 30px; }
}

/* Tablas en páginas nuevas (mismo estilo que en artículos) */
.yr-tabla { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-ui); -webkit-overflow-scrolling: touch; }
.yr-tabla th, .yr-tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-strong); min-width: 120px; }
.yr-tabla thead th { background: var(--bg-light); color: var(--text-dark); font-weight: 800; border-bottom: 2px solid var(--primary-blue); white-space: nowrap; }
.yr-tabla tbody tr:nth-child(even) td { background: #FAFBFC; }
.yr-tabla td:first-child { font-weight: 700; color: var(--text-dark); }

/* ── 3.2 Héroe ── */
.yr-hero { background: var(--bg-hero); padding: 72px 0; }
.yr-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
.yr-hero--img .yr-hero__grid { grid-template-columns: 1.2fr 1fr; }
.yr-hero--compacto { padding: 48px 0; }
.yr-hero__texto { max-width: 640px; }
.yr-hero__eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-blue); margin-bottom: var(--sp-3); }
.yr-hero h1 { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; color: var(--text-dark); margin: 0 0 var(--sp-4); }
.yr-hero h1 .blue { color: var(--primary-blue); }
.yr-hero__lead { font-size: 18px; line-height: 1.6; color: var(--text-medium); margin: 0 0 var(--sp-5); max-width: 56ch; }
.yr-hero__micro { font-size: var(--fs-small); font-weight: 700; color: var(--text-soft); margin: var(--sp-4) 0 0; }
.yr-hero__micro a { color: var(--primary-blue); text-decoration: underline; }
.yr-hero__media img { width: 100%; height: auto; display: block; border-radius: var(--r-3); aspect-ratio: 4 / 3; object-fit: cover; }
.yr-migas { font-size: var(--fs-small); color: var(--text-soft); margin: 0 0 var(--sp-4); }
.yr-migas a { color: var(--primary-blue); }
.yr-migas span[aria-hidden] { margin: 0 6px; }
@media (max-width: 900px) {
	.yr-hero { padding: 40px 0 48px; }
	.yr-hero--img .yr-hero__grid { grid-template-columns: 1fr; }
	.yr-hero h1 { font-size: 36px; }
	.yr-hero__media { order: -1; }
}

/* ── 3.3 Tarjetas, pasos y listas ── */
.yr-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) { .yr-grid--3, .yr-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .yr-grid, .yr-grid--3, .yr-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.yr-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); padding: 28px 24px; box-shadow: var(--sh-card); }
.yr-card h3 { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--text-dark); margin: 0 0 var(--sp-2); }
.yr-card h3 svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--primary-blue); margin-top: 2px; }
.yr-card p { font-size: var(--fs-ui); line-height: 1.6; color: var(--text-medium); margin: 0 0 var(--sp-2); }
.yr-card p:last-child { margin-bottom: 0; }
.yr-card a { color: var(--primary-blue); text-decoration: underline; }
.yr-step__n { width: 38px; height: 38px; border: 2px solid var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary-blue); margin-bottom: var(--sp-4); }
.yr-lista { list-style: none; margin: 0; padding: 0; }
.yr-lista li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-dark); margin-bottom: var(--sp-4); }
.yr-lista svg { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; color: var(--primary-orange); }
.yr-lista--ok svg { color: var(--primary-green); }

/* ── 3.4 FAQ sin JavaScript (<details>) ── */
.yr-faq { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; box-shadow: var(--sh-card); }
.yr-faq__item + .yr-faq__item { border-top: 1px solid var(--border-strong); }
.yr-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 56px; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-ui); font-weight: 700; line-height: 1.4; color: var(--text-dark); }
.yr-faq summary::-webkit-details-marker { display: none; }
.yr-faq summary::after { content: ""; flex: 0 0 12px; width: 12px; height: 12px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(45deg); transition: transform .25s; }
.yr-faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--primary-blue); }
.yr-faq summary:hover { color: var(--primary-blue); }
.yr-faq summary:focus-visible { outline: 2px solid var(--primary-blue); outline-offset: -2px; }
.yr-faq__resp { padding: 0 var(--sp-5) var(--sp-5); }
.yr-faq__resp p { font-size: var(--fs-ui); line-height: 1.65; color: var(--text-medium); margin: 0 0 var(--sp-3); }
.yr-faq__resp p:last-child { margin-bottom: 0; }
.yr-faq__resp a { color: var(--primary-blue); text-decoration: underline; }
/* En la plantilla de sector, la FAQ nueva conserva la medida de la anterior (15 px) */
.sector-faqs .yr-faq summary { font-size: 15px; }
.sector-faqs .yr-faq__resp p { font-size: 15px; line-height: 1.6; }
.sector-faqs .yr-faq { box-shadow: none; }

/* ── 3.5 CTA final ── */
.yr-cta { background: linear-gradient(135deg, var(--blue-dark), var(--primary-blue)); border-radius: 18px; padding: 48px 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); align-items: center; color: #fff; }
.yr-cta h2 { color: #fff; font-size: 32px; line-height: 1.2; margin: 0 0 var(--sp-4); }
.yr-cta p { font-size: var(--fs-ui); line-height: 1.6; margin: 0 0 var(--sp-3); color: #fff; }
.yr-cta__accion { text-align: center; }
.yr-cta__tel a { color: #fff; font-weight: 800; text-decoration: underline; }
.yr-cta__micro { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: var(--sp-4) 0 0; }
.yr-cta__sec { display: block; margin-top: var(--sp-3); color: #fff; text-decoration: underline; font-weight: 700; }
@media (max-width: 900px) {
	.yr-cta { grid-template-columns: 1fr; padding: 32px 24px; text-align: center; gap: var(--sp-5); }
	.yr-cta h2 { font-size: 26px; }
}

/* ── 3.6 Elementos de artículo ── */
/* Tablas, figuras, FAQ y CTA: en TODAS las entradas (mejoras pedidas en §4.1) */
.single-contenido table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-ui); -webkit-overflow-scrolling: touch; }
.single-contenido th, .single-contenido td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-strong); min-width: 120px; }
.single-contenido thead th { background: var(--bg-light); color: var(--text-dark); font-weight: 800; border-bottom: 2px solid var(--primary-blue); white-space: nowrap; }
.single-contenido tbody tr:nth-child(even) td { background: #FAFBFC; }
.single-contenido td:first-child { font-weight: 700; color: var(--text-dark); }
.single-contenido figure { margin: var(--sp-5) 0; }
.single-contenido figcaption { font-size: var(--fs-small); color: var(--text-soft); margin-top: var(--sp-2); }
.single-contenido .yr-faq { margin: var(--sp-5) 0; }
.single-contenido .yr-faq summary { font-size: var(--fs-ui); }
.single-contenido .yr-faq__resp p { font-size: var(--fs-ui); line-height: 1.65; margin: 0 0 var(--sp-3); }
.single-contenido .yr-faq__resp p:last-child { margin-bottom: 0; }
.single-contenido pre { white-space: pre-wrap; word-break: break-word; }

/* Medida y ritmo: solo en las entradas nuevas (body.yr-nuevo), para no cambiar las 21 existentes */
.yr-nuevo .single-contenido { max-width: 760px; }
.yr-nuevo .single-contenido > p, .yr-nuevo .single-contenido > ul, .yr-nuevo .single-contenido > ol { max-width: var(--measure); }
.yr-nuevo .single-contenido p, .yr-nuevo .single-contenido li { font-size: var(--fs-body); line-height: 1.65; }
.yr-nuevo .single-contenido h2 { margin-top: var(--sp-7); scroll-margin-top: 96px; }
.yr-nuevo .single-contenido h3 { margin-top: var(--sp-6); scroll-margin-top: 96px; }
.yr-nuevo .single-contenido strong { color: var(--text-dark); }

/* Lista de pasos numerados */
.single-contenido ol.yr-pasos { list-style: none; padding: 0; counter-reset: p; }
.single-contenido ol.yr-pasos > li { counter-increment: p; position: relative; padding-left: 52px; margin-bottom: var(--sp-4); }
.single-contenido ol.yr-pasos > li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border: 2px solid var(--primary-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary-blue); }

/* Cajas destacadas */
.yr-resumen, .yr-callout { border-radius: var(--r-2); padding: var(--sp-5); margin: var(--sp-5) 0; }
.yr-resumen { background: var(--bg-light); border-left: 4px solid var(--primary-blue); }
.yr-resumen > :first-child, .yr-callout > :first-child { margin-top: 0; }
.yr-resumen > :last-child, .yr-callout > :last-child { margin-bottom: 0; }
.yr-resumen__titulo { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary-blue); margin: 0 0 var(--sp-2); }
.yr-callout { background: #FFF6EE; border: 1px solid #FFE0C7; }
.yr-callout--nota { background: #F0F7FB; border-color: var(--border); }
.yr-callout p { font-size: var(--fs-ui); line-height: 1.6; color: var(--text-dark); }

/* Índice */
.yr-indice { background: var(--bg-light); border-radius: var(--r-2); padding: var(--sp-5); margin: var(--sp-5) 0; }
.yr-indice__titulo { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary-blue); margin: 0 0 var(--sp-3); }
.yr-indice ol { margin: 0; padding-left: var(--sp-5); }
.yr-indice a { color: var(--text-dark); font-weight: 600; text-decoration: none; }
.yr-indice a:hover { color: var(--primary-blue); text-decoration: underline; }

/* CTA dentro del artículo (al final; visible en móvil antes de la navegación) */
.yr-cta--inline { display: block; text-align: left; padding: var(--sp-6); margin: var(--sp-7) 0; }
.yr-cta--inline h2, .yr-cta--inline h3, .single-contenido .yr-cta--inline h2 { color: #fff; font-size: 24px; margin: 0 0 var(--sp-2); }
.single-contenido .yr-cta--inline p { color: #fff; font-size: var(--fs-ui); margin: 0 0 var(--sp-3); }
.single-contenido .yr-cta--inline a:not(.btn) { color: #fff; }
.yr-cta--inline .btn { margin-top: var(--sp-3); }
.single-contenido .yr-cta--inline .btn-primary { background: var(--cta-bg); border-color: #fff; color: var(--cta-text); text-decoration: none; }
.single-contenido .yr-cta--inline .btn-primary:hover { background: var(--cta-bg-hover); color: var(--cta-text); }
.yr-cta--inline .yr-cta__micro { font-size: 12px; }
@media (max-width: 900px) { .yr-cta--inline { text-align: left; padding: var(--sp-5); } }
/* Desde 901 px el sidebar (con su .sidebar-cta) va al lado del artículo (single.php .single-layout):
   el CTA del final solo se ve en móvil, donde el sidebar queda abajo del todo. */
@media (min-width: 901px) { .single-contenido .yr-cta--inline { display: none; } }

/* ── 3.7 Calculadora ── */
.yr-calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); padding: 36px 40px; box-shadow: var(--sh-box); margin: 0 0 var(--sp-6); }
.yr-calc__campo { margin-bottom: var(--sp-4); }
.yr-calc__campo label, .yr-calc__campo legend { display: block; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dark); margin-bottom: var(--sp-2); }
.yr-calc__campo input[type="number"], .yr-calc__campo input[type="text"], .yr-calc__campo select { width: 100%; min-height: 52px; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--text-dark); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--r-1); }
.yr-calc__campo input:focus, .yr-calc__campo select:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(2, 117, 168, .1); }
.yr-calc__campo input[aria-invalid="true"] { border-color: #B42318; }
.yr-calc__campo small { display: block; font-size: var(--fs-small); color: var(--text-soft); margin-top: var(--sp-1); line-height: 1.5; }
.yr-calc__error { display: block; font-size: var(--fs-small); font-weight: 700; color: #B42318; margin-top: var(--sp-1); }
.yr-calc__error:empty { display: none; }
.yr-calc__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.yr-calc__check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-ui); line-height: 1.4; color: var(--text-dark); margin-bottom: var(--sp-3); cursor: pointer; }
.yr-calc__check input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--primary-blue); }
.yr-calc__extras { border: 1px solid var(--border); border-radius: var(--r-2); padding: 0 var(--sp-4); margin: 0 0 var(--sp-4); }
.yr-calc__extras summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--primary-blue); }
.yr-calc__extras[open] { padding-bottom: var(--sp-2); }
.yr-calc__resultado { background: var(--bg-light); border-radius: var(--r-2); padding: var(--sp-5); min-height: 220px; display: flex; flex-direction: column; justify-content: center; }
.yr-calc__resultado p { font-size: var(--fs-ui); line-height: 1.55; color: var(--text-medium); margin: 0 0 var(--sp-3); }
.yr-calc__titular { font-size: 20px !important; font-weight: 800; color: var(--text-dark) !important; }
.yr-calc__cifra { font-size: 44px !important; line-height: 1.1 !important; font-weight: 800; color: var(--primary-blue) !important; margin: 0 0 var(--sp-3) !important; }
.yr-calc__cifra small { font-size: var(--fs-ui); font-weight: 700; color: var(--text-medium); }
.yr-calc__aviso { background: #FFF6EE; border: 1px solid #FFE0C7; border-radius: var(--r-1); padding: var(--sp-2) var(--sp-3); color: var(--text-dark) !important; }
.yr-calc__tabla { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); font-size: 15px; }
.yr-calc__tabla th, .yr-calc__tabla td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border-strong); }
.yr-calc__tabla th { font-weight: 800; color: var(--text-dark); }
.yr-calc__tabla td:not(:first-child), .yr-calc__tabla th:not(:first-child) { text-align: right; white-space: nowrap; }
.yr-calc__tabla .yr-calc__mejor td { font-weight: 800; color: var(--text-dark); background: #fff; }
.yr-calc__insignia { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: var(--primary-blue); color: #fff; border-radius: 4px; padding: 2px 6px; margin-left: 6px; }
.yr-calc__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2); }
.yr-calc__acciones a:not(.btn) { color: var(--primary-blue); text-decoration: underline; font-weight: 700; }
.yr-calc__ctabox { border-top: 1px solid var(--border-strong); margin-top: var(--sp-3); padding-top: var(--sp-4); }
.yr-calc__ctabox h3 { font-size: 18px; font-weight: 800; color: var(--text-dark); margin: 0 0 var(--sp-2); }
.yr-calc__nota { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--text-soft); margin: 0; }
@media (max-width: 900px) {
	.yr-calc { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) 22px; }
	.yr-calc__cifra { font-size: 36px !important; }
}

/* ── 3.8 Vídeo ── */
.yr-video { margin: var(--sp-6) 0; }
.yr-video__marco { position: relative; aspect-ratio: 16 / 9; background: var(--text-dark); border-radius: var(--r-3); overflow: hidden; }
.yr-video__marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yr-video figcaption { font-size: var(--fs-small); color: var(--text-soft); margin-top: var(--sp-2); }
.yr-video__transcripcion { margin-top: var(--sp-3); }
.yr-video__transcripcion summary { cursor: pointer; font-weight: 700; color: var(--primary-blue); min-height: 44px; display: flex; align-items: center; }

/* ── 3.9 FAQ por temas y recursos ── */
.yr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.yr-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); background: var(--bg-light); border-radius: 999px; font-size: var(--fs-ui); font-weight: 700; color: var(--text-dark); text-decoration: none; }
.yr-hero .yr-chips a { background: #fff; border: 1px solid var(--border); }
.yr-chips a:hover { background: var(--primary-blue); color: #fff; }
.yr-recurso { display: flex; flex-direction: column; }
.yr-recurso__tipo { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary-blue); margin-bottom: var(--sp-2); }
.yr-recurso .btn { margin-top: auto; align-self: flex-start; }

/* Bloque copiable (guiones) */
.yr-copiable { position: relative; margin: var(--sp-4) 0 var(--sp-5); }
.yr-copiable pre { margin: 0; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--primary-blue); border-radius: var(--r-2); padding: var(--sp-5); padding-top: 56px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: var(--font-main); font-size: var(--fs-ui); line-height: 1.7; color: var(--text-dark); }
.yr-copiable pre code { font: inherit; color: inherit; background: none; padding: 0; }
.yr-copiable__boton { position: absolute; top: 10px; right: 10px; min-height: 40px; padding: 0 var(--sp-4); border: 2px solid var(--primary-blue); background: #fff; color: var(--primary-blue); border-radius: var(--r-1); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.yr-copiable__boton:hover { background: var(--primary-blue); color: #fff; }
.yr-copiable__boton[data-estado="ok"] { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
.yr-copiable:not(.yr-copiable--js) pre { padding-top: var(--sp-5); }

/* ── 3.10 Foco y movimiento reducido ── */
.yr-page :where(a, button, summary, input, select, textarea):focus-visible,
.single-contenido :where(a, button, summary):focus-visible { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.yr-page *, .single-contenido * { transition: none !important; animation: none !important; }
}

/* ── Piezas de las plantillas de datos ── */
.yr-faq-bloque { max-width: 900px; margin: 0 auto; }
.yr-faq-bloque .yr-prosa { margin-bottom: var(--sp-5); }
.yr-prosa--tras { margin-top: var(--sp-6); }
.yr-pasos-grid { margin-top: var(--sp-5); }
.yr-checks { list-style: none; padding-left: 0 !important; }
.yr-checks li { position: relative; padding-left: 34px; }
.yr-checks li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 8px; height: 15px; border-right: 3px solid var(--primary-green); border-bottom: 3px solid var(--primary-green); transform: rotate(45deg); }
.yr-prosa .yr-tabla { margin: var(--sp-5) 0; }
.yr-prosa .yr-copiable pre { font-size: var(--fs-ui); }
.yr-section .yr-prosa > h2:only-child { margin-bottom: var(--sp-5); }
.yr-intro { padding-top: var(--sp-7); padding-bottom: 0; }

/* La rejilla del artículo (1fr 320px → 1fr en móvil) se ensancharía con el ancho
   mínimo de una tabla o de un <pre>; con min-width: 0 la tabla se desplaza dentro de su caja. */
.single-layout > * { min-width: 0; }
.single-contenido { overflow-wrap: break-word; }

/* ── Columna derecha de las secciones (corrección de Fernando, 04-11) ── */
.yr-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-7, 56px); align-items: center; }
.yr-dos__texto { min-width: 0; }
.yr-dos__texto > * { max-width: 100%; }
.yr-lado { min-width: 0; }
.yr-lado__img { display: block; width: 100%; height: auto; border-radius: 12px; }
.yr-lado__tarjeta, .yr-lado__cifras { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 20px; }
.yr-lado__img--tarjeta { margin-bottom: 14px; }
.yr-lado__titulo { font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--text-dark); margin: 0 0 6px; }
.yr-lado__texto { font-size: 16px; line-height: 1.5; color: var(--text-medium); margin: 0 0 14px; }
.yr-lado__boton { display: inline-block; min-height: 44px; padding: 11px 18px; border-radius: 8px; background: var(--primary-blue); color: #fff !important; font-weight: 700; text-decoration: none; }
.yr-lado__boton:hover { background: var(--blue-dark); }
.yr-lado__cifras p { margin: 0 0 12px; font-size: 16px; color: var(--text-medium); }
.yr-lado__cifras strong { display: block; font-size: 30px; line-height: 1.15; color: var(--primary-blue); }
.yr-hero--con-img .yr-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.yr-hero__img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 900px) {
	.yr-dos, .yr-hero--con-img .yr-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5, 24px); }
	.yr-lado { max-width: 460px; }
}

/* ── Barra lateral del blog: entera a la vista en escritorio ── */
@media (min-width: 901px) {
	.yr-sidebar { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 116px); overflow-y: auto; }
}
.yr-sidebar .sidebar-cta-micro a { color: #fff; text-decoration: underline; }
.yr-sidebar__enlaces ul { list-style: none; margin: 0; padding: 0; }
.yr-sidebar__enlaces li { border-bottom: 1px solid #E2E8F0; }
.yr-sidebar__enlaces li:last-child { border-bottom: 0; }
.yr-sidebar__enlaces a { display: block; padding: 9px 0; font-size: 15px; font-weight: 600; color: var(--text-dark); text-decoration: none; }
.yr-sidebar__enlaces a:hover { color: var(--primary-blue); }

/* ── Pilares del blog: cuatro bloques en horizontal ── */
.yr-pilares { padding: var(--sp-7, 56px) 0 0; background: #fff; }
.yr-pilares h2 { font-size: 30px; font-weight: 800; color: var(--text-dark); margin: 0 0 var(--sp-5, 24px); }
.yr-pilares__rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.yr-pilar { background: var(--bg-light); border-radius: 12px; padding: 18px; }
.yr-pilar__tema { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-medium); }
.yr-pilar__enlace { display: block; font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--primary-blue); text-decoration: none; }
.yr-pilar__enlace:hover { text-decoration: underline; }
.yr-pilar__texto { margin: 6px 0 10px; font-size: 15px; line-height: 1.45; color: var(--text-medium); }
.yr-pilar summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text-dark); }
.yr-pilar ul { list-style: none; margin: 10px 0 0; padding: 0; }
.yr-pilar li { padding: 5px 0; }
.yr-pilar li a { font-size: 15px; color: var(--text-dark); }
@media (max-width: 1000px) { .yr-pilares__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .yr-pilares__rejilla { grid-template-columns: minmax(0, 1fr); } }

.yr-calc__ejemplo { grid-column: 1 / -1; margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--primary-blue); }

/* ── Franja de servicios ── */
.yr-franja { padding: 28px 0; background: #fff; border-top: 1px solid #E2E8F0; }
.yr-franja__titulo { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--text-dark); }
.yr-franja ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.yr-franja a { display: inline-block; min-height: 44px; padding: 11px 14px; border-radius: 8px; background: var(--bg-light); color: var(--primary-blue); font-size: 15px; font-weight: 700; text-decoration: none; }
.yr-franja a:hover { text-decoration: underline; }