/* ============================================
   POLITICASSTYLES.CSS
   Studio DOCEVEiNTE — Políticas Legales
   Extiende styles.css sin redefinirlo.
   Solo clases nuevas exclusivas de esta página.
   Paleta, tipografías, efectos y transiciones:
   100% del sistema DOCEVEiNTE.
   ============================================ */

@import url('styles.css');

/* ============================================
   HERO — hereda .jumbotron de styles.css
   Solo ajustamos el padding para contenido
   más compacto en una página legal
   ============================================ */

.jumbotron {
  padding: 60px 0;
}

/* Botones ghost side by side en hero */
.hero-ctas .btn-ghost {
  margin-bottom: 8px;
}

/* ============================================
   NAV STRIP LEGAL — tabs de navegación interna
   Usa .section-eyebrow, VT323, colores del sistema
   ============================================ */

.legal-nav-strip {
  background: #fff;
  border-bottom: 1px solid rgba(218, 34, 255, 0.12);
  padding: 16px 0;
  position: sticky;
  top: 56px;
  z-index: 900;
  transition: background 0.3s ease;
}

.legal-nav-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.legal-nav-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.legal-tab {
  font-family: 'M PLUS 1', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(218, 34, 255, 0.2);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}

.legal-tab svg {
  stroke: #DA22FF;
  transition: stroke 0.25s ease;
}

.legal-tab:hover {
  background: rgba(218, 34, 255, 0.06);
  border-color: #DA22FF;
  color: #DA22FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(218, 34, 255, 0.12);
  text-decoration: none;
}

.legal-updated {
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  color: #aaa;
  margin: 0;
}

/* ============================================
   SECCIÓN LEGAL — contenedor de cada bloque
   Usa .card, .card-padding, .section-eyebrow
   ya definidos en styles.css
   ============================================ */

.legal-section-header {
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(218, 34, 255, 0.1);
  padding-bottom: 28px;
}

.legal-section-header h2 {
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 900;
  color: #222;
  margin-bottom: 12px;
}

/* ============================================
   BLOQUES DE CONTENIDO LEGAL
   Prosa + listas con el estilo del sistema
   ============================================ */

