/* =========================================================
   MiContratoCo — ARTÍCULOS
   Maquetación de las páginas de contenido que buscan
   posicionarse en Google.

   Se carga solo en esas páginas, después de mcc.css. Cada
   artículo nuevo reusa esto entero: lo único que se escribe
   es el texto.
   ========================================================= */

body.articulo{--ancho:760px}

/* ---------- encabezado ---------- */
.art-head{padding:34px 0 0}
.art-head .ruta{font-size:11.5px;color:var(--azul2);margin:0 0 14px}
.art-head .ruta a{color:var(--azul)}
.art-head h1{color:var(--paper);font-family:var(--serif);font-weight:400;font-size:31px;
  line-height:1.18;letter-spacing:-.01em;margin:0 0 14px;max-width:20ch}
@media(min-width:700px){.art-head h1{font-size:39px}}
.art-head .bajada{color:var(--azul);font-size:16px;line-height:1.6;margin:0;max-width:54ch}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:18px 0 0;font-size:11.5px;color:var(--azul2)}

/* ---------- respuesta corta ----------
   Va primero a propósito: es lo que Google levanta como
   fragmento destacado y lo que el lector vino a buscar. */
.respuesta{background:var(--gold);color:#fff;border-radius:12px;padding:22px 24px;margin:26px 0 0}
.respuesta .lab{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  opacity:.85;display:block;margin-bottom:9px}
.respuesta p{margin:0;font-family:var(--serif);font-size:20px;line-height:1.5}
.respuesta p+p{margin-top:11px;font-size:16px;opacity:.93}

/* ---------- cuerpo ---------- */
.art-body{background:#fff;border-radius:12px;padding:30px 26px;margin-top:16px}
@media(min-width:700px){.art-body{padding:38px 40px}}
.art-body h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:34px 0 12px;
  color:var(--ink);line-height:1.25}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:16px;margin:24px 0 8px;color:var(--ink)}
.art-body p{font-size:16px;color:var(--ink2);margin:0 0 15px;line-height:1.7}
.art-body ul,.art-body ol{font-size:16px;color:var(--ink2);margin:0 0 15px;padding-left:22px;line-height:1.7}
.art-body li{margin-bottom:8px}
.art-body b,.art-body strong{color:var(--ink)}
.art-body a{color:#9A7124;text-decoration:underline;text-underline-offset:2px}
.art-body a:hover{color:var(--ink)}

/* ---------- cita de la norma ---------- */
.norma{border-left:3px solid var(--gold);background:var(--paper);border-radius:0 8px 8px 0;
  padding:18px 20px;margin:0 0 18px}
.norma .fuente{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-bottom:8px}
.norma p{font-family:var(--serif);font-size:15.5px;color:var(--ink);margin:0;line-height:1.65}

/* ---------- tabla comparativa ---------- */
.tabla{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tabla th{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.tabla td{color:var(--ink2);line-height:1.55}
.tabla td b{color:var(--ink)}
.tabla .si{color:var(--green);font-weight:700}
.tabla .no{color:var(--red);font-weight:700}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- preguntas frecuentes ---------- */
.faq{margin-top:8px}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq details[open]{padding-bottom:6px}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;font-size:16px;font-weight:700;
  color:var(--ink);position:relative;min-height:var(--tap);
  transition:color var(--medio) ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--medio) var(--sal)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--gold)}
.faq summary:active{opacity:.65}
.faq .cuerpo{font-size:15.5px;color:var(--ink2);line-height:1.7;padding:0 0 14px}
.faq .cuerpo p{margin:0 0 10px;font-size:15.5px}
.faq .cuerpo p:last-child{margin:0}

/* ---------- llamada a la herramienta ---------- */
.herramienta{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px;margin-top:16px}
.herramienta .lab{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:10px}
.herramienta h2{color:var(--paper);font-family:var(--serif);font-weight:400;font-size:23px;
  margin:0 0 9px;line-height:1.25}
.herramienta p{color:var(--azul);font-size:14.5px;line-height:1.6;margin:0 0 18px}
.herramienta .par{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.herramienta .par{grid-template-columns:1fr 1fr}}

/* ---------- seguir leyendo ---------- */
.mas{margin-top:16px}
.mas .lab{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--azul2);display:block;margin-bottom:11px}
.mas a{display:block;background:#fff;border-radius:10px;padding:16px 18px;margin-bottom:9px;
  text-decoration:none;color:var(--ink);
  transition:transform var(--medio) var(--sal), box-shadow var(--medio) ease}
.mas a:hover{box-shadow:0 6px 22px rgba(0,0,0,.18);transform:translateY(-1px)}
.mas a:active{transform:scale(.99)}
.mas a b{display:block;font-size:15.5px;margin-bottom:3px}
.mas a span{font-size:13px;color:var(--ink3);line-height:1.5}