/* halbora.com · Tinta y crema (la dirección que escogió Jair el 22/09/2026).
   La estructura es la de la Propuesta D —bloques grandes con esquinas redondas, botones de píldora
   y el chat de WhatsApp de protagonista—; lo que cambió es el color y la letra de los títulos.

   Dos reglas de la marca, que están en output/marca_tinta_y_crema/guia.md:
   1. El verde ya no es color de marca: vive SOLO dentro de los chats dibujados, y para eso están
      las variables --wa-*, que son las de WhatsApp de verdad y no se tocan. Nos separa de la
      competencia, que usa el mismo verde porque es el de WhatsApp.
   2. Un solo acento, el ámbar. Si algo necesita otro color para destacarse, lo que está mal es la
      jerarquía. */

:root {
  --campo: #16242E;       /* los bloques oscuros; la portada va al revés, en crema */
  --campo-claro: #22343F;
  --campo-hondo: #0E1920;
  --azul: #16242E;
  --azul-suave: #2A3A46;
  --verde: #C9902B;       /* lo que antes era verde de acento, ahora ámbar */
  --verde-texto: #8A5A12; /* cifras y enlaces sobre la crema: el ámbar claro no alcanza AA ahí */
  --menta: #F1E9D9;
  --cielo: #EDE6DA;
  --sol: #EFB230;         /* el único acento */
  --sol-hondo: #D99A1C;
  --tinta: #16242E;
  --gris: #3C4A54;
  --linea: #DCD2C0;
  --papel: #F8F3E9;       /* la crema: el fondo de todo */
  --radio: 28px;
  --titulo: "Fraunces", Georgia, serif;
  --cuerpo: "Figtree", "Segoe UI", system-ui, sans-serif;
  /* WhatsApp */
  --wa-cabeza: #008069; --wa-fondo: #efeae2; --wa-entra: #ffffff; --wa-sale: #d9fdd3;
  /* La hora y las notas van un punto más oscuras que en WhatsApp (#667781): a simple vista es el
     mismo gris, pero así el texto chico alcanza el contraste mínimo. */
  --wa-texto: #111b21; --wa-hora: #4f5f68; --wa-icono: #54656f; --wa-boton: #00a884; --wa-visto: #53bdeb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--cuerpo); font-size: 17px; line-height: 1.55; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); letter-spacing: -.02em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 8px; }
.saltar { position: absolute; left: -10000px; }
.saltar:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.marco { width: min(100% - 2 * clamp(16px, 4vw, 40px), 1160px); margin-inline: auto; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 26px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .15s, background .15s; }
.boton:hover { transform: translateY(-1px); }
.boton.sol { background: var(--sol); color: var(--azul); }
.boton.sol:hover { background: var(--sol-hondo); }
.boton.oscuro { background: var(--azul); color: #fff; }
.boton.oscuro:hover { background: var(--azul-suave); }
.boton.contorno { border-color: currentColor; color: inherit; }
.boton.contorno:hover { background: rgba(255,255,255,.12); }
.boton.chico { min-height: 44px; padding: 8px 20px; font-size: 15px; }
.enlace { display: inline-block; margin-top: 22px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- portada ---------- */
/* La portada al revés: crema de fondo y tinta en el texto, en vez del bloque de color saturado que
   usa todo el que vende «por WhatsApp». Es lo que más nos separa de la competencia y lo que hace
   que la página se lea como un informe bien impreso y no como una app de colores. */
.portada { position: relative; color: var(--tinta); }
.portada-fondo { position: absolute; inset: 0; overflow: hidden; background: var(--papel); border-radius: 0 0 48px 48px; }
.bola { position: absolute; border-radius: 50%; }
/* Las bolas del fondo van en cremas, un punto más oscuras que el papel: en la portada clara
   marcan el campo sin volverse manchas. */
.bola-1 { width: 620px; height: 620px; right: -120px; top: 60px; background: #EFE4CE; }
.bola-2 { width: 300px; height: 300px; left: -120px; bottom: -110px; background: #E7DAC0; }
.bola-3 { width: 130px; height: 130px; right: 38%; top: 96px; background: var(--sol); opacity: .95; }
.cabecera { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; padding-block: 22px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulo); font-weight: 700; font-size: 1.3rem; }
.logo img { height: 32px; width: auto; }
.cabecera nav { display: flex; gap: 26px; margin-left: auto; font-weight: 600; font-size: 15.5px; }
.cabecera nav a { text-decoration: none; opacity: .92; }
.cabecera nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.portada-cuerpo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: clamp(24px, 4vw, 56px); align-items: center; padding-top: 28px; }
.portada-texto { padding-bottom: 96px; }
.portada h1 { font-size: clamp(2.1rem, 4.1vw, 3.25rem); font-weight: 700; line-height: 1.1; }
.portada-texto > p { margin-top: 20px; max-width: 33em; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--gris); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Blanco, no el verde claro: sobre el campo verde el texto tenue no alcanzaba el contraste mínimo. */
.confianza { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--tinta); }
.confianza li { display: flex; align-items: center; gap: 8px; }
.confianza li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--sol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230b2338' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* La escena: el teléfono se sale por abajo de la franja de color, y los avisos de los otros productos le llegan a los lados. */
.escena { position: relative; height: 640px; margin-bottom: -76px; }
.telefono { position: absolute; left: 50%; top: 0; width: 318px; margin-left: -159px; padding: 10px; border-radius: 48px; background: #0a1014; box-shadow: 0 0 0 2px #2b353b inset, 0 34px 70px rgba(3, 35, 30, .5), 0 8px 18px rgba(3, 35, 30, .3); }
.pantalla { position: relative; height: 620px; border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; background: var(--wa-fondo); color: var(--wa-texto); font-size: 13.5px; line-height: 1.4; }
.pantalla::before { content: ""; position: absolute; left: 50%; top: 9px; width: 78px; height: 20px; margin-left: -39px; border-radius: 12px; background: #0a1014; z-index: 3; }
.pantalla svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-cabeza { display: flex; align-items: center; gap: 9px; padding: 40px 12px 10px; background: var(--wa-cabeza); color: #fff; }
.wa-foto { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.wa-foto img { width: 18px; height: auto; }
.wa-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.wa-nombre b { font-size: 14.5px; font-weight: 600; }
.wa-estado { position: relative; height: 15px; font-size: 11.5px; color: #d5efe8; }
.wa-estado i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
.wa-estado .escribe { opacity: 0; }
.wa-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background-color: var(--wa-fondo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%238696a0' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14 18h16v12H20l-6 5z'/%3E%3Ccircle cx='86' cy='26' r='7'/%3E%3Cpath d='M82 26h8M86 22v8M52 60l6-10 6 10zM20 84h14M20 90h9M92 78c-6 0-8 5-8 9s3 8 8 8 8-4 8-8'/%3E%3Cpath d='M56 100l4 4 8-9'/%3E%3C/svg%3E"); }
.wa-dia { align-self: center; padding: 3px 11px; border-radius: 8px; background: #fff; color: var(--wa-hora); font-size: 11.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }

/* Las burbujas: las mismas del chat, también fuera del teléfono. */
.globo { position: relative; max-width: 88%; padding: 7px 10px 8px; border-radius: 10px; color: var(--wa-texto); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.globo.entra { align-self: flex-start; background: var(--wa-entra); border-top-left-radius: 0; }
.globo.sale { align-self: flex-end; background: var(--wa-sale); border-top-right-radius: 0; }
.globo::before { content: ""; position: absolute; top: 0; width: 9px; height: 13px; background: inherit; }
.globo.entra::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.globo.sale::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.globo .hora { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; font-size: 10.5px; color: var(--wa-hora); }
.pantalla .globo .hora svg { width: 15px; height: 10px; stroke: var(--wa-visto); stroke-width: 1.6; }
.adjunto { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; margin-bottom: 5px; padding: 7px 9px; border-radius: 8px; background: rgba(11,20,26,.07); font-weight: 600; }
.adjunto small { display: block; font-weight: 400; font-size: 11px; color: var(--wa-hora); }
.adjunto .hoja { width: 30px; height: 38px; border-radius: 3px; background: repeating-linear-gradient(#e3e8eb 0 3px, transparent 3px 7px), #fff; box-shadow: inset 0 0 0 1px rgba(11,20,26,.14); }
.cuentas { margin-top: 7px; display: grid; gap: 3px; }
.cuentas > div { display: flex; justify-content: space-between; gap: 10px; }
.cuentas .f3 { color: var(--wa-hora); }
.cuentas .neto { margin-top: 4px; padding-top: 6px; border-top: 1px solid #dfe5e8; font-weight: 700; font-size: 15px; }
.turno { display: grid; }
.turno > * { grid-area: 1 / 1; }
.tecleando { display: flex; gap: 4px; align-items: center; height: 32px; padding-inline: 13px; opacity: 0; }
.tecleando i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6ad; animation: punto 1.1s infinite ease-in-out; }
.tecleando i:nth-child(2) { animation-delay: .18s; }
.tecleando i:nth-child(3) { animation-delay: .36s; }
.wa-barra { display: flex; align-items: center; gap: 7px; padding: 8px 9px 12px; background: #f0f2f5; }
.wa-campo { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 22px; background: #fff; color: var(--wa-icono); }
.wa-campo span { flex: 1; font-size: 14px; }
.wa-voz { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--wa-boton); color: #fff; display: grid; place-items: center; }

/* El chat se cuenta solo, en un ciclo de 16 segundos: llega la foto, Halbora escribe, responde renglón por renglón. */
.m1 { animation: llega-1 16s infinite; }
.tecleando { animation: teclea 16s infinite; }
.en-linea { animation: en-linea 16s infinite; }
.escribe { animation: escribe 16s infinite; }
.m2 { animation: llega-2 16s infinite; }
.f1 { animation: renglon-1 16s infinite; }
.f2 { animation: renglon-2 16s infinite; }
.f3 { animation: renglon-3 16s infinite; }
.neto { animation: renglon-4 16s infinite; }
@keyframes llega-1 { 0%, 3% { opacity: 0; transform: translateY(10px) scale(.97); } 6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes teclea { 0%, 11% { opacity: 0; } 13%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes en-linea { 0%, 11% { opacity: 1; } 12%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes escribe { 0%, 11% { opacity: 0; } 12%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes llega-2 { 0%, 24% { opacity: 0; transform: translateY(10px) scale(.97); } 27%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes renglon-1 { 0%, 29% { opacity: 0; } 31%, 100% { opacity: 1; } }
@keyframes renglon-2 { 0%, 33% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes renglon-3 { 0%, 37% { opacity: 0; } 39%, 100% { opacity: 1; } }
@keyframes renglon-4 { 0%, 42% { opacity: 0; transform: scale(.96); } 45% { opacity: 1; transform: scale(1.03); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes punto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Los avisos de los otros dos productos. */
.aviso { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; width: 236px; padding: 11px 14px; border-radius: 18px; background: #fff; color: var(--tinta); text-decoration: none; font-size: 13.5px; line-height: 1.3; box-shadow: 0 16px 34px rgba(3, 35, 30, .32); animation: flota 7s ease-in-out infinite; }
.aviso b { display: block; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.aviso-icono { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--menta); color: var(--verde-texto); }
.aviso-icono svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Van por fuera del chat, para no tapar lo que dice: uno junto al hombro del teléfono y el otro sobre el
   espacio vacío de abajo de la conversación. */
.aviso-dian { left: -150px; top: 64px; }
.aviso-caja { right: -24px; top: 470px; animation-delay: -3.5s; }
.aviso-caja .aviso-icono { background: #fff1c9; color: #7a5600; }

/* ---------- lo que se oye ---------- */
.quejas { padding-block: clamp(120px, 12vw, 150px) clamp(56px, 7vw, 88px); }
.quejas h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; }
.bajada { margin-top: 8px; color: var(--gris); font-size: 1.08rem; }
.muro { margin-top: 34px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radio); background-color: var(--wa-fondo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%238696a0' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14 18h16v12H20l-6 5z'/%3E%3Ccircle cx='86' cy='26' r='7'/%3E%3Cpath d='M82 26h8M86 22v8M52 60l6-10 6 10zM20 84h14M20 90h9M92 78c-6 0-8 5-8 9s3 8 8 8 8-4 8-8'/%3E%3Cpath d='M56 100l4 4 8-9'/%3E%3C/svg%3E"); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.muro li { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 8px; }
.muro li:nth-child(even) { margin-top: 26px; }
.muro .globo { max-width: 100%; padding: 13px 18px; font-size: 1.2rem; line-height: 1.35; }
.muro a { display: inline-block; margin-left: 4px; padding: 5px 0; font-size: 14.5px; font-weight: 700; color: var(--verde-texto); text-decoration: none; }
.muro a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- productos: bloques grandes de color ---------- */
.producto { padding-block: 14px; scroll-margin-top: 20px; }
.bloque { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4.5vw, 60px); border-radius: var(--radio); }
.bloque-menta { background: var(--menta); align-items: start; }
.bloque-azul { background: var(--azul); color: #fff; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.bloque-cielo { background: var(--cielo); }
.de-que { font-weight: 700; font-size: 15px; color: var(--verde-texto); }
.bloque-azul .de-que { color: var(--sol); }
.bloque h2 { margin-top: 8px; font-size: clamp(1.55rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.15; }
.bloque-texto > p:not(.de-que):not(.entrar-sistema) { margin-top: 16px; color: var(--gris); }
.lista { margin-top: 20px; display: grid; gap: 12px; }
.lista li { position: relative; padding-left: 32px; }
.lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4'/%3E%3C/svg%3E") center / 18px no-repeat; }
.bloque-azul .lista li { color: #E6E0D4; }
.entrar-sistema { margin-top: 12px; font-size: 15px; color: var(--gris); }
.entrar-sistema a { display: inline-block; padding: 5px 0; }

/* un pedacito de conversación dentro del bloque del Asistente */
.mini-chat { margin-top: 28px; padding: 18px 18px 20px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.4; background-color: var(--wa-fondo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%238696a0' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M14 18h16v12H20l-6 5z'/%3E%3Ccircle cx='86' cy='26' r='7'/%3E%3Cpath d='M82 26h8M86 22v8M52 60l6-10 6 10zM20 84h14M20 90h9M92 78c-6 0-8 5-8 9s3 8 8 8 8-4 8-8'/%3E%3Cpath d='M56 100l4 4 8-9'/%3E%3C/svg%3E"); }
.mini-chat .globo { padding: 9px 13px; }

/* planes */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; padding: 24px 22px; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(11, 35, 56, .08); }
.plan-pro { background: var(--azul); color: #fff; }
.plan h3 { font-size: 1.25rem; font-weight: 700; }
.plan-para { font-size: 15px; color: var(--gris); }
.plan-pro .plan-para { color: #C9C2B4; }
.plan-normal { margin-top: 14px; font-size: 15px; color: var(--gris); }
.plan-normal s { font-weight: 700; text-decoration-thickness: 2px; }
.plan-pro .plan-normal { color: #C9C2B4; }
.cifra { font-family: var(--titulo); font-size: clamp(1.9rem, 2.8vw, 2.3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.cifra small { margin-left: 7px; font-family: var(--cuerpo); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--gris); }
.plan-pro .cifra small { color: #C9C2B4; }
.plan-antes { margin-top: 6px; font-size: 14.5px; color: var(--gris); }
.plan-antes b { color: var(--verde-texto); }
.plan-pro .plan-antes { color: #C9C2B4; }
.plan-pro .plan-antes b { color: var(--sol); }
.plan ul { margin: 16px 0 22px; display: grid; gap: 9px; font-size: 15px; }
.plan li { position: relative; padding-left: 24px; }
.plan li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.plan-pro li::before { border-color: var(--sol); }
.plan .boton { margin-top: auto; }
.nota-precio { grid-column: 1 / -1; font-size: 14.5px; color: var(--gris); }

/* las imágenes de los otros dos productos: una tarjeta del documento y una burbuja que le habla al dueño */
.bloque-imagen { position: relative; padding: 8px 8px 46px; }
.globo-flotante { position: absolute; right: 0; bottom: 0; max-width: 270px; padding: 11px 15px; font-size: 15px; box-shadow: 0 14px 30px rgba(3, 20, 35, .28); }
.bloque-cielo .globo-flotante { right: auto; left: 0; }
.tarjeta-doc, .tarjeta-reservas { max-width: 380px; margin-inline: auto; padding: 22px; border-radius: 22px; background: #fff; color: var(--tinta); box-shadow: 0 22px 46px rgba(3, 20, 35, .3); }
.tarjeta-reservas { box-shadow: 0 18px 40px rgba(11, 35, 56, .14); }
.doc-cabeza, .res-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--titulo); }
.doc-cabeza span, .res-cabeza span { font-family: var(--cuerpo); font-size: 14px; color: var(--gris); }
.doc-lineas { margin-top: 18px; display: grid; gap: 11px; }
.doc-lineas i { height: 9px; border-radius: 5px; background: #e6edf2; }
.doc-lineas i:nth-child(2) { width: 72%; }
.doc-lineas i:nth-child(4) { width: 54%; }
.doc-total { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--azul); display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.doc-total b { font-family: var(--titulo); font-size: 1.3rem; }
.doc-sello { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--menta); color: var(--verde-texto); font-weight: 700; font-size: 15px; }
.doc-sello svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--verde); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.res-grilla { margin-top: 18px; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 30px; gap: 10px 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), #e6edf2 calc(100% / 7 - 1px) calc(100% / 7)); }
.res-grilla i { margin: 5px 3px; border-radius: 999px; background: var(--verde); }
.res-grilla i.suave { background: var(--sol); }

/* ---------- cierre y pie ---------- */
.cierre { padding-block: 14px clamp(40px, 6vw, 72px); }
.bloque-campo { background: var(--campo); color: #fff; grid-template-columns: minmax(0, 1fr) auto; }
.bloque-campo h2 { margin-top: 0; }
.bloque-campo p { margin-top: 8px; color: #E6E0D4; }
.bloque-campo .acciones { margin-top: 0; }
.pie { background: var(--azul); color: #c6d3de; font-size: 15px; }
.pie .marco { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 28px; }
.pie nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pie a { display: inline-block; padding: 5px 0; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .pie-legal { padding-block: 0 26px; font-size: 13.5px; color: #a9b9c7; }
.pie .pie-legal p { margin: 0; }
.pie .pie-legal a { padding: 0; }

/* ---------- celular y tableta ---------- */
/* En pantallas medianas el aviso de la DIAN no cabe junto al título: baja al pie del teléfono. */
@media (max-width: 1200px) {
  .aviso-dian { left: -40px; top: 556px; }
  .aviso-caja { right: -8px; top: 468px; }
}
@media (max-width: 1080px) {
  .portada-cuerpo { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 900px) {
  .cabecera nav { display: none; }
  /* Sin el menú de secciones, «Entrar» se va al borde derecho: el botón y también el desplegable. */
  .cabecera > .boton, .cabecera > .entrada { margin-left: auto; }
  .portada-cuerpo { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .portada-texto { padding-bottom: 8px; }
  .escena { width: min(100%, 400px); margin-inline: auto; margin-top: 28px; }
  .aviso { width: 212px; }
  .aviso-dian { left: -2px; top: 562px; }
  .aviso-caja { right: -2px; top: 470px; }
  /* Más abajo, para que no quede detrás de la lista de «Sin tarjeta…»: ahí el verde claro
     le quitaba contraste al texto. */
  .bola-1 { width: 460px; height: 460px; right: -200px; top: 620px; }
  .bola-3 { right: 4px; top: auto; bottom: 512px; width: 96px; height: 96px; }
  .bloque, .bloque-azul, .bloque-campo { grid-template-columns: minmax(0, 1fr); }
  .bloque-azul .bloque-imagen { order: 2; }
  .muro { grid-template-columns: minmax(0, 1fr); }
  .muro li:nth-child(even) { margin-top: 0; align-items: flex-end; }
  .muro li:nth-child(even) .globo { align-self: flex-end; }
}
@media (max-width: 560px) {
  .planes { grid-template-columns: minmax(0, 1fr); }
  .portada-fondo { border-radius: 0 0 32px 32px; }
  .acciones .boton { flex: 1 1 auto; }
  .aviso { width: 196px; padding: 9px 11px; font-size: 12.5px; }
}

/* Sin movimiento (o para las capturas): el chat completo y quieto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .telefono *, .aviso { animation: none !important; }
  .tecleando { display: none; }
}
.quieto .telefono *, .quieto .aviso { animation: none !important; }
.quieto .tecleando { display: none; }

/* ---------------------------------------------------------------------------
   El menú de «Entrar»: cada producto tiene su propia puerta.
   Va con <details>, así que abre y cierra sin JavaScript; el script solo lo
   cierra al tocar por fuera o con Escape.
   --------------------------------------------------------------------------- */
.entrada { position: relative; }
.entrada > summary { list-style: none; cursor: pointer; user-select: none; }
.entrada > summary::-webkit-details-marker { display: none; }
.entrada > summary::after { content: ""; width: 7px; height: 7px; margin-left: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.entrada[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.entrada > summary:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
.entrada-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; width: min(320px, calc(100vw - 32px)); padding: 10px; border-radius: 18px; background: var(--papel); color: var(--tinta); box-shadow: 0 18px 44px rgba(11, 35, 56, .26); }
.entrada-titulo { margin: 6px 10px 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--verde-texto); }
.entrada-menu > a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; }
.entrada-menu > a:hover, .entrada-menu > a:focus-visible { background: var(--menta); }
.entrada-menu b { display: block; font-size: 15.5px; font-weight: 700; }
.entrada-menu a > span:not(.pronto) { display: block; font-size: 13.5px; color: var(--gris); }
.entrada-pie { margin: 8px 12px 6px; padding-top: 10px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--gris); }
.entrada-pie a { color: var(--verde-texto); font-weight: 700; text-decoration: none; }
.entrada-pie a:hover { text-decoration: underline; }

/* «Pronto» / «En prueba»: la etiqueta de lo que todavía no está terminado. Va en el menú
   de arriba, en el de Entrar y en el título de la sección, así que se lee igual sobre
   verde, sobre blanco y sobre azul. */
.pronto { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sol); color: var(--azul); font-family: var(--cuerpo); font-size: 11.5px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.cabecera nav a:hover .pronto { text-decoration: none; }