/* =======================================================
   APPSWORT – CSS Específico para privacidad.html
   Diseño de texto legal + Mobile Ajustado
   Autor: ChatGPT para Dani :)
======================================================= */

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap");

:root {
  --font: "Titillium Web", sans-serif;
  --azul-oscuro: #006996;
  --azul-claro: #009ee2;
  --gris-texto: #555;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: #fff;
  color: #000;
}

/* -------------------------
   ESTRUCTURA PRINCIPAL
------------------------- */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 65px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Cabecera del Logo */
.cabecera {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

.cabecera_img {
  width: 25%;
  max-width: 420px;
  min-width: 140px;
  animation: fadeUp .6s ease-out;
}

/* -------------------------
   ESTILOS DE TEXTO (Desktop)
------------------------- */
.document {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Títulos */
.document h1 {
    font-size: 2rem;
    color: var(--azul-oscuro);
    margin-bottom: 10px;
    text-align: center;
}

.document h2 {
    font-size: 1.5rem;
    color: var(--azul-oscuro);
    margin-top: 40px;
    margin-bottom: 15px;
}

.document h3 {
    font-size: 1.2rem;
    color: var(--gris-texto);
    margin-bottom: 10px;
    text-align: center !important;
}

/* Párrafos generales */
.texto-legal p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

/* Listas */
.texto-legal ul {
    margin-bottom: 20px;
    margin-left: 40px; /* Tabulación original en escritorio */
}

.texto-legal li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Botón Volver */
.link-div-volver {
  margin-top: 50px;
  text-align: center;
}

.link-volver {
  font-size: 1rem;
  font-weight: bold;
  color: var(--azul-claro);
  text-decoration: none;
  transition: color .2s;
}

.link-volver:hover { color: var(--azul-oscuro); }


/* -------------------------
   ANIMACIONES
------------------------- */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* =======================================================
   RESPONSIVE (MÓVIL) - AJUSTES SOLICITADOS
======================================================= */
@media (max-width: 768px) {

  .main{
    width: 90%;
  }

  .cabecera_img { width: 180px; }

  /* 1. Títulos: Más pequeños en móvil */
  .document h1 { 
      font-size: 1.6rem; /* Reducido de 2rem */
      text-align: center !important;
  }
  
  .document h2 { 
      font-size: 1.25rem; /* Reducido de 1.5rem */
      margin-top: 30px;
      text-align: center !important;
  }
  
  .document h3 {
      font-size: 1rem; /* Reducido de 1.2rem */
      text-align: center !important;
  }
  
  .centrado { text-align: center !important; }

  /* 2. Texto General: Letra más pequeña y Justificado */
  .document p,
  .texto-legal li {
      font-size: 0.95rem; /* Letra un poco más pequeña que en escritorio */
      text-align: justify !important; 
      hyphens: auto;       
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
  }

  /* 3. Listas: Pegadas a la izquierda (Sin tabular) */
  .texto-legal ul {
      margin-left: 0 !important;   /* Quita el margen izquierdo grande */
      padding-left: 18px !important; /* Deja solo el espacio mínimo para el puntito */
      text-align: justify !important;
  }

  .texto-legal li {
      margin-bottom: 10px;
  }
}