consultoria-as/gestoria-lp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: compact layout for better space efficiency

Browse Source 
Reduce vertical scroll ~15-20% while keeping dark/silver aesthetic.
Hero 70vh left-aligned with stats row, services as horizontal 2-col
cards, values 2x2 with icon beside text, testimonials 3-col compact,
contact cards in horizontal row, reduced section padding throughout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gestoría LP
2026-03-02 05:14:07 +00:00
parent 693a3f616d
commit eb030a64f8
2 changed files with 219 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
assets/css/style.css
View File

@@ -86,7 +86,7 @@
/* Layout */ /* Layout */
--navbar-height: 72px; --navbar-height: 72px;
--container-max: 1200px; --container-max: 1280px;
--container-narrow: 800px; --container-narrow: 800px;
} }
@@ -340,8 +340,7 @@ p:last-child {
} }
.contact__grid--centered { .contact__grid--centered {
display: flex; display: block;
justify-content: center;
} }
.navbar__brand strong { .navbar__brand strong {
@@ -481,9 +480,9 @@ p:last-child {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
min-height: 100vh; min-height: 70vh;
padding: calc(var(--navbar-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl); padding: calc(var(--navbar-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl);
background: var(--gradient-hero); background: var(--gradient-hero);
overflow: hidden; overflow: hidden;
} }
@@ -508,7 +507,7 @@ p:last-child {
.hero__content { .hero__content {
position: relative; position: relative;
z-index: 1; z-index: 1;
text-align: center; text-align: left;
max-width: 780px; max-width: 780px;
} }
@@ -527,23 +526,45 @@ p:last-child {
margin-bottom: var(--space-2xl); margin-bottom: var(--space-2xl);
line-height: var(--line-height-loose); line-height: var(--line-height-loose);
max-width: 620px; max-width: 620px;
margin-left: auto;
margin-right: auto;
} }
.hero__actions { .hero__actions {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
gap: var(--space-md); gap: var(--space-md);
flex-wrap: wrap; flex-wrap: wrap;
} }
/* Hero stats row */
.hero__stats {
display: flex;
gap: var(--space-2xl);
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid rgba(192, 192, 192, 0.12);
}
.hero__stat-value {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--color-white);
line-height: 1;
margin-bottom: var(--space-xs);
}
.hero__stat-label {
font-size: var(--font-size-xs);
color: rgba(192, 192, 192, 0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ============================================================ /* ============================================================
Section Defaults Section Defaults
============================================================ */ ============================================================ */
.section { .section {
padding: var(--space-4xl) 0; padding: 72px 0;
background-color: var(--color-primary); background-color: var(--color-primary);
} }
@@ -553,7 +574,7 @@ p:last-child {
.section__header { .section__header {
text-align: center; text-align: center;
margin-bottom: var(--space-3xl); margin-bottom: 48px;
max-width: 660px; max-width: 660px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -574,7 +595,7 @@ p:last-child {
} }
.section__title { .section__title {
font-size: var(--font-size-3xl); font-size: var(--font-size-2xl);
font-weight: 800; font-weight: 800;
color: var(--color-white); color: var(--color-white);
margin-bottom: var(--space-md); margin-bottom: var(--space-md);
@@ -592,16 +613,19 @@ p:last-child {
============================================================ */ ============================================================ */
.services__grid { .services__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl); gap: 24px;
} }
.card--service { .card--service {
background-color: #141414; background-color: #141414;
border: 1px solid rgba(192, 192, 192, 0.1); border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-2xl) var(--space-xl); padding: 32px;
text-align: center; display: flex;
align-items: flex-start;
gap: var(--space-lg);
text-align: left;
transition: all var(--transition-base); transition: all var(--transition-base);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -634,17 +658,22 @@ p:last-child {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 64px; width: 56px;
height: 64px; height: 56px;
min-width: 56px;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: rgba(192, 192, 192, 0.08); background: rgba(192, 192, 192, 0.08);
border: 1px solid rgba(192, 192, 192, 0.12); border: 1px solid rgba(192, 192, 192, 0.12);
color: var(--color-accent); color: var(--color-accent);
font-size: 1.5rem; font-size: 1.4rem;
margin-bottom: var(--space-lg);
transition: all var(--transition-base); transition: all var(--transition-base);
} }
.card__body {
flex: 1;
min-width: 0;
}
.card--service:hover .card__icon { .card--service:hover .card__icon {
transform: scale(1.08); transform: scale(1.08);
background: rgba(192, 192, 192, 0.12); background: rgba(192, 192, 192, 0.12);
@@ -686,27 +715,44 @@ p:last-child {
============================================================ */ ============================================================ */
.values__grid { .values__grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl); gap: 24px;
} }
.value-card { .value-card {
text-align: center; display: flex;
padding: var(--space-xl); align-items: flex-start;
gap: var(--space-lg);
text-align: left;
padding: 28px;
background-color: #141414;
border: 1px solid rgba(192, 192, 192, 0.08);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.value-card:hover {
border-color: rgba(192, 192, 192, 0.18);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.value-card__content {
flex: 1;
min-width: 0;
} }
.value-card__icon { .value-card__icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 72px; width: 48px;
height: 72px; height: 48px;
border-radius: 50%; min-width: 48px;
border-radius: var(--radius-md);
background-color: rgba(192, 192, 192, 0.06); background-color: rgba(192, 192, 192, 0.06);
border: 1px solid rgba(192, 192, 192, 0.12); border: 1px solid rgba(192, 192, 192, 0.12);
color: var(--color-accent); color: var(--color-accent);
font-size: 1.6rem; font-size: 1.2rem;
margin-bottom: var(--space-lg);
transition: all var(--transition-base); transition: all var(--transition-base);
} }
@@ -740,15 +786,15 @@ p:last-child {
.testimonials__grid { .testimonials__grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl); gap: 24px;
} }
.testimonial-card { .testimonial-card {
background-color: #141414; background-color: #141414;
border: 1px solid rgba(192, 192, 192, 0.1); border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-2xl); padding: 32px;
transition: all var(--transition-base); transition: all var(--transition-base);
opacity: 0; opacity: 0;
transform: translateY(24px); transform: translateY(24px);
@@ -781,11 +827,11 @@ p:last-child {
} }
.testimonial-card__text { .testimonial-card__text {
font-size: var(--font-size-base); font-size: var(--font-size-sm);
font-style: italic; font-style: italic;
color: var(--color-gray-700); color: var(--color-gray-700);
line-height: var(--line-height-loose); line-height: 1.6;
margin-bottom: var(--space-lg); margin-bottom: var(--space-md);
border: none; border: none;
padding: 0; padding: 0;
} }
@@ -800,12 +846,12 @@ p:last-child {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; width: 32px;
height: 40px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: var(--gradient-silver); background: var(--gradient-silver);
color: #0a0a0a; color: #0a0a0a;
font-size: var(--font-size-sm); font-size: var(--font-size-xs);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -826,22 +872,28 @@ p:last-child {
} }
.contact__info { .contact__info {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg); gap: 24px;
} }
.contact__info-card { .contact__info-card {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md); gap: var(--space-md);
padding: var(--space-lg); padding: 32px var(--space-lg);
background-color: #141414; background-color: #141414;
border: 1px solid rgba(192, 192, 192, 0.08); border: 1px solid rgba(192, 192, 192, 0.08);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transition: all var(--transition-base); transition: all var(--transition-base);
} }
.contact__info-card > div {
text-align: center;
}
.contact__info-card:hover { .contact__info-card:hover {
background-color: #1a1a1a; background-color: #1a1a1a;
border-color: rgba(192, 192, 192, 0.15); border-color: rgba(192, 192, 192, 0.15);
@@ -899,15 +951,15 @@ p:last-child {
.footer { .footer {
background-color: #050505; background-color: #050505;
color: rgba(192, 192, 192, 0.65); color: rgba(192, 192, 192, 0.65);
padding: var(--space-3xl) 0 0; padding: 48px 0 0;
border-top: 1px solid rgba(192, 192, 192, 0.06); border-top: 1px solid rgba(192, 192, 192, 0.06);
} }
.footer__grid { .footer__grid {
display: grid; display: grid;
grid-template-columns: 1.3fr 1fr 0.8fr; grid-template-columns: 1.3fr 1fr 0.8fr;
gap: var(--space-2xl); gap: 32px;
padding-bottom: var(--space-2xl); padding-bottom: var(--space-xl);
border-bottom: 1px solid rgba(192, 192, 192, 0.08); border-bottom: 1px solid rgba(192, 192, 192, 0.08);
} }
@@ -915,7 +967,7 @@ p:last-child {
font-size: var(--font-size-md); font-size: var(--font-size-md);
font-weight: 700; font-weight: 700;
color: var(--color-white); color: var(--color-white);
margin-bottom: var(--space-lg); margin-bottom: var(--space-md);
} }
.footer__heading i { .footer__heading i {
@@ -1001,7 +1053,7 @@ p:last-child {
Forms (for use in service pages and admin) Forms (for use in service pages and admin)
============================================================ */ ============================================================ */
.form-group { .form-group {
margin-bottom: var(--space-lg); margin-bottom: var(--space-md);
} }
.form-label { .form-label {
@@ -1118,18 +1170,18 @@ select.form-control {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 90px; width: 72px;
height: 90px; height: 72px;
border-radius: 50%; border-radius: 50%;
background: rgba(192, 192, 192, 0.06); background: rgba(192, 192, 192, 0.06);
border: 2px solid rgba(192, 192, 192, 0.15); border: 2px solid rgba(192, 192, 192, 0.15);
color: var(--color-accent); color: var(--color-accent);
font-size: 2.2rem; font-size: 1.8rem;
margin-bottom: var(--space-lg); margin-bottom: var(--space-md);
} }
.service-hero h1 { .service-hero h1 {
font-size: var(--font-size-3xl); font-size: var(--font-size-2xl);
font-weight: 800; font-weight: 800;
color: var(--color-white); color: var(--color-white);
margin-bottom: var(--space-md); margin-bottom: var(--space-md);
@@ -1157,7 +1209,7 @@ select.form-control {
.service-detail { .service-detail {
display: grid; display: grid;
grid-template-columns: 1.4fr 1fr; grid-template-columns: 1.4fr 1fr;
gap: var(--space-3xl); gap: 48px;
align-items: start; align-items: start;
} }
@@ -1254,7 +1306,7 @@ select.form-control {
background-color: #141414; background-color: #141414;
border: 1px solid rgba(192, 192, 192, 0.1); border: 1px solid rgba(192, 192, 192, 0.1);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-2xl); padding: 32px;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
position: sticky; position: sticky;
top: calc(var(--navbar-height) + var(--space-lg)); top: calc(var(--navbar-height) + var(--space-lg));
@@ -1340,7 +1392,11 @@ select.form-control {
Responsive -- Tablet (768px) Responsive -- Tablet (768px)
============================================================ */ ============================================================ */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.values__grid { .services__grid {
grid-template-columns: 1fr;
}
.testimonials__grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@@ -1436,8 +1492,28 @@ select.form-control {
/* Hero mobile */ /* Hero mobile */
.hero { .hero {
min-height: 85vh; min-height: auto;
padding: calc(var(--navbar-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl); padding: calc(var(--navbar-height) + var(--space-2xl)) var(--space-lg) var(--space-2xl);
justify-content: center;
}
.hero__content {
text-align: center;
}
.hero__subtitle {
margin-left: auto;
margin-right: auto;
}
.hero__actions {
justify-content: center;
flex-direction: column;
}
.hero__actions .btn {
width: 100%;
justify-content: center;
} }
.hero__title { .hero__title {
@@ -1448,13 +1524,10 @@ select.form-control {
font-size: var(--font-size-base); font-size: var(--font-size-base);
} }
.hero__actions { .hero__stats {
flex-direction: column;
}
.hero__actions .btn {
width: 100%;
justify-content: center; justify-content: center;
gap: var(--space-xl);
text-align: center;
} }
/* Sections */ /* Sections */
@@ -1492,6 +1565,10 @@ select.form-control {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.contact__info {
grid-template-columns: 1fr;
}
/* Service page */ /* Service page */
.service-hero h1 { .service-hero h1 {
font-size: var(--font-size-2xl); font-size: var(--font-size-2xl);
@@ -1539,14 +1616,42 @@ select.form-control {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
.hero__stats {
flex-direction: column;
gap: var(--space-md);
align-items: center;
}
.section__title { .section__title {
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
} }
/* Stack service cards vertically on small mobile */
.card--service { .card--service {
flex-direction: column;
text-align: center;
padding: var(--space-xl) var(--space-lg); padding: var(--space-xl) var(--space-lg);
} }
.card__icon {
margin: 0 auto;
}
.card__body {
text-align: center;
}
/* Stack value cards vertically on small mobile */
.value-card {
flex-direction: column;
text-align: center;
align-items: center;
}
.value-card__content {
text-align: center;
}
.testimonial-card { .testimonial-card {
padding: var(--space-xl); padding: var(--space-xl);
} }
@@ -1562,9 +1667,9 @@ select.form-control {
} }
.service-hero__icon { .service-hero__icon {
width: 72px; width: 60px;
height: 72px; height: 60px;
font-size: 1.8rem; font-size: 1.5rem;
} }
.service-hero h1 { .service-hero h1 {
@@ -1583,10 +1688,6 @@ select.form-control {
.hero__title { .hero__title {
font-size: var(--font-size-5xl); font-size: var(--font-size-5xl);
} }
.services__grid {
grid-template-columns: repeat(3, 1fr);
}
} }
/* ============================================================ /* ============================================================

70
index.php
View File

@@ -33,6 +33,20 @@ try {
<i class="fa-brands fa-whatsapp"></i> Escríbenos <i class="fa-brands fa-whatsapp"></i> Escríbenos
</a> </a>
</div> </div>
<div class="hero__stats">
<div class="hero__stat">
<div class="hero__stat-value">500+</div>
<div class="hero__stat-label">Trámites realizados</div>
</div>
<div class="hero__stat">
<div class="hero__stat-value">5</div>
<div class="hero__stat-label">Servicios</div>
</div>
<div class="hero__stat">
<div class="hero__stat-value">98%</div>
<div class="hero__stat-label">Satisfacción</div>
</div>
</div>
</div> </div>
</section> </section>
@@ -51,13 +65,15 @@ try {
<div class="card__icon"> <div class="card__icon">
<i class="fa-solid <?= htmlspecialchars($servicio['icono']) ?>"></i> <i class="fa-solid <?= htmlspecialchars($servicio['icono']) ?>"></i>
</div> </div>
<h3 class="card__title"><?= htmlspecialchars($servicio['nombre']) ?></h3> <div class="card__body">
<p class="card__text"> <h3 class="card__title"><?= htmlspecialchars($servicio['nombre']) ?></h3>
<?= htmlspecialchars(mb_strimwidth($servicio['descripcion'], 0, 120, '...')) ?> <p class="card__text">
</p> <?= htmlspecialchars(mb_strimwidth($servicio['descripcion'], 0, 120, '...')) ?>
<a href="servicio.php?s=<?= htmlspecialchars($slug) ?>" class="card__link"> </p>
Más información <i class="fa-solid fa-arrow-right"></i> <a href="servicio.php?s=<?= htmlspecialchars($slug) ?>" class="card__link">
</a> Más información <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</article> </article>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
@@ -78,40 +94,48 @@ try {
<div class="value-card__icon"> <div class="value-card__icon">
<i class="fa-solid fa-award"></i> <i class="fa-solid fa-award"></i>
</div> </div>
<h3 class="value-card__title">Experiencia comprobada</h3> <div class="value-card__content">
<p class="value-card__text"> <h3 class="value-card__title">Experiencia comprobada</h3>
Años de experiencia resolviendo trámites migratorios con altos índices de éxito. <p class="value-card__text">
</p> Años de experiencia resolviendo trámites migratorios con altos índices de éxito.
</p>
</div>
</div> </div>
<div class="value-card"> <div class="value-card">
<div class="value-card__icon"> <div class="value-card__icon">
<i class="fa-solid fa-handshake"></i> <i class="fa-solid fa-handshake"></i>
</div> </div>
<h3 class="value-card__title">Atención personalizada</h3> <div class="value-card__content">
<p class="value-card__text"> <h3 class="value-card__title">Atención personalizada</h3>
Cada caso es único. Te brindamos asesoría individual adaptada a tu situación. <p class="value-card__text">
</p> Cada caso es único. Te brindamos asesoría individual adaptada a tu situación.
</p>
</div>
</div> </div>
<div class="value-card"> <div class="value-card">
<div class="value-card__icon"> <div class="value-card__icon">
<i class="fa-solid fa-eye"></i> <i class="fa-solid fa-eye"></i>
</div> </div>
<h3 class="value-card__title">Proceso transparente</h3> <div class="value-card__content">
<p class="value-card__text"> <h3 class="value-card__title">Proceso transparente</h3>
Sabrás en todo momento el estado de tu trámite. Sin sorpresas ni costos ocultos. <p class="value-card__text">
</p> Sabrás en todo momento el estado de tu trámite. Sin sorpresas ni costos ocultos.
</p>
</div>
</div> </div>
<div class="value-card"> <div class="value-card">
<div class="value-card__icon"> <div class="value-card__icon">
<i class="fa-solid fa-shield-halved"></i> <i class="fa-solid fa-shield-halved"></i>
</div> </div>
<h3 class="value-card__title">Resultados garantizados</h3> <div class="value-card__content">
<p class="value-card__text"> <h3 class="value-card__title">Resultados garantizados</h3>
Nos comprometemos con tu trámite hasta obtener un resultado favorable. <p class="value-card__text">
</p> Nos comprometemos con tu trámite hasta obtener un resultado favorable.
</p>
</div>
</div> </div>
</div> </div>
</div> </div>