/* ============================================================
   PÁGINAS PÚBLICAS
   Sistema compartido por las páginas públicas que no son la portada.
   Mismo vocabulario visual que ella: rejillas de línea fina, acentos de
   marca en el borde superior y Poppins, la familia del kit.

   Nació dentro de la plantilla de /docentes-verifactu, que no tenía ni
   una regla propia y se veía como HTML en crudo. Al hacer la segunda
   página con este mismo diseño se sacó aquí para no duplicarlo.

   Prefijo `pp-` = páginas públicas.
   ============================================================ */
.pp {
    --teal-dark: #0E4D57;
    --teal-mid: #094a52;
    --teal-light: #32B8C6;
    --coral: #F47C58;
    --lime: #b8d24a;
    --bg-warm: #f5f7f9;
    --text-dark: #1a2332;
    --text-mid: #4a5568;
    --text-light: #9aa5b4;
    --border-subtle: rgba(14, 77, 87, 0.08);
    --shadow-card: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
}
.pp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---------- Portada de la página ---------- */
.pp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--teal-dark) 0%, var(--teal-mid) 100%);
    color: #fff;
    padding: 88px 0 96px;
}
.pp-hero::after {
    /* Halo de profundidad: la portada plana era parte del problema. */
    content: "";
    position: absolute;
    right: -180px;
    top: -140px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(50,184,198,0.30) 0%, rgba(50,184,198,0) 68%);
    pointer-events: none;
}
.pp-hero > * { position: relative; z-index: 1; }
.pp-eyebrow {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 18px;
}
.pp-hero h1 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    max-width: 19ch;
}
.pp-hero h1 em { font-style: normal; color: var(--teal-light); }
.pp-lead {
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.88);
    max-width: 56ch;
    margin: 0 0 34px;
}
.pp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pp-btn {
    display: inline-block;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 0.975rem;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.pp-btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 20px rgba(244,124,88,0.32); }
.pp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(244,124,88,0.42); color: #fff; }
.pp-btn-ghost { border: 1.5px solid rgba(255,255,255,0.45); color: #fff; }
.pp-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
.pp-btn:focus-visible,
.pp a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.pp-hero-nota {
    margin-top: 26px;
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.72);
    border-left: 3px solid var(--lime);
    padding-left: 14px;
}

/* ---------- Secciones ---------- */
.pp-seccion { padding: 76px 0; border-top: 1px solid var(--rule-soft); background: var(--surface); }
.pp-seccion.pp-alt { background: var(--bg-warm); }
.pp-seccion h2 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--teal-dark);
    margin: 0 0 16px;
    max-width: 24ch;
}
.pp-seccion p { line-height: 1.72; color: var(--ink-soft); max-width: 68ch; }
.pp-intro { font-size: 1.0625rem; margin-bottom: 38px; }

/* ---------- Rejilla de capacidades ---------- */
.pp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule-soft);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    overflow: hidden;
}
.pp-card {
    background: var(--surface);
    padding: 30px 26px;
    border-top: 3px solid transparent;
    transition: background .2s ease, border-color .2s ease;
}
.pp-card:nth-child(3n+1) { border-top-color: var(--teal-dark); }
.pp-card:nth-child(3n+2) { border-top-color: var(--coral); }
.pp-card:nth-child(3n+3) { border-top-color: var(--lime); }
.pp-card:hover { background: #fafcfc; }
.pp-card h3 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--teal-dark);
    margin: 0 0 10px;
}
.pp-card p { font-size: 0.9375rem; margin: 0; }

/* ---------- VeriFactu, en detalle ---------- */
.pp-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pp-ficha {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 30px 28px;
}
.pp-ficha h3 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 18px;
}
.pp-ficha dl { margin: 0; }
.pp-ficha dt {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--teal-dark);
    margin-top: 18px;
}
.pp-ficha dt:first-of-type { margin-top: 0; }
.pp-ficha dd { margin: 5px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Pasos ---------- */
.pp-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 2px; }
.pp-paso {
    counter-increment: paso;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    padding: 24px 26px 24px 74px;
}
.pp-paso::before {
    content: counter(paso);
    position: absolute;
    left: 26px;
    top: 24px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--teal-dark);
    color: #fff;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    display: grid;
    place-items: center;
}
.pp-paso h3 {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    color: var(--teal-dark);
    margin: 0 0 6px;
}
.pp-paso p { font-size: 0.9375rem; margin: 0; }

