/* =========================================================================
   23. Sección Plugins — diferencial sobre estilos de Temas
   ========================================================================= */
.hp-plugins {
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
    /* Fondo oscuro profundo estilo hosting */
    background:
        linear-gradient(
            135deg,
            #050d1f 0%,
            #071528 40%,
            #0a1e38 70%,
            #060f20 100%
        );
}

/* El contenedor del slider necesita overflow visible para los botones */
.hp-plugins .hp-themes__slider {
    overflow: visible;
}

/* Decoración: círculo difuso esmeralda (color de plugins) */
.hp-plugins::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(16, 185, 129, .1) 0%,
        transparent 65%
    );
    top: -250px;
    right: -200px;
    pointer-events: none;
}

/* Decoración: círculo difuso azul inferior izquierda */
.hp-plugins::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, .08) 0%,
        transparent 65%
    );
    bottom: -150px;
    left: -100px;
    pointer-events: none;
}

.hp-plugins__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hp-plugins__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.hp-plugins__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    color: #ffffff;
}

.hp-plugins__subtitle {
    color: rgba(255, 255, 255, .65);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 520px;
}

/* Botón "Ver todos" sobre fondo oscuro */
.hp-plugins__cta-top {
    color: rgba(255, 255, 255, .85) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.hp-plugins__cta-top:hover,
.hp-plugins__cta-top:focus-visible {
    color: #fff !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, .12) !important;
}

.hp-plugins__footer {
    text-align: center;
    margin-top: 2.5rem;
}

/* Botón "Ver todos" del footer también adaptado */
.hp-plugins__footer .hp-btn--primary {
    background: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, .35);
}

.hp-plugins__footer .hp-btn--primary:hover {
    background: #059669;
    box-shadow: 0 6px 24px rgba(16, 185, 129, .45);
}

/* ── Cards de plugin sobre fondo oscuro ─────────────────────────── */

/* ── Overrides para cards de plugin en el homepage slider ───────────────
   Las cards de plugin mantienen la base .hp-theme-card pero con
   identidad verde esmeralda, fondo claro y acento de color propio.
   ─────────────────────────────────────────────────────────────────────── */

.hp-theme-card__badge--plugin {
    color: #34d399 !important;
    background: rgba(52,211,153,.12) !important;
    border-color: rgba(52,211,153,.25) !important;
}

/* Cards de plugin sobre fondo oscuro — glassmorphism verde */
.hp-plugins .hp-theme-card {
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
}

.hp-plugins .hp-theme-card::after {
    background: #10b981;
}

.hp-plugins .hp-theme-card:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(16,185,129,.5);
    box-shadow: 0 12px 40px rgba(16,185,129,.2), 0 2px 8px rgba(0,0,0,.4);
    transform: translateY(-5px);
}

.hp-plugins .hp-theme-card__thumb { background: rgba(16,185,129,.08); }

/* Textos sobre fondo oscuro */
.hp-plugins .hp-theme-card__name a { color: #fff; }
.hp-plugins .hp-theme-card__name a:hover { color: #34d399; }
.hp-plugins .hp-theme-card__description { color: rgba(255,255,255,.6); }
.hp-plugins .hp-theme-card__author { color: rgba(255,255,255,.4); }

.hp-plugins .hp-theme-card__badge {
    color: #34d399 !important;
    background: rgba(52,211,153,.12) !important;
    border-color: rgba(52,211,153,.25) !important;
}

.hp-plugins .hp-theme-card__footer {
    border-top-color: rgba(255,255,255,.1);
}

/* Placeholder de plugin */
.hp-plugin-card__thumb-placeholder {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: linear-gradient(135deg, #064e3b 0%, #059669 60%, #10b981 100%);
    color: rgba(255,255,255,.6);
    font-size: 2.25rem;
}

.hp-plugin-card__thumb-placeholder span {
    font-size: var(--hp-fs-sm);
    font-weight: 700;
    color: rgba(255,255,255,.85);
}

/* Precio en la card de plugin */
.hp-plugin-card__price {
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-sm);
    color: #059669;
    margin-right: auto;
}

/* Botón CTA de plugin */
.hp-plugins .hp-theme-card__cta,
.hp-plugin-card__cta {
    background: #10b981 !important;
    box-shadow: 0 3px 10px rgba(16,185,129,.3) !important;
    color: #fff !important;
}

.hp-plugins .hp-theme-card__cta:hover,
.hp-plugin-card__cta:hover {
    background: #059669 !important;
    box-shadow: 0 5px 16px rgba(16,185,129,.4) !important;
}

.hp-plugins .hp-theme-card__demo {
    color: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.18);
}

.hp-plugins .hp-theme-card__demo:hover {
    color: #34d399;
    border-color: rgba(52,211,153,.5);
}

.hp-plugin-card__cta:hover,
.hp-plugin-card__cta:focus-visible {
    background: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .45) !important;
}

