/* The1KThesis — hoja de estilo única. Paleta en marca/LEEME.md */ :root{ --fondo:#0E1116; --tinta:#F5F3EF; --gris:#8B93A1; --ambar:#E8A33D; --linea:#232833; --tarjeta:#141922; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--fondo); color:var(--tinta); font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } .envoltorio{max-width:660px;margin:0 auto;padding:0 24px} /* ---- cabecera ---- */ header{padding:56px 0 0} .marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta)} .marca svg{width:40px;height:40px;flex:none} .marca b{font-size:19px;letter-spacing:-.02em;font-weight:650} /* ---- portada ---- */ h1{ font-size:clamp(2rem,7vw,3rem); line-height:1.1; letter-spacing:-.03em; font-weight:680; margin:40px 0 20px; } h1 .acento{color:var(--ambar)} .entrada{font-size:clamp(1.05rem,2.6vw,1.2rem);color:#C8CCD4;margin:0 0 40px} /* ---- los tres hechos ---- */ .hechos{list-style:none;padding:0;margin:0 0 48px;display:grid;gap:2px} .hechos li{ background:var(--tarjeta);border-left:3px solid var(--linea); padding:18px 20px;font-size:16px;color:#C8CCD4; } .hechos li:first-child{border-left-color:var(--ambar)} .hechos strong{color:var(--tinta);display:block;margin-bottom:2px;font-weight:650} /* ---- lista de correo ---- */ .lista{border:1px solid var(--linea);border-radius:10px;padding:28px 24px;margin:0 0 40px} .lista h2{margin:0 0 8px;font-size:1.15rem;letter-spacing:-.01em} .lista p{margin:0 0 20px;color:var(--gris);font-size:15px} .campos{display:flex;gap:8px;flex-wrap:wrap} input[type=email]{ flex:1 1 220px;min-width:0;padding:13px 14px;font:inherit;font-size:16px; color:var(--tinta);background:#0A0D12;border:1px solid var(--linea);border-radius:7px; } input[type=email]:focus{outline:2px solid var(--ambar);outline-offset:1px;border-color:transparent} input[type=email]::placeholder{color:#5C6474} button{ padding:13px 20px;font:inherit;font-size:16px;font-weight:650;cursor:pointer; color:#1A1206;background:var(--ambar);border:0;border-radius:7px; } button:hover{background:#F0B155} .consentimiento{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;color:var(--gris)} .consentimiento input{margin:3px 0 0;flex:none;width:16px;height:16px;accent-color:var(--ambar)} .consentimiento a{color:var(--gris)} /* Estado "todavía no hay lista": se controla con class="sin-lista" en */ .aviso-lista{display:none;margin:0;color:var(--gris);font-size:15px} body.sin-lista .lista form{display:none} body.sin-lista .aviso-lista{display:block} /* ---- enlaces sociales ---- */ .social{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 56px} .social a{ padding:9px 16px;border:1px solid var(--linea);border-radius:99px; text-decoration:none;color:#C8CCD4;font-size:14.5px; } .social a:hover{border-color:var(--ambar);color:var(--tinta)} /* ---- pie ---- */ footer{border-top:1px solid var(--linea);padding:28px 0 56px;margin-top:8px} .descargo{font-size:13.5px;color:#6E7686;margin:0 0 20px} .pie-enlaces{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px} .pie-enlaces a{color:var(--gris)} a{color:var(--ambar)} /* ---- páginas legales ---- */ .legal{padding-top:8px} .legal h1{font-size:clamp(1.6rem,5vw,2.1rem);margin:32px 0 8px} .legal .actualizado{color:#6E7686;font-size:14px;margin:0 0 36px} .legal h2{font-size:1.1rem;margin:36px 0 10px;letter-spacing:-.01em} .legal p,.legal li{color:#C8CCD4;font-size:16px} .legal ul{padding-left:20px} .legal .dato{ background:var(--tarjeta);border-left:3px solid var(--ambar); padding:16px 18px;margin:20px 0;font-size:15px; } .volver{display:inline-block;margin-top:44px;font-size:15px} @media (prefers-reduced-motion:no-preference){a,button{transition:.15s ease}} /* En móvil el botón no cabe junto al campo: que ocupe la fila entera en vez de quedarse a medias. */ @media (max-width:460px){ .campos{flex-direction:column} /* flex:none es imprescindible: en columna, el flex-basis de 220px se convierte en ALTURA y el campo se estira hasta ocupar media pantalla. */ input[type=email],button{flex:none;width:100%} header{padding-top:40px} } /* ---- página de transparencia ---- */ .legal .subtitulo{color:#C8CCD4;font-size:17px;margin:0 0 32px} .legal h3{font-size:.95rem;margin:26px 0 8px;color:var(--tinta);letter-spacing:-.01em} /* Las tablas se salen en móvil. Que scrolee la tabla, nunca la página. */ .tabla{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch} /* Sin min-width: con nowrap en las celdas, la tabla ancha se desborda y scrolea sola, y la estrecha no scrolea por nada. Un min-width fijo hacía que la tabla corta del histórico también scroleara, por 13 px, y parecía rota. */ .tabla table{border-collapse:collapse;width:100%;font-size:14.5px} .tabla th,.tabla td{ text-align:left;padding:9px 14px 9px 0; border-bottom:1px solid var(--linea);color:#C8CCD4;white-space:nowrap; } .tabla th{color:var(--gris);font-weight:600;font-size:13px; text-transform:uppercase;letter-spacing:.04em} .tabla td:first-child{white-space:normal} .tabla .num{font-variant-numeric:tabular-nums} /* Bloque de resumen con las cifras de la cartera */ .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;background:var(--linea);border:1px solid var(--linea); border-radius:10px;overflow:hidden;margin:22px 0} .cifras div{background:var(--tarjeta);padding:16px 18px} .cifras dt{color:var(--gris);font-size:12.5px;text-transform:uppercase; letter-spacing:.04em;margin:0 0 4px} .cifras dd{margin:0;font-size:1.25rem;font-weight:650;color:var(--tinta); font-variant-numeric:tabular-nums} /* Aviso fuerte: para lo que el lector tiene que ver aunque venga con prisa */ .legal .alerta{ background:rgba(224,108,108,.07);border-left:3px solid #E06C6C; padding:16px 18px;margin:20px 0;font-size:15px;border-radius:0 6px 6px 0; } .legal .alerta strong{color:var(--tinta)} .legal .regla{ background:var(--tarjeta);border:1px solid var(--ambar); border-radius:10px;padding:20px 22px;margin:22px 0; } .legal .regla p{margin:0;font-size:17px;color:var(--tinta);font-weight:600} .indice{list-style:none;padding:0;margin:0 0 40px;display:grid;gap:2px} .indice a{color:#C8CCD4;font-size:15px;text-decoration:none; display:block;padding:7px 0;border-bottom:1px solid var(--linea)} .indice a:hover{color:var(--ambar)} .indice span{color:var(--gris);margin-right:10px;font-variant-numeric:tabular-nums} /* Verde y rojo del P&L. Va al FINAL del fichero a propósito: «.tabla td» y «.cifras dd» fijan color con la misma especificidad, así que esto tiene que venir después para ganar el desempate por orden. */ td.verde,dd.verde,.verde{color:#5FBF7A} td.rojo,dd.rojo,.rojo{color:#E06C6C}