:root {
  --fondo: #0d0e11; --panel: #15171c; --linea: #262931; --texto: #ecedf0; --tenue: #9095a0; --acento: #4d86ff; --acento-2: #3b74f0;
  --mal: #ff6b6b; --bien: #3ccf8e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
a { color: var(--acento); text-decoration: none; }
h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: -.3px; }
h2 { font-size: 17px; margin: 0 0 8px; }
.tenue { color: var(--tenue); }
.pequena { font-size: 13px; }
.centro { text-align: center; }
.derecha { text-align: right; }
.error { color: var(--mal); font-size: 14px; margin: 0; }

.marca { font-size: 20px; font-weight: 600; color: var(--texto); }
.marca b { color: var(--acento); }
.marca.grande { font-size: 26px; text-align: center; display: block; margin-bottom: 10px; }

.boton {
  display: inline-block; background: var(--acento); color: #fff; padding: 9px 16px; border-radius: 9px; font: 600 14px/1.2 inherit;
  border: 1px solid var(--acento); cursor: pointer; text-align: center;
}
.boton:hover { background: var(--acento-2); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.secundario { background: transparent; border-color: var(--linea); color: var(--texto); }
.boton.secundario:hover { background: var(--panel); }
.boton.peligro { background: transparent; border-color: #4a2a2e; color: var(--mal); }
.boton.desactivado { background: var(--linea); border-color: var(--linea); color: var(--tenue); cursor: default; }
.boton.pequeno { padding: 6px 10px; font-size: 12px; }
.boton.ancho { width: 100%; }

.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acceso .tarjeta { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.acceso h1 { font-size: 20px; text-align: center; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--tenue); }
input { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: 11px 12px; font: inherit; }
input:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 22px; }
.cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px max(16px, calc((100% - 1100px) / 2)); border-bottom: 1px solid var(--linea);
}
.cabecera nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cabecera nav a { color: var(--tenue); font-size: 14px; }
.cabecera nav a.activa, .cabecera nav a:hover { color: var(--texto); }
.contenido { max-width: 1100px; margin: 0 auto; padding: 36px 16px 80px; display: grid; gap: 20px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dato { display: grid; gap: 6px; align-content: start; }
.dato span { color: var(--tenue); font-size: 13px; }
.dato b { font-size: 34px; letter-spacing: -.5px; }
.dato small { color: var(--tenue); }
.dato .boton { justify-self: start; margin-top: 6px; }
.barra { height: 5px; background: var(--linea); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.barra span { display: block; height: 100%; background: var(--acento); }
.fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.foto { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.miniatura { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #0b0c0e; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.pie-foto { padding: 12px; display: grid; gap: 2px; }
.pie-foto b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--tenue); font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--linea); }
td { padding: 10px 0; border-bottom: 1px solid #1d1f25; }
td.positivo { color: var(--bien); }
.acepto { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.acepto input { margin-top: 3px; accent-color: var(--acento); }

/* Banner de cookies */
.banner-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 980px; margin: 0 auto;
  display: flex; gap: 18px; align-items: center; background: #15171c; border: 1px solid #2c303a; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 16px 50px #000c; color: #ecedf0; font-size: 14px; line-height: 1.5;
}
.banner-cookies p { margin: 0; color: #c9ccd3; }
.banner-cookies b { color: #fff; }
.banner-cookies a { color: #4d86ff; }
.banner-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.banner-boton {
  background: #4d86ff; color: #fff; border: 1px solid #4d86ff; border-radius: 9px; padding: 9px 16px; font: 600 14px/1.2 inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.banner-boton.secundario { background: transparent; border-color: #2c303a; color: #ecedf0 !important; }
@media (max-width: 700px) { .banner-cookies { flex-direction: column; align-items: stretch; } .banner-acciones { justify-content: flex-end; } }

/* Pie: aviso RGPD */
.rgpd { flex-basis: 100%; display: flex; gap: 10px; align-items: flex-start; color: #9095a0; font-size: 13px; line-height: 1.5;
  padding-top: 16px; margin-top: 6px; border-top: 1px solid #262931; }
.rgpd svg { flex-shrink: 0; margin-top: 2px; }
.rgpd a { color: #4d86ff; }
.pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--tenue); font-size: 13px;
  padding: 26px max(16px, calc((100% - 1100px) / 2)); border-top: 1px solid var(--linea); }
.pie a { color: var(--tenue); } .pie a:hover { color: var(--texto); }
.enlaces-legales { display: flex; gap: 14px; flex-wrap: wrap; }
.acceso { min-height: calc(100vh - 160px); }

/* Carpetas y visor */
.carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.carpeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; color: var(--texto); transition: border-color .15s; }
.carpeta:hover { border-color: var(--acento); }
.portada-carpeta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 4 / 3; background: #0b0c0e; }
.portada-carpeta span { background: #121318 center / cover no-repeat; }
.cabecera-carpeta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cabecera-carpeta .fila { margin: 0; }
.miniatura { position: relative; cursor: zoom-in; }
.sello { position: absolute; top: 8px; left: 8px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.visor-foto { position: fixed; inset: 0; z-index: 40; background: #000e; display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 24px; }
.visor-foto img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; cursor: pointer; }
.visor-foto .cerrar { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; }
.bienvenida { border-color: #2e6b4f; background: #142a20; }

/* Tienda */
.titulo-seccion { margin: 18px 0 0; font-size: 20px; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plan { position: relative; display: grid; gap: 6px; align-content: start; }
.plan h3 { margin: 0; font-size: 18px; }
.plan .precio { font-size: 30px; font-weight: 700; margin: 4px 0 0; }
.plan .precio small { font-size: 13px; color: var(--tenue); font-weight: 400; }
.plan ul { margin: 6px 0 10px; padding-left: 18px; color: #c9ccd3; font-size: 14px; }
.plan.destacado { border-color: var(--acento); }
.plan .sello { position: absolute; top: 14px; right: 14px; left: auto; }
.fila-almacen { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.fila-almacen h3 { margin: 0; }
select { background: var(--fondo); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: 9px; font: inherit; }