/* Bloque "Mejora tu visita" de la ficha de producto (funciones/comparativa.php) */

/* Cada tarjeta ocupa las 6 filas de la rejilla (foto, nombre, precio, info, lista y botón) para que queden alineadas entre sí */
#comparativa .comp-cards {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1rem}
#comparativa .comp-card {display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; background: #fff; border: 2px solid #fff; border-radius: 10px; overflow: hidden;}
#comparativa .comp-card.comp-actual {border-color: var(--color1)}
#comparativa .comp-card > * {margin: 0; padding-left: 1.2rem; padding-right: 1.2rem}

#comparativa .comp-foto {position: relative; height: 150px; background-color: var(--bg-grey)}
#comparativa .comp-tag {position: absolute; left: 0.8rem; top: 0.8rem; padding: 2px 10px; border-radius: 10px; background: var(--color2); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;}
#comparativa .comp-actual .comp-tag {background: var(--color1)}

#comparativa h3 {padding-top: 1.2rem; font-family: 'ArquitectaBlack'; font-size: 1.4rem; font-style: normal; line-height: 1.1; text-transform: uppercase; color: var(--main)}
#comparativa h3 a {color: var(--main)}

#comparativa .comp-precio {padding-top: 0.4rem; font-size: 0.8rem; line-height: 1.2}
#comparativa .comp-precio strong {color: var(--color1); font-family: 'ArquitectaBlack'; font-size: 1.6rem}
#comparativa .comp-info {padding-top: 0.2rem; padding-bottom: 1rem; font-size: 0.75rem; line-height: 1.3; color: var(--main1)}

#comparativa .comp-lista {list-style: none; font-size: 0.8rem; line-height: 1.3}
#comparativa .comp-lista li {position: relative; margin: 0; padding: 0.45rem 0 0.45rem 1.5rem; border-top: 1px solid var(--bg-grey)}
#comparativa .comp-lista li:before {content: '✓'; position: absolute; left: 0; font-weight: 700; color: var(--color1)}
#comparativa .comp-lista li.extra {font-weight: 700}
#comparativa .comp-lista li.extra:before {content: '+'; color: var(--color2)}
#comparativa .comp-lista li.no {color: #b5b5b5}
#comparativa .comp-lista li.no:before {content: '—'; font-weight: 400; color: #ccc}

#comparativa .comp-btn {padding-top: 1rem; padding-bottom: 1.2rem}
#comparativa .comp-btn .btn {display: block; padding-left: 0.5rem; padding-right: 0.5rem}

/* Con dos tarjetas (la que se está viendo y una alternativa) el título va a la izquierda y las tarjetas a la derecha */
@media (min-width: 1201px){
	#comparativa .comp-n3 .comp-cards {grid-template-columns: repeat(3, minmax(0, 1fr))}
	#comparativa .comp-n2 {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: center}
	#comparativa .comp-n2 .comp-cards {grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0 !important}
}

@media (max-width: 1200px){
	#comparativa .comp-cards {grid-template-columns: repeat(2, minmax(0, 1fr))}
}

/* En móvil las tarjetas van en una fila que se desliza con el dedo y llega hasta el borde derecho de la caja */
@media (max-width: 767px){
	#comparativa .comp-cards {display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-right: -1.5rem; padding-right: 1.5rem; padding-bottom: 0.5rem}
	#comparativa .comp-card {display: flex; flex-direction: column; flex: 0 0 82%; scroll-snap-align: start}
	#comparativa .comp-foto {flex-shrink: 0; height: 120px}
	#comparativa h3 {font-size: 1.15rem}
	#comparativa .comp-lista li {padding-top: 0.35rem; padding-bottom: 0.35rem}
	#comparativa .comp-btn {margin-top: auto}
}