diff --git a/resources/views/components/header/title-position.blade.php b/resources/views/components/header/title-position.blade.php
index 59ec2d2..18c4975 100644
--- a/resources/views/components/header/title-position.blade.php
+++ b/resources/views/components/header/title-position.blade.php
@@ -3,45 +3,117 @@
     'breadcrumbs' => [
         ['name' => 'Inicio', 'href' => '/', 'active' => true],
     ],
-    // props clave
-    'align' => 'center',   // left | center | right
-    'size'  => 'md',       // sm | md | lg
-    'color' => 'grey',     // light | grey/gray | dark | primary | secondary | tertiary | quaternary
 
-    // extras opcionales
-    'fullWidth' => false,  // true => container-fluid
-    'uppercase' => false
+    // ====== Layout
+    'align' => 'center',     // left | center | right
+    'size'  => 'default',    // sm | md | lg | modern | default
+    'color' => 'grey',       // light | grey/gray | dark | primary | secondary | tertiary | quaternary
+    'fullWidth' => false,
+
+    // ====== Tipografía
+    'titileSize'     => 'md', // sm | md | lg (mantengo el typo para compat)
+    'breadcrumbSize' => 'md', // sm | md | lg
+    'uppercase'      => false,
+    'textDark'       => false,
+    // NUEVO: color semántico para el <h1>
+    // auto => deduce según fondo (light/grey -> dark, otros -> light)
+    // semantic => text-color-{primary|secondary|tertiary|quaternary}
+    // raw class => cualquier clase CSS (ej: 'text-dark', 'text-9 text-color-secondary')
+    'titleColor'     => 'auto', // auto | primary | secondary | tertiary | quaternary | dark | light | <raw class>
+
+    // ====== Animaciones (Porto appear-animation)
+    // Ejemplos: fadeInRightShorter, fadeInLeftShorter, fadeInUpShorter, slideInUp, rotateInUpRight
+    'titleAnimation'    => null,   // string|null
+    'titleDelay'        => 0,      // ms
+    'titleDuration'     => null,   // ej: '1s'
+    'crumbAnimation'    => null,   // string|null
+    'crumbDelay'        => 0,      // ms
+    'crumbDuration'     => null,
+    'overflowTitle'     => false,  // envuelve <h1> en .overflow-hidden para reveals más limpios
+    'overflowBreadcrumb'=> false,  // idem para breadcrumb
+
+    // ====== Extra
+    'customHeader' => false, // mantiene compat
 ])
 
 @php
-    $allowedColors = ['light','grey','dark','primary','secondary','tertiary','quaternary'];
+    // ---- Normalización color de fondo
+    $allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary'];
+    if ($color === 'gray') { $color = 'grey'; }
     $color = in_array($color, $allowedColors, true) ? $color : 'grey';
 
+    // ---- Alineación
     $align = in_array($align, ['left','center','right'], true) ? $align : 'center';
 
-    $sizeMap = ['sm' => 'page-header-sm', 'md' => 'page-header-md', 'lg' => 'page-header-lg'];
+    // ---- Tamaños
+    $sizeMap = [
+        'sm' => 'page-header-sm',
+        'md' => 'page-header-md',
+        'lg' => 'page-header-lg',
+        'modern' => 'page-header-modern',
+        'default' => ''
+    ];
     $sizeClass = $sizeMap[$size] ?? $sizeMap['md'];
 
-    $bgColorClass = "bg-color-{$color}";
-    $h1Class      = in_array($color, ['light','grey']) ? 'text-dark' : '';
-    $h1Class     .= $uppercase ? ' text-uppercase' : '';
+    // ---- Clases base
+    $pageHeaderClass = 'page-header page-header-modern custom-page-header';
+    $bgColorClass    = "bg-color-{$color}";
 
+    // ---- H1: tamaño
+    $h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10'];
+    $h1Class  = '';
+
+    // ---- H1: color semántico
+    $titleColorClass = '';
+    $semanticMap = [
+        'primary' => 'text-color-primary',
+        'secondary' => 'text-color-secondary',
+        'tertiary' => 'text-color-tertiary',
+        'quaternary' => 'text-color-quaternary',
+        'dark' => 'text-dark',
+        'light' => 'text-light',
+    ];
+
+    if ($titleColor === 'auto') {
+        // auto: si el fondo es claro, texto oscuro; si es oscuro/brand, texto claro
+        $titleColorClass = in_array($color, ['light','grey']) || $textDark ? 'text-dark' : 'text-light';
+    } elseif (isset($semanticMap[$titleColor])) {
+        $titleColorClass = $semanticMap[$titleColor];
+    } elseif (is_string($titleColor) && $titleColor !== '') {
+        // raw class
+        $titleColorClass = $titleColor;
+    }
+
+    // fallback por compatibilidad: texto oscuro si se especificó textDark
+    if ($textDark && $titleColorClass === '') {
+        $titleColorClass = 'text-dark';
+    }
+
+    // compone clases H1
+    $h1Class .= $titleColorClass ? ($titleColorClass.' ') : '';
+    $h1Class .= $h1SizeMap[$titileSize] ?? $h1SizeMap['md'];
+    $h1Class .= $uppercase ? ' text-uppercase' : '';
+
+    // ---- Breadcrumbs
     $ulClasses = ['breadcrumb','d-block'];