/* ---------- Precio ---------- */
.pp-precio {
    background: linear-gradient(160deg, var(--teal-dark) 0%, var(--teal-mid) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 44px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}
.pp-precio h2 { color: #fff; margin-bottom: 12px; }
.pp-precio p { color: rgba(255,255,255,0.85); margin: 0; }
.pp-precio-cifra {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1;
    color: var(--lime);
    white-space: nowrap;
}
.pp-precio-cifra span { display: block; font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.72); margin-top: 8px; }

/* ---------- Preguntas ---------- */
.pp-faq { display: grid; gap: 2px; }
.pp-faq details {
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: 10px;
    padding: 0 24px;
}
.pp-faq summary {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--teal-dark);
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--teal-light);
    transition: transform .2s ease;
}
.pp-faq details[open] summary::after { transform: rotate(45deg); }
.pp-faq details p { padding: 0 0 22px; margin: 0; font-size: 0.9375rem; }

/* ---------- Herramienta hermana ---------- */
.pp-hermana {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 26px;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-left: 4px solid var(--coral);
    border-radius: 12px;
    padding: 30px 32px;
    box-shadow: var(--shadow-card);
}
.pp-hermana-icono {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(244,124,88,0.12);
    color: var(--coral);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}
.pp-hermana h2 { font-size: 1.25rem; margin: 0 0 8px; }
.pp-hermana p { margin: 0; font-size: 0.9375rem; }
.pp-hermana a { color: var(--teal-dark); font-weight: 700; }

/* ---------- Cierre ---------- */
.pp-cierre { text-align: center; padding: 84px 0; background: var(--bg-warm); border-top: 1px solid var(--rule-soft); }
.pp-cierre h2 { margin: 0 auto 14px; }
.pp-cierre p { margin: 0 auto 30px; }

/* ---------------------------------------------------------------
   Barra superior

   Estos estilos FALTABAN. El fichero solo traia los del boton de menu y
   los de las pantallas estrechas, asi que en escritorio —por encima de
   980 px— la barra salia sin maquetar: el logotipo suelto y los enlaces
   como una lista azul subrayada, que es HTML en crudo.

   No es una regresion reciente: ya faltaban antes de los cambios de
   marca del 06/09/2026. Se ven bien en movil, y de ahi que pasara
   desapercibido.

   El aspecto es el de la portada (`templates/index_xestio.html`, `.nav`):
   barra pegada arriba, fondo crema translucido con desenfoque, enlaces
   con subrayado turquesa al pasar y el acceso de clientes en petroleo.
   Los colores se escriben aqui porque la paleta de la portada vive en su
   propia plantilla; cuando se unifiquen las publicas, este bloque es de
   los primeros que deberia leer sus tokens.
   --------------------------------------------------------------- */
.pp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.5rem 2.5rem;
  /* `color-mix` y no un rgba escrito a mano: asi el translucido sale del
     fondo del tema que haya. Con el crema a pelo, en oscuro quedaba una franja
     clara flotando sobre una pagina oscura. */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}

.pp-nav-marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

.pp-nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: auto;
}

.pp-nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.pp-nav-links a:hover,
.pp-nav-links a:focus-visible {
  color: #0F3D3E;
  border-bottom-color: #14B8A6;
}

/* El acceso de clientes es el unico boton de la barra: se distingue del
   resto de enlaces, pero NO compite con «Solicitar demo» de la pagina. */
.pp-nav-links a.pp-nav-cta {
  background: var(--petroleo);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
  border-bottom: none;
}

.pp-nav-links a.pp-nav-cta:hover,
.pp-nav-links a.pp-nav-cta:focus-visible {
  background: #0b3c44;
  border-bottom: none;
}

/* ---------------------------------------------------------------
   CodeLab (`.cl-*`) — solo /material-de-clase

   Van aqui y no en un <style> de la plantilla porque el diseño de las
   publicas vive en esta hoja: `tests/test_seo.py` lo exige desde que la
   segunda pagina empezo a duplicar el CSS de la primera.
   --------------------------------------------------------------- */

/* El acento de CodeLab es #ADFF00, no el `--lime` (#b8d24a) que comparten
   las demas publicas. Se acota a su pagina y no se cambia la variable
   global: esa lima la usan las cinco paginas SEO y este verde es mucho mas
   agresivo; fuera de CodeLab no pinta nada. */