/* Botones del slider (flechas) sobre fondo oscuro */
.hp-plugins .hp-themes__btn {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .15);
    color: #fff;
}

.hp-plugins .hp-themes__btn:hover {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

/* Dots del slider */
.hp-plugins .hp-themes__dot {
    background: rgba(255, 255, 255, .25);
}

.hp-plugins .hp-themes__dot.is-active {
    background: #10b981;
}

/* Single plugin — diferencial visual */
.hp-single-plugin .hp-st-hero__eyebrow i {
    color: #10b981;
}

/* =========================================================================
   24. Sección Newsletter
   ========================================================================= */
.hp-newsletter {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
}

.hp-newsletter__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-newsletter__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .9;
    line-height: 1;
}

.hp-newsletter__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.hp-newsletter__subtitle {
    font-size: var(--hp-fs-lg);
    color: rgba(255, 255, 255, .75);
    margin: 0;
    line-height: 1.65;
}

/* Formulario */
.hp-newsletter__form-wrap {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--hp-radius-lg);
    padding: 2rem;
}

.hp-newsletter__fields {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.hp-newsletter__field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.hp-newsletter__field input {
    padding: .875rem 1rem;
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: var(--hp-radius-md);
    font: inherit;
    font-size: var(--hp-fs-base);
    color: #fff;
    transition: border-color var(--hp-trans-fast), background var(--hp-trans-fast);
}

.hp-newsletter__field input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.hp-newsletter__field input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .15);
}

.hp-newsletter__field.has-error input {
    border-color: #fca5a5;
    background: rgba(239, 68, 68, .1);
}

.hp-newsletter__error {
    font-size: var(--hp-fs-xs);
    color: #fca5a5;
    min-height: 1.2em;
    display: none;
}

.hp-newsletter__field.has-error .hp-newsletter__error {
    display: block;
}

.hp-newsletter__btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--hp-color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: .25rem;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast);
}

.hp-newsletter__btn:hover {
    background: var(--hp-color-primary-dark);
    transform: translateY(-1px);
}

.hp-newsletter__btn[aria-busy="true"] {
    opacity: .85;
    cursor: wait;
}

.hp-newsletter__feedback {
    margin-top: .875rem;
    padding: .75rem 1rem;
    border-radius: var(--hp-radius-md);
    font-size: var(--hp-fs-sm);
    display: none;
    line-height: 1.5;
}

.hp-newsletter__feedback.is-success {
    display: block;
    background: rgba(74, 222, 128, .15);
    border: 1px solid rgba(74, 222, 128, .4);
    color: #bbf7d0;
}

.hp-newsletter__feedback.is-error {
    display: block;
    background: rgba(239, 68, 68, .15);
    border: 1px solid rgba(239, 68, 68, .4);
    color: #fca5a5;
}

