/* ==========================================================================
   PETROLEUM — DISEÑO DE LAS ENTRADAS DEL BLOG
   Se carga SÓLO en entradas individuales (ver functions.php). No es parte de
   bloques.css a propósito: son ~600 líneas que no pintan nada en la portada ni
   en las páginas de servicio, y bloques.css ya pesa 92 KB.

   POR QUÉ EL CSS NO VIVE DENTRO DEL POST

   El sistema del que sale esta hoja —el blog de Consulting HME— mete el CSS en
   un <style> dentro de cada entrada. Ahí tiene sentido: no hay tema hijo. Aquí
   sí lo hay, y meterlo dentro tendría tres costes concretos:

     1. **Petroleum tiene tema claro y oscuro.** Un `<style>` escrito a mano
        acaba con colores fijos —`#ffffff` de fondo, `#1a1a1a` de texto— y en
        oscuro se rompe entero. Aquí TODO sale de variables y se voltea solo.
     2. Serían ~600 líneas repetidas en cada entrada publicada. Cambiar un color
        obligaría a reeditar todos los posts, uno por uno.
     3. Rank Math analiza el contenido de la entrada. Con el CSS dentro, lo que
        mide deja de ser texto. Ya pasó en la portada: el 90 % era código y
        quedaban 74 palabras reales.

   A cambio, la entrada depende del tema hijo. Es un intercambio consciente: se
   gana diseño y consistencia, se pierde portabilidad. Si algún día se migra de
   tema, esta hoja se lleva consigo.

   VOCABULARIO: todo cuelga de `.pg-art`. Sin JS — los desplegables son
   <details> nativos y el revelado al hacer scroll es CSS puro, dentro de un
   @supports para que donde no haya soporte se vea completo y quieto.

   REGLA QUE ATRAVIESA TODO EL ARCHIVO: ninguna degradación esconde contenido.
   Nada arranca en `opacity:0` fuera de un @supports.
   ========================================================================== */

.pg-art{
  /* La medida de lectura. 68ch a 17.5px son ~72 caracteres por renglón, que es
     donde la vista salta de renglón sin perderse. Blocksy da el ancho del
     contenedor; esto acota la columna de texto dentro de él. */
  --pg-art-medida:68ch;
  font-family:var(--pg-font);
  color:var(--pg-fg);
}

/* --------------------------------------------------------------------------
   1. RITMO TIPOGRÁFICO
   -------------------------------------------------------------------------- */
.pg-art p{
  margin:0 0 22px;
  max-width:var(--pg-art-medida);
  font-size:17.5px;line-height:1.75;color:var(--pg-fg);
}
/* La entradilla. Más grande que el cuerpo pero NO en negrita: el peso extra en
   un párrafo largo cansa y compite con los títulos. */
.pg-art .pg-art__lead{
  font-size:20px;line-height:1.65;
  color:var(--pg-head);
  margin-bottom:28px;
}
.pg-art h2{
  margin:52px 0 18px;
  font-size:clamp(25px,2.6vw,31px);font-weight:800;line-height:1.2;
  letter-spacing:-.025em;color:var(--pg-head);
  /* El filete se dibuja con un pseudo-elemento y no con `border-bottom` para
     poder animarlo con el scroll sin tocar el layout. */
  position:relative;padding-bottom:12px;
}
.pg-art h2::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--pg-accent),transparent 88%);
  transform:scaleX(1);transform-origin:0 50%;
}
.pg-art h3{
  margin:36px 0 14px;
  font-size:clamp(19px,1.8vw,21px);font-weight:800;line-height:1.3;
  letter-spacing:-.015em;color:var(--pg-head);
}
.pg-art strong{color:var(--pg-head);font-weight:700;}
.pg-art em{font-style:italic;}

/* Enlaces del cuerpo. El subrayado es un pseudo-elemento que engorda al pasar
   el cursor: cambiar `text-decoration-thickness` reflowa la línea. */
.pg-art p a,
.pg-art li a,
.pg-art figcaption a{
  position:relative;color:var(--pg-accent);text-decoration:none;font-weight:600;
  transition:color var(--pg-base) var(--pg-ease);
}
.pg-art p a::after,
.pg-art li a::after,
.pg-art figcaption a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;opacity:.42;transform-origin:0 100%;
  transition:transform 220ms var(--pg-ease),opacity 220ms linear;
}
@media (hover:hover) and (pointer:fine){
  .pg-art p a:hover::after,
  .pg-art li a:hover::after,
  .pg-art figcaption a:hover::after{transform:scaleY(2.2);opacity:1;}
}

