:root {
     --bg: #0b1220;
     --text: #e5e7eb;
     --muted: #9ca3af;
     --brand: #66DDAA;
     --brand-2: #22d3ee;
     --card: #0f172a;
     --bd: rgba(148, 163, 184, .22);
     --maxw: min(100%, 960px);
 }

 @media (prefers-color-scheme: light) {
     :root {
         --bg: #f8fafc;
         --text: #0f172a;
         --muted: #64748b;
         --brand: #66DDAA;
         --brand-2: #06b6d4;
         --card: #ffffff;
         --bd: rgba(2, 6, 23, .12);
     }
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     height: 100%
 }

 body {
     margin: 0;
     color: var(--text);
     background:
         radial-gradient(1200px 600px at 10% -20%, rgba(96, 165, 250, .12), transparent 60%),
         radial-gradient(1000px 500px at 110% 120%, rgba(34, 211, 238, .10), transparent 60%),
         var(--bg);
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     line-height: 1.65;
 }

 /* Layout full-height con footer al final */
 .wrap {
     min-height: 100svh;
     display: grid;
     grid-template-rows: auto 1fr auto;
 }

 header {
     padding: clamp(18px, 3.5vw, 32px) 20px 0;
     text-align: center;
 }

 .h1-wrap {
     width: var(--maxw);
     margin: 0 auto;
 }

 h1 {
     margin: 0 0 1.9rem;
     font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
     letter-spacing: -.02em;
     line-height: 1.2;
     background: none;
     -webkit-background-clip: initial;
     background-clip: initial;
     color: #111;
     font-weight: 800;
     text-align: center;
 }

 .subtitle {
     margin: .25rem auto 1.5rem;
     color: var(--muted);
     text-align: center;
     width: var(--maxw);
     font-size: .98rem;
 }

 main {
     width: var(--maxw);
     margin: 0 auto;
     background: var(--card);
     border: 1px solid var(--bd);
     border-radius: 1px;
     padding: clamp(1.25rem, 3.5vw, 2.5rem);
     box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
 }

 /* tipografía y espaciamiento del contenido ORIGINAL (sin cambiar texto) */
 h2 {
     margin-top: 2.25rem;
     margin-bottom: .5rem;
     font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem)
 }

 p {
     margin: .5rem 0 1rem
 }

 ul {
     padding-left: 1.25rem;
     margin: .5rem 0 1.25rem
 }

 li {
     margin: .3rem 0
 }

 a {
     color: var(--brand);
     text-underline-offset: 2px
 }

 strong {
     font-weight: 700
 }

 /* separadores sutiles */
 h2+p,
 h2+ul {
     border-top: 1px dashed var(--bd);
     padding-top: 1rem
 }

 footer {
     width: var(--maxw);
     margin: 0.1rem auto 2rem;
     color: var(--muted);
     text-align: center;
     border-radius: 1px;
 }

 /* bloque de copyright final dentro del main */
 .copy {
     margin-top: 2rem;
     font-size: .95rem;
     color: var(--muted);
     text-align: center;
 }

 .back-to-home {
     text-align: center;
     margin-top: 2rem;
 }

 /* Accesibilidad: reduce motion */
 @media (prefers-reduced-motion: reduce) {
     * {
         scroll-behavior: auto
     }
 }