/*
 * LA PORTADA QUE VENDE («Vende con YSNOne»).
 *
 * La ve quien todavía no ha entrado, y su único trabajo es dar ganas de vender.
 * Concepto: el marcador de un vendedor. Una banda de noche índigo con la gente
 * que gana; debajo, páginas claras como un buen folleto. Una sola familia
 * (Archivo), usada por su eje de anchura como en el panel.
 *
 * Carga SOLO tokens.css y esta hoja: base.css es del panel, y sus `.barra`,
 * `.boton` o `.pie` chocarían con los de aquí. Los colores del tema salen de
 * tokens.css (claro y oscuro); la banda de noche es igual en los dos, porque es
 * la portada. Ver `_dev_docs/06`.
 */
.vende {
  --plata: var(--impulso);
  --plata-suave: var(--impulso-suave);
  --noche: #16131F;
  --noche-2: #221C33;
  --noche-texto: #F3EEFF;
  --noche-texto-2: #B9AFD3;
  --plata-viva: #3FD99B;
  --r1: 6px; --r2: 10px; --r3: 16px;
  --ancho: 1180px;
}

:where(.vende), :where(.vende) * { box-sizing: border-box; }
body.vende { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--tipo); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.vende::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--noche); }
:where(.vende) img { max-width: 100%; display: block; }
/* Los «reinicios» van con :where(), que no pesa nada: con `.vende a` (más
   específico que `.marca` o `.boton--fuerte`) el nombre de la barra heredaba el
   color del texto y en el tema claro salía oscuro sobre la banda de noche. */
:where(.vende) a { color: inherit; }
:where(.vende) :is(h1, h2, h3) { margin: 0; text-wrap: balance; line-height: 1.05; }
:where(.vende) p { margin: 0; }
:where(.vende) :focus-visible { outline: 3px solid var(--chispa); outline-offset: 3px; border-radius: 4px; }

