/* Pensado para enseñarlo en la tablet: oscuro por defecto, mucho aire,
   tarjetas grandes con foto y una sola familia de letra para el texto. */
:root {
  --fondo: #0d0c0b;
  --fondo-2: #161412;
  --tarjeta: rgba(255, 255, 255, .04);
  --texto: #f3eee8;
  --suave: #9d948a;
  --linea: rgba(255, 255, 255, .09);
  --acento: #ff8a4c;
  --acento-2: #ffc46b;
  --brillo: rgba(255, 138, 76, .16);
  --radio: 28px;
  --serif: "Instrument Serif", Georgia, serif;
  color-scheme: dark;
}
/* Modo claro, si se elige con el botón de arriba a la derecha (tema.js). */
:root[data-tema="claro"] {
  --fondo: #f5f1eb;
  --fondo-2: #ece6dd;
  --tarjeta: rgba(255, 255, 255, .75);
  --texto: #1c1916;
  --suave: #6f665d;
  --linea: rgba(28, 25, 22, .1);
  --acento: #d9541e;
  --acento-2: #e58a2b;
  --brillo: rgba(217, 84, 30, .1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  color: var(--texto);
  background:
    radial-gradient(900px 600px at 10% -10%, var(--brillo), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(255, 196, 107, .06), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  font: 400 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}
main { max-width: 1240px; margin: 0 auto; padding: 28px 32px 80px; }
@media (max-width: 640px) { main { padding: 20px 16px 60px; } }
a { color: inherit; text-decoration: none; }

/* --- Barra de arriba --- */
.barra { display: flex; align-items: center; gap: 12px; height: 52px; margin-bottom: 48px; padding-right: 64px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; }
.marca img { width: 30px; height: 30px; border-radius: 9px; }
.volver {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px;
  border-radius: 99px; border: 1px solid var(--linea); background: var(--tarjeta);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .95rem; font-weight: 500;
}
.volver:active { transform: scale(.97); }

/* --- Titular --- */
.antetitulo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave);
}
.antetitulo::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 12px var(--acento); }
.titular {
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 600; margin: 0 0 18px; max-width: 14ch;
}
.titular em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--acento), var(--acento-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}
.entradilla { color: var(--suave); font-size: 1.15rem; max-width: 46ch; margin: 0 0 48px; }

/* --- Rejilla de sectores (bento) --- */
.bento { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; }
.bento .ancha { grid-column: span 2; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
  .bento .ancha { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .bento .ancha { grid-column: auto; }
}
.sector {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radio); border: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px;
  color: #f6f1ea; background: #111;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s;
}
.sector img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.sector::after { /* oscurece abajo para que el texto se lea siempre */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 7, 6, .92) 0%, rgba(8, 7, 6, .45) 45%, rgba(8, 7, 6, .05) 100%);
}
.sector:hover, .sector:focus-visible { border-color: rgba(255, 138, 76, .5); }
.sector:hover img { transform: scale(1.05); }
.sector:active { transform: scale(.985); }
.sector .num { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 241, 234, .7); }
.sector h2 { margin: 6px 0 4px; font-size: 1.65rem; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
.sector.ancha h2 { font-size: 2.2rem; }
.sector p { margin: 0; color: rgba(246, 241, 234, .72); font-size: .98rem; max-width: 40ch; }
.flecha {
  position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s;
}
.sector:hover .flecha { transform: rotate(-45deg); background: var(--acento); border-color: transparent; }

/* --- Páginas de sector --- */
.portada {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 34px;
  min-height: 380px; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end;
  color: #f6f1ea; border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 56px;
}
.portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 7, 6, .95), rgba(8, 7, 6, .35) 60%, rgba(8, 7, 6, .1)); }
.portada .antetitulo { color: rgba(246, 241, 234, .75); }
.portada .titular { margin-bottom: 10px; }
.portada p { margin: 0; color: rgba(246, 241, 234, .75); font-size: 1.1rem; max-width: 50ch; }
@media (max-width: 640px) { .portada { min-height: 300px; padding: 26px; border-radius: 26px; } }

.seccion { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--suave); margin: 0 0 18px; display: flex; align-items: center; gap: 14px; }
.seccion::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.webs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-bottom: 48px; }
.web {
  display: flex; align-items: center; gap: 18px; padding: 22px;
  border-radius: 22px; border: 1px solid var(--linea); background: var(--tarjeta);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s, transform .3s;
}
.web:hover { border-color: rgba(255, 138, 76, .45); }
.web:active { transform: scale(.985); }
.web .logo {
  width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center;
  font-size: 1.6rem; background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: #1a0f08;
}
.web div { flex: 1; min-width: 0; }
.web b { display: block; font-size: 1.1rem; letter-spacing: -.01em; }
.web small { color: var(--suave); font-size: .9rem; }
.web .dominio { display: block; color: var(--acento); font-size: .82rem; margin-top: 2px; }
.web .ir { color: var(--suave); font-size: 1.2rem; }
.web.pendiente { opacity: .55; }
.web.pendiente .logo { background: var(--fondo-2); color: var(--suave); }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--linea); color: var(--suave); letter-spacing: .04em; }

/* --- Botón de tema --- */
.cambiar-tema {
  position: fixed; top: 28px; right: 32px; z-index: 10;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--tarjeta); border: 1px solid var(--linea); color: var(--texto);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 1.25rem;
}
@media (max-width: 640px) { .cambiar-tema { top: 20px; right: 16px; } }

/* Entrada suave al cargar */
@media (prefers-reduced-motion: no-preference) {
  .aparece { animation: aparece .7s cubic-bezier(.2, .8, .2, 1) both; }
  .bento > :nth-child(2) { animation-delay: .06s; }
  .bento > :nth-child(3) { animation-delay: .12s; }
  .bento > :nth-child(4) { animation-delay: .18s; }
  @keyframes aparece { from { opacity: 0; transform: translateY(16px); } }
}

.no-encontrada { padding-top: 12vh; }