.cl-eyebrow { color: #ADFF00; }

/* El lockup ya es 2.7:1 con el lienzo recortado, asi que 168 px de alto
   serian 450 de ancho. A 96 px se lee el nombre sin comerle el sitio al
   titular. */
.cl-marca {
  display: block;
  height: 96px;
  width: auto;
  margin-bottom: 1.25rem;
}

/* ---------- Adaptación a pantallas estrechas ---------- */
/* ---- Botón de menú: solo aparece en pantallas estrechas ---- */
.pp-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: pointer;
}
.pp-nav-toggle span {
  display: block;
  height: 2px;
  width: 22px;
  margin: 0 auto;
  background: var(--petroleo);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pp-nav-toggle:focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: 2px;
}
.pp-nav.abierto .pp-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pp-nav.abierto .pp-nav-toggle span:nth-child(2) { opacity: 0; }
.pp-nav.abierto .pp-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .pp-nav-toggle span { transition: none; }
}

@media (max-width: 980px) {
  .pp-nav { padding: 0.5rem 1.25rem; flex-wrap: wrap; }
  .pp-nav-marca img { height: 50px; }
  .pp-nav-toggle { display: flex; }

  /* Con JS el menú arranca plegado; sin JS (sin la clase 'js' en <html>)
     esta regla no aplica y los enlaces siguen a la vista. */
  html.js .pp-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 4px;
  }
  html.js .pp-nav.abierto .pp-nav-links { display: flex; }

  .pp-nav-links a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }
  .pp-nav-links a:last-child { border-bottom: none; }
  .pp-nav-cta {
    margin-top: 10px;
    text-align: center;
    padding: 13px 16px;
  }
}

@media (max-width: 560px) {
  .pp-nav { padding: 0.5rem 1rem; }
  .cl-marca { height: 72px; }
  .pp-nav-marca img { height: 44px; }
}

/* ---------------------------------------------------------------
   Layout de páginas SEO (.pp-seo-*) — compartido por /verifactu,
   /autonomos, /modulos, /centros-formacion y /funcionalidades
   --------------------------------------------------------------- */
.pp-seo-wrap { max-width: 1200px; margin: 0 auto; }
.pp-seo-prosa { max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: var(--ink); }
.pp-seo-prosa p + p { margin-top: 1rem; }
.pp-seo-prosa ul { margin: 1rem 0 0 2rem; }
.pp-seo-prosa li { margin-bottom: 0.5rem; }

.pp-seo-hero {
  background: linear-gradient(135deg, var(--petroleo) 0%, #1a7a8c 100%);
  color: #fff;
  padding: 64px 32px;
  text-align: center;
}
.pp-seo-hero h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); margin-bottom: 1rem; font-weight: 700; }
.pp-seo-hero p { font-size: 1.25rem; margin-bottom: 2rem; color: rgba(255,255,255,0.95); }
.pp-seo-hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.pp-seo-btn {
  display: inline-block;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--radius, 10px);
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.pp-seo-btn:hover { transform: translateY(-2px); text-decoration: none; }
.pp-seo-btn-primary { background: var(--turquesa); color: var(--petroleo); }
.pp-seo-btn-primary:hover { background: #12a695; color: var(--petroleo); }
.pp-seo-btn-ghost { background: rgba(255,255,255,0.15); color: #fff; border: 2px solid #fff; }
.pp-seo-btn-ghost:hover { background: rgba(255,255,255,0.28); color: #fff; }
.pp-seo-btn:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }

.pp-seo-seccion { padding: 64px 32px; background: var(--surface); }
.pp-seo-seccion.pp-seo-alt { background: var(--surface-soft); }
.pp-seo-seccion h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-bottom: 2rem;
  color: var(--ink);
  text-align: center;
}

.pp-seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}
.pp-seo-card {
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}
.pp-seo-card-icono { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1; }
.pp-seo-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--ink); }
.pp-seo-card p { color: var(--ink-soft); line-height: 1.6; }

/* El cierre es una ESCENA: la unica superficie de marca de una pagina de
   lectura. Es lo que hace que el final de un articulo se parezca al final de
   la portada en vez de morir en un bloque blanco. El fondo lo pone `.escena`
   (sistema.css); aqui solo queda la caja. */