.hp-newsletter__privacy {
    margin: .875rem 0 0;
    font-size: var(--hp-fs-xs);
    color: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 960px) {
    .hp-newsletter__container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* =========================================================================
   25. Sección Clientes (Logos)
   ========================================================================= */

/* Variantes de fondo */
.hp-clients--light {
    background: #ffffff;
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-clients--dark {
    background: var(--hp-color-dark-soft);
}

.hp-clients--bordered {
    background: #ffffff;
    border-top: 1px solid var(--hp-color-border);
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-clients {
    padding: 2.5rem 0;
}

.hp-clients__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* Título opcional */
.hp-clients__title {
    text-align: center;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 2rem;
    opacity: .55;
}

.hp-clients--dark .hp-clients__title {
    color: #fff;
}

/* Grid de logos — se adapta automáticamente al número de logos */
.hp-clients__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 3rem;
}

/* Cada logo ocupa el espacio que necesita, con un máximo */
.hp-client {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-client__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity var(--hp-trans-base), transform var(--hp-trans-base);
}

.hp-client__link:hover,
.hp-client__link:focus-visible {
    text-decoration: none;
}

/* El <img> del logo */
.hp-client__logo {
    display: block;
    max-width: 160px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Modo oscuro: invertir logos claros */
.hp-clients--dark .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: .75;
}

.hp-clients--dark .hp-client__link:hover .hp-client__logo,
.hp-clients--dark .hp-client__link:focus-visible .hp-client__logo {
    opacity: 1;
}

/* Escala de grises + colorear en hover */
.hp-clients__grid--grayscale .hp-client__logo {
    filter: grayscale(100%);
    opacity: .6;
    transition: filter var(--hp-trans-base), opacity var(--hp-trans-base);
}

.hp-clients--dark .hp-clients__grid--grayscale .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: .5;
}

.hp-clients__grid--grayscale .hp-client:hover .hp-client__logo,
.hp-clients__grid--grayscale .hp-client:focus-within .hp-client__logo {
    filter: grayscale(0%);
    opacity: 1;
}

.hp-clients--dark .hp-clients__grid--grayscale .hp-client:hover .hp-client__logo,
.hp-clients--dark .hp-clients__grid--grayscale .hp-client:focus-within .hp-client__logo {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* Hover con leve elevación en los logos enlazados */
.hp-client__link:not(.hp-client__link--static):hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .hp-clients {
        padding: 2rem 0;
    }

    .hp-clients__grid {
        gap: 1.5rem 2rem;
    }

    .hp-client__logo {
        max-width: 120px;
        max-height: 48px;
    }
}

@media (max-width: 480px) {
    .hp-clients__grid {
        gap: 1.25rem 1.5rem;
    }

    .hp-client__logo {
        max-width: 100px;
        max-height: 40px;
    }
}

/* =========================================================================
   26. Sección Planes de Hosting + Currency Switcher
   ========================================================================= */

/* --- Currency Switcher -------------------------------------------------- */
.hp-currency-switcher {
    position: relative;
    display: inline-block;
}

.hp-currency-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: transparent;
    border: 1.5px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    font: inherit;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: var(--hp-color-text);
    cursor: pointer;
    transition: border-color var(--hp-trans-fast), background var(--hp-trans-fast);
    white-space: nowrap;
}

.hp-currency-switcher__toggle:hover,
.hp-currency-switcher__toggle[aria-expanded="true"] {
    border-color: var(--hp-color-primary);
    background: rgba(59,130,246,.05);
}

.hp-currency-switcher__arrow {
    font-size: .65em;
    transition: transform var(--hp-trans-fast);
}

.hp-currency-switcher__toggle[aria-expanded="true"] .hp-currency-switcher__arrow {
    transform: rotate(180deg);
}

.hp-currency-switcher__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--hp-color-border);
    border-radius: var(--hp-radius-md);
    box-shadow: var(--hp-shadow-lg);
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--hp-trans-base), visibility var(--hp-trans-base), transform var(--hp-trans-base);
}

.hp-currency-switcher.is-open .hp-currency-switcher__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hp-currency-switcher__option {
    display: block;
    padding: .5rem 1rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text);
    text-decoration: none;
    transition: background var(--hp-trans-fast);
}

.hp-currency-switcher__option:hover {
    background: #f8fafc;
    color: var(--hp-color-primary);
    text-decoration: none;
}

.hp-currency-switcher__option.is-active {
    color: var(--hp-color-primary);
    font-weight: 700;
    background: rgba(59,130,246,.06);
}

/* --- Sección Hosting (home) ---------------------------------------------- */
.hp-hosting {
    padding: 5rem 0;
    background: #f8fafc;
}

.hp-hosting__container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-hosting__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.hp-hosting__header-text { flex: 1; }

