/* Landing de lista de espera. Tokens según docs/DIRECCION-ARTISTICA.md (v3; v4 de la página: el bot de WhatsApp) */
:root {
  color-scheme: light;
  --papel: #fbfbf8;
  --grafito: #1f2328;
  --grafito-suave: #50565f;
  --carbonico: #2b3da6;
  --carbonico-oscuro: #1f2e85;
  --carbonico-tinte: #eef1fa;
  --renglon: #ccd5ec;
  --aceptado: #1d7a4c;
  --aceptado-tinte: #d9f2e3;
  --chat: #efeae2;
  --carbonico-noche: #18226b;
  --sobre-azul: #dce3ff;
  --verde-si: #4be08f;
  --verde-tinta: #13804a;
  --celeste: #e6ecff;
  --pdf-rojo: #c93a2e; /* ícono del adjunto PDF en el chat */

  --fuente: "Archivo", system-ui, -apple-system, sans-serif;
  --t-chico: 0.9375rem;   /* 15 */
  --t-texto: 1.0625rem;   /* 17 */
  --t-medio: 1.3125rem;   /* 21 */
  --t-grande: 1.75rem;    /* 28 */
  --t-titular: 2.125rem;  /* 34 */

  --margen: 1rem;
  --radio: 6px;
}

@media (min-width: 64rem) {
  :root {
    --t-texto: 1.125rem;  /* 18 */
    --t-medio: 1.375rem;  /* 22 */
    --t-grande: 2rem;     /* 32 */
    --t-titular: 3.25rem; /* 52 */
    --margen: 2.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-texto);
  line-height: 1.5;
  color: var(--grafito);
  background: var(--papel);
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

a {
  color: var(--carbonico);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--carbonico);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Marca: la cabecera y el hero comparten el azul de la marca */
.marca {
  background: var(--carbonico);
  color: #fff;
}

.marca__interior {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 1rem var(--margen) 0.5rem;
}

.marca__rubro {
  font-size: var(--t-chico);
  color: var(--sobre-azul);
}

/* Logo: burbuja de chat con el tilde del «sí» + el nombre */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.logo__marca {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}

.logo__burbuja {
  fill: var(--verde-si);
}

.logo__tilde {
  fill: none;
  stroke: var(--grafito);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__nombre {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Hero: texto y formulario, después la demo; en escritorio, lado a lado */
.hero {
  background: var(--carbonico);
  color: #fff;
}

.hero :focus-visible {
  outline-color: #fff;
}

.hero .formulario :focus-visible {
  outline-color: var(--carbonico);
}

.hero__interior {
  display: grid;
  gap: 2.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.5rem var(--margen) 3rem;
}

@media (min-width: 64rem) {
  .hero__interior {
    grid-template-columns: 6fr 5fr;
    column-gap: 4rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 5rem;
  }
}

h1 {
  font-size: var(--t-titular);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 18ch;
  text-wrap: balance;
}

.bajada {
  margin-top: 1rem;
  max-width: 34rem;
  color: var(--sobre-azul);
}

/* Formulario */
.formulario {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  max-width: 34rem;
  padding: 1.25rem;
  border-radius: 10px;
  background: #fff;
  color: var(--grafito);
}

.formulario__titulo {
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.2;
}

.formulario__fila {
  display: grid;
  gap: 1rem;
}

@media (min-width: 30rem) {
  .formulario__fila {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

.campo {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.campo label {
  font-weight: 600;
  font-size: var(--t-chico);
}

input[type="email"],
select {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--grafito-suave);
  border-radius: var(--radio);
  background: #fff;
  color: var(--grafito);
  font: inherit;
}

input[type="email"]:focus-visible,
select:focus-visible {
  border-color: var(--carbonico);
}

.formulario .boton {
  width: 100%;
}

.formulario__nota {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

/* Botones */
.boton {
  min-height: 48px;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--carbonico);
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.boton--principal {
  background: var(--carbonico);
  color: #fff;
}

.boton--principal:hover {
  background: var(--carbonico-oscuro);
  border-color: var(--carbonico-oscuro);
}

.boton--secundario {
  background: transparent;
  color: var(--carbonico);
}

.boton--secundario:hover {
  background: var(--carbonico-tinte);
}

.enlace {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--carbonico);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Demo: selector de pasos + teléfono */
.demo {
  position: relative;
  max-width: 24rem;
  width: 100%;
  margin: 0 auto;
}

/* Pegatina de marca sobre el teléfono */
.pegatina {
  position: absolute;
  top: 2.75rem;
  right: -0.5rem;
  z-index: 1;
  padding: 0.375rem 0.875rem;
  border: 3px solid var(--grafito);
  border-radius: 10px;
  background: var(--verde-si);
  color: var(--grafito);
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 125%;
  transform: rotate(8deg);
  pointer-events: none;
}

@media (min-width: 64rem) {
  .demo {
    position: sticky;
    top: 1.5rem;
  }
}

.demo__pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem;
  border-radius: var(--radio);
  background: #fff;
}

.demo__pasos button {
  min-height: 44px;
  padding: 0.25rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--grafito);
  font: inherit;
  font-size: var(--t-chico);
  font-weight: 600;
  cursor: pointer;
}

.demo__pasos button[aria-selected="true"] {
  background: var(--carbonico-noche);
  color: #fff;
}

.demo__nota {
  margin-top: 0.75rem;
  font-size: var(--t-chico);
  color: var(--sobre-azul);
}

.telefono {
  border: 4px solid var(--grafito);
  border-radius: 28px;
  background: var(--papel);
  color: var(--grafito);
  overflow: hidden;
  box-shadow: 0 6px 0 var(--carbonico-noche);
}

.paso {
  min-height: 30rem;
}

/* Sin JS se ven los tres pasos apilados; con JS, uno por vez */
.paso + .paso {
  border-top: 3px solid var(--grafito);
}

.js .paso + .paso {
  border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .paso:not([hidden]) {
    animation: aparece 150ms ease-out;
  }
  @keyframes aparece {
    from { opacity: 0; }
  }
}

.telefono__barra {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--renglon);
  font-size: var(--t-chico);
  font-weight: 700;
}

.telefono__barra--chat span {
  font-weight: 400;
  color: var(--grafito-suave);
}

/* Paso 1: la respuesta de Dale en el chat */
.burbuja--suya {
  display: grid;
  gap: 0.5rem;
}

.respuesta {
  list-style: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.respuesta li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--renglon);
}

.respuesta li span:last-child {
  white-space: nowrap;
}

.respuesta .respuesta__total {
  border-bottom: 0;
  font-weight: 700;
}

.burbuja__link {
  color: var(--carbonico);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  word-break: break-all;
}

.adjunto {
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 0.625rem;
}

.adjunto__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.75rem;
  border-radius: 4px;
  background: var(--pdf-rojo);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.adjunto__detalle {
  display: block;
  font-size: 0.8125rem;
  color: var(--grafito-suave);
}

/* Paso 2: chat */
.chat {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: 26.5rem;
  padding: 1rem 0.75rem;
  background: var(--chat);
  font-size: var(--t-chico);
}

.burbuja {
  max-width: 85%;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgb(31 35 40 / 0.12);
}

.burbuja--suya {
  justify-self: start;
  background: #fff;
}

.burbuja--mia {
  justify-self: end;
  display: grid;
  gap: 0.5rem;
  background: var(--aceptado-tinte);
}

.burbuja__hora {
  display: block;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--grafito-suave);
}

.tarjeta-link {
  display: grid;
  padding: 0.625rem 0.75rem;
  border-left: 4px solid var(--carbonico);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.75);
  color: var(--grafito);
  text-decoration: none;
}

