templates/automatizaciones/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">
  211.     {# templates/partials/servicios_automatizaciones_agencia_ia.html.twig #}
  213.     <section id="automatizaciones-legales" class="services-section" aria-labelledby="automatizaciones-title" itemscope itemtype="https://schema.org/Service">
  214.         <div class="container">
  215.             <header class="section-header">
  216.                 <div class="text-center mb-4">
  217.                     <div class="title-wrapper">
  218.                         <h2 id="automatizaciones-title" class="page-title" itemprop="name">Automatizaciones legales a medida</h2>
  219.                     </div>
  220.                 </div>
  221.                 <p class="section-subtitle" itemprop="description">
  222.                     Automatizamos procesos legales para despachos y departamentos jurídicos: menos tareas repetitivas, más control de plazos y documentación.
  223.                 </p>
  224.             </header>
  226.             <div class="cards" role="list">
  227.                 <article class="card" role="listitem">
  228.                     <h3 class="card-title">Automatización de procesos jurídicos</h3>
  229.                     <p class="card-text">
  230.                         Digitalizamos y automatizamos flujos de trabajo legales: gestión de expedientes, documentación y tareas administrativas.
  231.                     </p>
  232.                 </article>
  234.                 <article class="card" role="listitem">
  235.                     <h3 class="card-title">Contratos y escritos en minutos</h3>
  236.                     <p class="card-text">
  237.                         Generación automática de contratos y escritos con plantillas inteligentes, consistencia documental y reducción de errores.
  238.                     </p>
  239.                 </article>
  241.                 <article class="card" role="listitem">
  242.                     <h3 class="card-title">Plazos, alertas e integraciones</h3>
  243.                     <p class="card-text">
  244.                         Control de plazos legales, recordatorios y automatizaciones conectadas con CRM/ERP y herramientas del despacho.
  245.                     </p>
  246.                 </article>
  247.             </div>
  249.             <p class="section-cta">
  250.                 <a href="{{ path('contacto') }}" class="btn btn-primary" title="Contactar para automatizaciones legales">
  251.                     Solicitar diagnóstico de procesos
  252.                 </a>
  253.             </p>
  255.             {# SEO/Legal: texto breve adicional para reforzar keywords sin “keyword stuffing” #}
  256.             <p class="seo-footnote">
  257.                 Soluciones de <strong>automatización legal</strong> para <strong>despachos de abogados</strong>, asesorías y equipos jurídicos:
  258.                 optimización operativa, trazabilidad y estandarización documental.
  259.             </p>
  261.             {# Schema.org extras #}
  262.             <meta itemprop="serviceType" content="Automatización de procesos legales" />
  263.             <meta itemprop="areaServed" content="España" />
  264.             <meta itemprop="provider" content="ProLegalTech" />
  265.         </div>
  266.     </section>
  271. </div>
  273. {% endblock %}