.pp-seo-cta { padding: clamp(56px, 7vw, 96px) 32px; text-align: center; }
.pp-seo-cta-inner { max-width: 800px; margin: 0 auto; }
.pp-seo-cta h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 1.5rem; }
.pp-seo-cta > .pp-seo-cta-inner > p { font-size: 1.1rem; margin-bottom: 2rem; }
.escena .pp-seo-cta-nota { margin-top: 1.5rem; font-size: 0.9rem; color: var(--on-band-soft); }
.escena .pp-seo-cta-nota a { color: var(--turquesa); font-weight: 600; }

@media (max-width: 640px) {
  .pp-seo-hero { padding: 40px 16px; }
  .pp-seo-seccion, .pp-seo-cta { padding: 40px 16px; }
  .pp-seo-card { padding: 24px; }
}

/* ---- La barra se encoge al desplazarse ----
   El logotipo entra grande, que es lo que le da presencia al llegar, y se
   reduce en cuanto se empieza a leer: sticky + 92px fijos se comían una
   franja enorme de pantalla, sobre todo en móvil. */
.pp-nav {
  transition: padding 0.22s ease, box-shadow 0.22s ease;
}
.pp-nav-marca img {
  /* El alto lo fijaba el atributo height del <img>, que valia 92 porque el
     logotipo anterior era 2:1. El lockup de Xestio es 4:1 y lleva el lema
     dentro: a 92 px de alto se iria a 368 px de ancho y se comeria la barra.
     Ahora el alto lo manda el CSS y el atributo dice la proporcion real. */
  height: 60px;
  width: auto;
  transition: height 0.22s ease;
}
.pp-nav.compacta {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
.pp-nav.compacta .pp-nav-marca img { height: 42px; }

@media (max-width: 980px) {
  .pp-nav.compacta .pp-nav-marca img { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-nav, .pp-nav-marca img { transition: none; }
}

/* ---- Preguntas frecuentes ---- */
.pp-faq { max-width: 800px; margin: 0 auto; }
.pp-faq-item {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.pp-faq-item:first-child { border-top: 1px solid var(--rule); }
.pp-faq-item summary {
  cursor: pointer;
  padding: 18px 44px 18px 20px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  position: relative;
  list-style: none;
}
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--turquesa-deep);
}
.pp-faq-item[open] summary::after { content: "3"; }
.pp-faq-item summary:hover { background: var(--surface-soft); }
.pp-faq-item summary:focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: -3px;
}
.pp-faq-cuerpo { padding: 0 20px 20px; }
.pp-faq-cuerpo p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
  max-width: 68ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   /ecosistema
   ══════════════════════════════════════════════════════════════════════════

   La pagina que explica que es Xestio Labs. Reutiliza el marco de las paginas
   publicas -`pp-seo-*`- y solo anade lo suyo: la lamina, la rejilla de
   herramientas y la letra pequena de acceso.

   El contenido sale de docs/marca/ecosistema.json, asi que si manana hay una
   quinta herramienta la rejilla se recoloca sola: `auto-fit` con un minimo, no
   un numero fijo de columnas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Que es Xestio Labs: lamina a la izquierda, texto a la derecha ──────── */

.eco-intro-wrap {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

/* Las láminas de compacta/transparente/ son BLANCAS con un nodo de color:
   la firma en negativo, que el kit reserva para ir sobre petróleo. Sin este
   fondo, en /ecosistema solo se veía un trazo naranja suelto sobre blanco
   (hasta el 15/09/2026). Lo vigila test_fichas_ecosistema.py. */
.eco-lamina {
  overflow: hidden;
  background: #0F3D3E;
  border-radius: 16px;
}

.eco-lamina img {
  display: block;
  width: 100%;
  height: auto;
}

.eco-intro-texto h2 {
  margin-top: 0;
  text-align: left;          /* el marco los centra; aqui va en columna */
}

.eco-intro-texto p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}

.eco-intro-nota {
  padding-left: 1rem;
  border-left: 3px solid var(--turquesa);
  font-size: 0.98rem !important;
  color: var(--ink-soft) !important;
}

/* ── La rejilla de herramientas ────────────────────────────────────────── */

.eco-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-tarjeta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(15, 61, 62, 0.12);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(15, 61, 62, 0.06);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.eco-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(15, 61, 62, 0.12);
}

