/**
 * MinutaVirtual — hoja de estilo de la versión nueva.
 *
 * No depende de Bootstrap ni de la plantilla Rapid: es autocontenida.
 * La página vieja (style.css) queda intacta.
 *
 * Todo el color y la tipografía salen de los tokens de :root. Si mañana
 * cambia la marca, se cambia acá y no en 40 reglas sueltas.
 */

/*--------------------------------------------------------------
# Tokens
--------------------------------------------------------------*/
/* Los tokens (:root) viven ahora en assets/css/tokens.css, la fuente única que
   comparten la portada, el acceso y el panel. Se cargan con un <link> antes que
   esta hoja en cada página. Movidos en DHT-52. */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-900);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; display: block; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 999;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* Marca en texto: mismos colores del logotipo, con la fuente que sí cargamos */
.mvw { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.mvw .m { color: var(--brand-magenta); }
.mvw .v { color: var(--brand-orange); }
.mvw .w { color: var(--ink-400); }
.mvw .r { font-size: 0.62em; vertical-align: super; color: var(--ink-400); }

/*--------------------------------------------------------------
# Utilidades de sección
--------------------------------------------------------------*/
.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.75rem;
}

.section-head {
  max-width: 60ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.section-head p {
  color: var(--ink-500);
  font-size: var(--step-1);
  margin-bottom: 0;
}

.lead {
  font-size: var(--step-1);
  color: var(--ink-500);
  max-width: 60ch;
}

/*--------------------------------------------------------------
# Botones
--------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

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

.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line);
}
.btn--ghost:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.btn--quiet {
  background: transparent;
  color: var(--ink-500);
  padding-inline: 0.25rem;
}
.btn--quiet:hover { color: var(--primary); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/*--------------------------------------------------------------
# Franja de aviso
--------------------------------------------------------------*/

/* El degradado va de --primary a --accent-ink y no al naranja de marca:
   sobre #ff7c14 el texto blanco se queda en 2,3:1 y no pasa AA. Sobre estos
   dos extremos da 6,5:1 y 5,2:1. */
.franja {
  background: linear-gradient(90deg, var(--primary), var(--accent-ink));
  color: #fff;
}
.franja .container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
.franja p {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.4;
}
.franja b { font-weight: 700; }

.franja-nuevo {
  flex: none;
  font-family: var(--font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.franja-abrir {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.7rem;
  transition: background var(--dur-base) var(--ease);
}
.franja-abrir:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.franja-abrir svg { width: 14px; height: 14px; flex: none; }

.franja-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}
.franja-cerrar:hover { color: #fff; }
.franja-cerrar svg { width: 16px; height: 16px; }

/* En un teléfono no cabe la frase entera con el botón al lado: se recorta la
   coletilla y el "Nuevo" deja su lugar al texto, que es lo que informa. */
@media (max-width: 700px) {
  .franja .container { gap: 0.5rem; }
  .franja-nuevo,
  .franja-extra { display: none; }
  .franja-abrir { padding: 0.25rem 0.55rem; }
}

/*--------------------------------------------------------------
# Cabecera
--------------------------------------------------------------*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(26, 26, 31, 0.05);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { flex: none; }
/* 50px (no 34): el logo nuevo incluye el tagline "Alimentación colectiva"
   debajo del nombre, que a 34px quedaba ilegible. Cabe en el min-height 72px. */
.brand img { height: 50px; width: auto; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover,
.nav a[aria-current="true"] { color: var(--primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.header-actions .btn { padding: 0.7rem 1.15rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem;
  cursor: pointer;
  color: var(--ink-900);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav,
  .header-actions { display: none; }

  .site-header.is-open .nav,
  .site-header.is-open .header-actions {
    display: flex;
    flex-basis: 100%;
    margin: 0;
    padding-bottom: 1.25rem;
  }
  .site-header.is-open .container { flex-wrap: wrap; }
  .site-header.is-open .nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    width: 100%;
  }
  .site-header.is-open .header-actions { flex-wrap: wrap; }
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y);
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(255, 124, 20, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 5% 0%, rgba(214, 7, 155, 0.09), transparent 60%);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-magenta), var(--brand-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-500);
}
.hero-note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

.hero-media {
  position: relative;
  justify-self: center;
  max-width: 420px;
}
.hero-media img {
  width: 100%;
  border-radius: 24px;
  filter: drop-shadow(0 24px 48px rgba(26, 26, 31, 0.16));
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-actions,
  .hero-note { justify-content: center; }
  .hero-media { max-width: 260px; margin-top: 1rem; }
}

/*--------------------------------------------------------------
# Cifras
--------------------------------------------------------------*/
.stats {
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.stats ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.stats .num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.1;
}
.stats .label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-500);
}
@media (max-width: 700px) {
  .stats ul { grid-template-columns: repeat(2, 1fr); }
}

/*--------------------------------------------------------------
# Avisos
--------------------------------------------------------------*/

/* Carril de avisos de la portada. Comparte la mecánica del carrusel de
   testimonios —el mismo carrusel() de nueva.js, los mismos controles— pero con
   sus propias piezas, porque una tarjeta de aviso no se parece a una cita.
   Con un solo aviso el carril se ve como una banda fija: carrusel() no agrega
   flechas ni puntos si hay menos de dos. */
.avisos { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.avisos-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--radius);
}
.avisos-viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .avisos-viewport { scroll-behavior: auto; }
}

