/* ============================================================
   Muro de testimonios [testimonios]
   Prefijo de clases: cc-testi-
   ============================================================ */

.cc-testimonios {
    /* Tokens propios, copiados de assets/css/cotizador/01-base-y-progreso.css
       (paleta real de marca) para no depender de que ese archivo
       este cargado en la misma pagina. */
    --cc-color-primary-600: #fa5320;
    --cc-color-secondary-600: #0f8df4;
    --cc-color-secondary-700: #0578d6;
    --cc-color-neutral-050: #fcfcfd;
    --cc-color-neutral-200: #eef0f3;
    --cc-color-neutral-300: #dfe3e8;
    --cc-color-neutral-500: #a1a7ad;
    --cc-color-neutral-600: #707880;
    --cc-color-neutral-900: #28323b;
    --cc-radius-md: 0.8rem;
    --cc-radius-full: 99.9rem;

    --cc-testi-gap: 20px;
    --cc-testi-tarjetas-visibles: 3.5; /* cuantas tarjetas caben a la vez en el ancho real del muro */
    /* Ancho de tarjeta calculado para que quepan exactamente
       --cc-testi-tarjetas-visibles en el ancho REAL del contenedor
       (container query, no el viewport completo) — asi funciona igual
       de bien insertado a ancho completo o dentro de una columna mas
       angosta de Elementor. */
    --cc-testi-card-w: calc((100cqw - (var(--cc-testi-tarjetas-visibles) - 1) * var(--cc-testi-gap)) / var(--cc-testi-tarjetas-visibles));
    --cc-testi-card-w-vertical: calc(var(--cc-testi-card-w) * 0.6875);
    --cc-testi-seg-por-tarjeta: 10s; /* mas alto = mas lento */

    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    gap: var(--cc-testi-gap);
    width: 100%;
    container-type: inline-size;
}

/* ---------- Filas + marquee infinito ---------- */

.cc-testi-fila {
    overflow: hidden;
    width: 100%;
}

.cc-testi-track {
    display: flex;
    width: max-content;
    -webkit-animation: cc-testi-desliza-izq linear infinite;
    animation: cc-testi-desliza-izq linear infinite;
    -webkit-animation-duration: calc(var(--cc-testi-count) * var(--cc-testi-seg-por-tarjeta));
    animation-duration: calc(var(--cc-testi-count) * var(--cc-testi-seg-por-tarjeta));
}

.cc-testi-fila-bottom .cc-testi-track {
    -webkit-animation-name: cc-testi-desliza-der;
    animation-name: cc-testi-desliza-der;
}

.cc-testi-grupo {
    display: flex;
    /* stretch: todas las tarjetas de una fila comparten el alto de la
       mas alta (normalmente la tarjeta de imagen/video horizontal o
       vertical). Antes esto se veia mal porque la imagen se salia de
       su caja y inflaba ese alto sin control; ya con .cc-testi-media
       recortada con position:absolute+object-fit:cover, la tarjeta de
       medios mantiene su propio alto (por aspect-ratio) y ya no se
       "sale", asi que stretch ahora da el resultado esperado: las
       tarjetas de texto llenan ese mismo alto en vez de dejar hueco. */
    align-items: stretch;
    gap: var(--cc-testi-gap);
    flex-shrink: 0;
    padding-right: var(--cc-testi-gap);
}

@-webkit-keyframes cc-testi-desliza-izq { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@-moz-keyframes    cc-testi-desliza-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@-o-keyframes      cc-testi-desliza-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes         cc-testi-desliza-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@-webkit-keyframes cc-testi-desliza-der { from { -webkit-transform: translateX(-50%); } to { -webkit-transform: translateX(0); } }
@-moz-keyframes    cc-testi-desliza-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@-o-keyframes      cc-testi-desliza-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes         cc-testi-desliza-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Pausa: hover sobre la fila, o modal de video abierto */
.cc-testi-fila:hover .cc-testi-track,
.cc-testimonios.cc-testi-modal-abierto .cc-testi-track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .cc-testi-track { animation: none !important; -webkit-animation: none !important; }
    .cc-testi-fila { overflow-x: auto; }
    .cc-testi-grupo:last-child { display: none; } /* sin duplicado, sin loop infinito */
}

/* ---------- Tarjetas ---------- */

.cc-testi-card {
    flex-shrink: 0;
    box-sizing: border-box;
}

