templates/agencia-ia/index.html.twig line 1

Open in your IDE?
  1. {% extends 'new-base.html.twig' %}
  3. {% block contentCenter %}
  5. <style>
  6.     .page-title {
  7.         font-size: 3rem;
  8.         font-weight: 700;
  9.         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  10.         -webkit-background-clip: text;
  11.         -webkit-text-fill-color: transparent;
  12.         background-clip: text;
  13.         position: relative;
  14.         display: inline-block;
  15.         letter-spacing: -1px;
  16.         margin-bottom: 20px;
  17.     }
  18.     
  19.     .page-title::after {
  20.         content: '';
  21.         position: absolute;
  22.         bottom: -15px;
  23.         left: 50%;
  24.         transform: translateX(-50%);
  25.         width: 120px;
  26.         height: 4px;
  27.         background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
  28.         border-radius: 2px;
  29.     }
  30.     
  31.     .title-wrapper {
  32.         position: relative;
  33.         display: inline-block;
  34.     }
  35.     
  36.     [data-bs-theme="dark"] .page-title {
  37.         background: linear-gradient(135deg, #8b9ef6 0%, #9d7ac4 100%);
  38.         -webkit-background-clip: text;
  39.         -webkit-text-fill-color: transparent;
  40.         background-clip: text;
  41.     }
  42.     
  43.     [data-bs-theme="dark"] .page-title::after {
  44.         background: linear-gradient(90deg, transparent, #8b9ef6, #9d7ac4, transparent);
  45.     }
  47.     .services-section {
  48.         padding: 100px 0 80px;
  49.         min-height: 100vh;
  50.     }
  51.     
  52.     .section-header {
  53.         text-align: center;
  54.         max-width: 900px;
  55.         margin: 0 auto 60px;
  56.     }
  57.     
  58.     .section-subtitle {
  59.         font-size: 1.25rem;
  60.         color: #666;
  61.         line-height: 1.6;
  62.         margin-bottom: 0;
  63.     }
  64.     
  65.     [data-bs-theme="dark"] .section-subtitle {
  66.         color: #b0b5c3;
  67.     }
  68.     
  69.     .cards {
  70.         display: grid;
  71.         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  72.         gap: 30px;
  73.         margin-bottom: 50px;
  74.     }
  75.     
  76.     .card {
  77.         background: #ffffff;
  78.         border-radius: 16px;
  79.         padding: 40px 30px;
  80.         box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  81.         transition: all 0.3s ease;
  82.         border: 1px solid #e8ecf4;
  83.     }
  84.     
  85.     [data-bs-theme="dark"] .card {
  86.         background: #1a1f2e;
  87.         border-color: #2d3748;
  88.         box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  89.     }
  90.     
  91.     .card:hover {
  92.         transform: translateY(-5px);
  93.         box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
  94.     }
  95.     
  96.     [data-bs-theme="dark"] .card:hover {
  97.         box-shadow: 0 8px 30px rgba(102, 126, 234, 0.25);
  98.     }
  99.     
  100.     .card-title {
  101.         font-size: 1.5rem;
  102.         font-weight: 600;
  103.         color: #1a1f2e;
  104.         margin-bottom: 15px;
  105.         display: flex;
  106.         align-items: center;
  107.         gap: 10px;
  108.     }
  109.     
  110.     [data-bs-theme="dark"] .card-title {
  111.         color: #ffffff;
  112.     }
  113.     
  114.     .card-title::before {
  115.         content: "✓";
  116.         display: inline-flex;
  117.         align-items: center;
  118.         justify-content: center;
  119.         width: 32px;
  120.         height: 32px;
  121.         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  122.         color: white;
  123.         border-radius: 8px;
  124.         font-weight: bold;
  125.         flex-shrink: 0;
  126.     }
  127.     
  128.     .card-text {
  129.         font-size: 1rem;
  130.         color: #666;
  131.         line-height: 1.7;
  132.         margin: 0;
  133.     }
  134.     
  135.     [data-bs-theme="dark"] .card-text {
  136.         color: #b0b5c3;
  137.     }
  138.     
  139.     .section-cta {
  140.         text-align: center;
  141.         margin: 50px 0 30px;
  142.     }
  143.     
  144.     .btn-primary {
  145.         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  146.         border: none;
  147.         padding: 16px 40px;
  148.         font-size: 1.125rem;
  149.         font-weight: 600;
  150.         border-radius: 12px;
  151.         transition: all 0.3s ease;
  152.         box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  153.     }
  154.     
  155.     .btn-primary:hover {
  156.         transform: translateY(-2px);
  157.         box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
  158.     }
  159.     
  160.     .seo-footnote {
  161.         text-align: center;
  162.         font-size: 0.875rem;
  163.         color: #999;
  164.         max-width: 800px;
  165.         margin: 40px auto 0;
  166.         padding: 20px;
  167.         background: #f8f9fa;
  168.         border-radius: 8px;
  169.         line-height: 1.6;
  170.     }
  171.     
  172.     [data-bs-theme="dark"] .seo-footnote {
  173.         background: #0f1419;
  174.         color: #7f8a9c;
  175.     }
  176.     
  177.     .seo-footnote strong {
  178.         color: #667eea;
  179.     }
  180.     
  181.     @media (max-width: 768px) {
  182.         .page-title {
  183.             font-size: 2.2rem;
  184.         }
  185.         
  186.         .services-section {
  187.             padding: 60px 0 40px;
  188.         }
  189.         
  190.         .section-header h2 {
  191.             font-size: 2rem;
  192.         }
  193.         
  194.         .section-subtitle {
  195.             font-size: 1.125rem;
  196.         }
  197.         
  198.         .cards {
  199.             grid-template-columns: 1fr;
  200.             gap: 20px;
  201.         }
  202.         
  203.         .card {
  204.             padding: 30px 20px;
  205.         }
  206.     }
  207. </style>
  209. <div class="container-fluid">
  210.     <section id="agencia-ia-legal" class="services-section" aria-labelledby="agencia-ia-title" itemscope itemtype="https://schema.org/Service">
  211.         <div class="container">
  212.             <header class="section-header">
  213.                 <div class="text-center mb-4">
  214.                     <div class="title-wrapper">
  215.                         <h2 id="agencia-ia-title" class="page-title" itemprop="name">Agencia IA para el sector legal</h2>
  216.                     </div>
  217.                 </div>
  218.                 <p class="section-subtitle" itemprop="description">
  219.                     Creamos chatbots y agentes IA autónomos omnicanal (WhatsApp, chat web y asistentes conversacionales) para atención, captación y soporte jurídico.
  220.                 </p>
  221.             </header>
  223.             <div class="cards" role="list">
  224.                 <article class="card" role="listitem">
  225.                     <h3 class="card-title">Chatbots legales conversacionales</h3>
  226.                     <p class="card-text">
  227.                         Atención 24/7 y respuesta a consultas frecuentes, con experiencia conversacional alineada con tu marca y servicios legales.
  228.                     </p>
  229.                 </article>
  231.                 <article class="card" role="listitem">
  232.                     <h3 class="card-title">Agentes IA autónomos</h3>
  233.                     <p class="card-text">
  234.                         Agentes que ejecutan tareas: cualificación de leads, recopilación de datos, seguimiento de casos y derivación inteligente.
  235.                     </p>
  236.                 </article>
  238.                 <article class="card" role="listitem">
  239.                     <h3 class="card-title">Omnicanal: WhatsApp + Web + Interno</h3>
  240.                     <p class="card-text">
  241.                         Implementación omnicanal para clientes y equipos: WhatsApp, chat web y asistentes internos para productividad jurídica.
  242.                     </p>
  243.                 </article>
  244.             </div>
  246.             <p class="section-cta">
  247.                 <a href="{{ path('contacto') }}" class="btn btn-primary" title="Contactar para chatbots y agentes IA legales">
  248.                     Pedir demo de IA legal
  249.                 </a>
  250.             </p>
  252.             <p class="seo-footnote">
  253.                 Desarrollo de <strong>chatbots legales</strong> y <strong>agentes de Inteligencia Artificial</strong> para <strong>abogados</strong> y
  254.                 departamentos jurídicos: automatización de atención al cliente, captación y soporte operativo.
  255.             </p>
  257.             <meta itemprop="serviceType" content="Desarrollo de chatbots y agentes IA para el sector legal" />
  258.             <meta itemprop="areaServed" content="España" />
  259.             <meta itemprop="provider" content="ProLegalTech" />
  260.         </div>
  261.     </section>
  262. </div>
  264. {% endblock %}