/* ============================================================
   PÁGINAS LEGALES — DIAZA
   (Términos y Condiciones, Políticas de Privacidad y Reclamos)

   Lenguaje "clínica editorial", igual que la portada:
     · el hero lo resuelve premium.css (main > section.hero)
     · el texto legal se lee en una columna de ~70ch con un
       índice lateral fijo que lista los mismos apartados
     · el formulario de reclamos usa la misma tarjeta blanca y
       los mismos campos que el formulario de la portada

   Orden de carga: base.css → legales.css → premium.css
   ============================================================ */

/* ============================================================
   0. COMPONENTES DEL SISTEMA
   Mismas clases y mismo aspecto que en la portada (inicio.css),
   repetidas aquí porque estas páginas no cargan inicio.css.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px;
  font-family: var(--fuente-texto); font-size: 15px; font-weight: 600;
  letter-spacing: 0.2px; line-height: 1;
  transition: transform 0.25s var(--curva), box-shadow 0.25s, background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.25s; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--verde-400); outline-offset: 3px; }

/* Sólido: el verde de la marca, para la acción principal */
.btn--solido {
  background: var(--verde-600); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(7, 168, 49, 0.7);
}
.btn--solido:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px rgba(7, 168, 49, 0.85); }

/* De línea: contorno, para la acción secundaria */
.btn--linea {
  border: 1px solid rgba(12, 46, 78, 0.25); color: var(--tinta-900); background: transparent;
}
.btn--linea:hover { background: var(--azul-50); border-color: rgba(12, 46, 78, 0.4); transform: translateY(-2px); }

/* Etiqueta de sección sobre fondo oscuro (la base está en premium.css) */
.etiqueta-seccion.etiqueta-seccion--clara { color: var(--verde-400); }

/* ============================================================
   1. TEXTO LEGAL (Términos y Privacidad)
   Índice fijo a la izquierda + columna de lectura a la derecha.
   ============================================================ */
/* OJO: nada de overflow:hidden aquí — rompería el índice sticky */
.legal {
  position: relative;
  padding: clamp(52px, 6.5vw, 96px) 24px clamp(64px, 8vw, 116px);
  background:
    radial-gradient(70% 55% at 100% 22%, var(--azul-50), transparent 62%),
    #fff;
}
.legal__reja {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* ---------- Índice lateral ---------- */
.legal__indice { position: sticky; top: 128px; }
.legal__indice-lista {
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid rgba(12, 46, 78, 0.14);
}
.legal__indice a {
  display: block;
  margin-left: -1px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid transparent;
  font-family: var(--fuente-texto);
  font-size: 13.5px; font-weight: 500; line-height: 1.45;
  color: var(--tinta-400);
  transition: color 0.25s, border-color 0.25s;
}
.legal__indice a:hover { color: var(--verde-600); border-left-color: var(--verde-600); }
.legal__indice a:focus-visible { outline: 2px solid var(--verde-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- Columna de lectura ---------- */
/* La columna de lectura no pasa de 70ch; además se limita en píxeles
   porque la unidad ch de Montserrat es ancha y dejaba líneas de casi
   95 caracteres (lo cómodo son 70-80). */
.legal__texto {
  max-width: min(70ch, 660px);
  font-family: var(--fuente-texto);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--tinta-600);
}

/* Subtítulos: grandes, apretados y con mucho aire por arriba,
   igual que los títulos de sección de la portada */
.legal__texto h2,
.legal__texto h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--tinta-900);
  text-wrap: balance;
  margin: 2.4em 0 0.6em;
  scroll-margin-top: 130px;   /* que el índice no lo deje bajo la cabecera */
}
.legal__texto h2 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem); }
.legal__texto h3 { font-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.7rem); }
/* El primer subtítulo no necesita tanto aire por arriba */
.legal__texto > h2:first-child,
.legal__texto > h3:first-child { margin-top: 0; }

.legal__texto p { margin: 0 0 1.15em; }

/* Las negritas destacan en el azul petróleo de los títulos */
.legal__texto strong { color: var(--tinta-900); font-weight: 600; }

/* base.css quita las viñetas globalmente: aquí se restauran */
.legal__texto ul {
  list-style: disc;
  padding-left: 26px;
  margin: 0 0 1.15em;
}
.legal__texto li { margin-bottom: 8px; }
.legal__texto li::marker { color: var(--verde-600); }

/* Enlaces en azul de marca, con subrayado sutil */
.legal__texto a {
  color: var(--azul-500);
  text-decoration: underline;
  text-decoration-color: rgba(21, 101, 173, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.legal__texto a:hover { color: var(--tinta-900); text-decoration-color: currentColor; }
.legal__texto a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.28); /* foco verde de marca */
}

/* Los correos conservan el color del texto (como el original) */
.legal__texto a.enlace-correo { color: inherit; text-decoration: none; }
.legal__texto a.enlace-correo:hover { text-decoration: underline; }

/* ============================================================
   2. RECLAMOS — intro editorial + tarjeta del formulario
   ============================================================ */
.reclamos-cuerpo {
  position: relative;
  padding: clamp(52px, 6.5vw, 96px) 24px clamp(64px, 8vw, 116px);
  background:
    radial-gradient(70% 55% at 100% 22%, var(--azul-50), transparent 62%),
    #fff;
}
.reclamos-cuerpo > .contenedor { position: relative; z-index: 1; }

