/* Fuentes alojadas en el propio dominio.
   Antes venian de fonts.googleapis.com, que ademas pedia los ficheros a
   fonts.gstatic.com: dos dominios, dos negociaciones TLS, y un CSS que
   BLOQUEA el pintado. Medido en movil 4G: quitarlas bajo el LCP de la
   portada de 17,3 s a 2,1 s.
   Cada familia es UNA fuente variable, asi que un solo fichero cubre
   todos los pesos. Y no se precargan a proposito: en iPhone y Mac gana
   -apple-system y estos ficheros no llegan a pedirse nunca. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:optional;src:url(/fuentes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:optional;src:url(/fuentes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Estilos de la sección /analisis/ — mismo lenguaje visual que la home */
:root{
  --bg:#000; --surface:#0b0b0d; --surface-2:#131316;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  /* Contraste comprobado sobre negro: --muted 5,80:1 y --muted-2 5,35:1, los dos
     por encima del 4,5:1 que pide la WCAG para texto pequeño. El azul de Telegram
     va oscurecido (#1b7ba9 en vez de #229ED9) para que el texto blanco encima
     llegue a 4,72:1; con el original se quedaba en 3,02:1. */
  --gold:#d4af37; --gold-lt:#f0cf6d;
  --txt:#f5f5f7; --muted:#86868b; --muted-2:#808086;
  --red:#c4705c; --tg:#1b7ba9; --max:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}

/* NAV */
header.nav{position:sticky;top:0;z-index:90;height:52px;background:rgba(0,0,0,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-2)}
.nav-in{max-width:1080px;margin:0 auto;padding:0 26px;display:flex;align-items:center;
  justify-content:space-between;height:52px}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.brand svg,.brand img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.brand img{mix-blend-mode:screen}
.nav-links{display:flex;gap:26px;font-size:13px;color:var(--muted)}
.nav-links a:hover{color:var(--txt)}
/* EL CTA DE LA BARRA, que en estas veintiuna páginas no existía.
   `.nav-in` reparte con `space-between` y antes solo tenía dos hijos, así que
   con el botón de tercero los enlaces se van al centro, que es donde están en
   el resto del sitio.
   EL MISMO METAL QUE EN LA CABECERA GRANDE, con los tokens de esta hoja: banda
   de brillo arriba, corte a media altura, luz reflejada abajo, y los dos filos
   de un píxel. Un oro liso aquí y uno de verdad en la portada sería el mismo
   botón con dos materiales según la página.
   Y NO SE OCULTA EN MÓVIL. Debajo de 700 px `.nav-links` desaparece y estas
   páginas no tienen hamburguesa: hasta hoy el teléfono se quedaba sin ninguna
   navegación. El botón se queda, que es la única salida que había. */
/* EL DESPLEGABLE DE «ANÁLISIS DEL ORO», para que estas veintiuna páginas tengan
   el mismo menú y no solo los mismos enlaces. Ayer quedaron con cinco entradas
   planas donde el resto del sitio enseña cuatro y una caja, y Bau lo notó al
   llegar desde la portada: los destinos coincidían y la forma no.

   Son las reglas del armazón renombradas a las clases de esta hoja —`.nav-menu`
   y `.nav-caja`—, con los tokens de aquí en vez de los colores a pelo: `--gold`,
   `--txt` y `--muted` valen lo mismo que los literales que traía la nota, y así
   siguen al tema si algún día se mueve.

   El `::before` de la caja es un puente invisible de 18 px: sin él, el ratón
   cruza el hueco entre el rótulo y la caja, pierde el `:hover` y la caja se
   cierra antes de llegar. */
.nav-menu{position:relative}
.nav-menu>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:13px;white-space:nowrap;cursor:pointer;list-style:none;color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .22s cubic-bezier(.22,1,.36,1),border-color .22s cubic-bezier(.22,1,.36,1)}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:hover{color:var(--txt)}
.nav-menu[open]>summary{color:var(--txt);border-bottom-color:var(--gold)}
.nav-menu .chev{flex:none;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.nav-menu[open] .chev{transform:rotate(180deg)}
.nav-caja{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  z-index:60;width:320px;padding:8px;border-radius:14px;background:rgba(8,7,6,.975);
  border:1px solid rgba(245,245,247,.09);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 34px 70px -34px rgba(0,0,0,.95)}
.nav-caja::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-caja a{display:block;padding:12px 14px;border-radius:10px;white-space:normal;
  transition:background .2s cubic-bezier(.22,1,.36,1)}
.nav-caja a:hover{background:rgba(212,175,55,.08)}
.nav-caja b{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.nav-caja span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}
/* 44 px Y NO 34, que es lo que yo puse ayer. En el armazón este mismo botón
   mide 44 en las quince páginas; medido en producción, aquí medía 34. Diez
   píxeles en la única pieza que está en las dos barras a la vez. */
.nav-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#1a1205;border:1px solid rgba(122,94,26,.55);white-space:nowrap;
  background:linear-gradient(180deg,#f2d98a 0%,#dcb94e 45%,#c09a34 55%,#d9b962 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(60,42,6,.3),0 1px 2px rgba(0,0,0,.42);
  transition:background .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.nav-cta:hover{background:linear-gradient(180deg,#f8e6a8 0%,#e6c75f 45%,#cda73c 55%,#e3c877 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(60,42,6,.3),0 2px 4px rgba(0,0,0,.4),0 7px 16px -10px rgba(214,170,60,.42)}}
.nav-cta:active{background:linear-gradient(180deg,#dcc272 0%,#c9a73f 45%,#ab8a2c 55%,#c2a455 100%);
  box-shadow:inset 0 1px 2px rgba(60,42,6,.4)}
.nav-cta:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
@media(max-width:700px){.nav-links{display:none}}
@media(max-width:420px){.nav-cta{font-size:10px;padding:0 11px;letter-spacing:.06em}}

/* MIGAS */
/* ═══ BANDA DE ORO EN LA CABECERA ═══
   Fondo a sangre detras de las migas y del titular de cada guia. Es la primera
   pantalla que ve quien llega de Google, y hasta ahora era negro liso.

   Va en body::before y no en un div para no tocar los ocho ficheros HTML: una
   sola regla los cambia todos. Position absolute (no fixed) para que se vaya con
   el scroll — fija se sentiria como un fondo de escritorio, no como una cabecera.

   La imagen ya viene oscurecida al generarla (brillo medio 32 de 255) y encima
   lleva un degradado que la apaga del todo antes de que empiece el cuerpo del
   texto. El contraste del titular esta medido, no estimado.

   No lleva alto fijo en px sino svh: en un movil la cabecera ocupa mas pantalla
   que en un portatil, y la banda tiene que acabar donde acaba ella. */
body::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:clamp(300px,42svh,460px);
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.88) 0%,rgba(0,0,0,.84) 12%,
      rgba(0,0,0,.56) 30%,rgba(0,0,0,.62) 52%,
      rgba(0,0,0,.80) 78%,var(--bg) 100%),
    url("/oro-banda.webp") center top/cover no-repeat;
  background-color:var(--bg);
  z-index:0;pointer-events:none}
/* Todo lo que va encima necesita contexto propio, o la banda lo taparia. */
body>.wrap,body>header,body>footer,body>.progreso,body>.bar,body>.float{position:relative;z-index:1}
@media(max-width:760px){
  body::before{height:clamp(260px,38svh,380px);
    background-image:
      linear-gradient(180deg,
        rgba(0,0,0,.88) 0%,rgba(0,0,0,.84) 12%,
        rgba(0,0,0,.58) 32%,rgba(0,0,0,.66) 56%,
        rgba(0,0,0,.82) 80%,var(--bg) 100%),
      url("/oro-banda-sm.webp")}
}
/* Sobre la banda, --muted-2 daba 1,23:1. Se aclara SOLO aquí. */
.crumb{font-size:13px;color:#b6b6bd;padding:26px 0 0}
.crumb a:hover{color:var(--gold-lt)}
.crumb span{margin:0 7px;opacity:.5}

/* CABECERA */
.head{padding:26px 0 40px;border-bottom:1px solid var(--line-2);margin-bottom:40px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
/* balance reparte el titular en lineas de ancho parecido en vez de dejar dos
   palabras solas en la ultima. pretty hace lo mismo, mas suave, para parrafos.
   Quien no lo soporte lo ignora y lo ve como antes. */
h1{font-size:clamp(31px,5.4vw,50px);font-weight:600;letter-spacing:-.032em;line-height:1.1;
  margin:14px 0 16px;text-wrap:balance}
.lead{font-size:clamp(17px,2.1vw,20px);color:var(--muted);letter-spacing:-.01em;
  text-wrap:pretty}
/* Igual que .crumb: sobre la banda rozaba el minimo (4,47 de 4,5). */
.meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:#a8a8af}
.meta b{color:var(--muted);font-weight:500}

/* AVISO EDUCATIVO */
.edu{border-left:2px solid var(--gold);background:rgba(212,175,55,.05);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:0 0 36px;font-size:13.5px;color:var(--muted);line-height:1.55}
.edu b{color:var(--txt);font-weight:600}

/* BLOQUES DEL ORDEN DEL ORO */
.paso{border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin-bottom:14px;
  background:var(--surface)}
.paso .n{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.paso .n i{font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(212,175,55,.15);
  display:grid;place-items:center;font-size:11px}
.paso h2{font-size:23px;font-weight:600;letter-spacing:-.022em;margin-bottom:12px;text-wrap:balance}
.paso p{color:var(--muted);font-size:16px;margin-bottom:12px}
.paso p:last-child{margin-bottom:0}

/* ═══ ENLACES DENTRO DEL TEXTO ═══════════════════════════════════════════
   El 20 de agosto de 2026 se metieron 16 enlaces contextuales entre guías.
   Sin esta regla eran INVISIBLES: la regla global «a{color:inherit;
   text-decoration:none}» les quitaba el color y el subrayado, así que un
   lector no podía distinguirlos del texto normal. Google sí los seguía; una
   persona no.
   Lleva subrayado ADEMÁS del color a propósito: la WCAG (1.4.1) no permite
   que un enlace dentro de un párrafo se distinga solo por el color, porque
   quien no distingue el dorado del gris no lo ve.
   #f0cf6d sobre negro da 13,85:1, muy por encima del 4,5:1 exigido.
   Los bloques .rel del final NO entran aquí: son tarjetas, ya se ven. */
.paso p a,.paso li a,.respuesta a,.mito a{
  color:var(--gold-lt);
  text-decoration:underline;
  text-decoration-color:rgba(240,207,109,.38);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:text-decoration-color .18s ease,color .18s ease}
.paso p a:hover,.paso li a:hover,.respuesta a:hover,.mito a:hover{
  text-decoration-color:var(--gold-lt)}
/* Al navegar con teclado el foco tiene que verse, y el subrayado no basta. */
.paso p a:focus-visible,.paso li a:focus-visible,
.respuesta a:focus-visible,.mito a:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:3px}
.paso b{color:var(--txt);font-weight:600}
.paso ul{margin:0 0 12px 20px}
.paso li{color:var(--muted);font-size:16px;margin-bottom:7px}

/* GRÁFICO */
figure{margin:0 0 14px}
figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:16px;
  background:var(--surface)}
figcaption{font-size:13px;color:var(--muted-2);margin-top:10px;text-align:center}
.sin-img{border:1px dashed var(--line);border-radius:16px;padding:50px 20px;text-align:center;
  color:var(--muted-2);font-size:14px;background:var(--surface)}

/* LA RESPUESTA CORTA — el bloque que Google puede usar como destacado */
.respuesta{border:1px solid rgba(212,175,55,.4);border-radius:20px;padding:28px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(212,175,55,.07),transparent 60%),var(--surface)}
.respuesta .t{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.respuesta p{font-size:18px;color:var(--txt);line-height:1.55;letter-spacing:-.012em}

/* DOS COLUMNAS: es para ti / no es para ti */
.esc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.esc-box{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--surface)}
.esc-box .t{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:10px;color:var(--gold)}
.esc-box.alt{border-color:rgba(196,112,92,.28)}
.esc-box.alt .t{color:var(--red)}
.esc-box p{font-size:15.5px;color:var(--muted);line-height:1.55}
@media(max-width:640px){.esc{grid-template-columns:1fr}}

/* DESMONTAR MITOS */
.mito{border-left:2px solid var(--red);background:rgba(196,112,92,.06);border-radius:0 16px 16px 0;
  padding:24px 26px;margin-bottom:14px}
.mito .t{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px}
.mito p{font-size:16px;color:var(--muted)}
.mito b{color:var(--txt);font-weight:600}

/* TABLA DE DATOS
   Va envuelta en .tabla y no suelta: el div es el que scrollea en horizontal
   cuando la tabla no cabe, para que el movil no ensanche toda la pagina. */
.tabla{overflow-x:auto;margin:0 0 14px;-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:15px;min-width:430px}
.tabla th,.tabla td{padding:11px 13px;text-align:right;border-bottom:1px solid var(--line-2)}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla thead th{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border-bottom-color:var(--line);white-space:nowrap}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla td{color:var(--muted)}
.tabla td b{color:var(--txt);font-weight:600}
/* La fila que hay que mirar: se tinta en rojo apagado, el mismo del bloque .mito */
.tabla tr.ojo td{background:rgba(196,112,92,.08)}
.tabla tr.ojo td b{color:var(--red)}
.tabla caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--muted-2);
  padding-top:12px;line-height:1.55}

/* ENLACES INTERNOS */
.rel{border-top:1px solid var(--line-2);margin-top:44px;padding-top:34px}
.rel h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.rel a{display:block;border:1px solid var(--line);border-radius:14px;padding:16px 20px;
  margin-bottom:9px;font-size:15.5px;transition:border-color .25s,background .25s}
.rel a:hover{border-color:rgba(212,175,55,.45);background:var(--surface)}
.rel a span{display:block;font-size:13px;color:var(--muted-2);margin-top:3px}

/* CTA */
.cta{border:1px solid var(--line);border-radius:22px;padding:36px 30px;text-align:center;
  margin-top:40px;background:var(--surface)}
.cta h3{font-size:23px;font-weight:600;letter-spacing:-.022em;margin-bottom:10px;text-wrap:balance}
.cta p{color:var(--muted);font-size:15.5px;margin-bottom:22px;max-width:460px;margin-inline:auto}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* background:transparent es OBLIGATORIO, no decorativo. Hasta el 5 de septiembre
   de 2026 .btn solo se usaba en <a>, que ya viene sin fondo. El primer
   <button class="btn btn-line"> de la web (el «Ver un ejemplo» de /noticias/
   semana/) salio con el gris claro por defecto del navegador y el texto blanco
   de .btn-line encima: ilegible. Las variantes de color se declaran despues y
   siguen ganando. */
/* LA FORMA DEL BOTÓN, IGUALADA AL RESTO DEL SITIO el 4 de octubre de 2026.
   Era `border-radius:980px`: una píldora completamente redonda, cuando el resto
   de la web pasó a esquinas de 4 px en la auditoría de sobriedad. Medido en
   producción, el mismo botón: 980 px aquí, 4 px en /el-canal/, /clases-privadas/
   y las guías. Es lo que más cantaba al llegar desde la portada, porque el botón
   de descarga de /guia-gratis/ es lo primero que se ve.
   El alto va por `min-height` y no por relleno vertical, como en el armazón: así
   un botón con dos líneas de texto no crece el doble.
   NO se toca el color: medido, `.btn-gold` ya es el mismo oro que allí; el
   `#b79a55` de la nota es un pisado que la portada se hace en su propio héroe. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
  font-size:15.5px;font-weight:500;letter-spacing:-.01em;min-height:48px;padding:0 24px;
  border-radius:4px;
  border:1px solid transparent;background:transparent;cursor:pointer;
  transition:transform .18s,filter .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-tg{background:var(--tg);color:#fff;font-weight:600}
.btn-tg:hover{filter:brightness(1.12)}
.btn-gold{background:var(--gold);color:#000;font-weight:600}
.btn-gold:hover{filter:brightness(1.08)}
.btn-wa{background:#25D366;color:#043014;font-weight:600}
.btn-wa:hover{filter:brightness(1.08)}
.btn-line{border-color:var(--line);color:var(--txt)}
.btn-line:hover{border-color:rgba(255,255,255,.3)}

/* LISTADO DEL ÍNDICE */
.lista{display:grid;gap:12px;margin-bottom:40px}
.item{border:1px solid var(--line);border-radius:20px;padding:26px 28px;background:var(--surface);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s}
.item:hover{border-color:rgba(212,175,55,.4)}
/* Solo con ratón: en táctil el hover se queda pegado tras el toque. */
@media(hover:hover) and (pointer:fine){
  .item:hover{transform:translateY(-4px)}
}
.item .f{font-size:12px;color:var(--muted-2);letter-spacing:.06em;margin-bottom:8px}
.item h2{font-size:21px;font-weight:600;letter-spacing:-.022em;margin-bottom:7px}
.item p{font-size:15px;color:var(--muted)}
.vacio{border:1px dashed var(--line);border-radius:20px;padding:48px 28px;text-align:center;
  color:var(--muted);font-size:16px;background:var(--surface)}

/* FECHA DE LA CLASE */
.fecha{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.f-item{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface)}
.f-item span{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.f-item b{font-size:16px;font-weight:600;letter-spacing:-.015em}
@media(max-width:700px){.fecha{grid-template-columns:1fr 1fr}}

/* RESERVA */
.reserva{border:1px solid rgba(212,175,55,.4);border-radius:24px;padding:44px 38px;margin:16px 0;
  text-align:center;background:linear-gradient(180deg,rgba(212,175,55,.07),transparent 55%),var(--surface)}
.reserva h2{font-size:clamp(25px,3.6vw,34px);font-weight:600;letter-spacing:-.028em;margin-bottom:10px}
.reserva .sub{color:var(--muted);font-size:16px;margin-bottom:28px;max-width:420px;margin-inline:auto}
.reserva form{max-width:400px;margin:0 auto}
.fld{margin-bottom:11px}
.fld input,.fld select{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:14px;padding:15px 17px;color:var(--txt);font-family:inherit;font-size:16px;
  outline:none;transition:border-color .2s;letter-spacing:-.01em}
.fld input::placeholder{color:var(--muted-2)}
.fld input:focus,.fld select:focus{border-color:var(--gold)}
.reserva .nota{font-size:12.5px;color:var(--muted-2);margin-top:16px;line-height:1.5}
.reserva .nota a{color:var(--muted);text-decoration:underline}
.ok-ic{width:54px;height:54px;border-radius:50%;background:var(--gold);color:#000;
  display:grid;place-items:center;font-size:27px;font-weight:700;margin:0 auto 20px}
/* guía de 3 pasos sobre el calendario */
.pasos-cal{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:0 0 24px}
.pasos-cal li{display:flex;gap:8px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:14px;color:var(--muted);background:rgba(0,0,0,.25)}
.pasos-cal b{color:var(--gold);font-weight:600}
@media(max-width:640px){
  .pasos-cal{flex-direction:column;align-items:stretch}
  .pasos-cal li{justify-content:flex-start}
}

/* aviso mientras el calendario no está conectado */
.cal-aviso{border:1px dashed var(--line);border-radius:16px;padding:32px 24px;
  font-size:15.5px;color:var(--muted);line-height:1.55;background:rgba(0,0,0,.25)}
.cal-aviso b{display:block;color:var(--txt);font-weight:600;margin-bottom:6px}
/* Calendly usa su tema claro (el oscuro dejaba ilegible lo que se escribe).
   Lo presentamos como una tarjeta blanca para que parezca intencionado. */
.calendly-inline-widget{border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14)}
@media(max-width:640px){.reserva{padding:34px 24px}}

/* DESPLEGABLES DE DUDAS */
.rel details{border-bottom:1px solid var(--line-2);margin-bottom:0}
.rel summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:500;
  letter-spacing:-.012em;display:flex;justify-content:space-between;gap:16px;align-items:center}
