/* ==========================================================================
   Webedia España — micrositio legal
   Hoja de estilos única. Paleta corporativa Webedia.

   Para cambiar colores, tipografías o anchos, edita las variables de :root.
   No hace falta tocar nada más.
   ========================================================================== */

:root {
  /* --- Paleta corporativa Webedia --- */
  --wb-blue:        #0028BE;   /* azul Webedia — acento principal */
  --wb-blue-dark:   #001478;   /* azul oscuro — hover */
  --wb-blue-soft:   #E8ECFB;   /* azul muy claro — fondos */
  --wb-ink:         #1E1E1E;   /* negro corporativo */
  --wb-white:       #FFFFFF;
  --wb-grey:        #BEBCBC;

  /* --- Neutros de interfaz --- */
  --surface:        #FFFFFF;
  --surface-alt:    #F5F6F8;
  --border:         #E3E5EA;
  --text:           #1E1E1E;
  --text-muted:     #5A5F6B;

  /* --- Tipografía --- */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Medidas --- */
  --measure: 74ch;      /* ancho de lectura cómodo para texto legal */
  --wrap: 1200px;       /* ancho máximo del contenedor */
  --radius: 6px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* para que los anclajes no queden bajo la cabecera */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* mantiene el pie abajo aunque la página sea corta */
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* width:100% es necesario: en un contenedor flex en columna, el «margin: 0 auto»
   de .layout la centraría a su ancho de contenido en vez de a todo el ancho. */
.layout { flex: 1 0 auto; width: 100%; }

img { max-width: 100%; height: auto; border: 0; }

a {
  color: var(--wb-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:hover { color: var(--wb-blue-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--wb-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Salto al contenido — accesibilidad de teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--wb-blue);
  color: var(--wb-white);
  padding: .75rem 1.25rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: var(--wb-white);
}

/* ==========================================================================
   Cabecera y navegación
   Sticky (no fixed): ocupa espacio real, así nunca tapa el <h1>.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wb-blue);
  color: var(--wb-white);   /* el logotipo hereda este color */
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .5rem 1.5rem;
  display: flex;
  align-items: center;   /* todo centrado verticalmente en la barra */
  gap: 2rem;
  min-height: 64px;
}

/* Logotipo "webedia." en texto.
   Es MONOCROMO, como el logo corporativo: blanco sobre fondo oscuro o azul,
   azul sobre fondo claro. Nunca a dos colores. Hereda el color del contenedor. */
.wordmark {
  color: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.04em;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.wordmark:hover { color: inherit; }

.site-nav { margin-left: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .25rem 1.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mayúsculas con algo de tracking, como el menú de es.webedia-group.com
   (allí es Kapra Neue 18px / 0.5px; aquí va más pequeño porque son 6 entradas
   largas y tienen que caber en una línea). */
.site-nav a {
  display: inline-block;
  padding: .3rem 0;
  color: var(--wb-white);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .045em;
  white-space: nowrap;
  text-decoration: none;
  /* El borde superior transparente compensa el subrayado inferior, para que
     el texto quede ópticamente centrado y no 2px alto. */
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--wb-white); border-bottom-color: rgba(255, 255, 255, .5); }

/* Página actual — una sola fuente de verdad: data-page en el <body>.
   Sobre el azul de la cabecera el subrayado va en blanco. */
.site-nav a[aria-current='page'] {
  color: var(--wb-white);
  border-bottom-color: var(--wb-white);
}

/* Botón hamburguesa — sólo visible en móvil */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius);
  color: var(--wb-white);
  font: inherit;
  font-size: .8125rem;
  padding: .4rem .75rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    flex-basis: 100%;
    margin-left: 0;
    padding-bottom: 1rem;
  }

  .site-nav.is-open { display: block; }
  .site-header__inner { flex-wrap: wrap; padding: .75rem 1.25rem; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }

  .site-nav a {
    padding: .6rem 0 .6rem .75rem;
    font-size: .9375rem;
    border-top: none;
    border-bottom: none;
    border-left: 2px solid transparent;
  }

  .site-nav a[aria-current='page'] { border-left-color: var(--wb-white); }
  .site-nav a:hover { border-bottom: none; border-left-color: rgba(255, 255, 255, .5); }
}

