/* Estética Crece Digital — mismos tokens que el Conversor Holded, PDFExcel y la guía corporativa */
:root {
  color-scheme: light;
  --marca: #116C8E;
  --marca-oscuro: #0f5c7a;
  --accion: #0090A8;
  --marca-suave: #E5F1F6;
  --verde: #00957F;
  --verde-suave: #E0F5F1;
  --tinta: #18181B;
  --tinta-2: #52525B;
  --tinta-3: #71717a;
  --fondo: #F8FAFC;
  --tarjeta: #ffffff;
  --borde: #E4E4E7;
  --rojo: #d03b3b;
  --rojo-suave: #fdeaea;
  --ambar: #a15c00;
  --ambar-suave: #fdf3e3;
  --radio: 24px;
  --degradado: linear-gradient(135deg, #047857 0%, #0e7490 40%, #1e40af 70%, #312e81 100%);
  --sombra: 0 1px 3px rgba(16, 24, 40, .05), 0 1px 2px rgba(16, 24, 40, .04);
  --sombra-media: 0 6px 20px rgba(16, 24, 40, .08);
  --sombra-alta: 0 14px 36px rgba(16, 24, 40, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: var(--marca-oscuro); }

/* ---- hero con degradado corporativo y blobs ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--degradado);
  color: #fff;
  border-radius: 0 0 40px 40px;
  padding: 28px 24px 64px;
}
.blob {
  position: absolute; border-radius: 999px; filter: blur(70px); opacity: .5;
  pointer-events: none; animation: flotar 14s ease-in-out infinite;
}
.blob.b1 { width: 420px; height: 420px; background: #34d399; top: -120px; left: -100px; }
.blob.b2 { width: 380px; height: 380px; background: #38bdf8; bottom: -120px; right: -80px; animation-delay: -5s; }
.blob.b3 { width: 300px; height: 300px; background: #a78bfa; top: 40%; left: 60%; animation-delay: -9s; }
@keyframes flotar {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(.95); }
}

.hero-contenido { position: relative; max-width: 1040px; margin: 0 auto; }
.hero-contenido.estrecho { max-width: 900px; }
.hero-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 40px;
}
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none;
  font-size: 18px; font-weight: 300; letter-spacing: -.3px;
}
.marca b { font-weight: 700; }
.marca-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); padding: 3px;
}
.badge-hero {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
}
.nav-hero { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-hero a {
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-hero a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nav-hero a.active {
  background: rgba(255, 255, 255, .18); color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.nav-hero a.salir { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); }

.eyebrow {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin-bottom: 10px;
}
.hero h1 {
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 300; line-height: 1.15; letter-spacing: -.5px;
  max-width: 760px; margin-bottom: 14px;
}
.hero-sub {
  font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, .85); max-width: 640px;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-meta span {
  font-size: 12px; font-weight: 600;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .92);
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: background .15s;
}
.btn-hero:hover { background: rgba(255, 255, 255, .26); }
.btn-hero.solido { background: #fff; color: var(--marca-oscuro); border-color: #fff; }
.btn-hero.solido:hover { background: rgba(255, 255, 255, .88); }

/* ---- contenido ---- */
.contenido {
  flex: 1;
  width: min(1040px, 100% - 32px);
  margin: -34px auto 40px;
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
}
.contenido.estrecho { width: min(900px, 100% - 32px); }

/* ---- tarjetas ---- */
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-media);
  padding: clamp(22px, 4vw, 36px);
}
.tarjeta.compacta { padding: clamp(18px, 3vw, 26px); }
.titulo-seccion { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 6px; }
.texto-apoyo { color: var(--tinta-2); font-size: 13.5px; margin-bottom: 18px; }
.texto-apoyo:last-child { margin-bottom: 0; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 920px) { .rejilla-2 { grid-template-columns: 1fr; } }

