/*
 * copyright: división de publicaciones digitales barbar.cl | Archivo: style.css | version 4.9 | 2026-08-20-00:00 | Muestra aviso interno desde el botón de versión
 *
 * Desarrollo y propiedad del sistema
 * Este sitio web y su sistema de administración han sido diseñados y
 * desarrollados por BARBAR EDICIONES LIMITADA.
 *
 * La arquitectura del sistema, diseño de interfaz, estructura de navegación,
 * desarrollo, programación, bases de datos y soluciones técnicas implementadas
 * son propiedad de BARBAR EDICIONES LIMITADA — barbar.cl, salvo componentes,
 * bibliotecas o recursos de terceros sujetos a sus respectivas licencias.
 *
 * Queda prohibida la reproducción, distribución, reutilización, modificación
 * o implementación total o parcial del diseño o del sistema sin autorización
 * previa y por escrito de BARBAR EDICIONES LIMITADA.
 * © 2026 BARBAR EDICIONES LIMITADA · barbar.cl. Todos los derechos reservados.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@500;600&family=Roboto:wght@400&display=swap');

.label-hint { font-weight: 400; font-size: 0.72rem; opacity: 0.5; }
.form-group textarea.empresa-info-bloqueada {
    height: 5.5rem;
    min-height: 0;
    overflow: hidden;
    resize: none;
    font-size: 0.78rem;
    line-height: 1.4;
    cursor: not-allowed;
    user-select: none;
}

.autosave-status {
    margin-left: 0.6rem;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    vertical-align: middle;
}
.autosave-status.is-saving { opacity: 0.45; }
.autosave-status.is-saved  { color: #1a7f37; opacity: 1; }
.autosave-status.is-error  { color: #c0392b; opacity: 1; }

.slot-portada { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.78rem; cursor: pointer; }
.slot-portada input { cursor: pointer; }
.portada-summary-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.8rem; }
.portada-summary-item { position: relative; width: 120px; cursor: grab; }
.portada-summary-item:active { cursor: grabbing; }
.portada-summary-item.dragging { opacity: 0.25; }
.portada-summary-item img { display: block; width: 120px; height: 82px; object-fit: cover; background: #eee; }
.portada-summary-number { position: absolute; top: 0.35rem; left: 0.35rem; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; color: #fff; background: #000; font-size: 0.75rem; font-weight: 700; }
.portada-summary-group { display: block; margin-top: 0.3rem; overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black:      #000000;
    --white:      #ffffff;
    --gray-50:    #fafafa;
    --gray-100:   #f5f5f5;
    --gray-200:   #e8e8e8;
    --gray-400:   #aaaaaa;
    --sidebar-w:  230px;
    --max-w:      1200px;
    --site-gutter: 3rem;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--white);
    color: var(--black);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--black); }
img { display: block; max-width: 100%; }


/* ══════════════════════════════════════════════════════════════
   PUBLIC SITE
══════════════════════════════════════════════════════════════ */

/* ─── Navigation ─────────────────────────────────────────────── */
.site-nav-bar {
    background: #111111;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    max-width: none;
    margin: 0;
    padding: 10px var(--site-gutter);
}

.site-nav .brand {
    margin-right: auto;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.site-nav .brand-architecture {
    color: #fff;
    font-size: 1rem;
}

.site-nav a {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    text-decoration: none;
    color: #ffffff;
    transition: opacity 0.15s;
}

.site-nav a:hover,
.site-nav a.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ─── Page content ───────────────────────────────────────────── */
.page-wrapper {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--site-gutter) 6rem;
}

.page-header {
    margin-bottom: 4rem;
}

.page-header h1 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 0.6rem;
}

.page-header h2 {
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 2rem;
    font-style: italic;
}

.page-description {
    font-size: 1rem;
    line-height: 1.85;
    max-width: 62ch;
}

.proyecto-description {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* ─── Intro animation (primera visita) ──────────────────────── */
body.intro-active { overflow: hidden; }

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.intro-overlay.intro-out { opacity: 0; }

.intro-slides {
    position: absolute;
    inset: 0;
}

.intro-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.intro-slide.active { opacity: 1; }

/* Oscurece las miniaturas para que resalte el logo en inverso */
.intro-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.intro-logo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.brand-architecture {
    display: block;
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

.brand-architecture-light {
    margin-top: 0.22rem;
    color: #fff;
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    white-space: nowrap;
}

.intro-logo {
    width: 300px;
    max-width: 70vw;
    height: auto;
    object-fit: contain;
    /* Logo en inverso (blanco sobre el slideshow) */
    filter: invert(1) brightness(2);
    animation: introLogoIn 0.6s ease both;
}

.intro-logo-text {
    color: #fff;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: introLogoIn 0.6s ease both;
}

@keyframes introLogoIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Inicio page ────────────────────────────────────────────── */
.inicio-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Slideshow a pantalla completa (capa de fondo) */
.slideshow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--gray-100);
}

.slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.slideshow .slide.active {
    opacity: 1;
}

.inicio-logo-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2.5rem;
}

.inicio-logo-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
}

.inicio-logo {
    max-width: 320px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.inicio-logo-text {
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inicio-rut {
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    padding: 1.5rem 2.5rem 2rem;
}

/* ─── Image grid (public) ────────────────────────────────────── */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.image-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--gray-100);
    transition: opacity 0.2s;
}

.image-grid img:hover { opacity: 0.88; }

/* ─── Proyectos Lista (página pública independiente) ────────── */
.proyectos-lista-table {
    border-top: 1px solid var(--black);
}

.lista-row {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.lista-img { background: var(--gray-100); }

.lista-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lista-content {
    min-width: 0;
    padding-top: 0.1rem;
}

.lista-content h3 {
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.lista-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
}

.meta-item {
    font-size: 0.8rem;
    line-height: 1.45;
}

.meta-item strong { font-weight: 600; }

/* ─── Mensaje de estado/error en slots de subida ─────────────── */
.slot-msg {
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 0.35rem;
    opacity: 0.6;
}
.slot-msg:empty { display: none; }
.slot-msg.is-error {
    color: #b00020;
    opacity: 1;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════════ */

/* ─── Login ──────────────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
}

.login-box {
    width: 100%;
    max-width: 380px;
    padding: 3rem;
    border: 1px solid var(--black);
}

.login-logo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    opacity: 0.4;
}

.login-box h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.login-sub {
    font-size: 0.82rem;
    opacity: 0.45;
    margin-bottom: 2rem;
}

/* ─── Admin fixed page header ───────────────────────────────── */
.admin-page-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 10px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1.5rem 3.5rem 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--black);
}

.admin-page-header-info {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}

/* ─── Admin font override ────────────────────────────────────── */
.admin-layout,
.login-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── Admin layout ───────────────────────────────────────────── */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: var(--sidebar-w);
    background: var(--gray-100);
    border-right: 1px solid var(--black);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.sidebar-header {
    padding: 1.5rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--black);
}

.sidebar-brand {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
}

.sidebar-logo {
    display: block;
    max-height: 32px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
}

.sidebar-architecture {
    margin-top: 0.2rem;
    color: currentColor;
}

.sidebar-sub {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.38;
    margin-top: 0.15rem;
}

.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
}

.sidebar-nav .nav-section {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.35;
    padding: 1rem 1.5rem 0.3rem;
}

.sidebar-nav a {
    display: block;
    padding: 0.65rem 1.5rem;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--black);
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.1s;
}

.sidebar-nav a:hover { background: var(--gray-200); }

.sidebar-nav a.active {
    font-weight: 600;
    background: var(--white);
    border-left: 2px solid var(--black);
    padding-left: calc(1.5rem - 2px);
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--black);
}

.sidebar-footer a,
.logout-btn {
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--black);
    opacity: 0.45;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.sidebar-footer a:hover,
.logout-btn:hover { opacity: 1; }

.sidebar-version {
    display: block;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.7rem !important;
    line-height: 1.4;
}

.sidebar-version-date {
    display: block;
    font-size: 0.65rem;
    opacity: 0.7;
}

.admin-main {
    margin-left: var(--sidebar-w);
    flex: 1;
    padding: 5.5rem 3.5rem 3rem;
    max-width: calc(var(--max-w) + var(--sidebar-w));
}

.admin-page-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.admin-page-sub {
    font-size: 0.78rem;
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Dashboard status bar ──────────────────────────────────── */
.dash-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--black);
    margin-bottom: 1px;
    background: var(--gray-50);
}

.dash-status-empresa {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-logo {
    height: 36px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    border: 1px solid var(--gray-200);
    background: var(--white);
    padding: 3px;
}

.dash-logo-placeholder {
    height: 36px;
    width: 72px;
    border: 1px dashed var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    opacity: 0.4;
}

.dash-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dash-architecture {
    margin-top: 0.18rem;
    font-size: 0.45rem;
}

.dash-empresa-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.dash-status-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.dash-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--black);
}

.dash-badge-live  { background: var(--black); color: var(--white); }
.dash-badge-soon  { background: var(--white); color: var(--black); }
button.dash-badge {
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
button.dash-badge:hover { opacity: 0.7; }

.dash-nav-theme-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    white-space: nowrap;
}

.dash-nav-theme-form label { font-weight: 600; }

.dash-nav-theme-form select,
.dash-nav-theme-form button {
    font: inherit;
    border: 1px solid var(--black);
    border-radius: 0;
    padding: 0.3rem 0.45rem;
}

.dash-nav-theme-form select { background: var(--white); color: var(--black); }

.dash-nav-theme-form button {
    background: var(--black);
    color: var(--white);
    cursor: pointer;
}

.dash-nav-theme-form button:hover { opacity: 0.7; }

.dash-last-login {
    font-size: 0.72rem;
    opacity: 0.4;
}

.dash-slot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.dash-slot {
    width: 32px;
    height: 32px;
    border: 1px solid var(--gray-400);
    background: var(--white);
    overflow: hidden;
}

.dash-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-slot-filled {
    border-color: var(--black);
}

/* ─── Dashboard stack ────────────────────────────────────────── */
.dash-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1.5rem;
    background: var(--black);
}

.dash-panel {
    background: var(--white);
}

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.dash-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
    letter-spacing: 0.04em;
}

.dash-panel-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.dash-inline-form { display: flex; }

.dash-panel-body {
    padding: 1rem 1.5rem 1.5rem;
}

.dash-subsection-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.dash-subsection-title a {
    color: inherit;
    text-decoration: none;
}

.dash-subsection-title a:hover { text-decoration: underline; }

.dash-text-row {
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 0.3rem 0;
    border-top: 1px solid var(--gray-100);
    color: var(--black);
}

.dash-item-list {
    display: flex;
    flex-direction: column;
}

.dash-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: 2px;
    background: var(--white);
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.dash-item-row-link {
    text-decoration: none;
    color: var(--black);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.dash-item-row-link:hover {
    background: var(--gray-50);
    border-color: var(--black);
}

.dash-item-move {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.dash-move-form { display: inline; margin: 0; }

.dash-move-btn {
    width: 24px;
    height: 24px;
    line-height: 1;
    border: 1px solid var(--gray-400);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 2px;
    padding: 0;
}

.dash-move-btn:hover:not(:disabled) {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.dash-move-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.dash-item-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-left: auto;
    justify-content: flex-end;
}

.dash-item-thumb {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--gray-400);
    display: block;
}
.dash-item-thumb-wrap { position: relative; display: block; width: 32px; height: 32px; }
.dash-item-thumb-number { position: absolute; top: 1px; left: 1px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--black); color: var(--white); font-size: 0.55rem; font-weight: 700; line-height: 1; }

.dash-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1;
    min-width: 160px;
}

.dash-item-meta {
    font-size: 0.75rem;
    opacity: 0.55;
    padding: 0.3rem 0.6rem;
    background: var(--gray-50);
    border-radius: 2px;
    white-space: nowrap;
}

.dash-item-pct {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-left: auto;
    opacity: 0.35;
}

.dash-item-pct.pct-partial { opacity: 0.6; }
.dash-item-pct.pct-full    { opacity: 1; }

.dash-empty {
    font-size: 0.78rem;
    opacity: 0.3;
    padding: 0.5rem 0;
}

.dash-public-link {
    margin-top: 2rem;
    font-size: 0.8rem;
    opacity: 0.4;
}

/* ─── Legacy dash-card-wrap (modo portada toggle) ────────────── */
.dash-card-wrap { display: flex; flex-direction: column; }
.card-content-row { display: none; }
.card-arrow { display: none; }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-section {
    margin-bottom: 3rem;
}

.form-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--gray-200);
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.4rem;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    border: 1px solid var(--black);
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--white);
    color: var(--black);
    outline: none;
    transition: box-shadow 0.15s;
    -webkit-appearance: none;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 2px var(--black);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.7;
}

.form-group textarea.textarea-compact {
    min-height: 70px;
}

.form-group select {
    width: 100%;
    border: 1px solid var(--black);
    padding: 0.7rem 2.4rem 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--black);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: box-shadow 0.15s;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}

.form-group select:focus {
    box-shadow: 0 0 0 2px var(--black);
}

/* ─── X para eliminar imagen (sobre la imagen) ─────────────── */
.slot-img-wrap {
    position: relative;
    margin-bottom: 0.45rem;
}

.slot-img-wrap-sm {
    margin-bottom: 0;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.slot-del-input {
    display: none;
}

.slot-del-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    border: 0;
    padding: 0;
    border-radius: 2px;
}

.slot-del-x:hover {
    opacity: 0.7;
}

.slot-del-x svg {
    width: 12px;
    height: 12px;
    stroke: var(--black);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.slot-del-input:checked + .slot-del-x {
    background: var(--black);
}

.slot-del-input:checked + .slot-del-x svg {
    stroke: #fff;
}

/* ─── Radio buttons estilizados ─────────────────────────────── */
.form-group.radio-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.radio-group-label {
    width: 100%;
    margin-bottom: 0.4rem;
}

.radio-group-options {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
}

.radio-option input[type="radio"] {
    display: none;
}

.radio-option label {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--black);
    background: var(--white);
    color: var(--black);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0;
}

