/* Tokens del design system 3D Minis (tokens.json) como variables CSS, que es lo que espera components/bundle.css. */
:root {
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --turquesa: #1abc9c; --turquesa-texto: #117a65; --turquesa-suave: #e8f8f5;
  --turquesa-hover: #48c9b0; --turquesa-activo: #76d7c4;
  --grafito: #2c3e50; --grafito-hover: #1f2e3c; --grafito-activo: #17212b;
  --acento: #e8590c; --acento-texto: #c2410c; --acento-suave: #fff1e8;
  --fondo: #ffffff; --texto: #000000; --texto-suave: #566573; --linea: #d5dde3;
  --on-turquesa: #2c3e50; --on-acento: #000000; --on-grafito: #ffffff;
  --texto-inverso-suave: #d5dde3;
  --exito: #1f7a3a; --exito-suave: #e9f6ec; --exito-texto: #17692f; --on-exito: #ffffff;
  --aviso: #f5b700; --aviso-suave: #fff5d6; --aviso-texto: #8a5300; --on-aviso: #000000;
  --error: #c62828; --error-suave: #fdecea; --error-texto: #b3261e; --on-error: #ffffff;
  --error-hover: #a82222; --error-activo: #8f1c1c;
  --info: #2459c9; --info-suave: #eaf0fc; --info-texto: #1f4fb4; --on-info: #ffffff;
  --borde-campo: #7f8c99; --fondo-campo: #ffffff;
  --deshabilitado-fondo: #eef1f4; --deshabilitado-borde: #c3ccd4; --deshabilitado-texto: #8795a1;
  --superficie: #f3f5f7; --overlay: rgba(23, 32, 42, 0.64);
  --foco: #2c3e50; --foco-separacion: #ffffff; --foco-inverso: #1abc9c;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --sombra-tarjeta: 0 1px 2px rgba(44, 62, 80, 0.08), 0 2px 8px rgba(44, 62, 80, 0.06);
  --sombra-desplegable: 0 2px 4px rgba(44, 62, 80, 0.08), 0 8px 24px rgba(44, 62, 80, 0.14);
  --sombra-modal: 0 24px 64px rgba(23, 32, 42, 0.28);
  --sombra-foco: 0 0 0 2px #ffffff, 0 0 0 4px #2c3e50;
  --dur-rapida: 120ms; --dur-base: 200ms; --dur-lenta: 320ms;
  --curva-estandar: cubic-bezier(0.2, 0, 0, 1); --curva-salida: cubic-bezier(0.4, 0, 1, 1);
  --z-cabecera: 30; --z-desplegable: 35; --z-drawer: 40; --z-modal: 50; --z-toast: 60;
}

body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; -webkit-font-smoothing: antialiased; }
.m-cq { container-type: inline-size; min-height: 100vh; }
.m-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-pcard-n a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bloques de portada (aún no existen como componente en el design system): solo tokens. */
.p-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.p-band { padding: var(--space-10) 0; }
.p-hero { display: grid; gap: var(--space-8); padding: var(--space-10) 0 var(--space-12); align-items: center; }
.p-collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); }
.p-collage .m-img:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.p-fr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.p-fr { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; color: var(--on-grafito); text-decoration: none; background: var(--grafito); }
.p-fr .m-img { border-radius: 0; aspect-ratio: 4 / 3; }
.p-fr img { transition: transform var(--dur-lenta) var(--curva-estandar); }
.p-fr:hover img { transform: scale(1.04); }
.p-fr-cap { padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.p-fr:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.p-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); counter-reset: paso; list-style: none; margin: 0; padding: 0; }
.p-step { background: var(--fondo); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.p-step-n { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--turquesa); color: var(--on-turquesa); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.p-grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); }

@container (min-width: 768px) {
  .p-wrap { padding: 0 var(--space-6); }
  .p-fr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}
@container (min-width: 1024px) {
  .p-band { padding: var(--space-16) 0; }
  .p-hero { grid-template-columns: 1fr 1.05fr; gap: var(--space-12); padding: var(--space-16) 0; }
}
@container (max-width: 640px) {
  .p-display { font-size: 32px !important; line-height: 38px !important; }
}

/* Portada B (impresión a medida): solo tokens. */
.p-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--texto-inverso-suave); }
.p-checks li { display: flex; gap: var(--space-2); align-items: flex-start; }
.p-checks .m-ico { color: var(--turquesa); flex: none; margin-top: 1px; }
.p-drop { cursor: pointer; padding: var(--space-8) var(--space-4); }
.p-drop:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.p-strip { border-bottom: 1px solid var(--linea); }
.p-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.p-stats > div { padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.p-stats dt { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.p-stats dd { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-proc { display: grid; gap: var(--space-8); align-items: start; }
.p-proc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-8); }
.p-proc-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); }
.p-proc-list p { margin: 6px 0 0; font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.p-proc-n { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--turquesa); color: var(--on-turquesa); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; }
.p-track { display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--sombra-tarjeta); }
.p-tec { display: grid; gap: var(--space-6); align-items: start; }
.p-tec-intro { display: flex; flex-direction: column; gap: var(--space-3); }
.p-mat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.p-mat { display: flex; flex-direction: column; gap: var(--space-3); }
.p-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-4); margin: 0; font-size: 13px; line-height: 18px; }
.p-meters > div { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.p-meters dt { color: var(--texto-suave); font-weight: 600; }
.p-meters dd { margin: 0; }
.p-mat-colors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .12); }
.p-mat-colors .m-help { margin-left: 4px; }
.p-uses, .p-guar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.p-use { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding: var(--space-5); border: 1px solid var(--linea); border-radius: var(--radius-lg); }
.p-use p, .p-guar p { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.p-use .m-badge { margin-top: auto; }
.p-use-i, .p-guar-i { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--turquesa-suave); color: var(--turquesa-texto); display: grid; place-items: center; margin-bottom: var(--space-1); }
.p-guar > div { display: flex; flex-direction: column; gap: var(--space-2); }
.p-guar-i { background: var(--fondo); }
.p-shop { display: grid; gap: var(--space-6); align-items: center; }
.p-shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.p-fr--sm .m-img { aspect-ratio: 1; }
.p-fr--sm .p-fr-cap { padding: var(--space-3); }
.p-faq { display: grid; gap: var(--space-6); align-items: start; }
.p-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-12); padding-bottom: var(--space-12); }

@container (min-width: 640px) {
  .p-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-proc-list, .p-mat-grid, .p-uses, .p-guar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1024px) {
  .p-proc { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); }
  .p-tec { grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-10); }
  .p-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-guar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-shop { grid-template-columns: 1fr 1.6fr; gap: var(--space-12); }
  .p-faq { grid-template-columns: 1fr 2fr; gap: var(--space-12); }
}
@container (max-width: 520px) {
  .p-shop-grid { grid-template-columns: minmax(0, 1fr); }
  .p-fr--sm .m-img { aspect-ratio: 16 / 9; }
}