/* ==========================================
   JobApply Assistant — Estilos CSS
   ========================================== */

:root {
    /* Colores principales */
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    
    --success: #10b981;
    --success-light: #d1fae5;
    
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    
    --error: #ef4444;
    --error-light: #fee2e2;
    
    /* Grises */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Bordes */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    
    /* Transiciones */
    --transition: all 0.2s ease;
}

/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-100);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
}

/* ==========================================
   Header
   ========================================== */

.header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.25rem;
    font-weight: 700;
}

.logo-icon {
    font-size: 1.5rem;
}

.nav {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: var(--transition);
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    color: white;
    background: rgba(255,255,255,0.15);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-name {
    font-weight: 500;
}

.btn-icon {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-icon:hover {
    background: rgba(255,255,255,0.25);
}

/* ==========================================
   Layout principal
   ========================================== */

.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-xl);
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.content {
    min-height: calc(100vh - 200px);
}

/* ==========================================
   Cards
   ========================================== */

.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-title .icon {
    font-size: 1.25rem;
}

/* ==========================================
   Formularios
   ========================================== */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--spacing-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    transition: var(--transition);
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-group input::placeholder {
    color: var(--gray-400);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* ==========================================
   Botones
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
    background: var(--gray-200);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary-light);
}

.btn-full {
    width: 100%;
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
}

/* ==========================================
   Perfil
   ========================================== */

.profile-photo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.profile-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    margin-bottom: var(--spacing-sm);
}

.photo-upload-btn {
    font-size: 0.75rem;
    color: var(--primary);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.photo-upload-btn:hover {
    background: var(--primary-light);
}

.profile-summary {
    margin-bottom: var(--spacing-md);
}

.profile-field {
    margin-bottom: var(--spacing-sm);
}

.profile-field label {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: block;
    margin-bottom: 2px;
}

.profile-field input {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.cv-upload-section {
    margin-bottom: var(--spacing-md);
}

.upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.upload-area:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.upload-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.upload-text {
    font-weight: 500;
    color: var(--gray-700);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.cv-filename {
    font-size: 0.75rem;
    color: var(--success);
    margin-top: var(--spacing-xs);
}

/* ==========================================
   Resultados
   ========================================== */

.results-section {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.results-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.results-count {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.results-list {
    min-height: 400px;
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
}

.empty-state p {
    color: var(--gray-500);
    max-width: 300px;
}

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Job card */
.job-card {
    display: flex;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-100);
    transition: var(--transition);
    cursor: pointer;
}

.job-card:hover {
    background: var(--gray-50);
}

.job-card:last-child {
    border-bottom: none;
}

.job-logo {
    width: 56px;
    height: 56px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: var(--spacing-md);
    flex-shrink: 0;
}

.job-info {
    flex: 1;
    min-width: 0;
}

.job-title {
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-company {
    color: var(--primary);
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-xs);
}

.job-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}

.job-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.job-snippet {
    font-size: 0.875rem;
    color: var(--gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-md);
}

.job-source-badge {
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-sm);
    text-align: center;
}

/* ==========================================
   Panel de generación
   ========================================== */

.generation-panel {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.panel-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gray-200);
}

.btn-back {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
    padding: 0;
}

.btn-back:hover {
    text-decoration: underline;
}

.panel-header h2 {
    font-size: 1.5rem;
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
}

.generation-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Skill Match */
.skill-match {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.match-title {
    font-weight: 600;
    color: var(--gray-700);
}

.match-percentage {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

.match-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.match-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #34d399);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.match-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.match-column h4 {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
    color: var(--gray-700);
}

.match-column ul {
    list-style: none;
    font-size: 0.875rem;
}

.match-column li {
    padding: var(--spacing-xs) 0;
    color: var(--gray-600);
}

/* Tabs */
.result-tabs {
    display: flex;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--spacing-md);
}

.tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-500);
    transition: var(--transition);
}

.tab-btn:hover {
    color: var(--gray-700);
}

.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-actions {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
}

/* CV Preview */
.cv-preview {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    max-height: 400px;
    overflow-y: auto;
}

/* Letter */
.letter-text {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    font-size: 0.9375rem;
    line-height: 1.7;
    resize: vertical;
}

