/* ---------------------------------------------------------------
   ARTICULO Y PAGINAS DE TEXTO DE IBRAHINGIL.COM
   Diseno aprobado el 4 de septiembre de 2026. Va con feed.css
   (tipografia y reset) y cabecera.css (cabecera y menu).
   --------------------------------------------------------------- */

/* Colores que esta hoja usaba sin que estuvieran definidos. sistema.css los
   tiene, pero los articulos no cargan sistema.css (cargan feed.css, cabecera.css
   y esta), asi que 22 reglas de borde no se dibujaban. Mismos valores que usa
   la cabecera para sus lineas, y el acento del sistema visual. */
:root{
  --linea:#ECECEA;
  --linea-2:#E2E2DF;
  --acento:#0A6E85;
}

html{scroll-behavior:smooth}

.art,.doc{padding:0 20px 44px}
@media(min-width:720px){.art,.doc{padding:0 28px 48px}}
@media(min-width:1024px){.art,.doc{padding:0 34px 52px}}

/* ---- cabecera del articulo ---- */
.a-eyebrow{margin:26px 0 0;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.a-eyebrow a{color:inherit}
@media(hover:hover){.a-eyebrow a:hover{text-decoration:underline}}
.a-eyebrow .sub{color:var(--soft-2)}
.a-title{margin:12px 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.5px;color:var(--ink);text-wrap:balance}
.a-lead{margin:16px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--ink-2)}
.a-meta{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--soft);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:13px 0}
.a-meta .who{font-weight:700;color:var(--ink)}
.a-meta .d{color:var(--linea-2)}
.a-ia{
  margin:16px 0 0;display:flex;flex-wrap:wrap;gap:0 7px;align-items:baseline;
  font-size:13.5px;line-height:1.5;color:var(--soft);
  border-left:3px solid var(--linea-2);padding:2px 0 2px 12px;
}
.a-ia a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#C9CDCB;white-space:nowrap}
@media(hover:hover){.a-ia a:hover{text-decoration-color:var(--ink)}}
.a-hero-fig{margin:0}
.a-credito{margin:9px 0 0;font-size:12.5px;color:var(--soft-2);line-height:1.45}
.a-hero{margin:26px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--linea-2);aspect-ratio:16/9;background:var(--papel);line-height:0}
.a-hero img{width:100%;height:100%;object-fit:cover}

/* ---- indice ---- */
.a-indice{margin:30px 0 0;border:1px solid var(--linea-2);border-radius:14px;padding:16px 20px;background:#FCFCFB}
.a-indice .k{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--soft-2)}
.a-indice ol{margin:10px 0 0;padding-left:1.3em}
.a-indice li{font-size:15px;line-height:1.4;color:var(--ink-2);margin:0}
.a-indice li::marker{color:var(--soft-2);font-weight:700}
.a-indice a{display:block;padding:6px 0;color:var(--ink-2)}
@media(hover:hover){.a-indice a:hover{color:var(--ink);text-decoration:underline}}

/* ---- cuerpo ---- */
.prose{margin-top:6px}
.prose>*{max-width:66ch}
.prose h2{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.3px;color:var(--ink);margin:38px 0 0;scroll-margin-top:calc(var(--mh) + 20px)}
.prose h3{font-family:var(--sans);font-weight:800;font-size:16.5px;color:var(--ink);margin:26px 0 0}
.prose p{margin:14px 0 0;font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.prose ul,.prose ol{margin:16px 0 0;padding-left:1.25em}
.prose li{font-size:17.5px;line-height:1.7;color:var(--ink-2);margin:7px 0}
.prose ul li::marker{color:var(--soft-2)}
.prose ol li::marker{color:var(--soft-2);font-weight:700}
.prose strong,.prose b{color:var(--ink);font-weight:700}
.prose img{border-radius:14px;margin:26px 0 0;max-width:100%}
/* Foto redonda de «Sobre Ibrahin». Antes iba en un atributo style=, que la CSP bloquea. */
.prose img.foto-autor{width:200px;height:200px;border-radius:50%;float:right;margin:0 0 1.2rem 1.5rem}
/* Casilla trampa del formulario de contacto: fuera de la vista, pero en la página. */
.cto-trampa{position:absolute;left:-9999px}
/* Recuadro de la comprobación anti-robots (Turnstile), encima del botón Enviar. */
.cto-robot{margin-top:22px;min-height:65px}
.prose blockquote{margin:30px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--linea-2)}
.prose blockquote p{color:var(--ink);font-family:var(--serif)}
.prose table{margin:26px 0 0;border-collapse:collapse;width:100%;font-size:15.5px}
.prose th,.prose td{border-bottom:1px solid var(--linea);padding:11px 12px;text-align:left;vertical-align:top}
.prose th{font-weight:800;color:var(--ink)}
.prose td{color:var(--ink-2)}
.prose code{font-size:15px;background:var(--papel);border:1px solid var(--linea-2);border-radius:6px;padding:1px 5px}
.prose pre{margin:22px 0 0;overflow-x:auto;background:var(--papel);border:1px solid var(--linea-2);border-radius:12px;padding:16px}
.prose pre code{border:0;background:none;padding:0}
.prose a,.a-lead a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;text-decoration-color:#C9CDCB}

