/* Theme Name: Giraldos Trámites Theme URI: https://giraldos.co Author: Giraldos Trámites y Asesorías Jurídicas Description: Tema a medida para Giraldos Trámites y Asesorías Jurídicas — paleta verde, tipografía Spectral/Work Sans, portal de consulta de trámites integrado. Version: 1.2.3 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: giraldos-theme */ @import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap'); :root{ /* Negro de marca (logo) — degradado con el brillo arriba a la derecha, muestreado directamente de la imagen de referencia del cliente. Se usa en los héroes de Inicio y Nosotros, y en el pie de página. */ --gt-negro:#151618; --gt-negro-suave:#1E2023; --gt-negro-fondo:radial-gradient(ellipse farthest-corner at 100% 0%, #737373 0%, #4A4A4C 20%, #2E2E30 42%, #1C1D1F 66%, #151618 100%); /* Versión más contenida del mismo degradado, para el pie de página: como el pie tiene texto repartido en todo el ancho (no solo en la esquina oscura como en los héroes), se evita el tramo más claro para que el texto siga siendo legible en cualquier columna. */ --gt-footer-fondo:radial-gradient(ellipse farthest-corner at 100% 0%, #4A4A4C 0%, #2E2E30 35%, #151618 100%); /* Paleta de verdes de marca */ --gt-verde-osc:#3E532A; --gt-verde-primario:#607F40; --gt-verde-medio:#B1CD93; --gt-verde-acento:#81A955; --gt-verde-acento-hover:#6B8F46; --gt-verde-boton:#607F40; --gt-verde-boton-hover:#4D6633; --gt-menta-claro:#CCDEB7; --gt-fondo-menta:#E5EFDB; --gt-texto:#1B1B1B; --gt-texto-sec:#5F5F5F; --gt-borde:#CCDEB7; /* Fondo de los héroes de Inicio/Nosotros — negro por defecto (tema principal). Se sobreescribe más abajo cuando el visitante elige el tema "verde". El pie de página usa --gt-footer-fondo, ver arriba. */ --gt-fondo-oscuro:var(--gt-negro-fondo); } /* Tema alterno "verde" — se activa agregando data-theme="verde" en , mediante el selector de tema en el encabezado (ver .gt-theme-switch). Colores pedidos por el cliente (2026-09-14) para este tema: #4F6128 en vez de #1F5B3F y #C3D69B en vez de #2E7D53. */ html[data-theme="verde"]{ --gt-fondo-oscuro:linear-gradient(135deg,#122019 0%,#4F6128 55%,#C3D69B 100%); --gt-footer-fondo:linear-gradient(135deg,#122019 0%,#4F6128 100%); --gt-menta-claro:#8FE0B8; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:'Work Sans', system-ui, sans-serif; color:var(--gt-texto); background:#FFFFFF; } img{ max-width:100%; height:auto; } a{ color:var(--gt-verde-primario); text-decoration:none; } a:hover{ color:var(--gt-verde-acento); } h1,h2,h3{ font-family:'Spectral', Georgia, serif; margin:0; } .gt-wrap{ max-width:1280px; margin:0 auto; padding:0 40px; } @media (max-width:782px){ .gt-wrap{ padding:0 20px; } } /* ---------- Header ---------- */ .gt-header{ position:sticky; top:0; z-index:50; background:#FFFFFF; border-bottom:1px solid var(--gt-borde); } .gt-header-inner{ max-width:1280px; margin:0 auto; padding:0 40px; height:112px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .gt-logo img{ height:84px; width:auto; display:block; } .gt-nav{ display:flex; align-items:center; gap:34px; } .gt-navlink{ font-family:'Work Sans', sans-serif; font-size:15px; font-weight:500; color:var(--gt-texto); text-decoration:none; padding-bottom:4px; border-bottom:2px solid transparent; white-space:nowrap; } .gt-navlink:hover{ color:var(--gt-verde-primario); } .gt-navlink.is-active{ color:var(--gt-verde-primario); border-bottom:2px solid var(--gt-verde-acento); font-weight:600; } .gt-header-cta{ flex-shrink:0; } .gt-menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--gt-texto); } /* ---------- Selector de tema (negro / verde) ---------- */ .gt-theme-switch{ display:flex; align-items:center; gap:2px; flex-shrink:0; background:var(--gt-fondo-menta); border:1px solid var(--gt-borde); border-radius:999px; padding:3px; } .gt-theme-btn{ border:none; background:transparent; cursor:pointer; font-family:'Work Sans', sans-serif; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; color:var(--gt-texto-sec); transition:background .15s ease, color .15s ease; white-space:nowrap; } .gt-theme-btn[aria-pressed="true"]{ background:var(--gt-negro); color:#FFFFFF; } .gt-theme-btn[data-gt-theme="verde"][aria-pressed="true"]{ background:var(--gt-verde-boton); color:#FFFFFF; } @media (max-width:900px){ .gt-header-inner{ padding:0 20px; height:84px; } .gt-logo img{ height:60px; } .gt-nav{ position:absolute; top:84px; left:0; right:0; background:#FFFFFF; border-bottom:1px solid var(--gt-borde); flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 16px; display:none; } .gt-nav.is-open{ display:flex; } .gt-navlink{ padding:12px 0; width:100%; border-bottom:1px solid var(--gt-borde); } .gt-navlink.is-active{ border-bottom:1px solid var(--gt-borde); } .gt-header-cta{ display:none; } .gt-menu-toggle{ display:block; } .gt-theme-btn{ padding:6px 10px; font-size:11.5px; } } @media (max-width:360px){ .gt-theme-btn{ padding:5px 8px; font-size:10.5px; } } /* ---------- Botones ---------- */ .btn-primary{ background:var(--gt-verde-boton); color:#FFFFFF; font-family:'Work Sans', sans-serif; font-size:15px; font-weight:600; padding:14px 28px; border-radius:4px; text-decoration:none; display:inline-block; border:none; cursor:pointer; } .btn-primary:hover{ background:var(--gt-verde-boton-hover); color:#FFFFFF; } .btn-outline{ border:1.5px solid #FFFFFF; color:#FFFFFF; font-family:'Work Sans', sans-serif; font-size:15px; font-weight:600; padding:13px 27px; border-radius:4px; text-decoration:none; display:inline-block; } .btn-outline:hover{ background:rgba(255,255,255,.12); color:#FFFFFF; } /* ---------- Secciones genéricas ---------- */ .gt-section{ padding:96px 40px; } .gt-section-sm{ padding:56px 40px; } .gt-eyebrow{ font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gt-verde-acento); margin-bottom:12px; } .gt-section-head{ max-width:640px; margin:0 auto 56px; text-align:center; } .gt-section-head h2{ font-size:34px; color:var(--gt-texto); font-weight:600; } @media (max-width:782px){ .gt-section, .gt-section-sm{ padding-left:20px; padding-right:20px; } } /* ---------- Hero (Inicio) ---------- */ .gt-hero{ position:relative; background:var(--gt-fondo-oscuro); overflow:hidden; padding:88px 40px 96px; } .gt-hero-inner{ max-width:1280px; margin:0 auto; position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap; } .gt-hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; max-width:600px; flex-shrink:0; } .gt-hero-copy h1{ font-size:46px; line-height:1.18; color:#FFFFFF; font-weight:600; } .gt-hero-copy p{ font-family:'Work Sans'; font-size:17px; line-height:1.6; color:#D7EEE1; max-width:540px; margin:0; } .gt-hero-copy .gt-eyebrow{ color:var(--gt-menta-claro); } .gt-hero-actions{ display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; } .gt-hero-logo-wrap{ position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:460px; height:460px; } .gt-hero-logo-glow{ position:absolute; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle,rgba(204,222,183,.16) 0%,rgba(204,222,183,0) 70%); } .gt-hero-logo-wrap img{ position:relative; width:420px; height:auto; display:block; filter:drop-shadow(0 18px 34px rgba(0,0,0,.35)); } @media (max-width:1100px){ .gt-hero-inner{ justify-content:center; text-align:center; } .gt-hero-copy{ align-items:center; } .gt-hero-actions{ justify-content:center; } } @media (max-width:600px){ .gt-hero-copy h1{ font-size:32px; } .gt-hero-logo-wrap{ width:280px; height:280px; } .gt-hero-logo-wrap img{ width:240px; } } /* ---------- Icon circle genérico ---------- */ .gt-icon-circle{ width:72px; height:72px; border-radius:50%; background:var(--gt-verde-primario); display:flex; align-items:center; justify-content:center; color:#FFFFFF; } .gt-icon-circle-lg{ width:60px; height:60px; margin:0 auto 16px; background:rgba(96,127,64,.12); color:var(--gt-verde-primario); } /* ---------- Cómo funciona ---------- */ .gt-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } .gt-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; } .gt-step-num{ font-family:'Work Sans'; font-size:13px; font-weight:700; color:var(--gt-verde-acento); } .gt-step h3{ font-size:19px; font-weight:600; } .gt-step p{ font-family:'Work Sans'; font-size:14px; line-height:1.6; color:var(--gt-texto-sec); max-width:280px; margin:0; } @media (max-width:900px){ .gt-steps{ grid-template-columns:1fr; } } /* ---------- Cifras ---------- */ .gt-cifras{ display:flex; justify-content:center; flex-wrap:wrap; gap:64px; text-align:center; } .gt-cifra-num{ font-family:'Spectral'; font-size:40px; font-weight:700; color:var(--gt-verde-primario); } .gt-cifra-label{ font-family:'Work Sans'; font-size:14px; color:var(--gt-texto-sec); margin-top:6px; } @media (max-width:900px){ .gt-cifras{ gap:32px; } } /* ---------- CTA final ---------- */ .gt-cta{ padding:72px 40px; background:var(--gt-fondo-menta); border-top:1px solid var(--gt-borde); } .gt-cta-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .gt-cta-inner h2{ font-size:28px; color:var(--gt-texto); font-weight:600; max-width:560px; } .gt-cta-alt{ background:var(--gt-fondo-menta); border-top:1px solid var(--gt-borde); } .gt-cta-alt .gt-cta-inner h2{ color:var(--gt-texto); font-size:24px; } /* ---------- Footer ---------- */ .gt-footer{ background:var(--gt-footer-fondo); padding:64px 40px 32px; } .gt-footer-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:48px; } .gt-footer-logo img{ height:92px; width:auto; display:block; margin-bottom:20px; } .gt-footer-desc{ font-family:'Work Sans'; font-size:14px; line-height:1.6; color:#D9EAE0; max-width:280px; margin:0; } .gt-footer-h{ font-family:'Spectral', serif; font-size:16px; font-weight:600; color:#FFFFFF; margin-bottom:18px; } .gt-footer-link{ font-family:'Work Sans', sans-serif; font-size:14px; color:#D9EAE0; text-decoration:none; display:block; margin-bottom:12px; } .gt-footer-link:hover{ color:var(--gt-verde-acento); } .gt-footer-text{ font-family:'Work Sans'; font-size:14px; color:#D9EAE0; margin:0 0 10px; } .gt-footer-bottom{ max-width:1280px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; } .gt-footer-bottom span{ font-family:'Work Sans'; font-size:13px; color:#9FC2AE; } @media (max-width:900px){ .gt-footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .gt-footer-grid{ grid-template-columns:1fr; } } /* ---------- WhatsApp flotante ---------- */ .gt-whatsapp-float{ position:fixed; bottom:28px; right:28px; width:58px; height:58px; border-radius:50%; background:var(--gt-verde-boton); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(18,32,25,.35); z-index:60; } /* ---------- Nosotros ---------- */ .gt-nosotros-hero{ padding:88px 40px; background:var(--gt-fondo-oscuro); } .gt-nosotros-hero-inner{ max-width:1280px; margin:0 auto; display:flex; gap:64px; align-items:center; flex-wrap:wrap; } .gt-nosotros-hero-copy{ flex:1; min-width:320px; } .gt-nosotros-hero-copy .gt-eyebrow{ color:var(--gt-menta-claro); } .gt-nosotros-hero-copy h1{ font-size:36px; color:#FFFFFF; font-weight:600; line-height:1.25; } .gt-nosotros-hero-copy p{ font-family:'Work Sans'; font-size:15.5px; color:#D7EEE1; line-height:1.7; margin-top:20px; } .gt-nosotros-hero-text p:first-child{ margin-top:20px; } .gt-photo-placeholder{ width:400px; max-width:100%; height:280px; background:rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .gt-photo-placeholder span{ font-family:'Work Sans'; font-size:13px; color:#D7EEE1; text-align:center; padding:0 16px; } .gt-photo-placeholder.is-light{ background:#FFFFFF; border-color:#CFE3D8; } .gt-photo-placeholder.is-light span{ color:#8B9990; } .gt-valores{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; } .gt-valor{ text-align:center; } .gt-valor h3{ font-size:18px; font-weight:600; } .gt-valor p{ font-family:'Work Sans'; font-size:14px; color:var(--gt-texto-sec); line-height:1.6; max-width:280px; margin:10px auto 0; } @media (max-width:900px){ .gt-valores{ grid-template-columns:1fr; } } .gt-especialidades{ padding:80px 40px; background:var(--gt-fondo-menta); } .gt-especialidades-inner{ max-width:1280px; margin:0 auto; display:flex; gap:64px; align-items:center; flex-wrap:wrap; } .gt-especialidades-copy{ flex:1; min-width:320px; } .gt-especialidades-copy h2{ font-size:28px; font-weight:600; margin-bottom:18px; } .gt-especialidades-copy > p{ font-family:'Work Sans'; font-size:15px; color:var(--gt-texto-sec); line-height:1.7; margin-bottom:24px; } .gt-especialidad-item{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .gt-especialidad-item:last-child{ margin-bottom:0; } .gt-especialidad-dot{ width:8px; height:8px; border-radius:50%; background:var(--gt-verde-acento); flex-shrink:0; } .gt-especialidad-item span:last-child{ font-family:'Work Sans'; font-size:14.5px; } /* ---------- Servicios (encabezado) ---------- */ .gt-servicios-hero{ padding:72px 40px 48px; background:var(--gt-fondo-menta); text-align:center; } .gt-servicios-hero h1{ font-size:38px; color:var(--gt-texto); font-weight:600; max-width:760px; margin:0 auto; } .gt-servicios-hero p{ font-family:'Work Sans'; font-size:15px; color:var(--gt-texto-sec); margin:16px auto 0; max-width:620px; line-height:1.6; } /* ---------- Consultar Estado (encabezado) ---------- */ .gt-consulta-hero{ padding:80px 40px 60px; background:linear-gradient(180deg,var(--gt-fondo-menta) 0%,#FFFFFF 100%); text-align:center; } .gt-consulta-hero-inner{ max-width:640px; margin:0 auto; } .gt-consulta-hero h1{ font-size:34px; color:var(--gt-texto); font-weight:600; } .gt-consulta-hero p{ font-family:'Work Sans'; font-size:15px; color:var(--gt-texto-sec); margin:16px 0 0; line-height:1.6; } .gt-consulta-body{ padding:24px 40px 96px; } /* ---------- Contacto ---------- */ .gt-contacto-hero{ padding:72px 40px 8px; text-align:center; } .gt-contacto-hero h1{ font-size:36px; font-weight:600; } .gt-contacto-hero p{ font-family:'Work Sans'; font-size:15px; color:var(--gt-texto-sec); margin-top:14px; } .gt-contacto-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:64px; } @media (max-width:960px){ .gt-contacto-grid{ grid-template-columns:1fr; } } .gt-form-box{ border:1px solid var(--gt-borde); border-radius:10px; padding:36px; } .gt-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; } @media (max-width:520px){ .gt-form-row{ grid-template-columns:1fr; } } .gt-field{ margin-bottom:20px; } .gt-field:last-of-type{ margin-bottom:24px; } .field-label{ font-family:'Work Sans'; font-size:13px; font-weight:600; color:var(--gt-texto); margin-bottom:8px; display:block; } .field-input{ width:100%; padding:13px 16px; border:1.5px solid #CFE3D8; border-radius:5px; font-family:'Work Sans'; font-size:15px; color:var(--gt-texto); background:#FFFFFF; } .field-input:focus{ outline:none; border-color:var(--gt-verde-acento); box-shadow:0 0 0 3px rgba(129,169,85,.15); } textarea.field-input{ resize:none; } .gt-contacto-info{ display:flex; flex-direction:column; gap:28px; } .info-row{ display:flex; gap:14px; align-items:flex-start; } .info-icon{ width:40px; height:40px; border-radius:50%; background:rgba(96,127,64,.12); display:flex; align-items:center; justify-content:center; color:var(--gt-verde-primario); flex-shrink:0; } .info-row-title{ font-family:'Work Sans'; font-size:14px; font-weight:600; } .info-row-text{ font-family:'Work Sans'; font-size:14px; color:var(--gt-texto-sec); line-height:1.5; } .gt-mapa-box{ max-width:1280px; margin:0 auto; min-height:280px; background:var(--gt-fondo-menta); border:1px solid var(--gt-borde); border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:32px 56px; flex-wrap:wrap; } .gt-mapa-box-left{ display:flex; align-items:center; gap:20px; } .gt-mapa-icon{ width:56px; height:56px; border-radius:50%; background:rgba(96,127,64,.12); display:flex; align-items:center; justify-content:center; color:var(--gt-verde-primario); flex-shrink:0; } .gt-mapa-titulo{ font-family:'Spectral'; font-size:19px; font-weight:600; } .gt-mapa-sub{ font-family:'Work Sans'; font-size:14px; color:var(--gt-texto-sec); margin-top:4px; } .gt-form-msg{ border-radius:8px; padding:16px 18px; font-family:'Work Sans'; font-size:.9rem; margin-bottom:20px; } .gt-form-msg.is-ok{ background:var(--gt-fondo-menta); border:1px solid var(--gt-borde); color:var(--gt-verde-primario); } .gt-form-msg.is-error{ background:#FBEAE6; border:1px solid #E3B4A6; color:#A84B36; } /* ---------- 404 ---------- */ .gt-404{ padding:120px 40px; text-align:center; } .gt-404 h1{ font-size:64px; color:var(--gt-verde-primario); } .gt-404 p{ font-family:'Work Sans'; color:var(--gt-texto-sec); margin:16px 0 24px; } /* ---------- Responsividad adicional (celulares y tablets) ---------- */ @media (max-width:900px){ .gt-mapa-box{ padding:28px 32px; } } @media (max-width:782px){ .gt-hero{ padding:64px 20px 72px; } .gt-nosotros-hero{ padding:56px 20px; } .gt-servicios-hero{ padding:56px 20px 40px; } .gt-contacto-hero{ padding:56px 20px 8px; } .gt-consulta-hero{ padding:56px 20px 44px; } .gt-consulta-body{ padding:24px 20px 72px; } .gt-cta{ padding:56px 20px; } .gt-especialidades{ padding:56px 20px; } .gt-form-box{ padding:24px; } .gt-contacto-grid{ gap:40px; } } @media (max-width:600px){ .gt-section-head h2{ font-size:26px; } .gt-servicios-hero h1{ font-size:28px; } .gt-contacto-hero h1{ font-size:28px; } .gt-consulta-hero h1{ font-size:26px; } .gt-nosotros-hero-copy h1{ font-size:26px; } .gt-cta-inner h2{ font-size:22px; } .gt-cta-alt .gt-cta-inner h2{ font-size:20px; } .gt-404 h1{ font-size:46px; } .gt-mapa-box{ padding:24px; justify-content:center; text-align:center; } .gt-mapa-box-left{ flex-direction:column; text-align:center; gap:12px; } .gt-mapa-box .btn-primary{ width:100%; text-align:center; } .gt-photo-placeholder{ height:220px; } .gt-hero-actions .btn-primary, .gt-hero-actions .btn-outline{ width:100%; text-align:center; } .gt-cifras{ gap:24px 40px; } } @media (max-width:400px){ .gt-hero-copy h1{ font-size:27px; } .gt-cifra-num{ font-size:32px; } }