/* ================================================================
   FRAGRACIA — LEGAL.CSS
   Estilos exclusivos para las páginas legales.
   Se importa junto con styles.css para heredar las variables
   de color, tipografía y espaciado del sitio principal.

   ÍNDICE:
   1.  Base de la página legal
   2.  Header legal
   3.  Hero del documento
   4.  Índice interactivo
   5.  Contenido: secciones
   6.  Tipografía del cuerpo legal (párrafos, listas, tablas)
   7.  Botón volver arriba
   8.  Responsive
================================================================ */


/* ================================================================
   1. BASE DE LA PÁGINA LEGAL
================================================================ */

/* La clase legal-page reemplaza el padding-top que manejan
   las otras páginas con el header fijo. Aquí el header es
   estático (no fixed) así que no necesita compensación. */
.legal-page {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Contenedor principal del contenido legal */
.legal-main {
  min-height: 60vh;
  padding-bottom: var(--sp-16);
}

/* Contenedor centrado más estrecho que el del sitio principal
   para mejorar la legibilidad de textos largos */
.legal-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}


/* ================================================================
   2. HEADER LEGAL
   Header estático (no fixed) exclusivo para las páginas legales.
   Incluye logo, nombre del documento y botón volver.
================================================================ */
.legal-header {
  background: var(--color-primary);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.legal-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Logo: reutiliza las clases del header principal */
.legal-header__logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}
.legal-header__logo .header__logo-img {
  height: 45px;
  width: auto;
}
.legal-header__logo .header__logo-text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-white);
}

/* Nombre del documento en el centro */
.legal-header__doc-name {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Botón volver al sitio */
.legal-header__back {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.legal-header__back:hover {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.5);
}


/* ================================================================
   3. HERO DEL DOCUMENTO
   Bloque superior con título, fecha de actualización e intro.
================================================================ */
.legal-hero {
  width: 100%;
  background-color: var(--color-primary-dark);
  padding: var(--sp-12) 0 var(--sp-10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--sp-10);
}

.legal-hero__titulo {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-surface);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}

.legal-hero__actualizacion {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-surface);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Punto decorativo antes de la fecha */
.legal-hero__actualizacion::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
  flex-shrink: 0;
}

.legal-hero__intro {
  font-size: var(--text-base);
  color: var(--color-surface);
  line-height: 1.85;
  max-width: 680px;
}


/* ================================================================
   4. ÍNDICE INTERACTIVO
   Navegación interna con anclas HTML puras (sin JavaScript).
   Cada ítem enlaza a su sección con un id correspondiente.
================================================================ */
.legal-indice {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6) var(--sp-8);
  margin-bottom: var(--sp-12);
  position: relative;
}

/* Línea verde izquierda decorativa */
.legal-indice::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--sp-6);
  bottom: var(--sp-6);
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-indice__titulo {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
}

.legal-indice__lista {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  counter-reset: none;
}

.legal-indice__lista li {
  padding: 0;
}

.legal-indice__lista a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.35rem var(--sp-2);
  border-radius: var(--radius-sm);
  transition: color 0.2s ease, background 0.2s ease;
}

.legal-indice__lista a:hover {
  color: var(--color-primary);
  background: rgba(24,77,64,0.06);
}


/* ================================================================
   5. CONTENIDO: SECCIONES
   Cada artículo o capítulo del documento legal.
================================================================ */
.legal-contenido {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.legal-seccion {
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--color-accent);
  scroll-margin-top: var(--sp-8); /* Espacio al hacer scroll por ancla */
}

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

/* Header de la sección: número grande + título */
.legal-seccion__header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* Número decorativo en verde claro */
.legal-seccion__numero {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* Título del artículo */
.legal-seccion__titulo {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary-light);
}

/* Cuerpo del artículo */
.legal-seccion__cuerpo {
  padding-left: calc(48px + var(--sp-4)); /* Alinea con el título */
}


/* ================================================================
   6. TIPOGRAFÍA DEL CUERPO LEGAL
   Estilos para el contenido que pegarás dentro de cada sección.
   Párrafos, listas, tablas y bloques destacados.
================================================================ */

/* Párrafos */
.legal-seccion__cuerpo p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.9;
  margin-bottom: var(--sp-4);
}
.legal-seccion__cuerpo p:last-child { margin-bottom: 0; }

/* Subtítulos dentro de un artículo */
.legal-seccion__cuerpo h3 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

/* Listas elegantes */
.legal-seccion__cuerpo ul,
.legal-seccion__cuerpo ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.legal-seccion__cuerpo ul { list-style: none; padding-left: 0; }

.legal-seccion__cuerpo ul li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  padding-left: var(--sp-5);
  position: relative;
}

/* Viñeta dorada tipo diamante */
.legal-seccion__cuerpo ul li::before {
  content: '◇';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: var(--text-xs);
  top: 5px;
}

.legal-seccion__cuerpo ol li {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* Tablas profesionales */
.legal-seccion__cuerpo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.legal-seccion__cuerpo thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.legal-seccion__cuerpo th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-seccion__cuerpo td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
}

.legal-seccion__cuerpo tbody tr:last-child td { border-bottom: none; }
.legal-seccion__cuerpo tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }

/* Bloque destacado / nota importante */
.legal-seccion__cuerpo .legal-nota {
  background: rgba(24,77,64,0.07);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.75;
}

/* Texto de advertencia / alerta */
.legal-seccion__cuerpo .legal-alerta {
  background: rgba(229,62,62,0.07);
  border-left: 3px solid #E53E3E;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.75;
}

/* Texto en negrita */
.legal-seccion__cuerpo strong {
  font-weight: 700;
  color: var(--color-text);
}

/* Texto de contacto / email / teléfono */
.legal-seccion__cuerpo a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(24,77,64,0.3);
  transition: text-decoration-color 0.2s ease;
}
.legal-seccion__cuerpo a:hover {
  text-decoration-color: var(--color-primary);
}


/* ================================================================
   7. BOTÓN VOLVER ARRIBA
   Aparece cuando el usuario baja más de 400px.
   La lógica de visibilidad está en legal.js.
================================================================ */
.legal-top-btn {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-6);
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;

  /* Oculto por defecto */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.legal-top-btn.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.legal-top-btn:hover {
  background: var(--color-primary-light);
}


/* ================================================================
   8. RESPONSIVE
================================================================ */

@media (min-width: 768px) {
  .legal-hero__titulo { font-size: var(--text-3xl); }

  /* Índice en 2 columnas en tablet */
  .legal-indice__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-1) var(--sp-6);
  }
}

@media (max-width: 767px) {
  .legal-header__doc-name { display: none; } /* Oculta en móvil para ahorrar espacio */

  .legal-seccion__numero { font-size: 1.8rem; min-width: 36px; }
  .legal-seccion__titulo { font-size: var(--text-lg); }
  .legal-seccion__cuerpo { padding-left: 0; } /* En móvil quita la sangría */

  .legal-seccion__header { gap: var(--sp-3); }

  .legal-seccion__cuerpo table { font-size: var(--text-xs); }
  .legal-seccion__cuerpo th,
  .legal-seccion__cuerpo td { padding: var(--sp-2) var(--sp-3); }
}