/* Tarjeta digital · Grupo Global · "Largo plazo": arcos = horizonte, barras = crecimiento, base = solidez.
   Siempre en modo claro. Cada texto existe en lang="es" y lang="en"; se oculta el que no está activo. */

/* ================= LETRAS ================= */
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url(../fonts/manrope-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Respaldo con las medidas de la letra real (recursos.py): al cargar, nada se mueve */
@font-face { font-family: "Newsreader respaldo"; src: local("Georgia"); size-adjust: 102.08%; ascent-override: 72.49%; descent-override: 25.47%; line-gap-override: 0%; }
@font-face { font-family: "Manrope respaldo"; src: local("Arial"); size-adjust: 99%; ascent-override: 108.08%; descent-override: 30.3%; line-gap-override: 0%; }

/* ================= TOKENS ================= */
:root {
  --papel: #F4F4F6;
  --blanco: #FFFFFF;
  --tinta: #1D1E3A;
  --tinta-suave: #5A5D73;
  --azul: #0157B8;
  --profundo: #0F253A;
  --profundo-hover: #1B3652;
  --filete: rgba(29, 30, 58, .12);
  --filete-fuerte: rgba(29, 30, 58, .22);
  --filete-hover: rgba(29, 30, 58, .45);
  --velo: rgba(244, 244, 246, .74);
  --velo-0: rgba(244, 244, 246, 0);
  --barra-fondo: rgba(255, 255, 255, .88);
  --fondo-hoja: rgba(15, 37, 58, .36);
  --marcador: #FFE58A;
  --serif: "Newsreader", "Newsreader respaldo", Georgia, serif;
  --sans: "Manrope", "Manrope respaldo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --curva: cubic-bezier(.2, .7, .1, 1);
  --curva-entrada: cubic-bezier(.65, 0, .35, 1);
  --rapido: 160ms;
  --medio: 240ms;
  --revelar: 600ms;
  --r-boton: 8px;
  --r-hoja: 12px;
  --margen: 24px;
  --ancho: 560px;
  --alto-boton: 56px;
  --alto-rapido: 52px;
  --resto-pantalla: 292px;   /* nombre, cargo, etiquetas y 2 botones (medido) */
  color-scheme: light;
}

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--papel); }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
html:not([data-idioma="en"]) [lang="en"], [data-idioma="en"] [lang="es"] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico .relleno { fill: currentColor; stroke: none; }

/* ================= RETRATO Y CABECERA ================= */
.pagina { position: relative; max-width: var(--ancho); margin: 0 auto; }
.retrato { position: relative; height: clamp(208px, calc(100vh - var(--resto-pantalla)), 520px); height: clamp(208px, calc(100svh - var(--resto-pantalla)), 520px); }
.retrato picture { display: block; height: 100%; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent); mask-image: linear-gradient(to bottom, #000 68%, transparent); }
@media (min-width: 561px) {
  /* más ancha que la columna: los lados también se funden, sin caja gris */
  .retrato img { -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 68%, transparent), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect; }
}
.cabecera { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 10px 0 20px; }
.cabecera::before { content: ""; position: absolute; inset: 0 0 -44px; z-index: -1; pointer-events: none; background: linear-gradient(var(--velo), var(--velo-0)); }
.hl { height: 22px; width: auto; }
.idioma { display: flex; }
.no-js .idioma { display: none; }
.idioma button { position: relative; min-width: 44px; height: 44px; font: 500 13px/1 var(--sans); letter-spacing: .1em; color: var(--tinta); opacity: .72; transition: opacity var(--rapido); }
.idioma button[aria-pressed="true"] { font-weight: 700; opacity: 1; }
.idioma button[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 16px; height: 2px; margin-left: -8px; background: var(--azul); }

/* ================= IDENTIDAD Y ACCIONES ================= */
.perfil { position: relative; z-index: 1; margin-top: -30px; padding: 0 var(--margen); }
.nombre { font: 400 clamp(34px, 10vw, 44px)/1.02 var(--serif); letter-spacing: -.015em; overflow-wrap: break-word; }
.cargo { margin-top: 12px; font: 600 16px/1.3 var(--sans); letter-spacing: .01em; }
.etiquetas { margin-top: 4px; font: 500 14px/1.4 var(--sans); color: var(--tinta-suave); }
.acciones, .acciones__botones { display: grid; gap: 10px; }
.acciones { margin-top: 20px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--alto-boton); padding: 8px 20px; border-radius: var(--r-boton); font: 600 17px/1.2 var(--sans); text-align: center; text-decoration: none;
  transition: background-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), transform 120ms var(--curva); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.98); }
