/* ============================================================
   ARG · mejoras-home.css
   Estilos NUEVOS de la Home (banner editorial, ruta BUE, CTA
   firma, marquesina accesible). No pisa selectores de main.css:
   el director lo concatena al final de la hoja de produccion.
   ============================================================ */

/* ---------- 1b · Banner editorial vivo (.ultimo-analisis) ---------- */
.ultimo-analisis{
  background:var(--base-0);
  border-top:1px solid var(--gold);            /* hairline dorada superior */
  border-bottom:1px solid var(--hair-d);
  padding:12px 0;
}
.ultimo-analisis .ua-in{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.ultimo-analisis .ua-kicker{
  font-size:11px;letter-spacing:.18em;color:var(--gold);white-space:nowrap;
}
.ultimo-analisis .ua-link{
  display:inline-flex;align-items:baseline;gap:12px;min-width:0;
  color:var(--txt-d);text-decoration:none;
}
.ultimo-analisis .ua-fecha{
  font-size:12px;color:var(--steel);white-space:nowrap;
}
.ultimo-analisis .ua-titulo{
  font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58ch;
  border-bottom:1px solid transparent;
  transition:border-color 220ms ease,color 220ms ease;
}
.ultimo-analisis .ua-link .arr{
  transition:transform 220ms ease;
}
.ultimo-analisis .ua-link:hover .ua-titulo,
.ultimo-analisis .ua-link:focus-visible .ua-titulo{
  color:#fff;border-bottom-color:var(--gold);
}
.ultimo-analisis .ua-link:hover .arr,
.ultimo-analisis .ua-link:focus-visible .arr{
  transform:translateX(4px);
}
.ultimo-analisis .ua-link:focus-visible{
  outline:2px solid var(--celeste);outline-offset:3px;
}
@media (max-width:640px){
  .ultimo-analisis .ua-titulo{white-space:normal;max-width:none}
  .ultimo-analisis .ua-in{gap:8px}
}

/* ---------- 2 · Ruta BUE→Mundo en el SVG del hero ---------- */
#pg-home .hero-svg .bue-tag{
  text-transform:uppercase;
  opacity:.85;
}
@media (max-width:760px){
  /* En pantallas chicas el rotulo compite con el H1: se retira. */
  #pg-home .hero-svg .bue-tag{display:none}
}

/* ---------- 3 · CTA firma: trazado de borde en hover ---------- */
.btn-gold,.btn-navy{position:relative}
.btn-gold::after,.btn-navy::after{
  content:"";position:absolute;inset:4px;pointer-events:none;
  background-image:
    linear-gradient(90deg,currentColor,currentColor),
    linear-gradient(180deg,currentColor,currentColor),
    linear-gradient(90deg,currentColor,currentColor),
    linear-gradient(180deg,currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 0,100% 0,100% 100%,0 100%;
  background-size:0 1px,1px 0,0 1px,1px 0;   /* borde sin dibujar */
  opacity:.55;
  transition:background-size 260ms ease-out;
}
.btn-gold:hover::after,.btn-gold:focus-visible::after,
.btn-navy:hover::after,.btn-navy:focus-visible::after{
  background-size:100% 1px,1px 100%,100% 1px,1px 100%;  /* borde trazado */
}

/* ---------- 6 · Marquesina: pausa tambien con foco interno ---------- */
.marquee:focus-within .track{animation-play-state:paused}

/* ---------- Reloj Buenos Aires (footer) ---------- */
.ft [data-reloj-ba]{
  display:inline-block;padding-top:2px;
  font-size:12px;letter-spacing:.1em;color:var(--steel);
  font-variant-numeric:tabular-nums;
}
.ft [data-reloj-ba]:empty{display:none}

/* ---------- A1 · Primer pantallazo completo (hero adaptativo) ----------
   El fold inicial debe cerrar EXACTO al pie de la marquesina: alto del hero
   = viewport chico (svh) menos el banner Ultimo analisis menos la marquesina
   (el hero arranca en y=0, debajo del header fijo, asi que el header no se
   resta). Los estimados de --arg-ua-h/--arg-mq-h los corrige mejoras-home.js
   midiendo los elementos reales; el clamp evita que el contenido se aplaste.

   OJO (medido en staging el 26/08): min-height NO alcanza. La banda hereda de
   .band un padding vertical basado en el ANCHO (clamp(64px,9vw,128px)), que en
   una pantalla baja y ancha (1366x768) suma 168+123 px y empuja el hero a 788
   px cuando el hueco disponible es 650. Por eso el padding pasa a medirse en
   VH: se encoge cuando sobra alto y respira cuando hay lugar. Verificado:
   1366x768, 1440x900 y 1920x1080 cierran al pie de la marquesina. */
@supports (min-height:100svh){
  #pg-home .hero-b{
    --arg-ua-h:53px;
    --arg-mq-h:65px;
    padding-top:calc(72px + clamp(18px,4vh,96px));
    padding-bottom:clamp(18px,4vh,120px);
    min-height:clamp(520px, calc(100svh - var(--arg-ua-h) - var(--arg-mq-h)), 1800px);
  }
  /* Con la barra de WordPress (solo administradores) el viewport util pierde
     32 px: se descuentan para que el editor vea lo mismo que el visitante. */
  body.admin-bar #pg-home .hero-b{
    min-height:clamp(520px, calc(100svh - var(--arg-ua-h) - var(--arg-mq-h) - 32px), 1800px);
  }
}

