/* Página de inicio pública (sitio estático, aparte de la aplicación): paleta oscura con acentos dorados. */
:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surf: #141312;
  --line: #2c2925;
  --ink: #f5f5f4;
  --ink2: #d6d3d1;
  --ink3: #a8a29e;
  --head: #f0dda8;
  --gold: #e8c158;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
a { color: #8c6a10; text-decoration: none; }
a:hover { color: #6b500b; text-decoration: underline; }

.inicio { background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.inicio a:hover { text-decoration: none; }

.inicio-header { background: #000; border-bottom: 1px solid #24211c; position: sticky; top: 0; z-index: 20; }
.inicio-header-fila { max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.inicio-marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.inicio-marca img { height: clamp(42px, 11vw, 56px); width: auto; object-fit: contain; display: block; flex: none; }
.inicio-marca-nombre { font-family: Marcellus, Georgia, serif; font-size: clamp(15px, 3.6vw, 18px); letter-spacing: 0.01em; color: #f0dda8; line-height: 1.2; }
.inicio-marca-lema { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #e8c158; font-weight: 600; }

/* Accesos internos en el encabezado: etiqueta, separador y dos botones dorados. */
.inicio-acceso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inicio-acceso-titulo { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: #d6d3d1; padding-right: 14px; border-right: 1px solid #33302a; line-height: 2.4; }
.inicio-acceso-btn { display: inline-flex; align-items: center; gap: 9px; background: #e8c158; color: #1c1917; padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.inicio-acceso-btn:hover { background: #d4a017; color: #1c1917; }

/* Hero: portada a todo el ancho (oscura a la izquierda) con el texto encima. */
.inicio-hero { position: relative; overflow: hidden; background: #000; border-bottom: 1px solid #33302a; }
.inicio-hero-foto { position: absolute; inset: 0; background: url('img/inicio-hero.jpg') right center / cover no-repeat; }
.inicio-hero-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0) 55%); }
.inicio-hero-contenido { position: relative; max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 56px) clamp(16px, 4vw, 28px) clamp(40px, 5vw, 56px); }
.inicio-hero-contenido > * { max-width: 560px; }
.inicio-hero-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; color: #e8c158; }
.inicio-hero h1 { margin: 0 0 20px; font-family: Marcellus, Georgia, serif; font-size: clamp(34px, 8vw, 54px); line-height: 1.08; letter-spacing: -0.01em; color: #f0dda8; text-wrap: pretty; }
.inicio-hero p { margin: 0 0 30px; font-size: clamp(15px, 2.2vw, 17px); color: #d6d3d1; max-width: 520px; text-wrap: pretty; }
.inicio-hero-botones { display: flex; gap: 14px; flex-wrap: wrap; }
.inicio-btn { display: inline-flex; align-items: center; gap: 9px; background: #e8c158; color: #1c1917; padding: 14px 24px; border-radius: 10px; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.inicio-btn:hover { background: #d4a017; color: #1c1917; }
.inicio-btn-sec { display: inline-flex; align-items: center; padding: 14px 24px; border: 1px solid #33302a; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: #d6d3d1; background: #141312; text-decoration: none; white-space: nowrap; }
.inicio-btn-sec:hover { border-color: #b8860b; color: var(--gold); }

.inicio-areas { max-width: 1200px; margin: 0 auto; padding: clamp(44px, 7vw, 72px) clamp(16px, 4vw, 28px) 40px; }
.inicio-areas h2 { margin: 0 0 10px; font-family: Marcellus, Georgia, serif; font-size: clamp(27px, 5vw, 36px); letter-spacing: -0.01em; color: var(--head); }
.inicio-areas-sub { margin: 0 0 36px; font-size: 15.5px; color: var(--ink3); max-width: 60ch; }
.inicio-areas-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; }
.inicio-area { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 1px 2px rgba(60, 45, 10, 0.04); }
.inicio-area-icono { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid #c9971a; display: grid; place-items: center; color: #e8c158; margin-bottom: 18px; }
.inicio-area-titulo { font-family: Marcellus, Georgia, serif; font-size: 21px; color: var(--head); line-height: 1.2; }
.inicio-area p { margin: 10px 0 18px; font-size: 13.5px; color: var(--ink3); font-weight: 500; }
.inicio-area ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.inicio-area li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink2); }
.inicio-area .punto { width: 5px; height: 5px; border-radius: 50%; background: #c9971a; margin-top: 8px; flex: none; }


.inicio-footer { background: #000; color: #e7e5e4; }
.inicio-footer-fila { max-width: 1200px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 28px) 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid #1f1f1f; }
.inicio-footer-nombre { font-family: Marcellus, Georgia, serif; font-size: 16px; color: #f6ebcf; }
.inicio-footer-lema { font-size: 13px; color: #a8a29e; }
.inicio-footer-legal { max-width: 1200px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 28px) 34px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: #a8a29e; text-align: center; }
.inicio-kiub-enlace { color: inherit; font-weight: inherit; text-decoration: underline !important; text-underline-offset: 3px; }
.inicio-kiub-enlace:hover { color: var(--gold); }
.inicio-kiub-logo { display: inline-flex; }
.inicio-kiub-logo:hover { opacity: 0.8; }
.inicio-kiub-cubo { height: 22px; width: auto; display: block; }

.inicio-sitio { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.inicio-enlace-sitio { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.inicio-enlace-sitio:hover { color: var(--gold); }

/* En pantallas angostas la foto queda de fondo, atenuada, detrás del texto. */
@media (max-width: 760px) {
  .inicio-hero-foto { opacity: 0.35; }
  .inicio-hero-foto::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); }
  .inicio-acceso-titulo { display: none; }
  .inicio-acceso { width: 100%; }
  .inicio-acceso-btn { flex: 1 1 auto; justify-content: center; }
}