.hp-hosting__title {
    font-size: clamp(1.75rem, 3vw, var(--hp-fs-3xl));
    letter-spacing: -.02em;
    margin: 0 0 .6rem;
}

.hp-hosting__subtitle {
    color: var(--hp-color-text-muted);
    font-size: var(--hp-fs-lg);
    margin: 0;
    max-width: 560px;
}

.hp-hosting__switcher-wrap {
    flex-shrink: 0;
    padding-top: .25rem;
}

/* --- Grid de planes ------------------------------------------------------ */
.hp-hosting__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* --- Card de plan -------------------------------------------------------- */
.hp-hosting-card {
    background: #fff;
    border: 1.5px solid var(--hp-color-border);
    border-radius: var(--hp-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base);
}

.hp-hosting-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow-lg);
}

/* Variante destacada */
.hp-hosting-card--featured {
    border-color: var(--hp-color-primary);
    background: linear-gradient(180deg, #f0f6ff 0%, #fff 40%);
    box-shadow: 0 8px 32px rgba(59,130,246,.15);
    transform: translateY(-8px);
    z-index: 1;
}

.hp-hosting-card--featured:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 40px rgba(59,130,246,.22);
}

/* Badge ("Más popular") */
.hp-hosting-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hp-color-primary);
    color: #fff;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Header del plan */
.hp-hosting-card__header { text-align: center; }

.hp-hosting-card__name {
    font-size: var(--hp-fs-2xl);
    font-weight: 800;
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
    color: var(--hp-color-text);
}

.hp-hosting-card--featured .hp-hosting-card__name {
    color: var(--hp-color-primary);
}

.hp-hosting-card__subtitle {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    margin: 0;
    font-weight: 500;
}

/* Precio */
.hp-hosting-card__price-wrap {
    text-align: center;
    padding: 1.25rem 0;
    border-top: 1px solid var(--hp-color-border);
    border-bottom: 1px solid var(--hp-color-border);
}

.hp-hosting-card__price-regular {
    font-size: var(--hp-fs-base);
    color: var(--hp-color-text-soft);
    text-decoration: line-through;
    margin-bottom: .25rem;
}

.hp-hosting-card__price-regular .hp-price {
    font-size: inherit;
}

.hp-hosting-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .25rem;
}

.hp-hosting-card__price .hp-price {
    font-family: var(--hp-font-heading);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--hp-color-text);
    letter-spacing: -.03em;
    line-height: 1;
}

.hp-hosting-card--featured .hp-hosting-card__price .hp-price {
    color: var(--hp-color-primary);
}

.hp-hosting-card__period {
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text-soft);
    font-weight: 500;
}

.hp-hosting-card__price-na {
    font-size: var(--hp-fs-lg);
    color: var(--hp-color-text-muted);
    font-weight: 600;
}

.hp-hosting-card__sale-badge {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    padding: .15rem .65rem;
    border-radius: 999px;
    margin-top: .4rem;
}

/* Características */
.hp-hosting-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1;
}

.hp-hosting-card__feature {
    display: flex;
    align-items: flex-start;  /* flex-start para texto multilínea */
    gap: .6rem;
    font-size: var(--hp-fs-sm);
    color: var(--hp-color-text);
    line-height: 1.45;
}

.hp-hosting-card__feature i {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: .1rem; /* Alinea visualmente con la primera línea del texto */
}

/* El texto del feature + tooltip van juntos en un inline span */
.hp-hosting-card__feature-text {
    flex: 1;
    min-width: 0;
}

.hp-hosting-card__feature i.fa-circle-check { color: #16a34a; }
.hp-hosting-card__feature i.fa-circle-xmark { color: #d1d5db; }

.hp-hosting-card__feature--inactive {
    color: var(--hp-color-text-soft);
    opacity: .6;
}

/* CTA */
.hp-hosting-card__cta-wrap { margin-top: auto; }

.hp-hosting-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .875rem 1.5rem;
    background: var(--hp-color-text);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast);
}