/* --------------------------------------------------------------------------
   2. RESUMEN — «Lo que necesita saber»
   Lo primero que se ve. Es el bloque que resuelve al lector con prisa: quien
   llega desde el celular buscando «¿me aplica o no?» tiene que poder irse
   sabiendo la respuesta sin bajar.
   -------------------------------------------------------------------------- */
.pg-art__resumen{
  margin:0 0 34px;padding:24px 26px;
  background:var(--pg-surface);
  background:linear-gradient(
    168deg,
    color-mix(in srgb,var(--pg-gold) 8%, var(--pg-surface)) 0%,
    var(--pg-surface) 70%
  );
  border:1px solid var(--pg-line);
  border-left:4px solid var(--pg-accent);
  border-radius:0 14px 14px 0;
}
.pg-art .pg-art__resumen-t{
  margin:0 0 16px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pg-accent);
}
.pg-art__resumen ul{margin:0;padding:0;list-style:none;}
.pg-art__resumen li{
  position:relative;margin:0 0 13px;padding-left:26px;
  max-width:none;
  font-size:16px;line-height:1.62;color:var(--pg-fg);
}
.pg-art__resumen li:last-child{margin-bottom:0;}
.pg-art__resumen li::before{
  content:"";position:absolute;left:4px;top:.58em;
  width:7px;height:7px;border-radius:50%;background:var(--pg-accent);
}

/* --------------------------------------------------------------------------
   3. ÍNDICE
   Cerrado siempre. Abierto empuja el contenido hacia abajo justo cuando el
   lector acaba de leer el resumen y quiere empezar; y el resumen ya cubre a
   quien tiene prisa.
   -------------------------------------------------------------------------- */
.pg-art__indice{
  margin:0 0 38px;
  background:var(--pg-surface);
  border:1px solid var(--pg-line);border-radius:12px;
  overflow:hidden;
}
.pg-art__indice > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:14px 18px;
  font-size:15px;font-weight:700;color:var(--pg-head);
}
.pg-art__indice > summary::-webkit-details-marker{display:none;}
.pg-art__indice > summary::after{
  content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--pg-accent);border-bottom:2px solid var(--pg-accent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform 380ms var(--pg-ease);
}
.pg-art__indice[open] > summary::after{transform:rotate(-135deg) translateY(-2px);}
.pg-art__indice ol{margin:0;padding:2px 20px 18px 40px;}
.pg-art__indice li{
  margin:0;max-width:none;
  font-size:15px;line-height:1.9;color:var(--pg-muted);
}
.pg-art__indice a{color:var(--pg-accent);text-decoration:none;font-weight:600;}
@media (hover:hover) and (pointer:fine){
  .pg-art__indice a:hover{text-decoration:underline;}
}

/* --------------------------------------------------------------------------
   4. AVISOS
   Dorado = dato normativo o matiz. Ámbar = tiene reloj.
   Máximo 3 ámbar por entrada: a partir de ahí dejan de alertar de nada.
   -------------------------------------------------------------------------- */
.pg-art__aviso{
  margin:0 0 32px;padding:20px 24px;
  border-radius:0 12px 12px 0;
  background:var(--pg-surface);
  border-left:4px solid var(--pg-accent);
  transition:transform 260ms var(--pg-ease),box-shadow 260ms var(--pg-ease);
}
.pg-art__aviso--reloj{
  background:var(--pg-amb-bg);
  border-left-color:var(--pg-amb-line);
}
.pg-art .pg-art__aviso-t{
  margin:0 0 9px;max-width:none;
  font-size:15.5px;font-weight:800;color:var(--pg-accent);
}
.pg-art__aviso--reloj .pg-art__aviso-t{color:var(--pg-amb-fg);}
.pg-art__aviso p{margin:0;max-width:none;font-size:16px;line-height:1.68;}
.pg-art__aviso--reloj p{color:var(--pg-amb-fg);}
@media (hover:hover) and (pointer:fine){
  .pg-art__aviso:hover{
    transform:translateX(4px);
    box-shadow:0 10px 26px -12px var(--pg-halo);
  }
}

/* --------------------------------------------------------------------------
   5. LISTA DE PUNTOS
   Cada punto es una tarjeta, no un renglón con viñeta: en una guía normativa
   los puntos son unidades independientes que se leen sueltas y se comparten
   sueltas ("mándame el punto 3").
   -------------------------------------------------------------------------- */
