/* ==========================================================================
   Diseño editorial de Reclutafy.

   Dos partes:
     1. El armazón — cinta, barra de navegación y pie, copiados de
        templates/landing.php para que una entrada y la landing se vean como
        el mismo sitio.
     2. El contenido — tipografía, tablas y los componentes que la landing usa
        (tarjetas, sellos, marcador, pasos, botones), disponibles dentro del
        artículo con las clases que documenta el panel del plugin.
   ========================================================================== */

*{box-sizing:border-box}
body{margin:0;background:#F6F1E7;font-family:'Instrument Sans',sans-serif;color:#1C1917}
.rfd-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.rfd-filebar{background:#1C1917;color:#C9BFA9;font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 0}
.rfd-filebar .rfd-wrap{display:flex;justify-content:space-between;gap:12px}
.rfd-nav{border-bottom:2px solid #1C1917;background:#F6F1E7;position:sticky;top:0;z-index:40}
.rfd-nav-in{max-width:1080px;margin:0 auto;padding:18px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
/* El logo puede venir como SVG en línea o como imagen de la biblioteca: sin
   la regla para img, una imagen grande salía a tamaño completo. */
.rfd-logo svg,.rfd-logo img{height:44px;width:auto;max-width:280px;display:block;
  object-fit:contain}
.rfd-logo strong{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;
  font-weight:900;color:#1C1917;letter-spacing:-.01em}
@media(max-width:640px){.rfd-logo svg,.rfd-logo img{height:32px;max-width:190px}}
.rfd-nav-links{display:flex;gap:22px;align-items:center;font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;
  row-gap:10px;justify-content:flex-end}
/* En pantallas angostas los enlaces se desplazan en una tira, antes que
   partirse en varias filas y empujar el contenido hacia abajo. */
@media(max-width:760px){
  .rfd-nav-links{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:18px;
    justify-content:flex-start;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .rfd-nav-links::-webkit-scrollbar{display:none}
  .rfd-nav-links a{white-space:nowrap}
}
.rfd-nav-links a{color:#1C1917;text-decoration:none}
.rfd-buy{border:2px solid #1C1917;background:#F5D547;padding:8px 16px;font-weight:600}
.rfd-main{padding:52px 24px 70px}
.rfd-destacada{margin:0 0 38px;border:2px solid #1C1917}
.rfd-destacada img{display:block;width:100%;height:auto}
.rfd-footer{background:#1C1917;color:#B8AE99;padding:30px 0;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.05em}
.rfd-footer .rfd-wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rfd-footer a{color:#D9CFB8;text-decoration:none}

/* ─── Componentes para el cuerpo del artículo ─────────────────────────── */

/* Marcador amarillo sobre una frase */
.rfd .hl{background:linear-gradient(180deg,transparent 55%,#F5D547 55%,#F5D547 92%,transparent 92%);padding:0 2px}

/* Sello */
.rfd .sello{display:inline-block;font-family:'IBM Plex Mono',monospace;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:#C1442E;
  border:3px double #C1442E;border-radius:6px;padding:7px 15px;transform:rotate(-3deg);margin:0 0 6px}
.rfd .sello-teal{color:#0F766E;border-color:#0F766E}

/* Tarjetas */
.rfd .tarjetas{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:1.8em 0 2.2em}
.rfd .tarjeta{background:#FDFBF5;border:2px solid #1C1917;padding:24px 22px;
  box-shadow:6px 6px 0 rgba(28,25,23,.14)}
.rfd .tarjeta .n{font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#0F766E;margin-bottom:9px;display:block}
.rfd .tarjeta h4{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;font-weight:600;
  margin:0 0 8px;line-height:1.25}
.rfd .tarjeta p{margin:0;font-size:.95rem;line-height:1.55;color:#57534E}
@media(max-width:760px){.rfd .tarjetas{grid-template-columns:1fr}}

/* Lista de verificación a dos columnas */
.rfd .checks{columns:2;column-gap:40px;margin:1.6em 0 2em;padding:0;list-style:none}
.rfd .checks li{break-inside:avoid;display:flex;gap:12px;padding:11px 0;
  border-bottom:1px solid #D6CDBB;align-items:baseline;margin:0}
.rfd .checks li::before{content:'✓';color:#0F766E;font-weight:700;font-size:.95rem;
  position:static;background:none;width:auto;height:auto}
@media(max-width:760px){.rfd .checks{columns:1}}

/* Pasos numerados grandes */
.rfd .pasos{margin:1.8em 0 2.2em;padding:0;list-style:none;counter-reset:paso}
.rfd .pasos li{counter-increment:paso;display:grid;grid-template-columns:62px 1fr;
  gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid #D6CDBB;margin:0}
.rfd .pasos li::before{content:counter(paso,decimal-leading-zero);
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:2.4rem;line-height:1;
  color:#C1442E;position:static;background:none;width:auto;height:auto}
.rfd .pasos .txt{min-width:0}
.rfd .pasos strong{display:block;font-size:1.05rem;margin-bottom:4px}

/* Dato destacado */
.rfd .dato{background:#1C1917;color:#F6F1E7;padding:26px 28px;margin:2em 0;
  border-left:6px solid #F5D547}
.rfd .dato .et{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#F5D547;display:block;margin-bottom:10px}
.rfd .dato p{margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.3rem;
  font-weight:300;line-height:1.45;color:#F6F1E7}
/* Dentro de la caja oscura no se usa el marcador de fondo: es un degradado que
   cubre solo la franja central de la línea, así que lo que queda fuera es texto
   oscuro sobre fondo oscuro y la frase se lee tachada. Aquí la frase clave se
   destaca en amarillo, que sobre tinta se lee de inmediato. */
.rfd .dato .hl{
    background: none;
    color: #F5D547;
    font-weight: 600;
    padding: 0;
}

/* Llamada a la acción */
.rfd .cta{border:2px solid #1C1917;background:#FDFBF5;padding:30px 28px;margin:2.6em 0 1em;
  box-shadow:7px 7px 0 rgba(28,25,23,.14);text-align:center}
.rfd .cta h3{font-family:'Fraunces',Georgia,serif;font-size:1.45rem;font-weight:900;
  margin:0 0 10px;line-height:1.2}
.rfd .cta p{max-width:30rem;margin:0 auto 20px;color:#57534E}
.rfd .btn{display:inline-block;font-family:'IBM Plex Mono',monospace;font-weight:600;
  font-size:.88rem;letter-spacing:.02em;padding:14px 24px;text-decoration:none;
  border:2px solid #1C1917;background:none;transition:transform .15s,box-shadow .15s}
.rfd .btn-ink{background:#1C1917;color:#F6F1E7;box-shadow:5px 5px 0 #0F766E}
.rfd .btn-line{color:#1C1917;box-shadow:5px 5px 0 rgba(28,25,23,.15)}
.rfd .btn:hover{transform:translate(-2px,-2px)}
.rfd .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Diseño editorial de Reclutafy — el sistema visual de la landing, aplicado
   a las entradas y páginas del sitio.

   Los tokens son los de templates/landing.php, copiados tal cual para que el
   artículo y la landing se vean como el mismo sitio: papel y tinta, Fraunces
   para los títulos, Instrument Sans para el texto, mono para las etiquetas.

   El selector .rfd envuelve todo el artículo, así que nada de esto afecta
   al resto del sitio ni pelea con el tema.
   ========================================================================== */

.rfd {
    --paper:   #F6F1E7;
    --paper-2: #EFE8D9;
    --ink:     #1C1917;
    --ink-soft:#57534E;
    --line:    #D6CDBB;
    --teal:    #0F766E;
    --red:     #C1442E;
    --marker:  #F5D547;
    --serif:   'Fraunces', Georgia, serif;
    --sans:    'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, monospace;

    font-family: var(--sans);
    color: var(--ink);
    line-height: 1.7;
    font-size: 1.05rem;
    max-width: var(--rfd-ancho, 44rem);
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

/* ── Encabezado del artículo ──────────────────────────────────────────── */
.rfd-cab {
    border-bottom: 2px solid var(--ink);
    padding-bottom: 26px;
    margin-bottom: 34px;
}
.rfd-eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    display: block;
    margin-bottom: 14px;
}
.rfd .rfd-titulo, .rfd h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin: 0 0 18px;
    color: var(--ink);
}
.rfd-sumario {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

/* ── Cuerpo ───────────────────────────────────────────────────────────── */
.rfd h2 {
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.8vw, 1.95rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.12;
    margin: 2.4em 0 .7em;
    color: var(--ink);
}
.rfd h2::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    background: var(--teal);
    margin-bottom: 16px;
}
.rfd h3 {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.005em;
    margin: 1.9em 0 .5em;
    color: var(--ink);
}
.rfd p { margin: 0 0 1.15em; }
.rfd strong { font-weight: 600; color: var(--ink); }

/* El primer párrafo marca el tono. */
.rfd .entradilla {
    font-family: var(--serif);
    font-size: 1.22rem;
    font-weight: 300;
    line-height: 1.55;
    color: var(--ink);
    border-left: 3px solid var(--teal);
    padding: 2px 0 2px 20px;
    margin: 0 0 2em;
}

/* ── Listas ───────────────────────────────────────────────────────────── */
.rfd ul, .rfd ol { margin: 0 0 1.4em; padding-left: 0; list-style: none; }
.rfd ul li, .rfd ol li {
    position: relative;
    padding-left: 26px;
    margin-bottom: .6em;
}
.rfd ul li::before {
    content: '';
    position: absolute;
    left: 2px; top: .62em;
    width: 7px; height: 7px;
    background: var(--teal);
}
.rfd ol { counter-reset: rfa; }
.rfd ol li { counter-increment: rfa; }
.rfd ol li::before {
    content: counter(rfa);
    position: absolute;
    left: 0; top: .08em;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
    color: var(--teal);
}

/* ── Tablas: hoja de expediente ───────────────────────────────────────── */
.rfd table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: .95rem;
    background: #FDFBF5;
    border: 2px solid var(--ink);
}
.rfd thead th {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 14px;
    text-align: left;
}
.rfd tbody th {
    font-weight: 600;
    background: var(--paper-2);
}
.rfd td, .rfd tbody th {
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.rfd tbody tr:first-child td,
.rfd tbody tr:first-child th { border-top: 0; }

/* ── Aviso de dato pendiente ──────────────────────────────────────────── */
.rfd .hueco {
    background: var(--marker);
    border: 2px solid var(--ink);
    padding: 14px 18px;
    margin: 1.6em 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--ink);
    box-shadow: 4px 4px 0 rgba(28, 25, 23, .14);
}

/* ── Enlaces ──────────────────────────────────────────────────────────── */
.rfd a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--teal), var(--teal));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
    transition: background-size .2s cubic-bezier(.16, 1, .3, 1);
}
.rfd a:hover {
    background-size: 100% 100%;
    color: var(--paper);
}

/* ── Pie: seguir leyendo ──────────────────────────────────────────────── */
.rfd-seguir {
    margin-top: 3.4em;
    padding-top: 26px;
    border-top: 2px solid var(--ink);
}
.rfd-seguir .rfd-eyebrow { margin-bottom: 18px; }
.rfd-seguir ul { list-style: none; padding: 0; margin: 0; }
.rfd-seguir li {
    padding: 0 0 14px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--line);
}
.rfd-seguir li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rfd-seguir li::before { display: none; }
.rfd-seguir a {
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3;
    background-size: 0 1.5px;
}
.rfd-seguir a:hover { background-size: 100% 1.5px; color: var(--ink); }

/* ── Teléfono ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .rfd { font-size: 1rem; }
    .rfd .entradilla { font-size: 1.1rem; padding-left: 15px; }
    .rfd table { font-size: .87rem; display: block; overflow-x: auto; }
    .rfd td, .rfd thead th, .rfd tbody th { padding: 9px 11px; }
}

/* ── Correcciones sobre la primera versión ────────────────────────────── */

/* El subrayado pasaba por encima de las descendentes (g, p, q, y) y se veía
   sucio: se baja para que las libre. */
.rfd a{background-position:0 calc(100% - 1px);padding-bottom:3px}

/* Los números de las listas quedaban en 12px y se perdían junto al texto. */
.rfd ol li::before{font-size:.95rem;top:.02em}
.rfd ol li{padding-left:30px}

/* El filete verde sobre cada H2 saturaba en artículos de muchas secciones:
   se deja solo en el primero. */
.rfd h2::before{display:none}
.rfd h2:first-of-type::before{display:block}

/* ==========================================================================
   Formulario de contacto al cierre del artículo.

   Estilo de expediente: borde de tinta, sombra dura y campos sobre papel.
   Funciona con Contact Form 7; si el tema ya le da estilo, esto lo recoloca
   sin pelear con él.
   ========================================================================== */
.rfd .rfa-form{
    border: 2px solid #1C1917;
    background: #FDFBF5;
    padding: 32px 30px;
    margin: 3em 0 1em;
    box-shadow: 7px 7px 0 rgba(28,25,23,.14);
}
.rfd .rfa-form h3{
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.18;
    margin: 0 0 8px;
}
.rfd .rfa-form > p{
    color: #57534E;
    margin: 0 0 22px;
    max-width: 34rem;
}

/* Dos campos por fila en pantallas anchas */
.rfd .rfa-f-fila{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.rfd .rfa-f-fila{grid-template-columns:1fr}}

.rfd .rfa-form label{
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #57534E;
    margin-bottom: 16px;
}
.rfd .rfa-form input[type="text"],
.rfd .rfa-form input[type="email"],
.rfd .rfa-form input[type="tel"],
.rfd .rfa-form select,
.rfd .rfa-form textarea{
    width: 100%;
    margin-top: 6px;
    padding: 11px 13px;
    border: 1.5px solid #D6CDBB;
    background: #fff;
    font-family: 'Instrument Sans', sans-serif;
    font-size: .98rem;
    color: #1C1917;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
}
.rfd .rfa-form select{
    appearance: none;
    background-image: linear-gradient(45deg,transparent 50%,#0F766E 50%),
                      linear-gradient(135deg,#0F766E 50%,transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
}
.rfd .rfa-form input:focus,
.rfd .rfa-form select:focus,
.rfd .rfa-form textarea:focus{
    outline: none;
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.rfd .rfa-form textarea{resize:vertical;min-height:92px}

/* Aceptación de datos */
.rfd .rfa-form .wpcf7-acceptance label{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-family: 'Instrument Sans', sans-serif;
    font-size: .86rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #57534E;
    line-height: 1.5;
}
.rfd .rfa-form .wpcf7-acceptance input{width:auto;margin:3px 0 0}

/* Botón de envío: el mismo de la landing */
.rfd .rfa-form input[type="submit"]{
    width: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 28px;
    margin-top: 6px;
    border: 2px solid #1C1917;
    background: #1C1917;
    color: #F6F1E7;
    box-shadow: 5px 5px 0 #0F766E;
    cursor: pointer;
    transition: transform .15s cubic-bezier(.16,1,.3,1),
                box-shadow .15s cubic-bezier(.16,1,.3,1);
}
.rfd .rfa-form input[type="submit"]:hover{
    transform: translate(-2px,-2px);
    box-shadow: 7px 7px 0 #0F766E;
}

/* Avisos de Contact Form 7 */
.rfd .rfa-form .wpcf7-not-valid-tip{
    font-family: 'Instrument Sans', sans-serif;
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #C1442E;
    margin-top: 5px;
}
.rfd .rfa-form .wpcf7-response-output{
    border: 2px solid #1C1917 !important;
    background: #F5D547;
    margin: 20px 0 0 !important;
    padding: 13px 16px !important;
    font-size: .92rem;
}
.rfd .rfa-form .wpcf7-not-valid{border-color:#C1442E}
.rfd .rfa-form .wpcf7-spinner{margin:0 0 0 12px}