.hp-hosting-card__cta:hover,
.hp-hosting-card__cta:focus-visible {
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.hp-hosting-card--featured .hp-hosting-card__cta {
    background: var(--hp-color-primary);
}

.hp-hosting-card--featured .hp-hosting-card__cta:hover {
    background: var(--hp-color-primary-dark);
}

.hp-hosting-card__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-hosting-card__cta:hover i {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 960px) {
    .hp-hosting__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .hp-hosting-card--featured { transform: none; }
    .hp-hosting-card--featured:hover { transform: translateY(-4px); }
    .hp-hosting__header { flex-direction: column; }
}

/* =========================================================================
   27. Page Template Hosting — Hero + Ilustración
   ========================================================================= */
.hp-page-hosting__hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.hp-page-hosting__hero-container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hp-page-hosting__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hp-fs-sm);
    font-weight: 600;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}

.hp-page-hosting__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: #fff;
    margin-bottom: 1rem;
}

.hp-page-hosting__subtitle {
    font-size: var(--hp-fs-lg);
    color: rgba(255,255,255,.8);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hp-page-hosting__hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.hp-page-hosting__hero-cta {
    font-size: var(--hp-fs-lg);
    padding: 1rem 2rem;
}

/* Trust pills */
.hp-page-hosting__trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.hp-page-hosting__trust li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--hp-fs-sm);
    color: rgba(255,255,255,.7);
}

.hp-page-hosting__trust i { color: #4ade80; }

/* Ilustración hero */
.hp-page-hosting__hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-hosting-illus {
    width: 100%;
    max-width: 380px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--hp-radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hp-hosting-illus__server {
    font-size: 4.5rem;
    color: #93c5fd;
    animation: hp-server-pulse 2.5s ease-in-out infinite;
}

@keyframes hp-server-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .7; transform: scale(.95); }
}

.hp-hosting-illus__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.hp-hosting-illus__stat {
    text-align: center;
}

.hp-hosting-illus__stat-value {
    display: block;
    font-family: var(--hp-font-heading);
    font-size: var(--hp-fs-xl);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

.hp-hosting-illus__stat-label {
    display: block;
    font-size: var(--hp-fs-xs);
    color: rgba(255,255,255,.6);
    margin-top: .2rem;
}

/* Plans wrap en la página */
.hp-page-hosting__plans-wrap .hp-hosting {
    background: #fff;
}

/* Content */
.hp-page-hosting__content {
    padding: 3rem 0;
}

.hp-page-hosting__content-container {
    max-width: var(--hp-container-max);
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* FAQ */
.hp-page-hosting__faq {
    padding: 4rem 0 5rem;
    background: #f8fafc;
}

.hp-page-hosting__faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

.hp-page-hosting__faq-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -.02em;
    margin-bottom: 2rem;
    text-align: center;
}

/* Hero switcher (en el hero) */
.hp-page-hosting__hero-switcher .hp-currency-switcher__toggle {
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
}

.hp-page-hosting__hero-switcher .hp-currency-switcher__toggle:hover {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.14);
}

.hp-page-hosting__hero-switcher .hp-currency-switcher__dropdown {
    background: #fff;
    color: var(--hp-color-text);
}

/* Responsive page hosting */
@media (max-width: 960px) {
    .hp-page-hosting__hero-container { grid-template-columns: 1fr; gap: 2.5rem; }
    .hp-page-hosting__hero-media { display: none; }
}

/* =========================================================================
   28. Sección About — Split 50/50
   ========================================================================= */

.hp-about {
    display: flex;
    min-height: 600px;
    position: relative;
    overflow: hidden;
}

/* ── Lado izquierdo: imagen ────────────────────────────────────────────── */
.hp-about__image {
    flex: 0 0 50%;
    position: relative;
    background-color: #0a1628;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 500px;
}

/* Overlay degradado hacia la derecha para el corte suave */
.hp-about__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 55%,
        rgba(255, 255, 255, 0.06) 100%
    );
    pointer-events: none;
}

/* Placeholder */
.hp-about__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: rgba(255,255,255,.25);
    background: linear-gradient(135deg, #0a1628, #142540);
    font-size: var(--hp-fs-sm);
    text-align: center;
    padding: 2rem;
}

