/* =====================================================================
   SAEF Soluciones Administrativas
   articulo.css - plantilla del articulo
   Extraido tal cual de la cola del <style> de SAEF_Blog_Articulo.html. NINGUNA REGLA FUE MODIFICADA.
   ===================================================================== */
/* ---------- plantilla de artículo ---------- */
.mig{font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:20px}
.mig a{color:rgba(255,255,255,.75);text-decoration:none}
.mig a:hover{color:var(--orange-400)}
.mig span{margin:0 8px;opacity:.5}

.ahead__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:rgba(255,255,255,.6)}
.ahead__meta .aut{display:flex;align-items:center;gap:10px;color:#fff;font-weight:500}
.ahead__meta .aut i{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(140deg,var(--cyan-300),var(--blue-500) 55%,var(--navy-700));
  font-family:var(--display);font-size:12.5px;font-weight:700;color:#fff;
}
.ahead__meta .sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.comp{display:flex;gap:8px;margin-left:auto}
.comp a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:all .25s ease;
}
.comp a:hover{background:var(--orange-500);border-color:transparent;transform:translateY(-2px)}
.comp svg{width:15px;height:15px;fill:#fff}

/* portada */
.aport{max-width:1000px;margin:clamp(-40px,-5vh,-30px) auto clamp(30px,4vh,48px);padding:0 clamp(20px,4vw,64px);position:relative;z-index:3}
.aport__c{
  height:clamp(220px,34vw,420px);border-radius:22px;
  background:linear-gradient(140deg,#EAF3FA,#FDF0E6);
  border:1px solid #E7EDF4;display:grid;place-items:center;
  box-shadow:0 26px 60px rgba(16,40,70,.16);
}
.aport__c .ph{
  position:static;inset:auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#9DB0C4;font-size:13px;font-weight:500;
  border:1.5px dashed #C6D5E3;border-radius:14px;padding:30px 40px;background:rgba(255,255,255,.55);
}
.aport__c .ph svg{width:30px;height:30px;fill:none;stroke:#9DB0C4;stroke-width:1.6}
.aport figcaption{margin-top:11px;font-size:12.5px;color:#8496A8;text-align:center}

/* cuerpo con índice */
.acuerpo{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,64px) clamp(40px,6vh,70px);
  display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:clamp(28px,4vw,60px);align-items:start}
.aidx{position:sticky;top:calc(var(--nav-h) + 20px)}
.aidx span{
  display:block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#93A3B5;margin-bottom:14px;
}
.aidx a{
  display:block;font-size:13.2px;line-height:1.45;color:#67788B;text-decoration:none;
  padding:8px 0 8px 14px;border-left:2px solid #E4EBF2;transition:all .25s ease;
}
.aidx a:hover,.aidx a.is-on{color:var(--ink);border-left-color:var(--orange-500);font-weight:500}

.prosa{font-size:16.5px;line-height:1.85;color:#3F5468;font-weight:300}
.prosa>p{margin-bottom:22px}
.prosa .entrada{font-size:18.5px;line-height:1.75;color:#2B3F53;font-weight:400}
.prosa h2{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(21px,2.2vw,29px);line-height:1.25;letter-spacing:-.024em;
  margin:clamp(34px,4.5vh,50px) 0 16px;scroll-margin-top:calc(var(--nav-h) + 20px);
}
.prosa h3{
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(17px,1.6vw,21px);line-height:1.3;letter-spacing:-.018em;margin:26px 0 12px;
}
.prosa ul{list-style:none;margin:0 0 24px}
.prosa ul li{position:relative;padding-left:26px;margin-bottom:11px}
.prosa ul li::before{
  content:'';position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--orange-500);box-shadow:0 0 0 4px rgba(240,122,45,.14);
}
.prosa b,.prosa strong{font-weight:600;color:var(--ink)}
.prosa a{color:var(--blue-500);text-decoration:underline;text-underline-offset:3px}

blockquote.cita{
  margin:clamp(28px,4vh,40px) 0;padding:24px 28px;border-radius:16px;
  background:linear-gradient(135deg,#FFF4EC,#F4F9FD);
  border-left:4px solid var(--orange-500);
  font-family:var(--display);font-size:clamp(17px,1.7vw,21px);line-height:1.5;
  font-weight:600;letter-spacing:-.018em;color:var(--ink);
}
blockquote.cita cite{display:block;margin-top:10px;font-family:var(--sans);font-size:13px;font-weight:400;font-style:normal;color:#7A8B9D}

.dato{
  margin:clamp(26px,4vh,38px) 0;padding:22px 26px;border-radius:16px;
  background:var(--navy-900);color:#fff;display:flex;gap:16px;align-items:flex-start;
}
.dato i{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(140deg,var(--orange-400),var(--orange-600));font-weight:700;font-size:16px;
}
.dato b{display:block;font-family:var(--display);font-size:15px;margin-bottom:5px;color:#fff}
.dato span{font-size:14px;line-height:1.65;color:rgba(255,255,255,.76);font-weight:300}

figure.aimg{margin:clamp(28px,4vh,40px) 0}
figure.aimg .c{
  height:clamp(180px,26vw,300px);border-radius:16px;border:1px solid #E7EDF4;
  background:linear-gradient(140deg,#EEF4FA,#FDF2E9);display:grid;place-items:center;
}
figure.aimg .ph{
  position:static;inset:auto;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:#9DB0C4;font-size:12.5px;font-weight:500;
  border:1.5px dashed #C6D5E3;border-radius:14px;padding:24px 32px;background:rgba(255,255,255,.55);
}
figure.aimg .ph svg{width:26px;height:26px;fill:none;stroke:#9DB0C4;stroke-width:1.6}
figure.aimg figcaption{margin-top:10px;font-size:12.5px;color:#8496A8}

.atabla{width:100%;border-collapse:collapse;margin:clamp(26px,4vh,38px) 0;font-size:14.5px}
.atabla th,.atabla td{padding:13px 16px;text-align:left;border-bottom:1px solid #E7EDF4}
.atabla th{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A8B9D;background:#F7F9FC}
.atabla td{color:#3F5468;font-weight:300}
.atabla tr:last-child td{border-bottom:0}

/* cierre del artículo */
.afin{
  margin-top:clamp(34px,5vh,50px);padding:clamp(24px,3vw,34px);border-radius:20px;
  background:linear-gradient(135deg,#0E2440,#143054 60%,#1C4272);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.afin h3{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.25;letter-spacing:-.02em;margin-bottom:6px}
.afin p{font-size:14px;line-height:1.6;font-weight:300;color:rgba(255,255,255,.72)}

.afirma{
  margin-top:clamp(28px,4vh,42px);padding-top:26px;border-top:1px solid #E4EBF2;
  display:flex;gap:18px;align-items:flex-start;
}
.afirma i{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-style:normal;
  background:linear-gradient(140deg,var(--cyan-300),var(--blue-500) 55%,var(--navy-700));
  font-family:var(--display);font-size:19px;font-weight:700;color:#fff;
}
.afirma b{display:block;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:3px}
.afirma em{display:block;font-style:normal;font-size:12.5px;color:var(--orange-600);font-weight:600;margin-bottom:9px}
.afirma p{font-size:14px;line-height:1.68;font-weight:300;color:#67788B}

.arel{background:#fff;border-top:1px solid #E7EDF4;padding:clamp(44px,6vh,72px) 0}

@media (max-width:1000px){
  .acuerpo{grid-template-columns:1fr}
  .aidx{position:static;order:-1;background:#fff;border:1px solid #E7EDF4;border-radius:16px;padding:18px 20px}
}

/* ===================================================================
   ANADIDO DESPUES DEL PROTOTIPO

   Tres cosas que el prototipo no podia tener porque era una maqueta:

   1. Imagenes REALES de portada y de dentro del articulo. El prototipo
      solo dibujaba el recuadro punteado, que se conserva intacto para
      los articulos sin imagen.
   2. El bloque "separador" de la decision D3: un <hr> simple. Se pinta
      con el mismo color de linea que ya usan .atabla, .aport__c y .arel
      en esta misma hoja; no se introduce ningun color nuevo.
   3. El cuerpo cuando el articulo NO tiene ningun subtitulo1 y por tanto
      no se imprime el indice. Sin esto la retícula dejaria un hueco de
      244 px a la derecha.
   4. El cuerpo cuando el articulo NO tiene portada. En el prototipo el
      hueco entre el encabezado azul y el texto lo dejaba la propia figura
      .aport con su margen inferior; sin figura, el cuerpo y el indice
      quedaban pegados al borde del encabezado. Se devuelve EXACTAMENTE
      ese mismo margen -- clamp(30px,4vh,48px) -- no un valor nuevo.

   NADA DE AQUI MODIFICA UNA REGLA DEL PROTOTIPO: solo anade.
   La verificacion de la cascada compara hasta esta linea.
   =================================================================== */
.aport__c img{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
figure.aimg .c img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.prosa hr{border:0;border-top:1px solid #E7EDF4;margin:clamp(28px,4vh,40px) 0}
.acuerpo--sinindice{grid-template-columns:minmax(0,1fr)}
.acuerpo--sinportada{padding-top:clamp(30px,4vh,48px)}

/* Aire bajo la portada del articulo.

   En el prototipo, debajo de la imagen iba un <figcaption> con el pie de
   foto: 11px de margen mas su linea de 12.5px, unos 26px que separaban
   la imagen de la entradilla y del indice "En este articulo".

   Ese pie era texto demostrativo y el cliente lo descarto (fase 9.1), asi
   que desaparecio la etiqueta -- y con ella, sin querer, esos 26px. El
   texto quedo pegado a la imagen.

   Aqui se devuelven, sumados al margen que ya tenia .aport. NO es un
   valor nuevo: es exactamente el alto que ocupaba el pie que se quito.
   Empuja por igual las dos columnas de .acuerpo, porque las dos arrancan
   en el mismo borde. */
.aport{margin-bottom:calc(clamp(30px,4vh,48px) + 26px)}