.pg-art__lista{
  margin:0 0 34px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:11px;
}
.pg-art__lista li{
  display:flex;align-items:flex-start;gap:13px;
  margin:0;padding:15px 18px;max-width:none;
  font-size:16px;line-height:1.68;color:var(--pg-fg);
  background:var(--pg-bg);
  border:1px solid var(--pg-line);border-radius:10px;
  transition:transform 260ms var(--pg-ease),
             border-color 200ms var(--pg-ease),
             box-shadow 260ms var(--pg-ease);
}
/* El número o la palomita. Es un <span> en el marcado y no un ::before con
   `counter`, porque en algunas listas el símbolo no es correlativo: hay listas
   de palomitas, de tachas y de números, y el marcado tiene que poder decirlo. */
.pg-art__ico{
  flex:none;display:grid;place-items:center;
  width:25px;height:25px;margin-top:1px;border-radius:50%;
  background:var(--pg-accent);color:var(--pg-bg);
  font-size:13px;font-weight:800;line-height:1;
}
.pg-art__ico--no{background:var(--pg-muted);}
@media (hover:hover) and (pointer:fine){
  .pg-art__lista li:hover{
    transform:translateX(5px);
    border-color:color-mix(in srgb,var(--pg-gold) 40%, var(--pg-line));
    box-shadow:0 10px 26px -14px var(--pg-halo);
  }
}

/* --------------------------------------------------------------------------
   6. TABLA
   -------------------------------------------------------------------------- */
.pg-art .pg-art__tabla-aviso{
  display:none;margin:0 0 8px;max-width:none;
  font-size:13px;color:var(--pg-muted);
}
.pg-art__tabla-caja{
  margin:0 0 34px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--pg-line);border-radius:12px;
}
.pg-art__tabla{
  width:100%;min-width:520px;border-collapse:collapse;font-size:15px;
}
.pg-art__tabla thead th{
  padding:13px 16px;text-align:left;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pg-accent);
  background:var(--pg-surface);
  border-bottom:1px solid var(--pg-line);
}
.pg-art__tabla td{
  padding:13px 16px;line-height:1.6;color:var(--pg-fg);
  border-bottom:1px solid var(--pg-line);
}
.pg-art__tabla tbody tr:last-child td{border-bottom:0;}
.pg-art__tabla td:first-child{font-weight:700;color:var(--pg-head);}
@media (hover:hover) and (pointer:fine){
  .pg-art__tabla tbody tr{transition:background-color 180ms linear;}
  .pg-art__tabla tbody tr:hover{background:var(--pg-surface);}
}
@media (max-width:700px){
  .pg-art__tabla-aviso{display:block;}
}

/* --------------------------------------------------------------------------
   7. DESPLEGABLES
   Para el detalle de segundo nivel y las preguntas frecuentes.
   NUNCA para una fecha límite ni para «a quién aplica»: eso va abierto.
   El contenido colapsado SÍ está en el HTML, así que Rank Math y Google lo
   indexan igual.
   -------------------------------------------------------------------------- */
.pg-art__acordeon{
  margin:0 0 34px;display:flex;flex-direction:column;gap:10px;
}
.pg-art__desp{
  background:var(--pg-bg);
  border:1px solid var(--pg-line);border-radius:12px;
  transition:border-color 220ms var(--pg-ease),box-shadow 260ms var(--pg-ease);
}
.pg-art__desp[open]{
  border-color:color-mix(in srgb,var(--pg-gold) 45%, var(--pg-line));
  box-shadow:0 10px 28px -16px var(--pg-glow);
}
.pg-art__desp > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  min-height:52px;padding:15px 18px;
  font-size:16.5px;font-weight:700;line-height:1.45;color:var(--pg-head);
  transition:transform 140ms var(--pg-ease);
}
.pg-art__desp > summary::-webkit-details-marker{display:none;}
.pg-art__desp > summary:active{transform:scale(.985);}
/* El marcador + / −. Son dos degradados sólidos como fondo: una cruz dibujada
   con dos <span> extra sería marcado que el redactor tendría que escribir a
   mano en cada pregunta. */