/* ---- formulario ---- */
.formulario { display: grid; gap: 22px; }
.campo { display: grid; gap: 8px; }
.campo > label:not(.zona-subida), .campo-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2);
}
.zona-subida { text-transform: none; letter-spacing: normal; color: var(--tinta); }
.campo input, .campo select, .campo-input {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: #fff;
  padding: 12px 20px;
  font-size: 14.5px;
  color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 18px;
  background: #fff;
  padding: 13px 18px;
  font-size: 14.5px;
  color: var(--tinta);
  line-height: 1.6;
  min-height: 96px;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea.corto { min-height: 68px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(17, 108, 142, .14);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
.campo-ayuda { color: var(--tinta-3); font-size: 12.5px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .fila-campos { grid-template-columns: 1fr; } }
.subtitulo-form {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); padding-top: 18px; border-top: 1px solid var(--borde);
}

/* ---- zona de subida ---- */
.zona-subida {
  position: relative;
  display: block;
  background: var(--fondo);
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.zona-subida:hover, .zona-subida.activa {
  border-color: var(--marca);
  background: var(--marca-suave);
}
.zona-subida.activa { transform: scale(1.005); }
.input-invisible {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.zona-icono {
  width: 54px; height: 54px; margin: 0 auto 12px;
  border-radius: 16px; background: var(--marca); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-media);
}
.zona-subida strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.zona-subida small { display: block; color: var(--tinta-2); font-size: 12.5px; margin-top: 4px; }

.lista-archivos { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lista-archivos li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; border-radius: 14px; background: var(--fondo);
  border: 1px solid var(--borde);
}
.archivo-nombre {
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  white-space: nowrap;
}
.chip-cian { background: var(--marca-suave); color: var(--marca); }
.chip-verde { background: var(--verde-suave); color: var(--verde); }
.chip-gris { background: var(--fondo); color: var(--tinta-2); border: 1px solid var(--borde); }

/* ---- desplegables discretos ---- */
.desplegable summary {
  color: var(--tinta-2); font-size: 13.5px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary:before { content: "▸ "; color: var(--marca); }
.desplegable[open] summary:before { content: "▾ "; }
.desplegable summary:hover { color: var(--marca); }
.desplegable > *:not(summary) { margin-top: 12px; }

/* ---- avisos ---- */
.aviso {
  display: grid; gap: 4px;
  padding: 16px 20px;
  background: var(--fondo);
  border-left: 4px solid var(--marca);
  border-radius: 0 16px 16px 0;
  line-height: 1.5;
}
.aviso strong { font-size: 13.5px; }
.aviso span { color: var(--tinta-2); font-size: 13px; }
.aviso.error { border-left-color: var(--rojo); background: var(--rojo-suave); }
.aviso.error strong { color: var(--rojo); }
.aviso.error span { color: #7d291f; }
.aviso.ok { border-left-color: var(--verde); background: var(--verde-suave); }
.aviso.ok strong { color: var(--verde); }
.aviso.atencion { border-left-color: var(--ambar); background: var(--ambar-suave); }
.aviso.atencion strong { color: var(--ambar); }

/* ---- botones ---- */
.btn-primario {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--marca); color: #fff; border: none;
  font-size: 14px; font-weight: 700;
  padding: 13px 26px; border-radius: 999px;
  box-shadow: var(--sombra-media);
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.btn-primario:hover:not(:disabled) { background: var(--marca-oscuro); transform: translateY(-1px); }
.btn-primario:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: var(--marca-oscuro);
  border: 1px solid var(--borde);
  font-size: 13.5px; font-weight: 600;
  padding: 11px 22px; border-radius: 999px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.btn-secundario:hover { border-color: var(--marca); background: var(--marca-suave); }
.btn-peligro {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--rojo); border: 1px solid #f0cfcf;
  font-size: 13.5px; font-weight: 600;
  padding: 11px 22px; border-radius: 999px;
  transition: background .15s;
}
.btn-peligro:hover { background: var(--rojo-suave); }
.btn-fantasma {
  background: none; border: none; color: var(--tinta-3);
  font-size: 12.5px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; padding: 4px;
}
.btn-fantasma:hover { color: var(--rojo); }
.btn-bloque { width: 100%; }
.btn-mini { padding: 8px 16px; font-size: 12.5px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.spinner {
  width: 13px; height: 13px; border-radius: 999px;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- catálogo de servicios ---- */
.catalogo-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 16px;
}
.contador {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: 999px; background: var(--marca); color: #fff;
  font-size: 14px; font-weight: 700;
}
.catalogo-filtros { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 14px; }
@media (max-width: 620px) { .catalogo-filtros { grid-template-columns: 1fr; } }
.buscador { position: relative; display: flex; align-items: center; }
.buscador svg {
  position: absolute; left: 16px; width: 17px; height: 17px; color: var(--tinta-3);
  pointer-events: none;
}
.buscador input {
  width: 100%; border: 1px solid var(--borde); border-radius: 999px;
  padding: 11px 18px 11px 42px; font-size: 14px; background: #fff; color: var(--tinta);
}
.buscador input:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(17, 108, 142, .14);
}
.selector-categoria {
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 11px 18px; font-size: 13.5px; background: #fff; color: var(--tinta-2);
}

.catalogo-resultados {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 260px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--borde); border-radius: 18px; background: var(--fondo);
}
.catalog-hit {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px;
  width: 100%; padding: 9px 13px; text-align: left;
  background: #fff; border: 1px solid transparent; border-radius: 13px;
  color: var(--tinta); transition: border-color .15s, transform .12s;
}
.catalog-hit:hover { border-color: var(--marca); transform: translateX(2px); }
.hit-add {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 9px; background: var(--marca-suave); color: var(--marca);
  font-size: 16px; font-weight: 700; line-height: 1;
}
.hit-copy { display: flex; flex-direction: column; min-width: 0; }
.hit-copy strong {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hit-copy small {
  color: var(--tinta-3); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.catalog-hit em {
  font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--marca);
  white-space: nowrap;
}
.catalog-msg { padding: 16px; color: var(--tinta-3); font-size: 13px; text-align: center; }

.bloque-seleccionados { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }
.seleccionados-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.seleccionados-cabecera h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2);
}
.lista-seleccionados { display: flex; flex-direction: column; gap: 7px; }
.selected-row {
  display: grid; grid-template-columns: 8px 1fr 116px 26px; align-items: center; gap: 11px;
  padding: 10px 15px; border: 1px solid var(--borde); border-radius: 15px; background: #fff;
}
.selected-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--marca); }
.selected-copy { display: flex; flex-direction: column; min-width: 0; }
.selected-copy strong {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selected-copy small { color: var(--tinta-3); font-size: 11.5px; }
.selected-price input {
  width: 100%; border: 1px solid var(--borde); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; text-align: right;
  color: var(--tinta); background: var(--fondo);
}
.selected-price input:focus {
  outline: none; border-color: var(--marca); background: #fff;
  box-shadow: 0 0 0 3px rgba(17, 108, 142, .13);
}
.remove-svc {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: none; border-radius: 999px; background: var(--fondo); color: var(--tinta-3);
  font-size: 17px; line-height: 1; transition: background .15s, color .15s;
}
.remove-svc:hover { background: var(--rojo-suave); color: var(--rojo); }
.seleccionados-vacio {
  padding: 24px 16px; text-align: center;
  color: var(--tinta-3); font-size: 13px; line-height: 1.7;
  border: 1px dashed var(--borde); border-radius: 16px; background: var(--fondo);
}
.seleccionados-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 13px 18px; border-radius: 16px;
  background: var(--marca-suave);
}
.seleccionados-total span {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--marca);
}
.seleccionados-total strong {
  font-size: 21px; font-weight: 300; color: var(--marca); letter-spacing: -.4px;
}

