/* ══════════════════════════════════════════════════════════════════
   PLANTILLA casa-de-cambio · el CSS APROBADO, copiado tal cual
   ══════════════════════════════════════════════════════════════════
   Copiado literal de index.html de Dolares Aviacion. NO se reescribio ni se
   "mejoro": portar a la fabrica es cambiar de DONDE salen los datos, no como
   se ve. El diseno ya paso revision —Fraunces, navy profundo, champagne, el
   verde de WhatsApp corregido, los arreglos de movil— y rehacerlo tiraba ese
   trabajo y obligaba a aprobarlo otra vez.

   Lo unico que cambia respecto al original: los tokens de :root pasan a
   .cc para que convivan varios sitios en la misma app, y los valores que
   dependen del sitio los pisa .
   ══════════════════════════════════════════════════════════════════ */
  .cc{
    /* Navy profundo, no azul rey: es lo que separa "fino" de "genérico". */
    --navy:#102a52; --navy-d:#0a1c39; --navy-l:#4a86dd; --navy-ink:#071427;
    --ink:#101f33; --ink2:#3a4a60; --muted:#6b788b;
    /* Neutros cálidos. Un gris azulado frío abarata cualquier paleta. */
    --bg:#f7f5f0; --surface:#ffffff; --tint:#f2ece0; --tint-2:#e4d8c2;
    /* Champagne del logo — el acento de la marca. */
    --oro:#d9c48c; --oro-l:#ecdcb6; --oro-d:#9a7f45;
    --amber:#d9a24a; --star:#e0b458;
    --line:rgba(16,31,51,.10); --line-2:rgba(16,31,51,.17);
    --r:14px; --r-lg:24px; --maxw:1200px;
    --sh:0 30px 70px -34px rgba(10,30,60,.30); --sh-sm:0 14px 34px -20px rgba(10,30,60,.22);
    --e:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Sin scroll-behavior:smooth a proposito: Lenis maneja el suavizado y los dos
     animando el mismo scroll se pelean. El respaldo nativo lo pone el JS cuando
     Lenis no carga. */
  html{scroll-behavior:auto}
  body{font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
  h1,h2,h3,h4{font-family:'Fraunces','Space Grotesk','Manrope',serif;font-optical-sizing:auto;font-weight:600;line-height:1.05;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
  .rise.in{opacity:1;transform:none}
  .has-motion .rise{transition:none}
  /* Sin min-width:0 un item de grid usa min-width:auto y se niega a encoger bajo
     el ancho de su contenido: en movil la tarjeta se sale y, como el body lleva
     overflow-x:clip, no se desborda — se RECORTA. Falto calc2__grid y por eso
     el cotizador perdia CAD, JPY y el boton de 5,000. */
  .da-hero__grid>*,.da-rev>*,.da-faq__q,.da-foot__grid>*,.da-contact>*,.calc2__grid>*{min-width:0}

  .kick{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oro-d);background:var(--tint);border:1px solid var(--tint-2);border-radius:999px;padding:6px 14px;margin-bottom:16px}
  /* El espacio bajo la pildora lo pone ELLA, no el titulo de abajo. Antes cada
     titulo decidia su margen y cuatro secciones quedaban en 0 literal. */
  .kick .d{width:5px;height:5px;border-radius:99px;background:var(--oro-d);box-shadow:0 0 0 3px rgba(154,127,69,.16)}
  .kick.on-dark{background:rgba(217,196,140,.10);border-color:rgba(217,196,140,.28);color:var(--oro-l)}
  .kick.on-dark .d{background:var(--oro);box-shadow:0 0 0 3px rgba(217,196,140,.25)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;transition:transform .22s var(--e),box-shadow .22s,background .18s;min-height:50px;white-space:nowrap}
  .btn svg{flex:none}
  .btn-navy{background:var(--navy);color:#fff;box-shadow:0 14px 28px -12px rgba(22,56,106,.5)}
  .btn-navy:hover{background:var(--navy-d);transform:translateY(-2px)}
  /* El #25d366 es el verde del LOGO de WhatsApp: como relleno grande y plano
     se lee neon. Profundizado y con gradiente, igual que el boton flotante. */
  .btn-wa{background:linear-gradient(150deg,#22ab5c,#0f8341);color:#fff;box-shadow:0 14px 30px -14px rgba(15,131,65,.55),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn-wa:hover{background:linear-gradient(150deg,#26bd66,#118f47);transform:translateY(-2px)}
  .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
  .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{background:var(--tint);transform:translateY(-2px)}
  .btn-sm{padding:10px 17px;font-size:13.5px;min-height:42px}

  /* NAV */
  .da-nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
  .da-nav.on{background:rgba(244,247,251,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 4px 24px -18px rgba(10,30,60,.5)}
  .da-nav__in{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:-.02em;color:#fff}
  .da-nav.on .brand{color:var(--ink)}
  .brand .mk{width:38px;height:38px;border-radius:11px;background:linear-gradient(155deg,#17436f,#091b33);display:grid;place-items:center;flex-shrink:0;color:#f4ecd8;font-family:'Space Grotesk';font-weight:700;font-size:16px;letter-spacing:-.02em;box-shadow:0 8px 18px -8px rgba(9,27,51,.9),inset 0 0 0 1.5px rgba(217,196,140,.72)}
  .da-nav__links{display:flex;align-items:center;gap:26px}
  .da-nav__links a{font-size:14px;font-weight:600;color:rgba(255,255,255,.9);transition:color .2s} .da-nav__links a:hover{color:#fff}
  .da-nav.on .da-nav__links a{color:var(--ink2)} .da-nav.on .da-nav__links a:hover{color:var(--navy)}
  .da-nav__cta{display:flex;align-items:center;gap:10px}
  .da-nav .btn-navy{background:#fff;color:var(--navy);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
  .da-nav.on .btn-navy{background:var(--navy);color:#fff}
  .burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;flex-direction:column;gap:5px;justify-content:center;align-items:center}
  .burger span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.3s} .da-nav.on .burger span{background:var(--ink)}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .sheet{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);z-index:95;background:var(--surface);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .35s var(--e);padding:88px 26px 40px;display:flex;flex-direction:column;gap:2px}
  .sheet.x{transform:none}
  .sheet a{padding:15px 6px;font-size:17px;font-weight:700;border-bottom:1px solid var(--line);font-family:'Space Grotesk';color:var(--ink)}
  /* .sheet a fija color:var(--ink) y gana en especificidad sobre .btn-navy:
     el boton quedaba con texto navy sobre fondo navy (contraste 1.17:1). */
  .sheet a.btn{margin-top:18px;color:#fff;border-bottom:0;justify-content:center}
  .sheet a.btn-white,.sheet a.btn-ghost{color:var(--ink)}
  .scrim{position:fixed;inset:0;background:rgba(8,16,26,.4);z-index:94;opacity:0;pointer-events:none;transition:opacity .3s} .scrim.x{opacity:1;pointer-events:auto}

  /* HERO */
  .da-hero{position:relative;color:#fff;overflow:hidden;padding:132px 0 76px}
  .da-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .da-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:heroZoom 22s ease-in-out infinite alternate}
  @keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
  .da-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(5,14,28,.96) 8%,rgba(8,22,44,.90) 40%,rgba(10,28,56,.62) 100%)}
  /* Velo champagne, no azul: es el halo que da la sensacion de caro. */
  .da-hero__bg::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(80% 62% at 78% 16%,rgba(217,196,140,.16),transparent 62%),radial-gradient(70% 60% at 20% 90%,rgba(74,134,221,.14),transparent 60%)}
  .da-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,196,140,.35),transparent);z-index:3}
  .da-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:stretch}
  .da-hero h1{font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:clamp(34px,5vw,56px);letter-spacing:-.01em;margin:0 0 16px;max-width:14ch}
  .da-hero h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#e4cf9c}
  .da-hero__lead{font-size:clamp(15px,1.7vw,17.5px);max-width:460px;color:rgba(255,255,255,.82);margin-bottom:24px}
  .da-trust{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 13px}
  .chip b{color:#fff;font-weight:800} .chip .st{color:var(--star);letter-spacing:1px}
  .da-hero__cta{display:flex;gap:11px;flex-wrap:wrap}

  /* Vidrio con filo champagne: el borde dorado de 1px es el detalle caro. */
  /* `--col-v` es el ancho de las dos columnas de precio. Una sola fuente para
     el rotulo y el valor: escrito dos veces, cambiar el tamaño de las cifras
     desalineaba COMPRA y VENTA de su columna. */
  .board{position:relative;--col-v:118px;background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border:1px solid rgba(217,196,140,.22);border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:28px 30px 24px;color:#fff;display:flex;flex-direction:column}
  /* z-index:0 y el contenido a 1: sin esto el pseudo se pinta ENCIMA del texto
     —un pseudo posicionado va despues del contenido en flujo— y el dorado al 9%
     lavaba las banderas y los precios. El velo es para el vidrio, no para lo
     que se lee sobre el. */
  .board::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;z-index:0;background:radial-gradient(120% 60% at 50% 0%,rgba(217,196,140,.09),transparent 60%)}
  .board>*{position:relative;z-index:1}
  .board__rows{display:flex;flex-direction:column}
  /* `start` y no `stretch`: el tablero se ve balanceado con cuatro divisas o
     con nueve porque su alto sale de cuantas hay, no del texto de al lado. */
  .da-hero__grid .board{align-self:start}
  .board__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid rgba(217,196,140,.20)}
  /* Es el titulo del unico modulo por el que la gente entra a la pagina y venia
     a 16px, mas chico que el nombre de una divisa. Manda como titulo. */
  .board__top h3{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff;line-height:1.15}
  .board__sello{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  .board__live{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--oro-l)}
  /* La hora es la prueba de que el tablero esta vivo — el argumento de venta
     entero de la pagina— y venia a 11px y al 55% de blanco: se leia como letra
     chica de contrato. Sube de tamaño y de contraste. */
  .board__fecha{font-size:14px;color:rgba(255,255,255,.78);white-space:nowrap}
  .board__fecha::before{content:"actualizado ";color:rgba(255,255,255,.58)}
  .board__live .d{width:7px;height:7px;border-radius:99px;background:var(--oro);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,196,140,.55)}70%{box-shadow:0 0 0 6px rgba(217,196,140,0)}100%{box-shadow:0 0 0 0 rgba(217,196,140,0)}}
  /* Cada rotulo toma el color de su punto: es lo que hace que la columna se
     lea sin releer el encabezado. */
  /* COMPRA y VENTA a 17px. Iban a 12 y se subieron a 13.5 pensando que
     bastaba: no bastaba —Santiago lo pidio cuatro veces—. Son los rotulos que
     dicen cual columna es cual en un tablero de precios, no una nota al pie;
     a 17px se leen desde la distancia a la que se mira el hero. */
  .board__legend{display:flex;justify-content:flex-end;gap:16px;padding:16px 2px 8px;font-size:17px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
  /* Mismo ancho que la columna que rotulan, o el rotulo flota fuera de su eje. */
  .board__legend>span{min-width:var(--col-v);text-align:right}
  .board__legend>span:first-child{color:#8fb8f0}
  .board__legend>span:last-child{color:var(--amber)}
  /* Al pasar de seis divisas a cuatro el tablero se encogio y quedo corto al
     lado del titular. La altura se recupera con la fila, no con relleno vacio:
     mas aire arriba y abajo y piezas mas grandes dentro. */
  .board__row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:18px 2px;border-top:1px solid rgba(255,255,255,.12);transition:background .15s}
  .board__row:first-of-type{border-top:0}
  .board__row:hover{background:rgba(255,255,255,.06);border-radius:8px}
  .board__nm{display:flex;align-items:center;gap:14px;min-width:0}
  /* `color` explicito y no heredado: `.board__nm span` le pasaba el blanco al
     58% del subtitulo y Chrome aplica ese alfa al glifo emoji —la bandera se
     pintaba translucida—. Ni el `text-shadow` de antes ni subir la saturacion
     lo tocaban, porque el problema nunca fue el color de la bandera. */
  .board__nm .fl{width:50px;flex:none}
  /* El codigo es el titulo: grande y con peso, que es lo que se busca de un
     vistazo. El nombre baja a subtitulo. */
  .board__nm b{display:block;font-size:26px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:.005em}
  .board__sub{display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.07em;color:rgba(255,255,255,.62);text-transform:uppercase}
  .board__v{min-width:var(--col-v);text-align:right;font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:28px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1.1}
  /* El peso se lo lleva la cifra: el simbolo queda a media altura y sin serifa
     de titular. */
  .board__cur{font-style:normal;font-size:.62em;font-weight:600;opacity:.72;margin-right:1px}
  .board__v .dot{display:inline-block;width:7px;height:7px;border-radius:99px;margin-right:8px;vertical-align:middle}
  .board__v.buy .dot{background:var(--navy-l)} .board__v.sell .dot{background:var(--amber)}
  .board__nota{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.6)} .board__nota svg{flex:none;color:#9dc0f2}

  /* SECCIONES */
  .sec{padding:88px 0;position:relative}
  /* Halo champagne apenas perceptible: lo que evita que el fondo claro se lea plano. */
  .sec::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 78% 0%,rgba(217,196,140,.16),transparent 62%)}
  .sec>*{position:relative;z-index:1}
  .sec-head{max-width:640px;margin-bottom:36px}
  .sec-head.mid{margin-inline:auto;text-align:center}
  .sec-head .kick{margin-bottom:18px}
  .sec-head h2{font-size:clamp(27px,4vw,42px);margin-bottom:12px}
  .sec-head p{color:var(--muted);font-size:16px}
  .alt{background:var(--surface)}

  /* SECCIÓN 2 — Calcula + Ubicación en dos columnas (una tarjeta) */
  .calc2{max-width:1040px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
  .calc2__grid{display:grid;grid-template-columns:1.02fr .98fr}
  .calc2__conv{padding:26px 28px;border-right:1px solid var(--line)}
  .calc2__loc{padding:26px 28px;background:var(--bg);display:flex;flex-direction:column;gap:16px}
  .lab{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .conv__op{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .conv__op button{border:1.5px solid var(--line-2);background:#fff;border-radius:12px;padding:13px 10px;cursor:pointer;transition:.2s;text-align:center;min-height:60px}
  /* Es la primera decision de la calculadora y venia a 13.5px, mas chico que
     el nombre de una divisa del tablero. */
  .conv__op button b{display:block;font-size:18px;font-weight:800;letter-spacing:.02em;color:var(--ink);line-height:1.15}
  .conv__op button span{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
  .conv__op button:hover{border-color:var(--navy-l)}
  /* La seleccion se marca con CONTORNO, no rellenando de beige.
     `--tint` (#f2ece0) pintaba el boton activo de crema y leia como amarillo
     sucio contra el blanco de la tarjeta. Un anillo de 3px sobre fondo blanco
     mas una sombra corta dice "elegido" sin ensuciar el color, y es el mismo
     gesto que ya usa `.conv__field:focus-within` justo debajo: el formulario
     entero marca lo activo igual. */
  .conv__op button.is-on{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(16,42,82,.13),0 6px 16px -8px rgba(16,42,82,.5)}
  .conv__op button.is-on b{color:var(--navy)}
  .conv__op button.is-on span{color:var(--navy);opacity:.72}
  /* Rejilla de dos y no `flex-wrap`: con `flex:1 1 28%` cuatro divisas caian
     3 arriba y 1 sola abajo, estirada a todo el ancho. Dos columnas fijas dan
     2 y 2 —y con seis, tres filas parejas—. */
  .conv__cur{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
  .da-cur{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink2);border-radius:11px;padding:10px 6px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;min-height:46px}
  .da-cur:hover{border-color:var(--navy-l)}
  /* Mismo lenguaje de seleccion que arriba: contorno y anillo. El relleno
     navy solido competia con el bloque del resultado, que es lo que de verdad
     tiene que ganar la pantalla. */
  .da-cur.is-on{background:#fff;color:var(--navy);border-color:var(--navy);box-shadow:0 0 0 3px rgba(16,42,82,.13),0 6px 16px -8px rgba(16,42,82,.5)}
  .da-cur .fl{width:26px}
  .conv__field{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:14px;padding:2px 14px;transition:.2s;background:#fff}
  .conv__field:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,56,106,.13)}
  .conv__field .sym{font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:21px;color:var(--navy)}
  .conv__field input{flex:1;border:0;outline:0;font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:24px;color:var(--ink);padding:10px 10px;min-width:0;background:transparent;font-variant-numeric:tabular-nums}
  .conv__field .cur{font-weight:700;font-size:14px;color:var(--muted)}
  .conv__quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:9px}
  .da-quick{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:8px 4px;font-size:12.5px;font-weight:700;color:var(--ink2);cursor:pointer;transition:.2s;min-height:38px}
  .da-quick:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  .conv__out{margin-top:16px;border-radius:18px;padding:18px 20px;background:linear-gradient(155deg,var(--navy),var(--navy-d));color:#fff;box-shadow:0 20px 40px -22px rgba(22,56,106,.7)}
  .conv__out .k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:4px}
  .conv__out .v{font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:clamp(26px,4.5vw,32px);line-height:1;display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
  .conv__out .v .c{font-size:13px;color:rgba(255,255,255,.7);font-weight:700}
  .conv__out .r{margin-top:7px;font-size:12px;color:rgba(255,255,255,.82)} .conv__out .r b{color:#fff;font-weight:800}
  .conv__out .btn{width:100%;margin-top:14px;background:linear-gradient(150deg,#22ab5c,#0f8341);color:#fff;box-shadow:0 14px 30px -14px rgba(15,131,65,.6),inset 0 1px 0 rgba(255,255,255,.18)}
  .conv__out .btn:hover{background:linear-gradient(150deg,#26bd66,#118f47)}
  .conv__out .btn svg{fill:#fff}
  /* columna ubicación */
  .calc2__map{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm);background:var(--tint);flex:1;min-height:230px}
  .calc2__map iframe{width:100%;height:100%;border:0;display:block}
  .calc2__locinfo .t{font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:19px;color:var(--ink);margin-bottom:6px}
  .calc2__locinfo .a{color:var(--muted);font-size:13.5px;display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
  .calc2__locinfo .a svg{flex:none;margin-top:2px;color:var(--navy)}
  .calc2__locinfo .cta{display:flex;gap:9px;flex-wrap:wrap}
  .calc2__locinfo .more{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--navy)}

  /* RESEÑAS */
  .da-rev{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:stretch}
  .da-rev__sum{background:linear-gradient(160deg,var(--navy),var(--navy-d));color:#fff;border-radius:var(--r-lg);padding:38px 32px;text-align:center;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(217,196,140,.20)}
  /* El halo va como fondo del propio elemento, con ELIPSE en %.
     Antes era un circle dentro de una caja absoluta sobredimensionada: los
     stops de un circle se miden contra su radio (la dimension MENOR de la
     caja), asi que en una tarjeta angosta el degradado no alcanzaba a llegar
     a transparente y se veia el borde recto de la caja. Una elipse en % del
     elemento se desvanece dentro de el sea cual sea su proporcion. */
  .da-rev__sum{background-image:radial-gradient(ellipse 80% 70% at 18% 8%,rgba(217,196,140,.20),transparent 62%),linear-gradient(160deg,var(--navy),var(--navy-d))}
  .da-rev__sum>*{position:relative}
  .da-rev__big{font-family:'Fraunces','Space Grotesk',serif;font-optical-sizing:auto;font-weight:600;font-size:66px;line-height:1;margin-bottom:6px}
  .da-rev__stars{color:var(--star);letter-spacing:3px;font-size:19px;margin-bottom:10px}
  .da-rev__sum p{color:rgba(255,255,255,.75);font-size:14px;margin-bottom:22px}
  .da-rev__gbadge{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink2);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:600;margin:0 auto 22px}
  .da-rev__gbadge img,.da-rev__gbadge svg{flex:none}
  .da-rev__list{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}
  .da-rev__item{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--sh-sm);display:flex;gap:16px;align-items:flex-start;transition:.2s}
  .da-rev__item:hover{transform:translateY(-2px);box-shadow:var(--sh)}
  .da-rev__item .av{flex:none;width:44px;height:44px;border-radius:999px;background:var(--tint);color:var(--navy);display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:17px}
  .da-rev__item .qs{color:var(--star);letter-spacing:1px;font-size:12px;margin-bottom:5px}
  .da-rev__item p{font-size:14.5px;color:var(--ink2);line-height:1.55;margin-bottom:8px}
  .da-rev__item b{font-size:13.5px;color:var(--ink)} .da-rev__item small{color:var(--muted);font-size:12px;margin-left:6px}

  /* FAQ */
  .da-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:40px}
  .da-faq__q{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--sh-sm);display:flex;gap:14px;align-items:flex-start;transition:.2s}
  .da-faq__q:hover{border-color:var(--tint-2);box-shadow:var(--sh)}
  .da-faq__q .qn{flex:none;width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--navy);display:grid;place-items:center}
  .da-faq__q b{display:block;font-family:'Space Grotesk';font-size:16px;color:var(--ink);margin-bottom:7px}
  .da-faq__q p{color:var(--muted);font-size:14px;line-height:1.6}
  .da-biz{background:var(--navy-ink);border-radius:var(--r-lg);padding:34px 36px;color:#fff;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;box-shadow:inset 0 0 0 1px rgba(217,196,140,.20)}
  .da-biz{background-image:radial-gradient(ellipse 72% 90% at 86% 18%,rgba(217,196,140,.20),transparent 62%)}
  .da-biz>*{position:relative}
  .da-biz__t{max-width:560px}
  .da-biz__t .kick{background:rgba(59,122,212,.16);border-color:rgba(59,122,212,.3);color:#9dc0f2}
  .da-biz h3{font-size:23px;margin-bottom:8px} .da-biz h3 em{font-style:normal;color:#9dc0f2}
  .da-biz p{color:rgba(255,255,255,.72);font-size:14.5px}

  /* CONTACTO + REDES */
  .da-contact{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .da-contact h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}
  .da-contact__lead{color:var(--ink2);font-size:16px;margin-bottom:22px;max-width:440px}
  .da-contact__cta{display:flex;gap:11px;flex-wrap:wrap}
  .da-social{display:flex;flex-direction:column;gap:12px}
  .da-social__item{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 18px;box-shadow:var(--sh-sm);transition:.2s}
  .da-social__item[href]:hover{transform:translateY(-2px);box-shadow:var(--sh)}
  .da-social__ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff}
  .da-social__ic.wa{background:linear-gradient(150deg,#22ab5c,#0f8341)}
  .da-social__ic.ig{background:linear-gradient(45deg,#f09433 5%,#e6683c 30%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
  .da-social__ic.fb{background:#1877f2}
  .da-social__tx{min-width:0} .da-social__tx b{display:block;font-family:'Space Grotesk';font-size:15px;color:var(--ink)} .da-social__tx span{font-size:12.5px;color:var(--muted)}
  .da-social__badge{margin-left:auto;flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);background:var(--tint);border:1px solid var(--tint-2);border-radius:999px;padding:4px 10px}
  .da-social__badge.live{color:#04340f;background:#d9f7e4;border-color:#b6ecc9}

  /* FOOTER */
  .da-foot{background:var(--navy-ink);color:#fff;padding:60px 0 30px;border-top:1px solid rgba(217,196,140,.28)}
  .da-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:40px}
  .da-foot .brand{color:#fff;margin-bottom:14px}
  .da-foot__grid>div>p{color:rgba(255,255,255,.58);font-size:14px;max-width:300px;line-height:1.6}
  .da-foot__col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:15px;font-weight:700}
  .da-foot__col a,.da-foot__col p{display:block;color:rgba(255,255,255,.8);font-size:14px;margin-bottom:10px;transition:color .2s} .da-foot__col a:hover{color:#9dc0f2}
  .da-foot__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
  .da-foot__bottom p{color:rgba(255,255,255,.5);font-size:12.5px;line-height:1.5}

  @media(max-width:980px){
    .da-hero__grid,.da-rev,.da-contact{grid-template-columns:1fr;gap:36px}
    .da-hero{padding:120px 0 60px}
    .calc2__grid{grid-template-columns:1fr}
    .calc2__conv{border-right:0;border-bottom:1px solid var(--line)}
    .calc2__map{min-height:220px}
    .da-foot__grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){
    .da-nav__links{display:none} .da-nav__cta .btn-navy{display:none} .burger{display:flex}
    .sec{padding:64px 0} .da-hero{padding:104px 0 52px}
    .calc2__conv,.calc2__loc{padding:22px 20px}
    .da-faq{grid-template-columns:1fr;gap:12px}
    .board__legend{display:none}
    /* Fraunces es mas ancha que Space Grotesk: a tamaño de escritorio estruja
       la columna del nombre y "Dolar canadiense" se parte en dos lineas. Se
       compacta el valor para devolverle ancho al nombre.

       IMPORTANTE — el 31-jul se agrandaron titulo, banderas y cifras del
       tablero para el escritorio. Ese crecimiento NO baja aqui, y es a
       proposito: en 331px de tablero hay tres columnas peleando el ancho, y al
       subir las cifras el nombre de la divisa se parte en dos lineas. Medido
       ese dia: "Dolar canadiense" pide 112px y con las cifras grandes le
       quedaban 71. Movil se queda en la escala que ya tenia —donde cabe en una
       linea— y solo hereda el arreglo del color de la bandera.

       Si algun dia se quiere el mismo peso en movil, no es cuestion de afinar
       px: hay que partir la fila en dos renglones (nombre arriba, precios
       abajo). Eso es un cambio de layout, no un ajuste. */
    .board{padding:20px 18px 16px;--col-v:58px}
    /* Apilado y no en fila: con la hora ya legible el sello pide 173px de los
       293 del tablero, y al titulo le quedaban 110 — "Tipo de cambio de hoy"
       se partia en TRES lineas. En columna cada uno tiene el ancho entero. */
    .board__top{flex-direction:column;align-items:flex-start;gap:5px}
    .board__sello{flex-direction:row;align-items:center;gap:9px}
    .board__v{font-size:15px}
    .board__row{gap:9px;padding:11px 2px}
    .board__nm{gap:8px}
    .board__top h3{font-size:17px}
    /* Cabe en una linea (99px de texto en 123px de columna): el salto era del
       reparto del grid, no falta de espacio. Medido, no supuesto. */
    .board__nm b{font-size:18px;white-space:nowrap}
    .board__nm .fl{width:36px}
    .board__sub{font-size:10.5px;margin-top:1px;letter-spacing:.06em}
  }
  @media(max-width:560px){
    .da-foot__grid{grid-template-columns:1fr}
    .conv__op{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}