/* ==========================================================================
   Estructura de página
   ========================================================================== */

/* La rejilla es SIEMPRE la misma en todas las páginas: columna del índice +
   columna de contenido. Así el bloque de texto empieza en el mismo sitio y
   mide lo mismo tenga índice o no (condiciones-uso, por ejemplo, no lo tiene
   porque sólo tiene un <h2>; su columna queda simplemente vacía). */
.layout {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2.5rem;
  align-items: start;
}

.toc       { grid-column: 1; }
.page-body { grid-column: 2; }

@media (max-width: 1040px) {
  .layout { grid-template-columns: 1fr; }
  .toc, .page-body { grid-column: 1; }
}

.page-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3rem 3.5rem;
  min-width: 0;   /* deja que las tablas anchas hagan scroll en vez de romper el grid */
}

@media (max-width: 720px) {
  .page-body { padding: 1.75rem 1.25rem; }
  .layout { padding: 1.5rem 1rem 3rem; }
}

/* ==========================================================================
   Tipografía del contenido
   ========================================================================== */

.page-body > h1 {
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 3px solid var(--wb-blue);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.page-body h2 {
  margin: 2.75rem 0 .875rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--wb-ink);
}

.page-body h2:first-of-type { margin-top: 0; }

.page-body h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.page-body p,
.page-body li {
  max-width: var(--measure);
  font-size: 1rem;
}

.page-body p { margin: 0 0 1.15rem; }

.page-body ul,
.page-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }

.page-body li { margin-bottom: .6rem; }
.page-body li::marker { color: var(--wb-blue); }

.page-body strong { font-weight: 600; }

.page-body abbr[title] { text-decoration: none; border-bottom: 1px dotted var(--wb-grey); }

/* Fecha de última actualización — último párrafo de las páginas legales */
.page-body .last-updated {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .875rem;
}

/* ==========================================================================
   Índice lateral (se genera solo desde los <h2>, ver site.js)
   ========================================================================== */

.toc {
  position: sticky;
  top: 5.5rem;
  font-size: .8125rem;
  line-height: 1.45;
}

.toc h2 {
  margin: 0 0 .875rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }

.toc li { margin: 0; }

.toc a {
  display: block;
  padding: .4rem .875rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
}

.toc a:hover { color: var(--wb-blue); border-left-color: var(--wb-grey); }

.toc a.is-active {
  color: var(--wb-blue);
  border-left-color: var(--wb-blue);
  font-weight: 500;
}