/* Answers */
.answers-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.answer-item {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.answer-question {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
}

.answer-text {
    color: var(--gray-600);
}

/* Final action */
.final-action {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

.hint {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: var(--spacing-sm);
}

/* Progress */
.generation-progress {
    padding: var(--spacing-md);
}

.progress-bar {
    height: 6px;
    background: var(--gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #3b82f6);
    width: 0%;
    transition: width 0.3s ease;
    animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.progress-text {
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* ==========================================
   Modal
   ========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 400px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.modal-header h2 {
    font-size: 1.5rem;
    color: var(--gray-800);
    margin-bottom: var(--spacing-xs);
}

.modal-header p {
    color: var(--gray-500);
    font-size: 0.875rem;
}

.modal-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.modal-tab {
    flex: 1;
    padding: var(--spacing-sm);
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-600);
    transition: var(--transition);
}

.modal-tab:hover {
    background: var(--gray-200);
}

.modal-tab.active {
    background: var(--primary);
    color: white;
}

.modal-error {
    background: var(--error-light);
    color: var(--error);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
    font-size: 0.875rem;
}

/* ==========================================
   Toast notifications
   ========================================== */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 1001;
}

.toast {
    background: var(--gray-800);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.toast.success {
    background: var(--success);
}

.toast.error {
    background: var(--error);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 1024px) {
    .main {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        order: 1;
    }
    
    .content {
        order: 0;
    }
}

@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    .nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }
    
    .main {
        padding: var(--spacing-md);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .job-card {
        flex-direction: column;
    }
    
    .job-logo {
        margin-bottom: var(--spacing-md);
        margin-right: 0;
    }
    
    .job-actions {
        margin-left: 0;
        margin-top: var(--spacing-md);
        flex-direction: row;
    }
    
    .match-details {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Panel de Automatización
   ========================================== */

.automation-panel {
    border: 2px solid var(--warning);
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.automation-panel h3 {
    color: var(--gray-800);
    margin-bottom: var(--spacing-sm);
}

.warning-text {
    color: var(--warning);
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
}

.automation-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    background: white;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.status-item {
    text-align: center;
}

.status-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.status-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
}

.status-value.running {
    color: var(--success);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.automation-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.automation-log {
    background: var(--gray-800);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
}

.automation-log h4 {
    color: var(--gray-300);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
}

.log-content {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    color: #10b981;
    line-height: 1.5;
}

.log-content .log-error {
    color: #ef4444;
}

.log-content .log-warning {
    color: #f59e0b;
}

.log-content .log-info {
    color: #3b82f6;
}

/* Checkbox para seleccionar ofertas */
.job-card {
    position: relative;
}

.job-checkbox {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.job-card.selected {
    border-left: 4px solid var(--primary);
    background: var(--primary-light);
}


/* ============================================================
   PORTADA DE JOBAPPLY
   CSS nativo. Un solo acento, un solo radio, un solo tema por
   preferencia del sistema. Sin emojis y sin rayas largas.
   ============================================================ */

.landing{
  /* --- claro --- */
  --lp-bg:#fbfbfa;
  --lp-superficie:#ffffff;
  --lp-tinta:#16181d;
  --lp-tinta-2:#5b6070;
  --lp-linea:#e4e4e2;
  --lp-acento:#05664a;
  --lp-acento-claro:#e7f2ee;
  --lp-acento-tinta:#ffffff;
  --lp-radio:14px;
  --lp-max:1240px;

  display:none;
  background:var(--lp-bg);
  color:var(--lp-tinta);
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.landing.visible{display:block}

@media (prefers-color-scheme:dark){
  .landing{
    --lp-bg:#0d0f12;
    --lp-superficie:#15181d;
    --lp-tinta:#f2f3f5;
    --lp-tinta-2:#9aa1ae;
    --lp-linea:#262a31;
    --lp-acento:#3fbf93;
    --lp-acento-claro:#132821;
    --lp-acento-tinta:#08130f;
  }
}

.landing *{box-sizing:border-box}
.landing h1,.landing h2,.landing h3{margin:0; letter-spacing:-.035em; text-wrap:balance; font-weight:620}
.landing p{margin:0}

/* --- navegación --- */
.lp-nav-links a:hover{color:var(--lp-tinta)}
.lp-solid{background:var(--lp-acento); color:var(--lp-acento-tinta); border:1px solid var(--lp-acento)}
.lp-solid:hover{filter:brightness(1.08)}
.lp-ghost{background:transparent; color:var(--lp-tinta); border:1px solid var(--lp-linea)}
.lp-ghost:hover{border-color:var(--lp-tinta-2)}
.lp-solid:active,.lp-ghost:active{transform:translateY(1px)}
.lp-solid:focus-visible,.lp-ghost:focus-visible{outline:2px solid var(--lp-acento); outline-offset:2px}
.lp-xl{padding:14px 26px; font-size:16px}

/* --- eyebrow, muy contado --- */
.lp-eyebrow{
  font-size:12.5px; font-weight:560; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lp-acento); margin-bottom:18px;
}

.lp-h2{font-size:clamp(26px,3.6vw,40px); margin-bottom:clamp(28px,4vw,48px)}

/* --- HERO: split asimétrico 6/5 --- */
.lp-hero h1 em{font-style:italic; color:var(--lp-acento); line-height:1.14; display:inline-block; padding-bottom:2px}
.lp-sub{
  font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--lp-tinta-2);
  max-width:44ch; margin-bottom:30px;
}
.lp-acciones{display:flex; gap:11px; flex-wrap:wrap}

.lp-como{
  max-width:var(--lp-max); margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(16px,4vw,40px);
  border-top:1px solid var(--lp-linea);
}
.lp-pasos{list-style:none; margin:0; padding:0; display:grid; gap:0}
.lp-pasos li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,40px);
  align-items:start; padding:clamp(22px,3vw,32px) 0;
}
.lp-pasos li+li{border-top:1px solid var(--lp-linea)}
.lp-cifra{
  font-size:clamp(40px,5vw,66px); font-weight:600; line-height:.9;
  color:var(--lp-linea); letter-spacing:-.05em; min-width:1.2em;
}
.lp-pasos h3{font-size:clamp(19px,2.2vw,24px); margin-bottom:7px}
.lp-pasos p{color:var(--lp-tinta-2); font-size:16px; line-height:1.6; max-width:56ch}
.lp-pasos code{
  font-family:"Geist Mono",ui-monospace,monospace; font-size:.92em;
  background:var(--lp-acento-claro); color:var(--lp-acento);
  padding:2px 7px; border-radius:5px;
}

/* --- FRANJA --- */
.lp-franja{
  background:var(--lp-acento-claro);
  padding:clamp(44px,6vw,72px) clamp(16px,4vw,40px);
}
.lp-franja p{
  max-width:880px; margin:0 auto; text-align:center;
  font-size:clamp(20px,2.8vw,31px); line-height:1.35;
  letter-spacing:-.025em; color:var(--lp-tinta-2);
}
.lp-franja strong{color:var(--lp-tinta); font-weight:620}

/* --- BENTO: cuatro celdas, pesos distintos --- */
.lp-bento{
  max-width:var(--lp-max); margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(16px,4vw,40px);
}
.lp-rejilla{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.lp-rejilla>*{min-width:0}
.lp-celda{
  background:var(--lp-superficie); border:1px solid var(--lp-linea);
  border-radius:var(--lp-radio); padding:clamp(22px,3vw,32px);
}
.lp-celda i{font-size:26px; color:var(--lp-acento); display:block; margin-bottom:14px}
.lp-celda h3{font-size:19px; margin-bottom:9px}
.lp-celda p{color:var(--lp-tinta-2); font-size:15.5px; line-height:1.6}
.lp-celda-ancha{grid-column:span 2}
.lp-celda-foto{padding:0; overflow:hidden; min-height:200px}
.lp-celda-foto img{width:100%; height:100%; max-width:100%; object-fit:cover; display:block}
.lp-celda-acento{background:var(--lp-acento-claro); border-color:transparent}
.lp-celda-acento h3,.lp-celda-acento p{color:var(--lp-tinta)}
.lp-celda-acento p{color:var(--lp-tinta-2)}

/* --- CIERRE --- */
.lp-cierre{
  text-align:center; padding:clamp(56px,8vw,104px) clamp(16px,4vw,40px);
  border-top:1px solid var(--lp-linea);
}
.lp-cierre h2{font-size:clamp(26px,4vw,44px); max-width:18ch; margin:0 auto 28px}
.lp-nota{font-size:14px; color:var(--lp-tinta-2); margin-top:16px}

/* --- pie --- */
.lp-pie{
  border-top:1px solid var(--lp-linea);
  max-width:var(--lp-max); margin:0 auto;
  padding:26px clamp(16px,4vw,40px);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:14px; color:var(--lp-tinta-2);
}
.lp-pie a{color:var(--lp-acento); text-decoration:none}
.lp-pie a:hover{text-decoration:underline}

/* --- entradas al hacer scroll --- */
.lp-anim{opacity:0; transform:translateY(16px)}
.lp-anim.dentro{opacity:1; transform:none; transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  .lp-anim{opacity:1; transform:none; transition:none}
  .lp-solid,.lp-ghost{transition:none}
}

/* --- móvil --- */
@media (max-width:900px){
  .lp-hero{grid-template-columns:minmax(0,1fr); gap:34px}
  .lp-hero-foto{order:-1}
  .lp-hero-foto img{aspect-ratio:16/11}
  .lp-foto-dato{left:auto; right:12px; bottom:-18px; max-width:200px}
  .lp-nav-links{display:none}
}
@media (max-width:640px){
  .lp-rejilla{grid-template-columns:minmax(0,1fr)}
  .lp-celda-ancha{grid-column:span 1}
  .lp-celda-foto{min-height:180px}
  .lp-acciones .lp-xl{flex:1 1 100%}
  .lp-nav{height:60px}
  .lp-nav-cta .lp-ghost{display:none}
}


/* ============================================================
   VIDA: reveals, stagger y respuesta al tacto
   Curvas fuertes. Las de CSS de serie no tienen fuerza.
   ============================================================ */
.landing{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
}

/* --- el centinela vive arriba del todo; si no se ve, el nav se ha despegado --- */
.lp-centinela{position:absolute; top:0; height:1px; width:100%; pointer-events:none}

/* --- titular: cada linea sube desde debajo de su propia caja --- */
.lp-hero h1 .lin{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.lp-hero h1 .lin>span{
  display:block; transform:translateY(108%);
  animation:lp-subir .85s var(--ease-out) forwards; animation-delay:var(--d,0s);
}
@keyframes lp-subir{to{transform:translateY(0)}}

/* --- el resto del hero entra en cascada --- */
.lp-entra>.lp-eyebrow,
.lp-entra>.lp-sub,
.lp-entra>.lp-acciones{
  opacity:0; transform:translateY(14px);
  animation:lp-asomar .7s var(--ease-out) forwards;
}
.lp-entra>.lp-eyebrow{animation-delay:.04s}
.lp-entra>.lp-sub{animation-delay:.40s}
.lp-entra>.lp-acciones{animation-delay:.48s}
@keyframes lp-asomar{to{opacity:1; transform:none}}

/* --- la foto se descubre de abajo arriba --- */
.lp-solid:active,.lp-ghost:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .lp-solid:hover{box-shadow:0 6px 20px color-mix(in srgb,var(--lp-acento) 32%,transparent)}
  .lp-ghost:hover{border-color:var(--lp-tinta-2); background:color-mix(in srgb,var(--lp-tinta) 4%,transparent)}
}

/* --- brillo que cruza el boton principal al pasar por encima --- */
.lp-solid{position:relative; overflow:hidden; isolation:isolate}
.lp-solid::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgb(255 255 255/.22) 50%,transparent 80%);
  transform:translateX(-120%);
}
@media (hover:hover) and (pointer:fine){
  .lp-solid:hover::after{transition:transform .7s var(--ease-out); transform:translateX(120%)}
}

/* --- entradas al hacer scroll: stagger de verdad, por posicion --- */
.lp-anim{opacity:0; transform:translateY(18px)}
.lp-anim.dentro{
  opacity:1; transform:none;
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay:var(--paso,0ms);
}

/* --- los pasos: la cifra se enciende al entrar --- */
.lp-cifra{transition:color .5s var(--ease-out) .1s}
.lp-pasos li.dentro .lp-cifra{color:var(--lp-acento)}

/* --- celdas del bento --- */
.lp-celda{transition:transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms ease}
@media (hover:hover) and (pointer:fine){
  .lp-celda:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--lp-acento) 34%,var(--lp-linea));
    box-shadow:0 12px 34px color-mix(in srgb,var(--lp-tinta) 9%,transparent);
  }
  .lp-celda-foto:hover img{transform:scale(1.045)}
}
.lp-celda-foto img{transition:transform 700ms var(--ease-out)}
.lp-celda i{transition:transform 260ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .lp-celda:hover i{transform:translateY(-2px) scale(1.08)} }

