/* ==========================================================================
   RODCARS · Tarjetas del sitio público
   --------------------------------------------------------------------------
   Dos sistemas:
     1) Producto (Autos y Autopartes) — las arma fetch_productos*.php por AJAX,
        así que aquí solo se les da forma con CSS: nada que tocar en el PHP.
     2) Testimonio (portada) — tarjeta oscura, para que sobre el blanco de la
        página el resplandor cian sí se lea.

   Variables de includes/header.php: --rc-cyan, --rc-gold, --rct-font.
   El revelado del logotipo sobre la foto lo pone assets/css/rc-imagenes.css.
   ========================================================================== */

body.rc-public {
    --rct-tinta:   #0b0c0e;
    --rct-gris:    #5c6772;
    --rct-cian-os: #147d87;                                        /* respaldo */
    --rct-cian-os: color-mix(in srgb, var(--rc-cyan, #35b7c3) 68%, #000);
}

/* ══════════════════════════════════════════════════════════════════════════
   1) TARJETA DE PRODUCTO
   ══════════════════════════════════════════════════════════════════════════ */

body.rc-public .product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    color: #fff;
    background:
        radial-gradient(130% 80% at 50% -20%, rgba(53,183,195,.20), transparent 62%),
        linear-gradient(165deg, #1a2129 0%, #0d1218 62%, #161d25 100%);
    box-shadow: 0 14px 32px rgba(0,0,0,.45);
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow  .35s ease,
                border-color .35s ease;
}

body.rc-public .product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(53,183,195,.45);
    box-shadow: 0 26px 54px rgba(0,0,0,.55), 0 0 36px rgba(53,183,195,.30);
}

/* ── Filo de luz que recorre el contorno ──────────────────────────────────
   El truco: un cono de color sobre todo el borde, recortado con `mask` para
   que solo quede el anillo de 1.5px. El ángulo se anima con @property; si el
   navegador no lo soporta el anillo simplemente se queda quieto. */
@property --rc-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

body.rc-public .product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--rc-ang),
        rgba(53,183,195,0)    0deg,
        rgba(53,183,195,0)  196deg,
        rgba(53,183,195,.85) 262deg,
        rgba(221,171,62,.95) 296deg,
        rgba(53,183,195,0)  338deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
    animation: rcGiro 10s linear infinite;
    transition: opacity .35s ease;
}
body.rc-public .product-card:hover::before {
    opacity: 1;
    animation-duration: 3.6s;
}

@keyframes rcGiro { to { --rc-ang: 360deg; } }

/* ── Foto: misma proporción en todas, para que la rejilla quede pareja ──── */
body.rc-public .product-card .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
body.rc-public .product-card .card-body {
    padding: .95rem 1.05rem 1.05rem;
}

/* El HTML trae el nombre en cian por estilo en línea; sobre la placa negra
   queremos blanco, de ahí el !important. */
body.rc-public .product-card .card-title {
    color: #fff !important;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.32;
    margin-bottom: .1rem;
    min-height: 2.64em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}