/* La lamina va a sangre y sobre petroleo, que es la condicion que el kit pone
   para la firma en negativo. Se pinta entera: la pieza ya viene sin el aire
   muerto del formato cuadrado, asi que no hay recorte ni marco. */
.eco-tarjeta-lamina {
  background: #0F3D3E;
}

.eco-tarjeta-lamina img {
  display: block;
  width: 100%;
  height: auto;
}

.eco-tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: 1.5rem;
}

.eco-tarjeta-descriptor {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--turquesa-deep);
}

.eco-tarjeta-resumen {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}

/* La letra pequena: dice lo que se va a encontrar ANTES de pulsar. Dos de las
   cinco llevan a una pantalla de acceso, y eso no se descubre despues. */
.eco-tarjeta-nota {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.eco-marca {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Petroleo sobre menta da 11,03:1; el gris sobre su fondo, 6,3:1. Medido. */
.eco-marca--libre {
  background: #E6FAF7;
  color: #0F3D3E;
}

.eco-marca--cuenta {
  background: rgba(15, 61, 62, 0.08);
  color: var(--ink-soft);
}

/* El boton se pega abajo: con tarjetas de alto distinto, si no, cada uno
   queda a una altura y la rejilla se ve descuadrada. */
.eco-tarjeta-boton {
  margin-top: auto;
  padding: 12px 20px;
  font-size: 0.95rem;
  text-align: center;
}

/* enlace a la ficha de cada herramienta, bajo la nota de la tarjeta */
.eco-tarjeta-ficha {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--turquesa-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eco-tarjeta-ficha:hover,
.eco-tarjeta-ficha:focus-visible {
  color: #0F3D3E;
}

/* ── Ficha de una herramienta (seo/herramienta.html) ─────────────────────── */

.ficha-migas {
  padding: 0.9rem 0 0;
}

.ficha-migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 auto;
  list-style: none;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.ficha-migas li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: var(--ink-soft);
}

.ficha-migas a {
  color: var(--turquesa-deep);
}

.ficha-subtitulo {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.05rem;
}

.ficha-lista {
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}

.ficha-lista li {
  margin-bottom: 0.45rem;
  line-height: 1.6;
  color: var(--ink);
}

.ficha-funciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El filete superior lleva el color de la herramienta: es la misma
   convención que los puntos de la banda del ecosistema. */
.ficha-funcion {
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid rgba(15, 61, 62, 0.12);
  border-top: 4px solid var(--ficha-color);
  border-radius: 14px;
}

.ficha-funcion h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}

.ficha-funcion p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink);
}

/* El color por defecto va en la base: una ficha sin modificador tenia el
   suyo escondido en la reserva de un `var()`, donde no lo veia nadie. */
.ficha-funcion, .ficha-otra { --ficha-color: var(--turquesa); }
.ficha-funcion--xestio,    .ficha-otra--xestio    { --ficha-color: var(--turquesa); }
.ficha-funcion--codelab,   .ficha-otra--codelab   { --ficha-color: #84CC16; }
.ficha-funcion--createlab, .ficha-otra--createlab { --ficha-color: #E11D48; }
.ficha-funcion--focuslab,  .ficha-otra--focuslab  { --ficha-color: #EAB308; }
.ficha-funcion--breaklab,  .ficha-otra--breaklab  { --ficha-color: #F59E0B; }

/* Pasos numerados con el número dibujado por CSS: el <ol> ya lo anuncia a
   un lector de pantalla, así que el número visible no se duplica en el texto. */
.ficha-pasos {
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.ficha-pasos li {
  position: relative;
  padding: 0.2rem 0 0.2rem 3.4rem;
  counter-increment: paso;
}

.ficha-pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #0F3D3E;
  color: #fff;
  font-weight: 700;
}

.ficha-pasos h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.ficha-pasos p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink);
}

.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.ficha-otras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha-otra {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid rgba(15, 61, 62, 0.12);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ficha-otra:hover,
.ficha-otra:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 61, 62, 0.12);
}

.ficha-otra:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 2px;
}

.ficha-otra-punto {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--ficha-color);
}

.ficha-otra-nombre {
  font-weight: 700;
  color: #0F3D3E;
}

.ficha-otra-desc {
  grid-column: 2;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ── Movimiento ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .eco-tarjeta,
  .ficha-otra {
    transition: none;
  }
  .eco-tarjeta:hover,
  .ficha-otra:hover,
  .ficha-otra:focus-visible {
    transform: none;
  }
}

