/* ═══════════════════════════════════════════════════════════
   Ahá Herramientas Digitales · estilos
   Efectos: rápidos (150–250 ms), hover solo con mouse (@media (hover: hover)),
   foco visible con teclado y todo quieto con "reducir movimiento" (al final del archivo).
   Paleta: la de assets/marca/tokens.css (guía de marca, octubre 2026). Las variables de siempre
   (--navy, --blue, --orange…) conservan el nombre y tienen los valores nuevos; las marcadas (nueva) se sumaron.
   Contrastes medidos con la fórmula WCAG 2.x (AA = 4,5:1 texto normal · 3:1 texto grande y bordes de controles).
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Colores del logo Ahá: para el logo, ilustraciones, bordes, barras y fondos (NO para texto chico) (nuevas) */
  --aha-verde: #00CB9A;
  --aha-naranja: #FE8202;
  --aha-violeta: #9300B0;
  --aha-azul: #0071BC;
  --aha-franja: linear-gradient(90deg, #00CB9A 0 25%, #FE8202 25% 50%, #9300B0 50% 75%, #0071BC 75% 100%);   /* franja de 4 colores */

  /* Base */
  --navy: #141A3C;            /* azul noche: títulos, fondos oscuros, texto del botón naranja · blanco encima 16,9:1 */
  --navy-900: #0C1130;        /* hover de fondos oscuros */
  --navy-2: #1E2550;          /* (nueva) superficies sobre --navy · blanco encima 14,6:1 */
  --blue: #0071BC;            /* links y foco · 5,14:1 sobre blanco, 4,80:1 sobre --bg */
  --blue-h: #005E9E;          /* (nueva) hover de links · 6,79:1 */
  --blue-50: #E3F1FB;
  --blue-100: #C9E3F6;
  --orange: #FE8202;          /* naranja de marca: bordes, barras, íconos y fondos. Como texto no pasa AA (2,3:1) */
  --orange-btn: #FE8202;      /* fondo del botón principal: SIEMPRE con texto --orange-btn-txt, nunca blanco (2,5:1) */
  --orange-btn-h: #EE7300;    /* … al pasar el mouse (con --orange-btn-txt: 5,70:1) */
  --orange-btn-a: #DB6A00;    /* (nueva) … presionado (4,89:1) */
  --orange-btn-txt: #141A3C;  /* (nueva) texto sobre --orange-btn: 6,77:1 (AA) */
  --orange-hl: #D96500;       /* palabra destacada de títulos grandes (.hl): 3,61:1 (AA para texto grande) */
  --orange-hl-oscuro: #FF9A2E;/* (nueva) .hl sobre --navy: 7,98:1 */
  --orange-600: #AE5300;      /* naranja para texto chico (etiquetas, avisos): 5,20:1 sobre blanco, 4,69:1 sobre --orange-50 */
  --orange-700: #A84F00;      /* naranja para texto chico (AA): 5,55:1 sobre blanco, 5,01:1 sobre --orange-50 */
  --orange-50: #FFF1E3;
  --orange-100: #FFDDB8;
  --ink: #1E2340;             /* texto principal · 15,3:1 */
  --ink-2: #474E6B;           /* texto secundario · 8,17:1 */
  --muted: #5A6178;           /* ayudas y pies · 6,15:1 sobre blanco, 5,74:1 sobre --bg */
  --line: #E4E6F0;            /* bordes decorativos (tarjetas) */
  --line-2: #CDD2E3;          /* borde al pasar el mouse */
  --campo: #8A91A8;           /* (nueva) borde de campos de formulario · 3,14:1 (AA para controles) */
  --bg: #F6F7FB;
  --card: #ffffff;
  --ok: #00A37C;              /* íconos y bordes de éxito (para texto: --ok-700) */
  --ok-700: #007A5C;          /* 5,33:1 sobre blanco · 4,79:1 sobre --ok-50 */
  --ok-50: #E0F8F1;
  --err: #d64545;
  --err-700: #b83232;
  --err-50: #fdeeee;
  --focus: #0071BC;

  /* Violeta = todo lo que usa IA (nuevas) */
  --violeta: #9300B0;         /* texto o fondo con texto blanco · 7,32:1 */
  --violeta-h: #7A0094;
  --violeta-50: #F5E8FA;      /* --violeta encima: 6,21:1 */

  /* Sobre fondo noche (pie, bandas oscuras) (nuevas) */
  --txt-claro: #C9CEE0;       /* 10,8:1 sobre --navy */
  --txt-claro-2: #A9B0C8;     /* 7,8:1 sobre --navy */

  /* Color por categoría de herramienta: la clase .g-<grupo> los pasa a --gc (color) y --gt (fondo suave).
     El color fuerte pasa AA como texto sobre blanco; sobre su tono -50 usalo para íconos. */
  --g-imagenes: #0071BC;   --g-imagenes-50: #E3F1FB;
  --g-redes: #007A5C;      --g-redes-50: #E0F8F1;
  --g-documentos: #C4443A; --g-documentos-50: #FCECEA;
  --g-media: #9300B0;      --g-media-50: #F5E8FA;
  --g-web: #0C7A88;        --g-web-50: #E3F3F5;
  --g-contenido: #A84F00;  --g-contenido-50: #FFF1E3;
  --g-voz: #C2477A;        --g-voz-50: #FBEAF1;

  /* Radios */
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --radius: var(--r-lg);

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(20, 35, 70, .06);
  --shadow-sm: 0 1px 2px rgba(20, 35, 70, .06), 0 6px 14px -8px rgba(20, 35, 70, .18);
  --shadow: 0 1px 2px rgba(20, 35, 70, .06), 0 12px 32px -12px rgba(20, 35, 70, .18);
  --shadow-md: 0 2px 6px -2px rgba(20, 35, 70, .08), 0 18px 36px -16px rgba(20, 35, 70, .30);
  --shadow-lg: 0 30px 80px -20px rgba(10, 20, 45, .45);
  --ring: 0 0 0 3px rgba(0, 113, 188, .28);

  /* Espaciados */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;

  /* Movimiento */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-1: 150ms; --t-2: 200ms; --t-3: 250ms;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Categorías → color de acento */
.g-imagenes   { --gc: var(--g-imagenes);   --gt: var(--g-imagenes-50); }
.g-redes      { --gc: var(--g-redes);      --gt: var(--g-redes-50); }
.g-documentos { --gc: var(--g-documentos); --gt: var(--g-documentos-50); }
.g-media      { --gc: var(--g-media);      --gt: var(--g-media-50); }
.g-web        { --gc: var(--g-web);        --gt: var(--g-web-50); }
.g-contenido  { --gc: var(--g-contenido);  --gt: var(--g-contenido-50); }
.g-voz        { --gc: var(--g-voz);        --gt: var(--g-voz-50); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
::selection { background: var(--orange-100); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--t-1); }
@media (hover: hover) { a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Links dentro de texto: subrayado que crece desde la izquierda */
:where(p, li, dd, td, small, label, .faq, .legal, .foot-links, .muted) a:not([class]) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--t-2) var(--ease), color var(--t-1);
}
@media (hover: hover) {
  :where(p, li, dd, td, small, label, .faq, .legal, .foot-links, .muted) a:not([class]):hover { text-decoration: none; background-size: 100% 1.5px; }
}
:where(p, li, dd, td, small, label, .faq, .legal, .foot-links, .muted) a:not([class]):focus-visible { background-size: 100% 1.5px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
:where(a, summary):focus-visible { border-radius: 6px; }   /* sin especificidad: los botones y tarjetas conservan su radio */
kbd { font: inherit; font-size: .82em; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: #fff; color: var(--ink-2); }

/* ── Íconos (inc/iconos.php → <svg class="ico">) ── */
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.27em;
  fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  pointer-events: none; }   /* el clic llega al botón/link que lo contiene (ej. [data-close]) */
.ico-sm { width: 1em; height: 1em; vertical-align: -.15em; }
.ico-lg { width: 1.6em; height: 1.6em; }
.ico-emoji { width: auto; height: auto; font-size: 1.1em; line-height: 1; vertical-align: -.08em; }
.ico-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md);
  background: var(--gt, var(--blue-50)); color: var(--gc, var(--blue)); }