.btn--principal { background: var(--profundo); color: var(--blanco); }
.btn--borde { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--filete-fuerte); }
.btn--cuadrado { flex: none; width: var(--alto-boton); padding: 0; }

.rapidos { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 12px; background: var(--filete); border-block: 1px solid var(--filete); }
.rapidos a, .rapidos button { flex: 1 1 0; min-width: max-content; padding: 0 8px; background: var(--papel); display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--alto-rapido); font: 600 15px/1.2 var(--sans); text-decoration: none;
  transition: background-color var(--rapido); -webkit-tap-highlight-color: transparent; }
.no-js [data-compartir] { display: none; }
@media (hover: hover) {
  .btn--principal:hover { background: var(--profundo-hover); }
  .btn--borde:hover { box-shadow: inset 0 0 0 1px var(--filete-hover); }
  .rapidos a:hover, .rapidos button:hover { background: #ECECF0; }
  .idioma button:hover { opacity: 1; }
}

/* QR para pasar la tarjeta al teléfono (escritorio) */
.qr { display: none; }
.qr__caja { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--r-boton); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--filete-fuerte); }
.qr__caja img { width: 84px; height: 84px; }
.qr__texto { margin-top: 10px; font: 500 13px/1.35 var(--sans); color: var(--tinta-suave); }
.marcador { padding: 2px 5px; border-radius: 3px; background: var(--marcador); color: var(--tinta); font: 600 13px/1.3 var(--sans); text-align: center; }

/* ================= SECCIONES ================= */
.bloque { padding: 56px var(--margen) 0; }
.rotulo { font: 600 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.base { position: relative; display: block; height: 2px; margin-top: 12px; transform-origin: 0 50%; background: linear-gradient(var(--filete), var(--filete)) 0 50% / 100% 1px no-repeat; }
.base i { position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--azul); }
.frase { margin-top: 18px; font: 400 22px/1.4 var(--serif); text-wrap: pretty; }

.sector { margin-top: 32px; }
.sector__nombre { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font: 600 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.sb { width: 14px; height: 14px; flex: none; fill: var(--azul); }
.empresa { padding: 18px 0 16px; border-bottom: 1px solid var(--filete); }
.empresa p { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--tinta-suave); }

.cierre { padding-top: 72px; }
.cierre__titulo { font: 400 36px/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.cierre__texto { margin-top: 10px; color: var(--tinta-suave); }
.cierre .acciones { margin-top: 24px; }
.cierre__datos { margin-top: 20px; font: 600 16px/1.7 var(--sans); font-variant-numeric: tabular-nums; }
.cierre__datos span { display: block; width: max-content; max-width: 100%; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }

.pie { display: flex; align-items: center; gap: 10px; margin-top: 64px; padding: 24px var(--margen) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete); font-size: 14px; color: var(--tinta-suave); }
.pie__icono { width: 16px; height: 20px; color: var(--azul); }

/* Revelados al bajar: la clase .lista la pone tarjeta.js (no con "reducir movimiento") */
.lista [data-rev] { transition: opacity var(--revelar) var(--curva), transform var(--revelar) var(--curva); }
.lista [data-rev]:not(.visto) { opacity: 0; transform: translateY(16px); }
.lista [data-rev] .base { transform: scaleX(0); transition: transform var(--revelar) var(--curva) 120ms; }
.lista [data-rev] .sb path { transform: scaleY(0); transition: transform 420ms var(--curva) 160ms; }
.lista [data-rev] .sb path:nth-child(2) { transition-delay: 250ms; }
.lista [data-rev] .sb path:nth-child(3) { transition-delay: 340ms; }
.lista [data-rev].visto .base, .lista [data-rev].visto .sb path { transform: none; }

/* ================= BARRA FIJA (celular) ================= */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 10px; max-width: var(--ancho); margin: 0 auto;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: var(--barra-fondo); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 -1px 0 var(--filete); transform: translateY(100%); visibility: hidden; transition: transform var(--medio) var(--curva), visibility 0s var(--medio); }
.barra--on { transform: none; visibility: visible; transition: transform var(--medio) var(--curva), visibility 0s; }
.barra .btn--principal { flex: 1; }
.no-js .barra { display: none; }

