/* Layout: guía «Tipos de ventanas» (22/10; lote 9 del planificador: «tipos de ventanas», 5.000 al mes). Es la puerta a las
     seis páginas de apertura: cada tipo, con su ventana real que abre y su enlace; cómo elegir según el hueco; la tabla con
     los datos de las fichas (los mismos de las páginas de apertura, comprobados el 18/10); errores; preguntas; el final
     común. La monta tipos_web.py (foto de fondo en la cabecera y montar2). */








  /* las seis tarjetas: se enseñan por orden, como «Cómo funciona» en las aperturas */
  #tipos .apertura { position: relative; transition: background .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
  #tipos .apertura::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--azul); transform: scaleX(0); transform-origin: left; }
  #tipos .apertura.en-demo { background: var(--blanco); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(14, 17, 22, .45); }
  #tipos .apertura.en-demo::before { animation: demo-barra var(--dur, 3600ms) linear forwards; }
  #tipos .apertura.en-demo h3 { color: var(--azul); }
  #tipos .apertura .encaja { color: var(--tinta); }
  #tipos .apertura .encaja b { font-weight: 600; }
  #tipos .apertura .ir { margin-top: 6px; font-weight: 600; color: var(--azul); text-decoration: none; justify-self: start; }
  #tipos .apertura .ir:hover, #tipos .apertura .ir:focus-visible { text-decoration: underline; }
  /* el dibujo en una caja de alto fijo: las ventanas no miden lo mismo (la balconera es alta, las correderas, bajas) y así
     los títulos de cada fila quedan a la misma altura */
  #tipos .tipo-dib { height: 270px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 18px; }
  #tipos .tipo-dib .vr { margin: 0 auto; }
  @media (max-width: 819px) {
    #tipos .apertura > :not(.tipo-dib) { grid-column: 2; }
    #tipos .tipo-dib { height: auto; margin: 0; grid-row: 1 / span 4; align-self: start; }
  }
  .elegir-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }
  @media (max-width: 819px) { .elegir-lista { grid-template-columns: minmax(0, 1fr); } }