.hp-about__image-placeholder i {
    font-size: 3rem;
    opacity: .3;
}

.hp-about__image-placeholder span {
    white-space: pre-line;
    line-height: 1.6;
}

/* ── Lado derecho: contenido ──────────────────────────────────────────── */
.hp-about__content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 4rem 5rem 5rem;
    /* Fondo oscuro sofisticado — mismo lenguaje visual que el Hero */
    background:
        linear-gradient(
            145deg,
            #070f1e 0%,
            #0c1a32 50%,
            #081526 100%
        );
    position: relative;
    overflow: hidden;
}

/* Decoración sutil de fondo — círculo difuso en la esquina */
.hp-about__content::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 130, 246, .12) 0%,
        transparent 70%
    );
    bottom: -200px;
    right: -150px;
    pointer-events: none;
}

/* Eyebrow — color acento azul claro sobre fondo oscuro */
.hp-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #60a5fa;
    margin-bottom: 1rem;
}

.hp-about__eyebrow-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #60a5fa;
    flex-shrink: 0;
    animation: hp-about-dot-pulse 2s ease-in-out infinite;
}

@keyframes hp-about-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.7); }
}

/* Título — blanco puro */
.hp-about__title {
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: #ffffff;
    margin: 0 0 .875rem;
}

/* Subtítulo — blanco semitransparente */
.hp-about__subtitle {
    font-size: var(--hp-fs-lg);
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1rem;
    line-height: 1.4;
}

/* Descripción — gris azulado claro */
.hp-about__description {
    font-size: var(--hp-fs-base);
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    margin: 0 0 2rem;
    max-width: 480px;
}

/* CTA */
.hp-about__actions {
    margin-bottom: 2.5rem;
}

.hp-about__cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .875rem 1.75rem;
    background: var(--hp-color-primary);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
}

.hp-about__cta:hover,
.hp-about__cta:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59,130,246,.4);
}

.hp-about__cta i {
    transition: transform var(--hp-trans-fast);
}

.hp-about__cta:hover i {
    transform: translateX(3px);
}

/* ── Estadísticas coloridas sobre fondo oscuro ─────────────────────────── */
.hp-about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 2rem;
}

.hp-about-stat {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem;
    border-radius: var(--hp-radius-md);
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .08);
    transition: transform var(--hp-trans-base), box-shadow var(--hp-trans-base), border-color var(--hp-trans-base), background var(--hp-trans-base);
}

.hp-about-stat:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
    border-color: var(--hp-about-stat-color, var(--hp-color-primary));
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Icono con fondo de color de acento semitransparente */
.hp-about-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--hp-radius-md);
    background: color-mix(in srgb, var(--hp-about-stat-color, #3B82F6) 20%, transparent);
    color: var(--hp-about-stat-color, var(--hp-color-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: background var(--hp-trans-base);
}

.hp-about-stat:hover .hp-about-stat__icon {
    background: color-mix(in srgb, var(--hp-about-stat-color, #3B82F6) 30%, transparent);
}

/* Fallback para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .hp-about-stat__icon {
        background: rgba(59, 130, 246, .2);
    }
}

.hp-about-stat__body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.hp-about-stat__value {
    font-family: var(--hp-font-heading);
    font-size: var(--hp-fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--hp-about-stat-color, var(--hp-color-primary));
    letter-spacing: -.02em;
    white-space: nowrap;
}

.hp-about-stat__label {
    font-size: var(--hp-fs-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    line-height: 1.3;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hp-about {
        flex-direction: column;
    }

    .hp-about__image {
        flex: none;
        width: 100%;
        min-height: 300px;
        max-height: 440px;
    }

    .hp-about__image-overlay {
        background: linear-gradient(
            to bottom,
            transparent 50%,
            rgba(255,255,255,.08) 100%
        );
    }

    .hp-about__content {
        flex: none;
        width: 100%;
        padding: 3.5rem 2rem 4rem;
    }

    .hp-about__description {
        max-width: 100%;
    }
}

@media (max-width: 540px) {
    .hp-about__content {
        padding: 3rem 1.25rem 3.5rem;
    }

    .hp-about__stats {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .hp-about-stat {
        padding: .875rem;
    }
}

/* =========================================================================
   29. Landing Page — Asesoría Personalizada
   ========================================================================= */

/* ── Variables locales ─────────────────────────────────────────────────── */
.hp-advisory {
    --hp-adv-primary:   #3B82F6;
    --hp-adv-dark:      #050c1a;
    --hp-adv-dark-mid:  #0a1628;
}

/* ── Contenedor compartido ─────────────────────────────────────────────── */
.hp-advisory__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--hp-container-pad);
}

/* ── Eyebrow compartido ─────────────────────────────────────────────────── */
.hp-advisory__section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hp-fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hp-adv-primary);
    margin-bottom: .875rem;
}

/* ── Tipografía compartida ─────────────────────────────────────────────── */
.hp-advisory__section-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--hp-color-text);
    margin: 0 0 1rem;
}