/* --- enlaces del nav: subrayado que crece desde la izquierda --- */
.lp-nav-links a{position:relative; padding-bottom:3px}
.lp-nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--lp-acento); transform:scaleX(0); transform-origin:left;
  transition:transform 260ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .lp-nav-links a:hover::after{transform:scaleX(1)} }

/* --- quien pida menos movimiento, que lo tenga --- */
@media (prefers-reduced-motion:reduce){
  .lp-hero h1 .lin>span{transform:none; animation:none}
  .lp-entra>*,.lp-foto-dato{opacity:1; transform:none; animation:none}
  .lp-entra-foto img{clip-path:none; transform:none; animation:none}
  .lp-anim{opacity:1; transform:none; transition:none}
  .lp-solid::after{display:none}
  .lp-celda:hover{transform:none; box-shadow:none}
}


/* ============================================================
   CABECERA
   Arriba del todo va ancha y transparente. En cuanto la pagina
   se despega, se encoge en una pastilla flotante.
   ============================================================ */
.lp-nav-carril{
  position:sticky; top:0; z-index:30;
  padding:0 clamp(12px,3vw,24px);
  transition:padding-top 420ms var(--ease-out);
}
.lp-nav-carril.despegado{padding-top:12px}

.lp-nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:66px; padding:0 10px 0 6px;
  max-width:var(--lp-max); margin:0 auto;
  border:1px solid transparent; border-radius:0;
  background:transparent;
  transition:max-width 420ms var(--ease-out), height 420ms var(--ease-out),
             border-radius 420ms var(--ease-out), border-color 300ms ease,
             background 300ms ease, box-shadow 380ms var(--ease-out),
             padding 420ms var(--ease-out);
}
.lp-nav-carril.despegado .lp-nav{
  max-width:820px; height:56px; padding:0 8px 0 6px;
  border-radius:999px;
  border-color:color-mix(in srgb,var(--lp-tinta) 9%,transparent);
  background:color-mix(in srgb,var(--lp-bg) 92%,transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 8px 30px color-mix(in srgb,var(--lp-tinta) 10%,transparent),
             inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);
}
@media (prefers-reduced-transparency:reduce){
  .lp-nav-carril.despegado .lp-nav{background:var(--lp-superficie); backdrop-filter:none}
}

/* --- logo --- */
.lp-logo{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--lp-tinta); padding:6px 10px 6px 6px; border-radius:999px;
  transition:background 200ms ease;
}
.lp-marca{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:var(--lp-acento); color:var(--lp-acento-tinta);
  transition:transform 320ms var(--ease-out), border-radius 420ms var(--ease-out);
}
.lp-nav-carril.despegado .lp-marca{border-radius:999px}
.lp-nombre{font-weight:620; font-size:16.5px; letter-spacing:-.025em}
@media (hover:hover) and (pointer:fine){
  .lp-logo:hover{background:color-mix(in srgb,var(--lp-tinta) 5%,transparent)}
  .lp-logo:hover .lp-marca{transform:rotate(-6deg) scale(1.06)}
}

.lp-nav-links{display:flex; gap:22px}
.lp-nav-links a{
  color:var(--lp-tinta-2); text-decoration:none; font-size:14.5px;
  position:relative; padding-bottom:3px; transition:color 180ms ease;
}
.lp-nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--lp-acento); transform:scaleX(0); transform-origin:left;
  transition:transform 260ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .lp-nav-links a:hover{color:var(--lp-tinta)}
  .lp-nav-links a:hover::after{transform:scaleX(1)}
}
.lp-nav-cta{display:flex; gap:8px; align-items:center}
.lp-nav-cta .lp-solid,.lp-nav-cta .lp-ghost{padding:9px 17px; font-size:14px}
.lp-nav-cta .lp-ghost{border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .lp-nav-cta .lp-ghost:hover{border-color:transparent; background:color-mix(in srgb,var(--lp-tinta) 6%,transparent)}
}

@media (max-width:900px){
  .lp-nav-links{display:none}
  .lp-nav-carril.despegado .lp-nav{max-width:100%}
}
@media (max-width:560px){
  .lp-nav-cta .lp-ghost{display:none}
  .lp-nombre{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lp-nav,.lp-nav-carril,.lp-marca{transition:none}
}


/* ============================================================
   LA ESCENA DEL HERO
   Un bucle de 15s que cuenta lo que hace el programa:
   se escribe la busqueda, caen las ofertas y se genera el CV.
   ============================================================ */
.lp-hero{
  display:block; text-align:center;
  padding:clamp(34px,5vw,58px) clamp(16px,4vw,40px) clamp(40px,5vw,72px);
}
.lp-hero h1{font-size:clamp(32px,5vw,58px); line-height:1.06; margin-bottom:18px}
.lp-hero .lp-sub{margin-left:auto; margin-right:auto; margin-bottom:26px; max-width:46ch}
.lp-acciones{justify-content:center}

.lp-escena{
  max-width:1060px; margin:clamp(34px,5vw,56px) auto 0;
  perspective:1400px;
}
.lp-entra-escena{
  opacity:0; transform:translateY(26px) rotateX(9deg);
  animation:lp-escena-entra 1.1s var(--ease-out) .55s forwards;
}
@keyframes lp-escena-entra{to{opacity:1; transform:none}}

.lp-ventana{
  background:var(--lp-superficie); border:1px solid var(--lp-linea);
  border-radius:18px; overflow:hidden; text-align:left;
  box-shadow:0 30px 70px color-mix(in srgb,var(--lp-tinta) 13%,transparent),
             0 3px 10px color-mix(in srgb,var(--lp-tinta) 6%,transparent);
}

/* --- la barra de busqueda que se teclea sola --- */
.lp-buscador{
  display:flex; align-items:center; gap:9px;
  padding:15px 18px; border-bottom:1px solid var(--lp-linea);
  background:color-mix(in srgb,var(--lp-acento) 4%,var(--lp-superficie));
  font-size:15px; position:relative;
}
.lp-buscador i{color:var(--lp-acento); font-size:18px; flex:none}
.lp-tecleo{overflow:hidden; white-space:nowrap; display:inline-block}
.lp-tecleo>span{
  display:inline-block; clip-path:inset(0 100% 0 0);
  animation:lp-teclear 15s steps(30) infinite;
}
@keyframes lp-teclear{
  0%{clip-path:inset(0 100% 0 0)}
  12%,99%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 100% 0 0)}
}
.lp-cursor{
  width:1.5px; height:17px; background:var(--lp-tinta); flex:none;
  animation:lp-parpadeo .8s steps(2) infinite, lp-cursor-fin 15s linear infinite;
}
@keyframes lp-parpadeo{50%{opacity:0}}
@keyframes lp-cursor-fin{0%,20%{opacity:1} 21%,100%{opacity:0}}
.lp-buscando{
  margin-left:auto; font-size:13px; color:var(--lp-tinta-2);
  opacity:0; animation:lp-buscando 15s linear infinite;
}
.lp-buscando::after{content:"..."; animation:lp-puntos 1.2s steps(4) infinite}
@keyframes lp-puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes lp-buscando{0%,17%{opacity:0} 20%,28%{opacity:1} 32%,100%{opacity:0}}