@media (max-width: 1040px) {
  .toc { position: static; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .toc ol { columns: 2; column-gap: 2rem; }
}

@media (max-width: 560px) {
  .toc ol { columns: 1; }
}

/* ==========================================================================
   Tabla de cookies
   Los colores salen de data-tipo en cada <tr> — no hay bgcolor en el HTML.
   Para añadir un proveedor basta con copiar una línea de <tr>.
   ========================================================================== */

.table-scroll {
  margin: 0 0 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* En pantallas estrechas la tabla se desplaza en horizontal dentro de su caja.
   En pantallas anchas no hace falta, y así la fila de encabezados puede
   quedarse fija al hacer scroll. */
@media (max-width: 900px) {
  .table-scroll { overflow-x: auto; }
  .cookie-table { min-width: 700px; }
}

.cookie-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: .8125rem;
  line-height: 1.45;
}

.cookie-table th:nth-child(1) { width: 7.5rem; }
.cookie-table th:nth-child(2) { width: 22%; }
.cookie-table th:nth-child(4) { width: 6rem; }

.cookie-table caption {
  caption-side: top;
  padding: .75rem .875rem;
  background: var(--wb-ink);
  color: var(--wb-white);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
}

.cookie-table th {
  position: sticky;
  top: 64px;                 /* justo debajo de la cabecera del sitio */
  z-index: 1;
  background: var(--surface-alt);
  box-shadow: inset 0 -2px 0 var(--border);
  padding: .6rem .875rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.cookie-table td {
  padding: .55rem .875rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: break-word;
}

.cookie-table tbody tr:last-child td { border-bottom: none; }
.cookie-table tbody tr:hover td { background: var(--wb-blue-soft); }

/* Columna 1 (Tipo): etiqueta de color según el tipo de cookie */
.cookie-table td:first-child { white-space: nowrap; font-weight: 500; }

.cookie-table tr[data-tipo='analitica'] td:first-child { color: #1B7F4B; }
.cookie-table tr[data-tipo='publicidad'] td:first-child { color: var(--wb-blue); }

.cookie-table tr[data-tipo] td:first-child::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .5rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: baseline;
}

/* Columna 2 (Propietario) y 4 (Privacidad) */
.cookie-table td:nth-child(2) { font-weight: 500; }
.cookie-table td:last-child { white-space: nowrap; }

/* ==========================================================================
   Cronología (página de historia)
   ========================================================================== */

.intro {
  max-width: 62ch;
  margin: 0 0 3.5rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.era {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}

.era:first-of-type { border-top: none; padding-top: 0; }

@media (max-width: 860px) {
  .era { grid-template-columns: 1fr; gap: 2rem; }
}

.era-intro { position: sticky; top: 6rem; align-self: start; }

@media (max-width: 860px) {
  .era-intro { position: static; }
}

.era-intro h2 {
  margin: 0 0 .875rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 5.5rem; position: relative; }

/* Línea vertical */
.timeline::before {
  content: '';
  position: absolute;
  left: 4.25rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--border);
}

.timeline-year {
  position: relative;
  margin: 2rem 0 1.25rem -5.5rem;
  padding: .3rem .9rem;
  width: max-content;
  background: var(--wb-blue);
  color: var(--wb-white);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.timeline > .timeline-year:first-child { margin-top: 0; }

.timeline-item { position: relative; margin: 0 0 1rem; }

.timeline-item time {
  position: absolute;
  left: -5.5rem;
  top: .9rem;
  width: 3.5rem;
  text-align: right;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Punto sobre la línea */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.32rem;
  top: 1.15rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wb-white);
  border: 2px solid var(--wb-grey);
}

.timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wb-blue);
  border-radius: var(--radius);
  padding: .875rem 1.125rem;
}

.timeline-card p { margin: 0; max-width: none; font-size: .9375rem; }
.timeline-card p + p { margin-top: .5rem; }
.timeline-card img { display: block; max-width: 120px; margin-bottom: .5rem; }

@media (max-width: 560px) {
  .timeline { padding-left: 1.5rem; }
  .timeline::before { left: .25rem; }
  .timeline-year { margin-left: -1.5rem; }
  .timeline-item::before { left: -1.36rem; }

  .timeline-item time {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: .3rem;
  }
}

/* ==========================================================================
   Pie de página
   ========================================================================== */

/* Pie compacto: una sola barra oscura, centrada. */

.site-footer {
  background: var(--wb-ink);
  color: var(--wb-grey);
  padding: 1.75rem 1.5rem;
  text-align: center;
  font-size: .8125rem;
}

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.5rem;
}

.site-footer .wordmark { font-size: 1.125rem; color: var(--wb-white); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
}

.footer-links a {
  color: var(--wb-white);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .045em;
  text-decoration: none;
}

.footer-links a:hover { color: var(--wb-white); text-decoration: underline; }

/* La separación la da el gap, no hace falta el «|». */
.footer-links .sep { display: none; }

.footer-social { display: flex; gap: .875rem; }

.footer-social a {
  display: inline-flex;
  color: var(--wb-grey);
  text-decoration: none;
}

.footer-social a:hover { color: var(--wb-white); }

.footer-social svg { display: block; width: 18px; height: 18px; }

.footer-legal { color: #7C7C7C; font-size: .75rem; }

/* En móvil se apila, pero sigue siendo compacto. */
@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; gap: .875rem; }
}

/* ==========================================================================
   Impresión — los documentos legales se imprimen y se archivan
   ========================================================================== */

@media print {
  .site-header, .site-footer, .toc, .skip-link { display: none; }
  body { background: #fff; font-size: 11pt; }
  .layout { display: block; padding: 0; max-width: none; }
  .page-body { border: none; padding: 0; }
  .table-scroll { overflow: visible; }
  .cookie-table { font-size: 8pt; }
  a { color: var(--text); text-decoration: underline; }
  .page-body p, .page-body li { max-width: none; }
}