:root {
  --papel: #f3ead6;
  --fondo: #2a241b;
  --tinta: #2a241b;
  --suave: #5d5240;
  --linea: #8c7c5f;
  --rojo: #7a1f12;
  --rojo-f: #f2d9cf;
  --verde: #2f5a1e;
  --verde-f: #dde8cf;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 17px/1.5 Georgia, "Times New Roman", serif;
}
[hidden] { display: none !important; }
main { max-width: 640px; margin: 0 auto; padding: 0 10px 24px; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
h1 { font-size: 28px; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: 21px; }
h3 { font-size: 18px; margin-top: 18px; }
small { font-size: 14px; color: var(--suave); font-weight: 400; }

.barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--fondo); color: var(--papel); border-bottom: 1px solid #000;
}
.marca { color: var(--papel); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: .02em; }

.papel {
  background: var(--papel); margin: 12px 0; padding: 20px 18px;
  outline: 3px solid var(--tinta); outline-offset: -9px; border: 1px solid var(--tinta);
}
.papel > *:last-child { margin-bottom: 0; }
.heroe { text-align: center; padding-top: 28px; }
.bajada { font-size: 18px; margin: 0 0 16px; }
.nota { font-size: 15px; color: var(--suave); margin: 10px 0; }
.paso { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin: 0 0 6px; }

.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.cifras div { border: 2px solid var(--tinta); padding: 10px 6px; text-align: center; }
.cifras b { display: block; font-size: 30px; line-height: 1.1; }
.cifras span { font-size: 14px; color: var(--suave); }

button, .b-grande, .b-linea, .b-texto, .b-chico { font: inherit; cursor: pointer; }
.b-grande, .b-linea {
  display: block; width: 100%; min-height: 52px; margin: 10px 0 0; padding: 12px;
  text-align: center; text-decoration: none; font-weight: 700; font-size: 18px; border: 2px solid var(--tinta);
}
.b-grande { background: var(--tinta); color: var(--papel); text-transform: uppercase; letter-spacing: .04em; }
.b-linea { background: transparent; color: var(--tinta); }
.b-texto { background: none; border: 0; color: var(--suave); text-decoration: underline; padding: 14px 0 0; font-size: 16px; min-height: 48px; }
.b-chico { background: transparent; color: var(--papel); border: 1px solid var(--papel); padding: 8px 14px; font-size: 16px; min-height: 44px; }
.b-grande:disabled { opacity: .6; cursor: wait; }

.video { width: 100%; max-height: 70vh; background: #000; display: block; border: 2px solid var(--tinta); }

.puntos { padding-left: 22px; margin: 0; }
.puntos li { margin: 0 0 12px; }

.fila { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 12px; margin: 6px 0;
  border: 2px solid var(--tinta); font-size: 15px; }
.fila em { font-style: normal; font-weight: 700; white-space: nowrap; font-size: 14px; text-transform: uppercase; }
.fila.sin { background: var(--tinta); color: var(--papel); }

.regiones { display: grid; gap: 4px; }
.reg { display: grid; grid-template-columns: 9.5em 1fr 3em; gap: 8px; align-items: center; font-size: 14px; }
.reg i { display: block; height: 12px; background: var(--tinta); min-width: 2px; }
.reg b { text-align: right; }

details { border-top: 1px solid var(--linea); padding: 10px 0; }
summary { cursor: pointer; font-weight: 700; min-height: 32px; }
details p { margin: 8px 0 0; font-size: 16px; }

.form label { display: block; margin: 0 0 12px; font-weight: 700; font-size: 16px; }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 11px 10px; font: 16px/1.3 Georgia, serif;
  background: #fffaf0; color: var(--tinta); border: 2px solid var(--linea); border-radius: 0; min-height: 48px;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.form input[aria-invalid="true"] { border-color: var(--rojo); background: var(--rojo-f); }
.marca-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 15px !important; }
.marca-check input { width: 26px; min-height: 26px; height: 26px; margin: 0; flex: 0 0 26px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
.aviso { background: var(--rojo-f); color: var(--rojo); border: 2px solid var(--rojo); padding: 10px 12px; font-size: 16px; margin: 12px 0 0; }
.aviso.bien { background: var(--verde-f); color: var(--verde); border-color: var(--verde); }

.tarjeta { border: 2px solid var(--tinta); padding: 12px; margin: 0 0 10px; }
.tarjeta h3 { margin: 0 0 4px; }
.tarjeta p { margin: 4px 0; font-size: 15px; }
.tarjeta .b-linea { min-height: 46px; font-size: 16px; }
.sello { display: inline-block; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid currentColor; padding: 1px 6px; margin-left: 4px; }
.cand { border-top: 1px dashed var(--linea); padding: 8px 0; font-size: 15px; }
.cand b { display: block; }
.cand label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.cand input { width: 26px; height: 26px; min-height: 26px; flex: 0 0 26px; margin: 2px 0 0; }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 15px; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }

.dlg { border: 3px solid var(--tinta); background: var(--papel); color: var(--tinta); padding: 18px; width: min(560px, 94vw); max-height: 88vh; }
.dlg::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-botones { display: flex; gap: 10px; align-items: flex-end; }
.dlg-botones .b-grande { flex: 1; }

.pie { color: #b9ab8f; text-align: center; font-size: 14px; padding: 8px 16px 28px; }

.boleta { background: #fffaf0; border: 2px dashed var(--tinta); padding: 16px 14px; margin: 0 0 14px; font-family: "Courier New", Courier, monospace; }
.bo-tit { text-align: center; font-weight: 700; text-transform: uppercase; margin: 0; font-size: 16px; }
.bo-sub { text-align: center; font-size: 13px; color: var(--suave); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--linea); }
.bo-ln { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 700; font-size: 16px; }
.bo-ln b { white-space: nowrap; }
.bo-ln i { display: inline-block; width: 22px; height: 22px; line-height: 22px; margin-right: 6px; text-align: center; font-style: normal; font-size: 13px; background: var(--tinta); color: var(--papel); border-radius: 50%; }
.bo-ex { font-family: Georgia, serif; font-size: 15px; color: var(--suave); margin: 2px 0 14px 28px; line-height: 1.4; }
.bo-caja { background: var(--tinta); color: var(--papel); padding: 10px 12px; margin: 0 0 14px; }
.bo-caja p { font-family: Georgia, serif; font-size: 15px; margin: 6px 0 0; line-height: 1.4; }
.bo-total { font-size: 21px; text-transform: uppercase; border-top: 2px dashed var(--linea); padding-top: 10px; }

.cab { position: sticky; top: 0; z-index: 5; background: var(--fondo); border-bottom: 1px solid #000; }
.cab .barra { position: static; border-bottom: 0; }
.menu { display: flex; gap: 4px; padding: 0 10px 8px; max-width: 640px; margin: 0 auto; }
.menu button { flex: 1; min-height: 44px; background: transparent; color: #d9cdb2; border: 0; border-bottom: 3px solid transparent; font: 700 15px Georgia, serif; cursor: pointer; }
.menu button.activo { color: var(--papel); border-bottom-color: var(--papel); }
.num { display: inline-block; width: 30px; height: 30px; line-height: 30px; margin-right: 8px; text-align: center; font-size: 16px; background: var(--tinta); color: var(--papel); border-radius: 50%; vertical-align: 2px; }
.destacado { background: var(--tinta); color: var(--papel); padding: 12px 14px; margin: 12px 0 0; font-size: 16px; }
.destacado .b-en-linea { color: var(--papel); }
.b-en-linea { display: inline; min-height: 0; padding: 0; font-size: inherit; color: var(--tinta); }
.ejemplo { border: 2px dashed var(--linea); padding: 12px 14px; margin: 10px 0; background: #fffaf0; }
.ejemplo p { margin: 0 0 8px; font-size: 16px; }
.ejemplo .cierre { margin: 10px 0 0; padding-top: 8px; border-top: 2px dashed var(--linea); }
.formula { background: #fffaf0; border: 2px solid var(--tinta); padding: 12px 14px; margin: 10px 0; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 15px; }
.formula p { margin: 0; line-height: 1.6; }
.cinco { padding-left: 22px; margin: 0 0 10px; }
.cinco li { margin: 0 0 10px; }
.dg-tit { text-transform: uppercase; letter-spacing: .06em; font-size: 15px; margin: 16px 0 8px; }
.dg { display: block; width: 100%; height: auto; margin: 0 0 6px; }
.dg-sin { fill: #2a241b; stroke: #2a241b; stroke-width: 1; }
.dg-con { fill: #fffaf0; stroke: #2a241b; stroke-width: 2; }
.dg-t { font: 700 15px Georgia, serif; }
.dg-s { font: 400 13px Georgia, serif; }
.dg-t-sin, .dg-s-sin { fill: #f3ead6; }
.dg-t-con, .dg-s-con { fill: #2a241b; }
.q-preg { border: 2px solid var(--tinta); padding: 12px; margin: 0 0 12px; }
.q-preg > b { display: block; font-size: 17px; margin-bottom: 8px; }
.q-op { display: block; width: 100%; min-height: 48px; margin: 6px 0 0; padding: 10px 12px; text-align: left; font: 400 16px/1.35 Georgia, serif; background: #fffaf0; color: var(--tinta); border: 2px solid var(--linea); cursor: pointer; }
.q-op.bien { background: var(--verde-f); border-color: var(--verde); color: var(--verde); font-weight: 700; }
.q-op.mal { background: var(--rojo-f); border-color: var(--rojo); color: var(--rojo); }
.q-exp { margin: 8px 0 0; font-size: 15px; color: var(--suave); }

.heroe-foto { position: relative; margin: 12px 0; min-height: 420px; display: flex; align-items: flex-end; color: var(--papel);
  background: linear-gradient(to top, rgba(24,18,10,.95) 0%, rgba(24,18,10,.6) 42%, rgba(24,18,10,.05) 100%), url("/img/portada.jpg") center top / cover no-repeat;
  border: 1px solid var(--tinta); outline: 3px solid var(--papel); outline-offset: -9px; }
.hf-texto { padding: 18px 20px 18px; width: 100%; }
.hf-kicker { margin: 0 0 8px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #e6d8b8; }
.heroe-foto h1, .cierre-foto h2 { color: var(--papel); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.heroe-foto h1 { font-size: 31px; margin: 0 0 12px; }
.hf-baja { font-size: 17px; line-height: 1.4; margin: 0 0 10px; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.b-grande.b-claro { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.b-linea.b-claro { background: rgba(24,18,10,.45); color: var(--papel); border-color: var(--papel); }
.para-usted { padding: 0; margin: 0; }
.para-usted li { list-style: none; position: relative; padding-left: 38px; margin: 0 0 12px; font-size: 17px; }
.para-usted li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: var(--tinta); }
.para-usted li::after { content: ""; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px; border: solid var(--papel); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.foto-banda { position: relative; margin: 12px 0; border: 1px solid var(--tinta); outline: 3px solid var(--papel); outline-offset: -9px; overflow: hidden; background: #000; }
.foto-banda img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.foto-banda figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 28px; color: var(--papel); font-size: 23px; font-weight: 700; line-height: 1.25;
  background: linear-gradient(to top, rgba(24,18,10,.94), rgba(24,18,10,0)); text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.logro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.logro .n { flex: 0 0 46px; height: 46px; line-height: 46px; text-align: center; font-size: 26px; background: var(--tinta); color: var(--papel); }
.logro p { margin: 0; }
.bomba { margin: 0 0 14px; }
.bomba img { display: block; width: 100%; height: auto; border: 2px solid var(--tinta); }
.bomba figcaption { font-size: 14px; color: var(--suave); margin-top: 6px; }
.cierre-foto { margin: 12px 0; min-height: 440px; display: flex; align-items: flex-end; color: var(--papel);
  background: linear-gradient(to top, rgba(24,18,10,.95) 0%, rgba(24,18,10,.55) 50%, rgba(24,18,10,.05) 100%), url("/img/unidos.jpg") center top / cover no-repeat;
  border: 1px solid var(--tinta); outline: 3px solid var(--papel); outline-offset: -9px; }
.cierre-foto h2 { font-size: 26px; text-transform: uppercase; margin: 0 0 8px; }
.cta-fija { position: sticky; bottom: 0; z-index: 4; padding: 8px 0 10px; background: linear-gradient(to top, var(--fondo) 70%, rgba(42,36,27,0)); }
.cta-fija .b-grande { margin: 0; background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.menu { display: flex; gap: 6px; padding: 0 10px 8px; max-width: 640px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu::-webkit-scrollbar { display: none; }
.menu button { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: transparent; color: #d9cdb2; border: 1px solid #6b5f48; border-radius: 22px; font: 700 15px Georgia, serif; white-space: nowrap; cursor: pointer; }
.menu button i { font-style: normal; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #6b5f48; color: var(--papel); font-size: 13px; }
.menu button.activo { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.menu button.activo i { background: var(--tinta); color: var(--papel); }
.subtit { font-weight: 700; font-size: 16px; margin: 14px 0 6px; }
.ruta { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 8px 10px; text-align: left; background: #fffaf0; color: var(--tinta); border: 2px solid var(--linea); font: inherit; cursor: pointer; }
.ruta .nv { flex: 0 0 32px; height: 32px; line-height: 32px; text-align: center; font-weight: 700; background: var(--tinta); color: var(--papel); border-radius: 50%; }
.ruta b { display: block; font-size: 17px; }
.ruta small { display: block; font-size: 14px; color: var(--suave); line-height: 1.3; }
.amable { background: #fffaf0; border: 2px dashed var(--linea); padding: 12px 14px; margin: 12px 0; font-size: 16px; line-height: 1.55; }
.grande-t { font-size: 24px; font-weight: 700; margin: 0 0 12px; }
.acuerdo { border: 2px solid var(--tinta); padding: 12px; margin: 0 0 10px; }
.acuerdo p { margin: 0 0 6px; font-size: 16px; }
.acuerdo p:last-child { margin-bottom: 0; }
.ac-t { font-weight: 700; font-size: 17px !important; display: flex; gap: 8px; align-items: baseline; }
.ac-t .num { width: 26px; height: 26px; line-height: 26px; font-size: 14px; flex: 0 0 26px; margin-right: 0; vertical-align: baseline; }
.cuadro { padding: 12px 14px; margin: 0 0 10px; font-size: 16px; border: 2px solid var(--tinta); }
.cuadro.bien { background: var(--verde-f); border-color: var(--verde); color: #1f3d14; }
.cuadro.mal { background: var(--rojo-f); border-color: var(--rojo); color: #5a150c; }
.cuadro.ojo { background: #f3e2b0; border-color: #8a6a14; color: #4a3607; }
.cta-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 8px 10px 10px; background: linear-gradient(to top, var(--fondo) 75%, rgba(42,36,27,0)); }
.cta-fija .b-grande { max-width: 620px; margin: 0 auto; display: block; }
main { padding-bottom: 84px; }

.menu-sep { flex: 0 0 auto; align-self: center; padding: 0 4px 0 10px; margin-left: 4px; border-left: 1px solid #6b5f48; font: 700 13px Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #b9ab8f; white-space: nowrap; }
.menu button i.der { width: 14px; height: 14px; border-radius: 2px; background: transparent; border: 2px solid #b9ab8f; }
.menu button.activo i.der { border-color: var(--tinta); }
.no-lista { padding: 0; margin: 0; }
.no-lista li { list-style: none; position: relative; padding-left: 38px; margin: 0 0 12px; font-size: 17px; }
.no-lista li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: var(--rojo); }
.no-lista li::after { content: ""; position: absolute; left: 12px; top: 4px; width: 3px; height: 18px; background: var(--papel); transform: rotate(45deg); box-shadow: 0 0 0 0 transparent; }
.no-lista li span { display: none; }
.escuchar { margin: 14px 0 4px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.aud { display: block; width: 100%; max-width: 100%; }
.forma { border: 2px solid var(--tinta); padding: 10px 12px; margin: 0 0 10px; background: #fffaf0; }
.forma p { margin: 0; }
.forma-q { font-size: 15px; color: var(--suave); }
.forma-f { font-size: 18px; font-weight: 700; }
.forma-d { font-size: 15px; }
.b-volver { display: block; padding: 0 0 10px; min-height: 44px; }
.resumen { background: var(--tinta); color: var(--papel); padding: 14px 16px; margin: 12px 0; }
.resumen h2 { color: var(--papel); font-size: 19px; }
.lista-legal { padding-left: 22px; margin: 0 0 10px; }
.lista-legal li { margin: 0 0 8px; font-size: 16px; }
.resumen .lista-legal li { font-size: 16px; }
.indice { border: 2px solid var(--linea); padding: 12px 16px; margin: 12px 0 0; background: #fffaf0; }
.indice h2 { font-size: 18px; }
.indice-lista { margin: 0; padding-left: 0; list-style: none; }
.indice-lista li { margin: 0 0 6px; }
.indice-lista a { color: var(--tinta); font-size: 16px; display: inline-block; min-height: 32px; }
.legal blockquote { margin: 10px 0; padding: 8px 14px; border-left: 5px solid var(--tinta); background: #fffaf0; }
.legal blockquote p { margin: 0 0 6px; font-size: 16px; font-style: italic; }
.tabla-scroll { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
table.legal { border-collapse: collapse; min-width: 640px; font-size: 14px; }
table.legal th, table.legal td { border: 1px solid var(--linea); padding: 8px 10px; text-align: left; vertical-align: top; }
table.legal th { background: var(--tinta); color: var(--papel); }
.pie-legal { font-size: 14px; color: var(--suave); }
.pie-legal p { margin: 0 0 6px; font-size: 14px; }
.fuentes a { color: var(--tinta); }

.legal, .fuentes, .pie-legal, .papel[id] { scroll-margin-top: 130px; }

.cab .barra { position: relative; }
.cuenta-menu { position: absolute; right: 12px; top: 100%; z-index: 8; min-width: 240px; background: var(--papel); color: var(--tinta); border: 1px solid #000; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.cuenta-menu[hidden] { display: none; }
.cuenta-menu button { display: block; width: 100%; text-align: left; background: transparent; color: var(--tinta); border: 0; border-bottom: 1px solid rgba(0,0,0,.18); padding: 14px 16px; min-height: 48px; font: inherit; font-size: 16px; cursor: pointer; }
.cuenta-menu button:last-child { border-bottom: 0; }
.cuenta-menu button:hover, .cuenta-menu button:focus-visible { background: rgba(0,0,0,.08); }

.cel { display: flex; align-items: stretch; margin-top: 6px; }
.cel b { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--linea); border-right: 0; background: #e6dbc0; font-size: 18px; }
.cel input { flex: 1; margin-top: 0 !important; min-width: 0; }

#b-cuenta.dentro { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }

.codigo-grande { font-size: 36px; font-weight: 700; letter-spacing: 3px; text-align: center; margin: 8px 0; }

.reg-dias { display: flex; align-items: flex-end; gap: 4px; height: 66px; margin: 6px 0 14px; }
.reg-dias i { flex: 1; background: var(--tinta); min-height: 4px; }
.reg-det { border-bottom: 1px solid var(--linea); padding: 8px 0; }
.reg-det summary { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center; cursor: pointer; font-size: 15px; }
.reg-det summary span:nth-child(2) { height: 10px; background: #e6dbc0; display: block; }
.reg-det summary span:nth-child(2) i { display: block; height: 100%; background: var(--tinta); }
.reg-det summary b { font-size: 14px; white-space: nowrap; }

.cifras.tres { grid-template-columns: repeat(3, 1fr); }
.cifras.tres b { font-size: 26px; }
.cifras.tres span { font-size: 13px; }
.motiva { margin: 4px 0 12px; }
.motiva-t { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.motiva-c { font-weight: 700; margin: 10px 0 0; }
.meta { height: 14px; background: #e6dbc0; border: 1px solid var(--linea); margin: 4px 0; }
.meta i { display: block; height: 100%; background: var(--verde); }
#z-top .reg { display: grid; grid-template-columns: 1fr 70px 40px; gap: 8px; align-items: center; margin: 6px 0; font-size: 15px; }
#z-top .reg.mia span:first-child { font-weight: 700; }
#z-top .reg span:nth-child(2) { height: 10px; background: #e6dbc0; display: block; }
#z-top .reg span:nth-child(2) i { display: block; height: 100%; background: var(--tinta); }

#z-ranking summary { grid-template-columns: 1fr auto; }

.cifras .cifra-btn { font: inherit; color: inherit; background: transparent; border: 2px solid var(--tinta); padding: 10px 6px; text-align: center; cursor: pointer; }
.cifras .cifra-btn:hover, .cifras .cifra-btn:focus-visible { background: #e6dbc0; }
.cifras .cifra-btn b { display: block; font-size: 26px; line-height: 1.1; }
.cifras .cifra-btn span { font-size: 13px; color: var(--suave); }
#dlg-mapa svg { display: block; max-width: 420px; margin: 8px auto; }

.cuenta-menu button.hay { font-weight: 700; }
.cuenta-menu button.hay::after { content: " ●"; color: var(--rojo); }

.guardar { border: 2px dashed var(--linea); padding: 12px; margin: 12px 0; }
.guardar p { margin: 0 0 8px; }
.inst-t { font-weight: 700; font-size: 18px; margin: 10px 0 6px; }
.pasos-inst { list-style: none; padding: 0; margin: 0 0 10px; }
.pasos-inst li { display: flex; gap: 12px; align-items: center; margin: 10px 0; font-size: 17px; }
.pasos-inst .ico { flex: 0 0 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--tinta); background: #e6dbc0; font-size: 20px; }
.pasos-inst .ico svg { display: block; }
[hidden] { display: none !important; }

.socio-n { font-weight: 700; font-size: 17px; margin: 0 0 2px; }
.socio-l { margin: 3px 0; font-size: 16px; word-break: break-word; }
.socio-e { color: var(--suave); }
.socio a { color: var(--tinta); font-weight: 700; }

.menu1 { display: flex; max-width: 640px; margin: 0 auto; padding: 0 10px; }
.menu1 button { flex: 1; min-height: 42px; background: transparent; color: #cfc3a6; border: 0; border-bottom: 3px solid transparent; font: 700 15px Georgia, serif; cursor: pointer; }
.menu1 button.activo { color: var(--papel); border-bottom-color: var(--papel); }
.cab .menu { padding-top: 8px; }

.hf-lema { font: 700 22px Georgia, serif; margin: 6px 0 12px; }
.pie-q { font: 700 13px Georgia, serif; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }
.pie { padding-top: 18px; }

.dlg { box-shadow: inset 0 0 0 3px var(--papel), inset 0 0 0 5px var(--tinta); }
.dlg-x { position: sticky; top: 0; float: right; z-index: 2; width: 44px; height: 44px; margin: -8px -8px 0 8px; padding: 0; background: var(--papel); border: 2px solid var(--tinta); color: var(--tinta); font: 700 30px/1 Georgia, serif; cursor: pointer; }
.dlg-x:hover, .dlg-x:focus-visible { background: var(--tinta); color: var(--papel); }

.cmp { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 12px; }
.cmp th, .cmp td { border: 1px solid var(--linea); padding: 7px 6px; text-align: center; vertical-align: top; }
.cmp thead th { background: #e6dbc0; font-size: 13px; }
.cmp tbody th { text-align: left; font-weight: 400; font-size: 14px; }
.cmp small { display: block; color: var(--suave); font-size: 12px; }
.cmp td:last-child { background: #f2e3b8; }

/* el aviso de entrada: un banner compacto, no una página */
.dlg-aviso { width: min(400px, 92vw); padding: 0; overflow: visible; box-shadow: 0 14px 44px rgba(0, 0, 0, .65); }
.dlg-aviso::backdrop { background: rgba(20, 17, 12, .55); }
.dlg-aviso .aviso-cuerpo { padding: 0 0 12px; }
.av-franja { margin: 0; padding: 12px 14px; background: var(--tinta); color: var(--papel); font: 400 13px/1.3 Georgia, serif; letter-spacing: .04em; text-transform: uppercase; }
.av-franja b { color: #f2d682; letter-spacing: .14em; }
.dlg-aviso .dlg-x { position: absolute; top: -16px; right: -12px; float: none; margin: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 28px; background: var(--tinta); color: var(--papel); border: 2px solid var(--papel); box-shadow: 0 3px 10px rgba(0, 0, 0, .6); z-index: 5; }
.av-bloque { padding: 12px 14px 0; }
.av-fila { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.av-miniatura { position: relative; flex: 0 0 88px; }
.av-miniatura img { display: block; width: 88px; height: 88px; max-height: none; object-fit: cover; border: 2px solid var(--tinta); margin: 0; }
.av-miniatura::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(42, 36, 27, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23f3ead6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.av-textos { flex: 1; min-width: 0; }
.av-textos h2 { font-size: 17px; line-height: 1.25; margin: 0 0 4px; }
.av-textos p { font-size: 14px; line-height: 1.35; margin: 0; }
.av-bloque .b-grande { margin: 12px 0 0; min-height: 46px; font-size: 16px; }
.av-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 0; }
.enlace-video { display: flex; align-items: center; gap: 6px; flex: 1; padding: 6px 4px; background: transparent; color: #0b3d91; border: 0; font: 700 14px/1.25 Georgia, serif; text-align: left; cursor: pointer; }
.enlace-video span { text-decoration: underline; text-underline-offset: 3px; }
.enlace-video svg { flex: 0 0 24px; }
.enlace-video:hover, .enlace-video:focus-visible { background: #e8f0fb; }
#av-entrar { flex: 0 0 auto; font-size: 14px; padding: 8px 4px; white-space: nowrap; }

.b-wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 10px 0 4px; padding: 13px 10px; background: #1f6d3a; color: #fff; border: 2px solid #14471f; font: 700 17px/1.2 Georgia, serif; cursor: pointer; }
.b-wa:hover, .b-wa:focus-visible { background: #14471f; }

.mapa-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.mapa-cab svg { flex: 0 0 auto; border: 1px solid #0b1f4f; }
.mapa-cab p { margin: 0; font: 700 15px/1.3 Georgia, serif; color: #0b1f4f; }
#regiones svg, #mapa-cuerpo svg, #ad-visitas svg { display: block; max-width: 420px; margin: 4px auto; }

.av-video { display: block; width: 100%; max-height: 58vh; margin: 0 0 4px; background: #000; border: 2px solid var(--tinta); }

.av-bloque .av-completo { margin: 8px 0 0; width: 100%; min-height: 44px; font-size: 15px; }
.av-bloque .activo { background: var(--tinta); color: var(--papel); }

dialog.foco { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
dialog.foco::backdrop { background: #000; }
dialog.foco video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.foco-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .75); color: #fff; border: 2px solid #fff; font: 700 34px/1 Georgia, serif; cursor: pointer; }
.foco-x:hover, .foco-x:focus-visible { background: #fff; color: #000; }
.av-bloque .av-inscribir { background: #b3261e; color: #fff; border-color: #6f1410; margin-top: 10px; }
.av-bloque .av-inscribir:hover, .av-bloque .av-inscribir:focus-visible { background: #6f1410; }
.av-bloque .av-wa { margin: 10px 0 0; padding: 10px; font-size: 16px; }
.av-dos { display: flex; gap: 8px; margin-top: 12px; }
.av-dos .b-grande, .av-bloque .av-dos .av-completo { flex: 1 1 0; width: auto; margin: 0; min-height: 52px; padding: 6px 8px; font-size: 14px; line-height: 1.2; }
.como { border: 0; margin: 0 0 8px; padding: 0; }
.como legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.como .marca-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; min-height: 40px; }
.como input[type=radio] { width: 22px; height: 22px; flex: 0 0 22px; }
.tabla-socios { overflow: auto; max-height: 70vh; border: 2px solid var(--tinta); background: var(--papel); -webkit-overflow-scrolling: touch; }
.tab-socios { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 14px; }
.tab-socios th, .tab-socios td { border: 1px solid var(--linea); padding: 6px 8px; text-align: left; white-space: nowrap; vertical-align: top; }
.tab-socios thead th { position: sticky; top: 0; background: var(--tinta); color: var(--papel); cursor: pointer; z-index: 2; }
.tab-socios thead tr.filtros th { top: 31px; background: #e6dbc0; cursor: default; padding: 3px; z-index: 2; }
.tab-socios tr.filtros input { width: 100%; min-width: 80px; margin: 0; padding: 5px; font-size: 13px; }
.tab-socios tbody tr:nth-child(even) { background: #efe5cb; }
.tab-socios .tab-wa { margin-left: 6px; font-size: 12px; }
.tab-socios .ord { font-size: 12px; }
.av-escribanos { margin: 0; padding: 2px 14px 0; text-align: center; }
.av-escribanos .b-texto { font-size: 14px; padding: 6px; }
.menu1 button.m-sumar { flex: 0 0 auto; margin: 4px 0 4px 6px; min-height: 34px; padding: 0 12px; background: #b3261e; color: #fff; border: 2px solid #6f1410; border-radius: 3px; font-size: 14px; }
.menu1 button.m-sumar:hover, .menu1 button.m-sumar:focus-visible { background: #6f1410; }
.pie { padding-bottom: 110px; }
.marca-caja { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.b-escribanos { background: transparent; border: 0; padding: 0; margin: 0; color: #b9ab8f; font: 400 12px Georgia, serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.b-escribanos:hover, .b-escribanos:focus-visible { color: var(--papel); }
.papel-x { position: relative; }
.papel-x > .flujo-x { position: absolute; top: 8px; right: 8px; float: none; margin: 0; z-index: 3; }
.flota-wa { position: fixed; right: 10px; bottom: 82px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; background: rgba(31, 109, 58, .92); color: #fff; border: 1px solid rgba(20, 71, 31, .9); border-radius: 22px; font: 700 14px Georgia, serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; opacity: .9; }
.flota-wa:hover, .flota-wa:focus-visible { opacity: 1; background: #14471f; }
body.sin-cta .flota-wa { bottom: 14px; }
@media (min-width: 700px) { .flota-wa { right: 18px; } }
.msj-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.msj-fila { display: block; padding: 10px 12px; background: var(--papel); border: 2px solid var(--tinta); color: var(--tinta); text-decoration: none; font-weight: 700; }
.msj-fila:hover, .msj-fila:focus-visible { background: #e6dbc0; }
.msj-fila.hecho { opacity: .55; text-decoration: line-through; }
.b-grande.armado { background: #b3261e; border-color: #6f1410; }

.pag-ver { margin: 0; background: var(--papel); color: var(--tinta); font-family: Georgia, serif; }
.ver-caja { max-width: 760px; margin: 0 auto; padding: 14px; }
.ver-marca { font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.ver-medio { display: block; width: 100%; max-height: 80vh; background: #000; border: 3px solid var(--tinta); }
.ver-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ver-botones a { text-align: center; text-decoration: none; }

.msj-tabla-caja { overflow-x: auto; border: 2px solid var(--tinta); }
.msj-tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: #fffaee; }
.msj-tabla th { background: var(--tinta); color: var(--papel); text-align: left; padding: 8px; font-size: 13px; white-space: nowrap; }
.msj-tabla td { padding: 8px; border-bottom: 1px solid #c9b98f; vertical-align: top; }
.msj-fila-t { cursor: pointer; }
.msj-fila-t:hover td, .msj-fila-t:focus-visible td { background: #e6dbc0; outline: none; }
.msj-num { white-space: nowrap; text-align: right; }
.msj-canal { display: inline-block; margin-top: 3px; padding: 0 6px; border: 1.5px solid var(--tinta); font-size: 11px; font-weight: 700; }
.msj-clip { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1.5px solid var(--tinta); font-size: 11px; font-weight: 700; white-space: nowrap; }
.msj-fab { position: fixed; right: 10px; bottom: 132px; z-index: 6; display: flex; align-items: center; padding: 8px 12px; background: var(--tinta); color: var(--papel); border: 2px solid var(--papel); border-radius: 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); cursor: pointer; }
.msj-fab:hover, .msj-fab:focus-visible { background: #000; }
.msj-mas { font-size: 22px; line-height: 1; }
body.sin-cta .msj-fab { bottom: 62px; }
.dlg-msj { width: min(620px, 96vw); }
.dlg-msj h3 { margin: 0 0 10px; }
.msj-form { gap: 8px; }
.msj-fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msj-fila2 label, .msj-form label { margin: 0; }
.msj-form textarea { min-height: 0; }
.msj-info { margin: 0; }
.msj-arch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msj-arch .b-linea { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.msj-arch-estado { font-size: 14px; font-weight: 700; }
.msj-nota-arch { margin: 0; }
.msj-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.msj-botones .b-grande { flex: 1 1 200px; }
.msj-texto { white-space: pre-wrap; background: #fffaee; border: 2px solid #c9b98f; padding: 10px; margin: 8px 0; }
.msj-adj { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.msj-adj .armado { color: #b3261e; font-weight: 700; }
@media (max-width: 480px) { .msj-fila2 { grid-template-columns: 1fr; } }
.msj-aqui { display: none; margin-top: 4px; font-size: 12px; color: var(--suave); }
@media (max-width: 560px) {
  .msj-tabla { font-size: 13px; }
  .msj-tabla th:nth-child(2), .msj-tabla td:nth-child(2) { display: none; }
  .msj-aqui { display: block; }
  .msj-tabla td, .msj-tabla th { padding: 7px 6px; }
}
.msj-form select, .msj-form input, .msj-form textarea { width: 100%; box-sizing: border-box; }
.msj-vacio { border: 2px dashed #8a7a5c; padding: 22px 14px; text-align: center; background: #fffaee; margin: 6px 0; }
.conx { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.conx-k { background: #fffaee; border: 2px solid var(--tinta); padding: 10px; }
.conx-k b { display: block; font-size: 24px; }
.conx-k span { font-size: 13px; color: var(--suave); }

.menu-lista { max-width: 640px; margin: 0 auto; padding: 6px 10px 10px; }
.menu-caja { background: var(--papel); border: 3px solid var(--tinta); }
.menu-caja button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 50px; padding: 0 14px; background: transparent; color: var(--tinta); border: 0; border-bottom: 1px solid #c9b98f; font: 700 17px Georgia, serif; text-align: left; cursor: pointer; }
.menu-caja button:last-child { border-bottom: 0; }
.menu-caja button:hover, .menu-caja button:focus-visible { background: #e6dbc0; }
.menu-caja button.activo { background: var(--tinta); color: var(--papel); }
.cab .menu .sub-actual { display: block; width: 100%; min-height: 44px; padding: 0 12px; background: transparent; color: var(--papel); border: 2px solid #6b5d46; font: 700 16px Georgia, serif; text-align: left; cursor: pointer; }
.conx-k small { display: block; font-size: 12px; color: #1f6d3a; font-weight: 700; }
.cab .menu .sub-actual { flex: 1 1 auto; border-radius: 4px; justify-content: flex-start; }
.conx-boton { text-align: left; font-family: inherit; color: var(--tinta); cursor: pointer; }
.conx-boton:hover, .conx-boton:focus-visible { background: #e6dbc0; }
.vid-bloque { margin: 12px 0; padding-top: 8px; border-top: 1px solid #c9b98f; }
.vid-bloque h4 { margin: 0 0 4px; font-size: 16px; }
.vid-bloque p { margin: 4px 0; }
.vid-barra { display: flex; height: 18px; border: 2px solid var(--tinta); background: #fffaee; }
.vid-barra i { display: block; height: 100%; }
.vid-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.vid-ley i { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--tinta); vertical-align: -1px; }
.b0 { background: #b3261e; } .b1 { background: #d98a3d; } .b2 { background: #e8cf6a; } .b3 { background: #8fb36b; } .b4 { background: #1f6d3a; }
.vid-lectura { margin: 6px 0 0; padding-left: 20px; }
.vid-lectura li { margin: 6px 0; }
.menu1 button { white-space: nowrap; padding: 0 2px; }
@media (max-width: 420px) { .menu1 button { font-size: 14px; } }
.priv h1 { font-size: 26px; margin: 6px 0 10px; }
.priv h2 { font-size: 18px; margin: 20px 0 6px; }
.priv p, .priv li { font-size: 16px; line-height: 1.55; }
.priv ul { padding-left: 22px; }
.priv a { color: var(--tinta); font-weight: 700; }
.priv .ver-marca a { text-decoration: none; }
.priv-corto { font-size: 18px; font-weight: 700; background: #fffaee; border: 2px solid var(--tinta); padding: 12px; }
.pie-priv { color: inherit; font-weight: 700; }
.red-caja { margin: 2px 0 6px; }
.red-boton { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.red-res { margin-top: 8px; padding: 10px; background: #fffaee; border: 2px dashed #8a7a5c; }
.red-tit { font-weight: 700; margin: 0 0 4px; }