.rel summary::-webkit-details-marker{display:none}
.rel .pl{color:var(--gold);font-size:19px;font-weight:300;transition:transform .3s;flex:0 0 auto}
.rel details[open] .pl{transform:rotate(45deg)}
.rel details p{font-size:15.5px;color:var(--muted);padding:0 0 20px;line-height:1.6}

/* FOOTER */
footer{border-top:1px solid var(--line-2);padding:44px 0 40px;margin-top:60px}
.riesgo{font-size:11.5px;color:var(--muted-2);line-height:1.65;margin-bottom:20px}
.riesgo b{color:var(--muted)}
.fnav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:14px}
.fnav a:hover{color:var(--txt)}
.copy{font-size:11.5px;color:var(--muted-2)}

/* ── CASILLA DE CONSENTIMIENTO (RGPD) ── */
.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 16px;cursor:pointer;
  text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);transition:border-color .2s}
.consent:hover{border-color:rgba(255,255,255,.2)}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;
  margin:1px 0 0;border:1.5px solid var(--muted-2);border-radius:6px;background:transparent;
  cursor:pointer;position:relative;transition:color .2s,border-color .2s}
.consent input:checked{background:var(--gold);border-color:var(--gold)}
.consent input:checked::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.consent span{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ── CALENDARIO DEL ORO ──
   La página se genera con _generar-calendario.py a partir de
   _calendario-datos.json. Es HTML estático a propósito: nada de widgets de
   terceros, así no hay cookies ajenas, no hay que abrir la CSP y Google lee
   el contenido entero. */
.cal-t{font-size:clamp(23px,3vw,30px);font-weight:600;letter-spacing:-.024em;
  margin:44px 0 8px;text-wrap:balance}
.cal-intro{color:var(--muted);font-size:15.5px;margin-bottom:22px;text-wrap:pretty}
.cal-nota{border-left:2px solid var(--line);padding:12px 0 12px 18px;margin-top:18px;
  font-size:14.5px;color:var(--muted-2);line-height:1.5}
.cal-nota a{color:var(--gold-lt);text-decoration:underline}

.cal-semana{display:grid;gap:10px;margin-top:18px}
.cal-fila{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;background:var(--surface);
  border-left-width:3px;border-left-color:var(--line)}
/* El color del borde izquierdo es el impacto SOBRE EL ORO, no la importancia
   general del dato: por eso una subasta de Londres puede pesar más aquí que
   una publicación que en otro calendario saldría en rojo. */
.cal-fila.imp-alto{border-left-color:var(--gold)}
.cal-fila.imp-medio{border-left-color:rgba(212,175,55,.35)}
.cal-fila.imp-bajo{border-left-color:var(--line)}

.cal-cuando{flex:0 0 132px;display:flex;flex-direction:column;gap:3px}
.cal-dia{font-size:13px;font-weight:600;color:var(--txt);letter-spacing:-.01em;line-height:1.35}
.cal-hora{font-size:20px;font-weight:600;color:var(--gold);letter-spacing:-.02em}
.cal-que{flex:1;min-width:0}
.cal-nombre{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.cal-que p{font-size:14.5px;color:var(--muted);line-height:1.5}

.cal-imp{display:inline-block;vertical-align:middle;margin-left:9px;font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;border:1px solid var(--line);color:var(--muted-2)}
.imp-alto .cal-imp{color:#000;background:var(--gold);border-color:var(--gold)}
.imp-medio .cal-imp{color:var(--gold-lt);border-color:rgba(212,175,55,.4)}

.cal-vacio{border:1px dashed var(--line);border-radius:16px;padding:34px 24px;
  text-align:center;color:var(--muted);font-size:15px;line-height:1.6;
  background:rgba(0,0,0,.25);margin-top:18px}
.cal-vacio b{color:var(--txt);font-weight:600}

@media(max-width:640px){
  .cal-fila{flex-direction:column;gap:10px;padding:18px 20px}
  .cal-cuando{flex:none;flex-direction:row;align-items:baseline;gap:10px}
  .cal-hora{font-size:18px}
}

/* Estados que pone el script del calendario: la página se genera una vez al año
   y se mantiene al día sola atenuando lo pasado y destacando lo que viene. */
.cal-fila.cal-pasado{opacity:.38}
.cal-fila.cal-viene{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.04)}
.cal-mes{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin:30px 0 10px}
.cal-proximo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid rgba(212,175,55,.4);border-radius:16px;padding:18px 22px;
  background:linear-gradient(180deg,rgba(212,175,55,.08),transparent),var(--surface);
  margin-top:24px}
.cal-proximo-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);flex:0 0 auto}
.cal-proximo-c{display:flex;flex-direction:column;gap:2px}
.cal-proximo-c b{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.cal-proximo-c span{font-size:14px;color:var(--muted)}

/* Movimiento reducido: fuera los desplazamientos, se queda el fundido. */
@media(prefers-reduced-motion:reduce){
  .item:hover{transform:none}
  .btn:active{transform:none}
  *{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   BARRA DE PROGRESO DE LECTURA
   Las guías son textos de 7 a 9 minutos. Saber cuánto queda ayuda a
   terminarlos, así que esto es información, no adorno.

   Se anima con scaleX y no con width: width obliga al navegador a
   recalcular el diseño en cada píxel de scroll, y transform no. Es la
   misma razón por la que la carretera de la portada usa scaleY.
   ═══════════════════════════════════════════════════════════════════ */
.progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:95;
  background:transparent;pointer-events:none}
.progreso i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#9a7d1f,var(--gold));
  will-change:transform}

/* Con movimiento reducido la barra sigue funcionando —es un indicador, no
   una animación— pero sin el suavizado, que ahí sí sobra. */
@media(prefers-reduced-motion:reduce){
  .progreso i{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   TEXTURA Y PROFUNDIDAD
   Las mismas capas que la portada, para que la web no cambie de
   material al entrar en una guía.
   ═══════════════════════════════════════════════════════════════════ */

/* Grano: lo que separa un negro que parece un agujero de uno que parece
   un material. No se mueve y no bloquea nada. */
body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}

/* Aura de fondo: enorme, casi invisible, un ciclo de 48 s. Va por encima con
   mix-blend-mode:screen, que sobre negro solo aclara y nunca tapa texto. */
.aura{position:fixed;top:0;left:50%;width:min(1100px,150vw);height:min(700px,90vh);
  margin-left:calc(min(1100px,150vw) / -2);
  z-index:380;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at center,rgba(212,175,55,.05),transparent 62%);
  animation:derivar 48s ease-in-out infinite;will-change:transform}
@keyframes derivar{
  0%,100%{transform:translate3d(-6%,4vh,0) scale(1)}
  33%    {transform:translate3d(7%,42vh,0) scale(1.14)}
  66%    {transform:translate3d(-4%,74vh,0) scale(.96)}
}

/* Foco bajo el cursor en las tarjetas de guía. Solo con ratón de verdad: en
   táctil el hover se queda pegado tras el toque. */
@media(hover:hover) and (pointer:fine){
  .item{position:relative}
  .item::after{content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .35s ease-out;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      rgba(212,175,55,.09),transparent 62%)}
  .item:hover::after{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .aura{animation:none}
}

/* ── COOKIES ──
   Mismo banner que la portada. Lo pinta /analitica.js, que es el único sitio
   donde se decide si se mide o no. */
.ck{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;max-width:660px;margin:0 auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:20px 22px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;box-shadow:0 20px 60px rgba(0,0,0,.8);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.ck.show{opacity:1;transform:none}
.ck p{flex:1;min-width:240px;font-size:13px;color:var(--muted);line-height:1.5}
.ck a{color:var(--txt);text-decoration:underline}
.ck .bs{display:flex;gap:9px;flex:0 0 auto}
.ck button{font-family:inherit;font-size:13.5px;font-weight:500;padding:10px 20px;border-radius:980px;
  cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);min-height:44px}
.ck .yes{background:var(--txt);color:#000;border-color:var(--txt);font-weight:600}
@media(prefers-reduced-motion:reduce){ .ck{transform:none;transition:opacity .3s} }