/* ---------- Navegación con seis secciones (v1.3.1) ----------
   Al sumar "Riesgos Globales" el menú de escritorio dejó de entrar en una
   línea: a 1366 px partía tres nombres en dos renglones. Medido: el lockup,
   el menú y el CTA ocupan ~1075 px, y el contenedor solo llega a esa medida
   a partir de ~1200 px de viewport. Por eso el menú hamburguesa (que ya
   lista las siete secciones) toma el relevo por debajo de 1280 px, y entre
   1280 y 1560 el espaciado se ajusta. Los nombres nunca se parten. */
.nav-d a{white-space:nowrap}
@media (max-width:1279px){
  .nav-d,.hd .cta-hd{display:none}
  .burger{display:block}
}
@media (min-width:1280px) and (max-width:1560px){
  .nav-d{gap:22px}
  .hd .cta-hd{padding-left:16px;padding-right:16px}
}

/* ---------- Banner: tiempo relativo ("hace N dias") ---------- */
.ultimo-analisis .ua-rel{margin-left:8px;color:var(--txt-d-sec);opacity:.85}
.ultimo-analisis .ua-rel:empty{display:none}

/* ---------- Pulso vivo del ATLAS en la Home ---------- */
#pg-home .atlas-pulso{
  margin:22px 0 0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-d-sec);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
}
#pg-home .atlas-pulso .k{color:var(--steel)}
#pg-home .atlas-pulso b{color:var(--gold);font-weight:500;letter-spacing:.08em}
#pg-home .atlas-pulso .sep{color:var(--hair-d)}

/* ---------- A6 · Franja de acceso al pie de la banda ATLAS (Home) ----------
   Antes era un recuadro dentro de la columna izquierda: se codeaba con la
   ficha "Cada edición incluye" de la derecha y dejaba la banda recargada.
   Ahora es una franja de ancho completo que CIERRA la banda ATLAS, con el
   texto a la izquierda y el campo a la derecha. La banda pierde su relleno
   inferior para que la franja apoye exacto sobre el filo de la banda
   siguiente: se lee como un estante, no como una caja suelta. */
#pg-home .atlas-b{padding-bottom:0}
#pg-home .atlas-gate-home{
  position:relative;margin-top:clamp(52px,7vw,92px);
  padding:clamp(24px,3.2vw,38px) 0;
  border-top:1px solid rgba(212,175,55,.3);
  background:linear-gradient(180deg,rgba(15,24,48,.92),rgba(10,17,34,.5));
}
/* Cabo dorado sobre el filete, en eco de la gold-rule que abre la banda. */
#pg-home .atlas-gate-home::before{
  content:"";position:absolute;top:-1px;left:0;width:min(340px,36%);height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0));
}
#pg-home .agh-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,42%);
  gap:clamp(18px,3.4vw,56px);align-items:center;
}
#pg-home .agh-txt,#pg-home .agh-caja{min-width:0}
#pg-home .agh-k{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px;
}
#pg-home .agh-t{
  font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.1vw,23px);
  line-height:1.32;color:var(--txt-d);margin:0;max-width:28ch;
}
#pg-home .agh-error{
  font-size:11.5px;letter-spacing:.1em;color:#F0B4B4;margin:0 0 10px;
}
#pg-home .agh-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:0}
#pg-home .agh-row input[type="text"]{
  flex:1 1 200px;min-width:0;font-size:15px;letter-spacing:.3em;text-transform:uppercase;
  background:var(--base-0);color:var(--txt-d);border:1px solid var(--hair-d);
  padding:12px 14px;transition:border-color 200ms ease;
}
#pg-home .agh-row input[type="text"]::placeholder{color:var(--txt-d-sec);opacity:.55;letter-spacing:.18em}
#pg-home .agh-row input[type="text"]:focus{outline:2px solid var(--celeste);outline-offset:1px;border-color:var(--navy)}
#pg-home .agh-btn{padding:13px 24px;white-space:nowrap}
#pg-home .agh-nota{
  margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-d-sec);max-width:48ch;
}
@media (max-width:860px){
  /* Apilada: el texto arriba, el campo abajo y a todo el ancho de la columna. */
  #pg-home .agh-in{grid-template-columns:1fr;gap:20px}
  #pg-home .agh-t{max-width:none}
}

