/* Página principal de aires acondicionados (categoria/aires-acondicionados.html, herramientas/generar-aires.mjs),
   10-11-2026. Usa los componentes .qnd-* de css/que-nos-diferencia.css (portada, botones, rótulos, cierre) y aquí
   solo lo suyo, bajo .qaa. Montserrat 400/600/700 como el resto del sitio; verde Gtronic como principal; las
   tarjetas sin borde de color arriba (regla del usuario). */

/* El h1 es un h1.listado-titulo (para que schema.js y seo-paginas.mjs lo traten como listado): correcciones.css lo
   centra y lo achica en los listados; aquí manda la portada */
.qaa .qnd-hero h1.listado-titulo {
   margin: 0;
   padding: 0;
   font-size: clamp(34px, 4.4vw, 52px);
   font-weight: 700;
   line-height: 1.08;
   letter-spacing: -0.02em;
   text-align: left;
   text-transform: none;
   color: var(--qnd-tinta);
}

/* las migas que pone schema.js delante del h1: alineadas a la izquierda, como el h1 */
.qaa .qnd-hero .migas {
   justify-content: flex-start;
   text-align: left;
   margin: 0 0 18px;
}

.qaa .qnd-hero .migas ol {
   justify-content: flex-start;
}

.qaa .qnd-hero {
   padding-bottom: 72px;
}

/* Las cifras de la portada (Miller: tres datos, de un vistazo) */
.qaa-datos {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0 0 30px;
   padding: 0;
   list-style: none;
}

.qaa-datos li {
   display: flex;
   align-items: baseline;
   gap: 6px;
   padding: 10px 16px;
   border: 1px solid var(--qnd-borde);
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.8);
   font-size: 14px;
   color: var(--qnd-texto);
}

.qaa-datos strong {
   font-size: 18px;
   font-weight: 700;
   color: var(--qnd-verde-oscuro);
}

/* ---------- Tipos ---------- */
.qaa-tipos {
   padding-top: 72px;
   scroll-margin-top: 70px; /* el botón «Elegir mi tipo de aire» salta aquí; la cabecera fija mide ~74 px */
}

.qaa-tipos-rejilla {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin: 0;
   padding: 0;
   list-style: none;
}

/* Fitts: toda la tarjeta es el enlace (el <a> del título se estira sobre ella); las series quedan por encima */
.qaa-tipo {
   position: relative;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--qnd-borde);
   border-radius: 18px;
   background: #ffffff;
   box-shadow: 0 16px 36px -26px rgba(18, 52, 77, 0.35);
   overflow: hidden;
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.qaa-tipo:hover,
.qaa-tipo:focus-within {
   transform: translateY(-4px);
   border-color: #cfe9cf;
   box-shadow: 0 26px 46px -26px rgba(18, 52, 77, 0.42);
}

.qaa-tipo > img {
   width: 100%;
   aspect-ratio: 1 / 0.8;
   object-fit: contain;
   padding: 18px;
   background: linear-gradient(180deg, var(--qnd-frio) 0%, #ffffff 100%);
}

.qaa-tipo-texto {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 8px;
   padding: 18px 20px 20px;
}

.qaa .qaa-tipo h3.product-title {
   margin: 0;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.3;
   text-align: left;
}

.qaa-tipo h3 a {
   color: var(--qnd-tinta);
   text-decoration: none;
}

.qaa-tipo:hover h3 a,
.qaa-tipo h3 a:hover,
.qaa-tipo h3 a:focus {
   color: var(--qnd-verde-oscuro); /* el a:hover global lo ponía celeste */
   text-decoration: none;
}

.qaa-tipo h3 a::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
}

.qaa-tipo h3 a:focus-visible {
   outline: none;
}

.qaa-tipo:focus-within {
   outline: 3px solid var(--qnd-celeste);
   outline-offset: 3px;
}

.qaa-tipo-dato {
   font-size: 13px;
   font-weight: 600;
   color: var(--qnd-verde-oscuro);
}

.qaa-tipo-texto p {
   font-size: 14px;
   line-height: 1.5;
   color: var(--qnd-texto);
}

