/* ==========================================================================
   BAAN PHO — legal.css  ·  páginas legales (4 URLs con el diseño de pestañas)
   Valores de "Baan Pho - Legal.dc.html" (style=, móvil) y su bloque
   @media (min-width:900px) del <helmet> (líneas 76–82 y 41–44).
   ========================================================================== */

/* ---- Hero legal ---- */
.bp-lghero {
  padding: 132px 26px 44px;
  background: var(--verde-bosque);
  background-image: linear-gradient(rgba(var(--verde-header), 0.97), rgba(var(--verde-pie-2), 0.99)), var(--trama-hojas);
  background-size: auto, 900px;
}

.bp-lghero .bp-eyebrow span:last-child { letter-spacing: var(--ls-eyebrow-pie); }

.bp-lghero h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--fs-h2-cards);   /* 42px literal */
  line-height: var(--lh-titular);
  margin: 0 0 14px;
  color: var(--titular-inv-2);
}

.bp-lghero p {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texto-inv-2);
  margin: 0;
  max-width: 420px;
}

.bp-lg-fecha {
  font-size: var(--fs-mega-sub);
  color: var(--texto-inv-suave);
  margin: 22px 0 0;
}

/* ---- Pestañas (sticky) ---- */
.bp-lg-index {
  position: sticky;
  top: var(--alto-header);
  z-index: 40;
  background: var(--crema);
  border-bottom: 1px solid var(--linea-suave);
}

.bp-lg-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 26px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.bp-lg-tabs::-webkit-scrollbar { display: none; }

.bp-lg-tab {
  flex: none;
  padding: 11px 20px;
  border: 1px solid var(--linea);   /* #d8d2c0 del prototipo, absorbido */
  border-radius: var(--r-pastilla);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tab);
  color: var(--texto);
  white-space: nowrap;
}

/* hover del helmet (línea 44); la activa fija ese mismo estado */
.bp-lg-tab:hover,
.bp-lg-tab--activa,
.bp-lg-tab--activa:hover {
  border-color: var(--oro-700);
  color: var(--tinta);
}

/* ---- Documento ---- */
.bp-lg-doc {
  padding: 64px 26px 72px;
  background: var(--crema);
}

.bp-lg-eyebrow {
  display: block;
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow-pie);
  color: var(--oro-700);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-bottom: 14px;
}

.bp-lg-doc h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-h2-faq);
  line-height: 1.12;
  margin: 0 0 26px;
  color: var(--tinta);
}

.bp-lg-doc h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-fuerte);
  font-size: var(--fs-intertitulo);
  margin: 34px 0 12px;
  color: var(--tinta);
}

.bp-lg-doc p {
  font-size: var(--fs-shell);
  line-height: 1.8;
  color: var(--texto);
  margin: 0 0 20px;
}

.bp-lg-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--texto-oscuro);
  margin: 0 0 30px;
}

.bp-lg-doc ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.bp-lg-doc li {
  font-size: var(--fs-shell);
  line-height: 1.8;
  color: var(--texto);
  margin-bottom: 6px;
}

/* rejilla de datos identificativos */
.bp-lg-datos {
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  padding: 24px 0;
  margin-bottom: 30px;
  display: grid;
  gap: 18px;
}

.bp-lg-dato-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-cta);
  color: var(--texto-meta);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.bp-lg-dato-valor {
  font-size: var(--fs-shell);
  color: var(--tinta);
}

/* filas tipo RGPD */
.bp-lg-filas {
  display: grid;
  gap: 2px;
  margin-bottom: 28px;
}

.bp-lg-fila {
  border-top: 1px solid var(--linea-suave);
  padding: 20px 0;
}
.bp-lg-fila--ultima { border-bottom: 1px solid var(--linea-suave); }

.bp-lg-fila-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-cta);
  color: var(--texto-meta);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.bp-lg-fila-valor {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--texto);
}

.bp-lg-lead--corta { margin-bottom: 26px; }
.bp-lg-filas--corta { margin-bottom: 24px; }
.bp-lg-p24 { margin-bottom: 24px; }

/* filas de tipos de cookies */
.bp-lg-cookie {
  border-top: 1px solid var(--linea-suave);
  padding: 18px 0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}
.bp-lg-cookie--ultima { border-bottom: 1px solid var(--linea-suave); }

.bp-lg-cookie-nombre {
  font-size: var(--fs-shell);
  color: var(--tinta);
  margin-bottom: 4px;
}

.bp-lg-cookie-desc {
  font-size: var(--fs-cuerpo-panel);
  color: var(--texto-2);   /* #6c7566 del prototipo, absorbido */
}

.bp-lg-cookie-tipo {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--texto-meta);
  padding-top: 4px;
}

/* listas con punto dorado */
.bp-lg-lista-puntos {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
}

.bp-lg-punto {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bp-lg-punto-bola {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-circulo);
  background: var(--oro-700);
  margin-top: 9px;
}

.bp-lg-punto-texto {
  font-size: var(--fs-shell);
  line-height: 1.7;
  color: var(--texto);
}

/* enlace dorado subrayado dentro del texto legal */
.bp-lg-link {
  color: var(--oro-700);
  border-bottom: 1px solid var(--oro-200);   /* #d9c79a del prototipo, absorbido */
}

/* CTAs de la sección de cookies */
.bp-lg-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--verde-bosque);
  color: var(--beige);
  padding: 16px 32px;
  font-size: var(--fs-mega-sub);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-lg-cta:hover { color: var(--beige); }

.bp-lg-cta-borde {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--verde-bosque);
  color: var(--tinta);
  padding: 15px 30px;
  font-size: var(--fs-mega-sub);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-lg-cta-borde:hover { color: var(--tinta); }

/* ==========================================================================
   Desktop (helmet, líneas 41–44 y 76–82)
   ========================================================================== */
@media (min-width: 900px) {
  .bp-lg-inner {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
  }

  .bp-lghero { padding: 172px 6vw 64px; }
  .bp-lghero h1 { font-size: var(--fs-h1-ficha-desktop); }

  .bp-lg-index { top: var(--alto-header-desktop); }
  .bp-lg-tabs {
    max-width: var(--contenedor-texto);
    margin: 0 auto;
    padding: 16px 6vw;
  }

  .bp-lg-doc {
    padding-left: max(6vw, calc((100% - 760px) / 2));
    padding-right: max(6vw, calc((100% - 760px) / 2));
  }
  .bp-lg-doc h2 { font-size: var(--fs-h2-cards); }

  .bp-lg-datos {
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
  }
}