@media (max-width: 860px) {
  .eco-intro-wrap {
    grid-template-columns: 1fr;
  }

  .eco-lamina {
    max-width: 320px;
    margin: 0 auto;
  }

  .eco-intro-texto h2 {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Los artículos que orbitan una página pilar (partials/_ultimos_del_pilar).

   Tres piezas en línea que al estrechar se apilan. NO llevan sombra ni fondo
   de tarjeta a propósito: van justo encima de la llamada final, que ya es un
   bloque con peso, y dos superficies seguidas compitiendo aplanan la página.
   Aquí basta con un filete y el título.
--------------------------------------------------------------------------- */

.pp-ultimos {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    border-top: 1px solid var(--rule-soft);
}

.pp-ultimos-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 24px;
}

.pp-ultimos-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    margin-bottom: 2rem;
}

.pp-ultimos-cabecera h2 {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
    margin: 0;
    color: var(--ink);
}

.pp-ultimos-todos {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.pp-ultimos-todos:hover,
.pp-ultimos-todos:focus-visible { text-decoration: underline; }

.pp-ultimos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 40px;
}

.pp-ultimos-lista > li { border-top: 2px solid var(--petroleo); }

.pp-ultimos-lista a {
    display: block;
    padding-block: 1.1rem 1.6rem;
    text-decoration: none;
    color: inherit;
}

.pp-ultimos-tema {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.55em;
}

.pp-ultimos-lista h3 {
    font-size: 1.08rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
    color: var(--ink);
    transition: color 160ms ease;
}

.pp-ultimos-lista p {
    margin: 0 0 0.9em;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.pp-ultimos-meta {
    font-size: 0.8rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.pp-ultimos-lista a:hover h3,
.pp-ultimos-lista a:focus-visible h3 { color: var(--teal-light); }

.pp-ultimos a:focus-visible {
    outline: 2px solid var(--petroleo);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-ultimos * { transition: none !important; }
}


/* ── El selector de claro y oscuro ───────────────────────────────────────
   Nace `hidden` en el HTML y lo enciende `tema-publico.js`: un control que sin
   JavaScript no hace nada es peor que no tenerlo.

   Los dos iconos viven siempre en el DOM y se turnan con `display`: cambiar el
   `innerHTML` al pulsar haria que un lector de pantalla perdiera el foco. Se
   ensena el del tema al que se VA, que es lo que la gente espera de este
   control —el sol significa «ponme claro», no «estas en claro»—. */

.pp-nav-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px: objetivo tactil. Un icono de 20 no se acierta con el dedo. */
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.pp-nav-tema:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
  background: var(--surface);
}

.pp-nav-tema svg { width: 19px; height: 19px; }

/* En claro se ofrece la luna; en oscuro, el sol. */
.pp-nav-tema .pp-tema-sol  { display: none; }
.pp-nav-tema .pp-tema-luna { display: block; }

:root[data-theme="dark"] .pp-nav-tema .pp-tema-sol  { display: block; }
:root[data-theme="dark"] .pp-nav-tema .pp-tema-luna { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp-nav-tema .pp-tema-sol  { display: block; }
  :root:not([data-theme="light"]) .pp-nav-tema .pp-tema-luna { display: none; }
}


/* ── La lámina de la marca, según la superficie ──────────────────────────
   La normal es petróleo sobre transparente y sobre la barra oscura se pierde
   sin dar ningún error. La negativa es blanca y desaparece sobre papel. Están
   las dos en el HTML y se turnan aquí, igual que los iconos del tema: así la
   que toca ya está decidida en el primer pintado. */

.pp-nav-marca .pp-marca-oscura { display: none; }

:root[data-theme="dark"] .pp-nav-marca .pp-marca-clara  { display: none; }
:root[data-theme="dark"] .pp-nav-marca .pp-marca-oscura { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp-nav-marca .pp-marca-clara  { display: none; }
  :root:not([data-theme="light"]) .pp-nav-marca .pp-marca-oscura { display: block; }
}


/* ── Los desplegables de la barra ────────────────────────────────────────
   Diez enlaces sueltos saturaban. Van en tres grupos, hechos con `<details>`,
   así que abren, cierran y responden al teclado sin una línea de JavaScript.

   `summary` pierde su triángulo y se comporta como un botón; la flecha la
   dibujamos nosotros para que gire. */

.pp-menu { position: relative; }

.pp-menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 44 px de alto: objetivo táctil. */
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.pp-menu-boton::-webkit-details-marker { display: none; }

.pp-menu-boton:hover,
.pp-menu[open] > .pp-menu-boton { color: var(--ink); }

.pp-menu-flecha {
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}

.pp-menu[open] > .pp-menu-boton .pp-menu-flecha { transform: rotate(180deg); }

.pp-menu-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  min-width: 232px;
}