.qaa-series {
   position: relative;
   z-index: 2;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.qaa-series a {
   padding: 5px 10px;
   border-radius: 999px;
   background: var(--qnd-verde-claro);
   color: var(--qnd-verde-oscuro);
   font-size: 12px;
   font-weight: 600;
   text-decoration: none;
}

.qaa-series a:hover,
.qaa-series a:focus-visible {
   background: var(--qnd-verde);
   color: #ffffff;
}

/* La acción de la tarjeta: una píldora a todo el ancho, pegada abajo (margin-top: auto), con cuántos modelos hay.
   Antes era texto suelto y en móvil quedaba flotando bajo un hueco (la tarjeta del split, más alta, estira la fila) */
.qaa-tipo-ir {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 44px;
   margin-top: auto;
   padding: 10px 14px;
   border-radius: 999px;
   background: var(--qnd-verde-claro);
   color: var(--qnd-verde-oscuro);
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
   text-align: center;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.qaa-tipo-texto > p:last-of-type {
   margin-bottom: 6px;
}

.qaa-tipo-ir .fa {
   transition: transform 0.2s ease;
}

.qaa-tipo:hover .qaa-tipo-ir,
.qaa-tipo:focus-within .qaa-tipo-ir {
   background: var(--qnd-verde);
   color: #ffffff;
}

.qaa-tipo:hover .qaa-tipo-ir .fa {
   transform: translateX(4px);
}

/* ---------- Comparativa ---------- */
.qaa-comparar {
   background: var(--qnd-frio);
}

.qaa-tabla-caja {
   border: 1px solid var(--qnd-borde);
   border-radius: 18px;
   background: #ffffff;
   box-shadow: 0 16px 36px -28px rgba(18, 52, 77, 0.35);
   overflow-x: auto;
}

.qaa-tabla {
   width: 100%;
   min-width: 640px;
   border-collapse: collapse;
   font-size: 15px;
}

.qaa-tabla th,
.qaa-tabla td {
   padding: 16px 20px;
   border-bottom: 1px solid var(--qnd-borde);
   text-align: left;
   vertical-align: top;
   color: var(--qnd-texto);
}

.qaa-tabla thead th {
   background: #f7fafb;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--qnd-tinta);
}

.qaa-tabla tbody tr:last-child th,
.qaa-tabla tbody tr:last-child td {
   border-bottom: 0;
}

.qaa-tabla tbody th a {
   color: var(--qnd-verde-oscuro);
   font-weight: 700;
   text-decoration: none;
}

.qaa-tabla tbody th a:hover {
   text-decoration: underline;
}

.qaa-tabla td:nth-child(2),
.qaa-tabla td:nth-child(3) {
   white-space: nowrap;
   font-weight: 600;
   color: var(--qnd-tinta);
}

/* ---------- Tecnología ---------- */
.qaa-tec-rejilla {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.qaa-tec {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--qnd-borde);
   border-radius: 18px;
   background: #ffffff;
   box-shadow: 0 16px 36px -28px rgba(18, 52, 77, 0.35);
   overflow: hidden;
}

.qaa-tec img {
   width: 100%;
   aspect-ratio: 960 / 360;
   object-fit: cover;
}

.qaa-tec-texto {
   padding: 18px 20px 22px;
}

.qaa-tec-tipo {
   display: inline-block;
   margin-bottom: 8px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--qnd-verde-oscuro);
}

.qaa-tec h3 {
   margin-bottom: 6px;
   font-size: 17px;
   font-weight: 700;
   line-height: 1.3;
}

.qaa-tec p {
   font-size: 14.5px;
   line-height: 1.55;
   color: var(--qnd-texto);
}

/* ---------- Preguntas frecuentes ---------- */
.qaa-preguntas {
   background: var(--qnd-frio);
}

.qaa-preguntas-rejilla {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   align-items: start;
   gap: 48px;
}

.qaa-preguntas-nota {
   margin-top: 16px;
   font-size: 15px;
   color: var(--qnd-texto);
}

.qaa-preguntas-nota a,
.qaa-pregunta p a {
   color: var(--qnd-verde-oscuro);
   font-weight: 600;
}

.qaa-acordeon {
   display: grid;
   gap: 12px;
}

.qaa-pregunta {
   border: 1px solid var(--qnd-borde);
   border-radius: 16px;
   background: #ffffff;
}

.qaa-pregunta summary {
   position: relative;
   padding: 18px 56px 18px 22px;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--qnd-tinta);
   cursor: pointer;
   list-style: none;
}