.avisos-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.aviso {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(115deg, var(--primary-soft), var(--accent-soft));
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
/* Cada pieza lleva su clase en vez de estilar `.aviso p`: un selector así le
   gana por especificidad a .eyebrow y a .aviso-foot, y les borra el margen y
   el color que traen puestos. */
.aviso h2 {
  font-size: var(--step-2);
  margin: 0;
}
.aviso-bajada {
  color: var(--ink-500);
  margin: 0.6rem 0 0;
}
.aviso .btn { margin-top: 1.35rem; }
/* --ink-500 y no --ink-400: sobre el fondo del aviso, ink-400 se queda en
   3,1:1 y no pasa AA. ink-500 da 5,4:1 y sigue leyéndose como secundario. */
.aviso-foot {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin: 0.7rem 0 0;
}

/* Tarjeta de marca del aviso. No es una captura del producto: es el isotipo y
   el logotipo, escritos con los colores de TablaUSDA que sí pasan AA. */
.aviso-marca {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.aviso-marca img { width: 64px; height: 64px; }
.aviso-marca .logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0;
  white-space: nowrap;
}
.aviso-marca .logo .t { color: var(--accent-ink); }
.aviso-marca .logo .u { color: var(--primary); }
.aviso-marca .bajada {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin: 0.15rem 0 0;
}

@media (max-width: 800px) {
  .aviso {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .aviso .btn { width: 100%; justify-content: center; }
  .aviso-marca { order: -1; }
}

/* Marca de enlace externo: los avisos y el menú salen del sitio. */
.externo svg {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  vertical-align: -0.05em;
}

/*--------------------------------------------------------------
# Acerca de
--------------------------------------------------------------*/
.about .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ink-700);
}
.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.28em;
  color: var(--primary);
}
.source-note {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--brand-orange);
  background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
  color: var(--ink-500);
}
@media (max-width: 860px) {
  .about .container { grid-template-columns: 1fr; }
  .about-media { order: 1; }
}

/*--------------------------------------------------------------
# Módulos
--------------------------------------------------------------*/
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.card p {
  font-size: var(--step--1);
  color: var(--ink-500);
  line-height: 1.65;
  margin: 0;
}

/*--------------------------------------------------------------
# Por qué
--------------------------------------------------------------*/
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.feature { display: block; }
.feature-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 124, 20, 0.12);
  color: var(--accent-ink);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-icon { margin-bottom: 1.1rem; }
.feature h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.feature p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

/*--------------------------------------------------------------
# Testimonios
--------------------------------------------------------------*/
.quotes {
  max-width: 760px;
  margin-inline: auto;
}

