/*
 * ayuda.css — cómo se ve el CENTRO DE AYUDA (ayuda.html).
 * Usa los colores y letras de estilos.css. Diseño de lectura: índice fijo a la izquierda y texto con
 * renglones cortos (se lee mejor).
 */

/* Fondo de la página */
.pagina-ayuda{background:var(--fondo)}

/* ===================== BARRA DE ARRIBA ===================== */
/* Barra azul con línea roja abajo */
.ay-barra{background:var(--azul);color:var(--sobre-azul);border-bottom:6px solid #C41E26}
/* Logo a la izquierda, botón de WhatsApp a la derecha */
.ay-barra-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Logo + nombre */
.ay-marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.02em}
/* Imagen del logo */
.ay-marca img{border-radius:6px}
/* Botón de WhatsApp más chico */
.ay-wa{min-height:42px;padding:0 16px;font-size:14px}

/* ===================== DOS COLUMNAS ===================== */
/* Índice angosto + texto */
.ay{max-width:1180px;margin:0 auto;padding:32px 16px 72px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
/* Celulares y tablets: una columna (índice arriba) */
@media (max-width:860px){.ay{grid-template-columns:1fr;gap:24px;padding-top:20px}}

/* ===================== ÍNDICE ===================== */
/* Queda fijo al bajar (en pantallas grandes) */
.ay-indice{position:sticky;top:16px;padding:16px;border:1px solid var(--linea);border-radius:12px;background:var(--superficie)}
/* En una columna deja de quedar fijo */
@media (max-width:860px){.ay-indice{position:static}}
/* Título del índice */
.ay-indice-t{margin:0 0 8px;font-family:var(--display);font-size:16px;font-weight:600;text-transform:uppercase;color:var(--titulo)}
/* Lista numerada */
.ay-indice ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px}
/* Cada link del índice, cómodo de tocar */
.ay-indice a{display:block;padding:5px 0;color:var(--tinta);text-decoration:none;font-size:15px}
/* Con el mouse encima, subrayado rojo */
.ay-indice a:hover{color:var(--rojo);text-decoration:underline}

/* ===================== TEXTO ===================== */
/* Renglones de hasta 70 caracteres */
.ay-texto{max-width:70ch;min-width:0}
/* Título de la página */
.ay-texto h1{font-size:clamp(34px,5vw,52px);font-weight:700;text-transform:uppercase;line-height:1;color:var(--titulo)}
/* Fecha de actualización */
.ay-actualizado{margin:8px 0 0;color:var(--suave);font-size:14px}
/* Cada sección separada con una línea; scroll-margin deja espacio arriba al saltar desde el índice */
.ay-texto section{padding-top:32px;margin-top:32px;border-top:1px solid var(--linea);scroll-margin-top:16px}
/* Títulos de sección */
.ay-texto h2{font-size:28px;font-weight:700;text-transform:uppercase;line-height:1.05;color:var(--titulo);margin-bottom:12px}
/* Subtítulos */
.ay-texto h3{font-family:var(--text);font-size:17px;font-weight:600;color:var(--tinta);margin:18px 0 6px}
/* Párrafos */
.ay-texto p{margin:0 0 12px}
/* Listas con aire entre ítems */
.ay-texto ul,.ay-texto ol{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
/* Texto legal formal, más chico y en un recuadro */
.ay-legal{padding:12px 14px;border-left:3px solid var(--control);background:var(--superficie);color:var(--suave);font-size:13px}

/* Datos del comercio: nombre a la izquierda, dato a la derecha */
.ay-datos{margin:0;display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
/* Cada fila */
.ay-datos div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:10px 14px;border-bottom:1px solid var(--linea);background:var(--superficie)}
/* Sin línea en la última */
.ay-datos div:last-child{border-bottom:0}
/* Nombre del dato */
.ay-datos dt{font-weight:600;color:var(--suave);font-size:14px}
/* El dato */
.ay-datos dd{margin:0;overflow-wrap:anywhere}
/* Celulares: dato abajo del nombre */
@media (max-width:520px){.ay-datos div{grid-template-columns:1fr;gap:2px}}

/* Link final */
.ay-volver{margin-top:40px}

/* Botones de arrepentimiento: uno al lado del otro (o uno abajo del otro si no entran) */
.ay-arrep{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}