.hp-advisory__section-title--center { text-align: center; }

.hp-advisory__section-subtitle {
    font-size: var(--hp-fs-lg);
    color: var(--hp-color-text-muted);
    margin: 0 0 2rem;
    text-align: center;
}

.hp-advisory__section-desc {
    font-size: var(--hp-fs-base);
    color: var(--hp-color-text-muted);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

/* ── Botones compartidos ───────────────────────────────────────────────── */
.hp-advisory__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 2rem;
    background: var(--hp-adv-primary);
    color: #fff;
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 700;
    font-size: var(--hp-fs-lg);
    text-decoration: none;
    transition: background var(--hp-trans-fast), transform var(--hp-trans-fast), box-shadow var(--hp-trans-fast);
    box-shadow: 0 4px 16px rgba(59,130,246,.35);
}

.hp-advisory__btn-primary:hover,
.hp-advisory__btn-primary:focus-visible {
    background: var(--hp-color-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59,130,246,.45);
}

.hp-advisory__btn-primary--sm  { padding: .75rem 1.5rem; font-size: var(--hp-fs-base); }
.hp-advisory__btn-primary--lg  { padding: 1.1rem 2.5rem; font-size: var(--hp-fs-xl); }
.hp-advisory__btn-primary--xl  { padding: 1.25rem 3rem; font-size: var(--hp-fs-xl); }

.hp-advisory__btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.75rem;
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: var(--hp-radius-md);
    font-family: var(--hp-font-heading);
    font-weight: 600;
    font-size: var(--hp-fs-base);
    text-decoration: none;
    transition: border-color var(--hp-trans-fast), color var(--hp-trans-fast), background var(--hp-trans-fast);
}

.hp-advisory__btn-ghost:hover {
    border-color: rgba(255,255,255,.7);
    color: #fff;
    background: rgba(255,255,255,.07);
    text-decoration: none;
}


/* =========================================================================
   SECCIÓN BLOG — Home
   ========================================================================= */

.hp-blog-sec {
	padding: 5rem 0;
	background: #fff;
}

.hp-blog-sec__container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 var(--hp-container-pad, 1.5rem);
	box-sizing: border-box;
}

/* Cabecera */
.hp-blog-sec__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
	flex-wrap: wrap;
}

.hp-blog-sec__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hp-primary, #3b82f6);
	background: rgba(59,130,246,.08);
	border: 1px solid rgba(59,130,246,.18);
	border-radius: 99px;
	padding: .3rem .9rem;
	margin-bottom: .85rem;
}