/* --- las dos columnas --- */
.lp-panel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.lp-panel>*{min-width:0; padding:18px}
.lp-col-ofertas{border-right:1px solid var(--lp-linea)}
.lp-col-tit{
  font-size:11.5px; font-weight:560; letter-spacing:.07em; text-transform:uppercase;
  color:var(--lp-tinta-2); margin-bottom:12px;
}

/* --- las ofertas caen una detras de otra --- */
.lp-of{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--lp-linea); border-radius:11px; padding:11px 12px;
  margin-bottom:9px; background:var(--lp-bg);
  opacity:0; transform:translateY(10px);
}
.lp-of strong{display:block; font-size:14px; letter-spacing:-.01em}
.lp-of span:not(.lp-of-logo):not(.lp-of-fuente){font-size:12.5px; color:var(--lp-tinta-2)}
.lp-of-logo{
  width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--lp-acento-claro); color:var(--lp-acento); font-weight:640; font-size:14px;
}
.lp-of-fuente{
  margin-left:auto; font-size:11px; color:var(--lp-tinta-2);
  border:1px solid var(--lp-linea); border-radius:99px; padding:3px 9px; flex:none;
}
.lp-of-1{animation:lp-cae 15s var(--ease-out) infinite}
.lp-of-2{animation:lp-cae 15s var(--ease-out) infinite; animation-delay:.5s}
.lp-of-3{animation:lp-cae 15s var(--ease-out) infinite; animation-delay:1s}
@keyframes lp-cae{
  0%,30%{opacity:0; transform:translateY(10px)}
  36%,99%{opacity:1; transform:none}
  100%{opacity:0; transform:translateY(10px)}
}
/* la primera se marca como elegida */
.lp-of-1{position:relative}
.lp-of-1::after{
  content:""; position:absolute; inset:-1px; border-radius:11px;
  border:1.5px solid var(--lp-acento); opacity:0;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lp-acento) 12%,transparent);
  animation:lp-elegida 15s linear infinite;
}
@keyframes lp-elegida{0%,44%{opacity:0} 48%,99%{opacity:1} 100%{opacity:0}}