.legal-block {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-block h3 {
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #222;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-block h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(135deg, #DA22FF, #9733EE);
  border-radius: 2px;
  flex-shrink: 0;
}

.legal-block p {
  font-family: 'Spline Sans', sans-serif;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 12px;
}

.legal-block p:last-child {
  margin-bottom: 0;
}

.legal-block a {
  color: #DA22FF;
  text-decoration: none;
  border-bottom: 1px dotted rgba(218, 34, 255, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-block a:hover {
  color: #9733EE;
  border-bottom-color: #9733EE;
}

/* Lista legal — hereda lógica visual de .branding-service-list */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.legal-list li {
  font-family: 'Spline Sans', sans-serif;
  color: #555;
  font-size: 15px;
  padding: 10px 12px 10px 24px;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 1.7;
  transition: all 0.2s ease;
}

.legal-list li::before {
  content: '▶';
  position: absolute;
  left: 4px;
  color: #DA22FF;
  font-size: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.legal-list li:last-child {
  border-bottom: none;
}

.legal-list li:hover {
  background: rgba(218, 34, 255, 0.03);
  padding-left: 28px;
  color: #333;
}

/* ============================================
   TABLA DE COOKIES
   Grid que simula tabla — sin <table>
   ============================================ */

.cookies-table-wrapper {
  border: 1px solid rgba(218, 34, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
}

.cookies-row {
  display: grid;
  grid-template-columns: 2fr 1fr 3fr 1fr;
  gap: 0;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  align-items: start;
  transition: background 0.2s ease;
}

.cookies-row:last-child {
  border-bottom: none;
}

.cookies-row:hover:not(.cookies-row--header) {
  background: rgba(218, 34, 255, 0.03);
}

.cookies-row--header {
  background: linear-gradient(135deg, rgba(218, 34, 255, 0.08), rgba(253, 235, 113, 0.06));
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: #DA22FF;
  text-transform: uppercase;
}

.cookies-row span {
  font-family: 'Spline Sans', sans-serif;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  padding-right: 12px;
}

.cookies-row code {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #9733EE;
  background: rgba(151, 51, 238, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Badge tipo de cookie */
.cookie-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 11px !important;
  font-family: 'M PLUS 1', sans-serif !important;
  font-weight: 700;
  background: rgba(218, 34, 255, 0.1);
  color: #9733EE !important;
  border: 1px solid rgba(218, 34, 255, 0.2);
  letter-spacing: 0.3px;
  line-height: 1.8 !important;
}

.cookie-tag--analytics {
  background: rgba(253, 235, 113, 0.15);
  color: #b8890a !important;
  border-color: rgba(253, 235, 113, 0.4);
}

/* ============================================
   LINKS DE NAVEGADORES — fila de pills
   ============================================ */

.legal-browsers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.browser-link {
  font-family: 'M PLUS 1', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #9733EE;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1.5px solid rgba(151, 51, 238, 0.3);
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
}

.browser-link:hover {
  background: rgba(218, 34, 255, 0.08);
  border-color: #DA22FF;
  color: #DA22FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(218, 34, 255, 0.15);
  text-decoration: none;
}

/* ============================================
   CTA FINAL LEGAL
   Usa .card, .card-padding-large de styles.css
   ============================================ */

.legal-cta-card {
  background: linear-gradient(135deg, #FDEB71, #FF6FD8) !important;
  border: none;
  box-shadow: 0 15px 30px rgba(255, 111, 216, 0.4);
  text-align: center;
}

.legal-cta-card h2 {
  color: #3813C2;
  font-weight: 900;
  margin-bottom: 12px;
}

.legal-cta-card .lead {
  color: #333;
  margin-bottom: 28px;
}

.legal-cta-card .section-eyebrow {
  color: #9733EE;
}

.legal-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================
   TERMS — cards en grid heredan .card
   Solo ajuste de step-header spacing
   ============================================ */

.card .step-header {
  margin-bottom: 14px;
}

.card .step-header h3 {
  font-family: 'M PLUS 1', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #222;
  margin: 0;
}

/* ============================================
   DARK MODE — extensiones para politicas.html
   Hereda todo el dark mode de styles.css.
   Solo añadimos las clases nuevas.
   ============================================ */

body.dark-mode .legal-nav-strip {
  background: #18161f;
  border-bottom-color: rgba(218, 34, 255, 0.15);
}

body.dark-mode .legal-tab {
  color: #c8c2d8;
  border-color: rgba(218, 34, 255, 0.2);
}

body.dark-mode .legal-tab:hover {
  background: rgba(218, 34, 255, 0.1);
  color: #DA22FF;
}

body.dark-mode .legal-updated { color: #6a627a; }

body.dark-mode .legal-section-header {
  border-bottom-color: rgba(218, 34, 255, 0.12);
}

body.dark-mode .legal-section-header h2 { color: #f0ecfa; }

body.dark-mode .legal-block {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .legal-block h3 { color: #f0ecfa; }

body.dark-mode .legal-block p { color: #c8c2d8; }

body.dark-mode .legal-block a {
  color: #DA22FF;
  border-bottom-color: rgba(218, 34, 255, 0.3);
}

body.dark-mode .legal-block a:hover { color: #FDEB71; }

body.dark-mode .legal-list li {
  color: #b0a8c8;
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .legal-list li:hover {
  background: rgba(218, 34, 255, 0.06);
  color: #e0dde8;
}

/* Tabla cookies dark */
body.dark-mode .cookies-table-wrapper {
  border-color: rgba(218, 34, 255, 0.2);
}

body.dark-mode .cookies-row {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .cookies-row:hover:not(.cookies-row--header) {
  background: rgba(218, 34, 255, 0.05);
}

body.dark-mode .cookies-row--header {
  background: linear-gradient(135deg, rgba(218, 34, 255, 0.12), rgba(253, 235, 113, 0.05));
}

body.dark-mode .cookies-row span { color: #b0a8c8; }

body.dark-mode .cookies-row code {
  color: #FDEB71;
  background: rgba(253, 235, 113, 0.08);
}

body.dark-mode .cookie-tag {
  background: rgba(218, 34, 255, 0.12);
  color: #DA22FF !important;
  border-color: rgba(218, 34, 255, 0.25);
}

body.dark-mode .cookie-tag--analytics {
  background: rgba(253, 235, 113, 0.1);
  color: #FDEB71 !important;
  border-color: rgba(253, 235, 113, 0.25);
}

body.dark-mode .browser-link {
  color: #DA22FF;
  border-color: rgba(218, 34, 255, 0.3);
}

body.dark-mode .browser-link:hover {
  background: rgba(218, 34, 255, 0.1);
  color: #FDEB71;
  border-color: #DA22FF;
}

/* CTA final dark — la card amarilla/rosa no cambia en dark,
   se mantiene como en el resto del sistema */
body.dark-mode .legal-cta-card { filter: brightness(0.92); }

/* Cards de términos dark — hereda .card dark de styles.css */
body.dark-mode .card .step-header h3 { color: #f0ecfa; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
  .cookies-row {
    grid-template-columns: 2fr 1fr 2fr 1fr;
  }
}

@media (max-width: 767px) {
  .legal-nav-strip {
    top: 70px;
  }

  .legal-nav-tabs {
    gap: 6px;
  }

  .legal-tab {
    font-size: 12px;
    padding: 6px 12px;
  }

  .legal-nav-strip .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .cookies-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    row-gap: 6px;
  }

  .cookies-row--header { display: none; }

  .cookies-row span:nth-child(3) {
    grid-column: 1 / -1;
  }

  .legal-cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .legal-browsers {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .legal-tab span { display: none; }
}