.pp-menu-panel a {
  padding: 9px 12px;
  border-radius: var(--radio-sm, 8px);
  border-bottom: none;
  font-weight: 500;
  white-space: nowrap;
}

.pp-menu-panel a:hover,
.pp-menu-panel a:focus-visible {
  background: var(--surface-soft);
  color: var(--ink);
  border-bottom: none;
}

/* En escritorio el panel flota; en móvil se despliega en su sitio, como un
   acordeón, porque una capa flotante en una pantalla de 360 px tapa la
   navegación entera. */
@media (min-width: 981px) {
  .pp-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radio, 14px);
    box-shadow: var(--sombra-alta);
  }
}

@media (max-width: 980px) {
  .pp-menu { width: 100%; }
  .pp-menu-panel {
    padding: 4px 0 8px 14px;
    border-left: 2px solid var(--rule-soft);
    margin-left: 4px;
  }
  .pp-menu-panel a { padding: 10px 8px; }
}


/* El acceso, en linea; la demo, en solido. Los dos de la portada, que eran
   mejores que el unico boton oscuro que tenian las demas paginas. */

.pp-nav-links a.pp-nav-acceso {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.pp-nav-links a.pp-nav-acceso:hover,
.pp-nav-links a.pp-nav-acceso:focus-visible {
  border-color: var(--ink);
  background: var(--surface);
}

/* La llamada principal: turquesa con tinta petroleo. Blanco sobre turquesa se
   queda en 2,3:1 y no se lee. */
.pp-nav-links a.pp-nav-cta {
  background: var(--turquesa);
  color: var(--petroleo);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  border-bottom: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(20,184,166,.9);
}

.pp-nav-links a.pp-nav-cta:hover,
.pp-nav-links a.pp-nav-cta:focus-visible {
  background: #12a695;
  color: var(--petroleo);
  border-bottom: none;
}


/* ── El documento técnico ────────────────────────────────────────────────
   Lo que pinta /funcionalidades, /faq y /casos-de-uso: paginas que son un
   documento largo, no una pagina de producto.

   Estaba COPIADO en las tres plantillas, diecinueve lineas identicas, con los
   colores escritos a pelo. En oscuro, los titulares quedaban petroleo sobre
   petroleo, el texto gris sobre oscuro y las filas pares de las tablas se
   pintaban de BLANCO con la letra clara encima: ilegibles. Se vio en
   /funcionalidades el 18/09/2026.

   Aqui una vez y por tokens: cambia con el tema y se toca en un solo sitio. */

.geo-markdown-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.geo-markdown-wrap h1,
.geo-markdown-wrap h2,
.geo-markdown-wrap h3 { color: var(--ink); }

.geo-markdown-wrap h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.geo-markdown-wrap h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.geo-markdown-wrap h3 { font-size: 1.2rem; margin-top: 1.5rem; }

.geo-markdown-wrap p  { line-height: 1.7; color: var(--ink-soft); }
.geo-markdown-wrap ul,
.geo-markdown-wrap ol { padding-left: 1.5rem; line-height: 1.8; color: var(--ink-soft); }

.geo-markdown-wrap a { color: var(--turquesa-deep); }

/* Una tabla ancha en un movil es lo unico del documento que no encoge: sin
   esto empuja la pagina entera y coge scroll horizontal. */
.geo-markdown-wrap .tabla-scroll { overflow-x: auto; margin: 1.5rem 0; }

.geo-markdown-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.geo-markdown-wrap th {
  background: var(--band);
  color: var(--on-band);
  padding: 0.75rem 1rem;
  text-align: left;
}

.geo-markdown-wrap td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}

/* La fila alterna: tintada CON EL TEMA. Escrita a pelo era el blanco que en
   oscuro dejaba una banda ilegible en medio de la tabla. */
.geo-markdown-wrap tr:nth-child(even) td { background: var(--surface-soft); }