/* --- el curriculum se escribe --- */
.lp-cv-cabe{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.lp-cv-cabe .lp-col-tit{margin:0}
.lp-encaje{
  font-size:11.5px; font-weight:560; color:var(--lp-acento);
  background:var(--lp-acento-claro); border-radius:99px; padding:4px 10px;
  opacity:0; animation:lp-encaje 15s linear infinite;
}
@keyframes lp-encaje{0%,74%{opacity:0; transform:scale(.9)} 78%,99%{opacity:1; transform:none} 100%{opacity:0}}

.lp-hoja{
  border:1px solid var(--lp-linea); border-radius:11px; padding:15px;
  background:var(--lp-bg); display:flex; flex-direction:column; gap:9px;
}
.lp-ren{
  height:8px; border-radius:4px; background:var(--lp-linea);
  transform-origin:left; transform:scaleX(0);
  animation:lp-renglon 15s var(--ease-out) infinite;
}
.lp-ren-tit{height:12px; width:54%; background:color-mix(in srgb,var(--lp-tinta) 62%,transparent)}
.r1{width:92%}.r2{width:78%}.r3{width:86%}.r4{width:64%}.r5{width:88%}.r6{width:46%}
@keyframes lp-renglon{0%,50%{transform:scaleX(0)} 58%,99%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.lp-ren-tit{animation-delay:0s}
.r1{animation-delay:.18s}.r2{animation-delay:.3s}.r3{animation-delay:.42s}
.r4{animation-delay:.54s}.r5{animation-delay:.66s}.r6{animation-delay:.78s}

.lp-etiqs{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.lp-etiqs b{
  font-size:11.5px; font-weight:520; padding:4px 10px; border-radius:99px;
  background:var(--lp-acento-claro); color:var(--lp-acento);
  opacity:0; transform:translateY(5px);
  animation:lp-etiq 15s var(--ease-out) infinite;
}
.lp-etiqs b:nth-child(1){animation-delay:1.0s}
.lp-etiqs b:nth-child(2){animation-delay:1.12s}
.lp-etiqs b:nth-child(3){animation-delay:1.24s}
.lp-etiqs b:nth-child(4){animation-delay:1.36s}
@keyframes lp-etiq{0%,62%{opacity:0; transform:translateY(5px)} 68%,99%{opacity:1; transform:none} 100%{opacity:0}}

.lp-aviso{
  display:flex; align-items:center; gap:7px; margin-top:12px;
  font-size:12.5px; color:#a86215; opacity:0;
  animation:lp-aviso 15s linear infinite;
}
.lp-aviso i{font-size:15px}
@keyframes lp-aviso{0%,80%{opacity:0} 84%,99%{opacity:1} 100%{opacity:0}}
@media (prefers-color-scheme:dark){ .lp-aviso{color:#e0a94a} }

@media (max-width:820px){
  .lp-panel{grid-template-columns:minmax(0,1fr)}
  .lp-col-ofertas{border-right:0; border-bottom:1px solid var(--lp-linea)}
  .lp-of-fuente{display:none}
}
@media (max-width:560px){
  .lp-acciones .lp-xl{flex:1 1 100%}
  .lp-buscador{font-size:13.5px; padding:12px 14px}
}

/* quien pida menos movimiento ve la escena quieta y terminada */
@media (prefers-reduced-motion:reduce){
  .lp-entra-escena{opacity:1; transform:none; animation:none}
  .lp-tecleo>span,.lp-cursor,.lp-buscando,.lp-of,.lp-of-1::after,
  .lp-encaje,.lp-ren,.lp-etiqs b,.lp-aviso{animation:none}
  .lp-tecleo>span{clip-path:none}
  .lp-of{opacity:1; transform:none}
  .lp-of-1::after,.lp-encaje,.lp-aviso{opacity:1}
  .lp-ren{transform:scaleX(1)}
  .lp-etiqs b{opacity:1; transform:none}
  .lp-cursor,.lp-buscando{display:none}
}

/* ============================================================
   ESCENAS DEL RESTO DE LA PAGINA
   Todas estan paradas hasta que el bloque entra en pantalla
   (la clase .dentro la pone el observador).
   ============================================================ */
@property --n{syntax:'<integer>'; initial-value:0; inherits:false}
@property --sg{syntax:'<integer>'; initial-value:0; inherits:false}

.lp-pasos li{grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr); align-items:center}
.lp-mini{
  border:1px solid var(--lp-linea); border-radius:12px; padding:14px;
  background:var(--lp-bg); min-height:92px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}

/* --- paso 1: se teclea --- */
.lp-mini-buscar i{color:var(--lp-acento); font-size:17px}
.lp-mini-tecleo{overflow:hidden; white-space:nowrap; font-size:14.5px}
.lp-mini-tecleo>span{
  display:inline-block; clip-path:inset(0 100% 0 0);
  animation:lp-mini-teclear 2.2s steps(19) forwards; animation-play-state:paused;
}
.dentro .lp-mini-tecleo>span{animation-play-state:running}
@keyframes lp-mini-teclear{to{clip-path:inset(0 0 0 0)}}
.lp-mini-cursor{
  width:1.5px; height:16px; background:var(--lp-tinta);
  animation:lp-parpadeo .8s steps(2) infinite;
}

/* --- paso 2: caen los portales y sube el contador --- */
.lp-mini-portales{gap:7px}
.lp-portal{
  font-size:12px; padding:5px 11px; border-radius:99px;
  border:1px solid var(--lp-linea); background:var(--lp-superficie);
  opacity:0; transform:translateY(7px);
  animation:lp-portal-cae .5s var(--ease-out) forwards; animation-play-state:paused;
}
.dentro .lp-portal{animation-play-state:running}
.lp-portal:nth-child(1){animation-delay:.05s}
.lp-portal:nth-child(2){animation-delay:.17s}
.lp-portal:nth-child(3){animation-delay:.29s}
.lp-portal:nth-child(4){animation-delay:.41s}
@keyframes lp-portal-cae{to{opacity:1; transform:none}}
.lp-contador{
  width:100%; margin-top:6px; font-size:13px; color:var(--lp-tinta-2);
  opacity:0; animation:lp-asomar .5s var(--ease-out) .6s forwards; animation-play-state:paused;
}
.dentro .lp-contador{animation-play-state:running}
.lp-num{
  font-size:22px; font-weight:650; color:var(--lp-acento); letter-spacing:-.03em;
  counter-reset:n var(--n); animation:lp-sube-num 1.6s var(--ease-out) .6s forwards;
  animation-play-state:paused;
}
.dentro .lp-num{animation-play-state:running}
.lp-num::after{content:counter(n)}
@keyframes lp-sube-num{to{--n:68}}

/* --- paso 3: se escribe la hoja --- */
.lp-mini-hoja{flex-direction:column; align-items:stretch; gap:8px}
.lp-mren{
  height:7px; border-radius:4px; background:var(--lp-linea);
  transform:scaleX(0); transform-origin:left;
  animation:lp-mren .55s var(--ease-out) forwards; animation-play-state:paused;
}
.dentro .lp-mren{animation-play-state:running}
.lp-mren.t{height:10px; width:50%; background:color-mix(in srgb,var(--lp-tinta) 55%,transparent)}
.lp-mren.a{width:92%; animation-delay:.14s}
.lp-mren.b{width:76%; animation-delay:.26s}
.lp-mren.c{width:60%; animation-delay:.38s}
@keyframes lp-mren{to{transform:scaleX(1)}}
.lp-mcheck{
  display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--lp-acento);
  opacity:0; animation:lp-asomar .45s var(--ease-out) .7s forwards; animation-play-state:paused;
}
.dentro .lp-mcheck{animation-play-state:running}

/* --- franja: el resaltado barre las palabras --- */
.lp-franja mark{
  background:none; color:inherit; position:relative; padding:0 2px;
}
.lp-franja mark::before{
  content:""; position:absolute; inset:-2px -3px; border-radius:5px; z-index:-1;
  background:color-mix(in srgb,var(--lp-acento) 26%,transparent);
  transform:scaleX(0); transform-origin:left;
  animation:lp-marcar .75s var(--ease-out) forwards; animation-play-state:paused;
}
.lp-franja p.dentro mark::before{animation-play-state:running}
.lp-franja mark.m1::before{animation-delay:.45s}
.lp-franja mark.m2::before{animation-delay:1.25s}
@keyframes lp-marcar{to{transform:scaleX(1)}}
.lp-franja mark{isolation:isolate}

/* --- bento: la lista se marca sola --- */
.lp-celda-ancha{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(18px,3vw,34px); align-items:center}
.lp-lista{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.lp-lista li{
  display:flex; align-items:center; gap:9px; font-size:14.5px;
  padding:9px 12px; border-radius:10px; background:var(--lp-bg);
  border:1px solid var(--lp-linea);
  opacity:0; transform:translateX(-8px);
  animation:lp-lista-entra .5s var(--ease-out) forwards; animation-play-state:paused;
}
.dentro .lp-lista li{animation-play-state:running}
.lp-lista li:nth-child(1){animation-delay:.15s}
.lp-lista li:nth-child(2){animation-delay:.3s}
.lp-lista li:nth-child(3){animation-delay:.6s}
.lp-lista i{font-size:16px; color:var(--lp-acento); flex:none}
.lp-lista li.no{border-color:color-mix(in srgb,#c2701a 35%,var(--lp-linea)); color:#a86215}
.lp-lista li.no i{color:#c2701a}
@keyframes lp-lista-entra{to{opacity:1; transform:none}}

/* --- bento: el reloj baja de 20 a 10 --- */
.lp-reloj{
  margin-top:14px; font-size:13px; color:var(--lp-tinta-2);
  display:flex; align-items:baseline; gap:6px;
}
.lp-seg{
  font-size:28px; font-weight:650; color:var(--lp-acento); letter-spacing:-.03em;
  counter-reset:sg var(--sg); animation:lp-baja-seg 1.8s var(--ease-out) forwards;
  animation-play-state:paused;
}
.dentro .lp-seg{animation-play-state:running}
.lp-seg::after{content:counter(sg)}
@keyframes lp-baja-seg{from{--sg:1200} to{--sg:10}}

/* --- bento: el precio se tacha --- */
.lp-precio{margin-top:14px; display:flex; align-items:baseline; gap:10px}
.lp-precio s{color:var(--lp-tinta-2); font-size:16px; text-decoration:none; position:relative}
.lp-precio s::after{
  content:""; position:absolute; left:-2px; right:-2px; top:52%; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  animation:lp-tachar .45s var(--ease-out) .4s forwards; animation-play-state:paused;
}
.dentro .lp-precio s::after{animation-play-state:running}
@keyframes lp-tachar{to{transform:scaleX(1)}}
.lp-precio b{
  font-size:30px; font-weight:680; color:var(--lp-acento); letter-spacing:-.035em;
  opacity:0; transform:scale(.85);
  animation:lp-precio-pum .55s var(--ease-out) .75s forwards; animation-play-state:paused;
}
.dentro .lp-precio b{animation-play-state:running}
@keyframes lp-precio-pum{to{opacity:1; transform:none}}

@media (max-width:900px){
  .lp-pasos li{grid-template-columns:auto minmax(0,1fr)}
  .lp-mini{grid-column:1 / -1; margin-top:12px}
  .lp-celda-ancha{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lp-mini-tecleo>span{clip-path:none; animation:none}
  .lp-mini-cursor{display:none}
  .lp-portal,.lp-contador,.lp-mcheck,.lp-lista li{opacity:1; transform:none; animation:none}
  .lp-mren{transform:scaleX(1); animation:none}
  .lp-franja mark::before{transform:scaleX(1); animation:none}
  .lp-num,.lp-seg{animation:none}
  .lp-num{--n:68} .lp-seg{--sg:10}
  .lp-precio s::after{transform:scaleX(1); animation:none}
  .lp-precio b{opacity:1; transform:none; animation:none}
}

/* --- el bento, compacto: nada se estira ni deja huecos --- */
.lp-rejilla{align-items:stretch}

/* la foto y el reloj comparten fila y alto */
.lp-celda-foto{min-height:0; aspect-ratio:auto; height:100%}
.lp-celda-foto img{height:100%; min-height:230px; object-fit:cover}

/* la del reloj: el contenido arriba, el numero abajo, sin vacios */
.lp-rejilla>.lp-celda:not(.lp-celda-ancha):not(.lp-celda-foto):not(.lp-celda-acento){
  display:flex; flex-direction:column;
}
.lp-reloj{margin-top:auto; padding-top:16px}

/* "Gratis de verdad": todo en una linea, sin filas que se separen */
.lp-celda-acento{
  grid-column:span 2;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,4vw,48px); flex-wrap:wrap;
}
.lp-celda-acento .lp-acento-txt{flex:1 1 320px; min-width:0}
.lp-celda-acento i{font-size:24px; margin-bottom:10px}
.lp-celda-acento h3{margin-bottom:7px}
.lp-celda-acento p{margin:0}
.lp-celda-acento .lp-precio{
  flex:0 0 auto; margin:0; align-items:baseline; gap:12px;
}
.lp-celda-acento .lp-precio b{font-size:clamp(38px,5vw,58px); line-height:1}
.lp-celda-acento .lp-precio s{font-size:18px}

@media (max-width:640px){
  .lp-celda-acento{grid-column:span 1; align-items:flex-start}
}

/* --- el mismo CV contra el adaptado --- */
.lp-celda-comparo{display:flex; flex-direction:column}
.lp-celda-comparo .lp-col-tit{margin-bottom:14px}
.lp-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; flex:1}
.lp-dos>*{min-width:0}
.lp-hoja-mala,.lp-hoja-buena{
  border:1px solid var(--lp-linea); border-radius:11px; padding:13px;
  background:var(--lp-bg); display:flex; flex-direction:column; gap:8px;
}
.lp-hoja-buena{
  border-color:color-mix(in srgb,var(--lp-acento) 34%,var(--lp-linea));
  background:color-mix(in srgb,var(--lp-acento) 4%,var(--lp-bg));
}
.lp-etq{
  display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:560;
  margin-bottom:3px;
}
.lp-etq.mala{color:#b06a1c}
.lp-etq.buena{color:var(--lp-acento)}
.lp-etq i{font-size:14px}

.lp-l{height:7px; border-radius:4px; background:var(--lp-linea)}
.lp-l.t{height:10px; width:56%; background:color-mix(in srgb,var(--lp-tinta) 48%,transparent)}
.lp-l.c{width:66%}
/* los renglones del bueno se van poniendo verdes */
.lp-hoja-buena .lp-l.v{
  background:var(--lp-linea); position:relative; overflow:hidden;
}
.lp-hoja-buena .lp-l.v::after{
  content:""; position:absolute; inset:0; border-radius:4px;
  background:color-mix(in srgb,var(--lp-acento) 55%,transparent);
  transform:scaleX(0); transform-origin:left;
  animation:lp-verde .7s var(--ease-out) forwards; animation-play-state:paused;
}
.dentro .lp-hoja-buena .lp-l.v::after{animation-play-state:running}
.lp-hoja-buena .lp-l.v1::after{animation-delay:.35s}
.lp-hoja-buena .lp-l.v2::after{animation-delay:.55s}
@keyframes lp-verde{to{transform:scaleX(1)}}

.lp-marca-fuera,.lp-marca-dentro{
  margin-top:auto; padding-top:10px; font-size:11.5px; font-weight:560;
  opacity:0; animation:lp-asomar .5s var(--ease-out) 1s forwards; animation-play-state:paused;
}
.dentro .lp-marca-fuera,.dentro .lp-marca-dentro{animation-play-state:running}
.lp-marca-fuera{color:#b06a1c}
.lp-marca-dentro{color:var(--lp-acento)}

/* que la celda del reloj no deje el numero colgando abajo */
.lp-reloj{margin-top:16px; padding-top:0}

@media (max-width:640px){
  .lp-dos{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lp-hoja-buena .lp-l.v::after{transform:scaleX(1); animation:none}
  .lp-marca-fuera,.lp-marca-dentro{opacity:1; animation:none}
}

/* ============================================================
   CIERRE: las ofertas pasan por detras y el boton va encima
   ============================================================ */
.lp-cierre{position:relative; overflow:hidden; isolation:isolate}

.lp-rio{
  position:absolute; inset:0; z-index:-1;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.lp-rio-fila{overflow:hidden}
.lp-rio-tira{display:flex; gap:12px; width:max-content; will-change:transform}
.lp-rio-izq .lp-rio-tira{animation:lp-rio-a 64s linear infinite}
.lp-rio-der .lp-rio-tira{animation:lp-rio-b 78s linear infinite}
@keyframes lp-rio-a{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes lp-rio-b{from{transform:translateX(-50%)} to{transform:translateX(0)}}

.lp-tj{
  display:flex; align-items:center; gap:10px; flex:none;
  border:1px solid var(--lp-linea); border-radius:11px;
  padding:11px 13px; background:var(--lp-superficie);
}
.lp-tj b{
  width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--lp-acento-claro); color:var(--lp-acento); font-size:13px; font-weight:640;
}
.lp-tj strong{display:block; font-size:13.5px; letter-spacing:-.01em; white-space:nowrap}
.lp-tj em{font-style:normal; font-size:12px; color:var(--lp-tinta-2); white-space:nowrap}
.lp-tj i{
  font-style:normal; font-size:10.5px; color:var(--lp-tinta-2);
  border:1px solid var(--lp-linea); border-radius:99px; padding:3px 8px; flex:none;
}

/* el texto se lee sobre un claro que tapa las tarjetas de detras */
.lp-cierre-txt{
  position:relative; padding:clamp(30px,5vw,56px) clamp(20px,4vw,44px);
  border-radius:24px; max-width:640px; margin:0 auto;
  background:radial-gradient(ellipse at center,
    var(--lp-bg) 42%,
    color-mix(in srgb,var(--lp-bg) 86%,transparent) 68%,
    transparent 100%);
}
.lp-cierre-txt h2{font-size:clamp(26px,4vw,44px); margin:0 auto 26px; max-width:16ch}

@media (prefers-reduced-motion:reduce){
  .lp-rio-izq .lp-rio-tira,.lp-rio-der .lp-rio-tira{animation:none}
  .lp-rio{opacity:.35}
}
@media (max-width:640px){
  .lp-rio{gap:10px; opacity:.45}
  .lp-cierre-txt{padding-inline:16px}
}

/* ============================================================
   EL FORMULARIO DE ENTRAR, AL ESTILO DE LA PAGINA
   ============================================================ */
:root{
  --lp-bg:#fbfbfa; --lp-superficie:#fff; --lp-tinta:#16181d; --lp-tinta-2:#5b6070;
  --lp-linea:#e4e4e2; --lp-acento:#05664a; --lp-acento-claro:#e7f2ee;
  --lp-acento-tinta:#fff; --lp-radio:14px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --lp-bg:#0d0f12; --lp-superficie:#15181d; --lp-tinta:#f2f3f5; --lp-tinta-2:#9aa1ae;
    --lp-linea:#262a31; --lp-acento:#3fbf93; --lp-acento-claro:#132821; --lp-acento-tinta:#08130f;
  }
}

#login-modal{
  background:color-mix(in srgb,var(--lp-tinta) 42%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#login-modal .modal-content{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  background:var(--lp-superficie); color:var(--lp-tinta);
  border:1px solid var(--lp-linea); border-radius:20px;
  padding:clamp(26px,4vw,36px); max-width:430px; width:100%;
  box-shadow:0 30px 70px color-mix(in srgb,#000 22%,transparent);
  animation:lp-modal-entra .34s var(--ease-out);
}
@keyframes lp-modal-entra{from{opacity:0; transform:translateY(10px) scale(.97)}}

#login-modal .modal-header{text-align:center; margin-bottom:22px; border:0; padding:0}
.modal-marca{
  width:44px; height:44px; border-radius:13px; margin:0 auto 14px;
  display:grid; place-items:center;
  background:var(--lp-acento); color:var(--lp-acento-tinta);
}
#login-modal .modal-header h2{
  font-size:25px; font-weight:640; letter-spacing:-.03em; margin:0 0 6px; color:var(--lp-tinta);
}
#login-modal .modal-header p{font-size:14.5px; color:var(--lp-tinta-2); margin:0}

.modal-o{
  display:flex; align-items:center; gap:11px; margin:18px 0 6px;
  color:var(--lp-tinta-2); font-size:13px;
}
.modal-o span{flex:1; height:1px; background:var(--lp-linea)}
#google-signin-btn{display:flex; justify-content:center}

#login-modal .modal-tabs{
  display:flex; gap:4px; padding:4px; margin-bottom:20px;
  background:color-mix(in srgb,var(--lp-tinta) 5%,transparent);
  border-radius:11px; border:0;
}
#login-modal .modal-tab{
  flex:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:14px; font-weight:550; color:var(--lp-tinta-2);
  padding:9px 12px; border-radius:8px;
  transition:background 200ms var(--ease-out), color 200ms ease, box-shadow 200ms var(--ease-out);
}
#login-modal .modal-tab.active{
  background:var(--lp-superficie); color:var(--lp-tinta);
  box-shadow:0 1px 3px color-mix(in srgb,var(--lp-tinta) 12%,transparent);
}

#login-modal .form-group{margin-bottom:15px; display:grid; gap:7px}
#login-modal label{font-size:13.5px; font-weight:520; color:var(--lp-tinta-2)}
#login-modal input{
  font:inherit; font-size:15px; color:var(--lp-tinta);
  background:var(--lp-bg); border:1px solid var(--lp-linea);
  border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color 180ms ease, box-shadow 180ms var(--ease-out);
}
#login-modal input::placeholder{color:color-mix(in srgb,var(--lp-tinta-2) 70%,transparent)}
#login-modal input:focus{
  outline:0; border-color:var(--lp-acento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-acento) 16%,transparent);
}
#login-modal .btn-primary,#login-modal .btn-full{
  width:100%; font:inherit; font-size:15.5px; font-weight:580; cursor:pointer;
  background:var(--lp-acento); color:var(--lp-acento-tinta);
  border:1px solid var(--lp-acento); border-radius:10px; padding:13px 18px;
  margin-top:6px; transition:transform 160ms var(--ease-out), filter 180ms ease;
}
#login-modal .btn-primary:hover{filter:brightness(1.08)}
#login-modal .btn-primary:active{transform:scale(.97)}
#login-modal .modal-error{
  margin-top:14px; font-size:13.5px; color:#b3261e;
  background:color-mix(in srgb,#b3261e 8%,transparent);
  border:1px solid color-mix(in srgb,#b3261e 22%,transparent);
  border-radius:9px; padding:10px 12px; text-align:center;
}
@media (prefers-reduced-motion:reduce){
  #login-modal .modal-content{animation:none}
}

/* ============================================================
   EL PANEL, AL MISMO ESTILO QUE LA PORTADA
   Va al final a proposito: manda sobre lo anterior.
   ============================================================ */
body{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  background:var(--lp-bg); color:var(--lp-tinta);
  -webkit-font-smoothing:antialiased;
}

/* --- barra de arriba --- */
#app-header.header{
  background:color-mix(in srgb,var(--lp-bg) 88%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--lp-linea); box-shadow:none;
  position:sticky; top:0; z-index:20;
}
#app-header .header-content{
  max-width:1240px; margin:0 auto; height:64px;
  padding:0 clamp(16px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
#app-header .logo{display:flex; align-items:center; gap:9px}
#app-header .logo-icon{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--lp-acento); color:var(--lp-acento-tinta);
}
#app-header .logo-text{
  font-size:16.5px; font-weight:620; letter-spacing:-.025em; color:var(--lp-tinta);
}
#app-header .nav{display:flex; gap:4px; background:none}
#app-header .nav-link{
  color:var(--lp-tinta-2); text-decoration:none; font-size:14.5px; font-weight:520;
  padding:8px 14px; border-radius:9px; background:transparent;
  transition:background 180ms var(--ease-out), color 180ms ease;
}
#app-header .nav-link:hover{color:var(--lp-tinta); background:color-mix(in srgb,var(--lp-tinta) 5%,transparent)}
#app-header .nav-link.active{
  color:var(--lp-acento); background:var(--lp-acento-claro); font-weight:560;
}
#app-header .header-actions{display:flex; align-items:center; gap:10px}
#app-header .user-name{font-size:14px; color:var(--lp-tinta-2); font-weight:520}
#app-header .btn-icon{
  background:transparent; border:1px solid var(--lp-linea); color:var(--lp-tinta-2);
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer;
  transition:transform 160ms var(--ease-out), border-color 180ms ease, color 180ms ease;
}
#app-header .btn-icon:hover{border-color:var(--lp-tinta-2); color:var(--lp-tinta)}
#app-header .btn-icon:active{transform:scale(.94)}