/* ---- secciones de la propuesta ---- */
.rejilla-secciones { display: grid; gap: 8px; }
.fila-seccion {
  display: grid; grid-template-columns: 1fr 172px; align-items: center; gap: 12px;
  padding: 9px 15px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo);
}
.fila-seccion > span { font-size: 13.5px; font-weight: 600; }
.fila-seccion select {
  border: 1px solid var(--borde); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; background: #fff; color: var(--tinta-2);
}
.fila-seccion select:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(17, 108, 142, .13);
}

/* ---- listas de inicio / biblioteca ---- */
.lista-fichas { display: flex; flex-direction: column; gap: 9px; }
.ficha {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 19px; border: 1px solid var(--borde); border-radius: 18px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ficha:hover {
  border-color: var(--marca); box-shadow: var(--sombra-media); transform: translateY(-1px);
}
.ficha-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ficha-copy strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.ficha-copy small { color: var(--tinta-3); font-size: 12.5px; }
.ficha-lado { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vacio {
  padding: 40px 24px; text-align: center;
  color: var(--tinta-3); font-size: 13.5px; line-height: 1.7;
  border: 1px dashed var(--borde); border-radius: 20px; background: var(--fondo);
}

/* ---- brief: prompt y variantes ---- */
.caja-prompt {
  width: 100%; min-height: 260px; resize: vertical;
  border: 1px solid var(--borde); border-radius: 18px; background: var(--fondo);
  padding: 16px 18px;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6; color: var(--tinta-2);
}
.lista-variantes { display: flex; flex-direction: column; gap: 12px; }
.ficha-variante {
  padding: 16px 19px; border: 1px solid var(--borde); border-radius: 18px; background: #fff;
}
.variante-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.variante-cabecera b { font-size: 14.5px; font-weight: 600; text-transform: capitalize; }
.variante-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.variante-meta { display: flex; flex-direction: column; gap: 3px; }
.variante-meta small { color: var(--tinta-3); font-size: 11.5px; }
.variante-meta code, .en-linea code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  padding: 1px 6px; border-radius: 6px; background: var(--fondo); color: var(--tinta-2);
}

/* ---- chat ---- */
.chat-log {
  display: flex; flex-direction: column; gap: 13px;
  max-height: 430px; overflow-y: auto;
  padding: 18px; margin-bottom: 16px;
  border: 1px solid var(--borde); border-radius: 20px; background: var(--fondo);
}
.chat-vacio { color: var(--tinta-3); font-size: 13px; text-align: center; padding: 22px 0; }
.chat-msg { display: flex; flex-direction: column; }
.chat-burbuja {
  max-width: 78%; padding: 11px 17px; border-radius: 18px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.chat-user { align-items: flex-end; }
.chat-user .chat-burbuja {
  background: var(--marca); color: #fff; border-bottom-right-radius: 6px;
}
.chat-assistant { align-items: flex-start; }
.chat-assistant .chat-burbuja {
  background: #fff; color: var(--tinta);
  border: 1px solid var(--borde); border-bottom-left-radius: 6px;
  box-shadow: var(--sombra);
}
.chat-cambios { margin-top: 5px; color: var(--tinta-3); font-size: 11.5px; }
.chat-form { display: flex; align-items: flex-end; gap: 11px; }
.chat-form textarea {
  flex: 1; border: 1px solid var(--borde); border-radius: 20px;
  padding: 13px 18px; font-size: 14px; line-height: 1.55;
  background: #fff; color: var(--tinta); resize: vertical; min-height: 54px;
}
.chat-form textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 4px rgba(17, 108, 142, .14);
}
.chat-form button { white-space: nowrap; }
@media (max-width: 720px) {
  .chat-burbuja { max-width: 100%; }
  .chat-form { flex-direction: column; align-items: stretch; }
}

/* ---- preview ---- */
.marco-preview {
  width: 100%; height: 460px; margin-top: 16px;
  border: 1px solid var(--borde); border-radius: 18px; background: #fff;
}

/* ---- pie ---- */
.pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  width: min(1040px, 100% - 32px);
  margin: 0 auto; padding: 18px 4px 26px;
  color: var(--tinta-3); font-size: 12.5px;
  border-top: 1px solid var(--borde);
}
.pie b { font-weight: 700; }