.pg-art__desp > summary::before{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background-color:var(--pg-surface);
  background-image:linear-gradient(var(--pg-accent),var(--pg-accent)),
                   linear-gradient(var(--pg-accent),var(--pg-accent));
  background-size:11px 2px,2px 11px;
  background-position:center,center;
  background-repeat:no-repeat;
  transition:background-color 200ms linear,transform 380ms var(--pg-ease-out);
}
.pg-art__desp[open] > summary::before{
  background-color:var(--pg-accent);
  background-image:linear-gradient(var(--pg-bg),var(--pg-bg));
  background-size:11px 2px;
  transform:rotate(180deg) scale(1.06);
}
.pg-art__desp-cuerpo{padding:0 18px 18px 58px;}
.pg-art__desp-cuerpo p{margin:0 0 12px;font-size:16px;line-height:1.7;}
.pg-art__desp-cuerpo p:last-child{margin-bottom:0;}
@media (max-width:700px){
  .pg-art__desp-cuerpo{padding-left:18px;}
}
@media (hover:hover) and (pointer:fine){
  .pg-art__desp:hover{border-color:color-mix(in srgb,var(--pg-gold) 30%, var(--pg-line));}
}

/* La animación de apertura. `::details-content` es la forma nativa y sin JS de
   animar la altura. Donde no haya soporte abre de golpe: el contenido está
   intacto, sólo no se desliza. */
.pg-art__desp::details-content{
  block-size:0;overflow:hidden;opacity:0;
  transform:translateY(-8px);
  transition:content-visibility 280ms allow-discrete,
             block-size 280ms var(--pg-ease),
             transform 280ms var(--pg-ease),
             opacity 200ms linear;
}
.pg-art__desp[open]::details-content{
  block-size:auto;opacity:1;transform:translateY(0);
}
/* Cerrar SIEMPRE más rápido que abrir: la salida no se mira, se espera. */
.pg-art__desp:not([open])::details-content{
  transition-duration:180ms,180ms,180ms,130ms;
}

/* --------------------------------------------------------------------------
   8. FIGURA
   Obligatoria por SEO: Rank Math exige una imagen DENTRO del contenido y la
   destacada no le cuenta. La palabra clave va en el `alt`.
   -------------------------------------------------------------------------- */
.pg-art__fig{margin:0 0 34px;}
.pg-art__fig img{
  display:block;width:100%;height:auto;
  border:1px solid var(--pg-line);border-radius:12px;
}
.pg-art__fig figcaption{
  margin-top:11px;max-width:var(--pg-art-medida);
  font-size:14px;line-height:1.6;font-style:italic;color:var(--pg-muted);
}

/* --------------------------------------------------------------------------
   9. LLAMADA A LA ACCIÓN
   -------------------------------------------------------------------------- */
.pg-art__cta{
  position:relative;overflow:hidden;
  margin:0 0 40px;padding:36px 30px;
  background:var(--pg-ink);border-radius:16px;
  text-align:center;
}
/* El resplandor dorado. Va en un pseudo-elemento para poder derivarlo con el
   scroll sin repintar la caja. */
.pg-art__cta::before{
  content:"";position:absolute;top:-60%;right:-18%;
  width:320px;height:320px;pointer-events:none;
  background:radial-gradient(circle,rgba(203,167,5,.30),transparent 66%);
}
/* OJO CON LA ESPECIFICIDAD AQUÍ, Y NO ES UN DETALLE MENOR.
   Los dos textos del CTA son `<p>`, así que compiten con la regla general
   `.pg-art p` — que es 0-1-1, porque lleva una clase y un tipo. Una clase sola
   (`.pg-art__cta-t`, 0-1-0) PIERDE contra ella.
   Eso dejaba el título y el párrafo del CTA en `--pg-fg`: sobre la caja negra,
   en tema claro, eran letras casi negras sobre negro — invisibles. En oscuro no
   se notaba, porque ahí `--pg-fg` ya es claro. Por eso van con `.pg-art` delante.
   Y los colores van fijos a propósito: la caja es negra en los dos temas, así
   que su texto no se voltea. Es la única excepción a «ningún color a mano». */
.pg-art .pg-art__cta-t{
  position:relative;margin:0 0 10px;max-width:none;
  font-size:clamp(21px,2.2vw,25px);font-weight:800;line-height:1.25;
  letter-spacing:-.02em;color:#ffffff;
}
.pg-art .pg-art__cta-p{
  position:relative;margin:0 auto 24px;max-width:56ch;
  font-size:16px;line-height:1.65;color:#c9c4b4;
}
.pg-art__cta .pg-btn{position:relative;}

/* --------------------------------------------------------------------------
   10. FUENTES Y NOTA LEGAL
   No es adorno: es lo que separa una guía de una unidad de inspección de una
   nota de blog. Cada dato con su publicación.
   -------------------------------------------------------------------------- */