/* --- cuerpo --- */
#app-main.main{
  max-width:1240px; margin:0 auto; padding:clamp(20px,3vw,32px) clamp(16px,4vw,40px);
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(16px,2vw,24px); align-items:start; background:transparent;
}
#app-main>*{min-width:0}
#app-main .sidebar{display:grid; gap:16px; position:sticky; top:84px}

/* --- tarjetas --- */
#app-main .card{
  background:var(--lp-superficie); border:1px solid var(--lp-linea);
  border-radius:16px; padding:20px; box-shadow:none;
}
#app-main .card h2,#app-main .card h3{
  font-size:15.5px; font-weight:600; letter-spacing:-.015em; color:var(--lp-tinta);
  display:flex; align-items:center; gap:8px; margin:0 0 16px;
}
#app-main .card .icon{color:var(--lp-acento); font-size:18px}

/* --- campos --- */
#app-main label,#app-main .form-group label{
  font-size:13px; font-weight:520; color:var(--lp-tinta-2);
  display:block; margin-bottom:6px;
}
#app-main input[type=text],#app-main input[type=email],#app-main input[type=tel],
#app-main input[type=number],#app-main input[type=search],#app-main select,#app-main textarea{
  font:inherit; font-size:14.5px; color:var(--lp-tinta);
  background:var(--lp-bg); border:1px solid var(--lp-linea);
  border-radius:10px; padding:11px 13px; width:100%;
  transition:border-color 180ms ease, box-shadow 180ms var(--ease-out);
}
#app-main input::placeholder{color:color-mix(in srgb,var(--lp-tinta-2) 65%,transparent)}
#app-main input:focus,#app-main select:focus,#app-main textarea:focus{
  outline:0; border-color:var(--lp-acento);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-acento) 15%,transparent);
}
#app-main .form-group{margin-bottom:14px}
#app-main .form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}