.hp-blog-sec__title {
	font-family: var(--hp-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -.03em;
	margin: 0 0 .4rem;
	line-height: 1.2;
}

.hp-blog-sec__subtitle {
	font-size: .95rem;
	color: #64748b;
	margin: 0;
	max-width: 480px;
}

.hp-blog-sec__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .875rem;
	font-weight: 700;
	color: var(--hp-primary, #3b82f6);
	text-decoration: none;
	white-space: nowrap;
	padding: .6rem 1.25rem;
	border: 1.5px solid rgba(59,130,246,.25);
	border-radius: 99px;
	transition: background .2s, border-color .2s;
}

.hp-blog-sec__cta-link:hover {
	background: rgba(59,130,246,.06);
	border-color: var(--hp-primary, #3b82f6);
	text-decoration: none;
}

/* Grid */
.hp-blog-sec__grid {
	display: grid;
	gap: 1.5rem;
}

/* 3 posts: primer card grande + 2 pequeñas */
.hp-blog-sec__grid--3 {
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: auto auto;
}

.hp-blog-sec__grid--3 .hp-blog-card--featured {
	grid-row: 1 / 3;
}

/* 2 posts: dos columnas iguales */
.hp-blog-sec__grid--2 { grid-template-columns: 1fr 1fr; }

/* 4-6 posts: grid uniforme */
.hp-blog-sec__grid--4,
.hp-blog-sec__grid--6 { grid-template-columns: repeat(3, 1fr); }
.hp-blog-sec__grid--5 { grid-template-columns: repeat(3, 1fr); }

/* ── Card base ──────────────────────────────────────────────────── */
.hp-blog-card {
	background: #fff;
	border: 1.5px solid #e2e8f0;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s, box-shadow .2s;
}

.hp-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

/* ── Imagen ─────────────────────────────────────────────────────── */
.hp-blog-card__thumb-link { display: block; flex-shrink: 0; }

.hp-blog-card__thumb {
	position: relative;
	overflow: hidden;
	height: 200px;
	background: #f1f5f9;
}

.hp-blog-card--featured .hp-blog-card__thumb { height: 100%; min-height: 320px; }

.hp-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

.hp-blog-card:hover .hp-blog-card__img { transform: scale(1.04); }

.hp-blog-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cbd5e1;
	background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

/* Overlay */
.hp-blog-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s;
}

.hp-blog-card:hover .hp-blog-card__overlay { opacity: 1; }

.hp-blog-card__overlay-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: #fff;
	color: #0f172a;
	font-size: .82rem;
	font-weight: 700;
	padding: .55rem 1.1rem;
	border-radius: 99px;
}

/* ── Cuerpo ─────────────────────────────────────────────────────── */
.hp-blog-card__body {
	padding: 1.35rem 1.35rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	flex: 1;
}

/* Meta */
.hp-blog-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
	font-size: .75rem;
	color: #94a3b8;
}

.hp-blog-card__cat {
	font-weight: 700;
	color: var(--hp-primary, #3b82f6);
	text-decoration: none;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.hp-blog-card__cat:hover { text-decoration: underline; }

.hp-blog-card__date,
.hp-blog-card__read-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hp-blog-card__sep { color: #cbd5e1; }

/* Título */
.hp-blog-card__title {
	font-family: var(--hp-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	line-height: 1.35;
}

.hp-blog-card--featured .hp-blog-card__title { font-size: 1.25rem; }

.hp-blog-card__title a {
	text-decoration: none;
	color: inherit;
	transition: color .2s;
}

.hp-blog-card__title a:hover { color: var(--hp-primary, #3b82f6); }

/* Excerpt */
.hp-blog-card__excerpt {
	font-size: .875rem;
	color: #64748b;
	line-height: 1.65;
	margin: 0;
	flex: 1;
	/* Limitar a 3 líneas */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer */
.hp-blog-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: .75rem;
	border-top: 1px solid #f1f5f9;
	margin-top: auto;
}

.hp-blog-card__author {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 600;
	color: #475569;
}

.hp-blog-card__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.hp-blog-card__read-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .78rem;
	font-weight: 700;
	color: var(--hp-primary, #3b82f6);
	text-decoration: none;
	transition: gap .2s;
}

.hp-blog-card__read-link:hover { gap: 8px; text-decoration: none; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.hp-blog-sec__grid--3 {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.hp-blog-sec__grid--3 .hp-blog-card--featured { grid-row: auto; }
	.hp-blog-card--featured .hp-blog-card__thumb { min-height: 220px; }
	.hp-blog-sec__grid--4,
	.hp-blog-sec__grid--5,
	.hp-blog-sec__grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.hp-blog-sec { padding: 3.5rem 0; }
	.hp-blog-sec__header { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.hp-blog-sec__grid--2,
	.hp-blog-sec__grid--4,
	.hp-blog-sec__grid--5,
	.hp-blog-sec__grid--6 { grid-template-columns: 1fr; }
}