/* Layout: plantilla de conversión (aquí, «Compara tu presupuesto»). Portada con dos hojas de un presupuesto de Oxyon
     de ejemplo; la respuesta corta; qué miramos; el ejemplo de comparación en dos tablas; las señales de que falta algo; qué
     documentación pedir; cómo lo hacemos; el formulario propio, con su acuse en pantalla; preguntas. Se repite en
     /presupuesto-ventanas, con su propio formulario. */








  /* la portada: dos hojas de un presupuesto de ejemplo (la herramienta de presupuestos de Oxyon con datos ficticios):
     la portada detrás y la hoja de una ventana delante. Sin la hoja de precios: ninguna cifra inventada en la web */
  .presu-ejemplo { position: relative; margin: 28px 0 0; display: grid; }
  .presu-ejemplo .hoja { display: block; height: auto; background: var(--blanco); border: 1px solid var(--greige); box-shadow: 0 30px 60px -34px rgba(14, 17, 22, .38), 0 2px 6px rgba(14, 17, 22, .06); }
  .presu-ejemplo .atras { position: absolute; left: 0; top: 0; width: 62%; transform: rotate(-3.5deg); transform-origin: 0 0; opacity: .96; }
  .presu-ejemplo .delante { position: relative; width: 78%; margin: 13% 0 0 auto; transform: rotate(1.2deg); }
  .presu-ejemplo figcaption { margin-top: 22px; font-size: 14px; color: var(--azul-2); max-width: 46ch; }
  .presu-ejemplo figcaption b { color: var(--tinta); font-weight: 600; }
  @media (max-width: 819px) { .presu-ejemplo { margin-top: 8px; } .presu-ejemplo .delante { width: 82%; margin-right: 2%; } .presu-ejemplo .atras { width: 66%; } }
  .ejemplo-et { display: inline-block; margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); border: 1.5px solid var(--azul); padding: 3px 9px; }
  .ejemplo-et + .tabla-envuelta .tabla-datos { margin-top: 12px; }
  .tabla-datos caption.visible { caption-side: top; text-align: left; font-family: var(--f-disp); font-weight: 700; font-size: 18px; padding: 22px 0 6px; }
  /* el acuse en pantalla, en lugar del formulario, tras enviarlo */
  .acuse { display: grid; gap: 12px; align-content: start; padding: 28px; background: var(--blanco); color: var(--tinta); }
  .acuse .acuse-t { font-family: var(--f-disp); font-size: 28px; margin: 0; }
  .acuse p { margin: 0; color: var(--azul-2); }
  .fila-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 819px) { .fila-dos { grid-template-columns: minmax(0, 1fr); } }
  .bajo-boton { font-size: 13px; color: var(--gris-2); margin: 0; }
  .error-campo { color: var(--tinta); font-size: 14px; font-weight: 700; border-left: 3px solid var(--tinta); padding-left: 10px; }
  /* comparar, la parte de abajo (21/10, Robert: «menos de blog»): las señales como tarjetas con lo que hay que pedir,
     y la declaración de prestaciones como una ficha */
  .sec-cab-2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; }
  .sec-cab-2 .entrada { margin: 0; }
  .senales { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
  .senal { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 22px 20px 20px; background: var(--fondo); border-top: 3px solid var(--tinta); }
  .bloque:not(.claro) .senal { background: var(--blanco); }
  .senal-n { font-family: var(--f-disp); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--azul); }
  .senal-t { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--tinta); }
  .senal-pide { margin: 0; padding-top: 12px; border-top: 1px solid var(--greige); font-size: 14px; line-height: 1.45; color: var(--azul-2); }
  .senal-pide b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); margin-bottom: 3px; }
  .dop { background: var(--blanco); box-shadow: 0 24px 50px -32px rgba(14, 17, 22, .4), 0 0 0 1px rgba(14, 17, 22, .08); }
  .dop-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: var(--tinta); color: var(--blanco); }
  .dop-cab span { font-family: var(--f-disp); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
  .dop-cab small { font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .78); }
  .dop-filas { list-style: none; margin: 0; padding: 4px 22px; }
  .dop-fila { display: grid; grid-template-columns: 28px minmax(0, 11rem) minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--greige); font-size: 15px; line-height: 1.45; }
  .dop-fila:last-child { border-bottom: 0; }
  .dop-fila::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--azul) url("/fotos/icono-ok.svg") center / 20px no-repeat; }
  .dop-fila.ojo::before { background: var(--tinta) url("/fotos/icono-ojo.svg") center / 20px no-repeat; }
  .dop-fila b { color: var(--tinta); }
  .dop-fila span { color: var(--azul-2); }
  .dop .fuente { margin: 0; padding: 12px 22px 16px; border-top: 1px solid var(--greige); background: var(--fondo); }
  @media (max-width: 1100px) { .senales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 760px) {
    .sec-cab-2 { grid-template-columns: minmax(0, 1fr); }
    .dop-fila { grid-template-columns: 28px minmax(0, 1fr); }
    .dop-fila span { grid-column: 2; }
  }
  @media (max-width: 520px) { .senales { grid-template-columns: minmax(0, 1fr); } .senal { grid-template-rows: auto; } }
  /* (28/10) el ejemplo de presupuesto, fuera de la portada: en su bloque, centrado */
  .asi-llega .presu-ejemplo { max-width: 560px; margin: 0 auto; }