.ico-tile .ico { width: 22px; height: 22px; }

/* ── Botones ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .8em 1.3em; border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none !important; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-1) var(--ease), background-color var(--t-1), box-shadow var(--t-2) var(--ease), border-color var(--t-1), color var(--t-1), opacity var(--t-1);
}
.btn .ico { width: 1.15em; height: 1.15em; vertical-align: 0; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; box-shadow: none; }
a.btn[aria-disabled=true] { pointer-events: none; }
.btn-primary { background: var(--orange-btn); color: var(--orange-btn-txt); box-shadow: 0 6px 16px -6px rgba(219, 106, 0, .5); }
.btn-dark { background: var(--navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(20, 26, 60, .55); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-danger { background: #fff; color: var(--err-700); border-color: #f2c4c4; }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--orange-btn-h); transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(219, 106, 0, .55); }
  .btn-dark:hover:not(:disabled) { background: var(--blue); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(20, 26, 60, .6); }
  .btn-ghost:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .btn-danger:hover:not(:disabled) { border-color: var(--err); background: var(--err-50); }
}
/* Presionado: va después del hover para ganarle */
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.btn-primary:active:not(:disabled) { background: var(--orange-btn-a); }
.btn-sm { padding: .55em .95em; font-size: .85rem; border-radius: var(--r-sm); }
.btn-lg { padding: .95em 1.6em; font-size: 1.02rem; }
.btn-block { width: 100%; }
/* Botón esperando una respuesta: aria-busy="true" (lo pone solo aha.post / aha.cargando) */
.btn[aria-busy=true] { cursor: progress; }
.btn[aria-busy=true]:disabled { opacity: .85; }
.btn[aria-busy=true]::before { content: ''; width: 1em; height: 1em; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ── Header / footer ── */
.site-header { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-3) var(--ease), background-color var(--t-3), border-color var(--t-3); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: rgba(227, 232, 241, .5); box-shadow: 0 10px 28px -18px rgba(20, 35, 70, .35); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
/* Logo + "Herramientas Digitales" (assets/marca/lockup-horizontal.svg): 40 px de alto en escritorio, 34 px en el celu
   y, en pantallas de menos de 360 px, solo el logo (lo cambia el <picture> de layout.php) */
.brand { display: flex; align-items: center; flex-shrink: 0; color: var(--ink); text-decoration: none !important; border-radius: var(--r-sm); }
.brand picture { display: block; line-height: 0; }
.brand-logo { display: block; width: auto; height: 40px; transition: transform var(--t-3) var(--ease); }
@media (hover: hover) { .brand:hover .brand-logo { transform: translateY(-1px); } }
.menu { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: .95rem; }
.menu > a:not(.btn) { position: relative; color: var(--ink-2); padding: 6px 0; }
.menu > a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--t-2) var(--ease); }
.menu > a[aria-current=page] { color: var(--navy); }
.menu > a[aria-current=page]::after { transform: scaleX(1); }
@media (hover: hover) {
  .menu > a:not(.btn):hover { color: var(--navy); text-decoration: none; }
  .menu > a:not(.btn):hover::after { transform: scaleX(1); }
}
/* Pie azul noche con la franja de 4 colores arriba (guía de marca) */
.site-footer { position: relative; margin-top: 72px; padding: 42px 0 38px; background: var(--navy); color: var(--txt-claro); font-size: .92rem; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--aha-franja); }
.site-footer :focus-visible { outline-color: #fff; }
.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 40px; flex-wrap: wrap; }
.foot-marca { max-width: 400px; }
.foot-logo { display: inline-block; line-height: 0; border-radius: var(--r-sm); }
.foot-logo img { display: block; width: auto; height: 44px; }
.foot-marca p { margin: 14px 0 0; color: var(--txt-claro); }
.foot-marca p a { color: #fff; font-weight: 600; }
.bandera-ar { display: inline-block; vertical-align: -2px; margin-left: 2px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(20, 35, 70, .1); }
.foot-links { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: flex-start; max-width: 540px; padding-top: 6px; }
.foot-links a { color: var(--txt-claro); }
@media (hover: hover) { .foot-links a:hover { color: #fff; } }

.flash { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; animation: aparecer var(--t-3) var(--ease-out); }
.flash-ok { background: var(--ok-50); color: var(--ok-700); }
.flash-err { background: var(--err-50); color: #9f2a2a; }
.flash-info { background: var(--blue-50); color: var(--navy); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

/* ── Hero + conversor ── */
.hero { padding: 48px 0 24px; background:
  radial-gradient(900px 400px at 85% -10%, rgba(254, 130, 2, .12), transparent 60%),
  radial-gradient(800px 420px at 0% 0%, rgba(0, 113, 188, .11), transparent 60%); }
.hero-copy { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: var(--navy); }
.hl { color: var(--orange-hl); }
.lead { font-size: 1.12rem; color: var(--ink-2); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--navy); margin-bottom: 16px; box-shadow: var(--shadow); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(0, 163, 124, .18); }

.card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow); border: 1px solid var(--line); }
.converter { max-width: 860px; margin: 0 auto; padding: 18px; scroll-margin-top: 84px; }

.dropzone {
  border: 2px dashed #c3d0ea; border-radius: 18px; background: linear-gradient(180deg, #fbfcff, var(--blue-50));
  padding: 44px 20px; text-align: center; cursor: pointer;
  transition: border-color var(--t-2), background-color var(--t-2), box-shadow var(--t-2), transform var(--t-2) var(--ease), padding .2s;
}
.dz-icon { display: flex; justify-content: center; margin-bottom: 6px; transition: transform var(--t-3) var(--ease); }
.dz-icon .ico { width: 44px; height: 44px; stroke-width: 1.6; color: var(--gc, var(--blue)); }
@media (hover: hover) {
  .dropzone:hover { border-color: var(--orange); background: var(--orange-50); }
  .dropzone:hover .dz-icon { transform: translateY(-3px); }
}
.dropzone:focus-visible { border-color: var(--focus); }
/* Arrastrando un archivo encima: borde que late + fondo naranja suave */
.dropzone.over { border-color: var(--orange); border-style: solid; background: var(--orange-50); transform: scale(1.01); animation: dzLatido 1.1s var(--ease) infinite; }
.dropzone.over .dz-icon { transform: translateY(-6px) scale(1.08); }
@keyframes dzLatido {
  0% { box-shadow: 0 0 0 0 rgba(254, 130, 2, .38); }
  70% { box-shadow: 0 0 0 12px rgba(254, 130, 2, 0); }
  100% { box-shadow: 0 0 0 0 rgba(254, 130, 2, 0); }
}
.dz-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); margin: 0; }
.dz-or { color: var(--muted); margin: 6px 0 10px; font-size: .9rem; }
.dz-hint { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }
.dropzone.compact { padding: 16px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.dropzone.compact .dz-icon, .dropzone.compact .dz-or, .dropzone.compact .dz-hint { display: none; }
.dropzone.compact .dz-title { font-size: 1rem; }
.dropzone.compact .btn-lg { padding: .6em 1em; font-size: .9rem; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 2px 4px; }
.field-inline { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-2); font-size: .92rem; }
select, textarea, input[type=number], input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=search], input[type=date] {
  font: inherit; font-size: .95rem; padding: .6em .8em; border: 1.5px solid var(--campo); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  min-height: 42px; transition: border-color var(--t-1), box-shadow var(--t-1), background-color var(--t-1);
}
textarea { line-height: 1.5; }
select { padding-right: 2em; font-weight: 700; cursor: pointer; }
@media (hover: hover) {
  select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled),
  input:is([type=number], [type=text], [type=email], [type=password], [type=url], [type=tel], [type=search], [type=date]):hover:not(:focus):not(:disabled) { border-color: var(--muted); }
}
select:focus, textarea:focus, input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]):focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--orange-btn); }
input[type=file] { font: inherit; font-size: .88rem; color: var(--ink-2); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 700; font-size: .85rem; margin-right: 10px; padding: .5em .9em; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: border-color var(--t-1), color var(--t-1); }
@media (hover: hover) { input[type=file]::file-selector-button:hover { border-color: var(--blue); color: var(--blue); } }
::placeholder { color: #8a93a6; opacity: 1; }
.quota { margin-left: auto; font-size: .85rem; background: var(--blue-50); color: var(--navy); padding: 6px 12px; border-radius: var(--r-pill); }
.quota.empty { background: var(--orange-50); color: var(--orange-700); }

.opts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; background: var(--bg); border-radius: 14px; padding: 16px; margin: 10px 0 4px; animation: aparecer var(--t-2) var(--ease-out); }
.opt { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; min-width: 0; }
.opt select, .opt input[type=number] { width: 100%; min-width: 0; }
.opt small { color: var(--muted); font-weight: 500; font-size: .78rem; }
input[type=range] { accent-color: var(--orange); width: 100%; }