body.rc-public .product-card:hover .card-title { color: var(--rc-cyan, #35b7c3) !important; }


/* ── Precio: es lo que más se mira, así que va con la tipografía técnica ── */
body.rc-public .product-card .product-price {
    position: relative;
    padding-top: .8rem;
    margin-top: .2rem;
    margin-bottom: 1rem !important;
    font-family: var(--rct-font);
    font-size: 1.16rem;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 0 20px rgba(53,183,195,.40);
}
/* Filo sobre el precio: arranca corto y se estira al apuntar la tarjeta */
body.rc-public .product-card .product-price::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 42px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rc-cyan, #35b7c3), var(--rc-gold, #ddab3e));
    box-shadow: 0 0 10px rgba(53,183,195,.55);
    transition: width .45s cubic-bezier(.22,1,.36,1);
}
body.rc-public .product-card:hover .product-price::before { width: 100%; }
body.rc-public .product-card .product-price strong { font-weight: 400; }
body.rc-public .product-card .product-price del {
    color: rgba(255,255,255,.34);
    font-size: .78em;
    font-weight: 400;
}
/* El precio de oferta viene con color:red en línea; sobre negro el rojo puro
   vibra, así que se aclara a un coral que sí se lee */
body.rc-public .product-card .product-price > span:not(.badge) {
    color: #ff7a68 !important;
    text-shadow: 0 0 16px rgba(255,122,104,.35);
}

/* Oferta: la etiqueta pasa de rojo a la placa dorada de la casa; el precio
   rebajado sí se queda en rojo, que es lo que la gente busca de un vistazo */
body.rc-public .product-card .badge.bg-danger {
    background: linear-gradient(135deg, var(--rc-gold, #ddab3e), #f2cd78 52%, var(--rc-gold, #ddab3e)) !important;
    color: #0b0c0e !important;
    font-family: var(--rct-font);
    font-size: .55rem;
    font-weight: 400;
    letter-spacing: .07em;
    padding: .45em .7em;
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 0 12px rgba(221,171,62,.45);
}

body.rc-public .product-card .promotion-countdown {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #b4472f;
}
body.rc-public .product-card .promotion-countdown:empty { display: none; }

/* ── Fila de acción ─────────────────────────────────────────────────────── */
body.rc-public .product-card .card-body .mt-auto { gap: .55rem; }
body.rc-public .product-card .card-body .mt-auto .me-3 { margin-right: 0 !important; }

body.rc-public .product-card input[type="number"] {
    width: 62px !important;
    padding: .5rem .25rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: rgba(255,255,255,.05);
}
body.rc-public .product-card input[type="number"]:focus {
    border-color: var(--rc-cyan, #35b7c3);
    box-shadow: 0 0 0 3px rgba(53,183,195,.18);
}

body.rc-public .btn-agregar,
body.rc-public .btn-detalle {
    flex: 1 1 auto;
    padding: .62rem .9rem;
    border: 0;
    border-radius: 9px;
    font-family: var(--rct-font);
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
body.rc-public .btn-agregar {
    position: relative;
    overflow: hidden;
    width: 100%;
    color: #04252a;
    background: linear-gradient(135deg, var(--rc-cyan, #35b7c3), #7fd8e0 52%, var(--rc-cyan, #35b7c3));
    box-shadow: 0 6px 16px rgba(53,183,195,.28);
}
body.rc-public .btn-agregar i { margin-right: .35rem; }

/* Destello que cruza el botón al apuntarlo */
body.rc-public .btn-agregar::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-190%);
    pointer-events: none;
}
body.rc-public .btn-agregar:hover::after {
    animation: rcBtnBrillo .75s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes rcBtnBrillo {
    from { transform: translateX(-190%); }
    to   { transform: translateX(330%); }
}
body.rc-public .btn-agregar:hover,
body.rc-public .btn-agregar:focus-visible {
    color: #04252a;
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 10px 22px rgba(53,183,195,.42);
}
body.rc-public .btn-detalle {
    color: var(--rct-cian-os);
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(53,183,195,.5);
}
body.rc-public .btn-detalle:hover {
    color: #04252a;
    background: rgba(53,183,195,.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   2) TARJETA DE TESTIMONIO
   Va en oscuro a propósito: sobre el blanco de la portada es lo único que
   deja que el resplandor cian se lea de verdad, y separa la sección.
   ══════════════════════════════════════════════════════════════════════════ */

body.rc-public .testimonial-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 300px;
    margin: 0;
    padding: 2rem 1.55rem 1.7rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(120% 90% at 50% -25%, rgba(53,183,195,.24), transparent 62%),
        linear-gradient(165deg, #1a2129 0%, #0d1218 62%, #161d25 100%);
    box-shadow: 0 18px 42px rgba(0,0,0,.45);
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow  .4s ease,
                border-color .4s ease;
}

body.rc-public .testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(53,183,195,.50);
    box-shadow: 0 30px 62px rgba(0,0,0,.55), 0 0 38px rgba(53,183,195,.30);
}

/* Comilla de marca de agua (sustituye a las comillas en línea) */
body.rc-public .testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: 4px; right: 18px;
    z-index: -1;
    font: 700 118px/.72 Georgia, "Times New Roman", serif;
    color: rgba(53,183,195,.14);
    pointer-events: none;
    transition: color .4s ease, transform .4s ease;
}
body.rc-public .testimonial-card:hover::before {
    color: rgba(53,183,195,.30);
    transform: translateY(5px) scale(1.05);
}

/* Barrido de luz al apuntar */
body.rc-public .testimonial-card::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 42%;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent,
        rgba(255,255,255,.10) 44%,
        rgba(53,183,195,.24) 62%,
        transparent);
    filter: blur(2px);
    transform: translateX(-170%);
    pointer-events: none;
}
body.rc-public .testimonial-card:hover::after {
    animation: rctarjHaz 1s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes rctarjHaz {
    0%   { transform: translateX(-170%); opacity: 0; }
    16%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(310%); opacity: 0; }
}

/* Retrato con anillo cian */
body.rc-public .testimonial-card > img {
    border: 2px solid rgba(53,183,195,.55);
    box-shadow: 0 0 0 5px rgba(53,183,195,.10), 0 0 22px rgba(53,183,195,.28);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
body.rc-public .testimonial-card:hover > img {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px rgba(53,183,195,.16), 0 0 32px rgba(53,183,195,.48);
}

/* Nombre · .fw-bold trae !important, por eso hay que insistir */
body.rc-public .testimonial-card h5 {
    font-family: var(--rct-font);
    font-size: .8rem;
    font-weight: 400 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .4rem !important;
}

/* Puesto / etiqueta */
body.rc-public .testimonial-card .text-muted {
    display: block;
    color: rgba(255,255,255,.52) !important;
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

body.rc-public .testimonial-card .fa-star {
    color: var(--rc-gold, #ddab3e) !important;
    font-size: .8rem;
    filter: drop-shadow(0 0 6px rgba(221,171,62,.45));
}

body.rc-public .testimonial-card .comment-text {
    margin: .5rem 0 0;
    color: rgba(255,255,255,.82);
    font-size: .93rem;
    font-style: normal;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Las comillas en línea sobran: ya está la marca de agua */
body.rc-public .testimonial-card .big-quotes { display: none; }

/* ── Flechas del carrusel ───────────────────────────────────────────────── */
body.rc-public .carousel-control-prev,
body.rc-public .carousel-control-next {
    top: 50%;
    width: 46px;
    height: 46px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: linear-gradient(180deg, #12171d, #05070a);
    box-shadow: 0 8px 22px rgba(11,12,14,.25);
    opacity: 1;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.rc-public .carousel-control-prev { left: .75rem; }
body.rc-public .carousel-control-next { right: .75rem; }
body.rc-public .carousel-control-prev:hover,
body.rc-public .carousel-control-next:hover {
    border-color: var(--rc-cyan, #35b7c3);
    box-shadow: 0 0 24px rgba(53,183,195,.42);
    transform: translateY(-50%) scale(1.06);
}
body.rc-public .carousel-control-prev i,
body.rc-public .carousel-control-next i {
    color: var(--rc-cyan, #35b7c3);
    font-size: 1.05rem;
}

/* ── Menos movimiento a quien lo pide ───────────────────────────────────── */
/* En teléfonos el anillo se queda quieto: repintar un cono por tarjeta en una
   rejilla larga sí se siente en equipos modestos. */
@media (max-width: 767.98px) {
    body.rc-public .product-card::before,
    body.rc-public .product-card:hover::before { animation: none; opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
    body.rc-public .product-card::before,
    body.rc-public .product-card:hover::before { animation: none; }
    body.rc-public .product-card,
    body.rc-public .testimonial-card,
    body.rc-public .testimonial-card > img,
    body.rc-public .btn-agregar,
    body.rc-public .btn-detalle { transition: none !important; }
    body.rc-public .product-card:hover,
    body.rc-public .testimonial-card:hover { transform: none; }
    body.rc-public .testimonial-card:hover::after { animation: none; }
    body.rc-public .product-card:hover::before { transition: none; }
    body.rc-public .btn-agregar:hover::after { animation: none; }
    body.rc-public .product-card:hover .product-price::before { transition: none; }
}

/* ── Paginación del catálogo ────────────────────────────────────────────── */
body.rc-public .pagination { gap: .35rem; }
body.rc-public .pagination .page-link {
    min-width: 40px;
    padding: .5rem .7rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    font-family: var(--rct-font);
    font-size: .7rem;
    color: rgba(255,255,255,.80);
    background: rgba(255,255,255,.04);
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body.rc-public .pagination .page-link:hover {
    color: #fff;
    border-color: rgba(53,183,195,.55);
    box-shadow: 0 0 16px rgba(53,183,195,.20);
}
body.rc-public .pagination .page-item.active .page-link {
    color: #04252a;
    border-color: transparent;
    background: linear-gradient(135deg, var(--rc-cyan, #35b7c3), #7fd8e0 52%, var(--rc-cyan, #35b7c3));
    box-shadow: 0 6px 16px rgba(53,183,195,.30);
}
body.rc-public .pagination .page-item.disabled .page-link {
    color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.02);
}

/* Si una foto concreta no carga, el texto alternativo se veía en azul de
   enlace sobre la placa negra. Esto lo deja discreto. */
body.rc-public .product-card .card-img-top {
    color: rgba(255,255,255,.42);
    font-size: .78rem;
    text-align: center;
}