/* Resumen de dos vinetas al principio del articulo, para quien no va a leerlo
   entero. Va despues del indice y a proposito NO es una caja: el indice ya es
   una caja y dos cajas seguidas se confunden. Barra lateral en color de acento. */
.resumen{margin:30px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--acento)}
.resumen .k{margin:0;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--soft-2)}
.resumen ul{margin:10px 0 0;padding-left:0;list-style:none}
.resumen li{margin:9px 0 0;font-family:var(--serif);font-size:18.5px;line-height:1.55;color:var(--ink)}
@media(hover:hover){.prose a:hover,.a-lead a:hover{text-decoration-color:var(--ink)}}

/* ---- acciones del articulo ---- */
/* La carta: bloque de suscripcion al final del articulo. Sin caja gris y sin
   color de fondo: la web no lleva sombras ni adornos, y esto tiene que leerse
   como una invitacion del autor, no como un anuncio incrustado. */
/* La hoja: la caja en mitad del articulo que ofrece el PDF a cambio del correo. */
.prose .hoja{margin:36px 0;padding:22px 24px;border:1.5px solid var(--acento);border-radius:14px;background:var(--papel)}
.prose .hoja .k{margin:0;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--acento)}
.prose .hoja-titulo{margin:8px 0 0;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.25;letter-spacing:-.2px;color:var(--ink)}
.prose .hoja-texto{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.prose .hoja-form{margin:16px 0 0}
.prose .hoja-form label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 7px}
.prose .hoja-fila{display:flex;flex-wrap:wrap;gap:10px}
.prose .hoja-fila input{flex:1 1 220px;min-width:0;padding:12px 14px;font:inherit;font-size:16px;border:1px solid var(--linea-2);border-radius:10px;background:#fff;color:var(--ink)}
.prose .hoja-fila input::placeholder{color:var(--soft-2)}
.prose .hoja-fila input:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.prose .hoja-fila button{padding:12px 20px;font:inherit;font-size:15.5px;font-weight:700;border:0;border-radius:10px;background:var(--acento);color:#fff;cursor:pointer}
@media(hover:hover){.prose .hoja-fila button:hover{filter:brightness(.92)}}
.prose .hoja-letra{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft-2)}
.prose .hoja-letra a{color:var(--soft-2);text-decoration:underline;text-underline-offset:2px}
.carta{margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--linea-2)}
.carta .k{margin:0;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--soft-2)}
.carta h2{margin:10px 0 0;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.3px;color:var(--ink)}
.carta-texto{margin:12px 0 0;font-size:17px;line-height:1.65;color:var(--ink-2)}
.carta-form{margin:20px 0 0}
.carta-form label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 8px}
.carta-fila{display:flex;flex-wrap:wrap;gap:10px}
.carta-fila input{
  flex:1 1 240px;min-width:0;font:inherit;font-size:16px;color:var(--ink);
  padding:13px 14px;border:1px solid var(--borde,#7E8B87);border-radius:10px;background:#fff;
}
.carta-fila input::placeholder{color:var(--soft-2)}
.carta-fila input:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.carta-fila button{
  flex:0 0 auto;font:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;
  padding:13px 22px;min-height:44px;border:0;border-radius:10px;background:var(--acento);
}
.carta-fila button:hover{background:#095A6D}
.carta-letra{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--soft-2)}
.carta-letra a{color:var(--soft-2);text-decoration:underline;text-underline-offset:2px}

.artacts{margin:38px 0 0;display:flex;align-items:center;padding:10px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.artacts .act:first-child{margin-left:-9px}
.artacts .n{font-size:13.5px;font-weight:600;color:var(--soft);font-variant-numeric:tabular-nums;line-height:1;margin:0 12px 0 -3px;transition:color .15s}
.artacts .n:empty{margin:0 6px 0 0}
.artacts .n.on{color:var(--rosa)}

/* ---- relacionados y revision ---- */
.rel{margin:40px 0 0;border-top:1px solid var(--linea);padding-top:8px}
.rel .k{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--soft-2);margin:16px 0 4px}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--linea);color:var(--ink);font-family:var(--serif);font-weight:600;font-size:19px}
.rel a .arw{color:var(--soft-2);flex:0 0 auto;display:flex}
.rel a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.rel a:hover .arw{color:var(--ink)}}