.radio-option input[type="radio"]:checked + label {
    background: var(--black);
    color: var(--white);
}

.radio-option label:hover {
    box-shadow: 0 0 0 2px var(--black);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 0.7rem 2rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
    -webkit-appearance: none;
}

.btn:hover { opacity: 0.68; }
.btn-full { width: 100%; margin-top: 0.5rem; }
.btn-outline { background: var(--white); color: var(--black); }

.btn-sm {
    padding: 0.45rem 1.2rem;
    font-size: 0.7rem;
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
    padding: 0.8rem 1rem;
    border: 1px solid var(--black);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--black);
}

.alert-success { background: var(--gray-50); }
.alert-error   { background: var(--gray-100); }

/* ─── SEO preview (simula un resultado de Google) ───────────── */
.seo-preview {
    max-width: 600px;
    padding: 1rem 1.2rem;
    border: 1px solid var(--gray-200);
    background: #fff;
    font-family: arial, sans-serif;
}
.seo-preview-url   { color: #202124; font-size: 0.8rem; margin-bottom: 0.2rem; }
.seo-preview-title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.2rem; }
.seo-preview-desc  { color: #4d5156; font-size: 0.85rem; line-height: 1.4; }

/* Variante compacta: vista previa dentro de una fila del resumen SEO Google (admin/seo_backend.php) */
.seo-preview-compact {
    margin-top: 0.6rem;
    padding: 0.7rem 0.9rem;
}
.seo-preview-compact .seo-preview-title { font-size: 1rem; }
.seo-preview-compact .seo-preview-desc  { font-size: 0.8rem; }

/* ─── Upload grid ────────────────────────────────────────────── */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.upload-slot {
    border: 1px solid var(--gray-200);
    padding: 0.6rem;
    background: var(--gray-50);
}

.upload-slot .slot-num {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.35;
    margin-bottom: 0.4rem;
}

.upload-slot .slot-preview {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--gray-200);
}

/* Pool de portadas: una fila por proyecto y miniaturas proporcionales. */
.intro-pool-projects {
    display: grid;
    gap: 0.5rem;
}