.franja { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.marco { max-width: var(--ancho); margin: 0 auto; }

/* ── LA BARRA ───────────────────────────────────────────── */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--noche) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / 8%); }
.barra { color: var(--noche-texto); }
.barra .marco { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--noche-texto); font-weight: 800; font-stretch: 112%; font-size: 1.15rem; letter-spacing: -0.01em; }
.marca__sello { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); display: grid; place-items: center; }
.marca__sello svg { width: 18px; height: 18px; }
.marca small { font-weight: 500; font-stretch: 100%; color: var(--noche-texto-2); font-size: 0.8rem; margin-left: 2px; }
.barra nav { display: flex; gap: 22px; margin-left: auto; }
.barra nav a { color: var(--noche-texto-2); text-decoration: none; font-size: 0.95rem; }
.barra nav a:hover { color: var(--noche-texto); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r2); font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.boton--fuerte { background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%); color: #fff; box-shadow: 0 8px 24px rgb(232 56 142 / 28%); }
.boton--fuerte:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgb(232 56 142 / 36%); }
.boton--claro { background: transparent; color: var(--noche-texto); border: 1.5px solid rgb(255 255 255 / 22%); }
.boton--claro:hover { border-color: rgb(255 255 255 / 50%); }
.barra .boton { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
@media (max-width: 760px) { .barra nav { display: none; } .barra .boton { margin-left: auto; } }

/* ── LA PORTADA ─────────────────────────────────────────── */
.portada { background: radial-gradient(1200px 600px at 85% -10%, rgb(122 59 232 / 38%), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgb(232 56 142 / 18%), transparent 60%), var(--noche); color: var(--noche-texto); padding-block: 56px 72px; overflow: hidden; }
.portada .marco { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.portada__texto { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.antetitulo { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 12%); font-size: 0.85rem; color: var(--noche-texto-2); }
.antetitulo b { color: var(--plata-viva); font-weight: 700; }
.portada h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 900; font-stretch: 118%; letter-spacing: -0.035em; line-height: 0.98; }
.portada h1 em { font-style: normal; color: var(--plata-viva); }
.portada__bajada { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--noche-texto-2); max-width: 34em; }
.portada__bajada strong { color: var(--noche-texto); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.sin { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; font-size: 0.92rem; color: var(--noche-texto-2); }
.sin span { display: inline-flex; align-items: center; gap: 8px; }
.sin svg { width: 18px; height: 18px; flex: none; color: var(--plata-viva); }

.mosaico { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; min-width: 0; aspect-ratio: 1 / 1.02; max-width: 100%; }
.mosaico figure { margin: 0; border-radius: var(--r3); overflow: hidden; background: var(--noche-2); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico .m1 { grid-row: 1 / span 2; }
.aviso-movil { position: absolute; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / 96%); color: #191426; box-shadow: 0 18px 40px rgb(8 6 14 / 45%); max-width: 270px; font-size: 0.86rem; line-height: 1.35; }
.aviso-movil b { display: block; font-size: 0.9rem; }
.aviso-movil small { color: #6B6380; }
.aviso-movil i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #fff; }
.aviso-movil svg { width: 18px; height: 18px; }
.aviso-1 { left: -26px; bottom: 26%; }
.aviso-1 i { background: var(--acento); }
.aviso-2 { right: -12px; bottom: -18px; }
.aviso-2 i { background: #00A870; }
@media (prefers-reduced-motion: no-preference) {
  .aviso-movil { animation: flota 6s ease-in-out infinite; }
  .aviso-2 { animation-delay: -3s; }
  @keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}
@media (max-width: 900px) {
  .portada .marco { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mosaico { max-width: 560px; }
  .aviso-1 { left: 8px; } .aviso-2 { right: 8px; }
}
@media (max-width: 480px) {
  .portada { padding-block: 36px 56px; }
  .aviso-movil { max-width: 220px; font-size: 0.8rem; padding: 10px 12px; }
  .aviso-1 { bottom: 34%; }
}

/* ── SECCIONES CLARAS ───────────────────────────────────── */
.seccion { padding-block: 84px; }
.seccion--alterna { background: var(--fondo-3); }
.cabeza { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; margin-bottom: 44px; }
.rotulo { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acento); }
.cabeza h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.025em; }
.cabeza p { color: var(--texto-2); font-size: 1.1rem; }
@media (max-width: 600px) { .seccion { padding-block: 60px; } .cabeza { margin-bottom: 32px; } }

/* Los tres pasos: es una secuencia de verdad, por eso van numerados. */
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.paso { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 26px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--r3); min-width: 0; }
.paso::before { counter-increment: paso; content: counter(paso); font-weight: 900; font-stretch: 125%; font-size: 3.2rem; line-height: 1; color: var(--acento); }
.paso h3 { font-size: 1.3rem; font-weight: 800; font-stretch: 106%; }
.paso p { color: var(--texto-2); }
.paso .codigo { align-self: flex-start; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 6px; background: var(--acento-suave); color: var(--acento); font-size: 0.9rem; }
.paso .cobro { align-self: flex-start; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--plata-suave); color: var(--plata); font-size: 0.9rem; }
@media (max-width: 860px) { .pasos { grid-template-columns: minmax(0, 1fr); } }


/* ── LA GRÁFICA: TU INGRESO CRECE ─────────────────────────
   Un tablero de noche, como el de la aplicación. La animación la lleva el
   guion y se repite sola; sin guion o con movimiento reducido se ve el mes 12. */
.crece { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.crece__texto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crece__texto h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.025em; }
.crece__texto h2 em { font-style: normal; color: var(--plata); }
.crece__texto > p { color: var(--texto-2); font-size: 1.08rem; }
.hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hitos li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 16px; border-radius: var(--r2); background: var(--fondo-2); border: 1px solid var(--borde); }
.hitos b { font-weight: 850; font-stretch: 118%; color: var(--plata); font-variant-numeric: tabular-nums; }
.hitos span { color: var(--texto-2); }

.grafica { margin: 0; min-width: 0; padding: 22px 22px 18px; border-radius: 22px; color: var(--noche-texto);
  background: radial-gradient(520px 280px at 85% 10%, rgb(63 217 155 / 14%), transparent 70%), radial-gradient(400px 260px at 0% 100%, rgb(122 59 232 / 22%), transparent 70%), var(--noche);
  border: 1px solid rgb(255 255 255 / 8%); box-shadow: 0 30px 70px rgb(22 19 31 / 30%); }