.rev{margin:36px 0 0;background:#FBFBFA;border:1px solid var(--linea);border-radius:12px;padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--soft)}
.rev b{color:var(--ink-2);font-weight:700}

.aviso-borrador{
  margin:22px 0 0;padding:12px 16px;border:2px solid var(--ink);border-radius:12px;
  background:var(--papel);color:var(--ink);font-size:13.5px;font-weight:700;
}

/* ---- paginas de texto (legales, contacto, confianza) ---- */
.doc .prose h2{font-size:22px;line-height:1.25;margin:34px 0 0}
.doc .prose p{font-size:16.5px;line-height:1.7}
.doc .prose li{font-size:16.5px}

/* ---- mocks: se dibujan con HTML, no son imágenes ----
   Un dibujo metido en un PNG se ve borroso en la columna del artículo y su
   texto no se puede leer con un lector de pantalla ni traducir. Esto es HTML:
   nítido a cualquier tamaño, y el texto es texto. */
.mock{margin:34px 0 0;max-width:none}
.mock-k{
  display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:999px;
  background:var(--papel);border:1px solid var(--linea-2);
  font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--soft);
  line-height:1.35;
}
.mock-senales{margin:20px 0 0;padding:0;list-style:none;counter-reset:senal;display:grid;gap:14px}
.mock-senales li{
  position:relative;counter-increment:senal;padding-left:42px;
  font-size:16.5px;line-height:1.55;color:var(--ink-2);margin:0;max-width:none;
}
.mock-senales li::before{
  content:counter(senal);position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:50%;background:var(--rosa-no,#A81E15);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
}
.mock-senales b{color:var(--ink);font-weight:700}
.mock figcaption{margin:16px 0 0;font-size:13px;color:var(--soft-2);line-height:1.5}

/* mensaje de móvil */
.sms{border:1px solid var(--linea-2);border-radius:18px;background:#fff;padding:18px 18px 22px;overflow:hidden}
.sms-de{margin:0;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink);max-width:none}
.sms-hora{margin:4px 0 0;font-size:13.5px;color:var(--soft-2);max-width:none}
.sms-cuerpo{margin:14px 0 0;padding:14px 16px;border-radius:14px;background:#F0F2F1;border:1px solid var(--linea)}
.sms-cuerpo p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:none}
.sms-cuerpo p+p{margin-top:14px}
.sms-cuerpo mark{background:#FBE9E7;color:var(--ink);font-weight:700;padding:1px 3px;border-radius:4px}
.sms-enlace{color:#0A6E85;text-decoration:underline;text-underline-offset:2px;overflow-wrap:break-word}
.pin{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#A81E15;color:#fff;
  font-size:13px;font-weight:800;line-height:1;vertical-align:middle;margin-left:6px;
}

/* regla final del mock */
.mock-regla{
  margin:16px 0 0;background:#101A1D;border-radius:16px;padding:16px 20px 18px;
}
.mock-regla .k{
  margin:0;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#5BD0DC;max-width:none;
}
.mock-regla p:not(.k){margin:8px 0 0;font-size:16.5px;line-height:1.5;color:#fff;max-width:none}

/* pantalla de ejemplo: un llavero, unos ajustes, una lista de la aplicación */
.pant{border:1px solid var(--linea-2);border-radius:18px;background:#fff;overflow:hidden}
.pant-cab{padding:15px 18px;border-bottom:1px solid var(--linea);background:#FCFCFB}
.pant-cab h4{margin:0;font-family:var(--sans);font-size:16.5px;font-weight:800;color:var(--ink)}
.pant-cab p{margin:3px 0 0;font-size:13.5px;color:var(--soft);max-width:none}
.pant-fila{display:flex;align-items:center;gap:12px;padding:13px 18px;border-top:1px solid var(--linea)}
.pant-fila:first-of-type{border-top:0}
.pant-fila .n{flex:1;min-width:0;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.pant-fila .n small{display:block;font-size:13px;color:var(--soft-2);margin-top:2px}
.pant-fila .v{flex:0 0 auto;font-size:15px;color:var(--soft-2);letter-spacing:2px}
.pant-fila.maestra{background:#F4F9FA;border-top:0}
.pant-fila.maestra .n{font-weight:800}
.pant-llave{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--oscuro,#0A1417);
  display:flex;align-items:center;justify-content:center;color:#5BD0DC;font-size:15px;font-weight:800;
}
.si,.no{
  flex:0 0 auto;font-size:13px;font-weight:800;letter-spacing:.4px;
  padding:4px 11px;border-radius:999px;border:1px solid;
}
.si{color:#1B6647;border-color:#CFE4D9;background:#F0F7F3}
.no{color:#A81E15;border-color:#EED6D3;background:#FCF3F2}
.pant-aviso{
  display:flex;gap:10px;padding:13px 18px;background:#FCF3F2;border-top:1px solid #EED6D3;
  font-size:14.5px;line-height:1.45;color:#7A2620;
}
.pant-aviso b{color:#A81E15}

.pant-cab.mal{background:#FCF3F2;border-bottom-color:#EED6D3}
.pant-cab.mal p{color:#A81E15;font-weight:700}

/* ---- bloque de recomendacion: donde verlo + como se ha hecho ---- */
.reco{margin:34px 0 0;border:1px solid var(--linea-2);border-radius:14px;padding:18px 20px}
.reco .k{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--soft-2)}
.reco-gratis{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--ink);font-weight:600}
.reco-crit{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.reco ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.reco li{margin:0}
.reco a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px;border:1px solid var(--linea-2);border-radius:11px;
  background:var(--papel);color:var(--ink);text-decoration:none}
@media(hover:hover){.reco a:hover{border-color:var(--ink);background:#fff}}
.reco-n{font-size:15.5px;font-weight:600}
.reco-p{font-size:12.5px;color:var(--soft-2);white-space:nowrap}
.reco-pq{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.reco-aviso{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--soft-2)}
.reco-aviso a{display:inline;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:2px}
.rec{margin:34px 0 0;display:grid;gap:14px}
.rec .k{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--soft-2)}
.rec-donde{border:1px solid var(--linea-2);border-radius:14px;padding:18px 20px}
.rec-donde ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.rec-donde a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 16px;border:1px solid var(--linea-2);border-radius:11px;
  background:var(--papel);text-decoration:none;color:var(--ink);
}
@media(hover:hover){.rec-donde a:hover{border-color:var(--ink);background:#fff}}
.rec-que{font-size:15.5px;font-weight:600;line-height:1.3}
.rec-host{font-size:12.5px;color:var(--soft-2);white-space:nowrap}
.rec-nota{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--soft-2)}
.rec-comprar{border:1px solid var(--linea-2);border-radius:14px;padding:18px 20px}
.rec-comprar ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.rec-comprar a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 14px;border:1px solid var(--linea-2);border-radius:11px;
  background:var(--papel);color:var(--ink);text-decoration:none
}
@media(hover:hover){.rec-comprar a:hover{border-color:var(--ink);background:#fff}}
.rec-aviso{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.rec-comprar .rec-nota{margin:12px 0 0}
.rec-metodo{border:1px solid var(--linea-2);border-radius:14px;padding:18px 20px;background:var(--papel)}
.rec-metodo p{margin:0 0 9px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.rec-metodo p:last-child{margin-bottom:0}
.rec-metodo b{color:var(--ink);font-weight:600}
.rec-enlaces{font-size:13.5px}
.rec-metodo a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:#C9CDCB}
@media(hover:hover){.rec-metodo a:hover{text-decoration-color:var(--ink)}}
@media(max-width:520px){
  .rec-donde a{flex-direction:column;gap:3px}
  .rec-host{white-space:normal}
}