.pg-art__fuentes{
  margin:44px 0 0;padding:24px 26px;
  background:var(--pg-surface);
  border:1px solid var(--pg-line);border-radius:14px;
}
.pg-art .pg-art__fuentes-t{
  margin:0 0 14px;max-width:none;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pg-accent);
}
.pg-art__fuentes ol{margin:0;padding-left:20px;}
.pg-art__fuentes li{
  margin:0 0 10px;max-width:none;
  font-size:14.5px;line-height:1.62;color:var(--pg-muted);
}
.pg-art__fuentes li:last-child{margin-bottom:0;}
.pg-art .pg-art__nota{
  margin:18px 0 0;max-width:none;
  font-size:13.5px;line-height:1.6;font-style:italic;color:var(--pg-muted);
}

/* --------------------------------------------------------------------------
   11. MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .pg-art p{font-size:16.5px;}
  .pg-art .pg-art__lead{font-size:18.5px;}
  .pg-art h2{margin-top:40px;}
  .pg-art__resumen{padding:20px 20px;}
  .pg-art__cta{padding:28px 20px;}
  .pg-art__cta .pg-btn{width:100%;}
  .pg-art__fuentes{padding:20px 20px;}
}

/* --------------------------------------------------------------------------
   12. MOVIMIENTO
   Todo dentro de @supports. El estado en reposo es el FINAL: si el navegador no
   soporta animaciones ligadas al scroll, la entrada se ve completa y quieta.
   Nada arranca invisible fuera de aquí.
   -------------------------------------------------------------------------- */
@keyframes pg-art-entra{
  from{opacity:0;transform:translateY(18px) scale(.99);filter:blur(6px);}
  to  {opacity:1;transform:translateY(0)    scale(1);  filter:blur(0);}
}
@keyframes pg-art-entra-corto{
  from{opacity:0;transform:translateY(11px);filter:blur(3px);}
  to  {opacity:1;transform:translateY(0);   filter:blur(0);}
}
@keyframes pg-art-traza{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes pg-art-deriva{
  from{transform:translate3d(-26px, 32px,0);}
  to  {transform:translate3d( 26px,-32px,0);}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pg-art__resumen,
    .pg-art__aviso,
    .pg-art__tabla-caja,
    .pg-art__acordeon,
    .pg-art__fig,
    .pg-art__cta,
    .pg-art__fuentes{
      animation:pg-art-entra 560ms var(--pg-ease) both;
      animation-timeline:view();
      animation-range:entry 0% entry 52%;
    }
    /* El filete del H2 se dibuja al llegar: marca que empieza sección nueva. */
    .pg-art h2::after{
      animation:pg-art-traza 700ms var(--pg-ease) both;
      animation-timeline:view();
      animation-range:entry 8% entry 62%;
    }
    /* Cascada. Con `animation-timeline` el `animation-delay` se IGNORA — el
       escalonado se hace desplazando el rango de cada elemento, no retrasándolo. */
    .pg-art__resumen li,
    .pg-art__lista li{
      animation:pg-art-entra-corto 460ms var(--pg-ease) both;
      animation-timeline:view();
    }
    .pg-art__resumen li:nth-child(1),.pg-art__lista li:nth-child(1){animation-range:entry 0%  entry 32%;}
    .pg-art__resumen li:nth-child(2),.pg-art__lista li:nth-child(2){animation-range:entry 5%  entry 37%;}
    .pg-art__resumen li:nth-child(3),.pg-art__lista li:nth-child(3){animation-range:entry 10% entry 42%;}
    .pg-art__resumen li:nth-child(4),.pg-art__lista li:nth-child(4){animation-range:entry 15% entry 47%;}
    .pg-art__resumen li:nth-child(5),.pg-art__lista li:nth-child(5){animation-range:entry 20% entry 52%;}
    .pg-art__resumen li:nth-child(n+6),.pg-art__lista li:nth-child(n+6){animation-range:entry 25% entry 57%;}
    /* El resplandor del CTA deriva con el scroll. Es paralaje, no un bucle:
       cero animaciones infinitas en una página de lectura larga. */
    .pg-art__cta::before{
      animation:pg-art-deriva linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}

/* Red de seguridad. Se apaga TODO el movimiento —incluido el desenfoque— y se
   fuerza el estado final visible. Ni un pixel de contenido se pierde. */
@media (prefers-reduced-motion:reduce){
  .pg-art *,.pg-art *::before,.pg-art *::after{
    animation:none!important;
    transition-duration:1ms!important;
    filter:none!important;
  }
  .pg-art h2::after{transform:scaleX(1)!important;}
  .pg-art__resumen li,
  .pg-art__lista li{opacity:1!important;transform:none!important;}
}