.reclamos-intro {
  max-width: 900px;
  margin: 0 auto clamp(28px, 3.5vw, 46px);
  font-family: var(--fuente-texto);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--tinta-600);
}
.reclamos-intro p { max-width: min(70ch, 660px); margin: 0 0 1.15em; }
.reclamos-intro p:last-child { margin-bottom: 0; }
.reclamos-intro strong { color: var(--tinta-900); font-weight: 600; }

/* ============================================================
   3. FORMULARIO DEL LIBRO DE RECLAMACIONES
   Tarjeta blanca con sombra azulada y campos claros: los mismos
   del formulario de la portada (radio 12, fondo #F7FAFD, borde
   #DCE6F0 y foco verde).
   (Mismos campos y validación de js/reclamos.js: aquí solo estilo.)
   ============================================================ */
.form-reclamos {
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--fuente-texto);
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--sombra-xl);
  padding: clamp(24px, 3vw, 40px);
}

/* Rejilla de campos */
.form-reclamos__campos {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -7px -14px;
}
.campo {
  padding: 0 7px;
  margin-bottom: 14px;
}
/* Anchos de columna */
.campo--100 { width: 100%; }
.campo--66  { width: 66.666%; }
.campo--50  { width: 50%; }
.campo--40  { width: 40%; }
.campo--33  { width: 33.333%; }
.campo--30  { width: 30%; }

.campo > label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta-900);
  line-height: 1.35;
  margin-bottom: 7px;
}

/* Cajas de texto, fechas, selects y textarea */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta-900);
  background-color: #F7FAFD;
  border: 1px solid #DCE6F0;
  border-radius: 12px;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.campo textarea { min-height: auto; resize: vertical; }
.campo ::placeholder { color: #93A6B8; opacity: 1; }
/* EFECTO: al escribir, el campo se ilumina con el verde de la marca */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--verde-400);
  box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.22);
}

/* Select con flechita propia */
.campo .select-envoltura { position: relative; }
.campo .select-envoltura select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.campo .select-envoltura .icono {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  fill: #7D93A8;
  pointer-events: none;
}

/* Casillas "Si / No" en línea, con el verde de la marca */
.campo--casillas .casillas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.campo--casillas .casillas label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid #DCE6F0;
  border-radius: 12px;
  background: #F7FAFD;
  font-size: 14.5px;
  color: var(--tinta-900);
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s;
}
.campo--casillas .casillas label:hover { border-color: var(--verde-400); background: #fff; }
.campo--casillas input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--verde-600);
  cursor: pointer;
}
.campo--casillas input[type="checkbox"]:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.28);
}

/* Botón Enviar: componente .btn--solido a todo el ancho */
.campo--enviar { margin-top: 6px; }
.campo--enviar .btn { width: 100%; }

/* Mensajes de validación y aviso de envío */
.campo.campo-invalido input,
.campo.campo-invalido select,
.campo.campo-invalido textarea {
  border-color: #C94444;
  box-shadow: 0 0 0 3px rgba(201, 68, 68, 0.14);
}
.campo .campo-error {
  display: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #B33A3A;
  margin-top: 6px;
}
.campo.campo-invalido .campo-error { display: block; }

.form-reclamos__aviso {
  display: none;
  margin-top: 20px;
  padding: 15px 18px;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 14px;
  background: var(--azul-50);
  border: 1px solid rgba(21, 101, 173, 0.2);
  color: var(--azul-600);
}
.form-reclamos__aviso.visible { display: block; }

/* ============================================================
   4. ACCESIBILIDAD: sin transiciones si el usuario pide
   movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .legal__texto a,
  .legal__indice a,
  .campo input, .campo select, .campo textarea,
  .btn { transition: none; }
  .btn--solido:hover, .btn:active { transform: none; }
}

/* ============================================================
   5. RESPONSIVE (mismos cortes de siempre: ≤1024 y ≤767)
   ============================================================ */
@media (max-width: 1024px) {
  /* El índice deja de ser columna y pasa arriba, en una tarjeta */
  .legal__reja { grid-template-columns: 1fr; gap: 32px; }
  .legal__indice {
    position: static;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--azul-50);
    border: 1px solid rgba(21, 101, 173, 0.14);
  }
  .legal__indice-lista {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    border-left: 0;
  }
  .legal__indice a { padding: 6px 0; border-left: 0; margin-left: 0; }
  .legal__indice a:hover { border-left: 0; }

  .legal__texto { margin-inline: auto; }
}

@media (max-width: 767px) {
  .legal { padding: 40px 20px 56px; }
  .legal__indice-lista { grid-template-columns: 1fr; }

  .reclamos-cuerpo { padding: 40px 20px 56px; }
  .form-reclamos { padding: 22px 18px; border-radius: 20px; }

  /* Todos los campos a una sola columna en el celular */
  .campo--100, .campo--66, .campo--50,
  .campo--40, .campo--33, .campo--30 { width: 100%; }
  .campo--casillas .casillas label { flex: 1 1 40%; justify-content: center; }
}