/* Las paginas legales: terminos, privacidad y libro de reclamaciones.
   Sobrias a proposito. Lo que transmite seriedad aqui es que se lean bien. */

:root { --azul:#2d5ef7; --tinta:#1f2430; --tenue:#6b7280; --linea:#e6e9ef; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--tinta); background:#fbfcfe;
  -webkit-font-smoothing:antialiased; line-height:1.65; }
a { color:var(--azul); }

.barra { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(18px,4vw,48px); background:#fff; border-bottom:1px solid var(--linea); }
.marca { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tinta); }
.marca img { width:30px; height:30px; border-radius:9px; object-fit:cover; }
.marca b { letter-spacing:.1em; font-size:.98rem; }
.barra a.volver { color:var(--tenue); text-decoration:none; font-size:.9rem; }

main { max-width:760px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(18px,4vw,40px) 90px; }
.ceja { font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#8b95a7; margin:0 0 10px; }
h1 { font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0 0 8px; letter-spacing:-.02em; line-height:1.15; }
.fecha { color:var(--tenue); font-size:.9rem; margin:0 0 34px; }
h2 { font-size:1.12rem; margin:34px 0 10px; }
p, li { font-size:.98rem; color:#3a4150; }
ul, ol { padding-left:22px; }
li + li { margin-top:5px; }
.caja { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:22px 24px; margin:22px 0; }
.caja.aviso { background:#f5f8ff; border-color:#c9d8f7; }
.pie-legal { border-top:1px solid var(--linea); margin-top:48px; padding-top:20px;
  font-size:.86rem; color:var(--tenue); display:flex; gap:18px; flex-wrap:wrap; }
.pie-legal a { color:var(--tenue); }

/* el formulario del libro */
form { display:grid; gap:14px; }
.dos { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:grid; gap:6px; font-size:.84rem; font-weight:600; color:#4a5160; }
label em { font-style:normal; font-weight:400; color:#9aa4b5; }
input, select, textarea { font-family:inherit; font-size:.95rem; color:var(--tinta); width:100%;
  padding:12px 14px; border:1px solid var(--linea); border-radius:11px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(45,94,247,.14); }
textarea { min-height:110px; resize:vertical; }
.opciones { display:flex; gap:10px; flex-wrap:wrap; }
.opcion { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; flex:1; min-width:200px;
  border:1px solid var(--linea); border-radius:12px; cursor:pointer; background:#fff; font-weight:400; }
.opcion input { width:auto; margin-top:3px; accent-color:var(--azul); }
.opcion b { display:block; font-size:.9rem; }
.opcion small { color:var(--tenue); font-size:.82rem; }
.opcion:has(input:checked) { border-color:var(--azul); background:#f5f8ff; }
.btn { border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:.92rem;
  padding:15px 24px; border-radius:12px; color:#fff; letter-spacing:.03em;
  background:linear-gradient(100deg,#2d5ef7,#4aa8f5); box-shadow:0 10px 26px rgba(45,94,247,.24); }
.btn:disabled { background:#e3e8f0; color:#9aa4b5; box-shadow:none; cursor:not-allowed; }
.error { background:#fdecea; color:#a52714; border:1px solid #f6c9c3; border-radius:11px;
  padding:12px 15px; font-size:.88rem; }
.hoja { text-align:center; padding:12px 0 4px; }
.hoja .num { font-size:1.9rem; font-weight:800; color:var(--azul); letter-spacing:.04em; margin:6px 0 2px; }

@media (max-width:640px) { .dos { grid-template-columns:1fr; } }

/* En el celular, campos a 16px: por debajo, Android hace zoom al enfocar
   y el Libro de Reclamaciones se vuelve incomodo de llenar. */
@media (max-width:900px) {
  input, select, textarea { font-size:16px; }
}