.filelist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file { display: grid; grid-template-columns: 52px 1fr auto auto 28px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  animation: pop .2s ease-out; transition: border-color var(--t-2), background-color var(--t-2); }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
.thumb { width: 52px; height: 52px; border-radius: var(--r-sm); overflow: hidden; background: var(--blue-50); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-ext { font-size: .7rem; font-weight: 800; color: var(--blue); }
.meta { min-width: 0; }
.fname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .93rem; }
.fsub { font-size: .8rem; color: var(--muted); }
.fsub .save { font-style: normal; color: var(--ok-700); font-weight: 700; }
.fsub .err { color: var(--err-700); font-weight: 600; }
.bar { position: relative; height: 4px; border-radius: 4px; background: var(--blue-50); overflow: hidden; margin-top: 6px; opacity: 0; transition: opacity .2s; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--orange)); transition: width .25s; }
.file.is-uploading .bar, .file.is-converting .bar { opacity: 1; }
/* Brillo que recorre la barra mientras trabaja */
.file.is-uploading .bar::after, .file.is-converting .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); transform: translateX(-100%); animation: brillo 1.2s ease-in-out infinite; }
@keyframes brillo { to { transform: translateX(100%); } }
.file.is-done { border-color: #bfe6d0; background: linear-gradient(90deg, var(--ok-50), #fff 40%); }
.file.is-error, .file.is-blocked { border-color: #f2cccc; }
.to { display: flex; align-items: center; gap: 8px; }
.to .arrow { color: var(--muted); font-weight: 800; }
.to select { min-height: 36px; padding: .35em 1.8em .35em .6em; font-size: .85rem; }
.act { min-width: 96px; display: flex; justify-content: flex-end; }
.act .btn { animation: pop .2s ease-out; }
.rm { width: 28px; height: 28px; border-radius: var(--r-xs); border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background-color var(--t-1), color var(--t-1); }
@media (hover: hover) { .rm:hover { background: var(--err-50); color: var(--err); } }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--blue-100); border-top-color: var(--orange); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.privacy { text-align: center; color: var(--muted); font-size: .82rem; margin: 14px 0 0; }

/* ── Secciones ── */
.section { margin-top: 64px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-weight: 800; margin-bottom: 10px; }
.step h3 { font-size: 1.1rem; margin-bottom: .3em; }
.step p { color: var(--ink-2); margin: 0; font-size: .95rem; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.pair { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: .95rem;
  transition: border-color var(--t-2), transform var(--t-2) var(--ease), box-shadow var(--t-2), background-color var(--t-2); }
.pair.active { border-color: var(--orange); background: var(--orange-50); }
@media (hover: hover) { .pair:hover { border-color: var(--orange); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
.pair:active { transform: scale(.98); }
.pair span { color: var(--orange-600); font-weight: 800; }
.cta-plans { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; border-radius: var(--r-xl); padding: 32px;
  background: radial-gradient(520px 260px at 100% 0%, rgba(254, 130, 2, .22), transparent 70%), linear-gradient(135deg, var(--navy), var(--navy-2)); }
.cta-plans h2 { color: #fff; }
.cta-plans p { color: var(--txt-claro); margin: 0; max-width: 620px; }
.cta-plans :focus-visible, .promo :focus-visible { outline-color: #fff; }

/* Preguntas frecuentes: el + se convierte en − al abrir */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2px 18px; margin-bottom: 10px; transition: border-color var(--t-2), box-shadow var(--t-2); }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 30px 12px 0; list-style: none; position: relative; transition: color var(--t-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 2px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--orange-600); transition: transform var(--t-2) var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
  .faq details:hover { border-color: var(--line-2); }
  .faq summary:hover { color: var(--navy); }
}
.faq details[open] > :not(summary) { animation: aparecer var(--t-3) var(--ease-out); }
.faq details p { color: var(--ink-2); }

/* ── Modal ── */
.modal { position: fixed; inset: 0; background: rgba(15, 25, 50, .55); display: grid; place-items: center; padding: 16px; z-index: 50; animation: fade var(--t-2) ease-out; }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; background: #fff; border-radius: var(--r-xl); padding: 30px; max-width: 520px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); max-height: calc(100vh - 32px); overflow: auto;
  animation: modalIn var(--t-3) var(--ease-out); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; font-size: 1.6rem; color: var(--muted); cursor: pointer; line-height: 1;
  transition: background-color var(--t-1), color var(--t-1), transform var(--t-2) var(--ease); }
.modal-x .ico { width: 20px; height: 20px; }
@media (hover: hover) { .modal-x:hover { background: var(--bg); color: var(--ink); transform: rotate(90deg); } }
.modal-x:active { transform: scale(.92); }
.pw-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 18px; font-size: 2.2rem; background: var(--orange-50); color: var(--orange-600); }
.pw-icon .ico { width: 30px; height: 30px; }
.pw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.pw-plan { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-size: .82rem;
  transition: border-color var(--t-2), transform var(--t-2) var(--ease), box-shadow var(--t-2); }
.pw-plan b { font-size: 1rem; color: var(--navy); }
.pw-plan em { font-style: normal; color: var(--orange-700); font-weight: 700; }
.pw-plan.best { border-color: var(--orange); background: var(--orange-50); }
@media (hover: hover) { .pw-plan:hover { text-decoration: none; border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
.pw-plan:active { transform: scale(.98); }

/* Ícono de "¡Listo!" (formularios enviados) */
.ok-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--ok-50); color: var(--ok-700); animation: okPop .35s var(--ease-out); }
.ok-ico .ico { width: 32px; height: 32px; stroke-width: 2.2; }
@keyframes okPop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } }

