:root {
    --morado: #0279a4;
    --morado-header: #0279a4;
    --amarillo: #ffb703;
    --rosa: #ec4899;
    --naranja: #f97316;
    --cian: #22d3ee;
}

* { box-sizing: border-box; }
/* Freno básico anticopia (ver js/proteccion.js) — los campos de formulario quedan
   fuera a propósito, para que se pueda seguir escribiendo/seleccionando en ellos. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
/* El banner de ancho completo (.hero-carrusel) usa 100vw para salirse del contenedor
   centrado — 100vw incluye el ancho de la barra de scroll, así que sin esto metía
   unos pixeles de scroll horizontal invisible. */
html, body { overflow-x: hidden; }
body { font-family: 'Poppins', Arial, sans-serif; margin: 0; color: #222; background: #faf9fc; }

/* Pantalla de carga: cubre la página con el logo mientras termina de cargar todo
   (window.onload), y se desvanece sola — ver el script junto a #pantalla-carga en
   inc/header.php. */
.pantalla-carga {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s ease;
}
.pantalla-carga.oculto { opacity: 0; pointer-events: none; }
.pantalla-carga-logo {
    width: 160px;
    max-width: 45vw;
    animation: pantalla-carga-vaiven 1.1s ease-in-out infinite;
}
@keyframes pantalla-carga-vaiven {
    0%, 100% { transform: translateX(-16px); }
    50% { transform: translateX(16px); }
}
@media (prefers-reduced-motion: reduce) {
    .pantalla-carga-logo { animation: none; }
}
a { color: #0e7a92; text-decoration: none; }

.banda-anuncios { background: var(--amarillo); text-align: center; padding: 9px 16px; overflow: hidden; }
.banda-anuncios-texto { transition: opacity 0.3s ease; font-weight: 700; font-size: 14px; color: #1a1a1a; }
.banda-anuncios-texto p { margin: 0; }

.tienda-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 24px 10px;
    background: var(--morado-header);
}
.tienda-header-fila1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.tienda-header-espaciador { min-width: 1px; }
.tienda-header .logo { justify-self: center; }
.tienda-header .logo img { height: 130px; display: block; transition: transform .15s ease; }
.tienda-header .logo img:hover { transform: scale(1.08); }
.tienda-header-fila1 .tienda-nav { justify-self: end; }
.tienda-header-fila2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.tienda-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tienda-nav-secundaria { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.buscador { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.buscador-sugerencias {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    max-height: 360px;
    overflow-y: auto;
    z-index: 50;
    padding: 8px 0;
}
.buscador-sugerencias-grupo {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #999;
    padding: 8px 16px 4px;
}
.buscador-sugerencia {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: #333;
    font-size: 14px;
}
.buscador-sugerencia:hover { background: #f3f1f8; }
.buscador-sugerencia-icono { font-size: 15px; flex-shrink: 0; }
.buscador-sugerencia img,
.buscador-sugerencia-sin-imagen {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 6px;
    flex-shrink: 0;
}
.buscador-sugerencias-vacio { padding: 16px; color: #999; font-size: 13px; text-align: center; }
.buscador-campo {
    position: relative;
    display: flex;
    align-items: center;
    background: #f3f1f8;
    border-radius: 999px;
    padding: 0 18px;
    height: 52px;
    min-width: 160px;
}
.buscador-campo .buscador-icono {
    display: flex;
    color: var(--morado);
    margin-right: 10px;
    flex-shrink: 0;
}
.buscador-campo input {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #222;
    padding: 20px 0 0;
}
/* Etiqueta "Búsqueda": empieza centrada como si fuera el placeholder, y al enfocar
   (o si ya hay texto escrito) sube y se encoge arriba del campo, con transición
   suave — el input usa placeholder=" " (un espacio) a propósito, para que
   :placeholder-shown funcione y sepamos cuándo está realmente vacío. Separada del
   texto escrito (top:6px vs el padding-top:20px del input) para que no se encimen. */
.buscador-campo label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8a8398;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, transform .18s ease, color .18s ease;
}
.buscador-campo input:focus + label,
.buscador-campo input:not(:placeholder-shown) + label {
    top: 6px;
    transform: translateY(0);
    font-size: 10px;
    color: var(--morado);
    font-weight: 600;
}
.nav-link { color: #fff; font-size: 14px; transition: transform .15s ease, color .15s ease; display: inline-block; }
.nav-link:hover { color: var(--amarillo); transform: scale(1.05); }
.nav-link-carrito { display: inline-flex; align-items: center; gap: 4px; }
.icono-carrito { font-style: normal; font-size: 18px; }
.icono-carrito-wrap { position: relative; display: inline-flex; }
.icono-carrito-svg { display: block; color: #fff; }
.badge-carrito {
    position: absolute;
    top: -11px;
    right: -13px;
    background: var(--naranja);
    color: #fff;
    border-radius: 50%;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--morado-header);
}
.nav-link-secundario { color: #fff; font-size: 13px; opacity: .9; transition: transform .15s ease, opacity .15s ease; }
.nav-link-secundario:hover { opacity: 1; color: var(--amarillo); transform: scale(1.05); }

.categorias-circulos {
    display: flex;
    justify-content: center;
    gap: 14px;
    overflow-x: auto;
    padding: 20px 24px;
    max-width: 1500px;
    margin: 0 auto;
    scrollbar-width: thin;
}
/* Tarjetas de categoría: ícono + nombre juntos en una sola tarjeta (antes eran un
   círculo pequeño con la etiqueta aparte, debajo). Al tocar una se abre el panel de
   marcas (ver js/categorias.js) en vez de navegar directo. */
.categoria-circulo {
    box-sizing: border-box;
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    border-radius: 20px;
    background: #e2f2f5;
    border: 2px solid transparent;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.categoria-circulo:hover { transform: translateY(-3px); }
.categoria-circulo.activo { background: #fff; border-color: var(--amarillo); }
.categoria-circulo.cat-abierta { background: #fff; border-color: var(--morado); }
.categoria-circulo .circulo {
    color: var(--morado);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
}
.categoria-circulo:hover .circulo { transform: scale(1.08); }
.categoria-circulo .circulo svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.categoria-circulo .etiqueta {
    font-size: 12px;
    font-weight: 700;
    color: var(--morado);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Panel de marcas: se despliega pegado debajo de la tarjeta tocada (posición
   calculada en JS con getBoundingClientRect, ver js/categorias.js) — cada marca es
   un link directo a esa marca dentro de la categoría, sin selección múltiple. */
.marcas-panel {
    position: absolute;
    width: 240px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e3e0ea;
    box-shadow: 0 16px 40px rgba(18, 53, 67, .16);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease;
}
.marcas-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--flecha-left, 50%);
    width: 14px; height: 14px;
    background: #fff;
    border-left: 1px solid #e3e0ea;
    border-top: 1px solid #e3e0ea;
    transform: translateX(-50%) rotate(45deg);
}
.marcas-panel.abierto { opacity: 1; pointer-events: auto; transform: translateY(0); }
.marcas-panel-kicker {
    padding: 12px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7785;
}
.marcas-panel-lista { max-height: 300px; overflow-y: auto; padding: 2px 6px 8px; }
.marcas-panel .marca-item {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border-radius: 9px;
    color: var(--morado);
}
.marcas-panel .marca-item:hover { background: #e2f2f5; }
.marcas-panel .marca-item .avatar {
    width: 30px; height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    background: #e2f2f5;
    color: var(--morado);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
}
.marcas-panel .marca-item:hover .avatar { background: #fff; }
.marcas-panel .marca-item .nombre { font-size: 13.5px; font-weight: 600; flex: 1; }
.marcas-panel .marca-item .flecha {
    flex-shrink: 0;
    color: #6b7785;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .12s ease, transform .12s ease;
}
.marcas-panel .marca-item:hover .flecha { opacity: 1; transform: translateX(0); }
.marcas-panel .marca-item .flecha svg { width: 15px; height: 15px; display: block; }
.marcas-panel-ver-todas {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    width: calc(100% - 12px);
    margin: 8px 6px 10px;
    background: var(--amarillo);
    color: #201400;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    transition: transform .1s ease;
}
.marcas-panel-ver-todas:hover { transform: translateY(-1px); }
.marcas-panel-ver-todas:active { transform: translateY(0); }

.layout-tienda {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px 24px;
}
.tienda-main { min-width: 0; min-height: 60vh; }

@media (max-width: 780px) {
    .tienda-header-fila1 { grid-template-columns: auto 1fr auto; }
    .tienda-header .logo img { height: 100px; }
}

.hero-carrusel {
    position: relative;
    /* Antes era height:320px fijo — con banners de distinta proporción, cada uno se
       recortaba/acercaba distinto. Con una proporción fija (la de los banners
       recomendados: 1600x365) el recorte es siempre el mismo, y ya no se necesita
       estirar la imagen más de lo que su tamaño real aguanta con nitidez. */
    aspect-ratio: 1600 / 365;
    min-height: 140px;
    overflow: hidden;
    /* Sin margen abajo: la tira de mayoreo (.banda-mayoreo) va pegada justo debajo,
       ese espacio de separación ahora lo pone ella, no el banner. */
    margin-bottom: 0;
    background: var(--morado);
    /* .hero-carrusel vive dentro de .layout-tienda (max-width:1500px, centrado) —
       esto lo saca de ese límite para que ocupe todo el ancho de la pantalla en vez
       de dejar franjas en blanco a los lados. Sin bordes redondeados aquí porque
       ahora toca los bordes de la pantalla.
       max-width:1920px porque los banners recomendados se exportan a 1920px de ancho
       real — en monitores más anchos que eso, se topa ahí (centrado) en vez de seguir
       estirándose más allá de su nitidez real, que es lo que se veía borroso. */
    width: 100vw;
    max-width: 1920px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
}
.hero-carrusel .slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.hero-carrusel .slide.activo { opacity: 1; }
/* Antes este degradado se ponía en TODOS los banners, aunque no tuvieran botón
   encima — apagaba el color de la foto sin ninguna necesidad. Ahora solo aparece en
   los banners que sí traen botón ("con-boton"), que es para lo que existe: que el
   botón se lea bien encima de la imagen. */
.hero-carrusel .slide.con-boton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2,121,164,.85), rgba(2,121,164,0) 60%);
}
.hero-carrusel .slide .texto { position: relative; padding: 24px; color: #fff; z-index: 2; }
.hero-carrusel .slide .texto h2 { margin: 0 0 6px; font-size: 20px; }
.hero-carrusel .puntos { position: absolute; bottom: 12px; right: 16px; display: flex; gap: 6px; z-index: 3; }
.hero-carrusel .puntos span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; }
.hero-carrusel .puntos span.activo { background: var(--amarillo); }

/* Tira de mayoreo: mensaje que se desliza sin parar, debajo del banner. El texto
   viene repetido varias veces en el HTML; la animación mueve la pista exactamente la
   mitad de su ancho (translateX(-50%)), y como la segunda mitad es idéntica a la
   primera, el ciclo se ve continuo sin salto. */
.banda-mayoreo {
    overflow: hidden;
    background: var(--naranja);
    padding: 11px 0;
    margin-bottom: 24px;
    /* Mismo truco que .hero-carrusel para salirse de .layout-tienda y llegar hasta
       los bordes de la pantalla — aquí es un color liso, no una foto, así que no
       necesita un max-width que la limite (no hay nitidez que perder al estirarla). */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.banda-mayoreo-track {
    display: inline-flex;
    width: max-content;
    white-space: nowrap;
    animation: banda-mayoreo-desliza 24s linear infinite;
}
.banda-mayoreo-item {
    display: inline-flex;
    align-items: center;
    padding: 0 28px;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}
@keyframes banda-mayoreo-desliza {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .banda-mayoreo-track { animation: none; }
}

/* Banner de marca: aparece arriba del listado cuando se filtra por una marca
   específica, entre los círculos de categoría y la barra de filtros/productos. */
.banner-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f1f8;
    border-radius: 18px;
    padding: 20px;
    margin: 20px 0;
}
.banner-marca img {
    max-height: 150px;
    max-width: 100%;
    object-fit: contain;
    transition: transform .15s ease;
}
.banner-marca img:hover { transform: scale(1.06); }

.barra-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.barra-filtros select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
}
.barra-filtros .quitar-filtros { font-size: 13px; color: #999; text-decoration: underline; }

#grilla-productos-sentinel { height: 1px; }
.grilla-productos-cargando {
    text-align: center;
    padding: 24px 0;
    color: #777;
    font-size: 14px;
}

.grilla-productos {
    display: grid;
    /* Antes el mínimo por tarjeta era 200px, y en una pantalla de escritorio normal
       caían 6 por fila — se sentían chicas. Con 300px de mínimo caben 4 en esa misma
       pantalla (tarjetas más grandes), y sigue siendo responsive: en pantallas más
       angostas (tablet, celular) cae solo a las que quepan, hasta 1 por fila, sin
       necesidad de reglas @media aparte — mismo mecanismo de siempre, solo con un
       mínimo más grande.
    */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}
/* Dentro de una sección del inicio (ej. "Lo más vendido", pocos productos) las
   tarjetas no deben estirarse a lo ancho de todo el contenedor — se centran en
   vez de repartirse con huecos grandes. */
.seccion-inicio .grilla-productos {
    grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
    justify-content: center;
}
/* En celular, el mínimo de 300px (o 200-220px de las secciones del inicio) no deja
   espacio para dos columnas, así que se quedaba en 1 producto por línea — se ve
   igual de bien con dos, y se aprovecha mucho mejor la pantalla al hacer scroll. */
@media (max-width: 640px) {
    .grilla-productos,
    .seccion-inicio .grilla-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-content: initial;
    }
}
.tarjeta-producto {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
/* La foto vive en su propia tarjeta blanca con sombra (antes flotaba sin fondo
   propio sobre el fondo lila claro de la página, así que se veía más chica y
   menos "producto real"). Al pasar el mouse, la tarjeta entera se levanta un
   poco y la sombra crece — la foto en sí ya no necesita su propio zoom aparte.
   Un padding chico (8px) — ni el marco grande de antes (14px + contain, se
   veía con mucho espacio en blanco) ni pegado al borde sin nada (se sentía muy
   apretado/recortado). Punto medio. */
.tarjeta-producto > a {
    display: block;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.tarjeta-producto:hover > a { box-shadow: 0 8px 20px rgba(0, 0, 0, .13); transform: translateY(-3px); }
/* Revisé fotos reales del catálogo: no todas tienen la misma proporción — una
   salió cuadrada (550x549) y otras dos salieron bien anchas (1600x1000, casi
   el doble de ancho que alto). Con object-fit:cover CUALQUIER caja fija le
   corta contenido a alguna de las dos formas (a las anchas, que parecen ser
   las más comunes y traen la etiqueta de pulgadas en la esquina, les cortaba
   la etiqueta). Por eso: object-fit:contain (nunca recorta nada) con una caja
   ancha (16:10 ≈ 1.6, la proporción real de las fotos anchas) — a esas les
   queda casi perfecta (poquísimo espacio libre), y a las cuadradas les deja
   una franja angosta a los lados en vez de perderles contenido. */
.tarjeta-producto img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: transparent; display: block; }
.tarjeta-producto .cuerpo { padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-producto h3 { font-size: 14px; margin: 0; flex: 1; font-weight: 500; }
.tarjeta-producto .precio { font-weight: bold; color: var(--morado); font-size: 20px; }

.btn-favorito {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    font-size: 17px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    transition: transform .15s;
}
.btn-favorito:hover { transform: scale(1.1); }
.btn-favorito.activo { color: var(--rosa); }
/* Solo dentro de las tarjetas de la cuadrícula (no en la página de producto,
   donde .acciones-producto lo vuelve position:static de todos modos y debe
   quedarse siempre visible junto al botón de agregar). Si el producto YA es
   favorito, el corazón se queda visible siempre — solo se esconde el corazón
   "vacío" hasta que pasas el mouse por esa tarjeta.
   Dentro de @media (hover:hover) a propósito: en celular no hay mouse (no
   existe "pasar el mouse"), así que sin este candado el corazón nunca
   aparecería ahí y nadie podría marcar favoritos desde el teléfono. */
@media (hover: hover) {
    .tarjeta-producto .btn-favorito { opacity: 0; transition: opacity .2s ease, transform .15s ease; }
    .tarjeta-producto:hover .btn-favorito,
    .tarjeta-producto .btn-favorito.activo { opacity: 1; }
}

.acciones-producto { display: flex; align-items: center; gap: 10px; }
.acciones-producto .boton-agregar { flex: 1; }
.acciones-producto .btn-favorito { position: static; width: 44px; height: 44px; font-size: 20px; flex-shrink: 0; }

.boton {
    display: inline-block;
    background: var(--morado);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease, background .15s ease;
}
.boton:hover { background: #0b6072; transform: scale(1.05); }
.boton.secundario { background: #e2f2f5; color: var(--morado); }
.boton:disabled { background: #ccc; cursor: not-allowed; transform: none; }

.boton-agregar {
    display: block;
    width: 100%;
    background: var(--amarillo);
    color: var(--morado);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease;
}
.boton-agregar:hover { transform: scale(1.05); }
.boton-agregar:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.producto-detalle { display: flex; gap: 32px; flex-wrap: wrap; }
.producto-detalle .imagenes { flex: 1; min-width: 280px; }
.producto-detalle .imagenes img { width: 100%; border-radius: 10px; }
.producto-detalle .info { flex: 1; min-width: 280px; }
.producto-detalle .precio { font-size: 26px; font-weight: bold; color: var(--morado); margin: 10px 0; }
.selector-variante { margin: 14px 0; }
.selector-variante select { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }
.selector-variante > strong { display: block; margin-bottom: 10px; font-size: 14px; }
.selector-variante #color-elegido { font-weight: 400; color: var(--morado); }

.grid-colores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.swatch-color {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, transform .1s ease;
    font-family: inherit;
}
.swatch-color:hover { border-color: #ccc; transform: translateY(-1px); }
.swatch-color.activo { border-color: var(--morado); background: #eaf6fa; }
.swatch-color img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f7f7f7; border-radius: 6px; display: block; margin-bottom: 6px; }
.swatch-color span { display: block; font-size: 11px; font-weight: 600; color: #333; line-height: 1.2; }

.fila-carrito {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid #eee;
}
.fila-carrito img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: #f0f0f0; }
.fila-carrito .nombre { flex: 1; }
.fila-carrito input[type="number"] { width: 44px; padding: 6px; border-radius: 6px; border: 1px solid #ccc; text-align: center; }
.fila-carrito input[type="number"]::-webkit-inner-spin-button,
.fila-carrito input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fila-carrito input[type="number"] { -moz-appearance: textfield; }
.selector-cantidad { display: flex; align-items: center; gap: 4px; }
.selector-cantidad .btn-cantidad {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1px solid #ccc; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: #333;
}
.selector-cantidad .btn-cantidad:hover { background: #f0f0f0; }
@media (max-width: 480px) {
    .fila-carrito {
        display: grid;
        grid-template-columns: 64px minmax(0,1fr) auto auto;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 8px;
        align-items: center;
    }
    .fila-carrito img { grid-column: 1; grid-row: 1 / span 2; }
    .fila-carrito .nombre { grid-column: 2 / span 3; grid-row: 1; }
    .fila-carrito .selector-cantidad { grid-column: 2; grid-row: 2; justify-self: start; }
    .fila-carrito .subtotal-item { grid-column: 3; grid-row: 2; justify-self: end; font-weight: bold; white-space: nowrap; }
    .fila-carrito .btn-quitar { grid-column: 4; grid-row: 2; justify-self: end; }
}

.resumen-total { text-align: right; font-size: 18px; font-weight: bold; margin: 16px 0; }

form.checkout label { display: block; font-size: 13px; font-weight: bold; margin: 10px 0 4px; }
form.checkout input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }

.mensaje { padding: 10px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.mensaje.error { background: #fde8e8; color: #b91c1c; }
.mensaje.exito { background: #e6f6ec; color: #15803d; }

/* Notificación flotante (js/notificaciones.js) — ventana en la esquina para avisos
   puntuales (formularios, carrito, etc.), en vez de un mensaje fijo dentro de la página. */
#notificaciones-flotantes {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}
.notificacion-flotante {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    font-size: 14px;
    line-height: 1.4;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.notificacion-flotante.mostrar { transform: translateX(0); opacity: 1; }
.notificacion-texto { flex: 1; }
.notificacion-cerrar { all: unset; cursor: pointer; font-size: 18px; line-height: 1; opacity: .6; flex: none; }
.notificacion-cerrar:hover { opacity: 1; }
.notificacion-exito { background: #e6f6ec; color: #15803d; }
.notificacion-error { background: #fde8e8; color: #b91c1c; }

@media (max-width: 480px) {
    #notificaciones-flotantes { left: 12px; right: 12px; top: 12px; max-width: none; }
}

/* Bloque de dirección en checkout: elegir una dirección guardada o agregar una
   nueva — ver checkout.php. */
.bloque-envio {
    background: #fff;
    border: 1px solid #e3e0ea;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
}
.bloque-envio h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.bloque-envio .subt { font-size: 12.5px; color: #6b7785; margin: 0 0 18px; }

.lista-direcciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tarjeta-dir {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1.5px solid #e3e0ea;
    border-radius: 12px;
    padding: 14px 16px 14px 14px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.tarjeta-dir:hover { border-color: var(--morado); }
.tarjeta-dir.seleccionada { border-color: var(--morado); background: #e2f2f5; }
.tarjeta-dir input[type="radio"] { margin-top: 3px; accent-color: var(--morado); width: 17px; height: 17px; flex: none; }
.tarjeta-dir .info { flex: 1; min-width: 0; }
.tarjeta-dir .fila-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.tarjeta-dir .nombre-contacto { font-weight: 700; font-size: 14px; }
.tarjeta-dir .badge-principal {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--amarillo);
    color: #201400;
    padding: 2px 8px;
    border-radius: 999px;
}
.tarjeta-dir .direccion-texto { font-size: 13px; color: #6b7785; }
.tarjeta-dir .badge-incompleta {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: #fde8e8;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 999px;
}
.tarjeta-dir .btn-editar-dir {
    all: unset;
    box-sizing: border-box;
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--morado);
    cursor: pointer;
    padding: 3px 9px;
    border-radius: 999px;
    flex: none;
}
.tarjeta-dir .btn-editar-dir:hover { background: #e2f2f5; }

.btn-nueva-dir {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1.5px dashed #e3e0ea;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--morado);
    transition: border-color .12s ease, background .12s ease;
}
.btn-nueva-dir:hover { border-color: var(--morado); background: #e2f2f5; }
.btn-nueva-dir .icono-mas {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2f2f5;
    color: var(--morado);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none;
}
.btn-nueva-dir.activo .icono-mas { background: var(--morado); color: #fff; }

.form-dir { margin-top: 0; display: none; }
.form-dir.abierto { display: block; margin-top: 16px; padding-top: 18px; border-top: 1px solid #e3e0ea; }
.nota-form-dir {
    font-size: 12.5px;
    color: #b91c1c;
    background: #fde8e8;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 14px;
}
.grid-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.campo textarea {
    width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc;
    font-family: inherit; font-size: 14px; resize: vertical;
}
.campo textarea:focus { border-color: var(--morado); outline: none; }
.campo.full { grid-column: 1 / -1; }
.campo label { margin: 0; }
@media (max-width: 560px) {
    .grid-campos { grid-template-columns: 1fr; }
}
/* .form-dir .campo-check (2 clases) le gana en especificidad a la regla genérica
   "form.checkout label" (display:block + negritas) que si no, se lo comía. */
.form-dir .campo-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #222;
    background: #f4f8f9;
    border: 1.5px solid #e3e0ea;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 4px 0 4px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.form-dir .campo-check:hover { border-color: var(--morado); }
.form-dir .campo-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--morado);
    flex: none;
    cursor: pointer;
}

.marcas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.marcas-grid a {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    height: 130px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.marcas-grid a:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.marcas-grid img { max-width: 100%; max-height: 100%; object-fit: contain; }

.tiendas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tienda-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform .15s ease;
}
.tienda-card:hover { transform: scale(1.03); }
.tienda-card img { max-height: 90px; max-width: 100%; object-fit: contain; margin-bottom: 12px; }
.tienda-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--morado); }
.tienda-card p { margin: 4px 0; font-size: 13px; color: #555; }

.quienes-somos { line-height: 1.7; font-size: 15px; color: #333; }
.quienes-somos h1 { color: var(--morado); }

.tienda-footer { text-align: center; padding: 28px 20px; color: #888; font-size: 13px; background: #fff; border-top: 1px solid #eee; }
.footer-redes { display: flex; justify-content: center; gap: 16px; margin-bottom: 14px; }
.footer-redes a {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--morado); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.footer-redes a:hover { background: var(--rosa); transform: scale(1.15); }
.footer-redes svg { width: 20px; height: 20px; fill: #fff; }
.footer-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
.footer-links a { color: var(--morado); font-size: 13px; }

.footer-newsletter {
    text-align: center;
    padding: 24px 20px;
    background: #f3f1f8;
}
.footer-newsletter p { margin: 0 0 12px; font-weight: 700; color: var(--morado); }
.footer-newsletter form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-newsletter input[type="email"] {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: 14px;
    min-width: 240px;
}
.footer-newsletter #mensaje-newsletter { margin-top: 10px; font-size: 13px; }

.footer-politicas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}
.footer-politicas .politicas-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer-politicas a { color: #777; }
.footer-politicas .contacto { font-weight: 700; color: var(--morado); }

.whatsapp-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 500;
    transition: transform .15s;
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* ===== Secciones de la página de inicio ===== */
.seccion-inicio { margin: 48px 0; }
.seccion-inicio h2 { text-align: center; color: var(--morado); font-size: 22px; margin-bottom: 20px; }

.foto-decoracion-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.foto-decoracion-principal {
    border-radius: 14px;
    overflow: hidden;
    background: #eee;
    height: 380px;
}
.foto-decoracion-principal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.foto-decoracion-principal:hover img { transform: scale(1.06); }
.foto-decoracion-miniaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.foto-decoracion-miniaturas figure { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #eee; }
.foto-decoracion-miniaturas figure a { display: block; color: inherit; }
/* object-fit:contain (no cover) para que se vea la foto completa del producto sin
   recortarla — con fondo parejo detrás, así una foto de globo inflado y una foto de
   bolsa de producto (proporciones muy distintas) se ven del mismo tamaño de caja. */
.foto-decoracion-miniaturas img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #f7f7f7;
    display: block;
    transition: transform .2s ease;
}
.foto-decoracion-miniaturas figure:hover img { transform: scale(1.06); }
.foto-decoracion-miniaturas figcaption {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--morado);
    padding: 8px 10px;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Marcas del inicio: línea que se desliza sola, sin tarjeta/fondo detrás del logo
   (el logo mismo es el botón). El listado va duplicado en el HTML para que la
   animación se vea continua (al llegar a la mitad, ya se ve idéntico al inicio). */
.marcas-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marcas-marquee-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: marcas-marquee-scroll 28s linear infinite;
}
.marcas-marquee:hover .marcas-marquee-track { animation-play-state: paused; }
/* Cada logo vive en una "caja" del MISMO ancho (160px), sin importar su forma real —
   algunos logos son casi cuadrados y otros muy anchos (hasta el doble entre sí), así
   que sin esto cada uno ocupa un espacio visual muy distinto al pasar. En pantallas
   grandes se alcanzan a ver varios logos a la vez y esa diferencia se disimula, pero
   en el celular casi siempre se ve nada más uno, así que el salto de tamaño era muy
   notorio ahí — por eso el ancho fijo importa más en móvil que en escritorio. */
.marcas-marquee-track a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 160px;
    transition: transform .15s ease;
}
.marcas-marquee-track a:hover { transform: scale(1.08); }
.marcas-marquee-track img { height: 100px; width: auto; max-width: 100%; object-fit: contain; display: block; }
@keyframes marcas-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 780px) {
    /* Menos espacio entre logos y cajas/alto más chico: con el tamaño de escritorio
       casi no cabía ni un logo completo en la pantalla del celular. */
    .marcas-marquee-track { gap: 28px; }
    .marcas-marquee-track a { width: 110px; }
    .marcas-marquee-track img { height: 64px; }
}
@media (max-width: 780px) { .foto-decoracion-grid { grid-template-columns: 1fr; } }


.embajadores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.embajador-card { text-align: center; }
.embajador-avatar {
    width: 100px; height: 100px; border-radius: 50%;
    background: #cfd8dc; color: #78909c;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; font-size: 44px;
}
.embajador-card p { font-weight: 700; color: var(--morado); font-size: 13px; margin: 0; }
.embajador-card small { display: block; color: #777; font-size: 12px; margin-top: 2px; }
.embajador-avatar-foto { background: #cfd8dc; object-fit: cover; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bloque-placeholder {
    background: #eef2f3;
    border: 2px dashed #c7d0d2;
    border-radius: 14px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #607076;
    font-weight: 700;
    padding: 20px;
}
.bloque-placeholder .icono-grande { font-size: 40px; }
.bloque-placeholder img { max-width: 100%; max-height: 160px; object-fit: contain; }

/* Foto real de la tienda: el alto exacto lo fija JS (ver script al final de la sección
   de Ubicación en index.php), igualándolo al bloque de mapa+tarjeta de al lado — CSS
   Grid por sí solo no lo lograba porque la imagen "empujaba" su alto natural (más alto
   que el mapa). Aquí solo se define cómo se comporta la imagen UNA VEZ que su
   contenedor ya tiene un alto definido: llenarlo y recortar sin perder calidad. */
.bloque-foto-tienda { padding: 0; overflow: hidden; min-height: 0; }
.bloque-foto-tienda img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 14px;
}
@media (max-width: 780px) {
    /* En móvil las columnas se apilan, ya no hay un bloque de al lado con el que
       igualar altura (el JS no aplica ahí) — se usa un alto fijo razonable. */
    .bloque-foto-tienda { height: 260px !important; }
}

/* "Sube tu decoración" */
/* El marco (marco-decoracion.png) es cuadrado (1200x1200) y trae un rectángulo blanco
   ya diseñado para la foto — para que nunca se recorte ni se distorsione, la caja debe
   tener SIEMPRE esa misma proporción 1:1, sin importar qué tan alta salga la columna de
   resultados de al lado (por eso align-self:start, para no estirarse con el grid). */
#inspirate-subir {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    align-self: start;
    padding: 0;
}
/* El marco va de fondo, cubriendo toda la caja tal cual (mismo 1:1, sin recorte).
   Selector con #inspirate-subir a propósito: la regla vieja ".bloque-placeholder img"
   (más abajo en el archivo, pero con un ID de por medio aquí gana siempre) achicaba
   CUALQUIER imagen dentro de estos cuadros a max-height:160px — sin el ID delante,
   esa regla vieja le ganaba a esta por especificidad y el marco se veía chiquito. */
#inspirate-subir .inspirate-marco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
}
/* La foto real y el aviso "Sube tu decoración" van EXACTAMENTE sobre el rectángulo
   blanco del marco (medido a mano sobre el PNG: 6.25% desde la izquierda, 28.75% desde
   arriba, 86.25% de ancho, 63.75% de alto) — nunca deben cubrir el marco alrededor. */
#inspirate-subir #inspirate-preview {
    position: absolute;
    left: 6.25%;
    top: 28.75%;
    width: 86.25%;
    height: 63.75%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 6px;
    z-index: 2;
}
#inspirate-subir-contenido {
    position: absolute;
    left: 6.25%;
    top: 28.75%;
    width: 86.25%;
    height: 63.75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    text-align: center;
    z-index: 2;
}
.inspirate-ayuda { font-weight: 400; font-size: 12px; color: #8a969a; margin: 0; max-width: 260px; }
#inspirate-resultados.bloque-placeholder { color: #607076; }
#inspirate-resultados:not(.bloque-placeholder) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: left;
    justify-content: flex-start;
    padding: 20px;
}
/* Lista compacta (una fila por producto) en vez de tarjetas grandes — importante
   cuando la IA detecta muchos colores a la vez y no se debe comer toda la página. */
.inspirate-lista { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; }
.inspirate-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}
.inspirate-fila:last-child { border-bottom: none; }
.inspirate-fila img { width: 52px; height: 52px; object-fit: contain; background: #f7f7f7; border-radius: 8px; flex-shrink: 0; }
.inspirate-fila .info { flex: 1; min-width: 0; }
.inspirate-fila .info h3 { font-size: 13px; margin: 0 0 2px; line-height: 1.3; font-weight: 600; }
.inspirate-fila .info .precio { font-size: 15px; font-weight: bold; color: var(--morado); }
.inspirate-cantidad { font-size: 11px; color: #777; margin: 2px 0 0; line-height: 1.3; }
.inspirate-fila .boton-agregar {
    width: auto;
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 12px;
    white-space: nowrap;
}
.inspirate-fila-oculta { display: none; }
.inspirate-fila-oculta.inspirate-fila-mostrar { display: flex; }
.inspirate-btn-ver-mas { align-self: center; }
.inspirate-nota { font-size: 13px; color: #607076; background: #fff; border-radius: 10px; padding: 12px; margin: 0; }
.inspirate-btn-otra, .inspirate-btn-todo { align-self: center; }
.inspirate-btn-todo { margin-bottom: 4px; }
@media (max-width: 480px) {
    .inspirate-fila { flex-wrap: wrap; }
    .inspirate-fila .boton-agregar { margin-left: 64px; }
}

.bloque-ubicacion { display: flex; flex-direction: column; gap: 12px; }
.mapa-ubicacion {
    width: 100%;
    height: 200px;
    border: 0;
    border-radius: 14px;
    display: block;
}
.tarjeta-ubicacion {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
}
.tarjeta-ubicacion h3 { margin: 0 0 8px; color: var(--morado); font-size: 20px; }
.tarjeta-ubicacion-direccion { font-weight: 700; color: #222; margin: 0 0 10px; }
.tarjeta-ubicacion-horarios { color: #555; font-size: 13px; line-height: 1.6; margin: 0 0 10px; }
.tarjeta-ubicacion-telefono { color: #555; font-size: 13px; margin: 0 0 14px; }
.tarjeta-ubicacion .boton { display: inline-block; }

@media (max-width: 780px) { .dos-columnas { grid-template-columns: 1fr; } }

.actividades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.actividad-card {
    display: block;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 28px 16px;
    text-align: center;
    font-weight: 800;
    color: var(--morado);
    transition: transform .15s ease, box-shadow .15s ease;
}
.actividad-card:hover { transform: scale(1.04); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.actividad-card-academia, .actividad-card-logo-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; }
.actividad-card-academia { cursor: pointer; }
.actividad-card-logo { max-width: 100%; max-height: 230px; width: auto; height: auto; }
.actividad-card-cta {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #0079A4;
    border-radius: 999px;
    padding: 7px 14px;
}
.actividad-card-cta-oculto { display: none; }