/* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── VARIABLES ── */
    :root {
      --yellow:        #f8c93d;
      --purple:        #612096;
      --purple-dark:   #4a1570;
      --purple-shadow: #c694ed;
      --gray-light:    #ebe9eb;
      --gray-text:     #555;
      --dark:          #1F2937;
      --white:         #fff;
    }

    /* ── BASE ── */
    body {
      font-family: 'Quicksand', sans-serif;
      font-size: 16px;
      background-color: var(--white);
      color: #1a1a1a;
    }

    h1, h2, h3 { font-family: 'Anton', sans-serif; margin-top: 0; }
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
    h3 { font-size: 24px; }
    p, li, a { font-family: 'Quicksand', sans-serif; font-size: 18px; line-height: 1.5; }

    /* ── NAVBAR ── */
    .navbar {
      background-color: var(--yellow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6.25em;
      height: 100px;
    }
    .navbar img.logo { height: 60px; max-height: 60px; width: auto; padding: 0.4em 0; }
    .navbar .logo-text {
      font-family: 'Anton', sans-serif;
      font-size: 26px;
      color: #1a1a1a;
      text-decoration: none;
      display: none;
    }
    .navbar ul { list-style: none; display: flex; gap: 0.5em; }
    .navbar ul li a {
      text-decoration: none;
      color: #1a1a1a;
      font-weight: 700;
      padding: 0.5em 0.75em;
    }

    /* ── HERO ── */
    .hero {
      background-color: var(--yellow);
      padding: 3em 6.25em 4em;
      border-top: 2px solid rgba(0,0,0,0.06);
    }
    .hero h1 { margin-bottom: 0.4em; line-height: 1.1; }
    .hero p   { font-size: 20px; max-width: 560px; color: #2a2a2a; }

    /* ── TOOLS SECTION ── */
    .tools-section { padding: 4em 6.25em; background-color: var(--white); }
    .tools-section > h2 { margin-bottom: 1.25em; }
    .tools-grid { display: flex; gap: 2em; flex-wrap: wrap; }

    .tool-card {
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 2em;
      flex: 1;
      min-width: 260px;
      display: flex;
      flex-direction: column;
      gap: 0.75em;
      cursor: pointer;
      border: none;
      text-align: left;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .tool-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(97, 32, 150, 0.15);
    }

    /* ── BADGES ── */
    .badge {
      display: inline-block;
      font-family: 'Quicksand', sans-serif;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 100px;
      width: fit-content;
    }
    .badge-libre  { background-color: #d4edda; color: #1a6b2e; }
    .badge-taller { background-color: #fff3cd; color: #856404; }

    .tool-card h3 { color: var(--purple); margin-bottom: 0; }
    .tool-card p  { color: var(--gray-text); font-size: 16px; flex-grow: 1; }
    .tool-cta     { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px; color: var(--purple); }

    /* ── BUTTONS ── */
    .btn {
      display: inline-block;
      padding: 0.75em 1.75em;
      font-size: 1em;
      border: none;
      color: var(--white);
      background-color: var(--purple);
      box-shadow: 0 4px 12px var(--purple-shadow);
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      border-radius: 1em;
      transition: background-color 0.2s;
    }
    .btn:hover { background-color: var(--purple-dark); }

    .btn-outline {
      border-radius: 1em;
      padding: 0.75em 1.75em;
      font-size: 1em;
      border: 3px solid var(--yellow);
      color: var(--yellow);
      background-color: transparent;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      white-space: nowrap;
      transition: background-color 0.2s, color 0.2s;
    }
    .btn-outline:hover { background-color: var(--yellow); color: var(--purple); }

    .btn-sm {
      display: inline-block;
      padding: 0.5em 1.25em;
      font-size: 14px;
      border: none;
      color: var(--white);
      background-color: var(--purple);
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      border-radius: 0.75em;
      transition: background-color 0.2s;
    }
    .btn-sm:hover { background-color: var(--purple-dark); }

    .btn-ghost {
      display: inline-block;
      padding: 0.5em 1.25em;
      font-size: 14px;
      border: 2px solid var(--purple);
      color: var(--purple);
      background-color: transparent;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      border-radius: 0.75em;
      transition: background-color 0.2s, color 0.2s;
    }
    .btn-ghost:hover { background-color: var(--purple); color: white; }

    /* ── CTA SECTION ── */
    .cta-section {
      background-color: var(--purple);
      padding: 4em 6.25em;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3em;
    }
    .cta-section > div { max-width: 600px; }
    .cta-section h2 { color: var(--yellow); margin-bottom: 0.5em; }
    .cta-section p  { color: var(--gray-light); font-size: 18px; margin: 0; }

    /* ── FOOTER ── */
    footer {
      background-color: var(--dark);
      color: #F9FAF8;
      height: 52px;
      font-family: 'Quicksand', sans-serif;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ════════════════════════════════
       OVERLAYS
    ════════════════════════════════ */
    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--white);
      z-index: 1000;
      overflow-y: auto;
    }
    .overlay.active { display: block; }

    .overlay-topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: var(--yellow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1em 2em;
      gap: 1em;
    }

    .back-btn {
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #1a1a1a;
      background: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }

    .overlay-tool-name {
      font-family: 'Anton', sans-serif;
      font-size: 18px;
      white-space: nowrap;
    }

    .overlay-body {
      max-width: 780px;
      margin: 0 auto;
      padding: 2.5em 2em 4em;
    }

    .overlay-header {
      border-bottom: 2px solid var(--gray-light);
      padding-bottom: 1.5em;
      margin-bottom: 2em;
    }
    .overlay-header h1 { font-size: 36px; margin-bottom: 0.25em; }
    .overlay-header p  { color: var(--gray-text); font-size: 16px; }

    /* ── QPS card ── */
    .qps-display {
      border: 2px dashed #ccc;
      border-radius: 1em;
      padding: 3em 2em;
      text-align: center;
      margin: 1.5em 0;
      transition: opacity 0.3s ease;
    }
    .qps-display.fade { opacity: 0; }
    .qps-label {
      font-family: 'Anton', sans-serif;
      font-size: 16px;
      letter-spacing: 0.05em;
      color: #888;
      margin-bottom: 0.75em;
    }
    .qps-prompt {
      font-family: 'Quicksand', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1.35;
    }

    /* ── Guiding questions ── */
    .guiding-questions {
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 1.75em 2em;
      margin-top: 1.5em;
    }
    .guiding-questions h3 { font-size: 18px; margin-bottom: 1em; color: var(--purple); }
    .guiding-questions ul { list-style: none; }
    .guiding-questions li {
      font-size: 16px;
      color: #333;
      padding: 0.6em 0 0.6em 1.5em;
      border-bottom: 1px solid #d8d6d8;
      position: relative;
      line-height: 1.4;
    }
    .guiding-questions li:last-child { border-bottom: none; }
    .guiding-questions li::before {
      content: "→";
      position: absolute;
      left: 0;
      color: var(--purple);
      font-weight: 700;
    }

    /* ── Promo banner ── */
    .promo-banner {
      background-color: #fff3cd;
      border: 1px solid #f0d060;
      border-radius: 0.75em;
      padding: 1em 1.5em;
      font-size: 15px;
      color: #6d5000;
      margin-top: 1.5em;
      line-height: 1.5;
    }
    .promo-banner a { font-size: 15px; color: #6d5000; font-weight: 700; }

    /* ── Cosa Futura ── */
    .cf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25em;
      margin: 1.5em 0;
    }
    .cf-card { background-color: var(--gray-light); border-radius: 1em; padding: 1.5em; }
    .cf-card-label {
      font-family: 'Anton', sans-serif;
      font-size: 14px;
      letter-spacing: 0.06em;
      color: var(--purple);
      margin-bottom: 0.5em;
    }
    .cf-card-value {
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      min-height: 1.5em;
    }
    .cf-explanation {
      border-left: 4px solid var(--purple);
      background-color: #faf9fb;
      padding: 1.25em 1.5em;
      border-radius: 0 0.75em 0.75em 0;
      font-size: 15px;
      line-height: 1.65;
      color: var(--gray-text);
      margin-top: 1em;
    }
    .cf-footer-note {
      margin-top: 2.5em;
      font-size: 13px;
      color: #aaa;
      text-align: center;
      line-height: 1.7;
    }
    .cf-footer-note a { font-size: 13px; color: #aaa; }

    /* ── Book Recommender ── */
    .rec-filters {
      margin: 1.5em 0;
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
    .rec-filter-group { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; }
    .rec-filter-label {
      font-family: 'Quicksand', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-text);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      min-width: 80px;
    }
    .filter-tag {
      padding: 0.35em 0.9em;
      border-radius: 100px;
      font-family: 'Quicksand', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid var(--gray-light);
      background-color: var(--gray-light);
      color: #444;
      transition: all 0.15s ease;
    }
    .filter-tag:hover { border-color: var(--purple); color: var(--purple); }
    .filter-tag.active { background-color: var(--purple); border-color: var(--purple); color: white; }

    .book-card {
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 2em;
      margin: 1.5em 0;
      transition: opacity 0.3s ease;
    }
    .book-card.fade { opacity: 0; }
    .book-card-genre {
      font-family: 'Quicksand', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: var(--purple);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 0.5em;
    }
    .book-card-origin {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Quicksand', sans-serif;
      padding: 3px 10px;
      border-radius: 100px;
      background-color: #e8d5f5;
      color: var(--purple);
      margin-left: 0.5em;
      vertical-align: middle;
    }
    .book-card-title {
      font-family: 'Anton', sans-serif;
      font-size: 26px;
      color: #1a1a1a;
      margin-bottom: 0.25em;
      line-height: 1.2;
    }
    .book-card-author {
      font-family: 'Quicksand', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--gray-text);
      margin-bottom: 1em;
    }
    .book-card-desc {
      font-family: 'Quicksand', sans-serif;
      font-size: 16px;
      color: #333;
      line-height: 1.55;
    }
    .rec-no-results {
      text-align: center;
      padding: 2em;
      color: var(--gray-text);
      font-style: italic;
      display: none;
    }

    /* ── Plantilla form ── */
    .plantilla-form {
      display: flex;
      flex-direction: column;
      gap: 1.25em;
      margin-bottom: 2em;
    }
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 0.4em;
    }
    .field-label {
      font-family: 'Quicksand', sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--purple);
    }
    .field-context {
      font-family: 'Quicksand', sans-serif;
      font-size: 15px;
      color: var(--gray-text);
      font-style: italic;
      margin-bottom: 0.2em;
    }
    .plantilla-input,
    .plantilla-textarea {
      width: 100%;
      padding: 0.7em 1em;
      font-size: 16px;
      font-family: 'Quicksand', sans-serif;
      border: 2px solid #d8d6d8;
      border-radius: 0.75em;
      outline: none;
      transition: border-color 0.2s;
      color: #1a1a1a;
      background: white;
    }
    .plantilla-input:focus,
    .plantilla-textarea:focus { border-color: var(--purple); }
    .plantilla-textarea { resize: vertical; min-height: 80px; }

    .inline-fields {
      display: flex;
      gap: 1em;
      flex-wrap: wrap;
    }
    .inline-fields .field-group { flex: 1; min-width: 140px; }

    .plantilla-actions {
      display: flex;
      gap: 1em;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 2em;
    }

    .historia-resultado {
      background: linear-gradient(135deg, #faf9fb 0%, #f0eaf7 100%);
      border: 2px solid var(--purple-shadow);
      border-radius: 1em;
      padding: 2.5em 2em;
      margin-top: 1em;
    }
    .historia-titulo {
      font-family: 'Anton', sans-serif;
      font-size: 28px;
      color: var(--purple);
      margin-bottom: 1.25em;
    }
    .historia-texto {
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      line-height: 1.75;
      color: #1a1a1a;
    }
    .historia-texto em {
      color: var(--purple);
      font-style: normal;
      font-weight: 700;
    }
    .historia-firma {
      margin-top: 2em;
      font-size: 13px;
      color: #aaa;
      text-align: right;
      font-style: italic;
    }
    .historia-actions {
      display: flex;
      gap: 1em;
      margin-top: 1.5em;
      flex-wrap: wrap;
    }

    /* ── Leer Futuras (placeholder) ── */
    .fragmento-item {
      border: 2px solid var(--gray-light);
      border-radius: 1em;
      overflow: hidden;
      margin-bottom: 1.5em;
    }
    .fragmento-header {
      background-color: var(--gray-light);
      padding: 1em 1.5em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    .fragmento-header h3 {
      font-size: 18px;
      color: var(--purple);
      margin: 0;
    }
    .fragmento-chevron {
      font-size: 18px;
      transition: transform 0.2s;
    }
    .fragmento-header.open .fragmento-chevron { transform: rotate(180deg); }
    .fragmento-body {
      padding: 1.5em;
      display: none;
    }
    .fragmento-body.open { display: block; }
    .fragmento-texto {
      font-size: 16px;
      line-height: 1.75;
      color: #333;
      margin-bottom: 1.25em;
      white-space: pre-line;
    }
    .fragmento-preguntas h4 {
      font-family: 'Anton', sans-serif;
      font-size: 16px;
      color: var(--purple);
      margin-bottom: 0.75em;
    }
    .fragmento-preguntas ul { list-style: none; }
    .fragmento-preguntas li {
      font-size: 15px;
      color: #444;
      padding: 0.5em 0 0.5em 1.5em;
      border-bottom: 1px solid var(--gray-light);
      position: relative;
    }
    .fragmento-preguntas li:last-child { border-bottom: none; }
    .fragmento-preguntas li::before { content: "→"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }

    .placeholder-notice {
      background-color: #fff8e1;
      border: 2px dashed #f0c040;
      border-radius: 1em;
      padding: 2em;
      text-align: center;
      color: #6d5000;
      font-size: 15px;
      line-height: 1.6;
    }

    /* ── Password ── */
    .pwd-container {
      max-width: 420px;
      margin: 4em auto;
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 2.5em 2em;
      text-align: center;
    }
    .pwd-lock  { font-size: 52px; margin-bottom: 0.5em; }
    .pwd-container h2 { font-size: 28px; margin-bottom: 0.4em; }
    .pwd-container p  { font-size: 16px; color: var(--gray-text); margin-bottom: 1.5em; }
    .pwd-input {
      width: 100%;
      padding: 0.8em 1em;
      font-size: 16px;
      font-family: 'Quicksand', sans-serif;
      border: 2px solid #ccc;
      border-radius: 0.75em;
      margin-bottom: 0.75em;
      outline: none;
      transition: border-color 0.2s;
    }
    .pwd-input:focus { border-color: var(--purple); }
    .pwd-error { color: #c62828; font-size: 14px; margin-bottom: 0.75em; display: none; }

    /* ── WB Questions Card Picker ── */
    .wb-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5em;
      margin: 1.5em 0;
    }
    .wb-cat-btn {
      padding: 0.4em 1em;
      border-radius: 100px;
      font-family: 'Quicksand', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid var(--gray-light);
      background-color: var(--gray-light);
      color: #444;
      transition: all 0.15s ease;
    }
    .wb-cat-btn:hover { border-color: var(--purple); color: var(--purple); }
    .wb-cat-btn.active { background-color: var(--purple); border-color: var(--purple); color: white; }
    .wb-card {
      border: 2px dashed #ccc;
      border-radius: 1em;
      padding: 3em 2em;
      text-align: center;
      margin: 1.5em 0;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75em;
      transition: opacity 0.3s ease;
    }
    .wb-card.fade { opacity: 0; }
    .wb-card-cat {
      font-family: 'Anton', sans-serif;
      font-size: 13px;
      letter-spacing: 0.08em;
      color: var(--purple);
      text-transform: uppercase;
    }
    .wb-card-question {
      font-family: 'Quicksand', sans-serif;
      font-size: 22px;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1.4;
      max-width: 580px;
    }
    .wb-counter { font-size: 13px; color: #aaa; font-style: italic; }

    /* ── Generador de personajes ── */
    .personaje-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25em;
      margin: 1.5em 0;
    }
    .personaje-card { background-color: var(--gray-light); border-radius: 1em; padding: 1.5em; }
    .personaje-label {
      font-family: 'Anton', sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      color: var(--purple);
      margin-bottom: 0.5em;
      text-transform: uppercase;
    }
    .personaje-value {
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      min-height: 1.5em;
      line-height: 1.4;
    }
    .personaje-full-card {
      background: linear-gradient(135deg, #faf4ff 0%, #f0eaf7 100%);
      border: 2px solid var(--purple-shadow);
      border-radius: 1em;
      padding: 2em;
      margin-top: 0.5em;
      grid-column: 1 / -1;
    }

    /* ── Ficha de mundo ── */
    .ficha-section {
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 1.75em 2em;
      margin-bottom: 1.25em;
    }
    .ficha-section-title {
      font-family: 'Anton', sans-serif;
      font-size: 16px;
      color: var(--purple);
      letter-spacing: 0.04em;
      margin-bottom: 1em;
      border-bottom: 2px solid #d8d6d8;
      padding-bottom: 0.5em;
    }
    .ficha-field { margin-bottom: 0.9em; }
    .ficha-field:last-child { margin-bottom: 0; }
    .ficha-label {
      font-family: 'Quicksand', sans-serif;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--purple);
      margin-bottom: 0.3em;
      display: block;
    }
    .ficha-hint { font-size: 13px; color: #999; font-style: italic; margin-bottom: 0.3em; }
    .ficha-input, .ficha-textarea {
      width: 100%;
      padding: 0.65em 0.9em;
      font-size: 15px;
      font-family: 'Quicksand', sans-serif;
      border: 2px solid #d8d6d8;
      border-radius: 0.6em;
      outline: none;
      transition: border-color 0.2s;
      color: #1a1a1a;
      background: white;
    }
    .ficha-input:focus, .ficha-textarea:focus { border-color: var(--purple); }
    .ficha-textarea { resize: vertical; min-height: 65px; }
    .ficha-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
    .ficha-actions { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 2em; }

    /* ── Árbol de consecuencias ── */
    .arbol-input-area {
      background-color: var(--gray-light);
      border-radius: 1em;
      padding: 1.75em 2em;
      margin-bottom: 1.5em;
    }
    .arbol-rule-label {
      font-family: 'Anton', sans-serif;
      font-size: 14px;
      color: var(--purple);
      letter-spacing: 0.05em;
      margin-bottom: 0.75em;
      display: block;
    }
    .arbol-rule-input {
      width: 100%;
      padding: 0.75em 1em;
      font-size: 17px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      border: 2px solid #d8d6d8;
      border-radius: 0.75em;
      outline: none;
      transition: border-color 0.2s;
      background: white;
    }
    .arbol-rule-input:focus { border-color: var(--purple); }
    .arbol-rule-box {
      background: linear-gradient(135deg, #faf4ff 0%, #f0eaf7 100%);
      border: 2px solid var(--purple-shadow);
      border-radius: 1em;
      padding: 1.25em 2em;
      margin: 1.5em 0;
      text-align: center;
    }
    .arbol-rule-display {
      font-family: 'Quicksand', sans-serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--purple);
      font-style: italic;
    }
    .arbol-layer {
      border-left: 4px solid var(--purple);
      background-color: #faf9fb;
      border-radius: 0 1em 1em 0;
      padding: 1.25em 1.5em;
      margin-bottom: 1em;
    }
    .arbol-layer-title {
      font-family: 'Anton', sans-serif;
      font-size: 18px;
      color: var(--purple);
      margin-bottom: 0.5em;
    }
    .arbol-layer-subtitle {
      font-size: 13px;
      color: #999;
      font-style: italic;
      margin-bottom: 0.75em;
    }
    .arbol-layer-qs { list-style: none; margin-bottom: 0.75em; }
    .arbol-layer-qs li {
      font-size: 15px;
      color: #444;
      padding: 0.4em 0 0.4em 1.5em;
      border-bottom: 1px solid #e8e6e8;
      position: relative;
      line-height: 1.4;
    }
    .arbol-layer-qs li:last-child { border-bottom: none; }
    .arbol-layer-qs li::before { content: "→"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }
    .arbol-layer-textarea {
      width: 100%;
      padding: 0.65em 0.9em;
      font-size: 15px;
      font-family: 'Quicksand', sans-serif;
      border: 2px solid #d8d6d8;
      border-radius: 0.6em;
      outline: none;
      transition: border-color 0.2s;
      background: white;
      resize: vertical;
      min-height: 65px;
    }
    .arbol-layer-textarea:focus { border-color: var(--purple); }
    .arbol-connector { text-align: center; color: var(--purple-shadow); font-size: 24px; margin: 0.1em 0; }
    .arbol-result-area { display: none; }

    /* ── RESPONSIVE ── */
    @media screen and (max-width: 768px) {
      .navbar        { padding: 0 2em; }
      .navbar ul     { display: none; }
      .hero          { padding: 2.5em 2em; }
      .hero h1       { font-size: 36px; }
      .tools-section { padding: 2.5em 2em; }
      .tools-grid    { flex-direction: column; }
      .cta-section   { padding: 2.5em 2em; flex-direction: column; align-items: flex-start; }
      .overlay-body  { padding: 1.5em 1.25em 3em; }
      .cf-grid       { grid-template-columns: 1fr; }
      .overlay-topbar { padding: 0.75em 1.25em; }
      .inline-fields { flex-direction: column; }
      .plantilla-actions { flex-direction: column; }
      .historia-actions  { flex-direction: column; }
      .personaje-grid { grid-template-columns: 1fr; }
      .ficha-grid-2   { grid-template-columns: 1fr; }
    }