/* ---------- Tarjetas P-01/03: doble cara (pregunta / método) ----------
   Frente claro para líderes; reverso navy con el registro metodológico.
   Giro al hover en punteros finos, toggle por botón (teclado y touch).
   Con prefers-reduced-motion el giro se reemplaza por un fundido. */
#pg-home .pregunta.p3d{
  padding:0;border:0;background:transparent;overflow:visible;
  /* Perspectiva larga: cuanto mayor el valor, mas plano y sereno el giro.
     A 1400px la tarjeta se abalanzaba sobre el lector al rotar. */
  perspective:2200px;
}
#pg-home .pregunta.p3d:hover{transform:none}
#pg-home .p3d-pivote{
  position:relative;height:100%;min-height:400px;
  transform-style:preserve-3d;
  /* Giro lento con arranque y llegada suaves (ease-in-out). El retorno no
     lleva retardo: soltar la tarjeta responde en el acto. */
  transition:transform 720ms cubic-bezier(.48,.04,.26,1);
  transition-delay:0ms;
}
@media (hover:hover) and (pointer:fine){
  /* Retardo de intencion: el mouse que solo pasa por encima no dispara nada.
     Solo gira quien se detiene sobre la tarjeta. */
  #pg-home .p3d:hover .p3d-pivote{transform:rotateY(180deg);transition-delay:200ms}
  /* Teclado: al tabular hasta "Ver el metodo" la tarjeta gira sin retardo y
     se mantiene girada mientras el foco siga dentro. */
  #pg-home .p3d:focus-within .p3d-pivote{transform:rotateY(180deg);transition-delay:0ms}
}
/* El clic o el teclado son intencion explicita: giran sin esperar. */
#pg-home .p3d.flip .p3d-pivote{transform:rotateY(180deg);transition-delay:0ms}
#pg-home .p3d-cara,#pg-home .p3d-dorso{
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
#pg-home .p3d-cara{
  position:relative;min-height:inherit;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--blanco);border:1px solid var(--hair);
  padding:32px 28px 24px;
  transition:border-color var(--t-fast);
}
#pg-home .p3d:hover .p3d-cara{border-color:var(--navy)}
/* Marcas de esquina cartográficas del frente */
#pg-home .p3d-cara::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--gold-deep),var(--gold-deep)),
    linear-gradient(180deg,var(--gold-deep),var(--gold-deep)),
    linear-gradient(90deg,var(--gold-deep),var(--gold-deep)),
    linear-gradient(180deg,var(--gold-deep),var(--gold-deep));
  background-repeat:no-repeat;
  background-position:0 0,0 0,100% 100%,100% 100%;
  background-size:14px 1px,1px 14px,14px 1px,1px 14px;
  opacity:.4;
}
#pg-home .p3d-cara .ic{margin-bottom:22px}
#pg-home .p3d-cara h3{max-width:22ch}
#pg-home .p3d-linea{
  margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--sec);max-width:34ch;
}
#pg-home .p3d-toggle{
  margin-top:auto;padding:10px 0 0;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;color:var(--gold-ink);
  border-bottom:1px solid transparent;
  transition:color var(--t-fast),border-color var(--t-fast);
}
#pg-home .p3d-toggle:hover,#pg-home .p3d-toggle:focus-visible{color:var(--navy);border-color:var(--navy)}
#pg-home .p3d-toggle .giro{display:inline-block;
  transition:transform 720ms cubic-bezier(.48,.04,.26,1);transition-delay:0ms}