/* ================= AVISO Y HOJA DE COMPARTIR ================= */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 12; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px);
  padding: 14px 18px; border-radius: var(--r-boton); background: var(--tinta); color: var(--blanco); font: 500 15px/1.35 var(--sans);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility 0s var(--medio); }
.toast--ver { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility 0s; }
.barra--on ~ .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
.toast button { flex: none; min-height: 44px; margin: -12px -8px -12px 0; padding: 0 10px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.hoja { width: min(400px, calc(100% - 32px)); max-width: none; padding: 16px 24px 24px; border: 0; border-radius: var(--r-hoja); background: var(--blanco); color: var(--tinta); }
.hoja::backdrop { background: var(--fondo-hoja); }
.hoja__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hoja__titulo { font: 400 26px/1.1 var(--serif); letter-spacing: -.01em; }
.hoja__cerrar { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border-radius: var(--r-boton); }
.hoja .btn { width: 100%; }
.hoja .btn + .btn { margin-top: 10px; }
.hoja .qr { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--filete); }
.hoja .qr__texto { margin: 0; }

/* ================= ENTRADA "LARGO PLAZO" ================= */
.intro { display: none; position: fixed; inset: 0; z-index: 10; touch-action: none; }
.con-intro .intro { display: block; animation: rescate .01s 5s forwards; }   /* respaldo si algo falla */
.intro.intro--fin { display: none; }
@keyframes rescate { to { visibility: hidden; } }
.intro__papel { position: absolute; inset: 0; background: var(--papel); --cx: 50%; --cy: 42%;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r, -2px), #000 calc(var(--r, -2px) + .5px));
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent var(--r, -2px), #000 calc(var(--r, -2px) + .5px)); }
.intro__icono { position: absolute; left: 50%; top: 42%; width: 98px; height: 122px; margin: -61px 0 0 -49px; color: var(--azul); transform-origin: 0 0; }
.intro__svg { width: 100%; height: 100%; overflow: visible; }
.intro .ic-arco { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.intro .ic-barra { transform: scaleY(0); }
.intro .ic-base { transform: scaleX(0); }
.ic-barra, .ic-base, .sb path { transform-box: fill-box; }
.ic-barra, .sb path { transform-origin: 50% 100%; }
.ic-base { transform-origin: 0 50%; }
.intro__saltar { position: absolute; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); height: 44px; padding: 0 14px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .con-intro .intro { display: none; }
  .btn:active { transform: none; }
  .toast { transform: translate(-50%, 0); }
  .barra { transform: none; opacity: 0; transition: opacity var(--medio), visibility 0s var(--medio); }
  .barra--on { opacity: 1; transition: opacity var(--medio), visibility 0s; }
}

/* ================= ESCRITORIO ================= */
@media (min-width: 960px) {
  .pagina { display: grid; grid-template-columns: 44vw minmax(0, 1fr); grid-template-rows: auto auto 1fr; max-width: none; margin: 0; }
  .retrato { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; }
  .retrato img { -webkit-mask-image: linear-gradient(to left, transparent, #000 26%); mask-image: linear-gradient(to left, transparent, #000 26%); }
  .cabecera, .contenido, .pie { grid-column: 2; width: 100%; max-width: 648px; padding-left: 64px; padding-right: 64px; }
  .cabecera { position: relative; height: 96px; padding-right: 52px; }
  .cabecera::before { display: none; }
  .perfil { margin-top: 0; padding: clamp(24px, 10vh, 112px) 0 0; }
  .nombre { font-size: 56px; }
  .cargo { margin-top: 16px; font-size: 17px; }
  .etiquetas { font-size: 15px; }
  .acciones--arriba { grid-template-columns: minmax(0, 1fr) 148px; align-items: start; column-gap: 28px; margin-top: 32px; }
  .qr { display: block; }
  .rapidos { margin-top: 24px; }
  .bloque { padding: 80px 0 0; }
  .frase { font-size: 24px; }
  .cierre { padding-top: 96px; }
  .cierre .acciones { max-width: 420px; }
  .pie { width: auto; max-width: 520px; margin: 64px 64px 0; padding: 24px 0 40px; }
  .barra { display: none; }
  .toast { left: calc(44vw + 64px); transform: translate(0, 16px); }
  .toast--ver { transform: none; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) { .toast { transform: none; } }