/* ==========================================================================
       VARIABLES Y PALETA DE COLORES
       ========================================================================== */
    :root {
      --terracota: #B84E2E;
      --terracota-hover: #9E3C1F;
      --petroleo: #264B4A;
      --petroleo-oscuro: #1E3A3A;
      --petroleo-suave: #3A5C5A;
      --hueso: #F5EFE7;
      --hueso-suave: #E8DFD3;
      --hueso-barra: rgba(253, 250, 245, 0.85);
      --arena: #D9C6AF;

      --fondo: var(--hueso);
      --superficie: #FFFFFF;
      --superficie-suave: #EDE6DD;

      --texto: var(--petroleo-oscuro);
      --texto-suave: #576564;

      --linea: #E2D7C8;
      --linea-fuerte: #C3B4A2;

      --tono: var(--terracota);
      --tono-suave: #FBECE8;

      --alerta: #B8762D;
      --alerta-suave: #FAF0E1;

      --exito: #2D7A58;
      --exito-suave: #E5F3EC;

      --peligro: #B84E2E;
      --peligro-suave: #FBECE8;

      --fuente-editorial: 'Lora', Georgia, serif;
      --fuente-titulos: 'Poppins', system-ui, -apple-system, sans-serif;
      --fuente: 'Inter', system-ui, -apple-system, sans-serif;
    }

    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

    body {
      margin: 0;
      background: var(--fondo);
      color: var(--texto);
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.6;
    }

    .contenedor {
      max-width: 860px;
      margin: 0 auto;
      padding: 32px 24px 80px;
    }

    /* ==========================================================================
       5. FADE-IN AL SCROLL (IntersectionObserver)
       ========================================================================== */
    .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      will-change: opacity, transform;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ==========================================================================
       4. SIDEBAR (navegación lateral fija en desktop, panel deslizante en mobile)
       ========================================================================== */

    /* Layout general: sidebar + columna de contenido */
    .app-layout {
      display: flex;
      align-items: flex-start;
      min-height: 100vh;
    }
    .contenido-principal {
      flex: 1 1 auto;
      min-width: 0; /* evita que el contenido empuje el ancho del layout */
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .sidebar-backdrop {
      display: none;
    }

    .sidebar {
      flex: 0 0 210px;
      width: 210px;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      background: var(--superficie);
      border-right: 1px solid var(--linea);
      padding: 22px 14px;
      overflow-y: auto;
    }

    .sidebar-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 6px;
      margin-bottom: 6px;
      text-decoration: none;
    }
    .sidebar-logo-icono {
      width: 34px;
      height: 34px;
      flex: none;
      object-fit: contain;
      display: block;
    }
    .sidebar-logo-texto {
      font-family: var(--fuente-titulos);
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--petroleo);
      line-height: 1.1;
      white-space: nowrap;
    }
    .logo-texto-acento { color: var(--terracota); }

    .badge-beta {
      display: inline-block;
      margin: 2px 0 14px 8px;
      padding: 3px 9px;
      border-radius: 999px;
      background: var(--arena);
      color: var(--petroleo-oscuro);
      font-family: var(--fuente);
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1 1 auto;
    }

    .sidebar-grupo-titulo {
      margin: 18px 0 6px;
      padding: 0 10px;
      font-family: var(--fuente);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--texto-suave);
    }
    .sidebar-nav > .sidebar-grupo-titulo:first-child { margin-top: 6px; }

    .sidebar-item {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      padding: 9px 13px;
      border: 0;
      border-left: 3px solid transparent;
      border-radius: 10px;
      background: none;
      color: var(--texto-suave);
      text-decoration: none;
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 0.75rem;
      text-align: left;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    .sidebar-item svg {
      width: 19px;
      height: 19px;
      flex: none;
      stroke-width: 1.8;
      transition: color 0.3s ease;
    }
    .sidebar-item:hover {
      background: rgba(38, 75, 74, 0.14);
      color: var(--terracota);
    }
    .sidebar-item:hover svg { color: var(--terracota); }

    /* Marca en qué herramienta/página está el usuario, con acento terracota */
    .sidebar-item.activo {
      background: var(--arena);
      border-left-color: var(--terracota);
      color: var(--petroleo-oscuro);
      font-weight: 600;
      cursor: default;
    }
    .sidebar-item.activo svg { color: var(--terracota); }
    .sidebar-item.activo:hover {
      background: var(--arena);
      color: var(--petroleo-oscuro);
    }
    .sidebar-item.activo:hover svg { color: var(--terracota); }

    .sidebar-bottom {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--linea);
    }

    /* Botón hamburguesa (solo visible en mobile, ver media query) */
    .btn-menu-movil {
      display: none;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      flex: none;
      padding: 0;
      border: 0;
      background: none;
      color: var(--petroleo);
      cursor: pointer;
    }
    .btn-menu-movil svg { width: 22px; height: 22px; }
    .btn-menu-movil .icono-cerrar { display: none; }
    .btn-menu-movil[aria-expanded="true"] .icono-hamburguesa { display: none; }
    .btn-menu-movil[aria-expanded="true"] .icono-cerrar { display: block; }

    /* Barra superior chica, solo visible en mobile (ver media query) */
    .topbar-movil {
      display: none;
      position: sticky;
      top: 0;
      z-index: 100;
      align-items: center;
      gap: 12px;
      padding: 12px 20px;
      background: rgba(253, 250, 245, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(38, 75, 74, 0.08);
    }
    .topbar-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
    }
    .topbar-logo img { width: 28px; height: 28px; flex: none; object-fit: contain; }
    .topbar-logo span {
      font-family: var(--fuente-titulos);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--petroleo);
    }

    /* ==========================================================================
       6. HERO & TÍTULO CON ANIMACIÓN DE ENTRADA
       ========================================================================== */
    .hero-marca {
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      margin: 0 0 18px;
      font-family: var(--fuente-editorial);
      font-style: italic;
      font-weight: 600;
      font-size: 1.4rem;
      letter-spacing: 0.01em;
      color: var(--petroleo);
    }
    .hero-marca-acento { color: var(--terracota); }

    .hero-seccion {
      text-align: center;
      margin: 48px 0 36px;
    }

    h1.titulo-principal {
      margin: 0 0 16px;
      font-family: var(--fuente-editorial);
      color: var(--petroleo);
      font-size: clamp(2.4rem, 5.5vw, 3.5rem);
      line-height: 1.15;
      letter-spacing: -0.01em;
      font-weight: 400;
      
      /* Animación suave de entrada al cargar la página */
      animation: entradaHero 0.8s ease forwards;
    }

    @keyframes entradaHero {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .subtitulo {
      max-width: 58ch;
      margin: 0 auto;
      font-size: 1.15rem;
      line-height: 1.5;
      color: var(--texto-suave);
      font-weight: 500;
    }

    /* ==========================================================================
       TARJETAS Y CUADRO DE ENTRADA
       ========================================================================== */
    .tarjeta {
      background: var(--superficie);
      border: 1px solid var(--linea);
      border-radius: 16px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(38, 75, 74, 0.06),
        0 14px 28px rgba(38, 75, 74, 0.08);
    }

    .modos-contenedor {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 16px;
    }

    .modos {
      display: inline-flex;
      gap: 6px;
      padding: 5px;
      border-radius: 12px;
      background: var(--superficie-suave);
    }

    .modo { position: relative; }
    .modo input {
      position: absolute;
      opacity: 0;
      inset: 0;
      margin: 0;
      cursor: pointer;
    }

    .modo span {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 20px;
      border-radius: 9px;
      font-family: var(--fuente);
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--texto-suave);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .modo input:checked + span {
      background: var(--superficie);
      color: var(--petroleo);
      font-weight: 500;
      box-shadow: 0 2px 6px rgba(38, 75, 74, 0.08);
    }

    .modo:hover span {
      background: rgba(38, 75, 74, 0.08);
      color: var(--petroleo);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 4px 10px rgba(38, 75, 74, 0.12);
    }
    .modo input:checked:hover + span {
      background: var(--superficie);
    }

    .demo-etiqueta { text-align: center; margin-bottom: 14px; }
    .demo-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: 999px;
      background: var(--arena);
      color: var(--petroleo-oscuro);
      font-family: var(--fuente);
      font-size: 0.82rem;
      font-weight: 500;
    }
    .demo-seccion { margin-bottom: 60px; }
    .demo-seccion .frases { margin-top: 14px; }
    .demo-nota { margin: 16px 0 0; font-size: 0.8rem; color: var(--texto-suave); text-align: center; }

    .demo-mini-editor { padding: 22px 24px; text-align: left; }
    .demo-texto-simulado {
      min-height: 84px;
      margin: 8px 0 18px;
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--texto);
    }
    .demo-cursor {
      display: inline-block;
      width: 2px;
      height: 1.1em;
      margin-left: 1px;
      background: var(--petroleo);
      vertical-align: -0.15em;
      animation: demo-parpadeo 0.9s steps(1) infinite;
    }
    @keyframes demo-parpadeo { 50% { opacity: 0; } }

    .demo-play-btn { width: 100%; }
    .demo-play-btn:disabled { opacity: 0.6; cursor: progress; }

    .demo-cargando {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
      color: var(--texto-suave);
      font-size: 0.92rem;
    }

    .demo-reiniciar {
      display: block;
      margin: 14px auto 0;
    }

    .caja-escritura {
      position: relative;
      background: var(--superficie);
      border: 1.5px solid var(--linea);
      border-radius: 14px;
      box-shadow: 0 2px 8px rgba(38, 75, 74, 0.06);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .caja-escritura:hover {
      border-color: var(--linea-fuerte);
      box-shadow: 0 4px 14px rgba(38, 75, 74, 0.1);
    }

    .caja-escritura:focus-within {
      border-color: var(--terracota);
      box-shadow: 0 0 0 6px rgba(184, 78, 46, 0.16);
    }

    .entrada {
      margin-top: 40px;
      padding: 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .entrada:hover {
      border-color: var(--linea-fuerte);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 12px 24px rgba(38, 75, 74, 0.1);
    }

    textarea {
      display: block;
      width: 100%;
      min-height: 220px;
      padding: 18px 18px 36px 18px;
      resize: vertical;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--texto);
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 1.02rem;
      line-height: 1.65;
    }

    #texto { min-height: 450px; }

    textarea::placeholder { color: #A0988C; }

    .textarea-pie {
      position: absolute;
      bottom: 12px;
      right: 18px;
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: none;
    }

    .btn-limpiar {
      pointer-events: auto;
      border: 1px solid var(--linea-fuerte);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      color: var(--texto-suave);
      font-family: var(--fuente);
      font-size: 0.78rem;
      font-weight: 500;
      padding: 10px 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .btn-limpiar:hover {
      color: var(--peligro);
      border-color: var(--peligro);
      background: var(--peligro-suave);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.08), 0 4px 12px rgba(38, 75, 74, 0.15);
    }

    .contador-box {
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--texto-suave);
      background: rgba(255, 255, 255, 0.9);
      padding: 2px 8px;
      border-radius: 6px;
    }

    #contador.excedido { color: var(--peligro); font-weight: 600; }

    /* 3. BOTONES DE EJEMPLO CON ELEVACIÓN */
    .ejemplos-seccion {
      margin-top: 18px;
    }

    .ejemplos-fila-superior {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
    }

    .ejemplos-titulo {
      display: block;
      font-size: 0.88rem;
      font-family: var(--fuente);
      font-weight: 400;
      color: var(--texto-suave);
    }

    .ejemplos-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .ejemplos-grid .chip {
      flex: 1 1 140px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 10px;
      background: var(--hueso);
      color: var(--petroleo);
      font-family: var(--fuente);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s ease;
    }

    .chip:hover {
      background: var(--arena);
      border-color: var(--petroleo);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.08), 0 4px 12px rgba(38, 75, 74, 0.15);
    }

    /* Chips oscuros: los 3 ejemplos (IA / humano / dudoso) */
    .chip-oscuro {
      background: rgba(38, 75, 74, 0.08);
      color: var(--petroleo);
      border-color: rgba(38, 75, 74, 0.2);
    }

    .chip-oscuro:hover {
      background: rgba(38, 75, 74, 0.15);
      border-color: var(--petroleo);
      color: var(--petroleo);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.08), 0 6px 14px rgba(38, 75, 74, 0.12);
    }

    /* Subida de archivos */
    .zona {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 230px;
      padding: 28px 20px;
      border: 2px dashed var(--linea-fuerte);
      border-radius: 14px;
      background: var(--hueso);
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .zona:hover, .zona.arrastrando {
      border-color: var(--terracota);
      background: var(--superficie-suave);
      box-shadow: 0 2px 8px rgba(38, 75, 74, 0.08);
    }

    .zona input {
      position: absolute;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .zona-icono {
      color: var(--terracota);
      margin-bottom: 4px;
    }

    .zona-titulo { font-weight: 600; color: var(--petroleo); }
    .zona-detalle { font-size: 0.88rem; color: var(--texto-suave); }

    .archivo-elegido {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 12px;
      background: var(--hueso);
    }

    .archivo-tipo {
      flex: none;
      min-width: 52px;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--petroleo);
      color: #FFF;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-align: center;
    }

    .archivo-datos { flex: 1; min-width: 0; }
    .archivo-nombre { margin: 0; font-weight: 600; color: var(--petroleo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .archivo-detalle { margin: 0; font-size: 0.85rem; color: var(--texto-suave); }

    .enlace-boton {
      background: none;
      border: 0;
      padding: 0;
      
      color: var(--terracota);
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .enlace-boton:hover { color: var(--terracota-hover); }

    /* 3. BOTÓN PRINCIPAL "ANALIZAR TEXTO" */
    .accion-contenedor {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    /* ==========================================================================
       MODAL DE AUTENTICACIÓN (Supabase)
       ========================================================================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(34, 30, 24, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 200;
    }
    .modal-overlay[hidden] { display: none; }

    .modal-tarjeta {
      position: relative;
      width: 100%;
      max-width: 380px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 32px 28px;
      text-align: left;
    }

    .modal-cerrar {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 8px;
      background: none;
      color: var(--texto-suave);
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
    }
    .modal-cerrar:hover { background: rgba(38, 75, 74, 0.08); color: var(--petroleo); }

    .modal-titulo {
      margin: 0 0 20px;
      font-family: var(--fuente-titulos);
      font-size: 1.3rem;
      color: var(--petroleo);
      text-align: center;
    }

    .boton-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 12px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 12px;
      background: var(--superficie);
      color: var(--texto);
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .boton-google svg { width: 20px; height: 20px; flex: none; }
    .boton-google:hover:not(:disabled) {
      border-color: var(--petroleo);
      background: var(--superficie-suave);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 6px 14px rgba(38, 75, 74, 0.12);
    }
    .boton-google:active:not(:disabled) { transform: translateY(0); }
    .boton-google:disabled { opacity: 0.7; cursor: progress; }

    .modal-separador {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px 0;
      color: var(--texto-suave);
      font-size: 0.8rem;
    }
    .modal-separador::before,
    .modal-separador::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--linea);
    }

    .modal-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 20px;
      padding: 3px;
      border-radius: 10px;
      background: var(--superficie-suave);
    }
    .modal-tab {
      flex: 1;
      padding: 9px;
      border: 0;
      border-radius: 8px;
      background: none;
      font-family: var(--fuente);
      font-weight: 500;
      font-size: 0.88rem;
      color: var(--texto-suave);
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
    .modal-tab.activo {
      background: var(--superficie);
      color: var(--petroleo);
      box-shadow: 0 2px 6px rgba(38, 75, 74, 0.08);
    }
    .modal-tab:not(.activo):hover {
      background: rgba(38, 75, 74, 0.08);
      color: var(--petroleo);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 4px 10px rgba(38, 75, 74, 0.1);
    }

    .campo-password-wrap { position: relative; }
    .campo-password-wrap input { padding-right: 42px; }
    .btn-toggle-password {
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: none;
      color: var(--texto-suave);
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease;
    }
    .btn-toggle-password:hover { color: var(--petroleo); background: rgba(38, 75, 74, 0.08); }
    .btn-toggle-password svg { width: 19px; height: 19px; }

    .modal-tarjeta .campo { margin-bottom: 14px; }
    .modal-tarjeta input[type="email"],
    .modal-tarjeta input[type="password"] {
      width: 100%;
      padding: 11px 13px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 10px;
      background: var(--superficie);
      color: var(--texto);
      font-family: var(--fuente);
      font-size: 0.95rem;
    }
    .modal-tarjeta input:focus {
      outline: none;
      border-color: var(--petroleo);
      box-shadow: 0 0 0 3px rgba(38, 75, 74, 0.12);
    }

    .modal-error {
      margin: 0 0 14px;
      padding: 10px 12px;
      border-radius: 8px;
      background: var(--peligro-suave);
      color: var(--peligro);
      font-size: 0.85rem;
    }

    .modal-nota {
      margin: 16px 0 0;
      font-size: 0.78rem;
      color: var(--texto-suave);
      text-align: center;
    }

    .modal-cuenta-email {
      margin: 0 0 20px;
      text-align: center;
      color: var(--texto-suave);
      font-size: 0.95rem;
      word-break: break-all;
    }

    @media (max-width: 460px) {
      .modal-tarjeta { padding: 26px 20px; }
    }

    .boton-principal {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 36px;
      border: 0;
      border-radius: 12px;
      background: var(--terracota);
      color: #FFF;
      font-family: var(--fuente);
      font-size: 1.05rem;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(184, 78, 46, 0.25);
      
      /* Transición funcional suave */
      transition: all 0.3s ease;
    }

    .boton-principal:hover:not(:disabled) {
      background: var(--terracota-hover);
      box-shadow: 0 2px 6px rgba(184, 78, 46, 0.2), 0 8px 18px rgba(184, 78, 46, 0.3);
    }

    .boton-principal:active:not(:disabled) { transform: translateY(0); }
    .boton-principal:disabled { opacity: 0.75; cursor: progress; }

    .spinner {
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: #FFF;
      border-radius: 50%;
      animation: girar .7s linear infinite;
    }
    @keyframes girar { to { transform: rotate(360deg); } }

    /* Aviso de privacidad */
    .privacidad-caja {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 20px;
      padding: 14px 18px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 12px;
      background: var(--superficie);
      color: var(--petroleo-oscuro);
    }
    .privacidad-caja svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--terracota); }
    .privacidad-caja strong { display: block; font-family: var(--fuente); font-weight: 500; color: var(--petroleo); font-size: 0.95rem; }
    .privacidad-caja span { display: block; font-size: 0.88rem; color: var(--texto-suave); }

    /* Estado de carga y errores */
    .estado {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      padding: 16px;
      border-radius: 12px;
      background: var(--superficie);
      color: var(--petroleo);
      font-weight: 500;
    }
    .estado .spinner { border-color: var(--linea-fuerte); border-top-color: var(--terracota); }

    .error {
      margin-top: 24px;
      padding: 16px 20px;
      border: 1px solid #EBC3B9;
      border-left: 5px solid var(--peligro);
      border-radius: 12px;
      background: var(--peligro-suave);
      color: #6E2A1E;
    }
    .error strong { display: block; margin-bottom: 2px; font-weight: 600; }

    [hidden] { display: none !important; }

    /* ==========================================================================
       RESULTADOS Y TARJETA
       ========================================================================== */
    #resultados { margin-top: 40px; outline: none; }

    [data-nivel="alto"], [data-nivel="medio-alto"] { --tono: var(--exito); --tono-suave: var(--exito-suave); }
    [data-nivel="medio"] { --tono: var(--alerta); --tono-suave: var(--alerta-suave); }
    [data-nivel="bajo"]  { --tono: var(--peligro); --tono-suave: var(--peligro-suave); }

    .resultado-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
    }

    @media (min-width: 680px) {
      .resultado-grid { grid-template-columns: 220px 1fr; }
    }

    .puntaje-tarjeta {
      padding: 28px 24px;
    }

    .col-puntaje {
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right: 0;
      padding-right: 0;
    }

    @media (min-width: 680px) {
      .col-puntaje {
        border-right: 1px solid var(--linea);
        padding-right: 24px;
      }
    }

    .puntaje-etiqueta {
      margin: 0 0 6px;
      font-family: var(--fuente);
      font-size: 0.95rem;
      font-weight: 400;
      color: var(--texto-suave);
    }

    .puntaje-fila {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 8px;
    }

    .puntaje {
      font-family: var(--fuente-editorial);
      font-size: clamp(3.5rem, 8vw, 4.5rem);
      line-height: 1;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--tono);
      font-variant-numeric: tabular-nums;
    }

    .puntaje-max {
      font-size: 1.2rem;
      color: var(--texto-suave);
      font-weight: 500;
    }

    .col-explicacion {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .veredicto {
      display: inline-block;
      align-self: flex-start;
      margin: 0 0 16px 0;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--tono-suave);
      color: var(--tono);
      font-family: var(--fuente);
      font-size: 1rem;
      font-weight: 500;
    }

    .medidor { position: relative; height: 10px; margin: 8px 0; }
    .medidor-pista {
      position: absolute; inset: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--peligro) 0%, var(--alerta) 50%, var(--exito) 100%);
      opacity: 0.85;
    }
    .medidor-marca {
      position: absolute;
      top: 50%; left: 0;
      width: 20px; height: 20px;
      margin: -10px 0 0 -10px;
      border: 3px solid #FFF;
      border-radius: 50%;
      background: var(--tono);
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      transition: left 1s cubic-bezier(.16, 1, .3, 1);
    }

    .medidor-escala {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 0.8rem;
      font-family: var(--fuente);
      font-weight: 400;
    }
    .medidor-escala span:first-child { color: var(--peligro); }
    .medidor-escala span:last-child { color: var(--exito); }

    .aviso {
      margin: 14px 0 0;
      font-size: 0.88rem;
      color: var(--texto-suave);
      line-height: 1.45;
    }

    /* Frases a revisar */
    .titulo-seccion {
      margin: 40px 0 6px;
      font-family: var(--fuente-titulos);
      color: var(--petroleo);
      font-size: 1.35rem;
      font-weight: 400;
      letter-spacing: -0.01em;
    }
    .titulo-seccion-detalle { margin: 0 0 18px; color: var(--texto-suave); font-size: 0.95rem; }

    .frases { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
    .frase { padding: 22px; }

    .cita {
      margin: 0 0 16px;
      padding: 12px 16px;
      border-left: 3px solid var(--terracota);
      background: var(--hueso);
      border-radius: 0 10px 10px 0;
      font-size: 1.02rem;
      color: var(--petroleo-oscuro);
    }

    .campo { margin: 0 0 14px; }
    .campo-titulo { display: block; margin-bottom: 4px; font-size: 0.82rem; font-family: var(--fuente); font-weight: 500; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }

    /* Select genérico (dropdown) reusable por cualquier herramienta */
    .select-campo {
      width: 100%;
      padding: 11px 13px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 10px;
      background: var(--superficie);
      color: var(--texto);
      font-family: var(--fuente);
      font-size: 0.95rem;
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .select-campo:hover { border-color: var(--linea-fuerte); box-shadow: 0 2px 8px rgba(38, 75, 74, 0.06); }
    .select-campo:focus {
      outline: none;
      border-color: var(--petroleo);
      box-shadow: 0 0 0 3px rgba(38, 75, 74, 0.12);
    }

    .campos-fila {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 16px;
    }
    @media (min-width: 560px) {
      .campos-fila { grid-template-columns: 1fr 1fr; }
    }

    .reescritura {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      border-radius: 12px;
      background: var(--exito-suave);
    }
    .reescritura .campo-titulo { color: var(--exito); }
    .reescritura p { margin: 0; font-weight: 500; color: var(--petroleo-oscuro); }

    .copiar {
      flex: none;
      padding: 10px 18px;
      border: 1px solid var(--linea-fuerte);
      border-radius: 8px;
      background: var(--superficie);
      color: var(--petroleo);
      font-family: var(--fuente);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .copiar:hover {
      background: var(--terracota);
      border-color: var(--terracota);
      color: #FFF;
      box-shadow: 0 2px 4px rgba(184, 78, 46, 0.15), 0 4px 10px rgba(184, 78, 46, 0.25);
    }

    .sin-frases { padding: 20px; color: var(--texto-suave); }

    /* Botón secundario: para acciones entre herramientas (ej: "Analizar con PuroTexto") */
    .boton-secundario {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: 1px solid var(--petroleo);
      border-radius: 10px;
      background: var(--superficie);
      color: var(--petroleo);
      font-family: var(--fuente);
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .boton-secundario:hover {
      background: var(--petroleo);
      color: #FFF;
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.1), 0 4px 10px rgba(38, 75, 74, 0.2);
    }
    .boton-secundario svg { width: 16px; height: 16px; flex: none; }

    /* Botón Exportar a PDF: mismo lenguaje visual que los ítems del sidebar (ícono + arena + borde petróleo) */
    .boton-exportar {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: auto;
      max-width: max-content;
      padding: 10px 18px;
      border: 1px solid var(--petroleo);
      border-radius: 10px;
      background: var(--arena);
      color: var(--petroleo-oscuro);
      font-family: var(--fuente);
      font-size: 0.9rem;
      line-height: normal;
      font-weight: 500;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .boton-exportar:hover {
      background: #C3B29E; /* --arena (#D9C6AF) un poco más oscuro, mismo color */
      border-color: var(--petroleo);
      color: var(--petroleo-oscuro);
    }
    .boton-exportar svg {
      display: block;
      width: 18px;
      height: 18px;
      flex: none;
      color: var(--petroleo);
    }
    .boton-exportar:disabled { opacity: 0.7; cursor: progress; }

    /* ==========================================================================
       2. TARJETAS DE BENEFICIOS CON ELEVACIÓN Y SOMBRA CLARA Y FUNCIONAL
       ========================================================================== */
    .seccion-beneficios {
      margin-top: 64px;
      padding: 40px 32px;
      background: #EFE6D9;
      border-radius: 24px;
    }

    .beneficios-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    @media (min-width: 680px) {
      .beneficios-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .tarjeta-beneficio {
      padding: 24px 20px;
      background: var(--arena);
      border: 1px solid transparent;
      border-radius: 14px;
      box-shadow:
        0 1px 2px rgba(38, 75, 74, 0.05),
        0 8px 20px rgba(38, 75, 74, 0.07);
      
      /* Transición fluida explícita */
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      will-change: transform, box-shadow;
    }

    /* Elevación visible y notoria al hacer hover */
    .tarjeta-beneficio:hover {
      transform: translateY(-8px);
      box-shadow:
        0 2px 4px rgba(38, 75, 74, 0.10),
        0 24px 44px rgba(38, 75, 74, 0.22);
      border-color: var(--petroleo);
    }

    .step-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px; height: 44px;
      border-radius: 10px;
      background: var(--hueso);
      color: var(--petroleo);
      margin-bottom: 16px;
    }

    .step-icon svg {
      width: 22px; height: 22px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .tarjeta-beneficio h3 {
      margin: 0 0 8px;
      font-family: var(--fuente-titulos);
      font-size: 1.1rem;
      color: var(--petroleo);
      font-weight: 500;
    }

    .tarjeta-beneficio p {
      margin: 0;
      font-size: 0.92rem;
      color: var(--petroleo-suave);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECCIÓN ¿CÓMO FUNCIONA? & PREGUNTAS FRECUENTES
       ========================================================================== */
    .seccion { margin-top: 64px; }

    .seccion-titulo {
      margin: 0 0 6px;
      font-family: var(--fuente-titulos);
      color: var(--petroleo);
      font-size: 1.6rem;
      letter-spacing: -0.01em;
      font-weight: 400;
    }

    .seccion-intro { margin: 0 0 24px; color: var(--texto-suave); }

    /* Contenido de texto largo: Acerca de, Política de Privacidad, Términos de Uso */
    .prosa { max-width: 70ch; }
    .prosa p { margin: 0 0 18px; line-height: 1.7; color: var(--texto); }
    .prosa h2 {
      margin: 36px 0 14px;
      font-family: var(--fuente-titulos);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--petroleo);
      letter-spacing: -0.01em;
    }
    .prosa h2:first-child { margin-top: 0; }
    .prosa ul, .prosa ol { margin: 0 0 18px; padding-left: 22px; }
    .prosa li { margin-bottom: 8px; line-height: 1.65; color: var(--texto); }
    .prosa li::marker { color: var(--terracota); }
    .prosa strong { color: var(--petroleo-oscuro); font-weight: 600; }
    .prosa em { color: var(--texto-suave); }
    .prosa a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }
    .prosa a:hover { color: var(--terracota-hover); }
    .prosa hr { border: 0; border-top: 1px solid var(--linea); margin: 32px 0; }
    .prosa .prosa-fecha { margin: -8px 0 28px; font-size: 0.88rem; color: var(--texto-suave); }
    .prosa .prosa-cierre { font-style: italic; color: var(--texto-suave); }

    .cp-tarjeta {
      padding: 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .cp-tarjeta:hover {
      border-color: var(--linea-fuerte);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 12px 24px rgba(38, 75, 74, 0.1);
    }

    /* Tarjeta genérica para herramientas nuevas (Parafraseador, y las que se sumen después) */
    .herramienta-tarjeta {
      padding: 24px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .herramienta-tarjeta:hover {
      border-color: var(--linea-fuerte);
      box-shadow: 0 2px 4px rgba(38, 75, 74, 0.06), 0 12px 24px rgba(38, 75, 74, 0.1);
    }

    /* Comparador "antes y después" (Parafraseador) */
    .comparacion-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 20px;
    }
    @media (min-width: 720px) {
      .comparacion-grid { grid-template-columns: 1fr 1fr; }
    }
    .comparacion-panel { padding: 20px; }
    .comparacion-panel--humanizado {
      background: var(--arena);
      border-color: rgba(38, 75, 74, 0.25);
    }

    /* Alias genérico para el panel de resultado de herramientas de una sola salida (Resumen, etc.) */
    .panel-resultado {
      padding: 20px;
      background: var(--arena);
      border-color: rgba(38, 75, 74, 0.25);
    }
    .comparacion-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .comparacion-texto {
      margin: 0;
      white-space: pre-wrap;
      line-height: 1.65;
      color: var(--texto);
      font-size: 0.98rem;
    }

    .cp-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 24px;
    }
    @media (max-width: 640px) {
      .cp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }

    .cp-stat {
      padding: 16px 10px;
      border-radius: 12px;
      background: var(--arena);
      text-align: center;
    }
    .cp-stat-valor {
      display: block;
      font-family: var(--fuente-titulos);
      font-size: 1.55rem;
      font-weight: 600;
      color: var(--terracota);
      line-height: 1.15;
      margin-bottom: 4px;
    }
    .cp-stat-label {
      display: block;
      font-size: 0.76rem;
      font-weight: 500;
      color: var(--petroleo-oscuro);
    }

    .pasos { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
    
    .paso {
      padding: 24px;
      background: rgba(38, 75, 74, 0.06);
      border: 1px solid rgba(38, 75, 74, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .paso:hover {
      transform: translateY(-4px);
      box-shadow:
        0 2px 4px rgba(38, 75, 74, 0.06),
        0 16px 32px rgba(38, 75, 74, 0.14);
    }

    .paso .step-icon { background: var(--arena); color: var(--petroleo); }

    .paso-numero { margin: 0 0 6px; font-family: var(--fuente); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; color: var(--terracota); }
    .paso h3 { margin: 0 0 8px; font-family: var(--fuente-titulos); font-size: 1.1rem; color: var(--petroleo); font-weight: 500; }
    .paso p:last-child { margin: 0; font-size: 0.92rem; color: var(--petroleo-suave); }

    @media (min-width: 680px) {
      .pasos { grid-template-columns: repeat(3, 1fr); }
    }

    /* FAQ */
    #faq {
      padding: 40px 32px;
      background: #EFE6D9;
      border-radius: 24px;
    }

    .faq { display: grid; gap: 12px; }
    .faq details {
      border: 1px solid var(--linea);
      border-radius: 12px;
      background: var(--superficie);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .faq details:hover {
      border-color: var(--linea-fuerte);
      box-shadow: 0 4px 12px rgba(38, 75, 74, 0.05);
    }
    .faq details[open] { border-color: var(--terracota); }

    .faq summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      font-family: var(--fuente);
      font-weight: 500;
      color: var(--petroleo);
      cursor: pointer;
      list-style: none;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "";
      width: 8px; height: 8px;
      border-right: 2px solid var(--terracota);
      border-bottom: 2px solid var(--terracota);
      transform: rotate(45deg);
      transition: transform 0.3s ease;
    }
    .faq details[open] summary::after { transform: rotate(-135deg); }
    .faq .respuesta { padding: 0 20px 20px; color: var(--texto-suave); font-size: 0.95rem; }
    .faq .respuesta p { margin: 0; }
    .faq .respuesta p + p { margin-top: 8px; }

    /* ==========================================================================
       PIE DE PÁGINA
       ========================================================================== */
    .pie {
      margin-top: 80px;
      padding: 56px 24px 0;
      background: var(--petroleo);
    }
    .pie-contenido { max-width: 1080px; margin: 0 auto; }

    .pie-columnas {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      padding-bottom: 40px;
    }
    .pie-columna-titulo {
      margin: 0 0 14px;
      font-family: var(--fuente-titulos);
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--arena);
    }
    .pie-columna ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pie-columna a {
      color: var(--hueso);
      opacity: 0.85;
      text-decoration: none;
      font-family: var(--fuente);
      font-size: 0.9rem;
      transition: opacity 0.2s ease, color 0.2s ease;
    }
    .pie-columna a:hover {
      opacity: 1;
      color: var(--terracota);
      text-decoration: underline;
    }

    .pie-redes { display: flex; gap: 10px; }
    .pie-red {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: rgba(245, 239, 231, 0.08);
      color: var(--hueso);
      transition: background 0.2s ease, color 0.2s ease;
    }
    .pie-red:hover { background: var(--terracota); color: #FFF; }
    .pie-red svg { width: 17px; height: 17px; flex: none; }

    .pie-inferior {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding: 20px 0;
      border-top: 1px solid rgba(245, 239, 231, 0.15);
      font-family: var(--fuente);
      font-size: 0.82rem;
      color: var(--arena);
    }
    .pie-inferior p { margin: 0; }

    @media (max-width: 720px) {
      .pie-columnas { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
    }
    @media (max-width: 460px) {
      .pie-columnas { grid-template-columns: 1fr; gap: 28px; }
      .pie-inferior { justify-content: center; text-align: center; }
    }

    /* Sidebar: pasa a panel deslizante por debajo de 900px */
    @media (max-width: 900px) {
      .app-layout { display: block; }

      .btn-menu-movil { display: inline-flex; }
      .topbar-movil { display: flex; }

      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 200;
        width: 260px;
        flex: none;
        height: 100vh;
        border-right: 1px solid var(--linea);
        box-shadow: 0 0 40px rgba(34, 30, 24, 0.18);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }
      .sidebar.abierto { transform: translateX(0); }
      .sidebar .sidebar-top { display: none; } /* ya está en la topbar-movil */

      .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 190;
        background: rgba(34, 30, 24, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
      body:has(#menu-movil.abierto) .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
      }

      .sidebar-item {
        padding: 12px 15px;
        font-size: 0.75rem;
      }
    }

    @media (max-width: 600px) {
      .contenedor { padding-top: 20px; }
      .entrada { padding: 18px; }
      #texto { min-height: 350px; }
      .accion-contenedor { justify-content: stretch; }
      .boton-principal { width: 100%; }
      .reescritura { flex-direction: column; }
      .copiar { align-self: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fade-in { transition: none !important; opacity: 1 !important; transform: none !important; }
      .tarjeta-beneficio:hover { transform: none !important; box-shadow: none !important; }
      .boton-principal, .chip { transition: none !important; transform: none !important; }
      .sidebar, .sidebar-backdrop { transition: none !important; }
      .medidor-marca { transition: none !important; }
      h1.titulo-principal { animation: none !important; opacity: 1 !important; transform: none !important; }
    }

/* Arreglo para que los botones con etiqueta <a> se vean como botones reales */
a.boton-principal {
  display: inline-block;
  background-color: var(--terracota);
  color: #FFFFFF !important;
  padding: 14px 36px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--fuente);
  font-size: 1.05rem;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(196, 95, 69, 0.25);
  transition: all 0.3s ease;
}

a.boton-principal:hover {
  background-color: var(--terracota-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(196, 95, 69, 0.3);
}

/* ==========================================================================
   LÍMITES DE USO (Freemium)
   Pegá este bloque al final de estilos.css.
   ========================================================================== */

/* Cartel "Te quedan X análisis hoy" / "Análisis ilimitados" */
.uso-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie-suave);
  color: var(--petroleo);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
}
.uso-estado::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--petroleo-suave);
}
.uso-estado--premium {
  border-color: #BFE0CF;
  background: var(--exito-suave);
  color: var(--exito);
}
.uso-estado--premium::before { background: var(--exito); }
.uso-estado--agotado {
  border-color: #EAD3AA;
  background: var(--alerta-suave);
  color: #7A4B12;
}
.uso-estado--agotado::before { background: var(--alerta); }

/* Aviso cuando se alcanzó el límite del día */
.uso-limite {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid #EAD3AA;
  border-left: 5px solid var(--alerta);
  border-radius: 12px;
  background: var(--alerta-suave);
  color: #5E3A0E;
}
.uso-limite-texto {
  margin: 0 0 14px;
  line-height: 1.5;
}
.uso-limite-texto strong { font-weight: 600; }
.uso-limite-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.uso-limite .boton-principal,
.uso-limite .boton-secundario {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 0.95rem;
  text-decoration: none;
}
.uso-limite .boton-secundario { justify-content: center; }

@media (max-width: 600px) {
  .uso-limite-acciones > * { width: 100%; justify-content: center; }
}

/* Sidebar: Botones destacados pero delicados */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-bottom .sidebar-premium,
.sidebar-bottom .sidebar-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  background: var(--arena, #EADFCE);
  color: var(--petroleo, #264B4A);
  border: 1.5px solid rgba(38, 75, 74, .25);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
  
  /* LO IMPORTANTE PARA QUE SE VEAN CHICOS */
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.75rem; 
  font-weight: 500;
  line-height: 1.2;
}

.sidebar-bottom .sidebar-premium:hover,
.sidebar-bottom .sidebar-auth:hover,
.sidebar-bottom .sidebar-premium:focus-visible,
.sidebar-bottom .sidebar-auth:focus-visible {
  background: var(--arena, #EADFCE);
  color: var(--petroleo, #264B4A);
  border-color: var(--petroleo, #264B4A);
  box-shadow: 0 4px 12px rgba(38, 75, 74, .15);
}

/* Íconos chiquitos */
.sidebar-bottom .sidebar-premium svg,
.sidebar-bottom .sidebar-auth svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Único toque de terracota: la estrellita */
.sidebar-bottom .sidebar-premium svg { 
  color: var(--terracota, #B84E2E); 
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-bottom .sidebar-premium,
  .sidebar-bottom .sidebar-auth { transition: none; }
}

/* Forzar el color del texto en el botón de arena de precios */
.boton-principal.precio-boton-arena,
.boton-principal.precio-boton-arena:hover {
  color: var(--petroleo-oscuro) !important;
}

/* ==========================================================================
   AJUSTES VISUALES (refrescada)
   Pegá este bloque COMPLETO al final de estilos.css.
   Para volver atrás, borrá todo lo que está entre este comentario y el final.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA: arena con cuerpo, petróleo y terracota (sin blanco)
   Escala de arena, de más oscuro a más claro:
   fondo #E9DECD  <  tarjetas #F5EFE7  ·  énfasis #D9C6AF
   -------------------------------------------------------------------------- */
:root {
  --fondo: #E9DECD;
  --superficie: #F5EFE7;
  --superficie-suave: #E2D6C2;
  --arena-claro: #DFD2BD;

  --linea: #D2C4AF;
  --linea-fuerte: #BCAD97;

  /* Escala tipográfica */
  --t-h1: clamp(2rem, 4.5vw, 2.75rem);
  --t-h2: 1.5rem;
  --t-h3: 1.1rem;

  /* Escala de espaciado */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 40px;
  --e5: 64px;
}

/* --------------------------------------------------------------------------
   2. PESOS: el cuerpo en 400, el énfasis solo donde corresponde
   -------------------------------------------------------------------------- */
body { font-weight: 400; }
.subtitulo { font-weight: 400; }
textarea { font-weight: 400; }
textarea::placeholder { color: #8A7F70; }

/* --------------------------------------------------------------------------
   3. TÍTULOS: una sola escala, Lora para h1 y h2
   -------------------------------------------------------------------------- */
h1.titulo-principal {
  font-size: var(--t-h1);
  line-height: 1.15;
}

.seccion-titulo,
.titulo-seccion {
  font-family: var(--fuente-editorial);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prosa h2 {
  font-family: var(--fuente-editorial);
  font-size: var(--t-h2);
  font-weight: 500;
}

.tarjeta-beneficio h3,
.paso h3 { font-size: var(--t-h3); }

.puntaje { font-size: clamp(2.75rem, 6vw, 3.5rem); }

/* --------------------------------------------------------------------------
   4. AIRE: más espacio entre secciones que dentro de ellas
   -------------------------------------------------------------------------- */
.seccion { margin-top: var(--e5); }
.hero-seccion { margin: var(--e4) 0 var(--e4); }
.entrada { margin-top: var(--e4); padding: var(--e3); }
.seccion-intro { margin-bottom: var(--e3); }
.titulo-seccion { margin-top: var(--e4); }
#texto { min-height: 340px; }

/* --------------------------------------------------------------------------
   5. CONTRASTE ENTRE ARENAS (como la tarjeta ahora es #F5EFE7,
      lo que antes usaba --hueso adentro de una tarjeta se separa con
      --superficie-suave)
   -------------------------------------------------------------------------- */
.chip,
.zona,
.archivo-elegido,
.cita { background: var(--superficie-suave); }

.chip:hover { background: var(--arena); }
.zona:hover,
.zona.arrastrando { background: var(--arena-claro); }

.topbar-movil { background: rgba(233, 222, 205, 0.92); }

/* --------------------------------------------------------------------------
   6. SECCIONES CON RITMO: beneficios en petróleo, FAQ en arena más cálido
   -------------------------------------------------------------------------- */
.seccion-beneficios {
  background: var(--petroleo);
  color: var(--hueso);
}
.seccion-beneficios .seccion-titulo,
.seccion-beneficios h2 { color: var(--hueso); }
.seccion-beneficios .seccion-intro { color: var(--arena); }
.seccion-beneficios .tarjeta-beneficio { background: var(--superficie); }

#faq { background: var(--arena-claro); }

/* --------------------------------------------------------------------------
   7. MENOS HOVERS "SALTARINES": la elevación queda solo para lo importante
      (botón principal y tarjetas de beneficios)
   -------------------------------------------------------------------------- */
.chip:hover,
.chip-oscuro:hover,
.modo:hover span,
.modal-tab:not(.activo):hover,
.boton-google:hover:not(:disabled),
.boton-secundario:hover,
.copiar:hover,
.btn-limpiar:hover,
.sidebar-bottom .sidebar-premium:hover,
.sidebar-bottom .sidebar-auth:hover {
  box-shadow: none;
}

.entrada:hover,
.cp-tarjeta:hover,
.herramienta-tarjeta:hover { box-shadow: none; }

.paso:hover { transform: none; box-shadow: none; }

/* Botón <a> con la misma sombra terracota que el resto (antes usaba otro rojo) */
a.boton-principal { box-shadow: 0 6px 20px rgba(184, 78, 46, 0.25); }
a.boton-principal:hover { box-shadow: 0 2px 6px rgba(184, 78, 46, 0.2), 0 8px 18px rgba(184, 78, 46, 0.3); }

/* --------------------------------------------------------------------------
   8. TAMAÑOS MÍNIMOS LEGIBLES (sidebar)
   -------------------------------------------------------------------------- */
.sidebar-item { font-size: 0.82rem; }
.sidebar-grupo-titulo { font-size: 0.72rem; }
.sidebar-bottom .sidebar-premium,
.sidebar-bottom .sidebar-auth { font-size: 0.82rem; }

@media (max-width: 900px) {
  .sidebar-item { font-size: 0.82rem; }
}

/* --------------------------------------------------------------------------
   9. ESPACIOS RESERVADOS PARA PUBLICIDAD
   Uso en el HTML:  <aside class="anuncio" aria-label="Publicidad"></aside>
   Ponelos debajo del resultado, entre secciones y antes del footer.
   Nunca pegados al textarea ni al botón "Analizar".
   -------------------------------------------------------------------------- */
.anuncio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;      /* reserva el alto para que nada salte al cargar */
  margin: var(--e4) 0;
  padding: var(--e3) var(--e2) var(--e2);
  border: 1px dashed var(--linea-fuerte);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}
.anuncio::before {
  content: "Publicidad";
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--fuente);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Para usuarios Premium: cuando tengas una clase en <body> (ej. "es-premium"), descomentá: */
/* body.es-premium .anuncio { display: none; } */

/* ==========================================================================
   AJUSTES VISUALES 2 (después de ver las capturas)
   Pegá este bloque al FINAL de estilos.css, DESPUÉS del bloque anterior.
   Para deshacerlo, borrá solo lo que está debajo de este comentario.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. CAJA DE TEXTO: que el protagonista sea el texto, no los controles
   -------------------------------------------------------------------------- */
textarea { font-size: 1.05rem; }
textarea::placeholder { font-size: 0.95rem; color: #8A7F70; }

.uso-estado {
  font-size: 0.8rem;
  padding: 4px 12px;
}
.modo span {
  font-size: 0.88rem;
  padding: 9px 18px;
}
.ejemplos-titulo { font-size: 0.82rem; }
.chip { font-size: 0.85rem; }

/* El contador y "Limpiar" tenían fondo blanco: pasan a arena */
.contador-box {
  font-size: 0.78rem;
  background: var(--superficie-suave);
}
.btn-limpiar {
  background: var(--superficie);
  font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   B. ZONA DE PRIVACIDAD + EJEMPLO: menos cajas iguales, más aire
   -------------------------------------------------------------------------- */

/* El aviso de privacidad deja de ser una tarjeta: pasa a ser una nota discreta */
.privacidad-caja {
  margin-top: var(--e3);
  padding: var(--e2) 0 0;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: transparent;
}
.privacidad-caja strong { font-size: 0.88rem; }
.privacidad-caja span { font-size: 0.82rem; }

/* La demo se separa más del resto y se ve como "ejemplo", no como segunda herramienta */
.demo-seccion {
  margin-top: var(--e5);
  margin-bottom: var(--e5);
}
.demo-etiqueta { margin-bottom: var(--e2); }
.demo-mini-editor {
  background: transparent;
  border: 1px dashed var(--linea-fuerte);
  box-shadow: none;
}

/* El botón de la demo deja de competir con "Analizar texto":
   pasa a secundario (contorno petróleo, centrado, más chico) */
.demo-play-btn.boton-principal {
  display: flex;
  width: auto;
  min-height: 44px;
  margin: 0 auto;
  padding: 10px 26px;
  background: transparent;
  color: var(--petroleo);
  border: 1.5px solid var(--petroleo);
  font-size: 0.95rem;
  box-shadow: none;
}
.demo-play-btn.boton-principal:hover:not(:disabled) {
  background: var(--petroleo);
  color: var(--hueso);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   C. BLOQUE DE BENEFICIOS: petróleo traslúcido en vez de sólido
   (el petróleo sólido queda solo para el footer)
   Si lo querés con más presencia, subí 0.10 a 0.16.
   -------------------------------------------------------------------------- */
.seccion-beneficios {
  background: rgba(38, 75, 74, 0.10);
  border: 1px solid rgba(38, 75, 74, 0.14);
  color: var(--texto);
}
.seccion-beneficios .seccion-titulo,
.seccion-beneficios h2 { color: var(--petroleo); }
.seccion-beneficios .seccion-intro { color: var(--texto-suave); }
.seccion-beneficios .tarjeta-beneficio {
  background: var(--superficie);
  box-shadow: 0 1px 2px rgba(38, 75, 74, 0.05), 0 6px 16px rgba(38, 75, 74, 0.07);
}

/* --------------------------------------------------------------------------
   D. SIDEBAR: un poco más ancho para que los nombres no se partan en dos
   (solo en escritorio; en celular sigue el panel deslizante)
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .sidebar {
    flex: 0 0 236px;
    width: 236px;
  }
}
.sidebar-item {
  gap: 10px;
  padding: 9px 11px;
}

/* ==========================================================================
   AJUSTES VISUALES 3
   Pegá este bloque al FINAL de estilos.css, después del bloque 2.
   Para deshacerlo, borrá solo lo que está debajo de este comentario.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. BENEFICIOS: petróleo intermedio (ni sólido oscuro, ni traslúcido gris)
   Para ajustarlo cambiá solo este valor:
   más oscuro  -> #355F5C     más claro -> #4A8480
   -------------------------------------------------------------------------- */
:root { --petroleo-medio: #3F7774; }

.seccion-beneficios {
  background: var(--petroleo-medio);
  border: 0;
  color: var(--hueso);
}
.seccion-beneficios .seccion-titulo,
.seccion-beneficios h2 { color: var(--hueso); }
.seccion-beneficios .seccion-intro { color: var(--hueso); opacity: 0.9; }
.seccion-beneficios .tarjeta-beneficio {
  background: var(--superficie);
  box-shadow: 0 8px 20px rgba(30, 58, 58, 0.18);
}

/* --------------------------------------------------------------------------
   B. SIDEBAR: más ancho, márgenes internos más chicos y scrollbar fina
   (la barra gris de scroll le comía ancho al texto)
   -------------------------------------------------------------------------- */
.sidebar { scrollbar-width: thin; }
.sidebar-item { font-size: 0.8rem; }

@media (min-width: 901px) {
  .sidebar {
    flex: 0 0 248px;
    width: 248px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --------------------------------------------------------------------------
   C. CAJA DE TEXTO: vuelve a ser grande, con la letra más chica
   (en el bloque 1 yo la había achicado de 450px a 340px: era un error)
   -------------------------------------------------------------------------- */
#texto { min-height: 450px; }
textarea {
  font-size: 0.95rem;
  line-height: 1.6;
}
textarea::placeholder { font-size: 0.9rem; }

@media (max-width: 600px) {
  #texto { min-height: 350px; }
}

/* --------------------------------------------------------------------------
   D. OPCIONAL: bajar TODA la tipografía de la página parejo (~6%).
   Si sentís que todo sigue grande, borrá las marcas de comentario de la línea de abajo.
   -------------------------------------------------------------------------- */
/* html { font-size: 93.75%; } */

/* Sidebar: vuelve al ancho original */
@media (min-width: 901px) {
  .sidebar {
    flex: 0 0 210px;
    width: 210px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Todas las cajas de texto, sin depender de la estructura */
textarea { min-height: 420px !important; }
@media (max-width: 600px) {
  textarea { min-height: 320px !important; }
}

/* ==========================================================================
   AJUSTES PARA CELULAR
   Pegá este bloque al FINAL de estilos.css (después de todo lo anterior).
   Para deshacerlo, borrá solo lo que está debajo de este comentario.
   ========================================================================== */

/* La sombra del menú lateral se filtraba como una franja oscura
   en el borde izquierdo de la pantalla cuando el menú está cerrado */
@media (max-width: 900px) {
  .sidebar:not(.abierto) { box-shadow: none; }
}

/* Etiqueta "v1.0 Beta": que no ocupe todo el ancho del menú */
.sidebar .badge-beta { align-self: flex-start; }

@media (max-width: 600px) {

  /* El nombre ya está en la barra de arriba: no repetirlo en el hero */
  .hero-marca { display: none; }
  .hero-seccion { margin-top: var(--e3); }
  .subtitulo { font-size: 1rem; }

  /* Pestañas "Pegar texto / Subir archivo": un solo renglón, mitad y mitad */
  .modos { display: flex; width: 100%; }
  .modo { flex: 1; }
  .modo span {
    justify-content: center;
    white-space: nowrap;
    padding: 10px 8px;
    font-size: 0.85rem;
  }

  /* Botones de ejemplo (IA / humano / dudoso): los tres en una fila */
  .ejemplos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ejemplos-grid .chip {
    padding: 9px 4px;
    font-size: 0.78rem;
  }

  /* Menos espacio vacío entre secciones */
  .demo-seccion { margin-top: var(--e4); margin-bottom: var(--e4); }
  .seccion { margin-top: var(--e4); }

  /* Secciones con fondo: menos relleno lateral para que el contenido respire */
  .seccion-beneficios { padding: 24px 14px; }
  #faq { padding: 24px 14px; }
}

/* Footer: ocultar enlaces que todavía no existen (los que apuntan a "#") */
.pie-columna li:has(> a[href="#"]),
.pie-red[href="#"] { display: none; }

/* Si ninguna red tiene enlace real, ocultar también el título "Seguinos" */
.pie-columna:has(.pie-redes):not(:has(.pie-red:not([href="#"]))) { display: none; }

@media (min-width: 721px) {
  .pie-columnas:not(:has(.pie-red:not([href="#"]))) { grid-template-columns: repeat(3, 1fr); }
}

/* Banner lateral de publicidad (160x600): solo en pantallas anchas */
.anuncio-lateral { display: none; }
@media (min-width: 1440px) {
  .anuncio-lateral:not(:empty) {
    display: block;
    position: fixed;
    right: 16px;
    top: 90px;
    width: 160px;
    height: 600px;
    z-index: 5;
  }
  .anuncio-lateral iframe {
    display: block;
    width: 160px;
    height: 600px;
    border: 0;
  }
}

/* Tipografía general 10% más chica.
   Si querés ajustarla, cambiá solo este número (por ejemplo 92% o 88%). */
html { font-size: 90%; }

/* Banner de publicidad (300x250) al final de las páginas */
.anuncio-pie { display: none; }
.anuncio-pie:not(:empty) {
  display: block;
  width: 300px;
  max-width: 100%;
  margin: 40px auto 8px;
}
.anuncio-pie:not(:empty)::before {
  content: "Publicidad";
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #8A7F70;
}
.anuncio-pie iframe {
  display: block;
  width: 300px;
  max-width: 100%;
  height: 250px;
  border: 0;
}