.cc-testi-card-texto {
    width: var(--cc-testi-card-w);
    background: var(--cc-color-neutral-050);
    border: 1px solid var(--cc-color-neutral-200);
    border-radius: var(--cc-radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-testi-media-wrap {
    position: relative;
    margin: -20px -20px 4px -20px;
    border-radius: var(--cc-radius-md) var(--cc-radius-md) 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.cc-testi-media-wrap.cc-testi-orientacion-vertical {
    aspect-ratio: 9 / 16;
}

.cc-testi-card-media {
    position: relative;
    width: var(--cc-testi-card-w);
    aspect-ratio: 4 / 3;
    border-radius: var(--cc-radius-md);
    overflow: hidden;
}
.cc-testi-card-media.cc-testi-orientacion-vertical {
    width: var(--cc-testi-card-w-vertical);
    aspect-ratio: 9 / 16;
}
.cc-testi-card-media.cc-testi-video-trigger,
.cc-testi-media-wrap.cc-testi-video-trigger {
    cursor: pointer;
}

.cc-testi-media {
    /* position:absolute + inset:0 en vez de width/height:100% relativos:
       asi el recorte "cover" no depende de que el alto en % se resuelva
       bien contra el padre (aspect-ratio + % de alto es fragil entre
       navegadores) y ademas evita que un img/video de mayor tamano
       natural se salga del contenedor redondeado sin recortarse. */
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

.cc-testi-play-boton {
    /* Ancho fluido (relativo a la tarjeta) en vez de un tamano fijo,
       para que se vea bien tanto en la tarjeta horizontal como en la
       vertical (formato historia). El aspect-ratio real del grafico
       (1005x250) lo mantiene el propio viewBox del SVG. */
    position: absolute;
    left: 50%;
    bottom: 14px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 46%;
    max-width: 170px;
    min-width: 90px;
    height: auto;
    display: block;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
}

.cc-testi-video-trigger:hover .cc-testi-play-boton {
    -webkit-transform: translateX(-50%) scale(1.08);
    transform: translateX(-50%) scale(1.08);
}

.cc-testi-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------- Pie de tarjeta: avatar + (nombre+verificado / estrellas) ---------- */

.cc-testi-pie {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Con la tarjeta estirada al alto de la fila (ver .cc-testi-grupo),
       esto ancla el pie siempre abajo del todo en vez de dejarlo pegado
       al texto con un hueco vacio despues. */
    margin-top: auto;
}

.cc-testi-identidad {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* min-width:0 es lo que permite que el nombre se pueda envolver o
       encoger en vez de desbordar la tarjeta cuando es muy largo. */
    min-width: 0;
    flex: 1 1 auto;
}

.cc-testi-estrellas {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.cc-testi-avatar-img {
    /* !important: Elementor y Hello Elementor traen un reset global
       "img{height:auto;max-width:100%}" — con fotos que no llegaron
       cuadradas de la Biblioteca de Medios, height:auto puede ganarle
       a nuestro alto fijo y deja el avatar ovalado en vez de circular. */
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    -o-object-fit: cover !important;
    object-fit: cover !important;
    flex-shrink: 0;
    display: block;
}

.cc-testi-avatar-iniciales {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:  var(--cc-color-primary-600);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.cc-testi-nombre-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cc-testi-nombre {
    font-weight: 600;
    color: var(--cc-color-neutral-900);
    /* Nombres muy largos se envuelven o parten en vez de desbordar
       la tarjeta o empujar las estrellas fuera de vista. */
    overflow-wrap: anywhere;
}

.cc-testi-badge-verificado {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* ---------- Titulo de resena + cuerpo ---------- */

.cc-testi-titulo {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
    color: var(--cc-color-neutral-900);
}

.cc-testi-texto {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--cc-color-neutral-600);
}

.cc-testi-cita::before { content: "\201C"; }
.cc-testi-cita::after  { content: "\201D"; }

.cc-testi-leermas-btn {
    display: inline;
    margin-left: 4px;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    color: var(--cc-color-secondary-600);
    text-decoration: underline;
    cursor: pointer;
}
.cc-testi-leermas-btn:hover {
    color: var(--cc-color-secondary-700);
}

/* ---------- Modal de video ---------- */

.cc-testi-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* display:none por defecto (coincide con el atributo "hidden" nativo);
       solo se muestra cuando JS quita ese atributo. No usar "display:flex"
       aqui directo: una regla de autor sin condicion le gana en cascada
       a la hoja de estilos del navegador para "[hidden]", y el modal
       quedaria visible siempre sin importar el atributo. */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cc-testi-modal:not([hidden]) {
    display: flex;
}

.cc-testi-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
}

.cc-testi-modal-caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    background: #000;
    border-radius: var(--cc-radius-md);
    overflow: hidden;
}

.cc-testi-modal-contenido,
.cc-testi-modal-contenido video,
.cc-testi-modal-contenido iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.cc-testi-modal-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Zoom de entrada (una sola vez por sesion) ---------- */

.cc-testi-zoom-preparar {
    opacity: 0;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.cc-testi-zoom-in {
    -webkit-animation: cc-testi-zoom-in .6s ease-out forwards;
    animation: cc-testi-zoom-in .6s ease-out forwards;
}

@-webkit-keyframes cc-testi-zoom-in { from { opacity: 0; -webkit-transform: scale(1.15); } to { opacity: 1; -webkit-transform: scale(1); } }
@-moz-keyframes    cc-testi-zoom-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@-o-keyframes      cc-testi-zoom-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes         cc-testi-zoom-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .cc-testimonios {
        /* En pantallas angostas, 3.5 tarjetas quedarian diminutas:
           se muestra 1 completa y una "espiada" de la siguiente. */
        --cc-testi-tarjetas-visibles: 1.3;
        --cc-testi-gap: 14px;
    }
}