/* Institucional: «Vendé en Once» y legales (app/vistas/institucional/). Solo tokens de critico.css. */

.inst { display: flex; flex-direction: column; min-width: 0; }

/* ---------------------------------------------------------------- «Vendé en Once» */

.vende-cab { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--fondo); border-radius: var(--r-4xl); }
.vende-cab__textos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vende-cab__titulo { text-wrap: balance; }
.vende-cab__bajada { max-width: 60ch; font-size: var(--t-md); line-height: 1.55; color: var(--apagado); text-wrap: pretty; }
.vende-cab__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.vende-cab__acciones .boton { gap: 8px; }
.vende-cab__lista { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px 22px; list-style: none; background: var(--hoja); border-radius: var(--r-2xl); box-shadow: var(--sombra-1); }
.vende-cab__lista li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; line-height: 1.35; }
.vende-cab__lista .ico { flex: 0 0 auto; color: var(--verde); }

.beneficios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.beneficio { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--linea); border-radius: var(--r-2xl); background: var(--hoja); }
.beneficio__icono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-l); background: var(--azul-suave); color: var(--azul); }
.beneficio__titulo { font: 800 var(--t-lg)/1.25 var(--f-titulo); letter-spacing: -.01em; }
.beneficio__texto { color: var(--apagado); line-height: 1.5; }

.pasos-inst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.paso-inst { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-2xl); background: var(--fondo); }
.paso-inst__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pildora); background: var(--tinta); color: var(--hoja); font-weight: 800; }
.paso-inst__titulo { font: 800 var(--t-base)/1.3 var(--f-titulo); }
.paso-inst__texto { margin-top: 4px; font-size: var(--t-sm); color: var(--apagado); line-height: 1.5; }

.condiciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px 28px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-3xl); scroll-margin-top: 96px; }
.condiciones__icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-pildora); background: var(--verde-suave); color: var(--verde); }
.condiciones__textos { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.condiciones__titulo { font: 800 var(--t-xl)/1.2 var(--f-titulo); letter-spacing: -.01em; }
.condiciones__textos p { color: var(--apagado); line-height: 1.5; }
.condiciones__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Preguntas frecuentes (docs/SEO.md §6.6: summary de 48 px en el celular) */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--toque); padding: 10px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--apagado); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.faq p { margin: 0 0 16px; max-width: 72ch; color: var(--apagado); line-height: 1.55; }

/* ---------------------------------------------------------------- legales */

.legal { gap: 24px; }
.legal__base { max-width: 72ch; }
.legal__base p { font-weight: 500; }
.legal__falta { padding: 0 3px; border-radius: 4px; background: var(--oferta-suave); color: var(--oferta-texto); font-weight: 600; }
.legal__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.legal__indice { padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--r-2xl); font-size: var(--t-sm); }
.legal__indice-titulo { margin-bottom: 8px; font-weight: 700; }
.legal__indice ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal__indice a { display: flex; align-items: center; min-height: 36px; color: var(--apagado); text-decoration: none; }
.legal__indice a:hover { color: var(--tinta); text-decoration: underline; }
.legal__texto h2, .legal__texto h3 { scroll-margin-top: 96px; }
.legal__texto a, .legal__intro a, .arr__legal a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.legal__texto code { padding: 1px 5px; border-radius: 4px; background: var(--suave); font-size: .92em; }
.legal__texto blockquote { margin: 0; padding: 12px 16px; border-left: 4px solid var(--linea-fuerte); background: var(--fondo); border-radius: 0 var(--r-m) var(--r-m) 0; }
.legal__otros { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--linea); }
.legal__otros-titulo { font: 800 var(--t-lg)/1.25 var(--f-titulo); }
.legal__otros ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 1024px) {
  .legal__cuerpo { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .legal__indice { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* Formulario del botón de arrepentimiento */
.arr { display: flex; flex-direction: column; gap: 18px; max-width: 760px; padding: clamp(20px, 3vw, 32px); border: 2px solid var(--tinta); border-radius: var(--r-3xl); background: var(--hoja); scroll-margin-top: 96px; }
.arr__cab { display: flex; flex-direction: column; gap: 4px; }
.arr__titulo { font: 800 var(--t-titulo-seccion)/1.15 var(--f-titulo); letter-spacing: -.02em; }
.arr__bajada { color: var(--apagado); }
.arr__form { gap: 24px; }
.arr__grupo { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.arr__leyenda { margin-bottom: 4px; padding: 0; font: 800 var(--t-lg)/1.25 var(--f-titulo); }
.arr__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.arr__legal { font-size: var(--t-sm); color: var(--apagado); line-height: 1.5; }
.arr__listo { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r-2xl); background: var(--verde-suave); color: var(--tinta); }
.arr__listo:focus { outline: none; }
.arr__listo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.arr__listo-icono { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-pildora); background: var(--verde); color: var(--sobre-verde); }
.arr__listo-textos { display: flex; flex-direction: column; gap: 8px; min-width: 0; line-height: 1.5; }
.arr__listo-titulo { font: 800 var(--t-lg)/1.25 var(--f-titulo); }
.arr__codigo { font-size: 1.15em; letter-spacing: .04em; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .vende-cab { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; border-radius: var(--r-3xl); }
  .vende-cab__acciones .boton { flex: 1 1 100%; justify-content: center; }
  .condiciones { padding: 20px 18px; }
  .condiciones__acciones, .condiciones__acciones .boton { width: 100%; }
  .condiciones__acciones .boton { justify-content: center; }
  .legal__indice a { min-height: var(--toque); }
  .legal__otros ul { flex-direction: column; }
  .legal__otros .boton { width: 100%; justify-content: center; }
  .arr { padding: 20px 16px; border-width: 1px; }
  .arr .formulario__acciones .boton { width: 100%; justify-content: center; }
  .grupo__opciones .chip-opcion span { min-height: var(--toque); }
}