.tarjeta-link__titulo {
  font-weight: 700;
  color: var(--carbonico);
}

.tarjeta-link__url {
  font-size: 0.8125rem;
  color: var(--grafito-suave);
}

.chat__nota {
  justify-self: center;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radio);
  background: rgb(255 255 255 / 0.8);
  font-size: 0.8125rem;
  color: var(--grafito-suave);
}

/* Sello «¡Dale!» que cae sobre la hoja al aceptar */
.sello {
  position: absolute;
  top: 3.25rem;
  right: 0.75rem;
  display: grid;
  justify-items: center;
  padding: 0.25rem 0.75rem;
  border: 3px solid var(--verde-tinta);
  border-radius: 8px;
  outline: 1px solid var(--verde-tinta);
  outline-offset: 2px;
  background: rgb(255 255 255 / 0.9);
  color: var(--verde-tinta);
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.1;
  transform: rotate(-10deg);
}

.sello small {
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .sello:not([hidden]) {
    animation: sellar 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
  @keyframes sellar {
    from { opacity: 0; transform: rotate(-10deg) scale(1.6); }
  }
}

/* Paso 3: la hoja del cliente (talonario) */
.hoja {
  position: relative;
  margin: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: #fff;
  box-shadow: 0 1px 0 #cfd3da, 0 2px 4px rgb(31 35 40 / 0.14);
}

.hoja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: radial-gradient(circle at 7px 0, var(--papel) 3.5px, transparent 4px) 0 0 / 14px 10px repeat-x;
}

