{{-- /herramientas — el estante, como página real (Prosa_Estante_Herramientas.md).
     Dos trabajos: repartir tráfico hacia las herramientas y DEFINIR «afinador»
     — el término acuñado se defiende definiéndolo donde apuntan todos los
     enlaces internos. Kombucha primero (es el que convierte), kéfir después,
     la calculadora al final: la prosa depende de ese contraste («un afinador
     no es una calculadora» existe porque la de salmuera está en el estante).
     Aquí NO se anuncian herramientas que no existan: la cola de fermentos se
     dice en la prosa sin fechas, y la tarjeta llega cuando la herramienta está
     publicada. Modo discreto: sin enlace a Zymolab (puente de una dirección). --}}
@extends('layouts.web')

@section('seo')
<x-seo :title="__('pagina_herramientas.seo.title')" :description="__('pagina_herramientas.seo.desc')" :canonical="ruta('herramientas')" />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/tools.css') }}">
@php
    $ldCrumbs = ['@context' => 'https://schema.org', '@type' => 'BreadcrumbList', 'itemListElement' => [
        ['@type' => 'ListItem', 'position' => 1, 'name' => 'Inicio', 'item' => url('/')],
        ['@type' => 'ListItem', 'position' => 2, 'name' => __('pagina_herramientas.title'), 'item' => ruta('herramientas')],
    ]];
@endphp
<script type="application/ld+json">{!! json_encode($ldCrumbs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
<section class="section--tight" style="padding-top:48px">
  <div class="wrap">
    <div class="section-head center reveal">
      <p class="eyebrow">{{ __('pagina_herramientas.eyebrow') }}</p>
      <h1>{{ __('pagina_herramientas.title') }}</h1>
      <p class="lede">{{ __('pagina_herramientas.lede') }}</p>
    </div>
  </div>
</section>

<section class="section" style="padding-top:8px">
  <div class="wrap" style="max-width:760px">
    <div style="display:grid;gap:16px">

      {{-- El texto de cada tarjeta hace el trabajo de enlace interno: nada de
           «ver más» ni «pincha aquí» (SEO_Cierre §2). --}}
      <a href="{{ ruta('afinador') }}" class="tool-card reveal" style="text-decoration:none;color:inherit;display:block">
        <h2 style="font-family:var(--font-display);margin:0 0 8px">{{ __('pagina_herramientas.afinador.title') }}</h2>
        <p style="margin:0;color:var(--ink-500);line-height:1.6">{{ __('pagina_herramientas.afinador.texto') }}</p>
        <span class="btn btn--primary" style="margin-top:14px">{{ __('pagina_herramientas.afinador.cta') }}</span>
      </a>

      <a href="{{ ruta('afinador-kefir') }}" class="tool-card reveal" style="text-decoration:none;color:inherit;display:block">
        <h2 style="font-family:var(--font-display);margin:0 0 8px">{{ __('pagina_herramientas.kefir.title') }}{!! marcaIdioma('afinador-kefir') !!}</h2>
        <p style="margin:0;color:var(--ink-500);line-height:1.6">{{ __('pagina_herramientas.kefir.texto') }}</p>
        <span class="btn btn--primary" style="margin-top:14px">{{ __('pagina_herramientas.kefir.cta') }}</span>
      </a>

      <a href="{{ ruta('salmuera') }}" class="tool-card reveal" style="text-decoration:none;color:inherit;display:block">
        <h2 style="font-family:var(--font-display);margin:0 0 8px">{{ __('pagina_herramientas.salmuera.title') }}</h2>
        <p style="margin:0;color:var(--ink-500);line-height:1.6">{{ __('pagina_herramientas.salmuera.texto') }}</p>
        <span class="btn btn--ghost" style="margin-top:14px">{{ __('pagina_herramientas.salmuera.cta') }}</span>
      </a>

    </div>
  </div>
</section>

{{-- La prosa que hace propio el término: un afinador no es una calculadora,
     por qué hay uno por fermento, y por qué salen despacio. SSR. --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:760px">
    <h2 class="reveal" style="margin:0 0 12px">{{ __('pagina_herramientas.prosa.calc_t') }}</h2>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{{ __('pagina_herramientas.prosa.calc_p1') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{!! __('pagina_herramientas.prosa.calc_p2') !!}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{!! __('pagina_herramientas.prosa.calc_p3') !!}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 26px">{{ __('pagina_herramientas.prosa.calc_p4') }}</p>

    <h2 class="reveal" style="margin:0 0 12px">{{ __('pagina_herramientas.prosa.uno_t') }}</h2>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{!! __('pagina_herramientas.prosa.uno_p1') !!}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{{ __('pagina_herramientas.prosa.uno_p2') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 26px">{{ __('pagina_herramientas.prosa.uno_p3') }}</p>

    <h2 class="reveal" style="margin:0 0 12px">{{ __('pagina_herramientas.prosa.despacio_t') }}</h2>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 14px">{{ __('pagina_herramientas.prosa.despacio_p1') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0">{!! __('pagina_herramientas.prosa.despacio_p2') !!}</p>
  </div>
</section>

{{-- El cierre: el ÚNICO sitio de la página que menciona la cuenta, y al final.
     El estante reparte hacia las herramientas; convertir es trabajo de ellas. --}}
<section class="section">
  <div class="wrap" style="max-width:760px">
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0 0 10px">{{ __('pagina_herramientas.cierre.p1') }}</p>
    <p class="reveal" style="color:var(--ink-700);line-height:1.65;margin:0">{!! __('pagina_herramientas.cierre.p2', ['url' => ruta('mentor')]) !!}</p>
  </div>
</section>
@endsection