/* ============================================================
   Pronóstico Bursátil — Home Redesign (opción 2a, estilo TradingView)
   ============================================================ */

:root{
  /* Marca */
  --brand:        #2f8f5b;
  --brand-dark:   #26744a;
  --brand-light:  #3fb27f;
  --promo:        #f79a28;   /* naranja del logo: etiqueta "1er mes gratis" */
  --totop-bg:     #f0f3fa;   /* botón "volver arriba" (= --paper-3 en claro) */

  /* Superficies */
  --ink:          #131722;   /* azul-negro TradingView */
  --ink-2:        #1c2233;
  --paper:        #ffffff;
  --paper-0:      rgba(255,255,255,0);   /* --paper transparente, para degradados */
  --paper-2:      #f8faf9;
  --paper-3:      #f0f3fa;
  --paper-3-hover:#e7ecf6;   /* hover de las tarjetas del panel Dólar */

  /* Texto */
  --text:         #131722;
  --text-2:       #50555f;
  --text-3:       #787b86;
  --on-dark:      #ffffff;
  --on-dark-2:    #b2b5be;
  --on-dark-3:    #787b86;

  /* Mercado */
  --up:           #26a69a;
  --down:         #ef5350;

  /* Líneas */
  --line:         #eaecef;
  --line-hover:   #d8dde6;   /* borde de tarjeta al pasar el mouse */
  --line-dark:    rgba(255,255,255,.08);

  /* Header traslúcido: va aparte de --paper porque lleva alfa */
  --paper-glass:  rgba(255,255,255,.92);
  --paper-glass-2:rgba(255,255,255,.97);   /* al hacer scroll */

  /* Medidas */
  --wrap:         1280px;
  --r-sm:         6px;
  --r:            10px;
  --r-lg:         14px;
  --header-h:     68px;
  --ticker-h:     46px;

  /* Luz de fondo de los botones. Desplazamiento CERO a propósito: es un
     halo simétrico, no una sombra proyectada, así que no contradice el
     criterio plano ni desalinea nada por derramarse hacia abajo.

     Va en VERDE también en modo claro, no en blanco. Se probó con blanco
     (13/8/2026) y no sirve: sobre el fondo claro del sitio da 0 niveles
     de diferencia en el header, el hero y "Enviar" —blanco sobre blanco
     es invisible—, y en cambio da 127 sobre la franja de Charlas y el
     panel del newsletter, que son oscuros. Todo o nada. El verde de
     marca se lee parejo en los dos fondos. */
  --btn-glow:     0 0 16px rgba(47,143,91,.32);

  --shadow-sm:    0 1px 2px rgba(19,23,34,.06);
  --shadow:       0 8px 30px rgba(19,23,34,.08);
  --shadow-lg:    0 20px 50px rgba(19,23,34,.14);
  --shadow-header:0 4px 20px rgba(19,23,34,.08);

  --ease:         cubic-bezier(.22,.61,.36,1);

  --font:         'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:        'Newsreader', Georgia, serif;
}

/* ============================================================
   MODO OSCURO
   ------------------------------------------------------------
   Un solo bloque, no dos. El JS resuelve la preferencia (elección
   guardada > sistema operativo) y escribe data-theme en el <html>
   ANTES de que pinte la página, así que acá alcanza con un selector.
   Con `@media (prefers-color-scheme)` habría que duplicar la paleta
   y las dos copias se desincronizan con el tiempo.

   El modo claro de arriba no se toca: acá solo se redefinen valores.
   Si PB_CONFIG.modoOscuro es false, el atributo nunca se escribe y
   este bloque no se aplica nunca.
   ============================================================ */
:root[data-theme="dark"]{
  /* Superficies. --ink queda MÁS oscuro que el fondo de página para
     que las piezas que ya eran oscuras (cinta, panel del newsletter,
     pestaña activa del gráfico) se sigan despegando del fondo. */
  --ink:          #0b0e14;
  --ink-2:        #12151f;
  --paper:        #131722;   /* el azul-negro de TradingView */
  --paper-0:      rgba(19,23,34,0);
  --paper-2:      #171b26;
  --paper-3:      #1e222d;
  /* El hover ACLARA, no oscurece: estas tarjetas se apoyan sobre
     --paper (#131722), así que oscurecerlas las haría desaparecer
     dentro del panel. El valor está elegido lo más claro que se puede
     sin bajar de 4.5:1 el --text-3 del rótulo y del "compra": con
     #242938 ya daba 4.48 y no pasaba. */
  --paper-3-hover:#232836;
  /* "Volver arriba": más claro que las tarjetas (--paper-3), que en
     oscuro son del mismo tono y el botón se perdía encima de ellas */
  --totop-bg:     #2c3140;

  /* En oscuro la luz pasa a verde luminoso (--brand-light): sobre los
     fondos oscuros del tema se lee como un halo encendido. El blanco
     del modo claro acá quedaría lechoso y sucio. */
  --btn-glow:     0 0 18px rgba(63,178,127,.45);

  /* Texto. --text-3 se aclara respecto del modo claro: sobre fondo
     oscuro, el #787b86 original queda en 4.4:1 y no llega al mínimo
     de contraste para texto chico. */
  --text:         #d1d4dc;
  --text-2:       #b2b5be;
  --text-3:       #8b8f9a;

  --line:         #2a2e39;
  --line-hover:   #3a3f4d;

  --paper-glass:  rgba(19,23,34,.92);
  --paper-glass-2:rgba(19,23,34,.97);

  /* Las sombras claras son invisibles sobre fondo oscuro: van a negro
     y con más alfa. */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow:       0 8px 30px rgba(0,0,0,.45);
  --shadow-lg:    0 20px 50px rgba(0,0,0,.6);
  --shadow-header:0 4px 20px rgba(0,0,0,.5);
}

/* El panel del newsletter ya era oscuro. Sobre fondo oscuro pierde el
   borde que antes le daba el contraste con el blanco, así que se lo
   devolvemos explícito. */
:root[data-theme="dark"] .panel--dark{ border:1px solid var(--line); }

/* Las fotos y los logos a todo color quedan estridentes sobre oscuro. */
:root[data-theme="dark"] .person__photo img,
:root[data-theme="dark"] .charlastrip__photo img{ filter:brightness(.92) contrast(1.02); }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + var(--ticker-h) + 12px); }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:32px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Trampa anti-spam del formulario de contacto. Fuera de pantalla en vez de
   display:none, que los bots detectan. Los lectores de pantalla tampoco lo
   anuncian porque el contenedor lleva aria-hidden. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ============================================================
   CINTA DE COTIZACIONES
   ============================================================ */
.tickerbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--ticker-h);
  display:flex; align-items:center;
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}

