/* Seccion de servicios y cinta: el diseno de la propuesta 1, que Daap eligio.
   Se adapta a la paleta nocturna del resto del sitio. */
.cinta { overflow: hidden; border-block: 1px solid var(--line); background: var(--surf); }
.cinta-in { display: flex; width: max-content; animation: desliza 38s linear infinite; }
.cinta-in span { padding: 1.1rem 1.6rem; font: 700 clamp(1rem, 2vw, 1.35rem)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.cinta-in span:nth-child(4n+1)::after { color: var(--magenta); }
.cinta-in span::after { content: '✦'; margin-left: 3.2rem; color: var(--cian); }
.filtros { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.6rem; scrollbar-width: none; }
.filtros button { flex: none; min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s; }
.filtros button[aria-selected="true"] { background: #fff; color: #07060B; border-color: #fff; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; justify-content: end; min-height: 380px; padding: 1.3rem;
  border-radius: var(--radio-caja); overflow: hidden; text-decoration: none; isolation: isolate; cursor: pointer; border: 0; text-align: left; background: var(--surf); }
.tarjeta.grande { grid-column: span 2; }
.tarjeta img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tarjeta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(7,6,11,.95)); }
.tarjeta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--degradado); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.tarjeta:hover img, .tarjeta:focus-visible img { transform: scale(1.07); }
.tarjeta:hover::after, .tarjeta:focus-visible::after { opacity: 1; }
.tarjeta .cat { align-self: start; margin-bottom: auto; padding: .35rem .7rem; border-radius: 999px; background: rgba(7,6,11,.6); backdrop-filter: blur(6px); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tarjeta h3 { font-size: 1.5rem; margin: 0 0 .3rem; }
.tarjeta p { margin: 0; color: #DCD5EE; font-size: .95rem; }
.tarjeta .ver { margin-top: .9rem; font-weight: 700; font-size: .9rem; color: var(--lima); }
.tarjeta .ico-video { position: absolute; top: 1.3rem; right: 1.3rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.tarjeta .ico-video::before { content: ''; margin-left: 3px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }


/* Seccion "Somos la Familia Daap": viene de la propuesta 1. */
.familia { position: relative; padding-block: clamp(6rem, 14vw, 10rem); isolation: isolate; overflow: hidden; }
.familia .video-fondo { z-index: -2; }
.familia-velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,11,.95) 0%, rgba(7,6,11,.75) 45%, rgba(7,6,11,.25) 100%); }
.familia-in { max-width: 1240px; }
.familia-in > * { max-width: 36rem; }
.familia p:not(.sobretitulo) { color: #E4DEF5; }
.sellos { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sellos li { padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid var(--line); background: rgba(7,6,11,.5); backdrop-filter: blur(8px); }
.sellos strong { color: var(--lima); margin-right: .4rem; }

/* La cinta avanza sin parar: la lista se escribe dos veces y se desplaza media
   pista, así el salto de vuelta al inicio no se nota. Sin estos fotogramas la
   cinta queda quieta y solo se ven los primeros servicios. */
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Con "reducir movimiento" no se mueve sola, pero se puede recorrer con el dedo
   o la rueda: si no, quedarían escondidos casi todos los servicios. */
@media (prefers-reduced-motion: reduce) {
  .cinta { overflow-x: auto; }
  .cinta-in { animation: none; }
}

/* En celular las tarjetas van en una sola columna: la destacada deja de ocupar
   dos, que es lo que dejaba una segunda columna aplastada contra el borde. */
@media (max-width: 620px) {
  .tarjeta.grande { grid-column: auto; }
  .tarjeta { min-height: 320px; }
}

/* El velo de "Somos la Familia Daap" baja de arriba abajo en pantallas
   angostas: de lado dejaba el texto sobre la parte clara del video. */
@media (max-width: 700px) {
  .familia-velo { background: linear-gradient(180deg, rgba(7,6,11,.6), rgba(7,6,11,.95)); }
}

/* Las tarjetas que están fuera de pantalla no se dibujan hasta que se llega a
   ellas: con 17 fotos grandes, eso le quita trabajo al navegador al desplazar.
   El tamaño declarado evita que la barra de desplazamiento pegue saltos. */
.tarjeta { content-visibility: auto; contain-intrinsic-size: auto 380px; }