/* reset: sin styles.css (la landing no monta React), el body tendría
         margen y fondo blanco por defecto → borde blanco alrededor. */
      html,
      body {
        margin: 0;
        background: #0b0d10;
      }

      /* ---------------------------------------------------------------- */
      /* Landing "darkroom ácido" — misma identidad de marca que el editor  */
      /* ---------------------------------------------------------------- */
      #landing {
        --bg: #0b0d10;
        --panel: #121419;
        --panel-2: #181b21;
        --line: #23272f;
        --line-bright: #2f3540;
        --ink: #edf0e8;
        --ink-dim: #9aa194;
        --ink-faint: #7e8676;
        --acid: #d6f64b;
        --acid-soft: rgba(214, 246, 75, 0.14);
        --acid-glow: rgba(214, 246, 75, 0.35);
        --coral: #ff5e63;
        --coral-soft: rgba(255, 94, 99, 0.14);
        --sans: "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
        --display: "Bricolage Grotesque", var(--sans);
        --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

        position: relative;
        background: var(--bg);
        color: var(--ink-dim);
        font-family: var(--sans);
        font-size: 15.5px;
        line-height: 1.65;
      }

      /* grano de película sutil, igual al del editor, para que la costura
         entre app y landing no se note al hacer scroll */
      #landing::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.05;
        z-index: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      .lp-container {
        position: relative;
        z-index: 1;
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 20px;
      }

      #landing h1,
      #landing h2,
      #landing h3 {
        font-family: var(--display);
        color: var(--ink);
        letter-spacing: -0.5px;
        margin: 0;
      }

      #landing strong {
        color: var(--ink);
        font-weight: 600;
      }

      #landing a {
        color: var(--acid);
        text-decoration: none;
        text-underline-offset: 3px;
      }

      #landing a:hover {
        text-decoration: underline;
      }

      #landing .lp-eyebrow {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--ink-faint);
        margin: 0 0 12px;
      }

      /* -------------------------------- hero -------------------------------- */
      .lp-hero {
        position: relative;
        z-index: 1;
        padding: 56px 0 48px;
        background:
          radial-gradient(900px 480px at 85% -10%, rgba(214, 246, 75, 0.07), transparent 60%),
          transparent;
      }

      .lp-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 36px;
      }

      .lp-h1 {
        font-size: clamp(28px, 6vw, 44px);
        font-weight: 750;
        line-height: 1.08;
      }

      .lp-accent {
        color: var(--acid);
        text-shadow: 0 0 24px var(--acid-glow);
      }

      .lp-lead {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.65;
        margin: 18px 0 0;
      }

      .lp-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 22px 0 0;
      }

      .lp-badge {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.4px;
        color: var(--ink-dim);
        border: 1px solid var(--line-bright);
        border-radius: 99px;
        padding: 6px 12px;
        white-space: nowrap;
      }

      .lp-badge-acid {
        color: #10130a;
        background: var(--acid);
        border-color: var(--acid);
      }

      .lp-hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 26px;
      }

      .lp-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--display);
        font-weight: 650;
        font-size: 14px;
        border-radius: 10px;
        padding: 12px 18px;
        border: 1px solid var(--line-bright);
        color: var(--ink);
        transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      }

      .lp-btn:hover {
        text-decoration: none;
        border-color: var(--acid);
      }

      /* #landing prefix: gana al `#landing a{color:acid}` (specificity de ID);
         si no, el texto queda verde sobre verde e invisible. */
      #landing .lp-btn-primary {
        background: var(--acid);
        color: #10130a;
        border-color: var(--acid);
      }

      .lp-btn-primary:hover {
        box-shadow: 0 0 24px var(--acid-glow);
      }

      .lp-btn-ghost {
        background: var(--panel-2);
      }

      /* swatch decorativo: canal alfa / checker, como en el editor */
      .lp-hero-visual {
        display: flex;
        justify-content: center;
      }

      .lp-swatch {
        position: relative;
        width: min(100%, 360px);
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
      }

      .lp-swatch-checker {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(45deg, #1d2127 25%, transparent 25%),
          linear-gradient(-45deg, #1d2127 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #1d2127 75%),
          linear-gradient(-45deg, transparent 75%, #1d2127 75%);
        background-size: 22px 22px;
        background-position: 0 0, 0 11px, 11px -11px, -11px 0;
        background-color: #15181d;
      }

      .lp-swatch-checker::after {
        content: "";
        position: absolute;
        inset: 0;
        left: 52%;
        background: linear-gradient(160deg, #2a2f10, #10130a 70%);
      }

      .lp-swatch-divider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 52%;
        width: 0;
        border-left: 2px solid var(--acid);
        box-shadow: 0 0 12px var(--acid-glow);
      }

      .lp-swatch-tag {
        position: absolute;
        top: 12px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--ink);
        background: rgba(7, 8, 10, 0.7);
        border-radius: 99px;
        padding: 4px 9px;
      }

      .lp-swatch-tag-l {
        left: 12px;
      }

      .lp-swatch-tag-r {
        right: 12px;
        color: var(--acid);
      }

      /* ------------------------------ secciones ------------------------------ */
      .lp-section {
        position: relative;
        z-index: 1;
        padding: 48px 0;
        border-top: 1px solid var(--line);
      }

      .lp-section-alt {
        background: color-mix(in srgb, var(--panel) 45%, transparent);
      }

      .lp-h2 {
        font-size: clamp(21px, 3.4vw, 27px);
        font-weight: 750;
        margin: 0 0 14px;
      }

      .lp-section-intro {
        max-width: 620px;
        margin: 0 0 28px;
      }

      /* casos de uso / features: grid de tarjetas numeradas */
      .lp-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .lp-card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 20px 20px 22px;
      }

      .lp-card-n {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--acid);
        border: 1px solid color-mix(in srgb, var(--acid) 45%, transparent);
        border-radius: 8px;
        margin: 0 0 12px;
      }

      .lp-card h3 {
        font-size: 16.5px;
        font-weight: 700;
        margin: 0 0 6px;
      }

      .lp-card p {
        margin: 0;
        font-size: 14px;
      }

      .lp-card a {
        display: inline-block;
        margin-top: 10px;
        font-family: var(--mono);
        font-size: 12.5px;
      }

      /* features: la tarjeta de Lote/Batch se destaca como banner (NUEVO) */
      .lp-feature-hero {
        position: relative;
        margin: 0 0 14px;
        padding: 24px 24px 26px;
        border-color: color-mix(in srgb, var(--acid) 55%, var(--line));
        background: linear-gradient(150deg, var(--acid-soft), var(--panel) 65%);
      }

      .lp-feature-hero h3 {
        font-size: 19px;
      }

      .lp-feature-hero p {
        max-width: 520px;
      }

      .lp-new-tag {
        position: absolute;
        top: 20px;
        right: 20px;
        font-family: var(--mono);
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 1.4px;
        color: #10130a;
        background: var(--acid);
        border-radius: 99px;
        padding: 3px 9px;
      }

      /* por qué photocut: comparación de dos columnas */
      .lp-compare {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .lp-compare-col {
        border-radius: 14px;
        padding: 22px 22px 24px;
        border: 1px solid var(--line);
      }

      .lp-compare-good {
        background: linear-gradient(160deg, var(--acid-soft), transparent 70%);
        border-color: color-mix(in srgb, var(--acid) 40%, var(--line));
      }

      .lp-compare-bad {
        background: linear-gradient(160deg, var(--coral-soft), transparent 70%);
        border-color: color-mix(in srgb, var(--coral) 35%, var(--line));
      }

      .lp-compare-col h3 {
        font-size: 15px;
        margin: 0 0 14px;
      }

      .lp-compare-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
      }

      .lp-compare-col li {
        display: flex;
        gap: 10px;
        align-items: baseline;
      }

      .lp-mark {
        font-family: var(--mono);
        font-weight: 700;
        flex-shrink: 0;
      }

      .lp-compare-good .lp-mark {
        color: var(--acid);
      }

      .lp-compare-bad .lp-mark {
        color: var(--coral);
      }

      /* cómo funciona: pasos numerados */
      .lp-steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .lp-step {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }

      .lp-step-n {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 700;
        color: var(--acid);
        border: 1px solid color-mix(in srgb, var(--acid) 45%, transparent);
        border-radius: 9px;
      }

      .lp-step strong {
        display: block;
        font-size: 15.5px;
        margin-bottom: 3px;
      }

      .lp-step p {
        margin: 0;
        font-size: 14px;
      }

      /* trust */
      .lp-trust-note {
        max-width: 640px;
        margin: 0 0 22px;
      }

      /* footer: guías + legales */
      .lp-footer {
        position: relative;
        z-index: 1;
        padding: 48px 0 56px;
        border-top: 1px solid var(--line);
      }

      .lp-guides h2 {
        font-size: 15px;
        margin: 0 0 14px;
      }

      .lp-guides-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px 24px;
        margin: 0 0 32px;
        padding: 0;
        list-style: none;
      }

      .lp-guides-grid li {
        font-size: 13.5px;
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px;
      }

      .lp-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 16px;
        font-size: 13px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
      }

      .lp-copyright {
        margin: 18px 0 0;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink-faint);
      }

      /* --------------------------------- desktop --------------------------------- */
      @media (min-width: 760px) {
        .lp-hero-grid {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 48px;
        }

        .lp-hero-copy {
          flex: 1;
          min-width: 0;
        }

        .lp-hero-visual {
          flex: 0 0 380px;
        }

        .lp-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        #lp-usecases .lp-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .lp-grid-4 {
          grid-template-columns: repeat(4, 1fr);
        }

        .lp-compare {
          grid-template-columns: 1fr 1fr;
        }

        .lp-steps {
          flex-direction: row;
        }

        .lp-step {
          flex: 1;
          flex-direction: column;
          gap: 12px;
        }

        .lp-guides-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #landing * {
          transition: none !important;
          animation: none !important;
        }
      }