.tickerbar__live{
  display:flex; align-items:center; gap:7px;
  padding:0 14px 0 18px;
  flex-shrink:0;
  height:100%;
  border-right:1px solid var(--line-dark);
  font-size:11px; font-weight:800; letter-spacing:.1em;
  color:var(--brand-light);
}
.tickerbar__livetext{ white-space:nowrap; }

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand-light);
  box-shadow:0 0 0 0 rgba(63,178,127,.7);
  animation:pulse 2s infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0   rgba(63,178,127,.65); }
  70% { box-shadow:0 0 0 8px rgba(63,178,127,0);   }
  100%{ box-shadow:0 0 0 0   rgba(63,178,127,0);   }
}

/* Marquesina continua tipo panel digital: el track lleva la lista de
   cotizaciones duplicada y se desplaza -50%, así el loop es perfecto. */
.tickerbar__tape{
  flex:1; min-width:0; height:100%; overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.tickerbar__track{
  display:flex; align-items:center; height:100%;
  width:max-content;
  will-change:transform;
  animation:marquee var(--marquee-dur, 60s) linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Pausa al pasar el mouse para poder leer un valor */
.tickerbar__tape:hover .tickerbar__track{ animation-play-state:paused; }

.tkitem{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 18px; white-space:nowrap;
  font-size:12.5px; color:var(--on-dark-2);
  border-right:1px solid var(--line-dark);
}
.tkitem__sym{ font-weight:800; color:#fff; letter-spacing:.01em; }
.tkitem__px{ font-variant-numeric:tabular-nums; color:var(--on-dark-2); }
.tkitem__chg{ font-weight:700; font-variant-numeric:tabular-nums; }
.tkitem__chg.up{ color:var(--up); }
.tkitem__chg.down{ color:var(--down); }
.tkitem__chg.flat{ color:var(--on-dark-3); }

.tickerbar__track.is-empty{ animation:none; }
.tkloading{
  display:inline-flex; align-items:center; padding:0 18px;
  font-size:12px; font-weight:600; color:var(--on-dark-3);
}

.tv-fallback--chart{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--text-3); font-weight:600; font-size:13px;
}
/* Fallback de las tarjetas del panel líder */
.tv-fallback--card{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:0 12px; text-align:center;
  color:var(--text-3); font-weight:600; font-size:12.5px;
}

/* Cuando aparece el primer iframe, el fallback se va.
   (El fallback del hero es hermano de los paneles, no hijo del
   contenedor del widget, así que se consulta desde #chartPanes.) */
.tradingview-widget-container:has(iframe) .tv-fallback--chart,
#chartPanes:has(iframe) .tv-fallback--chart,
.mktcard:has(iframe) .tv-fallback--card{ display:none; }

/* Si TradingView no responde, el aviso deja de decir "Cargando…".
   Va en gris como el resto: en rojo gritaba demasiado para algo que el
   visitante no puede resolver. */
.tv-fallback.is-error{ color:var(--text-3); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:var(--ticker-h); left:0; right:0; z-index:50;
  height:var(--header-h);
  background:var(--paper-glass);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ box-shadow:var(--shadow-header); background:var(--paper-glass-2); }

.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header__left{ display:flex; align-items:center; gap:30px; min-width:0; }
.header__right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.brand img{ width:34px; height:34px; }
.brand__name{ font-weight:800; font-size:15px; letter-spacing:.01em; white-space:nowrap; }

.mainnav{ display:flex; gap:22px; }
/* En escritorio el menú va centrado en la página y no pegado al logo
   (Leandro, 2/10/2026). Solo desde 1081px: abajo es la hamburguesa, y
   ahí el position:relative del contenedor cambiaría el bloque contra el
   que se ubica el menú desplegable. Medido: a 1081px queda a 31px del
   logo (lo mismo que antes) y no toca los botones de la derecha. */
@media (min-width:1081px){
  .header__inner{ position:relative; }
  .mainnav{ position:absolute; left:50%; transform:translateX(-50%); }
}
.mainnav a{
  position:relative; font-weight:600; font-size:14px; color:var(--text);
  padding:6px 0; white-space:nowrap; transition:color .2s var(--ease);
}
.mainnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.mainnav a:hover{ color:var(--brand); }
.mainnav a:hover::after,
.mainnav a.is-active::after{ transform:scaleX(1); }
.mainnav a.is-active{ color:var(--brand); }

.link-quiet{ font-weight:600; font-size:14px; transition:color .2s var(--ease); }
.link-quiet:hover{ color:var(--brand); }

.navtoggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0 8px;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
}
/* var(--text) y no var(--ink): son idénticos en claro, pero en oscuro
   --ink es casi negro y las rayitas desaparecían sobre el header. */
.navtoggle span{ display:block; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }

/* ---- Interruptor de tema ---------------------------------- */
.themetoggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; flex-shrink:0;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--text-2); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.themetoggle:hover{ color:var(--text); border-color:var(--line-hover); background:var(--paper-2); }
.themetoggle svg{ width:19px; height:19px; }
/* En claro se ve la luna (tocar = ir a oscuro); en oscuro, el sol. */
.themetoggle__sun{ display:none; }
:root[data-theme="dark"] .themetoggle__sun{ display:block; }
:root[data-theme="dark"] .themetoggle__moon{ display:none; }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; font-size:14px; line-height:1;
  padding:11px 20px; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
}
.btn:active{ transform:translateY(1px); }

/* Hover PLANO: solo cambia el fondo. Antes levantaba el botón 2px y le
   agregaba una sombra verde difusa; el resto del sitio no usa sombras y
   desentonaba. El feedback de apretar sigue estando en :active. */
.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--btn-glow); }
.btn--primary:hover{ background:var(--brand-dark); }

.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#212639; }

.btn--ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); background:rgba(47,143,91,.05); }

/* Verde oficial de WhatsApp */
.btn--wa{
  background:#25d366; color:#fff; font-size:15px; padding:13px 24px;
}
.btn--wa:hover{ background:#1da851; }
.btn--wa svg{ flex-shrink:0; }

.btn--sm{ padding:9px 16px; font-size:13px; }
.btn--lg{ padding:15px 30px; font-size:16px; border-radius:8px; }
.btn--block{ width:100%; }

.playlink{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:15px;
  transition:color .2s var(--ease);
}
.playlink svg{ flex-shrink:0; transition:transform .25s var(--ease); }
.playlink:hover{ color:var(--brand); }
.playlink:hover svg{ transform:scale(1.12); }

.link-arrow{ font-weight:700; font-size:14px; color:var(--brand); transition:gap .2s, color .2s; }
.link-arrow:hover{ color:var(--brand-dark); }

/* ============================================================
   TIPOGRAFÍA COMÚN
   ============================================================ */
.eyebrow{
  display:inline-block; font-weight:700; font-size:11px;
  letter-spacing:.14em; color:var(--text-3); text-transform:uppercase;
}
.eyebrow--green{ color:var(--brand-light); }
.muted{ color:var(--text-3); font-weight:600; }

.section{ padding:76px 0; }
.section:nth-child(even){ background:var(--paper-2); }

.sectionhead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:28px; flex-wrap:wrap;
}
.sectionhead h2{ font-size:32px; font-weight:800; line-height:1.15; max-width:640px; margin-top:8px; }
.sectionhead__sub{ margin-top:10px; color:var(--text-2); font-size:16px; max-width:620px; line-height:1.55; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:5px 11px; border-radius:100px;
}
.pill--live{ background:rgba(38,166,154,.1); color:var(--up); }
.pill--live .dot{ background:var(--up); box-shadow:none; animation:pulse 2s infinite; }