/* El viewport hace de carril: scroll horizontal con encaje por tarjeta.
   Sin JavaScript se desliza igual con el dedo o con el teclado. */
.quotes-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.quotes-viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .quotes-viewport { scroll-behavior: auto; }
}

.quotes-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.quote {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0; /* figure trae 1em 40px por defecto y descuadra el carril */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1.25rem;
  color: var(--ink-700);
  font-size: var(--step--1);
  line-height: 1.7;
}
.quote figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.quote .avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
}
.quote .who { font-weight: 600; color: var(--ink-900); font-size: 0.9375rem; }
.quote .who a { font-weight: 400; font-size: var(--step--1); }

/*--------------------------------------------------------------
# Controles del carrusel
--------------------------------------------------------------*/

/* Los inserta nueva.js. Los comparten todos los carriles de la portada
   (testimonios y avisos), por eso no llevan el prefijo de ninguno. */
.carrusel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.carrusel-arrow {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.carrusel-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.carrusel-arrow svg { width: 18px; height: 18px; }

.carrusel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.carrusel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink-400);
  opacity: 0.45;
  cursor: pointer;
  transition: width 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.carrusel-dot:hover { opacity: 0.8; }
.carrusel-dot.is-active {
  width: 26px;
  background: var(--primary);
  opacity: 1;
}

/*--------------------------------------------------------------
# Cierre
--------------------------------------------------------------*/
.cta-final {
  background: linear-gradient(120deg, #7c0560, var(--primary) 55%, var(--accent-ink));
  color: #fff;
  text-align: center;
}
.cta-final h2 { color: #fff; }
.cta-final p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--step-1);
  max-width: 55ch;
  margin-inline: auto;
}
.cta-final .btn--primary { background: #fff; color: var(--primary); }
.cta-final .btn--primary:hover { background: rgba(255, 255, 255, 0.9); color: var(--primary-dark); }
.cta-final .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.cta-final .btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.cta-final .hero-actions { justify-content: center; }

/*--------------------------------------------------------------
# Pie
--------------------------------------------------------------*/
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-500);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-500);
}
.social a:hover { color: var(--primary); border-color: var(--primary); }
.social svg { width: 17px; height: 17px; }

/*--------------------------------------------------------------
# Diálogos (nativos, sin Bootstrap)
--------------------------------------------------------------*/
dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(26, 26, 31, 0.28);
  color: var(--ink-700);
}
dialog::backdrop {
  background: rgba(26, 26, 31, 0.55);
  backdrop-filter: blur(2px);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0.75rem;
}
.dialog-head h2 { font-size: var(--step-2); margin: 0; }
.dialog-head p { font-size: var(--step--1); color: var(--ink-500); margin: 0.35rem 0 0; }
.dialog-close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-400);
  padding: 0.25rem;
  line-height: 0;
}
.dialog-close:hover { color: var(--ink-900); }
.dialog-close svg { width: 22px; height: 22px; }

.dialog-body {
  padding: 0.75rem 1.5rem 1.5rem;
  overflow-y: auto;
  max-height: calc(86vh - 190px);
}
.dialog-foot {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}

/*--------------------------------------------------------------
# Formularios
--------------------------------------------------------------*/
.field { margin-bottom: 1.1rem; }
.field:last-of-type { margin-bottom: 0; }

.field > label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--error); }
.field .hint { display: block; font-weight: 400; color: var(--ink-400); font-size: 0.8125rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink-900);
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(176, 11, 135, 0.14);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-400); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-top: 1.25rem;
}
.check input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.28em;
  flex: none;
  accent-color: var(--primary);
}

.msg {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.5;
}
.msg:empty { display: none; }
.msg--ok { background: #e9f7f0; color: var(--ok); border: 1px solid #bfe6d5; }
.msg--error { background: #fdecea; color: var(--error); border: 1px solid #f5c6c2; }

/*--------------------------------------------------------------
# Volver arriba
--------------------------------------------------------------*/
.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--primary-dark); color: #fff; }
.to-top svg { width: 20px; height: 20px; }