/* Tecnifum — Carrusel de opiniones y tarjetas de publicaciones enlazadas. */

/* =========================================================
   CARRUSEL DE OPINIONES
   Desplazamiento nativo con anclaje: sin librería, sin JavaScript,
   y funciona con teclado, con rueda y con el dedo.
   ========================================================= */
.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 33%);
  gap: var(--espacio-4);
  margin-top: var(--espacio-8);
  padding-bottom: var(--espacio-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .carrusel { grid-auto-columns: minmax(260px, 85%); }
}

.carrusel > * {
  scroll-snap-align: start;
}

.carrusel__ayuda {
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
}

.opinion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-6);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.opinion__estrellas {
  display: flex;
  gap: 2px;
  margin: 0;
}

.opinion__estrellas .icono {
  width: 18px;
  height: 18px;
}

.estrella--llena { color: var(--atencion); }
.estrella--vacia { color: var(--borde-fuerte); }

.opinion blockquote {
  margin: 0;
  color: var(--texto);
  font-size: var(--texto-sm);
  line-height: 1.6;
}

.opinion blockquote::before { content: "\201C"; }
.opinion blockquote::after { content: "\201D"; }

.opinion footer {
  display: grid;
  gap: 2px;
  margin-top: auto;
  font-size: var(--texto-xs);
}

.opinion footer strong { color: var(--texto); }
.opinion footer span { color: var(--texto-tenue); }

/* =========================================================
   PUBLICACIONES Y UBICACIONES
   ========================================================= */
.embebidos {
  margin-top: var(--espacio-8);
}

.embebido {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  overflow: hidden;
  padding: var(--espacio-6);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  text-decoration: none;
  transition: border-color var(--transicion-rapida),
              transform var(--transicion-normal);
}

.embebido:hover {
  border-color: var(--marca);
  transform: translateY(-2px);
}

.embebido__portada {
  width: calc(100% + var(--espacio-12));
  margin: calc(var(--espacio-6) * -1) calc(var(--espacio-6) * -1) var(--espacio-2);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.embebido__red {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.embebido__red .icono {
  width: 18px;
  height: 18px;
}

.embebido__titulo {
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.embebido__detalle {
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
}