/* --- botones --- */
#app-main .btn{
  font:inherit; font-size:14.5px; font-weight:560; cursor:pointer;
  border-radius:10px; padding:12px 18px; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 160ms var(--ease-out), filter 180ms ease,
             background 180ms ease, border-color 180ms ease;
}
#app-main .btn:active{transform:scale(.97)}
#app-main .btn-primary{background:var(--lp-acento); color:var(--lp-acento-tinta); border-color:var(--lp-acento)}
#app-main .btn-primary:hover{filter:brightness(1.08)}
#app-main .btn-secondary,#app-main .btn-outline{
  background:var(--lp-superficie); color:var(--lp-tinta); border-color:var(--lp-linea);
}
#app-main .btn-secondary:hover,#app-main .btn-outline:hover{border-color:var(--lp-tinta-2)}
#app-main .btn-full{width:100%}
#app-main .btn-large{padding:14px 22px; font-size:15.5px}

/* --- foto de perfil y subir CV --- */
#app-main .profile-photo,#app-main .photo-preview{
  border-color:var(--lp-linea) !important;
}
#app-main .upload-area,#app-main .upload-box{
  border:1.5px dashed var(--lp-linea); border-radius:12px; background:var(--lp-bg);
  transition:border-color 200ms ease, background 200ms ease;
}
#app-main .upload-area:hover,#app-main .upload-box:hover{
  border-color:var(--lp-acento); background:var(--lp-acento-claro);
}
#app-main .upload-icon{font-size:24px; color:var(--lp-acento)}

/* --- estado vacio --- */
#app-main .empty-state{padding:clamp(40px,7vw,72px) 20px; text-align:center}
#app-main .empty-icon{
  font-size:34px; color:var(--lp-acento); margin-bottom:14px;
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:var(--lp-acento-claro); margin-inline:auto;
}
#app-main .empty-state h3{font-size:19px; justify-content:center; margin-bottom:8px}
#app-main .empty-state p{color:var(--lp-tinta-2); font-size:14.5px; max-width:38ch; margin:0 auto; line-height:1.6}

