style(ui): standardize component styling and enhance responsiveness

- Apply consistent text sizing (text-lg, text-xl) across section components
- Standardize color references by replacing hardcoded values with CSS custom properties (tertiary)
- Add responsive sizing improvements (w-3/4 container width, md:text-xl headings)
- Enhance grid and layout properties (min-h-100, self-end alignment)
- Add font-weight emphasis to key text elements in index page

src/components/cards/GridCard.astro

@@ -16,7 +16,7 @@ const imageUrl = props.image || ''
         )}
         { props.type === 'image' && (
         <div class="object-cover aspect-square flex">
-            <img src={props.image} alt="" />
+            <img class="w-full object-cover" src={props.image} alt="" />
         </div>
         )}
     </div>

src/components/section/ColorSection.astro

@@ -4,8 +4,8 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
 console.log( 'Props', bgColor )
 ---
 <div class={`bg-[${bgColor}] py-20`}>
-    <div class="container mx-auto">
+    <div class="container mx-auto w-3/4">
-        <h4 class={`uppercase text-lg ${titleColor} font-primary text-center mb-4 font-bold`}>{title}</h4>
+        <h4 class={`uppercase text-lg ${titleColor} font-primary md:text-xl text-center mb-4 font-bold`}>{title}</h4>
         <p class={`text-3xl font-secondary ${textColor} text-center`}>{text}</p>
     </div>
 </div>

src/components/section/ColumnsSection.astro

@@ -4,38 +4,38 @@ import { Icon } from "astro-icon/components";
 const { props } = Astro.props;
 ---
 <div class="container mx-auto">
-    <div class="grid grid-cols-2 min-h-[400px]">
+    <div class="grid grid-cols-2 min-h-100">
         <div class="bg-[#EBE5D0] p-24 grid grid-cols-2">
             <div class="leftcol flex justify-between flex-col min-h-full">
-                <h2 class="text-5xl font-secondary font-bold">Justicia</h2>
+                <h2 class="text-5xl font-secondary text-tertiary font-bold">Justicia</h2>
-                <p  >Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
+                <p  class="text-lg text-tertiary">Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
             </div>
             <div class="rightcol flex justify-end align-bottom min-h-full ">
-                <Icon name="ph:scales-thin" class="text-9xl" />
+                <Icon name="ph:scales-thin" class="text-9xl text-tertiary self-end" />
             </div>
         </div>
-        <div class="bg-[#003421] p-24 grid grid-cols-2">
+        <div class="bg-tertiary p-24 grid grid-cols-2">
             <div class="leftcol flex justify-between flex-col min-h-full">
                 <h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">Integridad</h2>
-                <p class="text-[#CBA16A]">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
+                <p class="text-[#CBA16A] text-lg">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
             </div>
             <div class="rightcol flex justify-end align-bottom min-h-full ">
-                <Icon name="ph:brain-thin" class="text-[#EBE5D0] text-9xl" />
+                <Icon name="ph:brain-thin" class="text-[#EBE5D0] text-9xl self-end" />
             </div>
         </div>
     </div>
     <div class="grid grid-cols-3">
-        <div class="bg-[#003421] p-24 flex justify-between flex-col min-h-full aspect-square">
+        <div class="bg-tertiary p-24 flex justify-between flex-col min-h-full aspect-square">
             <h2 class="text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2>
             <p class="text-xl text-[#EBE5D0]">Vocación de acompa- ñamiento y acción orientada a objetivos claros y trascendentes.</p>
         </div>
         <div class="bg-[#BEA48D] p-24 flex justify-between flex-col min-h-full aspect-square">
-            <h2 class="text-5xl font-secondary font-bold text-[#003421]">Excelencia</h2>
+            <h2 class="text-5xl font-secondary font-bold text-tertiary">Excelencia</h2>
-            <p class="text-xl text-[#003421]">Rigor intelectual, profe- sionalismo y mejora constante en todas las áreas de trabajo.</p>
+            <p class="text-xl text-tertiary">Rigor intelectual, profe- sionalismo y mejora constante en todas las áreas de trabajo.</p>
         </div>
         <div class="bg-[#22523F] p-24 flex justify-between flex-col min-h-full aspect-square">
-            <h2 class="text-5xl font-secondary font-bold text-[#003421]">Diálogo Estratégico</h2>
+            <h2 class="text-5xl font-secondary font-bold text-tertiary">Diálogo Estratégico</h2>
-            <p>Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
+            <p class="text-tertiary text-xl">Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
         </div>
     </div>
 </div>

src/pages/index.astro

@@ -49,14 +49,14 @@ const carouselImages3 = [
   <ColorSection
     bgColor="#22523F"
     titleColor="text-[#ffffff]"
-    textColor="text-[#CBA16A]"
+    textColor="text-[#CBA16A] font-bold"
     title="Misión"
     text="Formar líderes, impulsar iniciativas educativas y promover acciones públicas orientadas a la justicia y la paz, desde una base ética y espiritual firme, con un compromiso explícito con Israel y con la responsabilidad de contribuir al bienestar y la estabilidad de la humanidad en su conjunto." />
 
   <ColorSection
     bgColor="#CBA16A"
     titleColor="text-[#ffffff]"
-    textColor="text-[#ffffff]"
+    textColor="text-[#ffffff] font-bold"
     title="Visión"
     text="Consolidarse como un actor internacional de referencia en formación de liderazgo, diplomacia pública y proyección insti- tucional, reconocido por su coherencia, su claridad de valores y su contribución concreta a la construcción de un mundo ali- neado con la visión profética de justicia y paz." />