.grafica__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.grafica__titulo { display: block; font-weight: 800; font-stretch: 108%; font-size: 1.08rem; }
.grafica__nota { display: block; font-size: 0.8rem; color: var(--noche-texto-2); margin-top: 3px; max-width: 34em; }
.simulacion { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #FFD27A; background: rgb(255 180 67 / 10%); border: 1px solid rgb(255 180 67 / 28%); }
.simulacion i { width: 7px; height: 7px; border-radius: 50%; background: #FFB443; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.cifra { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / 4%); border: 1px solid rgb(255 255 255 / 7%); min-width: 0; }
.cifra__valor { display: block; font-weight: 900; font-stretch: 122%; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.cifra__valor--plata { color: var(--plata-viva); }
.cifra__valor--oro { color: #FFD27A; }
.cifra__nombre { display: block; margin-top: 6px; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--noche-texto-2); }
.cifra__valor.salta { animation: salta .35s ease-out; }
@keyframes salta { 40% { transform: translateY(-3px) scale(1.06); } }
.grafica__lienzo { position: relative; margin-top: 8px; }
.grafica__svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafica .rejilla { stroke: rgb(255 255 255 / 6%); stroke-width: 1; }
.grafica .base { stroke: rgb(255 255 255 / 26%); stroke-width: 1.5; }
.grafica .eje { fill: var(--noche-texto-2); font: 600 12px var(--tipo); }
.grafica .eje--y { fill: rgb(63 217 155 / 50%); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; }
.grafica .eje--titulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.grafica .seg { fill: url(#g-seg); transform-box: fill-box; transform-origin: 50% 100%; }
.grafica .seg--nuevo { fill: url(#g-nuevo); }
.grafica .zona { fill: transparent; }
.grafica .columna { outline: none; }
.grafica .columna:hover .zona, .grafica .columna:focus-visible .zona { fill: rgb(255 255 255 / 5%); }
.grafica .tendencia { fill: none; stroke: url(#g-linea); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 6; }
.grafica .punta__halo { fill: rgb(255 210 122 / 25%); }
.grafica .punta__nucleo { fill: #FFD27A; filter: url(#f-brillo); }
.grafica .moneda circle { fill: #FFB443; stroke: #FFE3A8; stroke-width: 1.5; filter: url(#f-brillo); }
.grafica .moneda text { fill: #4A3000; font: 900 14px var(--tipo); }
.grafica .mas { fill: var(--plata-viva); font: 800 12px var(--tipo); }
.grafica__globo { position: absolute; transform: translate(-50%, -100%); padding: 8px 12px; border-radius: 10px; background: var(--fondo-2); color: var(--texto); font-size: 0.85rem; white-space: nowrap; box-shadow: 0 10px 24px rgb(8 6 14 / 40%); pointer-events: none; }
.grafica__globo b { color: var(--plata); }
.grafica__pie { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; font-size: 0.84rem; color: var(--noche-texto-2); }
.leyenda { display: inline-flex; align-items: center; gap: 8px; }
.leyenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.leyenda__nuevo { background: linear-gradient(0deg, #3FD99B, #A6F7D4); }
.leyenda__viejo { background: linear-gradient(0deg, #15805A, #22B37C); }
@media (prefers-reduced-motion: no-preference) {
  .grafica .punta__halo { animation: late 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes late { 50% { transform: scale(1.6); opacity: .35; } }
}
@media (max-width: 900px) { .crece { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 480px) {
  .grafica { padding: 16px 12px 14px; }
  .grafica .eje { font-size: 14px; }
  .cifra { padding: 8px 9px; }
  .cifra__nombre { font-size: 0.66rem; }
  .simulacion { display: none; }
}

/* Los productos */
.productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.producto { display: flex; flex-direction: column; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--r3); overflow: hidden; min-width: 0; }
.producto__imagen { aspect-ratio: 16 / 9; background: var(--fondo-3); max-width: 100%; }
.producto__imagen img { width: 100%; height: 100%; object-fit: cover; }
.producto__cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.producto__para { font-size: 0.85rem; font-weight: 700; color: var(--acento); letter-spacing: 0.04em; text-transform: uppercase; }
.producto h3 { font-size: 1.6rem; font-weight: 850; font-stretch: 110%; }
.producto p { color: var(--texto-2); }
.producto__precio { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.producto__precio strong { font-size: 1.35rem; font-weight: 850; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.producto__precio span { color: var(--texto-2); font-size: 0.95rem; }
.pronto { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 22px; border-radius: var(--r3); border: 1px dashed var(--borde); color: var(--texto-2); }
.pronto b { color: var(--texto); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--fondo-3); color: var(--texto); font-weight: 600; font-size: 0.92rem; }
@media (max-width: 760px) { .productos { grid-template-columns: minmax(0, 1fr); } }

/* Las dos columnas con foto */
.dupla { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.dupla--invertida { grid-template-columns: 1.05fr 0.95fr; }
.dupla--invertida .dupla__foto { order: 2; }
.dupla__foto { position: relative; min-width: 0; }
.dupla__foto img { width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r3); }
.dupla__texto { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.dupla__texto h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.025em; }
.dupla__texto > p { color: var(--texto-2); font-size: 1.08rem; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.lista svg { width: 24px; height: 24px; color: var(--plata); margin-top: 1px; }
.lista b { display: block; font-weight: 700; }
.lista span { color: var(--texto-2); }
@media (max-width: 860px) {
  .dupla, .dupla--invertida { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dupla--invertida .dupla__foto { order: 0; }
  .dupla__foto img { aspect-ratio: 4 / 3; }
}

/* La conversación con la IA */
.chat { position: absolute; left: -28px; right: 28px; bottom: -28px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r3); background: var(--fondo-2); border: 1px solid var(--borde); box-shadow: 0 20px 50px rgb(25 20 38 / 18%); font-size: 0.92rem; }
.chat__etiqueta { font-size: 0.75rem; color: var(--texto-2); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.burbuja { padding: 10px 14px; border-radius: 14px; max-width: 88%; line-height: 1.4; }
.burbuja--yo { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 4px; }
.burbuja--ia { align-self: flex-start; background: var(--fondo-3); border-bottom-left-radius: 4px; }
.burbuja--ia b { font-weight: 700; }
/* En el teléfono la conversación va debajo de la foto, montada un poco sobre
   ella. Necesita su propia capa: sin `position`, la foto se pinta encima del
   fondo de la tarjeta y el rótulo quedaba sobre la imagen, sin leerse. */
@media (max-width: 860px) { .chat { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; margin-top: -60px; margin-inline: 12px; } }

/* Reglas claras */
.reglas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.regla { padding: 24px 22px; border-radius: var(--r3); background: var(--fondo-2); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.regla svg { width: 30px; height: 30px; color: var(--acento); }
.regla h3 { font-size: 1.12rem; font-weight: 800; font-stretch: 104%; line-height: 1.2; }
.regla p { color: var(--texto-2); font-size: 0.97rem; }
@media (max-width: 1000px) { .reglas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .reglas { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas */
.preguntas { display: grid; gap: 12px; max-width: 52rem; }
.preguntas details { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--r2); padding: 0 22px; }
.preguntas summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 1.08rem; display: flex; justify-content: space-between; gap: 16px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--acento); transition: transform .2s ease; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 20px; color: var(--texto-2); max-width: 44rem; }

/* El cierre */
.cierre { background: radial-gradient(900px 500px at 100% 0%, rgb(122 59 232 / 40%), transparent 60%), var(--noche); color: var(--noche-texto); padding-block: 80px; }
.cierre .marco { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.cierre h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; font-stretch: 116%; letter-spacing: -0.03em; }
.cierre h2 em { font-style: normal; color: var(--plata-viva); }
.cierre p { color: var(--noche-texto-2); font-size: 1.12rem; max-width: 32em; }
.cierre__texto { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cierre__foto { min-width: 0; }
.cierre__foto img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--r3); }
@media (max-width: 860px) { .cierre .marco { grid-template-columns: minmax(0, 1fr); } }

.pie { background: var(--noche); color: var(--noche-texto-2); border-top: 1px solid rgb(255 255 255 / 8%); padding-block: 28px; font-size: 0.9rem; }
.pie .marco { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.pie a { color: var(--noche-texto-2); }

/* El aviso de la entrada (caducó, OneAccount no contestó) y el de salir. */
.aviso-entrada { align-self: flex-start; padding: 10px 14px; border-radius: var(--r2); font-size: 0.95rem; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 16%); color: var(--noche-texto); }
.aviso-entrada--malo { background: rgb(217 45 69 / 18%); border-color: rgb(255 112 133 / 45%); }
.aviso-entrada b { display: block; }