-    // alineación visual del breadcrumb
     $ulClasses[] = match ($align) {
         'left'   => 'text-md-end',
         'right'  => 'text-md-start',
         default  => 'text-center',
     };
-    if (!in_array($color, ['light','grey'])) $ulClasses[] = 'breadcrumb-light';
+    $ulClasses[] = match ($breadcrumbSize) {
+        'sm' => 'text-2',
+        'lg' => 'text-3-5',
+        default => '',
+    };
+    if (!in_array($color, ['light','grey']) && $textDark === false) $ulClasses[] = 'breadcrumb-light';
 
+    // ---- Grid
     $containerClass = $fullWidth ? 'container-fluid' : 'container';
+    $rowClass       = $size === 'modern' ? 'row py-5' : 'row';
 
-    // Layout de columnas según alineación (titulo y breadcrumbs)
-    // Mantiene grid responsivo sin duplicar vistas
-    $titleColClass = 'align-self-center p-static order-2  ';
-    $crumbColClass = 'align-self-center order-1 ';
-
+    $titleColClass = 'order-2 ';
+    $crumbColClass = 'order-1 ';
     if ($align === 'center') {
         $titleColClass .= 'col-md-12 text-center';
         $crumbColClass .= 'col-md-12';
@@ -52,17 +124,43 @@
         $titleColClass .= 'col-md-8 order-md-1';
         $crumbColClass .= 'col-md-4 order-md-2';
     }
+    $titleColClass .= ' align-self-center p-static';
+    $crumbColClass .= ' align-self-center';
+
+    // ---- Helpers animación: devuelve atributos data-* si hay animación
+    $animAttrs = function (?string $name, int $delay = 0, ?string $duration = null) {
+        if (!$name) return '';
+        $attrs = 'appear-animation';
+        $attrs .= "\" data-appear-animation=\"{$name}\"";
+        if ($delay > 0) { $attrs .= " data-appear-animation-delay=\"{$delay}\""; }
+        if ($duration) { $attrs .= " data-appear-animation-duration=\"{$duration}\""; }
+        return $attrs;
+    };
 @endphp
 
-<section class="page-header page-header-modern {{ $bgColorClass }} {{ $sizeClass }} m-0">
+<section class="{{ $pageHeaderClass }} {{ $bgColorClass }} {{ $sizeClass }} m-0">
     <div class="{{ $containerClass }}">
-        <div class="row">
+        <div class="{{ $rowClass }}">
             <div class="{{ $titleColClass }}">
-                <h1 class="{{ $h1Class }}">{!! $title !!}</h1>
+                @if($overflowTitle)<div class="overflow-hidden">@endif
+                <h1 class="font-weight-bold {{ $h1Class }} {{ $titleAnimation ? 'appear-animation' : '' }}"
+                    @if($titleAnimation)
+                        data-appear-animation="{{ $titleAnimation }}"
+                        @if($titleDelay) data-appear-animation-delay="{{ $titleDelay }}" @endif
+                        @if($titleDuration) data-appear-animation-duration="{{ $titleDuration }}" @endif
+                    @endif
+                >{!! $title !!}</h1>
+                @if($overflowTitle)</div>@endif
             </div>
-
             <div class="{{ $crumbColClass }}">
-                <ul class="{{ implode(' ', $ulClasses) }}">
+                @if($overflowBreadcrumb)<div class="overflow-hidden">@endif
+                <ul class="{{ implode(' ', $ulClasses) }} {{ $crumbAnimation ? 'appear-animation' : '' }}"
+                    @if($crumbAnimation)
+                        data-appear-animation="{{ $crumbAnimation }}"
+                        @if($crumbDelay) data-appear-animation-delay="{{ $crumbDelay }}" @endif
+                        @if($crumbDuration) data-appear-animation-duration="{{ $crumbDuration }}" @endif
+                    @endif
+                >
                     @foreach ($breadcrumbs as $breadcrumb)
                         @php
                             $name   = $breadcrumb['name']  ?? '';
@@ -84,6 +182,7 @@
                         </li>
                     @endforeach
                 </ul>
+                @if($overflowBreadcrumb)</div>@endif
             </div>
         </div>
     </div>