/* --- tarjetas de oferta --- */
#app-main .job-card{
  border:1px solid var(--lp-linea); border-radius:13px; background:var(--lp-superficie);
  transition:transform 220ms var(--ease-out), border-color 220ms ease, box-shadow 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  #app-main .job-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--lp-acento) 32%,var(--lp-linea));
    box-shadow:0 10px 28px color-mix(in srgb,var(--lp-tinta) 8%,transparent);
  }
}
#app-main .job-source,#app-main .badge,#app-main .tag{
  font-size:11.5px; border-radius:99px; padding:4px 10px;
  background:var(--lp-acento-claro); color:var(--lp-acento); border:0;
}
#app-main .match-fill,#app-main .progress-fill{background:var(--lp-acento)}
#app-main .tab-btn{
  font:inherit; font-size:14px; font-weight:520; color:var(--lp-tinta-2);
  background:transparent; border:0; padding:10px 14px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background 180ms var(--ease-out), color 180ms ease;
}
#app-main .tab-btn.active{background:var(--lp-acento-claro); color:var(--lp-acento); font-weight:560}

/* --- avisos --- */
.toast{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  border-radius:12px; border:1px solid var(--lp-linea);
  background:var(--lp-superficie); color:var(--lp-tinta);
  box-shadow:0 12px 34px color-mix(in srgb,var(--lp-tinta) 14%,transparent);
}
.toast.success{border-color:color-mix(in srgb,var(--lp-acento) 40%,transparent)}

@media (max-width:900px){
  #app-main.main{grid-template-columns:minmax(0,1fr)}
  #app-main .sidebar{position:static}
  #app-header .nav{display:none}
}

/* ============================================================
   EL PANEL, INMERSIVO
   ============================================================ */

/* --- lo primero que ves: tres ofertas en cascada --- */
#app-main .empty-state{padding:clamp(36px,6vw,64px) 20px}
/* cada una cae un poco distinto, como una baraja */

#app-main .empty-state h3{font-size:19px; justify-content:center; margin-bottom:8px}
#app-main .empty-state p{color:var(--lp-tinta-2); font-size:14.5px; max-width:38ch; margin:0 auto; line-height:1.6}

/* --- tarjetas de oferta --- */
#app-main .job-card{
  border:1px solid var(--lp-linea); border-radius:13px; background:var(--lp-superficie);
  transition:transform 220ms var(--ease-out), border-color 220ms ease, box-shadow 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  #app-main .job-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--lp-acento) 32%,var(--lp-linea));
    box-shadow:0 10px 28px color-mix(in srgb,var(--lp-tinta) 8%,transparent);
  }
}
#app-main .job-source,#app-main .badge,#app-main .tag{
  font-size:11.5px; border-radius:99px; padding:4px 10px;
  background:var(--lp-acento-claro); color:var(--lp-acento); border:0;
}
#app-main .match-fill,#app-main .progress-fill{background:var(--lp-acento)}
#app-main .tab-btn{
  font:inherit; font-size:14px; font-weight:520; color:var(--lp-tinta-2);
  background:transparent; border:0; padding:10px 14px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background 180ms var(--ease-out), color 180ms ease;
}
#app-main .tab-btn.active{background:var(--lp-acento-claro); color:var(--lp-acento); font-weight:560}

/* --- avisos --- */
.toast{
  font-family:"Geist","Helvetica Neue",Arial,sans-serif;
  border-radius:12px; border:1px solid var(--lp-linea);
  background:var(--lp-superficie); color:var(--lp-tinta);
  box-shadow:0 12px 34px color-mix(in srgb,var(--lp-tinta) 14%,transparent);
}
.toast.success{border-color:color-mix(in srgb,var(--lp-acento) 40%,transparent)}

@media (max-width:900px){
  #app-main.main{grid-template-columns:minmax(0,1fr)}
  #app-main .sidebar{position:static}
  #app-header .nav{display:none}
}

/* ============================================================
   EL PANEL, INMERSIVO
   ============================================================ */

/* --- lo primero que ves: tres ofertas flotando y la lupa --- */
#app-main .empty-state{padding:clamp(36px,6vw,64px) 20px}

#app-main .empty-state h3{font-size:22px; justify-content:center; margin-bottom:8px}
#app-main .empty-state p{margin-bottom:20px}

.vac-sugerencias{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:560px; margin:0 auto}
.vac-sug{
  font:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  color:var(--lp-tinta); background:var(--lp-superficie);
  border:1px solid var(--lp-linea); border-radius:99px; padding:9px 15px;
  transition:transform 160ms var(--ease-out), border-color 180ms ease,
             background 180ms ease, color 180ms ease;
}
.vac-sug:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .vac-sug:hover{
    border-color:var(--lp-acento); background:var(--lp-acento-claro); color:var(--lp-acento);
  }
}

/* --- mientras busca: esqueletos --- */
#app-main .loading-state{display:block !important; padding:22px}
#app-main .loading-state[style*="none"]{display:none !important}
.carg-tit{
  display:flex; align-items:center; gap:9px; font-size:14px;
  color:var(--lp-tinta-2); margin-bottom:16px;
}
.carg-punto{
  width:8px; height:8px; border-radius:99px; background:var(--lp-acento); flex:none;
  animation:carg-late 1.1s ease-in-out infinite;
}
@keyframes carg-late{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)}}

.carg-lista{display:grid; gap:10px}
.carg-tj{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--lp-linea); border-radius:13px; padding:14px;
  background:var(--lp-superficie);
}
.carg-tj>*{position:relative; overflow:hidden; border-radius:6px; background:var(--lp-linea)}
.carg-logo{width:36px; height:36px; border-radius:10px; flex:none}
.carg-txt{flex:1; background:none !important; display:grid; gap:7px; overflow:visible !important}
.carg-txt i,.carg-txt u{
  display:block; height:9px; border-radius:5px; background:var(--lp-linea);
  position:relative; overflow:hidden;
}
.carg-txt i{width:52%} .carg-txt u{width:30%; height:7px}
.carg-etq{width:62px; height:20px; border-radius:99px; flex:none}
/* el brillo que recorre los huecos */
.carg-logo::after,.carg-txt i::after,.carg-txt u::after,.carg-etq::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lp-superficie) 85%,transparent),transparent);
  transform:translateX(-100%); animation:carg-brillo 1.5s var(--ease-out) infinite;
}
@keyframes carg-brillo{to{transform:translateX(100%)}}
.carg-tj:nth-child(2) .carg-txt i{width:64%}
.carg-tj:nth-child(3) .carg-txt i{width:44%}
.carg-tj:nth-child(4) .carg-txt i{width:58%}

@media (prefers-reduced-motion:reduce){
  .vac-tj,.vac-lupa{animation:none}
  .carg-punto{animation:none}
  .carg-logo::after,.carg-txt i::after,.carg-txt u::after,.carg-etq::after{animation:none}
}
@media (max-width:560px){
  .vac-escena{height:150px; max-width:320px}
  .vac-tj strong{font-size:12px} .vac-tj em{font-size:11px}
}

/* --- estado vacio: tres ofertas en cascada, sin pisarse --- */
.vac-escena{display:grid; gap:10px; max-width:360px; margin:0 auto 28px}
.vac-tj{
  display:flex; align-items:center; gap:10px; text-align:left;
  border:1px solid var(--lp-linea); border-radius:12px; padding:11px 13px;
  background:var(--lp-superficie);
  box-shadow:0 6px 20px color-mix(in srgb,var(--lp-tinta) 6%,transparent);
  animation:vac-flota 6s ease-in-out infinite;
}
.vac-tj b{
  width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--lp-acento-claro); color:var(--lp-acento); font-size:13px; font-weight:640;
}
.vac-tj strong{display:block; font-size:13px; letter-spacing:-.01em}
.vac-tj em{font-style:normal; font-size:11.5px; color:var(--lp-tinta-2)}
.vac-tj.t1{margin-right:36px; animation-delay:0s}
.vac-tj.t2{margin-left:36px; animation-delay:-2s}
.vac-tj.t3{margin-right:18px; animation-delay:-4s}
@keyframes vac-flota{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.vac-lupa{display:none !important}
@media (prefers-reduced-motion:reduce){ .vac-tj{animation:none} }