.intro-pool-project {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.intro-pool-project-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.intro-pool-project-images {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.intro-pool-thumbnail {
    display: block;
    width: auto;
    max-width: 7rem;
    height: 3.8rem;
    object-fit: contain;
    background: var(--gray-100);
}

.intro-pool-help,
.intro-duration-help {
    max-width: 44rem;
    font-size: 0.72rem;
    opacity: 0.58;
}

.intro-settings input[type="range"] {
    width: min(100%, 28rem);
    display: block;
    margin-top: 0.65rem;
}

.intro-duration-scale {
    width: min(100%, 28rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 0.25rem;
    font-size: 0.62rem;
    line-height: 1.2;
    color: var(--black);
}

.intro-duration-scale span {
    position: relative;
    padding-top: 0.6rem;
    text-align: center;
}

.intro-duration-scale span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gray-400);
}

.intro-duration-scale-all {
    font-weight: 700;
}

.intro-duration-scale-all::before {
    height: 4px !important;
    background: var(--black) !important;
}

.intro-duration-scale-off { color: var(--opus-magenta-dark, #9f286e); }
.intro-duration-scale-off::before { background: var(--opus-magenta, #c23c8a) !important; }

.intro-duration-scale-recommended { color: var(--opus-cyan-dark, #006f82); font-weight: 700; }
.intro-duration-scale-recommended::before { height: 4px !important; background: var(--opus-cyan, #008da3) !important; }

@media (max-width: 700px) {
    .intro-pool-project {
        grid-template-columns: 1fr auto;
    }

    .intro-pool-project-images {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.upload-slot .no-img {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    border: 1px dashed var(--gray-400);
    font-size: 0.62rem;
    opacity: 0.45;
    margin-bottom: 0.45rem;
}

.upload-slot input[type="file"] {
    width: 100%;
    font-size: 0.68rem;
    color: var(--black);
    margin-bottom: 0.35rem;
}

.delete-check {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    opacity: 0.5;
}

.delete-check input[type="checkbox"] {
    width: 12px;
    height: 12px;
    cursor: pointer;
    accent-color: var(--black);
}

/* ─── Grid reordenable (drag & drop de imágenes) ─────────────── */
.reorder-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.reorder-grid.reorder-saving {
    opacity: 0.55;
    pointer-events: none;
}

.reorder-card {
    border: 1px solid var(--gray-200);
    padding: 0.6rem;
    background: var(--gray-50);
    cursor: grab;
    position: relative;
    will-change: transform;
}

.reorder-card:active { cursor: grabbing; }

/* La tarjeta arrastrada queda como hueco/placeholder mientras las demás se deslizan */
.reorder-card.dragging {
    opacity: 0.25;
    background: var(--gray-100);
    border-style: dashed;
    border-color: var(--black);
}

.reorder-card.dragging * {
    visibility: hidden;
}

.reorder-handle {
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 2px;
    opacity: 0.35;
    margin-bottom: 0.4rem;
    user-select: none;
}

.reorder-card .slot-preview {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--gray-200);
}

.reorder-meta {
    font-size: 0.62rem;
    color: #666;
    margin-top: 0.4rem;
}

.reorder-empty {
    font-size: 0.8rem;
    opacity: 0.5;
    font-style: italic;
}

.image-group-section + .image-group-section { margin-top: 2.5rem; }
.image-group-count { font-weight: 400; opacity: 0.45; }
.image-group-help { margin: -0.5rem 0 1rem; font-size: 0.78rem; opacity: 0.55; }
.image-group-upload { margin-top: 0.75rem; }

/* ─── Logo upload (empresa) ──────────────────────────────────── */
.logo-preview {
    width: 180px;
    height: 100px;
    object-fit: contain;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

.logo-preview-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.75rem;
}

.logo-preview-lockup .logo-preview {
    margin-bottom: 0;
}

.preview-architecture {
    margin-top: 0.18rem;
}

.logo-placeholder {
    width: 180px;
    height: 100px;
    border: 1px dashed var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.logo-inv-preview {
    background: var(--black);
    border-color: var(--black);
}

.logo-preview-lockup-inv {
    padding-bottom: 0.4rem;
    background: var(--black);
    color: #fff;
}

.logo-inv-placeholder {
    background: var(--black);
    color: #fff;
    border-color: var(--black);
    opacity: 1;
}

/* ─── Layout dividido 50/50 (Proyectos) ─────────────────────── */
.split-body {
    margin: 0;
}

.split-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.split-left {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;   /* solo envuelve el logo; el menú (absoluto) queda al lado */
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 25px var(--site-gutter);
    box-sizing: border-box;
    z-index: 100;  /* logo + menú siempre por encima del contenido y overlays */
}

.split-brand-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 0.7rem;
}

.split-brand-logo {
    height: 30px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Logo inverso: superpuesto al normal, aparece al colapsar (rectángulo negro) */
.split-brand-logo-inv {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.35s ease, left 0.35s ease, top 0.35s ease;
    pointer-events: none;
}
.split-left.collapsed .split-brand-logo-inv {
    opacity: 1;
    left: 10px;   /* compensa el padding del rectángulo colapsado */
    top: 10px;
}
.split-left.collapsed .split-logo-box .split-brand-logo:not(.split-brand-logo-inv) {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.split-brand-text {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1.1;
}

/* Caja detrás del logo: fondo transparente que se vuelve rectángulo negro al colapsar (botón de menú) */
.split-logo-box {
    display: inline-block;
    position: relative;
    line-height: 0;
    background-color: transparent;
    transition: background-color 0.35s ease, padding 0.35s ease, margin 0.35s ease;
}
.split-left.collapsed .split-logo-box {
    background-color: var(--black);
    cursor: pointer;
    /* rectángulo 10px más grande por cada lado (borde de seguridad del logo), sin desplazar el logo */
    padding: 10px;
    margin: -10px;
    z-index: 2;
}

.split-brand-tagline {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--black);
    letter-spacing: 0.05em;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Al colapsar (scroll): "arquitectura" se oculta bajo el rectángulo negro */
.split-left.collapsed .split-brand-tagline {
    opacity: 0;
    transform: translateY(-22px);
    pointer-events: none;
}
.split-left.collapsed.menu-open .split-brand-tagline {
    opacity: 1;
    transform: translateY(0);
}

/* La grilla principal de Proyectos muestra solo el logotipo. */
.proyecto-detalle-body .split-brand-tagline,
.page-nosotros .split-brand-tagline {
    display: none;
}

.page-proyectos .split-brand-tagline {
    font-size: 0.55rem;
    align-self: flex-start;
    display: flex;
    justify-content: space-between;
    letter-spacing: 0;
    width: 75%;
    white-space: nowrap;
    animation: splitBrandTaglineFadeIn 1.6s ease 0.35s both;
}

@keyframes splitBrandTaglineFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Contenedor fijo a lo ancho del viewport; cada link se posiciona por su cuenta */
.split-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 5;
}

/* El control se habilita únicamente dentro de la regla móvil. */
.split-menu-toggle { display: none; }

.split-nav a { white-space: nowrap; }

/* Sin flecha */
.split-nav-arrow { display: none; }

.split-nav a {
    position: fixed;
    top: 25px; /* alineado con el logo */
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    line-height: 1;
    background-color: transparent;
    /* mismo funcionamiento que el logo: rectángulo negro al colapsar */
    transition: background-color 0.35s ease, padding 0.35s ease, margin 0.35s ease, color 0.35s ease;
}

/* Proyectos: centrado en el viewport */
.split-nav a:nth-child(1) {
    left: 50%;
    transform: translateX(-50%);
    isolation: isolate;
}
.split-nav a:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.split-nav a:nth-child(1)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: right 0.35s ease, bottom 0.35s ease, left 0.35s ease, opacity 0.35s ease;
}
.split-nav a:nth-child(1).active { border-bottom: 0; }
.split-nav a:nth-child(1).active::after { opacity: 1; }

/* Nosotros: alineado al borde derecho con el mismo margen del sitio. */
.split-nav a:nth-child(2) {
    right: var(--site-gutter);
}

/* Flecha SVG a la izquierda: oculta y desplazada, aparece en hover/activo */
.split-nav-arrow {
    width: 0.85em;
    height: 0.85em;
    flex: 0 0 auto;
    margin-right: 0;
    max-width: 0;
    opacity: 0;
    transform: translateX(-4px);
    overflow: visible;
    fill: none;
    stroke: var(--black);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.25s ease, max-width 0.25s ease, margin-right 0.25s ease, transform 0.25s ease;
}

.split-nav a:hover .split-nav-arrow {
    opacity: 1;
    max-width: 1.2em;
    margin-right: 0.4em;
    transform: translateX(0);
}

/* Link seleccionado: sin flecha, línea (blanca sobre el rectángulo) hasta el borde */
.split-nav a.active .split-nav-arrow { display: none; }
.split-nav a.active {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.3rem;
}

/* Colapsado (scroll): cada link se vuelve un rectángulo negro con borde de
   seguridad de 10px, igual que el logo. El texto pasa a blanco. */
.split-left.collapsed .split-nav a {
    background-color: var(--black);
    color: #fff;
    padding: 10px;
    margin: -10px;
}
/* El enlace centrado conserva su ancho; solo el fondo crece detrás de él. */
.split-left.collapsed .split-nav a:nth-child(1) {
    background-color: transparent;
    padding: 0;
    margin: 0;
}
.split-left.collapsed .split-nav a:nth-child(1).active {
    padding-bottom: 0;
    border-bottom: 0;
}
.split-left.collapsed .split-nav:not(.nav-scroll-white) a:nth-child(1)::before {
    background-color: var(--black);
}
.split-left.collapsed .split-nav a:nth-child(1)::before {
    opacity: 1;
    transform: scale(1);
}
.split-left.collapsed .split-nav a:nth-child(1).active::after {
    right: -10px;
    bottom: -10px;
    left: -10px;
}
.split-left.collapsed .split-nav-arrow { stroke: #fff; }

/* Variante blanca elegible desde el dashboard: conserva el logo normal negro
   y usa cajas blancas translúcidas con efecto glass al colapsar el nav. */
.split-left.collapsed .nav-scroll-white .split-logo-box {
    background-color: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(5px) saturate(125%);
    -webkit-backdrop-filter: blur(5px) saturate(125%);
}
.split-left.collapsed .nav-scroll-white .split-logo-box .split-brand-logo:not(.split-brand-logo-inv) {
    opacity: 1;
}
.split-left.collapsed .nav-scroll-white .split-brand-logo-inv {
    opacity: 0;
}
.split-left.collapsed .split-nav.nav-scroll-white a {
    background-color: rgba(255, 255, 255, 0.52);
    color: var(--black);
    backdrop-filter: blur(5px) saturate(125%);
    -webkit-backdrop-filter: blur(5px) saturate(125%);
}
.split-left.collapsed .split-nav.nav-scroll-white .split-nav-arrow {
    stroke: var(--black);
}
.split-left.collapsed .split-nav.nav-scroll-white a:nth-child(1) {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.split-left.collapsed .split-nav.nav-scroll-white a:nth-child(1)::before {
    background-color: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(5px) saturate(125%);
    -webkit-backdrop-filter: blur(5px) saturate(125%);
}


/* Proyectos a la DERECHA (65%) */
.split-right {
    width: 65vw;
    margin-left: 35vw;
}

/* Marca Barbar al final de Proyectos: los arcos se levantan al entrar al viewport. */
.proyectos-footer-mark {
    position: relative;
    width: 30px;
    margin: 5rem var(--site-gutter) 25px auto;
    line-height: 0;
    cursor: default;
}

.proyecto-footer-mark-mobile {
    display: none;
}

/* Misma silueta de BARBAR que el footer compartido, siempre visible en la
   ficha individual sin depender de la animación de entrada de otras páginas. */
.proyecto-footer-mark-arc {
    fill: #000;
    transform-box: fill-box;
    transform-origin: center bottom;
    /* Respaldo visible: la animación nunca puede dejar la marca oculta. */
    opacity: 1;
    transform: none;
}

.proyecto-footer-mark.is-animation-ready .proyecto-footer-mark-arc {
    opacity: 0;
    transform: scaleY(0);
}

.proyecto-footer-mark.is-animation-ready.is-visible .proyecto-footer-mark-arc {
    animation: proyectosFooterArcIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.proyecto-footer-mark.is-animation-ready.is-visible .proyecto-footer-mark-arc:nth-child(1) { animation-delay: 0.08s; }
.proyecto-footer-mark.is-animation-ready.is-visible .proyecto-footer-mark-arc:nth-child(2) { animation-delay: 0.2s; }
.proyecto-footer-mark.is-animation-ready.is-visible .proyecto-footer-mark-arc:nth-child(3) { animation-delay: 0.32s; }
.proyecto-footer-mark.is-animation-ready.is-visible .proyecto-footer-mark-arc:nth-child(4) { animation-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
    .proyecto-footer-mark-arc {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

.proyectos-footer-mark-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.proyectos-footer-mark-link {
    display: block;
    line-height: 0;
}

.proyectos-footer-mark-credit {
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    width: 82px;
    height: 0.9rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateY(-50%);
    pointer-events: none;
}

.proyectos-footer-mark-designed,
.proyectos-footer-mark-barbar {
    position: absolute;
    right: 0;
    top: 50%;
    white-space: nowrap;
    opacity: 0;
    transform: translate(4px, -50%);
}

.proyectos-footer-mark:hover .proyectos-footer-mark-designed {
    animation: proyectosFooterDesigned 1.1s ease both;
}

.proyectos-footer-mark:hover .proyectos-footer-mark-barbar {
    animation: proyectosFooterBarbar 0.3s ease 0.85s both;
}

.proyectos-footer-mark-reverse-r {
    display: inline-block;
    transform: scaleX(-1);
}

@keyframes proyectosFooterDesigned {
    0% {
        opacity: 0;
        transform: translate(4px, -50%);
    }
    18%, 62% {
        opacity: 1;
        transform: translate(0, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-2px, -50%);
    }
}

@keyframes proyectosFooterBarbar {
    from {
        opacity: 0;
        transform: translate(4px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .proyectos-footer-mark:hover .proyectos-footer-mark-designed { animation: none; }
    .proyectos-footer-mark:hover .proyectos-footer-mark-barbar {
        opacity: 1;
        transform: translate(0, -50%);
        animation: none;
    }
}

.proyectos-footer-mark-arc {
    fill: var(--black);
    transform-box: fill-box;
    transform-origin: center bottom;
    opacity: 0;
    transform: scaleY(0);
}

.proyectos-footer-mark.is-visible .proyectos-footer-mark-arc {
    animation: proyectosFooterArcIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.proyectos-footer-mark.is-visible .proyectos-footer-mark-arc:nth-child(1) { animation-delay: 0.08s; }
.proyectos-footer-mark.is-visible .proyectos-footer-mark-arc:nth-child(2) { animation-delay: 0.2s; }
.proyectos-footer-mark.is-visible .proyectos-footer-mark-arc:nth-child(3) { animation-delay: 0.32s; }
.proyectos-footer-mark.is-visible .proyectos-footer-mark-arc:nth-child(4) { animation-delay: 0.44s; }

@keyframes proyectosFooterArcIn {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .proyectos-footer-mark-arc {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ─── Ficha del proyecto: panel fijo a la izquierda (40%) ──── */
.proyecto-detalle-body .split-right {
    width: 60vw;
    margin-left: 40vw;
}
.split-fichas-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 35vw;
    height: 100vh;
    /* padding-top despeja el logo fijo (arriba-izquierda) para que no tape el título */
    padding: 90px var(--site-gutter) 25px;
    box-sizing: border-box;
    overflow-y: auto;
}
.proyecto-detalle-body .split-fichas-panel {
    width: 40vw;
    /* Alinea título y ficha con el margen lateral de la grilla derecha. */
    padding-left: var(--site-gutter);
}
.split-fichas {
    width: 100%;
}

.split-ficha {
    /* Compensa el padding derecho del panel para usar todo su ancho disponible. */
    margin-right: calc(-1 * var(--site-gutter));
    min-height: calc(100dvh - 115px);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.split-ficha-title {
    font-family: inherit;   /* Inter, como el resto del 35% */
    font-weight: 200;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--black);
    margin: 0;
    animation: splitFichaFadeIn 0.55s ease both;
}

.split-ficha-data {
    margin: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
    color: var(--black);
    animation: splitFichaFadeIn 0.55s ease 0.16s both;
}
.split-ficha-data-group {
    border-top: 1px solid var(--black);
    margin-top: 2rem;
    padding-top: 5px;
}
.split-ficha-details {
    margin-top: auto;
}
.split-ficha-data .ficha-row {
    display: grid;
    /* El valor comienza alineado con la segunda columna de los créditos. */
    grid-template-columns: calc((100% + 1.25rem) / 3) 1fr;
    align-items: baseline;
    gap: 0;
    margin-top: 0.35rem;   /* espaciado entre categorías */
}
.split-ficha-data .ficha-row:first-child {
    margin-top: 0;
}
.split-ficha-data dt {
    font-size: 0.75rem;
    font-weight: 300;   /* etiqueta en thin, negro */
    color: var(--black);
    line-height: calc(1.3em - 3px);
}
.split-ficha-data dd {
    font-size: 0.75rem;
    font-weight: 400;   /* valor en normal, negro */
    color: var(--black);
    margin: 0;
    line-height: calc(1.3em - 3px);
    text-align: left;   /* valor alineado a la izquierda; multilínea salta y queda a la izquierda */
}

.split-ficha-creditos-accordion {
    border-top: 0;
    margin-top: 3px;
    padding-top: 0;
}
.split-ficha-creditos-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 400;
    line-height: 1.3;
    list-style: none;
    text-transform: uppercase;
}
.split-ficha-creditos-accordion > summary::-webkit-details-marker { display: none; }
.split-ficha-creditos-chevron {
    width: 0.8rem;
    height: 0.5rem;
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}
.split-ficha-creditos-accordion[open] .split-ficha-creditos-chevron {
    transform: rotate(180deg);
}
.split-ficha-creditos-accordion[open] > summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
    padding-bottom: 5px;
}

/* En escritorio, los créditos abiertos suben sobre la información de ficha. */
@media (min-width: 901px) {
    /* La ficha y los créditos abiertos están contenidos en la composición
       fija: no deben generar barras de desplazamiento independientes. */
    .split-fichas-panel {
        overflow-y: hidden;
    }
    .split-ficha-title {
        margin-bottom: 1rem;
    }
    .split-ficha-data dt,
    .split-ficha-data dd {
        font-size: 0.9rem;
    }
    .split-ficha-data-group {
        margin-top: auto;
    }
    .split-ficha-details {
        position: relative;
        z-index: 2;
        margin-top: 1.5rem;
    }
    .split-ficha-creditos-accordion[open] > summary {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .split-ficha-creditos-accordion[open] .split-ficha-creditos-content {
        position: fixed;
        top: 50dvh;
        right: auto;
        bottom: 45px;
        left: 0;
        z-index: 1;
        width: 40vw;
        overflow: hidden;
        box-sizing: border-box;
        /* Alinea el inicio con la ficha y conserva su aire lateral derecho. */
        padding: 1rem 25px 1rem 3.5rem;
        background: #fff;
    }
}
/* Grupo 2: tres columnas, con título sobre el contenido de cada crédito. */
.split-ficha-creditos {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.1rem;
    row-gap: 0.75rem;
    font-size: 0.65rem;
    line-height: 1.3;
    animation: splitFichaFadeIn 0.55s ease 0.24s both;
}
.split-ficha-creditos .ficha-credito {
    min-width: 0;
}
.split-ficha-creditos dt {
    margin: 0 0 0.15rem;
    font-weight: 300;
    color: var(--black);
    text-transform: uppercase;
}
.split-ficha-creditos dd {
    margin: 0;
    font-weight: 400;
    color: var(--black);
    /* Los créditos son información completa: nunca se truncan. */
    overflow-wrap: anywhere;
}

/* Descripción en la ficha (panel izquierdo, 35%), bajo los datos */
.split-ficha-desc {
    margin: 0;
    padding-bottom: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--black);
    text-align: left;
    animation: splitFichaFadeIn 0.55s ease 0.08s both;
}
.split-ficha-desc p { margin: 0; }
.split-ficha-desc p + p { margin-top: 0.45rem; }

@keyframes splitFichaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .split-ficha-title,
    .split-ficha-desc,
    .split-ficha-data,
    .split-ficha-creditos,
    .page-proyectos .split-brand-tagline,
    .nosotros-fade-intro,
    .nosotros-fade-foto,
    .nosotros-fade-equipo,
    .nosotros-fade-proyectos {
        animation: none;
    }

    .thumbs-fade .proyectos-lista-section .proyecto-externo-item {
        opacity: 1;
        transition: none;
    }
    .experiencia-fade .nosotros-proyectos .proyecto-externo-item {
        opacity: 1;
        transition: none;
    }
}

.split-project-list {
    display: flex;
    flex-direction: column;
    position: relative;
    /* Slot 1: el viewport se divide en N+2 franjas iguales (N = nº de proyectos):
       una franja vacía arriba (::before), una por proyecto y una vacía abajo
       (::after). Todas reparten 100dvh a partes iguales via flex:1, así el aire
       superior e inferior es proporcional y nunca se suma por fuera del viewport.
       Al hacer scroll aparece el slot 2 "Otros proyectos". */
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
}

/* Franjas vacías espaciadoras (arriba y abajo), del mismo alto que cada proyecto.
   min-height:0 les permite encoger hasta su 1/(N+2) exacto. */
.split-project-list::before,
.split-project-list::after {
    content: "";
    flex: 1 1 0;
    min-height: 0;
}

/* Cada proyecto ocupa una franja igual y centra su tarjeta verticalmente.
   min-height:0 anula el min-height:auto de flex para que las franjas sean
   exactamente iguales aunque el título sea más alto que 1/(N+2). */
.split-project-list .project-item {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
}

/* Señal de que, después del primer bloque de proyectos, continúa la sección
   Otros Estudios. Se sitúa en la franja inferior libre sin alterar la división
   automática del viewport (N proyectos + dos franjas vacías). */
.project-list-scroll-cue {
    position: absolute;
    left: var(--site-gutter);
    bottom: clamp(12px, 2.2dvh, 26px);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--black);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.09em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

.project-list-scroll-cue:hover,
.project-list-scroll-cue:focus-visible {
    opacity: 0.55;
}

.project-list-scroll-cue span:last-child {
    font-size: 1rem;
    line-height: 0.7;
}

.split-project-list .project-card-title-group {
    display: block;
    padding: 20px var(--site-gutter);
    width: 100%;
    box-sizing: border-box;
}

.split-project-list .project-card-name {
    display: block;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-weight: 100;
    font-size: 5.2rem;
    font-stretch: normal;
    font-synthesis: none;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 1;
    /* Nunca parte en dos líneas: un script ajusta el tamaño para que el
       título más largo quepa en una sola línea (ver proyectos.php). */
    white-space: nowrap;
}

.split-project-list .project-card-meta {
    display: block;
    margin-top: 0.05rem;
    color: var(--black);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.split-project-list .project-card img {
    opacity: 1;
}

/* Tarjeta como enlace a la página individual del proyecto */
.split-project-list .project-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;   /* ocupa toda la franja para que las miniaturas se midan contra ella */
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: none;
    text-align: left;
}

/* Miniatura de portada: se muestra en el área del 35% (fuera del 65%),
   pegada a la derecha contra el límite con un espacio y a la altura del título. */
.split-project-list .project-card-thumbs {
    position: absolute;
    top: 0;                /* ocupa todo el alto de la línea */
    bottom: 0;             /* para centrar verticalmente las miniaturas */
    right: 100%;           /* fuera del área 65%, dentro del 35% de la izquierda */
    width: calc(35vw - var(--site-gutter) - var(--site-gutter)); /* área izquierda menos sus márgenes */
    margin-right: var(--site-gutter); /* espacio respecto al límite entre las dos áreas */
    display: flex;
    flex-wrap: nowrap;     /* siempre en una sola fila, nunca se montan */
    justify-content: flex-end; /* pegadas al límite del 65% */
    align-items: center;   /* centradas verticalmente en la línea */
    gap: 8px;
    transition: opacity 0.3s ease;
}
.split-project-list .project-card-thumbs picture {
    display: flex;
    height: 100%;
    align-items: center;
}
.split-project-list .project-card-thumb {
    width: auto;
    height: 80%;           /* 80% del alto de la franja; el ancho respeta la proporción */
    max-width: 100%;
    object-fit: contain;
    display: block;
    /* El fade lo dispara JS (clase .is-loaded) recién cuando TODAS las
       miniaturas de la tarjeta terminaron de decodificar (img.decode()),
       así la animación nunca compite con el decodificado y se ve fluida.
       El escalonado se logra con transition-delay por índice (--thumb-i).
       Por defecto son visibles: solo se ocultan si el JS activa el modo
       fade (body.thumbs-fade), de modo que sin JS nunca quedan invisibles. */
    transition: opacity 0.45s ease;
    transition-delay: calc(var(--thumb-i, 0) * 0.08s);
}

.thumbs-fade .split-project-list .project-card-thumb {
    opacity: 0;
}
.thumbs-fade .split-project-list .project-card-thumb.is-loaded {
    opacity: 1;
}

/* Título: participa de la cascada por fila (miniaturas → título → sig. fila).
   Arranca oculto solo con JS (body/​html.thumbs-fade); el script lo revela
   tras las miniaturas de su misma fila. */
.split-project-list .project-card-title-group {
    transition: opacity 0.45s ease;
}
.thumbs-fade .split-project-list .project-card-title-group {
    opacity: 0;
}
.thumbs-fade .split-project-list .project-card-title-group.is-loaded {
    opacity: 1;
}

@media (max-width: 900px) {
    .split-page {
        flex-direction: column;
    }
    .split-left {
        order: -2;
        position: relative;
        width: 100%;
        height: auto;
        padding: 25px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .split-brand-container {
        order: 1;
        position: relative;
        z-index: 2;
        align-items: flex-start;
        margin-bottom: 0;
        transition: opacity 0.2s ease;
    }
    .split-menu-toggle {
        order: 2;
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        margin-right: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--black);
        cursor: pointer;
    }
    .split-menu-toggle-icon {
        display: flex;
        width: 1.35rem;
        flex-direction: column;
        gap: 5px;
    }
    .split-menu-toggle-icon i {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    .split-nav {
        position: absolute;
        z-index: 1;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        /* La página Nosotros compacta su cabecera; esta altura fija mantiene
           la franja desplegable alineada igual que en Proyectos. */
        height: 80px;
        /* Reserva a la derecha el área de la X del menú abierto. */
        padding: 0 70px 0 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        gap: 0;
        overflow: hidden;
        white-space: nowrap;
        /* 10 % transparente: conserva un panel blanco legible y deja percibir
           sutilmente el contenido desenfocado que hay detrás. */
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-100%);
        transition: transform 0.35s ease, opacity 0.2s ease;
    }
    .split-left.menu-open .split-nav {
        /* El panel debe quedar sobre logo y botón para que sus enlaces reciban
           el toque en iOS/Android. */
        z-index: 3;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .split-left.menu-open .split-nav a {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }
    .split-left.menu-open .split-menu-toggle {
        z-index: 4;
    }
    .split-left.menu-open .split-brand-container {
        opacity: 0;
        pointer-events: none;
    }
    .split-nav a,
    .split-nav a:nth-child(1),
    .split-nav a:nth-child(2) {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        animation: none;
        transition: none;
        margin: 0;
        padding: 0;
        font-size: 1.2rem;
    }
    .split-nav a.active {
        border-bottom: 0;
        padding-bottom: 0;
    }
    /* Proyectos ya conserva su subrayado mediante su pseudo-elemento; el
       segundo enlace necesita declararlo directamente en móvil. */
    .split-nav a:nth-child(2).active {
        border-bottom: 1px solid currentColor;
        padding-bottom: 0.3rem;
    }
    .split-left.menu-open .split-menu-toggle-icon i:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .split-left.menu-open .split-menu-toggle-icon i:nth-child(2) {
        opacity: 0;
    }
    .split-left.menu-open .split-menu-toggle-icon i:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .split-right {
        width: 100%;
        margin-left: 0;
    }
    .proyecto-detalle-body .split-right {
        width: 100%;
        margin-left: 0;
    }
    .nosotros-main {
        padding: 2rem 25px 3rem;
    }
    .split-fichas-panel {
        order: -1;
        position: static;
        width: 100%;
        height: auto;
        padding: 2rem 25px 3rem;
    }
    .proyecto-detalle-body .split-fichas-panel {
        width: 100%;
        padding-left: 25px;
    }
    .split-ficha {
        margin-right: 0;
        min-height: 0;
        display: block;
    }
    .split-ficha-details {
        margin-top: 1.5rem;
        border-top: 0;
        padding-top: 0;
    }
    .split-ficha-data-group {
        border-top: 1px solid var(--black);
        margin-top: 1.5rem;
        padding-top: 0.75rem;
    }
    .split-ficha-data .ficha-row {
        grid-template-columns: 140px 1fr;
        gap: 0 15px;
    }
    .split-ficha-desc {
        font-size: 0.95rem;
    }
    .split-ficha-data dt,
    .split-ficha-data dd {
        font-size: 0.8rem;
    }
    .split-ficha-creditos-accordion > summary,
    .split-ficha-creditos {
        font-size: 0.7rem;
    }

    /* Detalle de proyecto: en móvil la ficha es la secuencia de lectura.
       Se oculta la composición de escritorio y se conserva un único margen
       exterior de 25px para texto, portada, video y galería. */
    .proyecto-desktop-media { display: none; }
    .proyecto-mobile-hero,
    .proyecto-mobile-video,
    .proyecto-mobile-gallery,
    .proyecto-mobile-planimetrias { display: block; }
    .proyecto-mobile-hero {
        margin: 0 0 1.5rem;
    }
    .proyecto-mobile-hero img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: initial;
    }
    .proyecto-mobile-video {
        position: relative;
        margin: 1.75rem 0;
    }
    .proyecto-mobile-video .proyecto-video-player {
        max-height: none;
        object-fit: initial;
    }
    .proyecto-mobile-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .proyecto-mobile-gallery img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: initial;
    }
    /* En móvil, las imágenes seleccionadas como L conservan su jerarquía
       editorial y abarcan las dos columnas de la galería. */
    .proyecto-mobile-gallery img.pig-l {
        grid-column: 1 / -1;
    }
    .proyecto-mobile-planimetrias {
        margin-top: 1.75rem;
    }
    /* Proyectos en móvil: filas consecutivas de miniatura + ficha breve.
       Solo se conserva la primera portada, a 100px de alto y ancho proporcional. */
    .split-project-list {
        height: auto;
        /* Iguala el margen exterior de la lista principal al de Otros Estudios. */
        padding-inline: 25px;
        box-sizing: border-box;
    }
    .project-list-scroll-cue {
        position: static;
        display: inline-flex;
        margin: 2rem 0 0.5rem;
    }
    .split-project-list::before,
    .split-project-list::after {
        display: none;
    }
    .split-project-list .project-item {
        display: block;
        flex: 0 0 auto;
        min-height: 0;
        border-top: 0;
    }
    .split-project-list .project-card {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: center;
        column-gap: 50px;
        height: auto;
        padding: 0.75rem 0;
        box-sizing: border-box;
    }
    .split-project-list .project-card-thumbs {
        position: static;
        width: auto;
        height: 100px;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        justify-self: end;
        justify-content: flex-end;
    }
    .split-project-list .project-card-thumbs picture {
        display: none;
        height: 100px;
    }
    .split-project-list .project-card-thumbs picture:first-child {
        display: block;
    }
    .split-project-list .project-card-thumb {
        display: block;
        width: auto;
        max-width: none;
        height: 100px;
    }
    .split-project-list .project-card-thumbs picture:first-child .project-card-thumb {
        width: auto;
        height: 100px;
        object-fit: contain;
    }
    .split-project-list .project-card-title-group {
        grid-column: 2;
        min-width: 0;
        padding: 0;
    }
    .split-project-list .project-card-name {
        font-size: clamp(1.5rem, 7.5vw, 2.4rem);
        font-weight: 200;
        white-space: normal;
    }
    .split-project-list .project-card-meta {
        margin-top: 0.35rem;
        font-size: 0.7rem;
    }

}

.project-card-loc {
    font-size: 1rem;
    font-style: italic;
    opacity: 0.85;
}

/* ─── Project grid margin top (modo mixto) ──────────────────── */
.project-grid-mt { margin-top: 4rem; }

/* ─── Grilla de imágenes por tamaño (S/M/L) en vista de proyecto ─── */
.proyecto-image-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
    align-items: start;
    /* padding-top despeja el logo/menú fijo; laterales dan aire dentro del 65% */
    padding: 90px var(--site-gutter) 3.5rem;
    box-sizing: border-box;
}

.proyecto-image-grid img {
    width: 100%;
    height: auto;
    display: block;
    /* ninguna imagen supera el alto del viewport (menos offset del logo y margen
       inferior); las verticales se contienen y quedan con paspartú lateral */
    max-height: calc(100vh - 90px - 3.5rem);
    object-fit: contain;
}

/* Obra se muestra siempre en blanco y negro, incluso si la imagen fue
   trasladada a este grupo después de haberse cargado originalmente. */
.proyecto-image-grid img.is-obra,
.proyecto-mobile-gallery img.is-obra,
.lightbox-img.is-obra {
    filter: grayscale(100%);
}

/* Fade-in al entrar en el viewport (scroll up/down). Solo activo cuando JS
   marca .pig-fade en el grid; sin JS las imágenes se ven normales.
   Se usa animación (no transition) para que el fade corra siempre desde el
   inicio al añadir .is-visible, incluso con la imagen cacheada en un reload. */
.proyecto-image-grid.pig-fade img {
    opacity: 0;
}
.proyecto-image-grid.pig-fade img.is-visible {
    animation: pigFadeIn 0.7s ease forwards;
}
@keyframes pigFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.proyecto-image-grid .pig-l { grid-column: span 6; }
.proyecto-image-grid .pig-m { grid-column: span 3; }
.proyecto-image-grid .pig-s { grid-column: span 2; }

/* Portada: la primera imagen ocupa el alto del viewport (menos el offset del
   logo fijo) y se centra con object-fit:contain → márgenes blancos = paspartú */
.proyecto-image-grid > img:first-child,
.proyecto-image-grid > .pig-placeholder:first-child {
    grid-column: span 6;
    /* alto = viewport menos el offset del logo (arriba) y un margen inferior,
       así una imagen vertical deja paspartú y no toca el borde inferior */
    height: calc(100vh - 90px - 3.5rem);
    width: 100%;
    object-fit: contain;
    aspect-ratio: auto;
}

/* La sección de planimetrías no tiene portada: su primer plano conserva el
   formato S/M/L elegido en el panel. */
.proyecto-planimetrias .proyecto-image-grid > img.planimetria-first {
    height: auto;
}
.proyecto-planimetrias .proyecto-image-grid > img.planimetria-first.pig-l { grid-column: span 6; }
.proyecto-planimetrias .proyecto-image-grid > img.planimetria-first.pig-m { grid-column: span 3; }
.proyecto-planimetrias .proyecto-image-grid > img.planimetria-first.pig-s { grid-column: span 2; }

.proyecto-image-grid .pig-placeholder {
    background: #e8e8e8;
    aspect-ratio: 4 / 3;
}

/* ─── Video propio en ficha de proyecto ─────────────────────── */
.proyecto-video-grid-item {
    grid-column: span 6;
    width: 100%;
    margin-block: 5rem;
    box-sizing: border-box;
    position: relative;
}

.proyecto-video-player {
    display: block;
    width: 100%;
    height: auto;
    background: var(--black);
    max-height: calc(100vh - 90px - 3.5rem);
    object-fit: contain;
    opacity: 0;
}

.proyecto-video-player.is-visible {
    animation: pigFadeIn 0.7s ease forwards;
}

.proyecto-video-controls {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    gap: 0.35rem;
}

.proyecto-video-controls button {
    border: 0;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    opacity: 0.82;
    transition: opacity 0.15s ease;
}

.proyecto-video-controls button:hover { opacity: 1; }
.proyecto-video-controls button:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
.proyecto-video-controls svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }

.admin-video-preview { max-width: 720px; }
.admin-video-preview video { display: block; width: 100%; background: var(--black); margin-bottom: 0.75rem; }
.admin-video-upload { max-width: 420px; }
.upload-video-help { margin: 0; font-size: 0.75rem; opacity: 0.6; }

.proyecto-image-section + .proyecto-image-section { margin-top: 5rem; }
.proyecto-image-section-title { margin: 0 var(--site-gutter) 1.5rem; font-size: 0.9rem; font-weight: 700; }
.proyecto-planimetrias { margin-top: 5rem; }

/* La composición editorial de móvil se renderiza dentro de la ficha: portada,
   información, video y luego la galería. En escritorio permanece la grilla
   original de la columna derecha. */
.proyecto-mobile-hero,
.proyecto-mobile-video,
.proyecto-mobile-gallery,
.proyecto-mobile-planimetrias { display: none; }

@media (max-width: 900px) {
    .proyecto-footer-mark-desktop {
        display: none;
    }
    .proyecto-footer-mark-mobile {
        display: block;
    }
    /* Esta regla se declara después de .proyecto-image-grid para impedir que
       su display:grid de escritorio reactive la galería duplicada. */
    .proyecto-desktop-media { display: none; }
    /* Acerca el inicio de la ficha al bloque de marca exclusivamente en el
       detalle de proyecto, sin alterar las demás páginas de la sección. */
    .proyecto-detalle-body .split-left { padding-bottom: 1.25rem; }
    .proyecto-detalle-body .split-fichas-panel { padding-top: 1.25rem; }
    /* Iguala el aire título→imagen móvil al título→párrafo de escritorio. */
    .proyecto-detalle-body .split-ficha-title { margin-bottom: 1rem; }
    .proyecto-mobile-hero,
    .proyecto-mobile-video,
    .proyecto-mobile-planimetrias { display: block; }
    .proyecto-mobile-gallery { display: grid; }
}

@media (max-width: 640px) {
    .proyecto-image-grid .pig-l,
    .proyecto-image-grid .pig-m,
    .proyecto-image-grid .pig-s { grid-column: span 6; }
    .proyecto-video-grid-item { grid-column: span 6; }
    .proyecto-video-player { max-height: none; }
}

/* ─── Back link (detalle → proyecto) ────────────────────────── */
.back-link {
    margin-bottom: 2rem;
}

.back-link a {
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--black);
    opacity: 0.45;
    transition: opacity 0.15s;
}

.back-link a:hover { opacity: 1; }

/* ─── Related section (proyecto → detalles) ─────────────────── */
.related-section {
    margin-top: 5rem;
}

.related-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

/* ─── Project list (tipo lista) ─────────────────────────────── */
.project-list { display: flex; flex-direction: column; }
.project-list-mt { margin-top: 4rem; }

.project-list-item {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gray-200);
    text-decoration: none;
    color: var(--black);
    transition: opacity 0.15s;
}

.project-list-item:first-child { border-top: 1px solid var(--gray-200); }
.project-list-item:hover { opacity: 0.55; }

.project-list-name {
    font-size: 1rem;
    font-weight: 400;
}

.project-list-loc {
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.5;
    margin-left: auto;
}

/* ─── Dashboard card wrap (card + toggle) ───────────────────── */
.dash-card-wrap {
    display: flex;
    flex-direction: column;
}

.dash-card-wrap .dash-card {
    flex: 1;
}

.dash-card-toggle {
    border-top: 1px solid var(--gray-200);
    padding: 0.6rem 1.5rem;
    background: var(--gray-50);
    border: 1px solid var(--black);
    border-top: none;
    margin-top: -1px;
}

.dash-badge-mode {
    background: var(--white);
    color: var(--black);
    font-size: 0.55rem;
    padding: 0.25rem 0.55rem;
}

.dash-badge-mode:hover { opacity: 0.6; }

/* ─── Admin items list ───────────────────────────────────────── */
.items-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid var(--black);
    background: var(--white);
}

.item-row-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.item-row-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.item-row-sub {
    font-size: 0.78rem;
    opacity: 0.45;
}

.item-row-meta {
    font-size: 0.72rem;
    opacity: 0.32;
    margin-top: 0.25rem;
}

.item-row-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Proyectos externos: fila editable con autoguardado */
.item-row-editable {
    align-items: flex-start;
}

.item-row-fields {
    flex: 1;
    min-width: 0;
}

/* Proyectos externos: el tipo se edita aparte; los demás datos caben en una fila compacta. */
.proyectos-externos-editor .proyectos-externos-fila {
    grid-template-columns: 3.6rem minmax(7rem, 1.4fr) minmax(5rem, 0.75fr) minmax(6rem, 1fr) 4.5rem 5rem;
    gap: 0.6rem;
}

.proyectos-externos-lista-cabecera {
    display: grid;
    grid-template-columns: 3.6rem minmax(7rem, 1.4fr) minmax(5rem, 0.75fr) minmax(6rem, 1fr) 4.5rem 5rem;
    gap: 0.6rem;
    padding: 0.2rem 0 0.35rem;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.proyectos-externos-editor .proyectos-externos-cabecera {
    grid-template-columns: minmax(10rem, 1.35fr) minmax(8rem, 0.8fr);
    gap: 0.6rem;
}

.proyectos-externos-editor .proyectos-externos-cabecera label {
    font-size: 0.67rem;
}

.proyectos-externos-editor .proyectos-externos-fila input,
.proyectos-externos-editor .proyectos-externos-fila select,
.proyectos-externos-editor .proyectos-externos-cabecera input,
.proyectos-externos-editor .proyectos-externos-cabecera select {
    padding: 0.45rem 0.5rem;
    font-size: 0.72rem;
}

.proyectos-externos-editor .proyectos-externos-fila .form-group {
    margin: 0;
}

/* El editor se presenta como listado editable, no como tarjetas de formulario. */
.proyectos-externos-editor .items-list {
    gap: 0;
}

.proyectos-externos-editor .item-row-editable {
    position: relative;
    display: block;
    padding: 0.75rem 0;
    border: 0;
    border-top: 1px solid var(--black);
}

.proyectos-externos-editor .item-row-fields {
    padding-right: 5.5rem;
}

.proyectos-externos-editor .proyectos-externos-cabecera {
    margin-bottom: 0.45rem;
}

.proyectos-externos-editor .proyectos-externos-cabecera .form-group {
    margin: 0;
}

.proyectos-externos-editor .proyectos-externos-fila input {
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0;
    background: transparent;
}

.proyectos-externos-editor .proyectos-externos-fila input:focus {
    box-shadow: inset 0 -1px 0 var(--black);
}

.proyectos-externos-editor .item-row-actions {
    position: absolute;
    top: 0.8rem;
    right: 0;
    font-size: 0.67rem;
}

/* Cada colaborador reúne sus tres datos en una sola línea. */
.colaboradores-fila {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.externos-nuevo {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200, #ddd);
}

.externos-nuevo-title {
    font-size: 0.95rem;
    opacity: 0.6;
}

.items-empty {
    font-size: 0.85rem;
    opacity: 0.4;
    padding: 2rem 0;
}

/* ─── Tabs (nosotros backend) ────────────────────────────────── */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--black);
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.55rem 1.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    opacity: 0.35;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: opacity 0.15s;
}

.tab-btn:hover { opacity: 0.7; }
.tab-btn.active { opacity: 1; border-bottom-color: var(--black); }

/* ─── Equipo member card ─────────────────────────────────────── */
.equipo-member {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.equipo-foto-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.equipo-foto-preview {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--gray-100);
    display: block;
}

.equipo-foto-empty {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-200);
    border: 1px dashed var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    opacity: 0.45;
}

.equipo-foto-input {
    font-size: 0.68rem;
    width: 100%;
}

.equipo-fields-col { min-width: 0; }

/* ─── Breadcrumb (edit pages) ────────────────────────────────── */
.breadcrumb-back {
    text-decoration: none;
    color: var(--black);
    opacity: 0.45;
    font-weight: 400;
}

.breadcrumb-back:hover { opacity: 1; }
.breadcrumb-sep { opacity: 0.3; margin: 0 0.35rem; }

/* ─── Select (detalle_edit) ──────────────────────────────────── */
.form-select {
    width: 100%;
    border: 1px solid var(--black);
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--white);
    color: var(--black);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.form-select:focus { box-shadow: 0 0 0 2px var(--black); }

/* ─── View site button (dashboard header) ─────────────────────── */
.btn-view-site {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 0.55rem 1.5rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.btn-view-site:hover { opacity: 0.68; }

/* ─── Project info section (proyecto detail page) ──────────────── */
.project-info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.info-row.full-width {
    grid-column: 1 / -1;
}

.info-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.4;
}

.info-value {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--black);
}

.info-value-sm {
    font-size: 0.8rem;
}

/* ─── Lightbox (vista de proyecto) ──────────────────────────── */
.lightbox {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 4rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.lightbox-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 88vw;
    max-height: 88vh;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.lightbox-img.is-active {
    opacity: 1;
}

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
    opacity: 0.5;
}

.lightbox-close {
    top: 1.75rem;
    right: 1.75rem;
    width: 32px;
    height: 32px;
}

.lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox svg {
    width: 100%;
    height: 100%;
    stroke: var(--black);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Proyectos externos (página Nosotros) ──────────────────── */
/* ─── Nosotros: layout a ancho completo (sin split 35/65) ─────── */
.nosotros-main {
    width: 100%;
    margin-left: 0;
    padding: 130px 60px 60px;
    box-sizing: border-box;
    color: var(--black);
    font-size: 0.9rem;
    line-height: 1.5;
}

.nosotros-main h2 {
    color: var(--black);
    font-size: 0.9rem;
    font-weight: 700;
}

.nosotros-main--con-fondo {
    background-image: var(--nosotros-fondo);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Grilla interna: contenido principal 80 % y columna complementaria 20 %. */
.nosotros-grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(12rem, 2fr);
    grid-template-areas:
        "subtitulo subtitulo"
        "descripcion metricas"
        "enlaces ."
        "equipo colaboradores";
    column-gap: 4rem;
    row-gap: 2.5rem;
}

.admin-video-preview-player { background: var(--black); }

.nosotros-intro {
    grid-area: descripcion;
    min-width: 0;
}

/* Aparición continua de los bloques principales de Nosotros. */
.nosotros-fade-intro {
    animation: splitFichaFadeIn 0.55s ease both;
}

.nosotros-fade-foto {
    animation: splitFichaFadeIn 0.55s ease 0.08s both;
}

.nosotros-fade-equipo {
    animation: splitFichaFadeIn 0.55s ease 0.16s both;
}

.nosotros-fade-proyectos {
    animation: splitFichaFadeIn 0.55s ease 0.24s both;
}

.nosotros-intro-sub {
    grid-area: subtitulo;
    margin: 0;
}

.nosotros-intro-desc {
    margin: 0;
    max-width: 70ch;
    font-size: 1.1rem;
    line-height: 1.5;
}
.nosotros-intro-email,
.nosotros-intro-instagram {
    color: var(--black);
    font-size: 1.1rem;
    line-height: 1.5;
    text-decoration: none;
}
.nosotros-intro-email:hover,
.nosotros-intro-instagram:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.nosotros-enlaces {
    grid-area: enlaces;
    display: grid;
    gap: 0.5rem;
    line-height: 1.25;
}
.nosotros-intro-instagram {
    margin: 0.75rem 0;
}
.nosotros-metricas {
    grid-area: metricas;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    animation: splitFichaFadeIn 0.55s ease 0.12s both;
}

.nosotros-metrica { display: grid; gap: 0.25rem; }
.nosotros-metrica-numero {
    display: inline-block;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}
.nosotros-metrica-etiqueta { font-size: 0.78rem; }

/* ─── Equipo: 4 columnas alineadas por filas (subgrid) ───────── */
.equipo-tablas {
    grid-area: equipo;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.5rem;
    align-items: start;
    min-width: 0;
    margin: 0;
}

.nosotros-colaboradores {
    grid-area: colaboradores;
    align-self: start;
    min-width: 0;
}

.nosotros-colaboradores h2 {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.nosotros-colaboradores ul {
    list-style: none;
}

.nosotros-colaboradores li {
    padding: 0 0 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.nosotros-colaboradores li span {
    display: block;
}

.nosotros-colaboradores .colaborador-nombre {
    font-weight: 700;
}

/* Cada integrante comparte las mismas filas del contenedor → todo alinea */
.equipo-miembro {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    row-gap: 0.35rem;
    color: var(--black);
    line-height: 1.4;
    transition: opacity 0.55s ease;
}

.equipo-fade .equipo-card {
    opacity: 0;
}

.equipo-fade .equipo-card.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .equipo-fade .equipo-card {
        opacity: 1;
        transition: none;
    }

    .nosotros-metricas { animation: none; }
}

.em-foto {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-bottom: 0.5rem;
}

.em-nombre {
    grid-column: 1 / -1;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.em-nombre-cargo {
    font-weight: 400;
}

.em-value {
    grid-column: 1 / -1;
    color: var(--black);
    font-weight: 400;
    font-size: 0.75rem;
}
.em-socials {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 1.2rem;
}
.em-socials a { color: var(--black); display: inline-flex; }
.em-social-personal { margin-left: 0.55rem; }
.em-socials svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.em-social-linkedin svg { fill: currentColor; stroke: none; }
.em-socials .social-dot { fill: currentColor; stroke: none; }

.em-desc {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 0.6rem;
}

/* ─── Proyectos externos: cada uno en una sola línea (tipo tabla) ─── */
.proyectos-externos-section {
    min-width: 0;
    margin: 0 0 3rem;
}

.nosotros-proyectos {
    --proyectos-ritmo: 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, calc((100% - 4rem) * 0.8));
    min-width: 0;
    margin-top: 7rem;
}

.nosotros-proyectos-columna {
    min-width: 0;
}

.nosotros-main .nosotros-proyectos-titulo {
    grid-column: 1 / -1;
    margin: 0 0 var(--proyectos-ritmo);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--black);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.nosotros-proyectos .proyectos-externos-section {
    margin: 0 0 var(--proyectos-ritmo);
}

.proyectos-externos-section h3 {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.nosotros-proyectos .proyectos-externos-section h3 {
    display: flex;
    align-items: flex-start;
    min-height: var(--proyectos-ritmo);
    line-height: 1.4;
    margin: 0;
}

.proyectos-externos-list {
    display: flex;
    flex-direction: column;
}

.proyecto-externo-encabezado {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 2.8fr) minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(2.75rem, 0.5fr) minmax(3.5rem, 0.65fr);
    align-items: center;
    gap: 0.75rem;
    min-height: var(--proyectos-ritmo, auto);
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.proyecto-externo-encabezado span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fila referencial (sin enlace, no clickeable): separada por línea 1px negra 50% */
/* Columnas: año | proyecto | ubicación | cliente | unidades | superficie. */
.proyecto-externo-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 2.8fr) minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(2.75rem, 0.5fr) minmax(3.5rem, 0.65fr);
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.nosotros-proyectos .proyecto-externo-item {
    min-height: var(--proyectos-ritmo);
}

/* Igual que Otros Estudios: las filas se revelan individualmente al entrar
   al viewport. Sin JavaScript, la clase experiencia-fade no se aplica y las
   filas permanecen visibles. */
.nosotros-proyectos .proyecto-externo-item {
    transition: opacity 1.1s ease;
}

.experiencia-fade .nosotros-proyectos .proyecto-externo-item {
    opacity: 0;
}

.experiencia-fade .nosotros-proyectos .proyecto-externo-item.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .experiencia-fade .nosotros-proyectos .proyecto-externo-item {
        opacity: 1;
        transition: none;
    }
}

.nosotros-proyectos .pe-col {
    font-size: 0.65rem;
}

.nosotros-proyectos .pe-col:nth-child(5),
.nosotros-proyectos .pe-col:nth-child(6),
.nosotros-proyectos .proyecto-externo-encabezado span:nth-child(5),
.nosotros-proyectos .proyecto-externo-encabezado span:nth-child(6) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.nosotros-proyectos .proyectos-externos-section--casas .pe-col:nth-child(4),
.nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-encabezado span:nth-child(4) {
    grid-column: 6;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.nosotros-proyectos .proyectos-externos-section--institucional .pe-col:nth-child(5),
.nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-encabezado span:nth-child(5) {
    grid-column: 6;
}

.pe-col {
    font-size: 0.75rem;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-nombre {
    font-weight: 700;
}

.lista-sin-imagenes .pe-nombre {
    font-weight: 500;
}

/* Lista de Proyectos (proyectos_lista) en proyectos.php: 6 columnas
   nombre | año | encargo | cliente | superficie | presupuesto */
/* Slot 2: el listado sigue al primer viewport sin una franja vacía excesiva. */
.proyectos-lista-section {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 2rem var(--site-gutter);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.proyectos-lista-section .proyecto-externo-item {
    position: relative;
    grid-template-columns: 2fr 5rem 3.5rem 1.5fr 1.5fr 6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    transition: opacity 0.55s ease;
}

.lista-nombre-aclaracion { display: none; }

.thumbs-fade .proyectos-lista-section .proyecto-externo-item {
    opacity: 0;
}

.thumbs-fade .proyectos-lista-section .proyecto-externo-item.is-visible {
    opacity: 1;
}

.proyectos-lista-section .lista-con-imagenes .pe-col {
    font-weight: 700;
}

/* Indicadores SVG de Otros Estudios: conservan la proporción de cada imagen
   y tienen una columna propia entre el nombre y el año. */
.lista-image-indicators {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    pointer-events: none;
}

.lista-image-indicator {
    display: block;
    flex: 0 0 auto;
    fill: var(--black);
    opacity: 1;
    height: 13.5px;
    width: auto;
    max-width: 24px;
}

/* Imágenes de un proyecto lista al hacer hover: panel fijo en el 35% izquierdo,
   centradas verticalmente respecto de la fila activa. */
.lista-hover-panel {
    position: fixed;
    left: 0;
    top: 50%;
    width: 35vw;
    max-height: 100vh;
    padding: 25px var(--site-gutter);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12px;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    /* Al salir del hover, visibility espera al final del fade-out; de otro
       modo el panel se oculta inmediatamente y corta la transición. */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    pointer-events: none;
    z-index: 5;
    isolation: isolate;
}
.lista-hover-panel.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.lista-hover-panel.is-hiding {
    opacity: 0;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.lista-hover-panel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: calc(10px - var(--site-gutter));
    height: 1px;
    background: #000;
    opacity: 0.5;
    transform: scaleX(0);
    transform-origin: right center;
    z-index: 0;
}
.lista-hover-panel.is-visible::before {
    transform: scaleX(1);
    animation: listaHoverLineIn 0.7s ease forwards;
}
@keyframes listaHoverLineIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.lista-hover-panel img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: 40vh;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.lista-hover-panel.is-visible img {
    opacity: 1;
    transition: opacity 0.5s ease;
}
.lista-hover-panel.is-visible .lista-hover-image.is-entering {
    opacity: 0;
    transition: none;
}
.lista-hover-panel.is-hiding img {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.lista-hover-exit {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 25px var(--site-gutter);
    box-sizing: border-box;
}
.lista-hover-exit.is-fading img {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.lista-hover-panel.is-visible img:nth-child(2) {
    /* Ambas imágenes entran en paralelo; el desfase apenas marca su orden. */
    transition-delay: 0.06s;
}

/* Se declara después de la versión de escritorio para que sus márgenes y
   columnas prevalezcan efectivamente en móvil. */
@media (max-width: 900px) {
    /* Otros Estudios: nombre, indicadores y año, con el mismo margen de 25px
       que la lista de proyectos superior. */
    .proyectos-lista-section {
        min-height: 0;
        padding: 1rem 25px 3rem;
    }
    .proyectos-lista-section .proyecto-externo-item {
        grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem;
        gap: 0.6rem;
        padding: 5px 0;
    }
    /* Las filas con imágenes usan peso extra en escritorio. Como sus
       indicadores se ocultan en touch, se igualan aquí al resto de la lista. */
    .proyectos-lista-section .lista-con-imagenes .pe-col,
    .proyectos-lista-section .pe-nombre,
    .proyectos-lista-section .lista-sin-imagenes .pe-nombre {
        font-weight: 500;
    }
    .proyectos-lista-section .proyecto-externo-item .pe-encargo,
    .proyectos-lista-section .proyecto-externo-item .pe-superficie,
    .proyectos-lista-section .proyecto-externo-item .pe-comuna {
        display: none;
    }
    .proyectos-lista-section .proyecto-externo-item .pe-anio {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
    .proyectos-lista-section .proyecto-externo-item .pe-nombre {
        grid-column: 1;
        grid-row: 1;
    }
    .proyectos-lista-section .lista-image-indicators {
        position: static;
        grid-column: 2;
        grid-row: 1;
        display: flex;
        width: auto;
        min-width: 0;
        padding: 0;
        justify-content: flex-start;
        align-items: center;
        gap: 3px;
    }
    .lista-hover-panel {
        display: none;
    }
    .lista-mobile-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-height: 0;
        box-sizing: border-box;
        overflow: hidden;
        padding: 0;
        opacity: 0;
        transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.2s ease;
    }
    .lista-mobile-gallery.is-open {
        max-height: 280px;
        padding: 12px 0 18px;
        opacity: 1;
    }
    .lista-mobile-gallery img {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: contain;
    }
    .lista-mobile-gallery img:only-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .nosotros-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "subtitulo"
            "descripcion"
            "metricas"
            "enlaces"
            "equipo"
            "colaboradores";
        gap: 2.5rem;
    }

    /* Al envolver en menos columnas, el subgrid se desactiva y cada
       integrante se maqueta por su cuenta (evita filas rotas). */
    .equipo-tablas {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        row-gap: 2.5rem;
    }
    .equipo-miembro {
        grid-row: auto !important;
        grid-template-rows: none;
    }

    .nosotros-proyectos {
        width: 100%;
        gap: 0;
    }

}

@media (max-width: 560px) {
    .equipo-tablas {
        grid-template-columns: 1fr !important;
    }

    .proyecto-externo-item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.35rem 1rem;
    }

    .proyecto-externo-encabezado {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: 0.35rem 1rem;
    }

    .proyectos-externos-section--casas .proyecto-externo-encabezado,
    .proyectos-externos-section--casas .proyecto-externo-item,
    .proyectos-externos-section--institucional .proyecto-externo-encabezado,
    .proyectos-externos-section--institucional .proyecto-externo-item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .proyecto-externo-encabezado span:nth-child(n + 3) {
        grid-column: 2;
    }

    .proyecto-externo-item .pe-col:nth-child(n + 3) {
        grid-column: 2;
    }
}

/* La lista pública de Otros Estudios conserva sus tres columnas compactas
   incluso bajo 560px; las reglas anteriores pertenecen a las tablas de
   Nosotros y, sin esta excepción, desplazan el año sobre los indicadores. */
@media (max-width: 560px) {
    .proyectos-lista-section .proyecto-externo-item {
        grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem;
        gap: 0.6rem;
    }
    .proyectos-lista-section .proyecto-externo-item .pe-nombre {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .proyectos-lista-section .lista-image-indicators {
        grid-column: 2;
        grid-row: 1;
    }
    .proyectos-lista-section .proyecto-externo-item .pe-anio {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
}

/* Nosotros en móvil: los listados editoriales pasan de tabla a ficha.
   Así se evita comprimir seis datos en una sola línea y se conserva toda
   la información disponible para cada proyecto. */
@media (max-width: 900px) {
    /* Solo en Nosotros, acerca el comienzo de la presentación a la marca. */
    .split-left:has(+ .nosotros-main) {
        padding-bottom: 0;
    }

    .nosotros-main {
        padding: 0 25px 4rem;
    }

    .nosotros-grid {
        row-gap: 2rem;
    }

    .nosotros-metricas {
        flex-direction: column;
        gap: 1.5rem;
    }

    .nosotros-proyectos {
        --proyectos-ritmo: 1.5rem;
        margin-top: 4.5rem;
    }

    .nosotros-proyectos .proyectos-externos-section {
        margin-bottom: 3rem;
    }

    .nosotros-proyectos .proyectos-externos-section h3 {
        min-height: 0;
        margin-bottom: 0.75rem;
    }

    .nosotros-proyectos .proyecto-externo-encabezado {
        display: none;
    }

    .nosotros-proyectos .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-item {
        grid-template-columns: 3.5rem minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: baseline;
        gap: 0.35rem 0.75rem;
        min-height: 0;
        padding: 0.7rem 0;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(n + 3) {
        grid-column: auto;
        grid-row: auto;
        overflow: visible;
        white-space: normal;
        text-align: left;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(n + 4) {
        grid-column: 2 / -1;
    }
}

@media (max-width: 560px) {
    .nosotros-intro-desc,
    .nosotros-intro-email,
    .nosotros-intro-instagram {
        font-size: 1rem;
    }

    .nosotros-metricas {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .nosotros-metrica-numero {
        font-size: clamp(2.25rem, 12vw, 3rem);
    }

    .nosotros-proyectos .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(3),
    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(n + 4) {
        grid-column: 2;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(n + 3)::before {
        display: inline-block;
        width: 5.75rem;
        color: rgba(0, 0, 0, 0.58);
        font-size: 0.58rem;
        font-weight: 400;
        text-transform: uppercase;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(3)::before { content: 'Ubicación'; }
    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(4)::before { content: 'Cliente'; }
    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(5)::before { content: 'Unidades'; }
    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(6)::before { content: 'm²'; }
    .nosotros-proyectos .proyectos-externos-section--casas .pe-col:nth-child(4)::before,
    .nosotros-proyectos .proyectos-externos-section--institucional .pe-col:nth-child(5)::before { content: 'm²'; }
}

/* En móvil, los proyectos de Nosotros muestran año, nombre y superficie en
   una única línea de 5px por lado. */
@media (max-width: 900px) {
    .proyectos-lista-section .lista-nombre-aclaracion { display: inline; }

    .nosotros-proyectos .proyecto-externo-encabezado,
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-encabezado,
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-encabezado {
        display: grid;
        grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.6rem;
    }

    .nosotros-proyectos .proyecto-externo-encabezado span:nth-child(n + 4) {
        display: none;
    }

    .nosotros-proyectos .proyecto-externo-encabezado span:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .nosotros-proyectos .proyecto-externo-encabezado span:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .nosotros-proyectos .proyecto-externo-encabezado span:nth-child(3) {
        display: none;
    }

    .nosotros-proyectos .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-item,
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-item {
        grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.6rem;
        min-height: 0;
        padding: 5px 0;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-weight: 500;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(3) {
        display: none;
    }

    .nosotros-proyectos .proyecto-externo-item .pe-col:nth-child(n + 4) {
        display: none;
    }

    /* La posición de superficie varía según la tabla; siempre ocupa la
       tercera columna móvil en lugar de Ubicación. */
    .nosotros-proyectos .proyectos-externos-section:not(.proyectos-externos-section--casas):not(.proyectos-externos-section--institucional) .proyecto-externo-encabezado span:nth-child(6),
    .nosotros-proyectos .proyectos-externos-section:not(.proyectos-externos-section--casas):not(.proyectos-externos-section--institucional) .proyecto-externo-item .pe-col:nth-child(6),
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-encabezado span:nth-child(4),
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-item .pe-col:nth-child(4),
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-encabezado span:nth-child(5),
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-item .pe-col:nth-child(5) {
        display: block;
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

    /* La unidad se informa en el encabezado; los valores quedan numéricos. */
    .nosotros-proyectos .proyectos-externos-section:not(.proyectos-externos-section--casas):not(.proyectos-externos-section--institucional) .proyecto-externo-item .pe-col:nth-child(6)::before,
    .nosotros-proyectos .proyectos-externos-section--casas .proyecto-externo-item .pe-col:nth-child(4)::before,
    .nosotros-proyectos .proyectos-externos-section--institucional .proyecto-externo-item .pe-col:nth-child(5)::before {
        content: none;
    }
}

/* ─── Documentación ──────────────────────────────────────────── */
.dash-docs-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.dash-docs-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    padding: 0.8rem 1.25rem;
    border: 1px solid var(--black);
    display: inline-block;
    transition: all 0.15s;
}

.dash-docs-link:hover {
    background: var(--black);
    color: var(--white);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .upload-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
    .admin-sidebar { display: none; }
    .admin-page-header { left: 0; padding-left: 1.5rem; padding-right: 1.5rem; }
    .admin-main { margin-left: 0; padding: 5.5rem 1.5rem 2rem; }
    .upload-grid { grid-template-columns: repeat(3, 1fr); }
    .form-row { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
    .dash-status-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .proyectos-externos-editor .proyectos-externos-cabecera {
        grid-template-columns: minmax(10rem, 1.35fr) minmax(8rem, 0.8fr) !important;
    }
    .proyectos-externos-editor .proyectos-externos-fila {
        grid-template-columns: 3.6rem minmax(7rem, 1.4fr) minmax(5rem, 0.75fr) minmax(6rem, 1fr) 4.5rem 5rem !important;
    }
    .proyectos-externos-lista-cabecera {
        grid-template-columns: 3.6rem minmax(7rem, 1.4fr) minmax(5rem, 0.75fr) minmax(6rem, 1fr) 4.5rem 5rem !important;
    }
}

@media (max-width: 680px) {
    .site-nav { gap: 1.5rem; padding: 10px 1.25rem; }
    .page-wrapper { padding: 0 1.25rem 4rem; }
    .image-grid { grid-template-columns: repeat(2, 1fr); }
    .lista-row { grid-template-columns: 1fr; gap: 1rem; }
    .lista-img { max-width: 420px; }
    .lista-content h3 { margin-bottom: 0.8rem; }
    .upload-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { background: none; border: none; gap: 1px; }
    .dash-card { border: 1px solid var(--black); }
}

@media (max-width: 440px) {
    .image-grid { grid-template-columns: 1fr; }
    .login-box { padding: 2rem 1.5rem; }
}

.proyectos-lista-inline {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lista-inline-row {
    font-size: 1rem;
    line-height: 1.5;
}

.lista-inline-sep {
    margin: 0 0.5rem;
}

/* ══════════════════════════════════════════════════════════════
   OPUS · MINIMALISMO CÁLIDO EDITORIAL
   Capa visual exclusiva del panel. No modifica sus flujos PHP/AJAX.
══════════════════════════════════════════════════════════════ */
.admin-layout {
    --opus-ink: #24353a;
    --opus-muted: #687d82;
    --opus-paper: #eef6f7;
    --opus-surface: #fbfefe;
    --opus-line: #d1e1e3;
    --opus-cyan: #008da3;
    --opus-cyan-dark: #006f82;
    --opus-cyan-soft: #d8f2f5;
    --opus-magenta: #c23c8a;
    --opus-magenta-dark: #9f286e;
    --opus-magenta-soft: #f8dfed;
    --opus-accent: var(--opus-cyan);
    --opus-accent-soft: var(--opus-magenta-soft);
    --opus-success: var(--opus-cyan);
    background: var(--opus-paper);
    color: var(--opus-ink);
}

.admin-layout .admin-sidebar {
    width: 252px;
    background: #e3f0f2;
    border: 0;
    border-right: 1px solid var(--opus-line);
    box-shadow: 10px 0 28px rgba(48, 54, 47, 0.025);
}

.admin-layout .sidebar-header { padding: 2rem 1.5rem 1.45rem; border-bottom: 1px solid var(--opus-line); }
.admin-layout .sidebar-brand { color: var(--opus-ink); letter-spacing: .08em; }
.admin-layout .sidebar-logo { max-height: 38px; max-width: 174px; border-radius: 2px; }
.admin-layout .sidebar-sub { display: flex; align-items: center; gap: .45rem; margin-top: .65rem; color: var(--opus-muted); font-size: .62rem; letter-spacing: .12em; opacity: 1; }
.admin-layout .sidebar-sub span { width: 6px; height: 6px; border-radius: 50%; background: var(--opus-accent); }
.admin-layout .sidebar-nav { padding: 1.05rem .75rem 1.5rem; }
.admin-layout .sidebar-nav .nav-section { padding: 1.1rem .75rem .45rem; color: var(--opus-muted); font-family: 'Montserrat', sans-serif; font-size: .57rem; letter-spacing: .15em; opacity: .9; }
.admin-layout .sidebar-nav a { display: flex; align-items: center; gap: .75rem; margin: .1rem 0; padding: .63rem .75rem; border: 0; border-radius: 8px; color: #4c554f; font-size: .78rem; transition: background .18s ease, color .18s ease, transform .18s ease; }
.admin-layout .sidebar-nav a:hover { background: rgba(255,255,255,.72); color: var(--opus-ink); transform: translateX(2px); }
.admin-layout .sidebar-nav a.active { padding-left: .75rem; border: 0; background: var(--opus-surface); color: var(--opus-ink); box-shadow: 0 3px 9px rgba(46, 53, 47, .055); font-weight: 600; }
.sidebar-icon { display: inline-flex; width: 17px; height: 17px; flex: 0 0 17px; color: var(--opus-muted); }
.sidebar-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.admin-layout .sidebar-nav a.active .sidebar-icon { color: var(--opus-accent); }
.admin-layout .sidebar-footer { padding: 1.2rem 1.5rem 1.45rem; border-top: 1px solid var(--opus-line); }
.admin-layout .sidebar-footer a, .admin-layout .logout-btn { color: var(--opus-muted); opacity: 1; }
.admin-layout .sidebar-footer a:hover, .admin-layout .logout-btn:hover { color: var(--opus-accent); }
.admin-layout .sidebar-version { border-top-color: var(--opus-line); }
.admin-layout .logout-btn { display: block; width: 100%; margin-top: .9rem; padding: .62rem .75rem; border: 1px solid var(--opus-line); border-radius: 6px; background: var(--opus-surface); font-size: .72rem; font-weight: 600; text-align: left; }
.admin-layout .logout-btn:hover { border-color: #a7cdd1; background: #fff; }

.admin-layout .admin-page-header { left: 252px; min-height: 86px; padding: 1.3rem 3.5rem; background: rgba(238,246,247,.93); border: 0; border-bottom: 1px solid var(--opus-line); backdrop-filter: blur(14px); }
.admin-layout .admin-page-header-info { gap: 1.15rem; }
.admin-layout .admin-page-title { color: var(--opus-ink); font-family: 'Montserrat', sans-serif; font-size: 1.08rem; font-weight: 600; letter-spacing: -.035em; }
.admin-layout .admin-page-sub { color: var(--opus-muted); font-size: .78rem; opacity: 1; }
.admin-layout .breadcrumb-back { color: var(--opus-muted); font-weight: 500; text-decoration: none; }
.admin-layout .breadcrumb-back:hover { color: var(--opus-accent); }
.admin-layout .breadcrumb-sep { color: var(--opus-accent); margin: 0 .35rem; }
.admin-layout .admin-main { max-width: calc(1290px + 252px); margin-left: 252px; padding: 7.65rem 3.5rem 4.5rem; }

.admin-layout .btn, .admin-layout .btn-view-site { border: 0; border-radius: 7px; background: var(--opus-cyan); box-shadow: 0 3px 8px rgba(0,141,163,.18); color: #fffefb; font-family: 'Montserrat', sans-serif; font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: none; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.admin-layout .btn:hover, .admin-layout .btn-view-site:hover { background: var(--opus-cyan-dark); opacity: 1; box-shadow: 0 6px 15px rgba(0,141,163,.22); transform: translateY(-1px); }
.admin-layout .btn-outline { border: 1px solid var(--opus-line); background: var(--opus-surface); box-shadow: none; color: #46656b; }
.admin-layout .btn-outline:hover { border-color: #a7cdd1; background: #fff; color: var(--opus-ink); box-shadow: none; }
.admin-layout .alert { border: 1px solid #c9e6e8; border-left: 3px solid var(--opus-success); border-radius: 7px; background: #effafb; color: #28616b; }

.admin-layout .form-section { margin-bottom: 2rem; padding: 1.65rem; border: 1px solid var(--opus-line); border-radius: 12px; background: var(--opus-surface); box-shadow: 0 4px 18px rgba(49,54,48,.035); }
.admin-layout .form-section-title { margin-bottom: 1.35rem; padding-bottom: .85rem; border-bottom-color: var(--opus-line); color: var(--opus-muted); font-family: 'Montserrat', sans-serif; font-size: .61rem; letter-spacing: .12em; opacity: 1; }
.admin-layout .form-group label { color: #667169; font-family: 'Montserrat', sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .07em; opacity: 1; }
.admin-layout .form-group input[type="text"], .admin-layout .form-group input[type="password"], .admin-layout .form-group input[type="number"], .admin-layout .form-group textarea, .admin-layout .form-group select, .admin-layout .form-select { border-color: #cfe0e2; border-radius: 6px; background-color: #fff; color: var(--opus-ink); font-size: .88rem; }
.admin-layout .form-group input[type="text"]:focus, .admin-layout .form-group input[type="password"]:focus, .admin-layout .form-group input[type="number"]:focus, .admin-layout .form-group textarea:focus, .admin-layout .form-group select:focus, .admin-layout .form-select:focus { border-color: var(--opus-cyan); box-shadow: 0 0 0 3px rgba(0,141,163,.13); }
.admin-layout .label-hint { color: var(--opus-muted); opacity: 1; }
.admin-layout .radio-option label { border-color: var(--opus-line); border-radius: 6px; color: #4c666b; }
.admin-layout .radio-option input[type="radio"]:checked + label { background: var(--opus-magenta); border-color: var(--opus-magenta); color: #fff; }
.admin-layout .radio-option label:hover { box-shadow: 0 0 0 3px rgba(194,60,138,.12); }

.admin-layout .tab-nav { gap: .45rem; margin-bottom: 1.6rem; border-bottom: 0; }
.admin-layout .tab-btn { border: 1px solid transparent; border-radius: 7px; color: var(--opus-muted); font-family: 'Montserrat', sans-serif; font-size: .67rem; font-weight: 600; letter-spacing: .03em; }
.admin-layout .tab-btn:hover { background: rgba(255,255,255,.72); color: var(--opus-ink); }
.admin-layout .tab-btn.active { border-color: #efb9d9; background: var(--opus-magenta-soft); color: var(--opus-magenta-dark); }
.admin-layout .upload-slot, .admin-layout .reorder-card { border-color: var(--opus-line); border-radius: 8px; background: #f6fbfc; }
.admin-layout .upload-slot { padding: .75rem; transition: border-color .18s ease, box-shadow .18s ease; }
.admin-layout .upload-slot:hover { border-color: #a9cdd1; box-shadow: 0 4px 12px rgba(32,101,111,.06); }
.admin-layout .upload-slot .slot-num, .admin-layout .upload-slot .no-img { color: var(--opus-muted); opacity: 1; }
.admin-layout .slot-del-x { border-radius: 50%; box-shadow: 0 2px 6px rgba(40,49,45,.12); }

.admin-layout .items-list { gap: .75rem; }
.admin-layout .item-row { padding: 1.1rem 1.2rem; border: 1px solid var(--opus-line); border-radius: 10px; background: var(--opus-surface); box-shadow: 0 3px 14px rgba(49,54,48,.03); transition: transform .18s ease, box-shadow .18s ease; }
.admin-layout .item-row:hover { box-shadow: 0 7px 20px rgba(49,54,48,.07); transform: translateY(-1px); }
.admin-layout .proyectos-lista-item-con-imagenes { border: 2px solid var(--opus-magenta); }
.admin-layout .proyectos-lista-legend { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--opus-muted); font-size: .68rem; }
.admin-layout .proyectos-lista-legend span { width: .65rem; height: .65rem; border-radius: 2px; background: var(--opus-magenta); }
.admin-layout .proyectos-lista-year { margin: 1.35rem 0 -.2rem; color: var(--opus-cyan); font-family: 'Montserrat', sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.admin-layout .proyectos-lista-year:first-child { margin-top: 0; }
.admin-layout .proyectos-lista-item { min-height: 34px; padding: .25rem .45rem .25rem .8rem; gap: .75rem; }
.admin-layout .proyectos-lista-item .item-row-info { flex-direction: row; align-items: center; gap: .45rem; overflow: hidden; white-space: nowrap; }
.admin-layout .proyectos-lista-item .item-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-layout .proyectos-lista-item .item-row-sub { flex: 0 0 auto; white-space: nowrap; }
.admin-layout .proyectos-lista-item .item-row-actions { align-items: center; gap: .35rem; }
.admin-layout .proyectos-lista-delete-btn { display: inline-grid; width: 30px; height: 30px; place-items: center; padding: 0; }
.admin-layout .proyectos-lista-delete-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.admin-layout .item-row-name { color: var(--opus-ink); font-family: 'Montserrat', sans-serif; font-size: .83rem; font-weight: 600; }
.admin-layout .item-row-sub, .admin-layout .item-row-meta { color: var(--opus-muted); opacity: 1; }
.admin-layout .items-empty { padding: 2.5rem; border: 1px dashed #bcd3d6; border-radius: 10px; background: rgba(255,255,255,.5); color: var(--opus-muted); }

.admin-layout .dash-status-bar { padding: 1.35rem 1.5rem; border: 1px solid var(--opus-line); border-radius: 12px; background: var(--opus-surface); box-shadow: 0 4px 18px rgba(49,54,48,.035); }
.admin-layout .dash-logo { height: 42px; border: 1px solid var(--opus-line); border-radius: 5px; padding: 5px; }
.admin-layout .dash-empresa-nombre { color: var(--opus-ink); font-family: 'Montserrat', sans-serif; font-size: .8rem; letter-spacing: -.02em; }
.admin-layout .dash-badge { border: 0; border-radius: 99px; background: var(--opus-cyan-soft); color: var(--opus-cyan-dark); letter-spacing: .1em; }
.admin-layout .dash-badge-soon { background: var(--opus-magenta-soft); color: var(--opus-magenta-dark); }
.admin-layout .dash-nav-theme-form { color: var(--opus-muted); }
.admin-layout .dash-nav-theme-form select { border-color: var(--opus-line); border-radius: 5px; background: #fff; color: var(--opus-ink); }
.admin-layout .dash-nav-theme-form button { border: 0; border-radius: 5px; background: #e0f1f3; color: #38636a; }
.admin-layout .dash-stack { gap: 1rem; margin-top: 1.25rem; background: none; }
.admin-layout .dash-panel { border: 1px solid var(--opus-line); border-radius: 12px; background: var(--opus-surface); box-shadow: 0 4px 18px rgba(49,54,48,.035); overflow: hidden; }
.admin-layout .sidebar-version-button { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.admin-layout .sidebar-version-button:hover { color: var(--opus-accent); }
.system-rights-dialog { width: min(38rem, calc(100vw - 2rem)); max-height: min(42rem, calc(100dvh - 2rem)); padding: 0; border: 1px solid var(--opus-line); border-radius: 12px; background: var(--opus-surface); color: var(--opus-ink); box-shadow: 0 20px 60px rgba(21, 45, 48, .22); }
.system-rights-dialog::backdrop { background: rgba(20, 36, 39, .42); backdrop-filter: blur(2px); }
.system-rights-dialog-inner { position: relative; padding: 2rem; }
.system-rights-dialog h2 { margin: 0 2rem 1.1rem 0; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 600; }
.system-rights-dialog p { margin: 0 0 1rem; color: var(--opus-muted); font-size: .8rem; line-height: 1.6; }
.system-rights-dialog-copy { margin-bottom: 0 !important; }
.system-rights-dialog-close-form { position: absolute; top: 1rem; right: 1rem; }
.system-rights-dialog-close { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--opus-line); border-radius: 50%; background: #fff; color: var(--opus-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.system-rights-dialog-close:hover { border-color: var(--opus-accent); color: var(--opus-accent); }
.admin-layout .dash-panel-header { padding: 1.15rem 1.5rem; border-bottom-color: var(--opus-line); background: #f4fafb; }
.admin-layout .dash-panel-title { color: var(--opus-ink); font-family: 'Montserrat', sans-serif; font-size: .82rem; letter-spacing: -.02em; }
.admin-layout .dash-panel-title:hover { color: var(--opus-accent); text-decoration: none; }
.admin-layout .dash-subsection-title { color: var(--opus-muted); font-family: 'Montserrat', sans-serif; opacity: 1; }
.admin-layout .dash-item-row { border-color: var(--opus-line); border-radius: 8px; background: #fff; }
.admin-layout .dash-item-row-link:hover { border-color: #b4d4d8; background: #f5fbfc; }
.admin-layout .dash-item-name { color: var(--opus-ink); font-family: 'Montserrat', sans-serif; font-size: .78rem; }
.admin-layout .dash-item-meta { border: 0; border-radius: 99px; background: #eaf5f6; color: var(--opus-muted); opacity: 1; }
.admin-layout .dash-move-btn { border-color: var(--opus-line); border-radius: 5px; color: var(--opus-muted); }
.admin-layout .dash-move-btn:hover:not(:disabled) { border-color: var(--opus-accent); background: var(--opus-accent); }
.admin-layout .dash-slot { border-color: var(--opus-line); border-radius: 4px; }
.admin-layout .dash-slot-filled { border-color: #93c3ca; }

@media (max-width: 860px) {
    .admin-layout .admin-sidebar { display: none; }
    .admin-layout .admin-page-header { left: 0; padding: 1rem 1.25rem; }
    .admin-layout .admin-main { margin-left: 0; padding: 6.75rem 1.25rem 2.5rem; }
}

@media (max-width: 640px) {
    .admin-layout .admin-page-header { align-items: flex-start; flex-wrap: wrap; gap: .7rem 1rem; }
    .admin-layout .admin-page-header-info { width: 100%; flex-wrap: wrap; gap: .25rem .65rem; }
    .admin-layout .admin-page-sub { width: 100%; white-space: normal; }
    .admin-layout .form-section { padding: 1.15rem; border-radius: 9px; }
    .admin-layout .item-row { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .admin-layout .item-row-actions { flex-wrap: wrap; }
    .admin-layout .proyectos-lista-item { flex-direction: row; align-items: center; gap: .5rem; }
    .admin-layout .proyectos-lista-item .item-row-actions { flex-wrap: nowrap; }
    .admin-layout .dash-status-meta { align-items: flex-start; flex-wrap: wrap; gap: .75rem; }
}

/* Editor de proyectos externos: prioriza lectura tabular y dos filas por ficha.
   Tipo/integante forman la primera; los seis datos descriptivos, la segunda. */
@media (min-width: 861px) {
    .admin-layout .externos-compactos > .form-section {
        margin-bottom: 1.25rem;
        padding: 1.15rem 1.25rem;
    }

    .admin-layout .externos-compactos .form-section-title {
        margin-bottom: .8rem;
        padding-bottom: .6rem;
        font-size: .57rem;
    }

    .admin-layout .externos-compactos .item-row-editable {
        padding: .5rem 0;
    }

    .admin-layout .externos-compactos .item-row-fields {
        padding-right: 4.7rem;
    }

    .admin-layout .externos-compactos .proyectos-externos-cabecera {
        grid-template-columns: minmax(18rem, 2.2fr) minmax(8rem, .8fr);
        gap: .45rem;
        margin-bottom: .3rem;
    }

    .admin-layout .externos-compactos .proyectos-externos-fila,
    .admin-layout .externos-compactos .proyectos-externos-lista-cabecera {
        grid-template-columns: 3.1rem minmax(10rem, 2.1fr) minmax(5.5rem, .8fr) minmax(7rem, 1.1fr) 4rem 4.75rem;
        gap: .45rem;
    }

    .admin-layout .externos-compactos .proyectos-externos-lista-cabecera {
        padding: .1rem 0 .2rem;
        font-family: 'Montserrat', sans-serif;
        font-size: .52rem;
        letter-spacing: .035em;
        color: var(--opus-muted);
    }

    .admin-layout .externos-compactos .form-group { margin-bottom: 0; }

    .admin-layout .externos-compactos .form-group label {
        margin-bottom: .22rem;
        font-size: .53rem;
        letter-spacing: .05em;
    }

    .admin-layout .externos-compactos .proyectos-externos-cabecera select,
    .admin-layout .externos-compactos .proyectos-externos-fila input,
    .admin-layout .externos-compactos .proyectos-externos-fila select {
        min-height: 30px;
        padding: .3rem .45rem;
        font-size: .68rem;
        line-height: 1.2;
    }

    .admin-layout .externos-compactos .proyectos-externos-fila input {
        border: 0;
        border-bottom: 1px solid #cfe0e2;
        border-radius: 0;
        background: transparent;
    }

    .admin-layout .externos-compactos .proyectos-externos-fila input:focus {
        border-bottom-color: var(--opus-cyan);
        box-shadow: inset 0 -1px 0 var(--opus-cyan);
    }

    .admin-layout .externos-compactos .item-row-actions {
        top: .55rem;
        font-size: .6rem;
    }

    .admin-layout .externos-compactos .externos-nuevo {
        margin-top: .9rem;
        padding-top: .9rem;
    }

    .admin-layout .externos-compactos .externos-nuevo-title {
        margin-bottom: .65rem;
        font-size: .6rem;
    }
}

.admin-layout .externos-compactos .item-row-editable {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.admin-layout .externos-compactos .item-row-editable:hover {
    box-shadow: none;
}

.admin-layout .externos-compactos .external-delete-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid #efb9d9;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--opus-magenta-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: .56rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.admin-layout .externos-compactos .external-delete-btn svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-layout .externos-compactos .external-delete-btn:hover {
    border-color: var(--opus-magenta);
    background: var(--opus-magenta);
    color: #fff;
}

.admin-layout .external-member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.1rem;
}

.admin-layout .external-member-tab {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    border: 1px solid var(--opus-line);
    border-radius: 7px;
    background: rgba(255,255,255,.58);
    color: var(--opus-muted);
    padding: .35rem .7rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .61rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.admin-layout .external-member-tab:hover {
    border-color: #a7cdd1;
    background: #fff;
    color: var(--opus-cyan-dark);
}

.admin-layout .external-member-tab.active {
    border-color: var(--opus-cyan);
    background: var(--opus-cyan);
    color: #fff;
}

.admin-layout .external-member-count {
    display: inline-grid;
    width: 17px;
    height: 17px;
    margin-left: .35rem;
    place-items: center;
    border-radius: 2px;
    background: var(--opus-cyan);
    color: #fff;
    font-size: .56rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.admin-layout .external-member-tab.active .external-member-count {
    background: var(--opus-cyan-dark);
    color: #fff;
}

/* ─── Acceso Opus ────────────────────────────────────────────── */
body.opus-login {
    --opus-ink: #000;
    --opus-muted: #000;
    --opus-paper: #eef6f7;
    --opus-surface: #fbfefe;
    --opus-line: #d1e1e3;
    --opus-cyan: #000;
    --opus-cyan-dark: #000;
    --opus-magenta: #000;
    margin: 0;
    background: var(--opus-paper);
    color: var(--opus-ink);
    font-family: 'IBM Plex Mono', monospace;
}

.opus-login .login-background-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
}

.opus-login .login-background-video::-webkit-media-controls {
    display: none !important;
}

.opus-login .login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(28rem, 0.85fr);
    background: var(--opus-paper);
}

.opus-login .login-intro {
    position: relative;
    display: flex;
    min-height: 34rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    background: #e3f0f2;
    border-right: 1px solid var(--opus-line);
}

.login-intro-brand,
.login-intro-copy { position: relative; z-index: 1; }
.login-intro-kicker,
.login-intro-copy span,
.opus-login .login-logo {
    display: block;
    color: var(--opus-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.login-intro-name {
    display: block;
    margin-top: .6rem;
    color: var(--opus-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(3.4rem, 8vw, 7.5rem);
    font-weight: 600;
    letter-spacing: -.09em;
    line-height: .8;
}

.login-intro-copy p {
    margin: 0 0 1rem;
    color: var(--opus-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1.25;
}

.login-intro-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.login-intro-orb--one { width: min(41vw, 39rem); height: min(41vw, 39rem); right: -16%; bottom: -35%; background: var(--opus-cyan); opacity: .94; }
.login-intro-orb--two { width: min(15vw, 15rem); height: min(15vw, 15rem); right: 17%; bottom: 21%; background: var(--opus-magenta); opacity: .92; }

.opus-login .login-panel {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 2rem;
    background: rgba(251, 254, 254, .82);
}

.opus-login .login-box {
    width: min(100%, 25rem);
    padding: 0;
    border: 0;
}

.opus-login .login-heading { margin-bottom: 2.6rem; }
.opus-login .login-logo { margin: 0 0 1.1rem; color: var(--opus-cyan); }
.opus-login .login-box h1 { margin: 0 0 .5rem; color: var(--opus-ink); font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -.06em; }
.opus-login .login-sub { margin: 0; color: var(--opus-muted); font-size: .85rem; line-height: 1.5; opacity: 1; }
.opus-login .form-group { margin-bottom: 1.15rem; }
.opus-login .form-group label { margin-bottom: .4rem; color: var(--opus-muted); font-family: 'IBM Plex Mono', monospace; font-size: .62rem; font-weight: 600; letter-spacing: .07em; opacity: 1; }
.opus-login .form-group input[type="text"],
.opus-login .form-group input[type="password"] { min-height: 46px; border: 1px solid var(--opus-line); border-radius: 7px; background: #fff; color: var(--opus-ink); font-size: .9rem; transition: border-color .18s ease, box-shadow .18s ease; }
.opus-login .form-group input:focus { border-color: var(--opus-cyan); box-shadow: 0 0 0 3px rgba(0, 141, 163, .13); outline: 0; }
.opus-login .btn-full { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; margin-top: 1.65rem; padding: .75rem 1rem; border: 0; border-radius: 7px; background: var(--opus-cyan); box-shadow: 0 3px 8px rgba(0, 141, 163, .18); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 400; letter-spacing: .06em; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.opus-login .btn-full:hover { background: var(--opus-cyan-dark); box-shadow: 0 6px 15px rgba(0, 141, 163, .22); transform: translateY(-1px); }
.opus-login .btn-full span { font-size: 1.1rem; line-height: 0; }
.opus-login .alert-error { margin-bottom: 1.5rem; padding: .75rem .85rem; border: 1px solid #efb9d9; border-left: 3px solid var(--opus-magenta); border-radius: 7px; background: #fdf0f7; color: #852255; font-size: .76rem; line-height: 1.4; }

@media (max-width: 760px) {
    .opus-login .login-wrap { grid-template-columns: 1fr; }
    .opus-login .login-intro { min-height: 15rem; padding: 2rem 1.5rem; border-right: 0; border-bottom: 1px solid var(--opus-line); }
    .login-intro-name { font-size: 3.7rem; }
    .login-intro-orb--one { width: 19rem; height: 19rem; right: -5rem; bottom: -13rem; }
    .login-intro-orb--two { width: 6rem; height: 6rem; right: 6rem; bottom: 2.2rem; }
    .opus-login .login-panel { min-height: calc(100vh - 15rem); align-items: start; padding: 3rem 1.5rem; }
}

/* Composición final del acceso: marca arriba y formulario horizontal abajo. */
.opus-login .login-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    padding: 2rem;
    background: transparent;
}

.opus-login .login-brand {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 4.5rem;
    place-items: center;
    transform: translateX(-50%);
}

.opus-login .login-architecture {
    margin-top: .22rem;
    color: var(--opus-ink);
}

.opus-login .login-brand img {
    display: block;
    width: auto;
    max-width: min(15rem, 70vw);
    max-height: 4.5rem;
    object-fit: contain;
}

.opus-login .login-brand span {
    color: var(--opus-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.opus-login .login-brand-meta {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    margin: 0;
    color: #000;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .045em;
    line-height: 1.4;
}

.opus-login .login-brand-meta span + span {
    padding-left: 0;
    border-left: 0;
}

.opus-login .login-form {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) minmax(12rem, 17rem) auto;
    gap: .65rem;
    width: min(100%, 43rem);
    align-items: stretch;
}

.opus-login .login-form .form-group { margin: 0; }
.login-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.opus-login .login-form input[type="text"],
.opus-login .login-form input[type="password"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: .75rem .9rem;
    border: 1px solid #000;
    border-radius: 7px;
    background: #fff;
    color: var(--opus-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .88rem;
}

.opus-login .login-form input::placeholder {
    color: #000;
    opacity: 1;
}

.opus-login .login-form .btn-full {
    width: auto;
    min-height: 48px;
    margin: 0;
    padding: .75rem 1.25rem;
    border: 1px solid #000;
    background: rgba(255, 255, 255, .88);
    box-shadow: none;
    color: #000;
    white-space: nowrap;
}

.opus-login .login-form .btn-full:hover {
    background: #fff;
    box-shadow: none;
    color: #000;
}

.opus-login .login-wrap > .alert-error {
    width: min(100%, 43rem);
    margin: -1rem 0 -.85rem;
    border-color: #000;
    background: rgba(255, 255, 255, .88);
    color: #000;
}

@media (max-width: 640px) {
    .opus-login .login-wrap { justify-content: center; padding-top: 2rem; }
    .opus-login .login-form { grid-template-columns: 1fr; }
    .opus-login .login-form .btn-full { width: 100%; }
    .opus-login .login-brand-meta { flex-direction: column; gap: .15rem; align-items: flex-start; }
    .opus-login .login-brand-meta span + span { padding-left: 0; border-left: 0; }
}

.opus-login .login-footer-mark {
    position: fixed;
    z-index: 2;
    bottom: 1.5rem;
    right: 1.5rem;
    left: auto;
    width: 30px;
    margin: 0;
    transform: none;
}

.opus-login .login-footer-mark .proyectos-footer-mark-credit {
    color: #000;
    font-family: 'IBM Plex Mono', monospace;
}