/* Portadas de los dominios paraguas. Una sola hoja para todos; el color de cada dominio y de cada sitio llega en
   variables (--brand, --brand-ink, --site, --site-ink) desde el HTML que genera wordpress/tools/dominios.py. */
:root {
  --paper: #fbfaf8; --card: #ffffff; --ink: #1d1b19; --muted: #6b655f; --line: #e7e2dc; --soft: #f3efea;
  --display: "Bodoni Moda", "Didot", Georgia, serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body) }
a { color: inherit }
img { display: block; max-width: 100% }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px }

/* Cabecera */
.top { border-top: 4px solid var(--brand); background: var(--card); border-bottom: 1px solid var(--line) }
.top-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-block: 18px }
.wordmark { font-family: var(--display); font-weight: 500; font-size: 1.55rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--brand-ink) }
.top-meta { margin: 0; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums }

/* Presentación */
.hero { padding-block: 56px 36px; max-width: 760px }
.eyebrow { margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink) }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.06;
  letter-spacing: -.015em; text-wrap: balance }
.lede { margin: 18px 0 0; font-size: 1.12rem; color: var(--muted); max-width: 60ch }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px }
.jump a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .88rem;
  font-weight: 600; text-decoration: none }
.jump a:hover, .jump a:focus-visible { border-color: var(--brand-ink); color: var(--brand-ink) }

/* Sitios */
.sites { display: grid; gap: 22px }
.site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; padding: 28px; background: var(--card);
  border: 1px solid var(--line); border-top: 4px solid var(--site); border-radius: var(--radius); scroll-margin-top: 16px }
.site-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0 }
.site-brand { display: flex; align-items: center; gap: 14px; text-decoration: none }
.site-icon { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: var(--soft) }
.site-icon svg { width: 52px; height: 52px }
.site-name { font-family: var(--display); font-weight: 500; font-size: 1.9rem; line-height: 1.05; color: var(--site-ink) }
.site-count { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums }
.site-text { margin: 0; color: var(--ink); max-width: 46ch }
.site-cta { margin-top: auto; display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; background: var(--site-ink);
  color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none }
.site-cta:hover, .site-cta:focus-visible { filter: brightness(1.12) }
.site-sections { min-width: 0 }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.tile { display: grid; gap: 4px; text-decoration: none }
.ph { display: block; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--soft) }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease }
.tile:hover .ph img, .tile:focus-visible .ph img { transform: scale(1.04) }
.ph-letter { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-size: 2.6rem;
  color: var(--site-ink); background: color-mix(in srgb, var(--site) 14%, #fff) }
.tile-name { margin-top: 6px; font-weight: 700; line-height: 1.25 }
.tile:hover .tile-name, .tile:focus-visible .tile-name { color: var(--site-ink) }
.tile-count { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums }
.site-more { margin: 18px 0 0; font-size: .9rem; color: var(--muted); line-height: 1.7 }
.site-more a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px }
.site-more a:hover { color: var(--site-ink); text-decoration-color: currentColor }

/* Dominio con un solo sitio: la ficha ocupa todo y las secciones van en cuatro columnas */
.sites.single .site { grid-template-columns: 1fr }
.sites.single .tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) }
.sites.single .site-cta { margin-top: 6px }

/* Resto de la red */
.net { padding-block: 56px 20px }
.net h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 500; font-size: 1.6rem }
.net-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.net-list a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: 10px; text-decoration: none }
.net-list a:hover, .net-list a:focus-visible { border-color: var(--brand) }
.net-mark { font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand) }
.net-sites { font-size: .85rem; color: var(--muted) }

/* Pie */
.foot { margin-top: 40px; padding-block: 28px 40px; border-top: 1px solid var(--line); background: var(--card); font-size: .85rem; color: var(--muted) }
.foot p { margin: 0 0 8px; max-width: 80ch }
.foot a { color: var(--ink) }

a:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; border-radius: 6px }

@media (max-width: 860px) {
  .site { grid-template-columns: 1fr; padding: 22px }
  .site-cta { margin-top: 6px }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 420px) {
  .wrap { padding-inline: 16px }
  .hero { padding-block: 36px 26px }
  .site { padding: 18px }
  .site-name { font-size: 1.6rem }
  .tiles { gap: 10px }
}
@media (prefers-reduced-motion: reduce) { .ph img { transition: none } }

/* Secciones sin foto: lista con su número de guías */
.seclist-title { margin: 22px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.tiles + .seclist-title { margin-top: 24px }
.site-sections > .seclist-title:first-child { margin-top: 0 }
.seclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px }
.seclist a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; font-weight: 600 }
.seclist a:hover, .seclist a:focus-visible { color: var(--site-ink); border-bottom-color: var(--site) }
.seclist .n { flex: none; font-weight: 400; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums }
.site-cta .arrow { margin-left: .45em }
@media (max-width: 420px) { .seclist { grid-template-columns: 1fr } }