/* Portafolio público · jesusrivera.dev (BoxUI / ui.box.hn, assets locales) */

@layer box.tokens {
    :root {
        --box-brand-500: rgb(50, 150, 250);
        --box-brand-600: rgb(50, 100, 200);
    }
}

/* ------------------------------------------------------------
   Tipografía de sección (misma idea que perfil-titulo en privada)
   ------------------------------------------------------------ */
.port-titulo-seccion {
    font-weight: 700;
    letter-spacing: -0.025em;
}

html {
    scroll-padding-top: var(--boxp-nav-h, 4.25rem);
}

body {
    overflow-x: clip;
}

/* box-grid-2-md solo define columnas en ≥768px; hace falta .box-grid (display:grid). */
.box-grid.box-grid-2-md,
.box-grid.port-priorities {
    gap: var(--boxp-grid-gap, var(--box-spacing, 1rem));
}

/* ------------------------------------------------------------
   Navegación
   ------------------------------------------------------------ */
[data-ui-context="public"] .box-public-nav .box-nav-links {
    justify-content: flex-end;
}

[data-ui-context="public"] .box-public-nav .box-nav-brand,
[data-ui-context="public"] .box-public-footer .box-nav-brand {
    gap: 0;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.port-hero-invert.box-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: var(--box-gray-0);
    min-height: min(90vh, 920px);
    padding-block-start: clamp(5.5rem, 14vh, 7rem);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.port-hero-invert .box-hero-inner {
    width: 100%;
    max-width: var(--boxp-container-wide, 1440px);
    margin-inline: auto;
    padding-inline: var(--boxp-gutter, 1rem);
}

.port-hero-eyebrow {
    display: inline-block;
    margin-bottom: var(--boxp-stack, 1rem);
    color: var(--box-brand-200);
}

.port-hero-invert .box-display {
    color: var(--box-gray-0);
}

.port-hero-lead {
    color: var(--box-gray-200);
}

.port-hero-roles {
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    font-weight: 300;
    color: var(--box-gray-300);
    line-height: 1.5;
}

.port-hero-roles .box-accent {
    margin-inline: 0.35rem;
    color: var(--box-brand-300);
}

.port-retrato {
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
}

.port-retrato img {
    object-position: top center;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   Secciones claras
   ------------------------------------------------------------ */
.port-prose {
    font-size: 1.05rem;
    line-height: 1.75;
}

.port-prose > p {
    color: var(--box-gray-700);
}

.port-about-grid {
    align-items: center;
}

.port-about-cards {
    margin-top: var(--boxp-grid-gap, 2rem);
    align-items: stretch;
}

.port-about-quotes blockquote,
.port-prose blockquote {
    margin: 0;
}

.port-callout-quote {
    position: relative;
    font-size: 1.15rem;
    line-height: 1.6;
}

.port-quote-mark {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: var(--box-brand-500);
}

.port-callout-faith {
    border-left: 4px solid var(--box-brand-500);
}

.port-card-list {
    margin: 0.5rem 0 0 1.1rem;
    padding: 0;
}

.port-card-list li + li {
    margin-top: 0.5rem;
}

.port-prose ul {
    margin: 0.75rem 0 0 1.1rem;
    padding: 0;
    color: var(--box-gray-600);
}

.port-prose ul li + li {
    margin-top: 0.65rem;
}

/* ------------------------------------------------------------
   Secciones oscuras (box-section-invert + hero)

   BoxUI fija color de título y párrafos con tokens claros; aquí
   replicamos el ajuste de perfil.css para legibilidad ≥ 4,5:1.
   ------------------------------------------------------------ */
[data-ui-context="public"] .box-section-invert :is(
    .box-section-head,
    .port-origin-copy,
    .port-contact
) :is(h1, h2, h3, h4, h5, h6, .port-titulo-seccion) {
    color: var(--box-gray-0);
}

[data-ui-context="public"] .box-section-invert .box-eyebrow,
[data-ui-context="public"] .port-hero-invert .box-eyebrow {
    color: var(--box-brand-300);
}

[data-ui-context="public"] .port-prose-on-dark,
[data-ui-context="public"] .port-prose-on-dark p,
[data-ui-context="public"] .box-section-invert .port-origin-copy > p {
    color: var(--box-gray-200);
}

[data-ui-context="public"] .box-section-invert .box-lead {
    color: var(--box-gray-200);
}

[data-ui-context="public"] .port-hero-invert .box-lead {
    color: var(--box-gray-200);
}

/* Tarjetas claras dentro de banda oscura: texto oscuro sobre fondo claro */
[data-ui-context="public"] .box-section-invert .box-card :is(h1, h2, h3, h4, h5, h6) {
    color: var(--box-gray-900);
}

[data-ui-context="public"] .box-section-invert .box-card :is(p, li) {
    color: var(--box-gray-600);
}

[data-ui-context="public"] .box-section-invert .box-card .box-muted {
    color: var(--box-gray-500);
}

[data-ui-context="public"] .box-section-invert .box-btn-invert,
[data-ui-context="public"] .port-hero-invert .box-btn-invert {
    --_bg: var(--box-gray-0);
    --_fg: var(--box-gray-900);
    --_bd: var(--box-gray-0);
    --_bg-hover: var(--box-gray-200);
}

[data-ui-context="public"] .box-section-invert .box-btn-outline {
    --_fg: var(--box-gray-0);
    --_bd: color-mix(in srgb, var(--box-gray-0) 45%, transparent);
    --_bg-hover: color-mix(in srgb, var(--box-gray-0) 14%, transparent);
}

[data-ui-context="public"] .box-section-invert .box-social,
[data-ui-context="public"] .port-hero-invert .box-social {
    color: var(--box-gray-300);
    border-color: color-mix(in srgb, var(--box-gray-0) 28%, transparent);
}

.port-blockquote {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    border-left: 4px solid var(--box-brand-400);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--box-gray-0);
}

/* ------------------------------------------------------------
   Raíces · foto
   ------------------------------------------------------------ */
[data-ui-context="public"] .box-section-invert .port-origin-place {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.85rem;
    border-radius: var(--boxp-radius-pill, 999px);
    border: 1px solid color-mix(in srgb, var(--box-gray-0) 22%, transparent);
    background: color-mix(in srgb, var(--box-gray-0) 10%, transparent);
    color: var(--box-gray-100);
    font-size: var(--boxp-text-sm, 0.875rem);
    font-weight: 600;
}

[data-ui-context="public"] .port-origin-place i {
    color: var(--box-brand-300);
}
#origin .box-grid-2-md {
    align-items: center;
    gap: var(--boxp-grid-gap, 1.5rem);
}

