.hero-ig-media{margin:24px 0}
    .hero-ig-media img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line-strong)}
    @media (min-width:961px){
      .hero-ig-grid{display:grid;grid-template-columns:1.05fr .95fr;column-gap:56px;align-items:center;grid-template-areas:"copytop media" "copybottom media"}
      .hero-ig-copy-top{grid-area:copytop}
      .hero-ig-copy-bottom{grid-area:copybottom}
      .hero-ig-media{grid-area:media;margin:0;max-width:540px;width:100%;justify-self:end}
    }

    /* Galería "Qué puedes crear": tres ejemplos en 3:4. Grid propio (no
       se reutiliza .bento-grid-examples porque esa clase asume 2
       columnas) para no tocar assets/css/kit-python.css. */
    .creations-gallery{display:grid;grid-template-columns:1fr;gap:28px;margin:32px 0 0}
    .creations-gallery figure{margin:0}
    .creations-gallery img{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:1086/1448;margin:0 auto;border-radius:14px;border:1px solid var(--line-strong);box-shadow:var(--shadow-md);background:var(--wash-strong)}
    .creations-gallery figcaption{margin-top:12px;text-align:center;color:var(--muted);font-size:var(--text-caption)}
    @media (min-width:700px){
      .creations-gallery{grid-template-columns:repeat(3,1fr);gap:24px}
      .creations-gallery img{max-width:none}
    }

    /* Lista "Qué no hace": reutiliza el patrón ✕/--faint que ya existe
       en .table-row (comparativa) para diferenciarla de .check-list
       (✓/--accent), en vez de dejarla como <ul> sin clase con bullets
       por defecto del navegador. */
    .no-list{list-style:none;padding:0;margin:22px auto 0;max-width:600px;display:grid;gap:11px;color:var(--muted);font-size:var(--text-body-sm);line-height:var(--leading-body);text-align:left}
    .no-list li{position:relative;padding-left:28px}
    .no-list li:before{content:"✕";position:absolute;left:0;color:var(--faint);font-weight:var(--weight-strong)}

    /* FAQ: el encabezado de la izquierda es mucho más corto que la lista
       de preguntas, dejando un hueco vacío grande debajo en escritorio.
       .faq-grid ya usa align-items:start (kit-python.css), así que la
       celda del encabezado ocupa toda la altura de la fila y sticky
       puede recorrerla en vez de quedar fijo desde el inicio. */
    @media (min-width:961px){
      #faq .section-heading{position:sticky;top:96px;align-self:start}
    }

    /* "Tu Perfil Maestro": la imagen y el recuadro de regeneración se
       agrupan en .perfil-media-col, que ocupa la columna derecha de
       .two-col (compartida) tal como antes lo hacía solo .value-note.
       Así el orden de origen (texto, imagen, recuadro) ya es correcto
       en móvil sin necesitar grid-template-areas. */
    .perfil-media{margin:0}
    .perfil-media img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line-strong);box-shadow:var(--shadow-md);background:var(--wash-strong)}
    @media (min-width:961px){
      .perfil-media{max-width:525px}
    }

    /* "El problema": el encabezado (solo etiqueta + título, sin párrafo)
       es mucho más corto que las 3 tarjetas de .pain-list; con el
       align-items:center por defecto de .two-col quedaba centrado con
       un hueco vacío arriba y abajo. Se alinea arriba, igual que en
       #faq. */
    @media (min-width:961px){
      #problema .container{align-items:start}
    }

    /* "Cómo funciona": demostración visual del paso 4, debajo de las 4
       tarjetas, dentro del mismo container (no un grid nuevo). */
    .demo-como-funciona{margin:56px 0 0;text-align:center}
    .demo-como-funciona h3{font-family:var(--font-heading);font-weight:var(--weight-heading-sm);font-size:var(--text-h3);color:var(--ink);margin-bottom:10px}
    .demo-como-funciona > p{color:var(--muted);font-size:var(--text-body-sm);max-width:560px;margin:0 auto}
    .demo-media{margin:28px auto 0;max-width:600px}
    .demo-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line-strong);box-shadow:var(--shadow-md);background:var(--wash-strong)}
    .demo-media figcaption{margin-top:10px;font-size:var(--text-caption);color:var(--muted)}
    @media (min-width:961px){
      .demo-media{max-width:1050px}
    }

    /* FAQ: <details> tenía padding:24px (kit-python.css) pero el toggle
       nativo solo responde a toques dentro de <summary>, cuya caja
       propia mide apenas el alto de una línea de texto (~23px en
       preguntas de una sola línea) — muy por debajo del mínimo de 44px
       recomendado para objetivos táctiles. El padding se mueve al
       <summary> para que toda la franja visual de la pregunta sea
       realmente tocable; el párrafo de respuesta recupera su propio
       espaciado. */
    #faq details{padding:0}
    #faq summary{padding:24px}
    #faq details p{margin:0;padding:0 24px 24px}