/* ---- pantalla de acceso ---- */
.pantalla-login {
  min-height: 100vh;
  background: var(--degradado);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  padding: 24px;
}
.modal-login {
  position: relative;
  width: min(420px, 100%);
  background: var(--tarjeta);
  border-radius: 28px;
  box-shadow: var(--sombra-alta);
  padding: 40px 36px 28px;
  text-align: center;
  animation: aparecer .35s ease-out;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo { width: 62px; height: 62px; border-radius: 18px; margin-bottom: 12px; }
.login-marca { font-size: 14px; font-weight: 300; color: var(--tinta-2); letter-spacing: -.2px; }
.login-marca b { font-weight: 700; color: var(--tinta); }
.modal-login h1 { font-size: 25px; font-weight: 300; letter-spacing: -.4px; margin: 4px 0 6px; }
.login-sub { color: var(--tinta-2); font-size: 13.5px; margin-bottom: 22px; }
.login-error {
  background: var(--rojo-suave); color: var(--rojo);
  font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 14px; margin-bottom: 16px;
}
.modal-login form { display: grid; gap: 16px; text-align: left; }
.login-pie { color: var(--tinta-3); font-size: 11.5px; margin-top: 22px; }

@media (max-width: 700px) {
  .hero { padding: 22px 18px 56px; border-radius: 0 0 28px 28px; }
  .hero-topbar { margin-bottom: 28px; }
  .btn-primario { width: 100%; }
  .selected-row { grid-template-columns: 8px 1fr 96px 26px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* Columnas del paso 2: cada una apila sus tarjetas */
.columna { display: grid; gap: 20px; align-content: start; }