.ticklist{ display:flex; flex-direction:column; gap:10px; }
.ticklist li{
  position:relative; padding-left:26px;
  font-size:15px; line-height:1.55; color:var(--text-2);
}
.ticklist li::before{
  content:''; position:absolute; left:0; top:7px;
  width:14px; height:8px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.ticklist--sm li{ font-size:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding-top:calc(var(--header-h) + var(--ticker-h) + 64px);
  padding-bottom:32px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
/* El aire entre el hero y el panel líder es la suma de los dos paddings.
   Antes eran 64 + 76 = 140px; ahora 32 + 38 = 70px, la mitad. */
.markets{ padding-top:38px; }

/* El enlace "Ver todos los mercados" es hermano de las tarjetas (no hijo
   del encabezado) para poder reordenarlo en móvil. En escritorio esta
   grilla lo devuelve a su lugar: arriba a la derecha, alineado con la
   base del encabezado. */
.markets__wrap{
  display:grid; grid-template-columns:1fr auto;
  align-items:end; column-gap:24px;
}
.markets__wrap > .sectionhead{ grid-column:1; }
.markets__all{ grid-column:2; justify-self:end; margin-bottom:28px; }
/* El resto ocupa el ancho completo de las dos columnas */
.markets__wrap > .mktgrid,
.markets__wrap > .dolares{ grid-column:1 / -1; }
/* La columna del gráfico mide exactamente lo mismo que dos tarjetas del
   panel líder más su separación, así respeta las columnas de abajo.
   Con una grilla de 4 columnas y gap g:  2·(W−3g)/4 + g = W/2 − g/2 */
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(50% - 8px);
  gap:44px; align-items:center;
}

.hero__copy{ display:flex; flex-direction:column; gap:18px; }
.hero h1{
  font-size:clamp(40px,5vw,60px); font-weight:800; line-height:1.02;
  letter-spacing:-.03em; margin:0;
}
.lede{ font-size:18px; line-height:1.5; color:var(--text-2); max-width:460px; }
.hero__actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
.hero__note{ font-size:12.5px; color:var(--text-3); margin-top:4px; }
[hidden]{ display:none !important; }

/* Tarjeta de gráfico */
.chartcard{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.chartcard:hover{ border-color:var(--line-hover); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.chartcard__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
}

/* Pestañas de papeles */
.chartcard__tabs{ display:flex; gap:4px; flex-wrap:wrap; }
.chartcard__tab{
  font-family:var(--font); font-weight:700; font-size:12.5px; line-height:1;
  padding:7px 12px; border-radius:100px; border:1px solid transparent;
  background:transparent; color:var(--text-3); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.chartcard__tab:hover{ background:var(--paper-3); color:var(--text); }
.chartcard__tab.is-active{ background:var(--ink); color:#fff; }

.chartcard__chart{ position:relative; height:300px; border-top:1px solid var(--line); }

/* Los 4 paneles quedan precargados; solo cambia cuál se ve.
   Así la rotación no recarga iframes ni parpadea. */
.chartpane{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), visibility .45s;
}
.chartpane.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.chartpane .tradingview-widget-container,
.chartpane .tradingview-widget-container__widget{ height:100%; width:100%; }

.chartcard__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-top:1px solid var(--line); background:var(--paper-2);
}
.chartcard__hint{ font-size:11.5px; color:var(--text-3); font-weight:500; }
.chartcard__progress{
  position:relative; width:56px; height:3px; border-radius:3px;
  background:var(--line); overflow:hidden; flex-shrink:0;
}
.chartcard__progress i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--brand); border-radius:3px;
}
.chartcard__progress.is-paused i{ background:var(--text-3); }

/* ============================================================
   MERCADOS
   ============================================================ */
.mktgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mktcard{
  position:relative;   /* ancla del .tv-fallback--card */
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:8px; overflow:hidden; min-height:120px;
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.mktcard{ padding:8px; }
.mktcard:hover{ border-color:var(--line-hover); box-shadow:var(--shadow); transform:translateY(-3px); }

/* El widget se renderiza más ancho de lo que ocupa y se achica con
   transform, así entra el porcentaje incluso con precios largos. */
.mktcard__scaler{ width:100%; overflow:hidden; }
.mktcard__inner{ width:380px; transform-origin:top left; }
.mktcard__inner .tradingview-widget-container{ width:380px; }

/* Dólar */
.dolares{
  margin-top:32px; padding:24px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.dolares__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dolares__head h3{ font-size:18px; font-weight:800; }
.dolares__stamp{ font-size:12px; color:var(--text-3); font-weight:600; }

.dolares__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.dolarcard{
  display:flex; flex-direction:column; gap:6px;
  padding:14px; border-radius:var(--r-sm); background:var(--paper-3);
  transition:background .25s var(--ease);
}
/* Iba con el literal #e7ecf6 y en modo oscuro la tarjeta se volvía casi
   blanca con el texto claro encima: ilegible. Es la trampa de siempre —
   color nuevo = variable, no literal. */
.dolarcard:hover{ background:var(--paper-3-hover); }
.dolarcard__name{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.dolarcard__val{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.dolarcard__sub{ font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.dolarcard.is-loading .dolarcard__val{ color:var(--text-3); }
.dolarcard.is-updated{ animation:flash .9s var(--ease); }
@keyframes flash{ 0%{ background:rgba(38,166,154,.22); } 100%{ background:var(--paper-3); } }

/* ============================================================
   CHARLAS (franja oscura)
   ============================================================ */
.charlas{ background:var(--paper) !important; }
.charlastrip{
  background:var(--ink);
  background-image:radial-gradient(680px circle at 12% 10%, rgba(63,178,127,.20), transparent 62%),
                   radial-gradient(560px circle at 92% 90%, rgba(47,143,91,.18), transparent 60%);
  border-radius:var(--r-lg); padding:40px;
  display:grid; grid-template-columns:auto 1fr auto; gap:36px; align-items:center;
}
.charlastrip__photo img{
  width:180px; height:180px; border-radius:50%; object-fit:cover;
  border:3px solid var(--brand); box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.charlastrip__body{ display:flex; flex-direction:column; gap:12px; }
.charlastrip__body h2{ font-size:28px; font-weight:800; color:var(--on-dark); line-height:1.2; max-width:560px; }
.charlastrip__body p{ font-size:15.5px; line-height:1.6; color:var(--on-dark-2); max-width:600px; }
.charlastrip .ticklist{ margin-top:4px; gap:7px; }
.charlastrip .ticklist li{ color:var(--on-dark-2); font-size:14px; }
.charlastrip .ticklist li::before{ border-color:var(--brand-light); }

.charlastrip__cta{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; flex-shrink:0; }
.charlastrip__cta .btn{ font-size:18px; padding:18px 40px; border-radius:10px; }
.price{ display:flex; flex-direction:column; align-items:center; }
.price__num{ font-size:38px; font-weight:800; color:var(--on-dark); line-height:1; }
.price__per{ font-size:12px; font-weight:600; color:var(--on-dark-3); letter-spacing:.06em; margin-top:4px; }
.charlastrip__fine{ font-size:11.5px; color:var(--on-dark-3); max-width:180px; }
/* Etiqueta de la promoción arriba del precio: versalita como .eyebrow
   (11px / 700 / .14em), en el naranja del logo para que se destaque del
   verde del botón. Letra oscura: en blanco sobre naranja da 2,2:1 y no
   se lee; con --ink da 8,2:1. La franja es oscura en los dos temas. */
.promobadge{
  display:inline-block; padding:5px 11px; border-radius:999px;
  background:var(--promo); color:var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}

/* ============================================================
   EDITORIAL
   ============================================================ */
/* Nota principal + columna de notas anteriores */
.editorial__grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }

.article{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px; min-width:0;
}
.article__meta{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.article__date{ font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--brand); text-transform:uppercase; }
.article__sep{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.article__author{ font-size:12.5px; color:var(--text-3); font-weight:600; }

.article__title{
  font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.18;
  letter-spacing:-.01em; margin-bottom:22px;
  /* SIN reserva en escritorio: el margen bajo el título es siempre
     estos 22px, tenga una línea o tres. Antes reservaba dos renglones
     para que el bloque no saltara al cambiar de nota, pero eso dejaba
     ~40px de hueco en los títulos cortos y se prefirió el margen
     parejo — decisión del cliente, 11/8/2026, sobre la vista de nota.
     La contra asumida: al cambiar de nota desde "Notas anteriores" el
     cuerpo se corre según cuántas líneas ocupe el título nuevo.
     En ≤900px sigue habiendo reserva: ver el bloque de ese ancho. */
}

.article__body{
  position:relative; overflow:hidden;
  max-height:280px;
  transition:max-height .6s var(--ease);
}
.article__body::after{
  content:''; position:absolute; inset:auto 0 0 0; height:110px;
  /* El extremo transparente lleva el MISMO color que el opaco, no un
     rgba(0,0,0,0) genérico: el degradado va de "papel invisible" a
     "papel". Los navegadores de hoy interpolan con alfa premultiplicado
     y no se notaría, pero así queda explícito y a prueba del que no. */
  background:linear-gradient(180deg, var(--paper-0), var(--paper) 88%);
  pointer-events:none; transition:opacity .4s var(--ease);
}
.article__body.is-open{ max-height:3000px; }
.article__body.is-open::after{ opacity:0; }
.article__body p{ font-size:16px; line-height:1.75; color:var(--text-2); margin-bottom:18px; }

.article__more{ margin-top:4px; }

/* La nota del blog se muestra contraída igual que el editorial:
   hereda el recorte y el degradado de .article__body, y al abrirse
   el JS le pone la altura real. */

/* Mismo cuerpo de texto que el editorial de la semana. Blogger usa
   <div> como párrafo, así que se le da el mismo tratamiento que a <p>. */
.article__body--post p,
.article__body--post div{
  font-family:var(--font); font-size:16px; line-height:1.75;
  color:var(--text-2); margin:0 0 18px;
}
.article__body--post div:empty,
.article__body--post p:empty{ margin:0; }
.article__body--post b,
.article__body--post strong{ color:var(--text); font-weight:700; }
.article__body--post br + br{ display:none; }
.article__body--post img{
  max-width:100%; height:auto; border-radius:var(--r-sm);
  margin:8px 0 20px;
}
.article__body--post a{ color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
.article__body--post a:hover{ color:var(--brand-dark); }
/* Subtítulos DENTRO de la nota: misma familia que el texto, apenas más
   grandes y en negrita. En Newsreader a 22px competían con el título de
   la nota y "Introducción" parecía otro título (Leandro, 2/10/2026).
   Newsreader queda solo para el título de la nota. */
.article__body--post h1,
.article__body--post h2,
.article__body--post h3,
.article__body--post h4{
  font-family:var(--font); font-weight:700; font-size:17px; line-height:1.4;
  color:var(--text); margin:30px 0 10px;
}
.article__body--post ul,
.article__body--post ol{ margin:0 0 18px 22px; color:var(--text-2); font-size:16px; line-height:1.75; }
.article__body--post ul{ list-style:disc; }
.article__body--post ol{ list-style:decimal; }
.article__body--post li{ margin-bottom:8px; }
.article__body--post blockquote{
  margin:0 0 18px; padding:4px 0 4px 20px; border-left:3px solid var(--brand);
  font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--text);
}
.article__body--post table{ width:100%; border-collapse:collapse; margin-bottom:18px; font-size:14.5px; }
.article__body--post td, .article__body--post th{ border:1px solid var(--line); padding:8px 10px; }
.article__body--post iframe{ display:none; }

.article__share{ display:flex; align-items:center; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.article__share span{ font-size:12.5px; font-weight:700; color:var(--text-3); margin-right:2px; }
.article__share a{
  display:grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--line); border-radius:50%;
  font-size:11px; font-weight:800; color:var(--text-2);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.article__share a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-2px); }

/* Columna lateral: notas del blog */
.blogside{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; position:sticky; top:calc(var(--header-h) + var(--ticker-h) + 20px);
}
.blogside__title{
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); padding-bottom:14px; border-bottom:1px solid var(--line);
}
.blogside__list{ display:flex; flex-direction:column; }
.blogitem{ border-bottom:1px solid var(--line); }
.blogitem:last-child{ border-bottom:none; }
.blogitem a{
  display:flex; flex-direction:column; gap:5px; padding:15px 0;
  transition:transform .2s var(--ease);
}
/* El hover es solo para las notas a las que se puede ir. La que se está
   leyendo ya llegó a destino: moverla al pasar el mouse promete una
   navegación que no existe. */
.blogitem:not(.is-current) a:hover{ transform:translateX(3px); }
.blogitem:not(.is-current) a:hover .blogitem__title{ color:var(--brand); }

/* Nota que se está leyendo */
.blogitem.is-current a{
  border-left:3px solid var(--brand); padding-left:12px; margin-left:-15px;
}
.blogitem.is-current .blogitem__title{ color:var(--brand); font-weight:600; }
.blogitem__date{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.blogitem__title{
  font-family:var(--serif); font-size:16.5px; font-weight:500; line-height:1.35;
  color:var(--text); transition:color .2s var(--ease);
}
.blogside__all{ display:inline-block; margin-top:16px; }
.blogside__error{ font-size:13.5px; color:var(--text-3); padding:16px 0; line-height:1.5; }

/* Esqueleto de carga */
.blogitem.is-skeleton{ display:flex; flex-direction:column; gap:7px; padding:15px 0; }
.sk{ display:block; height:10px; border-radius:4px; background:var(--paper-3); animation:skpulse 1.4s ease-in-out infinite; }
.sk--date{ width:70px; height:8px; }
.sk--title{ width:100%; height:13px; }
.sk--short{ width:60%; }
@keyframes skpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ============================================================
   SERVICIOS
   ============================================================ */
.servicios__intro{ font-size:17px; line-height:1.65; color:var(--text-2); max-width:760px; margin-bottom:32px; }

.svcgrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.svccard{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px;
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.svccard:hover{ border-color:var(--line-hover); box-shadow:var(--shadow); transform:translateY(-3px); }
.svccard__num{
  display:block; font-size:12px; font-weight:800; letter-spacing:.1em;
  color:var(--brand); margin-bottom:10px;
}
.svccard h3{ font-size:21px; font-weight:800; line-height:1.25; margin-bottom:18px; }
.svccard strong{ color:var(--text); font-weight:700; }

/* Banner de WhatsApp. Estuvo oculto en escritorio del 11/8 al 2/10/2026;
   ese día volvió y se rediseñó como franja oscura, mismo lenguaje que la
   de Charlas (--ink + resplandor verde), porque como caja gris con un
   renglón quedaba "flojo" al lado de las tarjetas. Oscuro en los dos
   temas, como Charlas: el texto va en --on-dark. */
.callout{
  display:flex; align-items:center; gap:26px;
  margin-top:24px; padding:30px 36px; border-radius:var(--r-lg);
  background:var(--ink);
  background-image:radial-gradient(520px circle at 92% 50%, rgba(37,211,102,.16), transparent 62%);
}
.callout__icon{
  flex:none; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:#25d366; color:#fff;
}
.callout__txt{ flex:1; min-width:0; }
.callout h3{ font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--on-dark); margin:0 0 6px; }
.callout p{ font-size:15.5px; color:var(--on-dark-2); margin:0; }
.callout .btn{ flex:none; }

/* ============================================================
   QUIÉNES SOMOS
   ============================================================ */
.people{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.person{
  display:flex; gap:22px; padding:30px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.person:hover{ border-color:var(--line-hover); box-shadow:var(--shadow); transform:translateY(-3px); }
.person__photo{
  width:104px; height:104px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:3px solid var(--brand);
}
.person__photo--initials{
  display:grid; place-items:center;
  background:var(--ink); color:var(--brand-light);
  font-size:30px; font-weight:800; letter-spacing:.02em;
}
.person__body{ display:flex; flex-direction:column; gap:6px; }
.person__body h3{ font-size:21px; font-weight:800; }
.person__role{ font-size:13px; font-weight:600; color:var(--brand); margin-bottom:8px; }

/* ============================================================
   PREGUNTAS FRECUENTES
   ------------------------------------------------------------
   Acordeón con <details>/<summary> nativo, sin JS. Se estiliza el
   marcador propio del navegador en vez de agregar un icono aparte:
   `list-style:none` + el ::-webkit-details-marker de Safari, que
   ignora el primero. Sin las dos reglas queda el triangulito
   duplicado con la flecha nuestra.
   ============================================================ */
.faq__list{
  display:flex; flex-direction:column; gap:12px;
  max-width:860px;   /* medida de línea: ~45-75 caracteres por renglón */
}
.faq__item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.faq__item:hover{ border-color:var(--line-hover); }
.faq__item[open]{ border-color:var(--line-hover); box-shadow:var(--shadow-sm); }

.faq__q{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 24px; cursor:pointer;
  list-style:none;   /* saca el triangulito de Chrome y Firefox */
}
.faq__q::-webkit-details-marker{ display:none; }   /* y el de Safari */
.faq__q h3{
  flex:1; font-size:17.5px; font-weight:700; line-height:1.4;
  color:var(--text);
}
/* Flecha propia: gira 180° al abrir. Es un pseudo-elemento y no un
   SVG para que no haya que tocar el HTML de las 8 preguntas. */
.faq__q::after{
  content:''; flex-shrink:0; margin-top:6px;
  width:9px; height:9px;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:rotate(45deg); transform-origin:70% 70%;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); border-color:var(--brand); }
.faq__q:hover::after{ border-color:var(--brand); }

/* El foco va en el <summary>, que es lo que recibe el teclado */
.faq__q:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; border-radius:var(--r-lg); }

.faq__a{ padding:0 24px 22px; }
.faq__a p{ font-size:15.5px; line-height:1.65; color:var(--text-2); }
.faq__a p + p{ margin-top:12px; }
.faq__a strong{ color:var(--text); font-weight:600; }
.faq__a a{ color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Aclaración al pie de una respuesta (ej.: "confirmá con tu contador") */
.faq__nota{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:14px !important; color:var(--text-3) !important;
}

/* ============================================================
   NEWSLETTER + BLOG
   ============================================================ */
.panel{ padding:38px; border-radius:var(--r-lg); display:flex; flex-direction:column; gap:12px; }
.panel h2{ font-size:27px; font-weight:800; line-height:1.2; }
.panel p{ font-size:15.5px; line-height:1.6; }

.panel--dark{
  background:var(--ink);
  background-image:radial-gradient(600px circle at 82% 20%, rgba(63,178,127,.18), transparent 62%);
  color:var(--on-dark);
}
.panel--dark p{ color:var(--on-dark-2); }

/* Newsletter a todo el ancho: texto a la izquierda, formulario a la derecha */
.panel--ancho{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:48px; padding:40px 44px;
}
.panel--ancho .panel__texto{ display:flex; flex-direction:column; gap:10px; max-width:520px; }
.panel--ancho .newsletter{ margin-top:0; flex:1; max-width:460px; }

/* stretch: el botón toma la misma altura que el input, así quedan
   alineados sin depender de que los padding coincidan */
.newsletter{
  position:relative;
  display:flex; align-items:stretch; gap:10px; margin-top:10px; flex-wrap:wrap;
}
/* min-height en vez de depender solo del stretch: cuando el botón
   envuelve a su propia línea (móvil) el stretch ya no le da altura
   y quedaba de 16px. */
.newsletter input,
.newsletter .btn{ min-height:48px; }
.newsletter .btn{ padding-block:0; }

/* ERROR DE VALIDACIÓN: fuera del flujo, justo debajo del campo.
   Al no ocupar lugar, el formulario no cambia de alto y no se mueve
   nada — ni la fila, ni el panel. Es un renglón corto y entra en el
   aire que ya hay debajo del formulario. */
.newsletter .formmsg{
  position:absolute; top:100%; left:0; right:0;
  margin-top:6px;
}

/* Mismo cuerpo que el mensaje del formulario de contacto. Hace falta
   repetirlo porque `.panel p{ font-size:15.5px }` le gana en
   especificidad a `.formmsg` (una clase + un elemento contra una
   sola clase). */
.panel--ancho .formmsg{ font-size:13px; line-height:normal; }

/* SUSCRIPCIÓN HECHA: se ocultan el campo y el botón, y el mensaje pasa
   a ocupar su lugar exacto, dentro del mismo formulario. Así el panel
   no cambia de alto y no se mueve absolutamente nada.
   El min-height iguala la altura del campo para que el reemplazo calce.
   No aplica al error de validación: ahí el campo tiene que seguir a la
   vista para poder corregirlo. */
.newsletter.is-suscripto input,
.newsletter.is-suscripto .btn{ display:none; }
.newsletter.is-suscripto .formmsg{
  position:static; flex:1 1 auto;
  min-height:48px; margin-top:0;
  display:flex; align-items:center;
  /* Mismo cuerpo que las bajadas del sitio ("Contános tu situación…"),
     y en blanco: acá ya no es una nota al pie de un campo, es el
     contenido de la mitad derecha del panel. Pisa al verde de .is-ok
     por especificidad (tres clases contra dos). */
  font-size:16.5px; line-height:1.55; color:var(--on-dark);
}
.newsletter input{
  flex:1; min-width:200px;
  font-family:var(--font); font-size:15px;
  padding:14px 16px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
/* Acá había dos reglas que anulaban el halo verde del botón primario:
   sobre el panel oscuro, esa sombra desplazada 2px le difuminaba el
   borde inferior y el botón parecía terminar más abajo que el campo,
   aunque las dos cajas empezaban y terminaban en el mismo pixel.
   Desde el 13/8/2026 el botón primario ya no lleva sombra en ningún
   lado, así que las reglas quedaron de más y se sacaron. Si alguna vez
   vuelve la sombra al .btn--primary, hay que volver a anularla acá. */

.newsletter input::placeholder{ color:var(--on-dark-3); }
.newsletter input:focus{ outline:none; border-color:var(--brand-light); background:rgba(255,255,255,.1); }

.formmsg{ flex-basis:100%; }

.formmsg{ font-size:13px; font-weight:600; min-height:18px; margin-top:6px; }
.formmsg.is-ok{ color:var(--brand-light); }
.formmsg.is-err{ color:var(--down); }
.contactform .formmsg.is-ok{ color:var(--brand); }

/* ============================================================
   CONTACTO
   ============================================================ */
/* El encabezado ocupa las dos columnas arriba; debajo, formulario a la
   izquierda y "Nuestras redes" a la derecha. El orden del HTML (intro,
   formulario, redes) coincide con el visual, así que el foco del teclado
   sigue lo que se ve y en móvil se apila solo, sin reordenar nada.
   Sin filas explícitas: cada bloque ocupa su propia celda y ninguno
   abarca dos, que era lo que antes obligaba al `auto 1fr`. */
.contacto__grid{
  display:grid; grid-template-columns:1.4fr .6fr;
  column-gap:56px; row-gap:34px; align-items:start;
}
.contacto__intro{ display:flex; flex-direction:column; gap:12px; grid-column:1 / -1; grid-row:1; }
.contacto__grid > .contactform{ grid-column:1; grid-row:2; }
.contacto__grid > .redes{ grid-column:2; grid-row:2; margin-top:0; }
.contacto__intro h2{ font-size:32px; font-weight:800; line-height:1.15; margin-top:6px; }
.contacto__intro p{ font-size:16.5px; color:var(--text-2); line-height:1.55; }

.redes{ margin-top:22px; }
/* Mismos valores que .eyebrow (11px / 700 / .14em): antes era 12px, 800
   y .1em, y al lado de "CONTACTO" se veía más grande y más pesado. */
.redes__title{ display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px; }
/* 18px del título al primer ítem para igualar el aire que hay entre
   "CONTACTO" y el h2 de al lado (medido: eran 12 contra 18 y se notaba).
   16px entre redes: con 9px quedaban apretadas, y dejarlo apenas por
   debajo del margen del título mantiene la jerarquía. */
.redes ul{ display:flex; flex-direction:column; gap:16px; }
/* 16px es la medida del cuerpo de texto del sitio (la bajada de contacto
   está en 16.5): apoyarse ahí sube el bloque sin inventar un tamaño
   nuevo. Venía de 14.5. */
.redes a{
  display:flex; align-items:center; gap:14px;
  font-size:16px; font-weight:600; color:var(--text-2);
  transition:color .2s var(--ease);
}
.redes a:hover{ color:var(--text); }

/* Logo en su color de marca, sin fondo. Nada se mueve al pasar el
   mouse: solo cambia la opacidad del ícono y el color del texto. */
.redes__icon{
  display:grid; place-items:center; flex-shrink:0;
  width:30px; height:30px;
  color:var(--rc);
  transition:opacity .2s var(--ease);
}
.redes__icon svg{ width:26px; height:26px; display:block; }
.redes a:hover .redes__icon{ opacity:.75; }

.redes__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.redes__handle{ font-size:13.5px; font-weight:500; color:var(--text-3); }

.contactform{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--shadow-sm);
}

/* CONSULTA ENVIADA: el agradecimiento reemplaza al formulario entero.
   La tarjeta conserva un alto mínimo para que no colapse de golpe a una
   tira de un renglón, y el mensaje va centrado y algo más grande que el
   de validación: acá es lo único que queda en la tarjeta, no una nota
   al pie de un campo. */
.contactform.is-enviado{ min-height:280px; justify-content:center; }
.contactform.is-enviado > *:not(.formmsg){ display:none; }
.contactform.is-enviado .formmsg{
  font-size:16.5px; line-height:1.55; font-weight:600;
  text-align:center; margin:0; min-height:0;
  max-width:26ch; margin-inline:auto;
  /* var(--text) y NO blanco literal: esta tarjeta es blanca en modo
     claro y oscura en modo oscuro, al revés que el panel del
     newsletter, que es oscuro en los dos. Con un #fff fijo el mensaje
     desaparecería sobre la tarjeta blanca. Así se ve blanco en oscuro y
     casi negro en claro, igual que el resto del texto del sitio. */
  color:var(--text);
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); }
.req{ color:var(--down); }
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:15px; color:var(--text);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,143,91,.12);
}
.field input.is-invalid, .field textarea.is-invalid{ border-color:var(--down); box-shadow:0 0 0 3px rgba(239,83,80,.12); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--on-dark-2); padding-top:56px; }
.footer__top{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:40px; border-bottom:1px solid var(--line-dark);
}
.brand--footer .brand__name{ color:var(--on-dark); }
.footer__tagline{ margin-top:12px; font-size:14.5px; color:var(--on-dark-3); max-width:280px; line-height:1.55; }

.footer__nav{ display:flex; flex-direction:column; gap:10px; }
.footer__nav h3{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark); margin-bottom:4px; }
.footer__nav a{ font-size:14px; color:var(--on-dark-2); transition:color .2s var(--ease); }
.footer__nav a:hover{ color:var(--brand-light); }

.legal{ padding:32px 32px 28px; }
.legal h3{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:12px; }
.legal p{ font-size:12.5px; line-height:1.7; color:var(--on-dark-3); margin-bottom:12px; max-width:1000px; }
.legal strong{ color:var(--on-dark-2); }
.legal__data{ font-style:italic; }

.footer__bottom{
  padding:18px 32px 26px; border-top:1px solid var(--line-dark);
  font-size:12.5px; color:var(--on-dark-3);
  /* Los dos a la izquierda, uno detrás del otro. A la derecha no va:
     ahí queda el botón flotante de "volver arriba" y lo tapa. */
  display:flex; align-items:center; justify-content:flex-start;
  /* Sin separación horizontal: el aire lo pone el · de abajo, para que
     quede igual de junto que el · del propio copyright. El 10px es
     solo para cuando la línea se parte en dos. */
  gap:10px 0; flex-wrap:wrap;
}
.footer__credit{ color:var(--on-dark-3); transition:color .2s var(--ease); }
.footer__credit:hover{ color:var(--on-dark-2); }
/* Separador idéntico al de "© 2026 · Todos los derechos…", que lleva un
   espacio normal de cada lado. A 12,5px ese espacio mide 3,04px; en em
   son .24, y así acompaña si algún día cambia el cuerpo de la letra. */
.footer__credit::before{ content:'·'; margin:0 .24em; }

/* WhatsApp flotante: siempre visible abajo a la derecha. El verde es el
   oficial de WhatsApp (igual que .btn--wa), fijo en los dos temas. Hover
   plano: solo cambia el color, como los botones. */
.wafab{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff;
  box-shadow:0 8px 24px rgba(19,23,34,.25);
  transition:background .2s var(--ease);
}
.wafab:hover{ background:#1da851; }
.wafab:active{ transform:translateY(1px); }

/* Volver arriba: va encima del de WhatsApp (52px + 12px de aire) */
.totop{
  position:fixed; right:28px; bottom:88px; z-index:70;
  width:44px; height:44px; border-radius:50%;
  /* Claro, no un círculo negro: así era "una mancha oscura" (Leandro,
     2/10/2026). Sin borde (tampoco le gustó): la sombra lo despega del
     fondo. --totop-bg: gris azulado claro en el tema claro y, en el
     oscuro, un tono más claro que las tarjetas para no perderse. */
  background:var(--totop-bg); color:var(--text); border:none; cursor:pointer;
  font-size:18px; line-height:1;
  opacity:0; visibility:hidden; transform:translateY(10px);
  box-shadow:0 4px 16px rgba(19,23,34,.18);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .2s, color .2s;
}
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--brand); color:#fff; }

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  /* El gráfico sigue al lado del texto: se angosta a 2 de las 4
     columnas del panel líder, pero no baja todavía. */
  .hero__inner{ gap:32px; }
  .mktgrid{ grid-template-columns:repeat(2,1fr); }
  .dolares__grid{ grid-template-columns:repeat(3,1fr); }
  /* En tablet el CTA baja, pero se queda en la columna del texto y
     agrupado: con `space-between` a todo el ancho el precio, el botón
     y la letra chica quedaban desperdigados y sin relación entre sí. */
  .charlastrip{ grid-template-columns:auto 1fr; row-gap:24px; }
  .charlastrip__cta{
    grid-column:2; grid-row:2;
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:22px; width:auto; text-align:left; flex-wrap:wrap;
  }
  .charlastrip__cta .price{ align-items:flex-start; }
  .charlastrip__fine{ max-width:190px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

/* El nav colapsa antes que el resto: son 6 ítems y no entran junto al CTA */
@media (max-width:1080px){
  /* Absoluto respecto del header: su backdrop-filter crea un bloque
     contenedor, por lo que un position:fixed acá quedaría desplazado. */
  .mainnav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 32px 20px;
    max-height:calc(100vh - var(--ticker-h) - var(--header-h)); overflow-y:auto;
    box-shadow:0 16px 30px rgba(19,23,34,.10);
    transform:translateY(-12px); opacity:0; visibility:hidden;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .mainnav.is-open{ transform:none; opacity:1; visibility:visible; }
  .mainnav a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .mainnav a::after{ display:none; }
  .navtoggle{ display:flex; }
  .link-quiet{ display:none; }
}

@media (max-width:900px){
  /* Recién acá el gráfico baja, y lo hace ocupando todo el ancho:
     con un max-width quedaba corto y con espacio muerto al costado. */
  .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .chartcard{ width:100%; max-width:none; }

  .svcgrid, .people{ grid-template-columns:1fr; }
  /* El newsletter vuelve a apilarse: texto arriba, formulario abajo */
  .panel--ancho{ flex-direction:column; align-items:stretch; gap:20px; padding:32px; }
  .panel--ancho .newsletter{ max-width:none; }
  /* Apilado el botón va a todo el ancho: mejor objetivo táctil */
  .panel--ancho .newsletter input{ flex-basis:100%; }
  .panel--ancho .newsletter .btn{ width:100%; }
  .editorial__grid{ grid-template-columns:1fr; }
  .blogside{ position:static; }
  /* Una sola columna: se resetea la ubicación explícita del breakpoint
     anterior (si queda, el form pisa a las redes) y manda el orden del
     HTML, que ya es intro → formulario → redes. */
  .contacto__grid{ grid-template-columns:1fr; grid-template-rows:none; gap:36px; }
  .contacto__intro{ grid-column:auto; grid-row:auto; }
  .contacto__grid > .contactform{ grid-column:auto; grid-row:auto; }
  .contacto__grid > .redes{ grid-column:auto; grid-row:auto; }
  .sectionhead h2{ font-size:27px; }
  /* Reserva de dos renglones otra vez: a este tamaño el título casi
     siempre ocupa dos líneas, así que no deja hueco y sí evita el salto. */
  .article__title{ font-size:28px; min-height:2.36em; }
  .article{ padding:28px; }
}

@media (max-width:680px){
  .wrap{ padding-inline:20px; }
  .section{ padding:56px 0; }
  /* Misma proporción en móvil: 64 + 56 = 120px pasan a 28 + 32 = 60px */
  .hero{ padding-bottom:28px; }
  .markets{ padding-top:32px; }
  .hero{ padding-top:calc(var(--header-h) + var(--ticker-h) + 40px); }
  .tickerbar__live{ padding:0 10px 0 14px; font-size:10px; }
  .tickerbar__livetext{ display:none; }

  .mktgrid{ grid-template-columns:1fr; }
  .dolares__grid{ grid-template-columns:repeat(2,1fr); }
  .dolares{ padding:18px; }

  /* "Ver todos los mercados" pasa a estar DEBAJO de la última tarjeta.
     Hay que resetear el grid-column del breakpoint anterior o queda una
     segunda columna fantasma (la misma trampa que .charlastrip). */
  .markets__wrap{ grid-template-columns:1fr; }
  .markets__wrap > .sectionhead{ grid-column:1; order:1; }
  .markets__wrap > .mktgrid{ grid-column:1; order:2; }
  .markets__all{
    grid-column:1; order:3;
    justify-self:start; margin-top:20px; margin-bottom:0;
  }
  .markets__wrap > .dolares{ grid-column:1; order:4; }

  .charlastrip{ grid-template-columns:1fr; padding:28px; text-align:center; justify-items:center; }
  .charlastrip__body{ align-items:center; }
  .charlastrip__body h2{ font-size:23px; }
  .charlastrip .ticklist{ text-align:left; }
  /* Hay que devolver el CTA a la única columna: si queda el
     `grid-column:2` del breakpoint de tablet, se crea una segunda
     columna implícita y la foto se aplasta a unos pocos píxeles. */
  .charlastrip__cta{
    grid-column:1; grid-row:auto;
    flex-direction:column; align-items:center; text-align:center;
    justify-content:center; gap:14px;
  }
  .charlastrip__cta .price{ align-items:center; }
  .charlastrip__fine{ max-width:220px; }
  .charlastrip__photo img{ width:140px; height:140px; }

  .person{ flex-direction:column; }
  /* Apilado y centrado: ícono, texto y botón */
  .callout{ flex-direction:column; text-align:center; gap:16px; padding:28px 22px; }
  .callout h3{ font-size:21px; }

  /* Apilado, el panel NO centra verticalmente (es columna con stretch),
     así que el mensaje puede volver al flujo: crece hacia abajo sin
     mover el campo ni el botón. Y conviene que vuelva: fuera del flujo
     quedaba a 1px del borde del panel y cualquier texto más largo se
     salía. Vacío no deja hueco. */
  .newsletter .formmsg{ position:static; }
  .newsletter .formmsg:empty{ min-height:0; margin-top:0; }
  .svccard, .panel, .contactform{ padding:24px; }

  /* El acordeón achica su relleno igual que las demás tarjetas, pero
     el <summary> conserva alto de sobra para el dedo (20+20 de padding
     sobre dos renglones de título): no necesita min-height aparte. */
  .faq__q{ padding:16px 18px; gap:12px; }
  .faq__q h3{ font-size:16px; }
  .faq__a{ padding:0 18px 18px; }
  .footer__top{ grid-template-columns:1fr; gap:26px; }
  .legal, .footer__bottom{ padding-inline:20px; }
  /* Apilado, los dos a la izquierda. Sin el · , que en columna quedaría
     colgando al principio del renglón de abajo. */
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__credit::before{ content:none; }
  .brand__name{ font-size:13px; }

  /* El CTA del header sobra en móvil: el mismo botón está justo
     abajo en el hero. Sacarlo deja lugar para el nombre de la marca. */
  .header__right .btn--sm{ display:none; }
}

/* En pantallas angostas el CTA compite con el logo y el botón de menú:
   se compacta para que los tres respiren. */
/* En pantallas táctiles los objetivos chicos son difíciles de acertar.
   Se llevan a ~44px de alto, que es la recomendación de Apple. */
@media (max-width:900px) and (pointer:coarse), (max-width:680px){
  .header__right .btn--sm{ min-height:42px; padding-inline:18px; }
  .playlink{ min-height:44px; align-items:center; }
  .chartcard__tab{ min-height:38px; padding-block:10px; }
  .link-arrow{ display:inline-flex; align-items:center; min-height:44px; }
  .redes a{ min-height:46px; }
  .footer__nav a{ min-height:38px; display:flex; align-items:center; }
  .article__share a{ width:40px; height:40px; }
  /* Quedaba en 38px: .btn es inline-flex y solo tiene padding, así que
     necesita min-height explícito como el resto de los objetivos táctiles. */
  .article__more{ min-height:40px; }
}

@media (max-width:560px){
  .header__right{ gap:8px; }
  .header__right .btn--sm{ padding:8px 14px; font-size:12.5px; }
  .chartcard__tab{ padding:6px 10px; font-size:11.5px; }
  .chartcard__hint{ font-size:10.5px; }

  /* Las pestañas se recorren en una sola fila en vez de partirse */
  .chartcard__tabs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .chartcard__tabs::-webkit-scrollbar{ display:none; }
  .chartcard__tab{ flex-shrink:0; }
  .chartcard__head .pill{ flex-shrink:0; }
}

@media (max-width:430px){
  .tkitem{ padding:0 13px; font-size:12px; }
}

/* ============================================================
   ACCESIBILIDAD — movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }

  /* La cinta no se desplaza sola, pero sus datos tienen que seguir
     siendo alcanzables: se puede recorrer a mano. */
  .tickerbar__tape{ overflow-x:auto; scrollbar-width:none; }
  .tickerbar__tape::-webkit-scrollbar{ display:none; }
  .tickerbar__track{ animation:none !important; }
}

/* Escotilla de escape: con respetarMovimientoReducido:false en config.js,
   el JS marca el <html> y la cinta se anima igual. Mayor especificidad que
   el reset de arriba, así que gana incluso con movimiento reducido activo. */
html.pb-motion .tickerbar__track{
  animation:marquee var(--marquee-dur, 60s) linear infinite !important;
}
html.pb-motion .tickerbar__tape{ overflow-x:hidden; }

/* La pausa al pasar el mouse tiene que ganarle al !important de arriba
   (el atajo `animation` reinicia animation-play-state a running). */
html.pb-motion .tickerbar__tape:hover .tickerbar__track,
html.pb-motion .tickerbar__tape:focus-within .tickerbar__track{
  animation-play-state:paused !important;
}

/* La barra de progreso del gráfico necesita su transición real */
html.pb-motion .chartcard__progress i{ transition-duration:inherit !important; }