/* ============================================================
   PAGELY — hoja base compartida por /blog y /blog/[id]
   Los mismos tokens que la landing. Las páginas antiguas los llevan
   en línea; estas dos los cargan de aquí para no triplicarlos.
   ============================================================ */
:root{
  --s-contain: max(3vw, 16px);
  --container-md: 900px; --container-lg: 1024px; --container-xl: 1200px;
  --width-md: min(100vw - (var(--s-contain) * 2), var(--container-md));
  --width-lg: min(100vw - (var(--s-contain) * 2), var(--container-lg));
  --width-xl: min(100vw - (var(--s-contain) * 2), var(--container-xl));
  --container-2xl: 1600px;
  --width-2xl: min(100vw - (var(--s-contain) * 2), var(--container-2xl));
  --t-b-1-hero: 400 clamp(14px,1.2vw,19px)/1.4 var(--font-sans);
  --t-tag-1: 500 .6875rem/1 var(--font-sans);
  --t-l-1: 500 .875rem/1 var(--font-sans);
  --radius-card: 10px;
  --dur-ui: 200ms;
  --padding-xl: calc((100vw - var(--width-xl)) / 2);
  --s-section: 80px;
  --h-announcement: 32px; --h-header: 36px;

  --bg:#E7E7E7; --dot:#C9C9C9;
  --ink:#151515; --ink2:#2A2A2A; --card:#141414; --line:#242424; --line2:#2E2E2E;
  --text:#111111; --muted:#8C8C8C; --muted2:#6F6F6F;
  --yellow:#FDF389; --orange:#E8562A; --paper:#F6F4EE;
  --oscuro:#0D0D0D;

  --font-serif:'Instrument Serif', ui-serif, Georgia, serif;
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --t-b-1: 400 clamp(15px,1.15vw,18px)/1.5 var(--font-sans);
  --t-b-2: 400 .875rem/1.4 var(--font-sans);
  --t-b-3: 400 .8125rem/1.4 var(--font-sans);
  --t-b-4: 400 .75rem/1.4 var(--font-sans);
  --t-tag-1: 500 .6875rem/1 var(--font-sans);

  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-ui: 200ms;
  --radius-btn: 8px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border:0 solid; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font: var(--t-b-2); color:#EDEDED;
  background: radial-gradient(#1A1A1A 1px, transparent 1.2px) 0 0 / 22px 22px, var(--oscuro);
  -webkit-font-smoothing: antialiased; min-height:100svh;
}
button{ font:inherit; color:inherit; background:none; cursor:pointer; }
input{ font:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.iso{ display:block; width:auto; object-fit:contain; flex:0 0 auto; }

/* ============================================================
   CABECERA Y PIE — los mismos de la portada, no una versión propia.
   Copiados tal cual de pagely-hero.html para que el sitio se lea como
   uno solo. Al tocarlos allí, hay que traerlos aquí.
   ============================================================ */
/* ============================================================
   BARRA DE ANUNCIO
   ============================================================ */
.announcement{
  position: sticky; top: 0; z-index: 31;
  height: var(--h-announcement);
  margin: 0 14px;
  border-radius: 0 0 8px 8px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 400 13px/1 var(--font-sans);
  transform: translateY(-100%);
  transition: transform 600ms var(--ease-out);
}
.announcement.in{ transform: translateY(0); }
.announcement a{ color: var(--orange); text-underline-offset: 3px; text-decoration: underline; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position: fixed; top: var(--h-announcement); left: 0; right: 0; z-index: 32;
  padding: 8px 14px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
}
.hdr.in{ opacity: 1; transform: translateY(0); }
.hdr > *{ pointer-events: auto; }

.brandcard{
  width: 196px;
  background: var(--ink);
  border-radius: var(--radius-btn);
  color: #fff;
  overflow: hidden;
}
.brandcard__top{
  height: var(--h-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 12px;
}
.brandmark{ display:flex; align-items:center; gap:7px; font: var(--t-l-1); letter-spacing:-.01em; }
.brandmark .iso{ height: 17px; }
.burger{
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  transition: box-shadow var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);
}
.burger svg{ display:block; }
.burger .bar-v{ transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); transform-origin:center; }
.brandcard.open .burger{ box-shadow: inset 0 0 0 2px var(--orange); }
.brandcard.open .burger .bar-v{ opacity: 0; transform: scaleY(0); }

.brandcard__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 450ms var(--ease-out);
}
.brandcard.open .brandcard__panel{ grid-template-rows: 1fr; }
.brandcard__panelinner{ overflow: hidden; }
.menu{ padding: 6px 12px 12px; display: grid; gap: 2px; }
.menu a{
  font: 400 24px/1.35 var(--font-sans);
  color: #d6d6d6;
  opacity: 0; transform: translateY(6px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.menu a:hover{ color:#fff; }
.brandcard.open .menu a{ opacity: 1; transform: translateY(0); }
.menu-actions{ display: grid; gap: 6px; padding: 10px 12px 12px; }

.btn{
  height: var(--h-header);
  padding: 0 14px;
  border-radius: var(--radius-btn);
  font: 400 14px/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.btn:hover:not(.shiny){ filter: brightness(.94); }
.btn.shiny:hover{ translate: 0 -1px; }
.btn--yellow{ background: var(--yellow); color: var(--text); }
.btn--orange{ background: var(--orange); color: #fff; }
.btn--ghost{ background: transparent; color: #d6d6d6; box-shadow: inset 0 0 0 1px #3a3a3a; }
.btn--ghost:hover{ color:#fff; }
.hdr__actions{ display: flex; gap: 8px; }
/* bajo 900px los botones viven dentro del menú de marca, como en la portada */
@media (max-width: 899px){ .hdr__actions{ display: none; } }

/* El header va en `fixed`, así que el contenido necesita hueco arriba. */
.bajo-cabecera{ padding-top: calc(var(--h-announcement) + var(--h-header) + 26px); }

/* ---------- tarjeta de artículo ---------- */
.post{
  display:block; border-radius:18px; overflow:hidden;
  background:rgba(20,20,20,.55); border:1px solid var(--line);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out),
              box-shadow var(--dur-ui) var(--ease-out);
}
.post:hover{
  border-color: rgba(232,86,42,.5); transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(0,0,0,.45);
}
.post__img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#111; }
.post__img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 620ms var(--ease-out); }
.post:hover .post__img img{ transform: scale(1.07); }
.post__velo{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(13,13,13,.82), transparent 58%); }
.post__cat{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font:var(--t-tag-1); padding:5px 9px; border-radius:6px;
  background:rgba(13,13,13,.6); color:#EDEDED; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1);
}
.post__leer{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(13,13,13,.35); backdrop-filter:blur(2px);
  opacity:0; transition:opacity 300ms var(--ease-out);
  font:500 13.5px/1 var(--font-sans); color:#fff;
}
.post__leer::before{
  content:''; position:absolute; width:170px; height:42px; border-radius:999px;
  background:var(--orange); box-shadow:0 10px 26px rgba(232,86,42,.4);
  transition: transform 300ms cubic-bezier(.34,1.56,.64,1); transform: scale(.9);
}
.post:hover .post__leer{ opacity:1; }
.post:hover .post__leer::before{ transform:none; }
.post__leer svg, .post__leer span{ position:relative; z-index:1; }
.post__cuerpo{ padding:18px; }
.post__cuerpo h3{
  font:400 clamp(18px,1.6vw,22px)/1.22 var(--font-serif); letter-spacing:-.02em; color:#fff;
  transition: color var(--dur-ui) var(--ease-out);
}
.post:hover .post__cuerpo h3{ color:#FFD9C9; }
.post__cuerpo p{
  font:var(--t-b-3); color:var(--muted); margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post__pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.post__autor{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.post__autor i{
  flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center; font:600 11px/1 var(--font-sans); color:#fff; font-style:normal;
}
.post__autor b{ display:block; font:500 12.5px/1.2 var(--font-sans); color:#E8E8E8; }
.post__autor em{ display:block; font:var(--t-b-4); color:var(--muted2); font-style:normal; margin-top:2px; }
.post__min{ display:inline-flex; align-items:center; gap:5px; font:var(--t-b-4); color:var(--muted2); white-space:nowrap; }

/* ============================================================
   PIE
   ============================================================ */
.pie{
  position: relative; z-index: 6;
  background: #0D0D0D; color: #fff;
  padding: 205px var(--s-contain) 60px;
  overflow: hidden;
}
.pie__marca{
  position: absolute; left: 50%; top: 26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .18em;
  font: 400 clamp(70px, 13vw, 200px)/1 var(--font-sans);
  letter-spacing: -.05em;
  color: #242424;
  white-space: nowrap; pointer-events: none; user-select: none;
  will-change: transform;
}
.pie__marca .iso{
  /* el isotipo es naranja; aquí sólo hace de silueta junto al nombre en gris */
  height: .62em; filter: grayscale(1) brightness(.42);
}
.pie__card{
  position: relative;
  width: var(--width-2xl); margin-inline: auto;
  background: #1A1A1A; border-radius: 12px;
  padding: 34px 38px 22px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 40px;
}
.pie__news h3{ font: 400 clamp(22px, 2.1vw, 30px)/1.1 var(--font-serif); letter-spacing:-.02em; }
.pie__news p{ font: var(--t-b-3); color: #8C8C8C; margin: 8px 0 18px; }
.pie__form{
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 7px; padding: 5px 5px 5px 14px;
  max-width: 330px;
}
.pie__form input{
  flex: 1; min-width: 0; height: 32px;
  font: var(--t-b-2); color: var(--text); background: none; outline: none; border: 0;
}
.pie__form input::placeholder{ color: #9A9A9A; }
.pie__form button{
  width: 32px; height: 32px; border-radius: 5px;
  display: grid; place-items: center; color: #111;
  transition: background var(--dur-ui) var(--ease-out);
}
.pie__form button:hover{ background: #EDEDED; }
.pie__ok{ font: var(--t-b-3); color: var(--yellow); margin-top: 10px; min-height: 1.2em; }

.pie__cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pie__cols h4{ font: var(--t-tag-1); letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.pie__cols a{ display: block; font: var(--t-b-3); color: #7E7E7E; padding: 5px 0; transition: color var(--dur-ui) var(--ease-out); }
.pie__cols a:hover{ color: #fff; }

.pie__bottom{
  grid-column: 1 / -1;
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid #2A2A2A;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: var(--t-b-4); color: #6F6F6F;
}
.pie__bottom .estado{ display: inline-flex; align-items: center; gap: 7px; }
.pie__bottom .estado i{ width: 6px; height: 6px; border-radius: 999px; background: #7EC98A; }
.pie__legal{ display: flex; gap: 18px; flex-wrap: wrap; }
.pie__legal a:hover{ color: #fff; }

/* el pie de la portada apila columnas en pantallas medias y pequeñas */
@media (max-width: 1099px){ .pie__card{ grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 767px){ .pie__cols{ grid-template-columns: 1fr 1fr; } }


@media (prefers-reduced-motion: reduce){ *{ transition-duration:1ms !important; animation-duration:1ms !important; } html{ scroll-behavior:auto; } }

/* ============================================================
   BOTÓN CON BRILLO
   Portado del componente de referencia. El borde es un conic-gradient que
   gira: se pinta el fondo en `padding-box` y el degradado en `border-box`,
   con el borde transparente, así el color sólo asoma por el filo. Encima,
   una trama de puntos enmascarada y un destello que rota.
   El ángulo se anima con @property (una custom property registrada como
   <angle> sí interpola; una normal no) y con `animation-composition: add`
   se suman dos giros: uno lento siempre y otro rápido sólo al pasar.
   ============================================================ */
@property --ga  { syntax: "<angle>";      initial-value: 0deg; inherits: false; }
@property --gao { syntax: "<angle>";      initial-value: 0deg; inherits: false; }
@property --gp  { syntax: "<percentage>"; initial-value: 5%;   inherits: false; }
@property --gs  { syntax: "<color>";      initial-value: #fff; inherits: false; }

.shiny{
  --fondo: var(--orange);
  --brillo: #fff;
  --brillo-suave: #FFD2BC;
  --puntos: #fff;
  --filo: rgba(255,255,255,.26);
  --dur-brillo: 3s;
  --trans-brillo: 800ms cubic-bezier(.25,1,.5,1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    var(--fondo-img, linear-gradient(var(--fondo), var(--fondo))) padding-box,
    conic-gradient(
      from calc(var(--ga) - var(--gao)),
      transparent,
      var(--brillo) var(--gp),
      var(--gs) calc(var(--gp) * 2),
      var(--brillo) calc(var(--gp) * 3),
      transparent calc(var(--gp) * 4)
    ) border-box;
  box-shadow: inset 0 1px 0 var(--filo);
  transition: var(--trans-brillo);
  transition-property: --gao, --gp, --gs, translate, box-shadow, filter;
}
.shiny::before, .shiny::after, .shiny > .brilloenv::before{
  content: ''; pointer-events: none; position: absolute;
  left: 50%; top: 50%; translate: -50% -50%; z-index: -1;
}
/* trama de puntos, visible sólo en un arco que gira con el borde */
.shiny::before{
  --p: 2px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  background: radial-gradient(circle at var(--p) var(--p),
              var(--puntos) calc(var(--p) / 4), transparent 0) padding-box;
  background-size: calc(var(--p) * 2) calc(var(--p) * 2);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--ga) + 45deg), #000, transparent 10% 90%, #000);
          mask-image: conic-gradient(from calc(var(--ga) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: .26;
}
/* destello interior */
.shiny::after{
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--brillo), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
          mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .5;
}
.shiny > .brilloenv{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  max-width: 100%; min-width: 0;
}
/* Halo que respira bajo el texto, sólo al pasar por encima.
   Redondeado a propósito: en el componente original el botón es grande y
   el rectángulo del inset no se ve; en botones de 36px sí, y cantaba. */
.shiny > .brilloenv::before{
  width: calc(100% + 2.2rem); height: calc(100% + 1.6rem);
  border-radius: 999px;
  /* degradado en vez de `inset box-shadow`: a este tamaño la sombra dejaba
     una píldora con borde definido detrás del texto en lugar de un halo */
  background: radial-gradient(ellipse at 50% 105%, var(--brillo), transparent 68%);
  filter: blur(5px);
  opacity: 0;
  transition: opacity var(--trans-brillo);
  animation: respira calc(var(--dur-brillo) * 1.5) linear infinite;
}
.shiny, .shiny::before, .shiny::after{
  animation: giro-borde var(--dur-brillo) linear infinite,
             giro-borde calc(var(--dur-brillo) / .4) linear infinite reverse paused;
  animation-composition: add;
}
.shiny:is(:hover, :focus-visible){
  --gp: 20%; --gao: 95deg; --gs: var(--brillo-suave);
}
.shiny:is(:hover, :focus-visible),
.shiny:is(:hover, :focus-visible)::before,
.shiny:is(:hover, :focus-visible)::after{ animation-play-state: running; }
.shiny:is(:hover, :focus-visible) > .brilloenv::before{ opacity: 1; }
.shiny:active{ translate: 0 1px; }

@keyframes giro-borde{ to{ --ga: 360deg; } }
@keyframes respira{ from, to{ scale: 1 } 50%{ scale: 1.2 } }

/* --- variantes --- */
.shiny--naranja{
  --fondo-img: linear-gradient(180deg, #F3703F, #E8562A 58%, #D2441B);
  --brillo: #FFE7DC; --brillo-suave: #FFC3A6; --puntos: #fff;
  color: #fff;
}
.shiny--amarillo{
  --fondo: var(--yellow);
  --brillo: #E8562A; --brillo-suave: #F7B98A; --puntos: rgba(0,0,0,.5);
  --filo: rgba(255,255,255,.7);
  color: var(--text);
}
.shiny--oscuro{
  --fondo: #1A1A1A;
  --brillo: var(--orange); --brillo-suave: #F6A882; --puntos: #fff;
  --filo: rgba(255,255,255,.07);
  color: #EDEDED;
}
.shiny--oscuro::after{ opacity: .26; }
.shiny--oscuro::before{ opacity: .14; }

@media (prefers-reduced-motion: reduce){
  .shiny, .shiny::before, .shiny::after,
  .shiny > .brilloenv::before{ animation: none !important; }
}

/* ============================================================
   CURSOR MAGNÉTICO
   Capa que sigue al puntero con mezcla `exclusion`: se invierte sobre
   cualquier fondo, claro u oscuro. No sustituye al cursor del sistema,
   va encima. Sobre un elemento magnético adopta su caja; sobre texto se
   estira en vertical como un cursor de escritura.
   ============================================================ */
.cur{
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  mix-blend-mode: exclusion;
  pointer-events: none;
  opacity: 0;
  will-change: transform, width, height;
  transition: width 320ms cubic-bezier(.22,1,.36,1),
              height 320ms cubic-bezier(.22,1,.36,1),
              border-radius 320ms cubic-bezier(.22,1,.36,1),
              opacity 220ms linear;
}
.cur.visible{ opacity: 1; }
/* Sobre fondos de poco contraste la exclusión casi no se nota; el filtro
   sube el contraste de lo que hay detrás antes de mezclar. */
.cur--realce{ backdrop-filter: contrast(1.45); -webkit-backdrop-filter: contrast(1.45); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce){
  .cur{ display: none !important; }
}