.qaa-pregunta summary::-webkit-details-marker {
   display: none;
}

.qaa-pregunta summary::after {
   content: "+";
   position: absolute;
   top: 50%;
   right: 20px;
   display: grid;
   place-items: center;
   width: 28px;
   height: 28px;
   margin-top: -14px;
   border-radius: 50%;
   background: var(--qnd-verde-claro);
   color: var(--qnd-verde-oscuro);
   font-size: 20px;
   font-weight: 600;
   line-height: 1;
}

.qaa-pregunta[open] summary::after {
   content: "–";
}

.qaa-pregunta summary:focus-visible {
   outline: 3px solid var(--qnd-celeste);
   outline-offset: 2px;
   border-radius: 16px;
}

.qaa-pregunta p {
   padding: 0 22px 20px;
   font-size: 15px;
   line-height: 1.6;
   color: var(--qnd-texto);
}

/* ---------- Tableta ---------- */
@media (max-width: 1100px) {
   .qaa-tipos-rejilla {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 992px) {
   .qaa-tipos-rejilla,
   .qaa-tec-rejilla {
      grid-template-columns: repeat(2, 1fr);
   }

   .qaa-preguntas-rejilla {
      grid-template-columns: 1fr;
      gap: 28px;
   }
}

/* ---------- Móvil ---------- */
@media (max-width: 576px) {
   .qaa-tipos-rejilla {
      gap: 12px;
   }

   /* El split (el primero y el más buscado) ocupa las dos columnas, con la foto a la izquierda: sus series ya no
      alargan la fila y las demás tarjetas quedan parejas, sin huecos */
   /* (y la última, que con 8 tarjetas quedaba sola en su fila, igual) */
   .qaa-tipo:first-child,
   .qaa-tipo:last-child {
      grid-column: 1 / -1;
      flex-direction: row;
   }

   .qaa-tipo:first-child > img,
   .qaa-tipo:last-child > img {
      width: 42%;
      aspect-ratio: auto;
      object-fit: contain;
   }

   .qaa-tipo:first-child .qaa-tipo-texto,
   .qaa-tipo:last-child .qaa-tipo-texto {
      flex: 1;
   }

   .qaa-tipo-ir {
      gap: 6px;
      min-height: 40px;
      padding: 9px 8px;
      font-size: 12.5px;
      white-space: nowrap; /* «Ver 11 modelos» en una línea, también en las tarjetas estrechas */
   }

   .qaa-tipo > img {
      padding: 10px;
   }

   .qaa-tipo-texto {
      gap: 6px;
      padding: 14px 14px 16px;
   }

   .qaa .qaa-tipo h3.product-title {
      font-size: 15.5px;
   }

   .qaa-tipo-texto > p:not(.qaa-tipo-dato):not(.qaa-series) {
      display: none; /* en móvil, el nombre y la cifra bastan: la descripción va en la comparativa */
   }

   .qaa-series a {
      font-size: 11px;
      padding: 4px 8px;
   }

   .qaa-tec-rejilla {
      grid-template-columns: 1fr;
   }

   .qaa-pregunta summary {
      padding: 16px 52px 16px 18px;
      font-size: 15px;
   }

   .qaa-pregunta p {
      padding: 0 18px 18px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .qaa-tipo,
   .qaa-tipo-ir .fa {
      transition: none;
   }

   .qaa-tipo:hover,
   .qaa-tipo:focus-within {
      transform: none;
   }
}

/* Marca de agua en las preguntas frecuentes (ver «Marca de agua» en que-nos-diferencia.css) */
.qaa-preguntas {
   position: relative;
   isolation: isolate;
   overflow: hidden;
}

.qaa-preguntas::before {
   content: "";
   position: absolute;
   z-index: -1;
   left: -150px;
   top: 40px;
   width: 440px;
   aspect-ratio: 700 / 759;
   background: url("/media/optimizadas/marca/marca-agua-verde.webp") no-repeat center / contain;
   opacity: 0.06;
   pointer-events: none;
}

@media (max-width: 992px) {
   .qaa-preguntas::before {
      left: auto;
      right: -120px;
      top: -60px;
      width: 320px;
   }
}