/* ── Precios ── */
.page-head { text-align: center; padding: 48px 0 8px; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--navy); font-weight: 800; letter-spacing: -.03em; }
.page-head .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.toggle { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; margin: 10px 0 30px; box-shadow: var(--shadow); }
.toggle button { font: inherit; font-weight: 700; border: 0; background: none; padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer; color: var(--ink-2); transition: background-color var(--t-2) var(--ease), color var(--t-2); }
@media (hover: hover) { .toggle button:hover:not([aria-pressed=true]) { color: var(--navy); background: var(--bg); } }
.toggle button[aria-pressed=true] { background: var(--navy); color: #fff; }
.toggle .save-badge { background: var(--ok-50); color: var(--ok-700); font-size: .75rem; padding: 2px 8px; border-radius: var(--r-pill); margin-left: 6px; }
.toggle button[aria-pressed=true] .save-badge { background: rgba(255, 255, 255, .18); color: #fff; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-xl); background: #fff; border: 1.5px solid var(--line); box-shadow: var(--shadow);
  transition: transform var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease), border-color var(--t-2); }
.plan.best { border-color: var(--orange); box-shadow: 0 20px 50px -20px rgba(254, 130, 2, .45); }
@media (hover: hover) {
  .plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
  .plan.best:hover { border-color: var(--orange); box-shadow: 0 26px 56px -20px rgba(254, 130, 2, .55); }
}
/* Cinta "Más elegido": azul marino sobre la tarjeta con borde naranja (texto blanco con contraste AA) */
.plan .ribbon, .pack .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: .78rem; font-weight: 800; padding: 4px 14px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(20, 26, 60, .6); }
.plan h3 { font-size: 1.3rem; color: var(--navy); }
.price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.price > span { animation: aparecer var(--t-2) var(--ease-out); }
.price small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-sub { color: var(--muted); font-size: .85rem; min-height: 2.6em; margin: 6px 0 16px; }
.price-sub s { color: var(--muted); }
.feats { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.feats li { padding-left: 28px; position: relative; font-size: .95rem; }
.feats li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23007A5C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.packs-head { text-align: center; margin: 56px 0 18px; }
.packs-head h2 { color: var(--navy); }
.packs-head p { max-width: 720px; margin-left: auto; margin-right: auto; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
.pack { position: relative; text-align: center; padding: 22px 20px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line);
  transition: transform var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease), border-color var(--t-2); }