.hoja__cabecera {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--carbonico);
}

.hoja__emisor {
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--grafito-suave);
}

.hoja__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--t-medio);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--carbonico);
}

.hoja__numero {
  font-size: var(--t-chico);
  font-weight: 600;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}

.hoja__cliente {
  margin-top: 0.25rem;
  font-weight: 600;
}

.hoja__total {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0 0.25rem;
  font-size: var(--t-medio);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hoja__validez,
.hoja__estado {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.hoja__acciones {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.hoja__estado {
  margin-top: 0.75rem;
}

.hoja[data-estado="aceptado"] .hoja__cabecera {
  border-bottom-color: var(--aceptado);
}

.hoja[data-estado="aceptado"] .hoja__estado {
  color: var(--aceptado);
  font-weight: 700;
  font-size: var(--t-texto);
}

.hoja[data-estado="cambios"] .hoja__estado {
  color: var(--carbonico);
  font-weight: 700;
  font-size: var(--t-texto);
}

.notificacion {
  margin: 0 1rem 1rem;
}

.notificacion:empty {
  display: none;
}

.notificacion__caja {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  background: var(--grafito);
  color: var(--papel);
  font-size: var(--t-chico);
}

.notificacion__caja strong {
  display: block;
}

.notificacion__otra {
  margin-top: 0.25rem;
  font-size: var(--t-chico);
}

@media (prefers-reduced-motion: no-preference) {
  .notificacion__caja {
    animation: entra 180ms ease-out;
  }
  @keyframes entra {
    from { opacity: 0; transform: translateY(-6px); }
  }
}

/* Secciones de lectura */
.seccion {
  max-width: 76rem;
  margin: 0 auto;
  padding: 3rem var(--margen);
  border-top: 1px solid var(--renglon);
}

.seccion > * {
  max-width: 44rem;
}

.seccion h2 {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
}

.seccion__bajada {
  margin-top: 0.75rem;
}

.seccion__nota {
  margin-top: 1rem;
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

/* Banda de oficios: el verde del «sí» a todo el ancho */
.banda-oficios {
  background: var(--verde-si);
  color: var(--grafito);
}

.banda-oficios p {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem var(--margen);
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
  text-wrap: balance;
}

.seccion--celeste {
  background: var(--celeste);
  box-shadow: 0 0 0 100vmax var(--celeste);
  clip-path: inset(0 -100vmax);
  border-top: 0;
}

/* Lista con la burbuja de la marca como viñeta */
.lista {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.lista li {
  position: relative;
  padding-left: 2.5rem;
}

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.75rem;
  height: 1.75rem;
  background: url("../favicon.svg") center / contain no-repeat;
}

/* Todo se hace escribiendo: un ejemplo de chat por función */
.seccion > .funciones {
  max-width: none;
}

.funciones {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .funciones {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
  }
}

.funcion h3 {
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.2;
}

.mini-chat {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.875rem 0.75rem;
  border-radius: 10px;
  background: var(--chat);
  font-size: var(--t-chico);
}

.mini-chat .burbuja--mia {
  display: block;
}

.funcion__nota {
  margin-top: 0.5rem;
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

/* Un presupuesto que se ve profesional: texto y una muestra del PDF (decorativa) */
.seccion--pdf {
  display: grid;
  gap: 2rem;
}

.seccion--pdf > * {
  max-width: none;
}

@media (min-width: 48rem) {
  .seccion--pdf {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }
}

.pdf-muestra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 26rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.pdf-muestra__hoja {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 #cfd3da, 0 2px 4px rgb(31 35 40 / 0.14);
}

.pdf-muestra__portada {
  transform: rotate(-3deg);
}

.pdf-muestra__banda {
  min-height: 38%;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--verde-tinta);
  color: #fff;
  font-weight: 800;
}

.pdf-muestra__portada > p:not(.pdf-muestra__banda) {
  padding: 0 0.75rem;
}

.pdf-muestra__titulo {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--verde-tinta);
}

.pdf-muestra__total {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 800;
}

.pdf-muestra__detalle {
  padding: 0.75rem;
}

.pdf-muestra__detalle p {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.pdf-muestra__rubro {
  margin-top: 0.375rem;
  font-weight: 800;
  color: var(--verde-tinta);
}

.pdf-muestra__suma {
  margin-top: 0.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--grafito);
  font-weight: 800;
}

/* Cómo empezás: es una secuencia, por eso va numerada */
.pasos-inicio {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos-inicio li {
  position: relative;
  padding-left: 3rem;
  counter-increment: paso;
}

.pasos-inicio li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.125rem;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border: 3px solid var(--grafito);
  border-radius: 50%;
  background: var(--verde-si);
  font-weight: 800;
}

/* Precios */
.precios {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 40rem) {
  .precios {
    grid-template-columns: 1fr 1fr;
  }
}

.precio {
  padding: 1.25rem;
  border: 2px solid var(--renglon);
  border-radius: var(--radio);
  background: #fff;
}

.precio--destacado {
  border-color: var(--carbonico);
  background: var(--carbonico);
  color: #fff;
}

.precio--destacado .precio__detalle {
  color: var(--sobre-azul);
}

.precio h3 {
  font-size: var(--t-texto);
  font-weight: 700;
}

.precio__monto {
  margin-top: 0.25rem;
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}

.precio__detalle {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

/* Preguntas */
.preguntas {
  margin-top: 1rem;
}

.preguntas details {
  border-bottom: 1px solid var(--renglon);
}

.preguntas summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.5rem 0;
  font-weight: 600;
  cursor: pointer;
}

.preguntas details p {
  padding-bottom: 1rem;
}

/* Pie */
.pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 2.5rem max(var(--margen), (100% - 76rem) / 2) 3rem;
  background: var(--carbonico-noche);
  color: #c7d0f5;
  font-size: var(--t-chico);
}

.pie .logo {
  color: #fff;
}

.pie a {
  color: #fff;
}

.pie :focus-visible {
  outline-color: #fff;
}

/* Logo como enlace (páginas internas) */
.logo--enlace {
  color: inherit;
  text-decoration: none;
}

.marca :focus-visible {
  outline-color: #fff;
}

/* Página de privacidad */
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem var(--margen) 4rem;
}

.legal h1 {
  font-size: var(--t-grande);
}

.legal h2 {
  margin-top: 2rem;
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
}

.legal p,
.legal ul {
  margin-top: 0.75rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal__fecha {
  color: var(--grafito-suave);
  font-size: var(--t-chico);
}

.legal__volver {
  margin-top: 2.5rem !important;
}

/* Página de gracias: todo en el azul de la marca */
.cuerpo-gracias {
  min-height: 100vh;
  background: var(--carbonico);
  color: #fff;
}

.gracias {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem var(--margen) 4rem;
}

.gracias p {
  color: var(--sobre-azul);
}

.gracias :focus-visible {
  outline-color: #fff;
}

.sello--gracias {
  position: static;
  margin: 1rem 0 0.75rem 0.75rem;
  border-color: var(--verde-si);
  outline-color: var(--verde-si);
  background: transparent;
  color: var(--verde-si);
  font-size: var(--t-grande);
}

.boton--claro {
  display: inline-flex;
  align-items: center;
  border-color: #fff;
  background: #fff;
  color: var(--carbonico);
  text-decoration: none;
}