/* Aluca · páginas legales y botón de arrepentimiento. Se suma después de aluca.css. */

.migas { margin: clamp(4px, .6vw, 10px) var(--g) clamp(10px, 1vw, 16px); }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 calc(var(--g) * 1.2); list-style: none; font-size: var(--t-xs); color: var(--suave); }
.migas li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.migas a { text-decoration: underline; text-underline-offset: 3px; }
.migas a:hover { color: var(--acento); }

.lg-cabeza { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.3vw, 22px); margin-top: clamp(24px, 4vw, 80px); text-align: center; }
.lg-cabeza .titulo--grande { max-width: 12em; }
.lg-cabeza .parrafo { max-width: 36em; }

.lg-grilla { display: grid; gap: var(--g); align-items: start; margin-top: clamp(24px, 3.5vw, 64px); }
.lg-indice { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-indice a { padding: .65em 1.1em; border-radius: 999px; background: var(--pastilla); font-size: var(--t-xs); font-weight: 600; transition: background-color .2s, color .2s; }
.lg-indice a:hover, .lg-indice a:focus-visible { background: var(--acento); color: #fff; }

.lg { display: grid; gap: clamp(22px, 2.6vw, 44px); padding: clamp(20px, 3.4vw, 64px); border-radius: var(--r); background: var(--tarjeta); transition: background-color .6s; }
.lg section { display: grid; gap: 12px; scroll-margin-top: calc(var(--g) * 4); }
.lg h2 { margin: 0; font: 600 var(--t-l)/1.15 'Manrope', sans-serif; letter-spacing: -.02em; }
.lg h3 { margin: 0; font: 600 var(--t-m)/1.2 'Manrope', sans-serif; }
.lg p, .lg li { margin: 0; color: var(--texto); font-size: var(--t-m); line-height: 1.6; text-wrap: pretty; }
.lg ul { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; }
.lg a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.lg strong { font-weight: 700; }
.lg__marca { padding: .05em .4em; border-radius: 6px; background: #ffe58a; color: #3a2a00; font-weight: 700; }
.lg__legal { padding: 14px 16px; border-radius: calc(var(--r) * .8); background: var(--fondo); font-size: var(--t-s); }

/* botón de arrepentimiento: formulario */
.ar-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.ar-form[hidden] { display: none; }
.ar-campo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ar-campo label { font-size: var(--t-s); font-weight: 600; }
.ar-campo input, .ar-campo textarea { width: 100%; padding: 1em 1.2em; border-radius: calc(var(--r) * .8); border: 1px solid transparent; background: var(--fondo); color: var(--texto); font: 500 var(--t-m)/1.3 'Manrope', sans-serif; outline: 0; resize: vertical; transition: border-color .3s, background-color .6s; }
.ar-campo input::placeholder { color: var(--suave); opacity: .7; }
.ar-campo input:focus, .ar-campo textarea:focus { border-color: var(--acento); }
.ar-campo [aria-invalid="true"] { border-color: var(--acento); }
.ar-error { margin: 0; color: var(--acento); font-size: var(--t-xs); }
.ar-error:empty { display: none; }
.lg .ar-error--general { color: var(--acento); font-size: var(--t-s); font-weight: 600; }
/* campo trampa contra bots: fuera de pantalla (no display:none, así los bots lo completan) */
.ar-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ar-boton { justify-self: start; border: 0; cursor: pointer; font: inherit; }
.ar-boton:disabled { opacity: .6; cursor: wait; }
.ar-listo { display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 2.4vw, 40px); border-radius: var(--r); background: var(--acento); color: #fff; outline: 0; }
.ar-listo[hidden] { display: none; }
.lg .ar-listo p, .lg .ar-listo h3 { color: #fff; }
.lg .ar-listo .etiqueta { color: rgba(255, 255, 255, .8); }
.lg .ar-listo .ar-codigo { font: 700 clamp(28px, 4.4vw, 52px)/1 'Manrope', sans-serif; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }
.ar-listo .pastilla { background: #fff; color: var(--acento); border: 0; cursor: pointer; font: inherit; }

@media (min-width: 960px) {
  .lg-grilla { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); }
  .lg-grilla--una { grid-template-columns: minmax(0, 880px); justify-content: center; }
  .lg-indice { position: sticky; top: calc(var(--g) * 4); flex-direction: column; align-items: flex-start; padding-left: calc(var(--g) * 1.2); }
  .ar-form { grid-template-columns: 1fr 1fr; }
  .ar-campo--ancho, .ar-error--general, .ar-boton { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ar-campo input, .ar-campo textarea { font-size: 16px; } }