.pack.best { border-color: var(--orange); background: linear-gradient(180deg, var(--orange-50), #fff 60%); }
@media (hover: hover) { .pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .pack.best:hover { border-color: var(--orange); } }
.pack h3 { font-size: 1.6rem; color: var(--navy); margin-bottom: .2em; }
.pack h3 small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.pack .price { font-size: 1.8rem; }
.pack .price-sub { min-height: 0; }

/* ── Grilla de herramientas ── */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.tool { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 34px 14px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), border-color var(--t-2); }
.tool::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid var(--gc, var(--blue)); border-right: 2px solid var(--gc, var(--blue));
  opacity: 0; transform: translateX(-5px) rotate(45deg); transition: opacity var(--t-2), transform var(--t-2) var(--ease); }
.tool-ico { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.6rem; border-radius: var(--r-md);
  background: var(--gt, var(--blue-50)); color: var(--gc, var(--blue)); transition: transform var(--t-2) var(--ease), background-color var(--t-2), color var(--t-2); }
.tool-ico .ico { width: 22px; height: 22px; }
.tool b { display: block; font-size: .95rem; transition: color var(--t-1); }
.tool small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (hover: hover) {
  .tool:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-2); border-color: color-mix(in srgb, var(--gc, var(--blue)) 40%, #fff); }
  .tool:hover b { color: var(--navy); }
  .tool:hover .tool-ico { background: var(--gc, var(--blue)); color: #fff; transform: scale(1.05) rotate(-3deg); }
  .tool:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }
}
.tool:focus-visible .tool-ico { background: var(--gc, var(--blue)); color: #fff; }
.tool:focus-visible::after { opacity: 1; transform: translateX(0) rotate(45deg); }
.tool:active { transform: scale(.985); }
.tool.active { border-color: var(--gc, var(--orange)); box-shadow: inset 0 0 0 1px var(--gc, var(--orange)); }
.tool.active::after { opacity: 1; transform: translateX(0) rotate(45deg); }

/* Grilla de herramientas agrupada (inicio y pie de cada herramienta) */
.tools-grupo + .tools-grupo { margin-top: 26px; }
.tools-grupo h3 { display: flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.tools-grupo h3 .ico { width: 18px; height: 18px; color: var(--gc, var(--blue)); }
.tool.is-pronto .tool-ico { filter: grayscale(1); opacity: .65; }
.tool .tool-badge, .dd-badge { display: inline-block; font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); margin-left: 4px; vertical-align: 2px;
  background: var(--orange-50); color: var(--orange-700); box-shadow: inset 0 0 0 1px var(--orange-100); }

/* Resultado combinado (imágenes → PDF) y orden */
.merge-result { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #bfe6d0; background: var(--ok-50); animation: pop .2s ease-out; }
.merge-result .mr-ico { font-size: 1.8rem; }
.merge-result .mr-txt { flex: 1; min-width: 0; }
.merge-result .mr-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-result .mr-txt small { color: var(--muted); }
.up { width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; font-weight: 800; transition: border-color var(--t-1), color var(--t-1); }
@media (hover: hover) { .up:hover { border-color: var(--blue); color: var(--blue); } }
.file.no-to .to { visibility: hidden; }
.loader-note { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--blue-50); color: var(--navy); font-size: .88rem; font-weight: 600; }

/* ── Promo de la agencia ── */
.promo { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; animation: pop .3s ease-out; }
.promo-ico { font-size: 1.8rem; line-height: 1; }
.promo-txt { flex: 1; font-size: .93rem; color: var(--txt-claro); }
.promo-txt b { color: #fff; display: block; font-size: 1.02rem; margin-bottom: 2px; }
.promo .btn { flex-shrink: 0; }
.promo-x { background: none; border: 0; color: var(--txt-claro-2); font-size: 1.3rem; cursor: pointer; padding: 4px; line-height: 1; border-radius: var(--r-xs); transition: color var(--t-1); }
@media (hover: hover) { .promo-x:hover { color: #fff; } }
.agencia { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; }
.agencia h2 { color: var(--navy); }
.agencia ul { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); }
.agencia ul li { margin-bottom: 6px; }
.agencia-badge { display: inline-block; font-size: .78rem; font-weight: 800; color: var(--orange-700); background: var(--orange-50); padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 10px; }
.agencia-card { background: var(--bg); border-radius: var(--r-lg); padding: 22px; text-align: center; }
.agencia-card b { display: block; font-size: 2.2rem; color: var(--orange-hl); line-height: 1.1; }   /* texto grande: 3,4:1 sobre --bg */
.lead-ok { text-align: center; padding: 10px 0; }
.lead-ok .big { font-size: 2.6rem; }

.free-row { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px dashed #c3d0ea; border-radius: 18px; padding: 18px 24px; }
.pay-note { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; margin-top: 22px; text-align: center; }
.pay-note .ico { color: var(--blue); }

/* ── Formularios / cuenta / panel ── */
.auth { max-width: 440px; margin: 48px auto 0; padding: 32px; }
.auth h1 { font-size: 1.7rem; color: var(--navy); letter-spacing: -.03em; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.form label small { color: var(--muted); font-weight: 500; }
.form input, .form select, .form textarea { width: 100%; }
.check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; }
.check input { width: auto; margin-top: 4px; }
.err-box { background: var(--err-50); color: #9f2a2a; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; animation: aparecer var(--t-2) var(--ease-out); }
.dash { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 32px; align-items: start; }
.panel { padding: 26px; }
.panel h2 { font-size: 1.2rem; color: var(--navy); }
.panel h3 { font-size: 1rem; color: var(--navy); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .95rem; margin: 0 0 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.meter { height: 12px; background: var(--blue-50); border-radius: var(--r-pill); overflow: hidden; margin: 8px 0 6px; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); border-radius: var(--r-pill); transition: width .6s var(--ease-out); }
.badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 800; }
.b-ok { background: var(--ok-50); color: var(--ok-700); }
.b-warn { background: var(--orange-50); color: var(--orange-700); }
.b-err { background: var(--err-50); color: var(--err-700); }
.b-mute { background: var(--bg); color: var(--muted); }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th, table.t td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { color: var(--muted); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
table.t tbody tr { transition: background-color var(--t-1); }
@media (hover: hover) { table.t tbody tr:hover { background: #f8fafd; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 24px 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.stat b { display: block; font-size: 1.7rem; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .85rem; }
.legal { max-width: 780px; margin: 40px auto 0; padding: 36px; }
.legal h1 { color: var(--navy); }
.legal h2 { font-size: 1.15rem; margin-top: 1.6em; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .plans, .dash, .packs, .agencia { grid-template-columns: 1fr; }
  .agencia { padding: 22px 18px; }
  .promo { flex-wrap: wrap; padding-right: 40px; }
  .promo .btn { width: 100%; }
  .promo-x { position: absolute; top: 8px; right: 8px; }
  .plan.best { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-plans { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .menu { gap: 12px; font-size: .88rem; }
  .menu > .nav-precios, .menu > .nav-ingresar { display: none; }   /* van adentro del menú */
  .brand-logo { height: 34px; }   /* 123 × 34: entra con «Menú» y «Crear cuenta» en 360 px */
  .menu .btn-sm { padding: .5em .75em; font-size: .8rem; }
  .nav { gap: 10px; }
  .hero { padding-top: 28px; }
  .converter { padding: 12px; border-radius: 18px; }
  .dropzone { padding: 30px 14px; }
  .steps { grid-template-columns: 1fr; }
  .opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px; }
  .opts .opt:first-child, .opts > p.opt { grid-column: 1 / -1; }
  .file { grid-template-columns: 44px 1fr 28px; grid-template-areas: "th meta rm" "to to act"; row-gap: 8px; }
  .thumb { width: 44px; height: 44px; grid-area: th; }
  .meta { grid-area: meta; }
  .rm { grid-area: rm; }
  .to { grid-area: to; }
  .act { grid-area: act; min-width: 0; }
  .quota { margin-left: 0; width: 100%; text-align: center; }
  .actions .btn { flex: 1; }
  .pw-plans { grid-template-columns: 1fr; }
  .modal-card { padding: 24px 18px; }
  .auth, .panel, .legal { padding: 22px 18px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .page-head { padding-top: 32px; }
  .tools { gap: 10px; }
  .tool { padding: 12px 34px 12px 12px; }
}

/* ── Menú desplegable "Herramientas" ── */
.dd { position: static; }
.dd-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-sm); cursor: pointer;
  transition: background-color var(--t-1), color var(--t-1), border-color var(--t-1); -webkit-tap-highlight-color: transparent; }
.dd.open .dd-btn { background: var(--blue-50); color: var(--navy); }
@media (hover: hover) { .dd-btn:hover { background: var(--blue-50); color: var(--navy); } }
.dd-btn:active { transform: scale(.97); }
.dd-chev { transition: transform var(--t-2) var(--ease); }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-btn-movil { display: none; }
.dd-panel { position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); width: min(1060px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px -18px rgba(20, 35, 70, .35); padding: 20px 22px 16px; z-index: 40; animation: ddIn var(--t-2) var(--ease-out); transform-origin: 50% 0;
  max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
/* Sombra abajo/arriba solo cuando hay más ítems para desplazar (pantallas bajas) */
.dd-panel { background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) center top / 100% 40px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(20,35,70,.16), rgba(20,35,70,0)) center top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(20,35,70,.16), rgba(20,35,70,0)) center bottom / 100% 14px no-repeat scroll,
    #fff; }
@keyframes ddIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.985); } }
.dd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; }
.dd-col { min-width: 0; }
.dd-col-ia { background: linear-gradient(180deg, var(--violeta-50), #fff 85%); border-radius: 14px; padding: 8px; margin: 0; }   /* violeta = herramientas con IA */
.dd-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dd-title .ico { width: 15px; height: 15px; color: var(--gc, var(--muted)); }
.dd-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: var(--r-md); color: var(--ink); text-decoration: none !important; transition: background-color var(--t-1); }
.dd-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; background: var(--gt, var(--bg)); color: var(--gc, var(--blue)); border-radius: var(--r-sm); font-size: 1.1rem;
  transition: background-color var(--t-2), color var(--t-2), transform var(--t-2) var(--ease); }
.dd-ico .ico { width: 18px; height: 18px; }
@media (hover: hover) {
  a.dd-item:hover { background: var(--bg); }
  .dd-col-ia a.dd-item:hover { background: rgba(255, 255, 255, .85); }
  a.dd-item:hover b { color: var(--navy); }
  a.dd-item:hover .dd-ico { background: var(--gc, var(--blue)); color: #fff; transform: scale(1.06); }
}
a.dd-item:focus-visible { outline-offset: -2px; background: var(--blue-50); }
a.dd-item:focus-visible .dd-ico { background: var(--gc, var(--blue)); color: #fff; }
a.dd-item:active { transform: scale(.985); }
.dd-item[aria-current=page] { background: var(--gt, var(--blue-50)); }
.dd-item[aria-current=page] b { color: var(--navy); }
.dd-item[aria-current=page] small { color: var(--ink-2); }
.dd-txt { min-width: 0; }
.dd-txt b { display: block; font-size: .88rem; line-height: 1.3; transition: color var(--t-1); }
.dd-txt small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.35; font-weight: 500; }
.dd-item.is-pronto { cursor: default; }
.dd-item.is-pronto .dd-ico { background: #fff; filter: grayscale(1); opacity: .7; }
.dd-item.is-pronto b, a.dd-item.is-pronto b { color: var(--ink-2); }
.dd-badge { margin-left: 2px; }
.dd-badge.dd-nuevo { background: var(--ok-50); color: var(--ok-700); box-shadow: inset 0 0 0 1px #c9ead7; }
.dd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .84rem; }
.dd-pop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dd-pop a { padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font-weight: 600; font-size: .8rem; transition: background-color var(--t-1), color var(--t-1); }
@media (hover: hover) { .dd-pop a:hover { background: var(--orange-50); color: var(--orange-700); text-decoration: none; } }
.dd-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.dd-all .ico { width: 16px; height: 16px; transition: transform var(--t-2) var(--ease); }
@media (hover: hover) { .dd-all:hover .ico { transform: translateX(3px); } }
.dd-movil { display: none; }
/* «Para emprendedores»: link propio en el encabezado cuando entra; en pantallas más angostas pasa adentro del menú (.dd-emp) */
.dd-emp { display: none; }
@media (max-width: 1023px) {
  .menu > .nav-emp { display: none; }
  .dd-emp { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--orange-50); border: 1px solid var(--orange-100); color: var(--ink); text-decoration: none !important; transition: border-color var(--t-1), background-color var(--t-1); }
  .dd-emp > .ico:first-child { width: 34px; height: 34px; padding: 7px; border-radius: var(--r-sm); background: #fff; color: var(--orange-700); flex-shrink: 0; }
  .dd-emp span { flex: 1; min-width: 0; }
  .dd-emp b { display: block; font-size: .92rem; color: var(--navy); }
  .dd-emp small { display: block; font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
  .dd-emp > .ico:last-child { color: var(--orange-700); }
  .dd-emp:active { transform: scale(.985); }
}
@media (hover: hover) and (max-width: 1023px) { .dd-emp:hover { border-color: var(--orange); } }
.dd-emp:focus-visible { outline-offset: 2px; }

@media (max-width: 1100px) {
  .dd-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (max-width: 860px) {
  .dd-panel { position: fixed; top: 64px; left: 0; right: 0; width: auto; transform: none; border-radius: 0 0 20px 20px; border-left: 0; border-right: 0; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; animation-name: ddInM; }
  @keyframes ddInM { from { opacity: 0; transform: translateY(-8px); } }
  .dd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dd-btn { margin: 0; padding: 7px 10px; border: 1px solid var(--line); }
  .dd-btn-txt { display: none; }
  .dd-btn-movil { display: inline; }
  .dd-panel { padding: 14px 16px 18px; }
  .dd-grid { grid-template-columns: 1fr; gap: 10px; }
  .dd-col-ia { padding: 8px; }
  .dd-movil { display: flex; gap: 8px; margin-top: 12px; }
  .dd-movil a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: var(--r-md); background: var(--blue-50); color: var(--navy); font-weight: 700; }
  .dd-movil a:active { transform: scale(.97); }
  .dd-foot { margin-top: 10px; }
  .dd-all { display: none; }
}

/* ── Ayuda ── */
.ayuda { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
.ayuda .faq h2 { font-size: 1.25rem; color: var(--navy); }
.ayuda #contacto { position: sticky; top: 84px; }
.ayuda #contacto h2 { font-size: 1.25rem; color: var(--navy); }
.reportar { font-size: .78rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 860px) {
  .ayuda { grid-template-columns: 1fr; }
  .ayuda #contacto { position: static; }
}

/* Data Fiscal (ARCA) en el pie */
.data-fiscal { display: inline-block; line-height: 0; }
.data-fiscal img { width: 60px; height: auto; border-radius: 4px; }

/* ── Inicio: herramientas destacadas ── */
.destacadas-head { text-align: center; max-width: 640px; margin: 0 auto 18px; }
.destacadas-head h2 { color: var(--navy); }
.destacadas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.destacada { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow);
  transition: transform var(--t-2) var(--ease), border-color var(--t-2), box-shadow var(--t-2); }
@media (hover: hover) { .destacada:hover { transform: translateY(-3px); border-color: var(--orange); box-shadow: var(--shadow-md); text-decoration: none; } }
.destacada:active { transform: scale(.985); }
.destacada-ico { font-size: 2rem; line-height: 1; margin-bottom: 6px; }
.destacada b { font-size: 1.05rem; color: var(--navy); }
.destacada small { color: var(--muted); font-size: .88rem; }
.tool-badge-ok { background: var(--ok-50) !important; color: var(--ok-700) !important; box-shadow: inset 0 0 0 1px #c9ead7 !important; }
@media (max-width: 860px) { .destacadas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .destacadas-grid { grid-template-columns: 1fr; } }
/* Celulares chicos (360–400 px): el encabezado entra entero aunque haya un link más (ej. "Panel" del admin) */
@media (max-width: 400px) { .menu { gap: 6px; } .dd-btn { padding: 7px 8px; } .menu .btn-sm { padding: .5em .6em; } .brand-logo { height: 32px; } }   /* 32 px = mínimo de la guía de marca */
/* 320–340 px (iPhone SE 1.ª gen., Android chicos): el encabezado no se pasa del ancho */
@media (max-width: 340px) { .nav { gap: 6px; } .menu { gap: 6px; } .dd-btn { padding: 6px 6px; } .menu .btn-sm { padding: .5em .5em; font-size: .76rem; } }
/* Menos de 360 px: el <picture> del encabezado muestra solo el logo Ahá (sin «Herramientas Digitales») */
@media (max-width: 359px) { .brand-logo { height: 30px; } }

/* ── Aparición suave al hacer scroll (la activa el script de layout.php; sin JS no se oculta nada) ── */
.rv { opacity: 0; transform: translateY(12px); }   /* se oculta al instante (sin transición) … */
.rv.rv-in { opacity: 1; transform: none; transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }   /* … y aparece suave */

/* Esqueleto de carga (para contenido que todavía no llegó) */
.skeleton { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, #ECEEF5 25%, #F6F7FB 50%, #ECEEF5 75%) 0 0 / 200% 100%; animation: esqueleto 1.3s ease-in-out infinite; color: transparent !important; }
@keyframes esqueleto { to { background-position: -200% 0; } }

@media print {
  .site-header, .dd-panel { position: static; box-shadow: none; }
  .site-footer { display: none; }   /* pie oscuro: en papel no suma (y sin fondo el texto claro no se vería) */
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ── Reducir movimiento: sin animaciones, sin transiciones y sin desplazamientos al pasar el mouse ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .btn:hover, .btn:active, .tool:hover, .tool:active, .tool:hover .tool-ico, .pair:hover, .pair:active, .plan:hover, .pack:hover, .pw-plan:hover,
  .destacada:hover, .destacada:active, a.dd-item:hover .dd-ico, a.dd-item:active, .dropzone.over, .dropzone:hover .dz-icon, .dropzone.over .dz-icon,
  .brand:hover .brand-logo, .modal-x:hover, .dd-btn:active { transform: none !important; }
}