.port-foto-raices {
    border-radius: var(--box-radius-lg);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--box-gray-0) 12%, transparent);
    background: color-mix(in srgb, var(--box-gray-900) 60%, transparent);
    padding: 0.5rem;
}

.port-foto-raices img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--box-radius);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.port-foto-wrap {
    position: relative;
}

.port-foto-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--box-radius);
    background: color-mix(in srgb, #0f172a 88%, transparent);
    backdrop-filter: blur(8px);
    font-size: 0.85rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--box-gray-0) 12%, transparent);
    color: var(--box-gray-100);
}

/* ------------------------------------------------------------
   Bento · agradecimientos
   ------------------------------------------------------------ */
/* Dos columnas también en móvil: son tarjetas de icono + palabra. */
.box-grid.port-priorities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width >= 768px) {
    .box-grid.port-priorities {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.port-interests {
    margin-top: var(--boxp-grid-gap, 2rem);
}

/* Tablet: 2 columnas; la tercera tarjeta ocupa la fila completa. */
@media (768px <= width < 1200px) {
    .port-interests > :last-child {
        grid-column: 1 / -1;
    }
}

.port-priority-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(1.25rem, 3vw, 2rem) 1rem;
}

.port-priority-tile h3 {
    margin: 0;
}

.port-priority-tile i {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    color: var(--box-brand-600);
}

.port-gratitude-card {
    position: relative;
    overflow: hidden;
}

.port-gratitude-card .port-gratitude-watermark {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
    font-size: 5rem;
    opacity: 0.08;
    pointer-events: none;
    color: var(--box-gray-900);
}

/* ------------------------------------------------------------
   Contacto
   ------------------------------------------------------------ */
.port-contact-actions,
.port-contact-push,
.port-contact-socials {
    margin-top: var(--boxp-stack, 1.25rem);
}

.port-contact .box-hero-actions,
.port-contact-socials {
    justify-content: center;
}

/* Pie sin columnas de enlaces: sobra la doble línea y el relleno superior. */
[data-ui-context="public"] .box-public-footer {
    padding-block: 0;
}

[data-ui-context="public"] .box-public-footer .box-footer-bottom {
    border-top: 0;
    padding-block: 1.5rem;
}

.port-footer-lock {
    color: var(--box-gray-500);
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s;
}

.port-footer-lock:hover {
    color: var(--box-brand-500);
    opacity: 1;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

/* Mismo corte que box-hero-split en BoxUI (≤900px): retrato arriba y compacto. */
@media (width <= 900px) {
    .port-hero-invert.box-hero {
        min-height: auto;
        padding-block-end: var(--boxp-section-y-sm, 3rem);
    }

    .port-hero-invert.box-hero-split .box-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--boxp-stack, 1.25rem);
    }

    .port-hero-invert .box-hero-copy {
        text-align: center;
        align-items: center;
    }

    .port-hero-invert .box-hero-actions,
    .port-hero-invert .box-socials {
        justify-content: center;
    }

    .port-retrato {
        order: -1;
        width: clamp(8.5rem, 32vw, 11rem);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 3px solid color-mix(in srgb, var(--box-gray-0) 30%, transparent);
    }

    .port-retrato img {
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 47.99rem) {

    #origin .box-grid.box-grid-2-md {
        display: flex;
        flex-direction: column;
    }

    #origin .port-foto-wrap {
        order: 2;
    }

    #origin .port-origin-copy {
        order: 1;
    }

    .box-footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }
}