/* ===== articulo.css — el molde de los ARTÍCULOS del blog (2 ago 2026) =====
   Antes esta hoja estaba copiada dentro de cada uno de los trece artículos, así que
   cambiar una tipografía obligaba a tocar trece archivos y tres se habían quedado
   atrás con valores viejos. Ahora vive aquí sola y todos la cargan.

   El header y el footer NO están aquí, van en maqueta.css, que es el molde que el
   artículo comparte además con la portada y los hubs.

   Si un artículo necesita algo suyo (una línea de tiempo, una rueda, una rejilla de
   signos), eso sí va en un <style> dentro de ese artículo, después de este enlace,
   y solo lo que sea de verdad exclusivo suyo.

   El diseño lo eligió Mafe el 31 jul 2026: la pintura arriba a todo lo ancho y el
   título debajo sobre marfil, sin tipografía encima de la foto. */
  :root{
    --blanco:#FFFFFF; --marfil:#FBF8F1; --antracita:#021212; --vino:#3B161F;
    --antracita-suave:#5c5c56; --neutro:#70706a; --linea:rgba(38,38,32,.14);
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0; background:var(--blanco); color:var(--antracita);
    font-family:Arimo, Arial, Helvetica, sans-serif; font-size:17px;
    line-height:1.72; letter-spacing:-.1px;}

  .articulo{max-width:1100px; margin:0 auto; padding:44px 24px 96px;
    display:grid; grid-template-columns:minmax(0,1fr); gap:0;}
  @media(min-width:960px){
    .articulo{grid-template-columns:minmax(0,68ch) minmax(0,1fr); column-gap:56px; padding-top:64px;}
    .cuerpo-articulo{grid-column:1; grid-row:1;}
    .ficha{grid-column:2; grid-row:1; position:sticky; top:32px; align-self:start; margin-top:6px;}
  }

  .portada{position:relative; background:var(--antracita); color:var(--marfil);
    overflow:hidden; isolation:isolate;}
  .portada-interior{position:relative; z-index:1; max-width:1100px; margin:0 auto;
    padding:74px 24px 62px;}
  .rotulo-tema{font-family:'Manrope', Arial, sans-serif; font-size:13px; font-weight:800;
    text-transform:uppercase; letter-spacing:.5px; color:var(--marfil); margin:0 0 18px;}
  /* Manrope en caja alta es mucho más ancha que Staatliches (condensada), así que el
     titular baja de 88 a 64 px de tope para que los títulos largos no se hagan un
     bloque de cinco líneas (18 ago 2026). */
  h1{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:clamp(34px, 6.2vw, 64px); line-height:1; letter-spacing:-.6px;
    margin:0 0 26px; max-width:17ch; color:var(--marfil);}
  .bajada{font-size:clamp(17px, 2.2vw, 21px); line-height:1.5; max-width:52ch;
    color:#e6e2da; margin:0 0 30px;}
  .firma{font-size:14px; color:#a9a59e; margin:0; letter-spacing:.2px;}
  .firma b{color:var(--marfil); font-weight:600;}
  @media(min-width:860px){.portada-interior{padding:104px 24px 96px;}}


  /* portada con la pintura arriba y el título debajo (Mafe, 31 jul 2026) */
  .portada.con-foto{background:var(--marfil); color:var(--antracita); min-height:0; display:block; isolation:auto;}
  .portada.con-foto .portada-foto{background:var(--antracita); line-height:0;}
  .portada.con-foto .portada-foto img{display:block; width:100%; height:min(520px,52vw);
    object-fit:cover; object-position:center 42%;}
  .portada.con-foto .portada-interior{padding:44px 24px 52px;}
  .portada.con-foto .rotulo-tema{color:var(--vino);}
  .portada.con-foto h1{color:var(--antracita); max-width:20ch;}
  .portada.con-foto .bajada{color:#4a4442;}
  .portada.con-foto .firma{color:var(--neutro);}
  .portada.con-foto .firma b{color:var(--antracita);}
  @media(max-width:640px){
    .portada.con-foto .portada-foto img{height:56vw;}
    .portada.con-foto .portada-interior{padding:32px 24px 40px;}
  }
  .ficha{background:var(--antracita); color:var(--marfil); padding:26px 24px;
    margin:0 0 40px; border-radius:2px;}
  .ficha h2{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase; font-size:19px;
    letter-spacing:.4px; margin:0 0 16px; color:var(--marfil); border-bottom:none;}
  .ficha dl{margin:0; font-size:15px; line-height:1.5;}
  .ficha dt{font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:#bcb8b1; font-weight:700; margin-top:14px;}
  .ficha dt:first-of-type{margin-top:0;}
  .ficha dd{margin:3px 0 0; color:#f7f4ed;}
  .ficha .destaca{color:var(--marfil); font-weight:700;}

  .cuerpo-articulo h2{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:clamp(25px, 3.4vw, 33px); line-height:1.12; letter-spacing:-.2px;
    margin:52px 0 18px; max-width:30ch; border-bottom:none;}
  .cuerpo-articulo h3{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:clamp(20px, 2.6vw, 24px); line-height:1.2; letter-spacing:.1px;
    margin:36px 0 12px;}
  .cuerpo-articulo p{margin:0 0 20px;}
  .cuerpo-articulo strong{font-weight:700;}
  .entradilla{font-size:19px; line-height:1.62;}

  ul.acciones{margin:6px 0 30px; padding:0; list-style:none;}
  ul.acciones li{padding:0 0 18px 26px; position:relative;}
  ul.acciones li::before{content:""; position:absolute; left:2px; top:11px;
    width:7px; height:7px; background:var(--vino); border-radius:50%;}

  .aviso{background:rgba(59,22,31,.055); padding:20px 22px; margin:34px 0; border-radius:2px;}
  .aviso p:last-child{margin-bottom:0;}

  .tabla-envoltorio{overflow-x:auto; margin:30px 0 34px; -webkit-overflow-scrolling:touch;}
  table.datos{border-collapse:collapse; width:100%; min-width:520px; font-size:15px;}
  table.datos caption{text-align:left; font-size:13.5px; color:var(--neutro);
    padding:0 0 12px; line-height:1.5;}
  table.datos th, table.datos td{padding:10px 14px 10px 0; text-align:left;
    border-bottom:1px solid var(--linea); vertical-align:top;}
  table.datos thead th{font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--neutro); font-weight:700; border-bottom:2px solid rgba(38,38,32,.3);}
  table.datos tbody tr:last-child td{border-bottom:none;}
  table.datos td.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
  table.datos .total{color:var(--vino); font-weight:700;}

  .cierre{margin-top:56px; font-size:15px; color:var(--neutro);}
  .cierre a{color:var(--vino); font-weight:600;}

  .en-tu-carta{background:var(--antracita); color:var(--marfil); padding:34px 30px;
    margin:46px 0; border-radius:2px;}
  .en-tu-carta h3{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:26px; line-height:1.12; letter-spacing:.2px; margin:0 0 14px; color:var(--marfil);}
  .en-tu-carta p{margin:0 0 22px; color:#e6e2da; font-size:16px; line-height:1.6;}
  .boton{display:inline-block; background:var(--marfil); color:var(--antracita);
    font-weight:700; font-size:15px; letter-spacing:.2px; text-decoration:none;
    padding:14px 24px; border-radius:2px;}
  .boton:hover{background:#fff;}

  .consulta{margin:52px 0 0; padding:30px 0 0;}
  .consulta h3{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:24px; letter-spacing:.2px; margin:0 0 12px;}
  .consulta p{margin:0 0 16px;}
  .consulta a.enlace-consulta{color:var(--vino); font-weight:700; text-decoration:none;
    border-bottom:2px solid rgba(59,22,31,.32); padding-bottom:1px;}
  .consulta a.enlace-consulta:hover{border-bottom-color:var(--vino);}

  .migas{max-width:1100px; margin:0 auto; padding:20px 24px 0; font-size:13px; color:var(--neutro);}
  .migas a{color:var(--neutro); text-decoration:none;}
  .migas a:hover{color:var(--vino);}
  .migas span{margin:0 7px; opacity:.5;}

  .autora{margin:56px 0 0; padding:30px; background:#faf8f4; border-radius:2px;
    display:flex; gap:20px; align-items:flex-start;}
  .autora .inicial{flex:0 0 62px; width:62px; height:62px; border-radius:50%;
    background:var(--vino); color:var(--marfil); font-family:'Manrope', Arial, sans-serif; font-weight:800;
    font-size:24px; display:flex; align-items:center; justify-content:center; letter-spacing:.5px;}
  .autora h3{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase; font-size:21px;
    letter-spacing:.2px; margin:0 0 8px;}
  .autora p{margin:0 0 10px; font-size:15px; line-height:1.6; color:#4a4a44;}
  .autora p:last-child{margin-bottom:0;}
  .autora a{color:var(--vino); font-weight:600;}

  .sigue-leyendo{margin:60px 0 0; padding:34px 0 0; border-top:1px solid var(--linea);}
  .sigue-leyendo h2{font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:24px; letter-spacing:.2px; margin:0 0 20px; border-bottom:none;}
  .sigue-leyendo ul{margin:0; padding:0; list-style:none;}
  .sigue-leyendo li{padding:0 0 15px;}
  .sigue-leyendo a{color:var(--vino); font-weight:700; text-decoration:none;}
  .sigue-leyendo a:hover{text-decoration:underline;}
  .sigue-leyendo .que-es{display:block; color:var(--neutro); font-weight:400; font-size:14.5px;
    line-height:1.5; margin-top:2px;}