@media (hover:hover) and (pointer:fine){
  #pg-home .p3d:hover .p3d-toggle .giro{transform:rotate(180deg);transition-delay:200ms}
  #pg-home .p3d:focus-within .p3d-toggle .giro{transform:rotate(180deg);transition-delay:0ms}
}
#pg-home .p3d.flip .p3d-toggle .giro{transform:rotate(180deg);transition-delay:0ms}
#pg-home .p3d-dorso{
  position:absolute;inset:0;transform:rotateY(180deg);
  background:linear-gradient(160deg,var(--base-2),var(--base-1) 80%);
  border:1px solid var(--navy);border-top:2px solid var(--gold);
  padding:28px 26px;overflow:auto;
  display:flex;flex-direction:column;gap:12px;
}
/* Trama de rombos sutil del reverso */
#pg-home .p3d-dorso::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(45deg,var(--steel) 1px,transparent 1px),
    linear-gradient(-45deg,var(--steel) 1px,transparent 1px);
  background-size:22px 22px;
}
#pg-home .p3d-dk{
  position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 2px;
}
#pg-home .p3d-dorso p:not(.p3d-dk){
  position:relative;margin:0;font-size:14px;line-height:1.65;color:var(--txt-d-sec);
}
#pg-home .p3d-dorso p:not(.p3d-dk) + p:not(.p3d-dk){
  border-top:1px solid var(--hair-d);padding-top:12px;
}
#pg-home .p3d-dorso::after{
  content:"⟲";position:absolute;right:14px;bottom:10px;
  font-family:var(--mono);font-size:12px;color:var(--steel);opacity:.7;
}
@media (max-width:900px){
  #pg-home .p3d-pivote{min-height:360px}
}
@media (prefers-reduced-motion:reduce){
  #pg-home .p3d-pivote{transition:none;transform:none !important}
  #pg-home .p3d-cara,#pg-home .p3d-dorso{transition:opacity 10ms linear}
  #pg-home .p3d-dorso{transform:none;opacity:0;pointer-events:none}
  #pg-home .p3d.flip .p3d-dorso{opacity:1;pointer-events:auto}
  #pg-home .p3d.flip .p3d-cara{opacity:0}
}

/* ---------- Badge del hero: Informe Anual ---------- */
#pg-home .hero-badge{
  font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-decoration:none;
  color:#231A02;background:var(--gold);padding:6px 10px;
  transition:background 200ms ease;white-space:nowrap;
}
#pg-home .hero-badge:hover,#pg-home .hero-badge:focus-visible{background:#E2C258;color:#231A02}

/* ---------- 5b · Banda Informe Anual (Home) ---------- */
#pg-home .irg-b{border-top:1px solid var(--hair)}
#pg-home .irg-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4.5vw,56px);align-items:center}
#pg-home .irg-mini{
  position:relative;width:clamp(150px,15vw,190px);aspect-ratio:1/1.414;flex:none;
  background:linear-gradient(160deg,#101B38 0%,var(--base-2) 45%,#0B1330 100%);
  border:1px solid rgba(212,175,55,.4);box-shadow:0 18px 40px rgba(6,10,20,.28);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:14px;text-decoration:none;transform:rotate(-2.5deg);
  transition:transform 280ms ease,box-shadow 280ms ease;
}
#pg-home .irg-mini::before{content:"";position:absolute;inset:6px;border:1px solid rgba(110,147,214,.2);pointer-events:none}
#pg-home .irg-mini:hover{transform:rotate(-1deg) translateY(-4px);box-shadow:0 24px 50px rgba(6,10,20,.36)}
#pg-home .irg-mini .im-iso{width:22px;height:auto;position:absolute;top:13px;left:13px}
#pg-home .irg-mini .im-k{font-size:6.5px;letter-spacing:.2em;color:var(--steel);margin-bottom:5px}
#pg-home .irg-mini .im-t{font-family:var(--serif);font-weight:500;font-size:12.5px;line-height:1.3;color:var(--txt-d)}
#pg-home .irg-mini .im-a{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;color:var(--gold);margin-top:4px}
#pg-home .irg-txt h2{margin-bottom:12px}
#pg-home .irg-txt p{max-width:58ch}
#pg-home .irg-txt .linkline{color:var(--navy)}
@media (max-width:760px){
  #pg-home .irg-in{grid-template-columns:1fr}
  #pg-home .irg-mini{margin:0 auto}
}

/* ---------- Cards de directores: monograma vivo al hover ---------- */
#pg-home .dir-card .mg,#pg-nosotros .nos-dir .mgr{transition:transform 280ms ease}
#pg-home .dir-card:hover .mg,#pg-home .dir-card:focus-visible .mg{transform:rotate(45deg) scale(.92)}
#pg-nosotros .nos-dir .card:hover .mgr,#pg-nosotros .nos-dir .card:focus-visible .mgr{transform:rotate(45deg) scale(.92)}

/* ---------- Boton "volver arriba" ---------- */
.volver-arriba{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:70;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;
  background:rgba(6,10,20,.85);color:var(--txt-d-sec);
  border:1px solid var(--hair-d);padding:11px 14px;cursor:pointer;
  backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity 240ms ease,transform 240ms ease,color 180ms ease,border-color 180ms ease;
}
.volver-arriba.visible{opacity:1;transform:none;pointer-events:auto}
.volver-arriba:hover,.volver-arriba:focus-visible{color:var(--gold);border-color:var(--gold)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .ultimo-analisis .ua-titulo,
  .ultimo-analisis .ua-link .arr,
  .btn-gold::after,.btn-navy::after,
  #pg-home .dir-card .mg,#pg-nosotros .nos-dir .mgr,
  .volver-arriba,
  #pg-home .agh-row input[type="text"]{transition:none}
  #pg-home .hero-svg{transform:none !important}
}